Add timed out text to workflow job node. Change timeout to minutes and seconds.

Remove workflow template badge in approvals drawer.

awx/ui/client/features/jobs/routes/jobs.route.js

@@ -15,7 +15,6 @@ export default {
         job_search: {
             value: {
                 not__launch_type: 'sync',
-                not__type: 'workflow_approval',
                 order_by: '-finished'
             },
             dynamic: true,

awx/ui/client/features/templates/templates.strings.js

@@ -149,7 +149,8 @@ function TemplatesStrings (BaseString) {
         CANCEL: t.s('CANCEL'),
         SAVE_AND_EXIT: t.s('SAVE & EXIT'),
         APPROVAL: t.s('Approval'),
-        TIMEOUT_POPOVER: t.s('The amount of time (in seconds) to wait before this approval step is automatically denied. Defaults to 0 for no timeout.')
+        TIMEOUT_POPOVER: t.s('The amount of time to wait before this approval step is automatically denied. Defaults to 0 for no timeout.'),
+        TIMED_OUT: t.s('APPROVAL TIMED OUT')
     };
 }
 

awx/ui/client/lib/components/approvalsDrawer/_index.less

@@ -38,6 +38,7 @@
     justify-content: flex-end;
     width: 100%;
     margin-top: 10px;
+    line-height: 30px;
 
     button {
       margin-left: 15px;

awx/ui/client/lib/components/approvalsDrawer/approvalsDrawer.partial.html

@@ -30,8 +30,7 @@
                         <div class="at-Row-container">
                             <at-row-item
                                 header-value="{{ approval.summary_fields.source_workflow_job.name }}"
-                                header-state="workflowResults({pid: {{approval.summary_fields.source_workflow_job.id}}})"
+                                header-state="workflowResults({pid: {{approval.summary_fields.source_workflow_job.id}}})">
-                                header-tag="{{:: vm.strings.get('approvals.WORKFLOW_TEMPLATE') }}">
                             </at-row-item>
                         </div>
                     </div>

awx/ui/client/lib/components/layout/_index.less

@@ -82,21 +82,29 @@
             }
         }
 
-        .at-Layout-topNavApprovals {
+        .at-Layout-Approvals {
             display: flex;
             align-items: center;
             justify-content: center;
             height: 100%;
+        }
 
-            div {
+        .at-Layout-ApprovalsBadge {
-                margin-left: 10px;
+            margin-left: 10px;
-                padding: 5px;
+            padding: 5px;
-                border-radius: 3px;
+            border-radius: 3px;
-                background-color: @at-red-bright;
+            background-color: @at-gray-646972;
-                color: @at-white;
+            color: @at-white;
-                height: 15px;
+            height: 16px;
-                font-size: 10px;
+            font-size: 11px;
-            }
+            font-weight: bold;
+            cursor: default;
+            display: flex;
+            align-items: center;
+        }
+
+        .at-Layout-ApprovalsBadgeActive {
+            background-color: @at-red-bright;
         }
     }
 

awx/ui/client/lib/components/layout/layout.partial.html

@@ -15,9 +15,9 @@
             </a>
         </at-top-nav-item>
         <at-top-nav-item ng-click="vm.openApprovals()">
-            <div class="at-Layout-topNavApprovals">
+            <div class="at-Layout-Approvals">
                 <i class="fa fa-bell" alt="{{ vm.getString('NOTIFICATIONS') }}"></i>
-                <div>{{vm.approvalsCount}}</div>
+                <span class="at-Layout-ApprovalsBadge" ng-class="{'at-Layout-ApprovalsBadgeActive': vm.approvalsCount && vm.approvalsCount > 0}">{{vm.approvalsCount}}</span>
             </div>
         </at-top-nav-item>
         <at-top-nav-item>

awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less

@@ -148,6 +148,7 @@
     color: @default-interface-txt;
     text-align: center;
 }
+
 .WorkflowChart-activeNode {
     fill: @default-link;
 }
@@ -169,6 +170,13 @@
     text-align: center;
 }
 
