feat(3240): Event Landing View & Job List View - Visually differentia…

…te virtual job from normal job (#1229)

app/components/pipeline-list-job-cell/component.js

@@ -5,15 +5,15 @@ import { statusIcon } from 'screwdriver-ui/utils/build';
 export default Component.extend({
   build: computed('record.job', {
     get() {
-      const { build } = this.record.job;
+      const { build, isVirtualJob } = this.record.job;
 
       if (!build) {
         return null;
       }
 
       return {
         id: build.id,
-        icon: statusIcon(build.status),
+        icon: statusIcon(build.status, false, isVirtualJob),
         status: build.status
       };
     }

app/components/pipeline-list-view/component.js

@@ -190,15 +190,23 @@ export default Component.extend({
 
   getRows(jobsDetails = []) {
     const rows = jobsDetails.map(jobDetails => {
-      const { jobId, jobName, annotations, prParentJobId, prNum } = jobDetails;
+      const {
+        jobId,
+        jobName,
+        annotations,
+        prParentJobId,
+        prNum,
+        isVirtualJob
+      } = jobDetails;
       const latestBuild = jobDetails.builds.length
         ? get(jobDetails, 'builds.lastObject')
         : null;
 
       const jobData = {
         jobName,
         displayName: annotations['screwdriver.cd/displayName'],
-        build: latestBuild
+        build: latestBuild,
+        isVirtualJob
       };
 
       const hasParameters =

app/components/pipeline-options/styles.scss

@@ -81,6 +81,15 @@
       background-color: $sd-primary;
       color: $sd-white;
     }
+
+    .job-label {
+      background: $sd-light-gray;
+      border-radius: 3px;
+      border: none;
+      font-size: 14px;
+      font-weight: $weight-normal;
+      padding: 2px 7px;
+    }
   }
 
   .toggle-expand {

app/components/pipeline-options/template.hbs

@@ -62,15 +62,15 @@
                 </p>
               </div>
               <div class="col-8">
-                <Input 
+                <Input
                   class="pipeline-badge-name col-12"
                   placeholder="Sonar badge name"
                   @type="text"
                   @value={{this.sonarName}}
                 />
               </div>
               <div class="col-8">
-                <Input 
+                <Input
                   class="pipeline-badge-uri col-12"
                   placeholder="Sonar badge uri"
                   @type="text"
@@ -224,6 +224,9 @@
                 <div class="col-10">
                   <h4 title="Job: {{job.name}}">
                     {{truncate job.name 50}}
+                    {{# if job.virtualJob}}
+                      <span class="job-label">virtual</span>
+                    {{/if}}
                   </h4>
                   {{#if job.stateChanger}}
                     <i class="float-right">

app/pipeline/jobs/index/controller.js

@@ -135,6 +135,7 @@ export default Controller.extend(ModelReloaderMixin, {
             // PR-specific
             nextJobDetail.prParentJobId = job.prParentJobId || null;
             nextJobDetail.prNum = job.group || null;
+            nextJobDetail.isVirtualJob = job.virtualJob;
           }
           nextJobsDetails.push(nextJobDetail);
         });

app/utils/build.js

@@ -17,7 +17,7 @@ const isActiveBuild = (status, endTime) =>
  */
 const isPRJob = jobName => /^PR-/.test(jobName);
 
-const statusIcon = (status, isLight) => {
+const statusIcon = (status, isLight, isVirtualJob) => {
   let icon = {
     prefix: 'fa',
     spin: false,
@@ -33,7 +33,7 @@ const statusIcon = (status, isLight) => {
     case 'CREATED':
     case 'WARNING':
     case 'SUCCESS':
-      icon.name = 'check-circle';
+      icon.name = isVirtualJob ? 'fast-forward' : 'check-circle';
       icon.prefix = isLight ? 'far' : 'fas';
       break;
     case 'UNSTABLE':
@@ -49,7 +49,7 @@ const statusIcon = (status, isLight) => {
       icon.flip = true;
       break;
     case 'FAILURE':
-      icon.name = 'times-circle';
+      icon.name = isVirtualJob ? 'fast-forward' : 'times-circle';
       icon.prefix = isLight ? 'far' : 'fas';
       break;
     case 'ABORTED':

app/utils/pipeline/graph/d3-graph-util.js

@@ -16,16 +16,22 @@ const STATUS_MAP = {
   BLOCKED: { icon: '\ue908' },
   COLLAPSED: { icon: '\ue908' },
   FROZEN: { icon: '\ue910' },
-  SKIPPED: { icon: '\ue909' }
+  SKIPPED: { icon: '\ue909' },
+  VIRTUAL: { icon: '\ue911' }
 };
 
 /**
  * Find the icon to set as the text for a node
  * @method icon
- * @param  {String} status Text that denotes a build status
+ * @param  {String}   status    Text that denotes a build status
+ * @param  {Boolean}  isVirtual Indicates whether the job is virtual or not
  * @return {String}        Unicode character that maps to an icon in screwdriver icon font
  */
-export function icon(status) {
+export function icon(status, isVirtual) {
+  if (isVirtual && (!status || ['SUCCESS', 'WARNING', 'CREATED'])) {
+    return STATUS_MAP.VIRTUAL.icon;
+  }
+
   return STATUS_MAP[status] ? STATUS_MAP[status].icon : STATUS_MAP.UNKNOWN.icon;
 }
 
@@ -514,11 +520,24 @@ export function addJobIcons( // eslint-disable-line max-params
         return icon('SKIPPED');
       }
 
-      return icon(d.status);
+      return icon(d.status, d.virtual);
+    })
+    .attr('font-size', d => {
+      return `${
+        icon(d.status, d.virtual) === STATUS_MAP.VIRTUAL.icon
+          ? ICON_SIZE * 2
+          : ICON_SIZE
+      }px`;
     })
-    .attr('font-size', `${ICON_SIZE}px`)
     .style('text-anchor', 'middle')
-    .attr('x', d => calcNodeCenter(d.pos.x, nodeWidth))
+    .attr('x', d => {
+      return (
+        calcNodeCenter(d.pos.x, nodeWidth) +
+        (icon(d.status, d.virtual) === STATUS_MAP.VIRTUAL.icon
+          ? ICON_SIZE / 2
+          : 0)
+      );
+    })
     .attr(
       'y',
       d =>

tests/integration/components/pipeline-list-job-cell/component-test.js

@@ -17,10 +17,11 @@ module('Integration | Component | pipeline list job cell', function (hooks) {
     });
   });
 
-  test('it renders', async function (assert) {
+  test('it renders running build for normal job', async function (assert) {
     this.set('record', {
       job: {
         jobName: 'a',
+        isVirtualJob: false,
         build: {
           id: 2,
           status: 'RUNNING'
@@ -36,10 +37,51 @@ module('Integration | Component | pipeline list job cell', function (hooks) {
     assert.dom('.job-name').hasText('a');
   });
 
-  test('it renders an aborted build', async function (assert) {
+  test('it renders running build for virtual job', async function (assert) {
+    this.set('record', {
+      job: {
+        jobName: 'a',
+        isVirtualJob: true,
+        build: {
+          id: 2,
+          status: 'RUNNING'
+        }
+      }
+    });
+
+    await render(hbs`<PipelineListJobCell
+      @record={{this.record}}
+    />`);
+
+    assert.dom('.fa-spinner').exists({ count: 1 });
+    assert.dom('.job-name').hasText('a');
+  });
+
+  test('it renders an aborted build for normal job', async function (assert) {
+    this.set('record', {
+      job: {
+        jobName: 'b',
+        isVirtualJob: false,
+        build: {
+          id: 2,
+          status: 'ABORTED'
+        }
+      }
+    });
+
+    await render(hbs`<PipelineListJobCell
+      @record={{this.record}}
+    />`);
+
+    assert.dom('.fa-stop-circle').exists({ count: 1 });
+    assert.dom('.job-name').hasText('b');
+  });
+
+  test('it renders an aborted build for virtual job', async function (assert) {
     this.set('record', {
       job: {
         jobName: 'b',
+        isVirtualJob: true,
         build: {
           id: 2,
           status: 'ABORTED'
@@ -55,10 +97,11 @@ module('Integration | Component | pipeline list job cell', function (hooks) {
     assert.dom('.job-name').hasText('b');
   });
 
-  test('it renders a successful build', async function (assert) {
+  test('it renders a successful build for normal job', async function (assert) {
     this.set('record', {
       job: {
         jobName: 'b',
+        isVirtualJob: false,
         build: {
           id: 2,
           status: 'SUCCESS'
@@ -74,10 +117,31 @@ module('Integration | Component | pipeline list job cell', function (hooks) {
     assert.dom('.job-name').hasText('b');
   });
 
-  test('it renders a failed build', async function (assert) {
+  test('it renders a successful build for virtual job', async function (assert) {
+    this.set('record', {
+      job: {
+        jobName: 'b',
+        isVirtualJob: true,
+        build: {
+          id: 2,
+          status: 'SUCCESS'
+        }
+      }
+    });
+
+    await render(hbs`<PipelineListJobCell
+      @record={{this.record}}
+    />`);
+
+    assert.dom('.fa-fast-forward').exists({ count: 1 });
+    assert.dom('.job-name').hasText('b');
+  });
+
+  test('it renders a failed build for normal job', async function (assert) {
     this.set('record', {
       job: {
         jobName: 'b',
+        isVirtualJob: false,
         build: {
           id: 2,
           status: 'FAILURE'
@@ -93,6 +157,26 @@ module('Integration | Component | pipeline list job cell', function (hooks) {
     assert.dom('.job-name').hasText('b');
   });
 
+  test('it renders a failed build for virtual job', async function (assert) {
+    this.set('record', {
+      job: {
+        jobName: 'b',
+        isVirtualJob: true,
+        build: {
+          id: 2,
+          status: 'FAILURE'
+        }
+      }
+    });
+
+    await render(hbs`<PipelineListJobCell
+      @record={{this.record}}
+    />`);
+
+    assert.dom('.fa-fast-forward').exists({ count: 1 });
+    assert.dom('.job-name').hasText('b');
+  });
+
   test('it renders displayName if present', async function (assert) {
     this.set('record', {
       job: {

tests/integration/components/pipeline-options/component-test.js

@@ -60,22 +60,32 @@ module('Integration | Component | pipeline options', function (hooks) {
         EmberObject.create({
           id: '3456',
           name: 'B',
-          isDisabled: false
+          isDisabled: false,
+          virtualJob: false
         }),
         EmberObject.create({
           id: '1234',
           name: 'main',
-          isDisabled: false
+          isDisabled: false,
+          virtualJob: false
         }),
         EmberObject.create({
           id: '2345',
           name: 'A',
-          isDisabled: false
+          isDisabled: false,
+          virtualJob: false
         }),
         EmberObject.create({
           id: '4567',
           name: 'long-long-long-long-long-long-long-long-long-long-long-job-name',
-          isDisabled: false
+          isDisabled: false,
+          virtualJob: false
+        }),
+        EmberObject.create({
+          id: '8899',
+          name: 'virtual-job-ci-setup',
+          isDisabled: false,
+          virtualJob: true
         })
       ])
     );
@@ -121,13 +131,19 @@ module('Integration | Component | pipeline options', function (hooks) {
 
     // Jobs
     assert.dom('section.jobs h3').hasText('Jobs');
-    assert.dom('section.jobs li').exists({ count: 5 });
+    assert.dom('section.jobs li').exists({ count: 6 });
     assert.dom('section.jobs li:nth-child(2) h4').hasText('A');
     assert.dom('section.jobs li:nth-child(3) h4').hasText('B');
     assert
       .dom('section.jobs li:nth-child(4) h4')
       .hasText('long-long-long-long-long-long-long-long-long-long-...');
     assert.dom('section.jobs li:nth-child(5) h4').hasText('main');
+    assert
+      .dom('section.jobs li:nth-child(6) h4')
+      .hasText('virtual-job-ci-setup virtual');
+    assert
+      .dom('section.jobs li:nth-child(6) h4 span.job-label')
+      .hasText('virtual');
     assert
       .dom('section.jobs p')
       .hasText('Toggle to disable or enable the job.');
@@ -145,7 +161,10 @@ module('Integration | Component | pipeline options', function (hooks) {
     assert
       .dom('section.cache li:nth-child(4) h4')
       .hasText('Job long-long-long-long-long-long-long-long-long-long-...');
-    assert.dom('section.cache li:last-child h4').hasText('Job main');
+    assert.dom('section.cache li:nth-child(5) h4').hasText('Job main');
+    assert
+      .dom('section.cache li:last-child h4')
+      .hasText('Job virtual-job-ci-setup');
 
     // Danger Zone
     assert.dom('section.danger h3').hasText('Danger Zone');