This is an automated email from the ASF dual-hosted git repository. heneveld pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit 6879475f13b8f705002c050d2c5f11c58bdb42c7 Author: Alex Heneveld <[email protected]> AuthorDate: Thu Oct 6 11:46:32 2022 +0100 tidy up workflow step title, show more info on steps --- .../components/workflow/workflow-step.directive.js | 34 ++++---- .../workflow/workflow-step.template.html | 96 ++++++++++++---------- .../app/components/workflow/workflow-steps.less | 49 ++++++----- 3 files changed, 95 insertions(+), 84 deletions(-) diff --git a/ui-modules/app-inspector/app/components/workflow/workflow-step.directive.js b/ui-modules/app-inspector/app/components/workflow/workflow-step.directive.js index 51e2aef7..5ef1dde2 100644 --- a/ui-modules/app-inspector/app/components/workflow/workflow-step.directive.js +++ b/ui-modules/app-inspector/app/components/workflow/workflow-step.directive.js @@ -70,30 +70,25 @@ export function workflowStepDirective() { $scope.json = json ? stringify(json) : null; } + $scope.stepTitle = { + index: index+1, + }; if (typeof step === 'string') { - $scope.stepPrefixClass = 'step-index'; - $scope.stepPrefix = index + 1; - $scope.stepTitleDetail = step; + $scope.stepTitle.code = step; } else { let shorthand = step.userSuppliedShorthand || step.s || step.shorthand; - $scope.stepTitleDetail = shorthand; + $scope.stepTitle.code = shorthand; + if (!shorthand) { + $scope.stepTitle.code = step.type || ''; + if (step.input) $scope.stepTitle.code += ' ...'; + } + if (step.name) { - $scope.stepPrefixClass = 'step-name'; - $scope.stepPrefix = step.name; - } else { - if (step.id) { - $scope.stepPrefixClass = 'step-id'; - $scope.stepPrefix = step.id; - } else { - $scope.stepPrefixClass = 'step-index'; - $scope.stepPrefix = index + 1; - - if (!shorthand) { - $scope.stepTitleDetail = step.type || ''; - if (step.input) $scope.stepTitleDetail += ' ...'; - } - } + $scope.stepTitle.name = step.name; + } + if (step.id) { + $scope.stepTitle.id = step.id; } } @@ -108,7 +103,6 @@ export function workflowStepDirective() { $scope.isWorkflowError = (workflow.data.status && workflow.data.status.startsWith('ERROR')); $scope.osi = workflow.data.oldStepInfo[index] || {}; $scope.stepContext = ($scope.isCurrent ? workflow.data.currentStepInstance : $scope.osi.context) || {}; - $scope.isFocusStep = $scope.workflow.tag && ($scope.workflow.tag.stepIndex === index); $scope.isFocusTask = false; diff --git a/ui-modules/app-inspector/app/components/workflow/workflow-step.template.html b/ui-modules/app-inspector/app/components/workflow/workflow-step.template.html index a0aa233a..86a79342 100644 --- a/ui-modules/app-inspector/app/components/workflow/workflow-step.template.html +++ b/ui-modules/app-inspector/app/components/workflow/workflow-step.template.html @@ -43,7 +43,14 @@ <div class="workflow-step" id="workflow-step-{{stepIindex}}" ng-class="vm.getWorkflowStepClasses(stepIndex)"> <div class="rhs-icons"> - <div ng-if="isFocusTask" class="workflow-step-pill focus-step" title="This step instance is for the task currently selected in the activity view."> + <div ng-if="stepTitle.name" class="step-name"> + {{ stepTitle.name}} + </div> + <div ng-if="stepTitle.id" class="workflow-step-pill step-id"> + <i class="fa fa-id-card-o"></i> + {{ stepTitle.id }} + </div> + <div ng-if="isFocusTask" class="workflow-step-pill focus-step label-info" title="This step instance is for the task currently selected in the activity view."> selected </div> <div ng-click="vm.toggleExpandState()" class="expand-toggle"> @@ -52,55 +59,60 @@ </div> <div class="step-block-title"> - <span ng-class="stepPrefixClass">{{ stepPrefix }}</span> - <span class="step-title-detail" ng-if="stepTitleDetail">{{ stepTitleDetail }}</span> + <span class="step-index">{{ stepTitle.index }}</span> + <span class="step-title-code">{{ stepTitle.code }}</span> </div> <div ng-if="expanded" class="step-details"> - <div ng-if="osi.countStarted" class="space-above"> + <div class="space-above"> <div> - <span ng-if="osi.countCompleted == osi.countStarted"> - <span ng-if="osi.countCompleted > 1"> - This step has run - <span ng-if="osi.countCompleted == 2"> - twice, - </span> - <span ng-if="osi.countCompleted > 2"> - {{ osi.countCompleted }} times, - </span> - most recently - </span> - <span ng-if="osi.countCompleted == 1"> - This step ran - </span> + <span ng-if="!osi.countStarted" class="space-above"> + This step has not been run<span ng-if="isRunning"> yet</span>. </span> - <span ng-if="osi.countCompleted != osi.countStarted"> - <span ng-if="isCurrent"> - <span ng-if="osi.countCompleted == osi.countStarted - 1"> - This step is currently running + <span ng-if="osi.countStarted"> + <span ng-if="osi.countCompleted == osi.countStarted"> + <span ng-if="osi.countCompleted > 1"> + This step has run + <span ng-if="osi.countCompleted == 2"> + twice, + </span> + <span ng-if="osi.countCompleted > 2"> + {{ osi.countCompleted }} times, + </span> + most recently </span> - <span ng-if="osi.countCompleted <= osi.countStarted - 2"> - This step has had errors previously and is currently running + <span ng-if="osi.countCompleted == 1"> + This step ran </span> </span> - <span ng-if="!isCurrent"> - <span ng-if="osi.countStarted == 1"> - This step had errors when it ran + <span ng-if="osi.countCompleted != osi.countStarted"> + <span ng-if="isCurrent"> + <span ng-if="osi.countCompleted == osi.countStarted - 1"> + This step is currently running + </span> + <span ng-if="osi.countCompleted <= osi.countStarted - 2"> + This step has had errors previously and is currently running + </span> </span> - <span ng-if="osi.countStarted > 2 && osi.countCompleted==0"> - This step has had errors on all previous runs, including when last run - </span> - <span ng-if="osi.countStarted > 2 && osi.countCompleted>0"> - This step has had errors on some previous runs. It most recently ran + <span ng-if="!isCurrent"> + <span ng-if="osi.countStarted == 1"> + This step had errors when it ran + </span> + <span ng-if="osi.countStarted > 2 && osi.countCompleted==0"> + This step has had errors on all previous runs, including when last run + </span> + <span ng-if="osi.countStarted > 2 && osi.countCompleted>0"> + This step has had errors on some previous runs. It most recently ran + </span> </span> </span> - </span> - <span ng-if="isFocusTask"> - as the activity currently being viewed (<span class="monospace">{{ stepContext.taskId }}</span>). - </span> - <span ng-if="!isFocusTask"> - in <a ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: stepContext.taskId })">task <span class="monospace">{{ stepContext.taskId }}</span></a>. + <span ng-if="isFocusTask"> + as the activity currently being viewed (<span class="monospace">{{ stepContext.taskId }}</span>). + </span> + <span ng-if="!isFocusTask"> + in <a ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: stepContext.taskId })">task <span class="monospace">{{ stepContext.taskId }}</span></a>. + </span> </span> </div> @@ -167,16 +179,16 @@ </div> </div></div> - <div class="data-row nested" ng-if="osi.workflowScratch"><div class="A">Workflow Vars</div> <div class="B multiline-code">{{ vm.yaml(osi.workflowScratch) }}</div></div> <div class="data-row nested" ng-if="stepContext.input"><div class="A">Input</div> <div class="B multiline-code">{{ vm.yaml(stepContext.input) }}</div></div> + <div class="data-row nested" ng-if="osi.workflowScratch"><div class="A">Workflow Vars</div> <div class="B multiline-code">{{ vm.yaml(osi.workflowScratch) }}</div></div> + <div class="data-row nested" ng-if="stepContext.otherMetadata" ng-repeat="(key,value) in stepContext.otherMetadata" id="$key"> + <div class="A">{{ key }}</div> <div class="B multiline-code">{{ vm.yamlOrPrimitive(value) }}</div> + </div> <div class="data-row nested" ng-if="!isCurrent && stepContext.output"><div class="A">Output</div> <div class="B multiline-code">{{ vm.yaml(stepContext.output) }}</div></div> </div> </div> </div> - <div ng-if="!osi.countStarted" class="space-above"> - This step has not been run<span ng-if="isRunning"> yet</span>. - </div> <div class="more-space-above" ng-if="vm.nonEmpty(stepContext) || vm.nonEmpty(step) || vm.nonEmpty(osi)"> diff --git a/ui-modules/app-inspector/app/components/workflow/workflow-steps.less b/ui-modules/app-inspector/app/components/workflow/workflow-steps.less index 59f2a854..f17e70bc 100644 --- a/ui-modules/app-inspector/app/components/workflow/workflow-steps.less +++ b/ui-modules/app-inspector/app/components/workflow/workflow-steps.less @@ -64,18 +64,33 @@ float: right; display: flex; gap: 1ex; + align-items: center; + margin-left: 1em; .expand-toggle { cursor: pointer; } + .step-name { + font-weight: 600; + font-size: 90%; + margin-right: 1ex; + margin-top: 1px; + } + + .step-id { + .monospace(); + font-size: 80%; + background-color: @primary-50; + } + .focus-step { + //background color comes from label-info class + //background: @primary-100; + } } .workflow-step-pill { padding: 2px 6px; - border-radius: 12px; - background: @gray-lighter; + border-radius: 9px; + //background: @gray-lighter; font-size: 75%; - &.focus-step { - background: @primary-100; - } } .step-block-title { overflow-x: hidden; @@ -83,33 +98,23 @@ white-space: nowrap; padding-right: 1.5ex; - .step-name, .step-id, .step-index { - padding-right: 1.5ex; - } - - .step-name { - font-weight: 600; - font-size: 90%; - } - - .step-id { - .monospace(); - font-size: 85%; - font-weight: 600; - } - .step-index { - font-size: 90%; + font-size: 70%; + border: solid 1px black; + padding: 0px 3px; + border-radius: 14px; + margin-right: 1ex; //font-style: italic; } - .step-title-detail { + .step-title-code { .monospace(); font-size: 85%; font-weight: 300; color: @gray-light; } } + .step-details { margin-top: 12px; .space-above {