+.WorkflowChart-timedOutText {
+    width: 180px;
+    height: 14px;
+    color: @default-err;
+    text-align: center;
+}
+
 .WorkflowChart-tooltip {
     pointer-events: none;
     text-align: center;

awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js

@@ -832,6 +832,9 @@ export default ['moment', '$timeout', '$window', '$filter', 'TemplatesStrings',
                     baseSvg.selectAll(".WorkflowChart-deletedText")
                         .style("display", (d) => { return d.unifiedJobTemplate || d.id === scope.graphState.nodeBeingAdded ? "none" : null; });
 
+                    baseSvg.selectAll(".WorkflowChart-timedOutText")
+                        .style("display", (d) => { return d.job && d.job.timed_out ? null : "none"; });
+
                     baseSvg.selectAll(".WorkflowChart-activeNode")
                         .style("display", (d) => { return d.id === scope.graphState.nodeBeingEdited ? null : "none"; });
 
@@ -940,6 +943,15 @@ export default ['moment', '$timeout', '$window', '$filter', 'TemplatesStrings',
                                 .html(`<span>${TemplatesStrings.get('workflow_maker.DELETED')}</span>`)
                                 .style("display", (d) => { return d.unifiedJobTemplate || d.id === scope.graphState.nodeBeingAdded ? "none" : null; });
 
+                            thisNode.append("foreignObject")
+                                .attr("x", 0)
+                                .attr("y", 22)
+                                .attr("dy", ".35em")
+                                .attr("text-anchor", "middle")
+                                .attr("class", "WorkflowChart-defaultText WorkflowChart-timedOutText")
+                                .html(`<span>${TemplatesStrings.get('workflow_maker.TIMED_OUT')}</span>`)
+                                .style("display", (d) => { return d.job && d.job.timed_out ? null : "none"; });
+
                             thisNode.append("circle")
                                 .attr("cy", nodeH)
                                 .attr("r", 10)

awx/ui/client/src/templates/workflows/workflow-maker/forms/workflow-node-form.controller.js

@@ -489,7 +489,8 @@ export default ['$scope', 'TemplatesService', 'JobTemplateModel', 'PromptService
             $scope.approvalNodeState = {
                 name: null,
                 description: null,
-                timeout: 0
+                timeoutMinutes: 0,
+                timeoutSeconds: 0
             };
             $scope.nodeFormDataLoaded = false;
             $scope.wf_maker_template_queryset = {
@@ -552,10 +553,14 @@ export default ['$scope', 'TemplatesService', 'JobTemplateModel', 'PromptService
                             $scope.activeTab = "approval";
                             select2ifyDropdowns();
 
+                            const timeoutMinutes = Math.floor($scope.nodeConfig.node.unifiedJobTemplate.timeout / 60);
+                            const timeoutSeconds = $scope.nodeConfig.node.unifiedJobTemplate.timeout - timeoutMinutes * 60;
+
                             $scope.approvalNodeState = {
                                 name: $scope.nodeConfig.node.unifiedJobTemplate.name,
                                 description: $scope.nodeConfig.node.unifiedJobTemplate.description,
-                                timeout: $scope.nodeConfig.node.unifiedJobTemplate.timeout
+                                timeoutMinutes,
+                                timeoutSeconds
                             };
 
                             $scope.nodeFormDataLoaded = true;
@@ -616,10 +621,12 @@ export default ['$scope', 'TemplatesService', 'JobTemplateModel', 'PromptService
             };
 
             if ($scope.activeTab === "approval") {
+                const timeout = $scope.approvalNodeState.timeoutMinutes * 60 + $scope.approvalNodeState.timeoutSeconds;
+
                 nodeFormData.selectedTemplate = {
                     name: $scope.approvalNodeState.name,
                     description: $scope.approvalNodeState.description,
-                    timeout: $scope.approvalNodeState.timeout,
+                    timeout,
                     unified_job_type: "workflow_approval"
                 };
             } else if($scope.activeTab === "templates") {
@@ -649,7 +656,7 @@ export default ['$scope', 'TemplatesService', 'JobTemplateModel', 'PromptService
             } else if($scope.activeTab === "inventory_syncs") {
                 return !$scope.inventoryNodeState.selectedTemplate;
             } else if ($scope.activeTab === "approval") {
-                return !($scope.approvalNodeState.name && $scope.approvalNodeState.name !== "") || $scope.workflow_approval.pauseTimeout.$error.min;
+                return !($scope.approvalNodeState.name && $scope.approvalNodeState.name !== "") || $scope.workflow_approval.pauseTimeoutMinutes.$error.min || $scope.workflow_approval.pauseTimeoutSeconds.$error.min;
             }
         };
 
@@ -660,7 +667,8 @@ export default ['$scope', 'TemplatesService', 'JobTemplateModel', 'PromptService
                 $scope.approvalNodeState = {
                     name: null,
                     description: null,
-                    timeout: 0
+                    timeoutMinutes: 0,
+                    timeoutSeconds: 0
                 };
                 $scope.editNodeHelpMessage = getEditNodeHelpMessage(selectedTemplate, $scope.workflowJobTemplateObj);
 

awx/ui/client/src/templates/workflows/workflow-maker/forms/workflow-node-form.partial.html

@@ -133,15 +133,22 @@
                 </label>
             </div>
             <div class="form-group Form-formGroup Form-formGroup--singleColumn">
-                <label for="pauseTimeout" class="Form-inputLabelContainer">
+                <label class="Form-inputLabelContainer">
                     <span class="Form-inputLabel" translate>Timeout</span>
                     <a id="workflow-maker-timeout-popover" href="" aw-pop-over="{{:: strings.get('workflow_maker.TIMEOUT_POPOVER') }}" data-placement="top" data-container="body" over-title="{{:: strings.get('workflow_maker.TIMEOUT') }}" class="help-link">
                         <i class="fa fa-question-circle"></i>
                     </a>
                 </label>
                 <div>
-                    <input type="number" value="0" min=0 aw-min="0" ng-model="approvalNodeState.timeout" name="pauseTimeout" id="workflow_job_template_pauseTimeout" aw-spinner="pauseTimeout" integer />
+                    <span class="WorkflowMaker-timeoutInput">
-                    <div class="error" id="workflow_job_template_pauseTimeout-minmax-error" ng-show="workflow_approval.pauseTimeout.$error.min" translate>Please enter a number greater than or equal to 0.</div>
+                        <input type="number" value="0" min=0 aw-min="0" ng-model="approvalNodeState.timeoutMinutes" name="pauseTimeoutMinutes" id="workflow_job_template_pauseTimeoutMinutes" aw-spinner="pauseTimeoutMinutes" integer />
+                    </span>
+                    <span class="WorkflowMaker-timeoutLabel" translate>min</span>
+                    <span class="WorkflowMaker-timeoutInput WorkflowMaker-timeoutSeconds">
+                        <input class="WorkflowMaker-timeoutInput" type="number" value="0" min=0 aw-min="0" ng-model="approvalNodeState.timeoutSeconds" name="pauseTimeoutSeconds" id="workflow_job_template_pauseTimeoutSeconds" aw-spinner="pauseTimeoutSeconds" integer />
+                    </span>
+                    <span class="WorkflowMaker-timeoutLabel" translate>sec</span>
+                    <div class="error" id="workflow_job_template_pauseTimeout-minmax-error" ng-show="workflow_approval.pauseTimeoutMinutes.$error.min || workflow_approval.pauseTimeoutSeconds.$error.min" translate>Please enter a number greater than or equal to 0.</div>
                 </div>
             </div>
         </form>

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less

@@ -323,11 +323,18 @@
     margin-bottom: 20px;
 }
 
-.WorkflowMaker-pauseCheckbox {
+.WorkflowMaker-timeoutInput {
-    input {
+    .ui-spinner {
-        margin-right: 5px;
+        width: 100px;
     }
-    margin-bottom: 20px;
+}
+
+.WorkflowMaker-timeoutSeconds {
+    margin-left: 10px;
+}
+
+.WorkflowMaker-timeoutLabel {
+    margin-left: 3px;
 }
 
 .Key-list {