You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2022/10/21 13:58:17 UTC
[brooklyn-ui] 08/24: tidy up workflow step title, show more info on steps
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 <al...@cloudsoft.io>
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 {