Merge pull request #4106 from jaredevantabor/job-result-time-badge

Job result time badge

awx/ui/client/src/job-results/job-results.block.less

@@ -127,3 +127,16 @@
         height: inherit;
     }
 }
+
+.JobResults-timeBadge {
+    float:right;
+    font-size: 11px;
+    font-weight: normal;
+    padding: 1px 10px;
+    height: 14px;
+    margin: 3px 15px;
+    width: 80px;
+    background-color: @default-bg;
+    border-radius: 5px;
+    color: @default-interface-txt;
+}

awx/ui/client/src/job-results/parse-stdout.service.js

@@ -4,7 +4,7 @@
 * All Rights Reserved
 *************************************************/
 
-export default ['$log', function($log){
+export default ['$log', 'moment', function($log, moment){
     var val = {
         // parses stdout string from api and formats various codes to the
         // correct dom structure
@@ -123,6 +123,27 @@ export default ['$log', function($log){
 
             return string;
         },
+        getStartTimeBadge: function(event, line){
+            // This will return a div with the badge class
+            // for the start time to show at the right hand
+            // side of each stdout header line.
+            // returns an empty string if not a header line
+            var emptySpan = "", time;
+            if ((event.event_name === "playbook_on_play_start" ||
+                event.event_name === "playbook_on_task_start") &&
+                line !== "") {
+                    time =  moment(event.created).format('HH:mm:ss');
+                    return `<div class="badge JobResults-timeBadge ng-binding">${time}</div>`;
+            }
+            else if(event.event_name === "playbook_on_stats" && line.indexOf("PLAY") > -1){
+                time =  moment(event.created).format('HH:mm:ss');
+                return `<div class="badge JobResults-timeBadge ng-binding">${time}</div>`;
+            }
+            else {
+                return emptySpan;
+            }
+
+        },
         // used to add expand/collapse icon next to line numbers of headers
         getCollapseIcon: function(event, line) {
             var clickClass,
@@ -195,7 +216,7 @@ export default ['$log', function($log){
                     return `
 <div class="JobResultsStdOut-aLineOfStdOut${this.getLineClasses(event, lineArr[1], lineArr[0])}">
     <div class="JobResultsStdOut-lineNumberColumn">${this.getCollapseIcon(event, lineArr[1])}${lineArr[0]}</div>
-    <div class="JobResultsStdOut-stdoutColumn">${this.getAnchorTags(event, this.prettify(lineArr[1]))}</div>
+    <div class="JobResultsStdOut-stdoutColumn">${this.getAnchorTags(event, this.prettify(lineArr[1]))} ${this.getStartTimeBadge(event, lineArr[1] )}</div>
 </div>`;
                 });
 

awx/ui/tests/spec/job-results/parse-stdout.service-test.js

@@ -33,21 +33,34 @@ describe('parseStdoutService', () => {
         });
     });
 
-    // describe('getLineClasses()', () => {
+    describe('getLineClasses()', () => {
-    //     xit('creates a string that is used as a class', () => {
+        xit('creates a string that is used as a class', () => {
-    //         let headerEvent = {
+            let headerEvent = {
-    //             event_name: 'playbook_on_task_start',
+                event_name: 'playbook_on_task_start',
-    //             event_data: {
+                event_data: {
-    //                 play_uuid:"0f667a23-d9ab-4128-a735-80566bcdbca0",
+                    play_uuid:"0f667a23-d9ab-4128-a735-80566bcdbca0",
-    //                 task_uuid: "80dd087c-268b-45e8-9aab-1083bcfd9364"
+                    task_uuid: "80dd087c-268b-45e8-9aab-1083bcfd9364"
-    //             }
+                }
-    //         };
+            };
-    //         let lineNum = 3;
+            let lineNum = 3;
-    //         let line = "TASK [setup] *******************************************************************";
+            let line = "TASK [setup] *******************************************************************";
-    //         let styledLine =  " header_task header_task_80dd087c-268b-45e8-9aab-1083bcfd9364 play_0f667a23-d9ab-4128-a735-80566bcdbca0 line_num_3";
+            let styledLine =  " header_task header_task_80dd087c-268b-45e8-9aab-1083bcfd9364 play_0f667a23-d9ab-4128-a735-80566bcdbca0 line_num_3";
-    //         expect(parseStdoutService.getLineClasses(headerEvent, line, lineNum)).toBe(styledLine);
+            expect(parseStdoutService.getLineClasses(headerEvent, line, lineNum)).toBe(styledLine);
-    //     });
+        });
-    // });
+    });
+
+    describe('getStartTime()', () => {
+        xit('creates returns a badge with the start time of the event', () => {
+            let headerEvent = {
+                event_name: 'playbook_on_play_start',
+                created: "2016-11-22T21:15:54.736Z"
+            };
+
+            let line = "PLAY [add hosts to inventory] **************************************************";
+            let badgeDiv = '<div class="badge JobResults-timeBadge ng-binding">13:15:54</div>';
+            expect(parseStdoutService.getStartTimeBadge(headerEvent, line)).toBe(badgeDiv);
+        });
+    });
 
     describe('getCollapseIcon()', () => {
         let emptySpan = `
@@ -83,13 +96,7 @@ describe('parseStdoutService', () => {
         data-uuid="task_1da9012d-18e6-4562-85cd-83cf10a97f86">
     </i>
 </span>`;
-// `<span class="JobResultsStdOut-lineExpander">
+
-//     <i class="JobResultsStdOut-lineExpanderIcon fa fa-caret-down expanderizer
-//         expanderizer--${expanderizerSpecifier} expanded"
-//         ng-click="toggleLine($event, '.${clickClass}')"
-//         data-uuid="${clickClass}">
-//     </i>
-// </span>`
             expect(parseStdoutService.getCollapseIcon(headerEvent, line))
                 .toBe(expandSpan);
         });
@@ -124,6 +131,8 @@ describe('parseStdoutService', () => {
                 .returnValue("");
             spyOn(parseStdoutService, 'prettify').and
                 .returnValue("prettified_line");
+            spyOn(parseStdoutService, 'getStartTimeBadge').and
+                .returnValue("");
 
             parseStdoutService.parseStdout(mockEvent);
 
@@ -137,6 +146,8 @@ describe('parseStdoutService', () => {
                 .toHaveBeenCalledWith(mockEvent, "prettified_line");
             expect(parseStdoutService.prettify)
                 .toHaveBeenCalledWith('line1');
+            expect(parseStdoutService.getStartTimeBadge)
+                .toHaveBeenCalledWith(mockEvent, 'line1');
 
             // get line arr should be called once for the event
             expect(parseStdoutService.getLineArr.calls.count())
@@ -165,13 +176,15 @@ describe('parseStdoutService', () => {
                 .returnValue("anchor_tag_dom");
             spyOn(parseStdoutService, 'prettify').and
                 .returnValue("prettified_line");
+            spyOn(parseStdoutService, 'getStartTimeBadge').and
+                .returnValue("");
 
             var returnedString = parseStdoutService.parseStdout(mockEvent);
 
             var expectedString = `
 <div class="JobResultsStdOut-aLineOfStdOutline_classes">
     <div class="JobResultsStdOut-lineNumberColumn">collapse_icon_dom13</div>
-    <div class="JobResultsStdOut-stdoutColumn">anchor_tag_dom</div>
+    <div class="JobResultsStdOut-stdoutColumn">anchor_tag_dom </div>
 </div>`;
             expect(returnedString).toBe(expectedString);
         });