feat(3197): Table cell component for stages in pipeline list jobs view

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

@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  stageName: computed('record.stage.stageName', {
+    get() {
+      return this.record.stage?.stageName || 'N/A';
+    }
+  })
+});

app/components/pipeline-list-stage-cell/template.hbs

@@ -0,0 +1,5 @@
+<div class="stage-cell">
+  <div class="stage-name">
+    {{this.stageName}}
+  </div>
+</div>

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

@@ -58,6 +58,12 @@ export default Component.extend({
       disableSorting: true,
       component: 'pipeline-list-coverage-cell'
     },
+    {
+      title: 'STAGE',
+      propertyName: 'stage',
+      component: 'pipeline-list-stage-cell',
+      sortFunction: (a, b) => collator.compare(a.stageName, b.stageName)
+    },
     {
       title: 'METRICS',
       propertyName: 'job',
@@ -196,7 +202,8 @@ export default Component.extend({
         annotations,
         prParentJobId,
         prNum,
-        isVirtualJob
+        isVirtualJob,
+        stageName
       } = jobDetails;
       const latestBuild = jobDetails.builds.length
         ? get(jobDetails, 'builds.lastObject')
@@ -245,6 +252,8 @@ export default Component.extend({
 
       let coverageData = {};
 
+      let stageData;
+
       if (latestBuild) {
         if (latestBuild.startTime) {
           if (this.timestampPreference === 'UTC') {
@@ -283,6 +292,8 @@ export default Component.extend({
         if (annotations && annotations['screwdriver.cd/coverageScope']) {
           coverageData.scope = annotations['screwdriver.cd/coverageScope'];
         }
+
+        stageData = { stageName };
       }
 
       return {
@@ -291,7 +302,8 @@ export default Component.extend({
         duration: duration === null ? 'N/A' : duration,
         history: jobDetails.builds,
         actions: actionsData,
-        coverage: coverageData
+        coverage: coverageData,
+        stage: stageData
       };
     });
 

app/components/pipeline/jobs/table/cell/stage/component.js

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import getStageName from './util';
+
+export default class PipelineJobsTableCellStageComponent extends Component {
+  willDestroy() {
+    super.willDestroy();
+
+    this.args.record.onDestroy(this.args.record.job);
+  }
+
+  get stageName() {
+    return getStageName(this.args.record.job);
+  }
+}

app/components/pipeline/jobs/table/cell/stage/template.hbs

@@ -0,0 +1,3 @@
+<div class="stage-cell">
+  {{this.stageName}}
+</div>

app/components/pipeline/jobs/table/cell/stage/util.js

@@ -0,0 +1,8 @@
+/**
+ * Get the stage name of the job.
+ * @param job {Object} Job in the format returned by the API
+ * @returns {string}
+ */
+export default function getStageName(job) {
+  return job?.permutations?.[0]?.stage?.name || 'N/A';
+}

app/components/pipeline/jobs/table/component.js

@@ -41,6 +41,12 @@ export default class PipelineJobsTableComponent extends Component {
       className: 'coverage-column',
       component: 'coverageCell'
     },
+    {
+      title: 'STAGE',
+      propertyName: 'stageName',
+      className: 'stage-column',
+      component: 'stageCell'
+    },
     {
       title: 'METRICS',
       className: 'metrics-column',
@@ -69,6 +75,7 @@ export default class PipelineJobsTableComponent extends Component {
       this.data.push({
         job,
         jobName: job.name,
+        stageName: job?.permutations?.[0]?.stage?.name || 'N/A',
         pipeline: this.args.pipeline,
         jobs: this.args.jobs,
         timestampFormat: this.args.userSettings.timestampFormat,

app/components/pipeline/jobs/table/styles.scss

@@ -41,6 +41,7 @@
             }
 
             &.coverage-column,
+            &.stage-column,
             &.metrics-column,
             &.actions-column {
               width: 10rem;

app/components/pipeline/jobs/table/template.hbs

@@ -9,6 +9,7 @@
     durationCell=(component "pipeline/jobs/table/cell/duration")
     startTimeCell=(component "pipeline/jobs/table/cell/start-time")
     coverageCell=(component "pipeline/jobs/table/cell/coverage")
+    stageCell=(component "pipeline/jobs/table/cell/stage")
     metricsCell=(component "pipeline/jobs/table/cell/metrics")
     actionsCell=(component "pipeline/jobs/table/cell/actions")
   }}
@@ -74,4 +75,4 @@
       </div>
     </MT.PaginationSimple>
   </div>
-</ModelsTable>
+</ModelsTable>

app/job/model.js

@@ -74,6 +74,13 @@ export default Model.extend({
       return get(this, 'permutations.0.annotations') || {};
     }
   }),
+  stageName: computed('permutations.0.stage', 'permutations.[]', {
+    get() {
+      const stage = get(this, 'permutations.0.stage');
+
+      return stage ? stage.name : 'N/A';
+    }
+  }),
   virtualJob: computed('annotations', 'permutations.0.annotations', {
     get() {
       const annotations = get(this, 'annotations');

app/pipeline/jobs/index/controller.js

@@ -132,6 +132,8 @@ export default Controller.extend(ModelReloaderMixin, {
             nextJobDetail.jobName = job.name;
             nextJobDetail.jobPipelineId = job.pipelineId;
             nextJobDetail.annotations = job.annotations;
+            nextJobDetail.stageName = job.stageName;
+
             // PR-specific
             nextJobDetail.prParentJobId = job.prParentJobId || null;
             nextJobDetail.prNum = job.group || null;

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

@@ -0,0 +1,32 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'screwdriver-ui/tests/helpers';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | pipeline list stage cell', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    this.set('record', {
+      stage: { stageName: 'production' }
+    });
+
+    await render(hbs`<PipelineListStageCell
+      @record={{this.record}}
+    />`);
+
+    assert.dom('.stage-name').hasText('production');
+  });
+
+  test('it renders default stage N/A if does not exist', async function (assert) {
+    this.set('record', {
+      stage: { stageName: 'N/A' }
+    });
+
+    await render(hbs`<PipelineListStageCell
+      @record={{this.record}}
+    />`);
+
+    assert.dom('.stage-name').hasText('N/A');
+  });
+});

tests/integration/components/pipeline-list-view/component-test.js

@@ -94,10 +94,12 @@ module('Integration | Component | pipeline list view', function (hooks) {
     assert.dom('table').exists({ count: 1 });
     assert.dom('thead').exists({ count: 1 });
     assert.dom('tbody').exists({ count: 1 });
-    assert.dom('th.table-header').exists({ count: 7 });
+    assert.dom('th.table-header').exists({ count: 8 });
     assert
       .dom('thead')
-      .hasText('JOB HISTORY DURATION START TIME COVERAGE METRICS ACTIONS');
+      .hasText(
+        'JOB HISTORY DURATION START TIME COVERAGE STAGE METRICS ACTIONS'
+      );
     assert.dom('tbody tr').exists({ count: 2 });
   });
 
@@ -125,7 +127,8 @@ module('Integration | Component | pipeline list view', function (hooks) {
         ],
         annotations: {
           'screwdriver.cd/displayName': 'a'
-        }
+        },
+        stageName: 'production'
       },
       {
         jobId: 2,
@@ -148,7 +151,8 @@ module('Integration | Component | pipeline list view', function (hooks) {
         ],
         annotations: {
           'screwdriver.cd/displayName': 'a'
-        }
+        },
+        stageName: 'integration'
       }
     ]);
     set(this, 'updateListViewJobs', () => Promise.resolve([]));
@@ -245,10 +249,12 @@ module('Integration | Component | pipeline list view', function (hooks) {
     assert.dom('table').exists({ count: 1 });
     assert.dom('thead').exists({ count: 1 });
     assert.dom('tbody').exists({ count: 1 });
-    assert.dom('th.table-header').exists({ count: 7 });
+    assert.dom('th.table-header').exists({ count: 8 });
     assert
       .dom('thead')
-      .hasText('JOB HISTORY DURATION START TIME COVERAGE METRICS ACTIONS');
+      .hasText(
+        'JOB HISTORY DURATION START TIME COVERAGE STAGE METRICS ACTIONS'
+      );
 
     assert.dom('tbody tr').exists({ count: 1 });
     assert.dom('tbody tr').includesText('6h 13m 8s');
@@ -309,10 +315,12 @@ module('Integration | Component | pipeline list view', function (hooks) {
     assert.dom('table').exists({ count: 1 });
     assert.dom('thead').exists({ count: 1 });
     assert.dom('tbody').exists({ count: 1 });
-    assert.dom('th.table-header').exists({ count: 7 });
+    assert.dom('th.table-header').exists({ count: 8 });
     assert
       .dom('thead')
-      .hasText('JOB HISTORY DURATION START TIME COVERAGE METRICS ACTIONS');
+      .hasText(
+        'JOB HISTORY DURATION START TIME COVERAGE STAGE METRICS ACTIONS'
+      );
     assert.dom('tbody tr').exists({ count: 1 });
     assert.dom('tbody tr').includesText('Still running.');
     assert.dom('tbody tr').includesText('04/16/2020, 01:30 AM');
@@ -372,10 +380,12 @@ module('Integration | Component | pipeline list view', function (hooks) {
     assert.dom('table').exists({ count: 1 });
     assert.dom('thead').exists({ count: 1 });
     assert.dom('tbody').exists({ count: 1 });
-    assert.dom('th.table-header').exists({ count: 7 });
+    assert.dom('th.table-header').exists({ count: 8 });
     assert
       .dom('thead')
-      .hasText('JOB HISTORY DURATION START TIME COVERAGE METRICS ACTIONS');
+      .hasText(
+        'JOB HISTORY DURATION START TIME COVERAGE STAGE METRICS ACTIONS'
+      );
     assert.dom('tbody tr').exists({ count: 1 });
     assert.dom('tbody tr').includesText('Still running.');
     assert.dom('tbody tr').includesText('04/16/2020, 01:30 AM');
@@ -435,10 +445,12 @@ module('Integration | Component | pipeline list view', function (hooks) {
     assert.dom('table').exists({ count: 1 });
     assert.dom('thead').exists({ count: 1 });
     assert.dom('tbody').exists({ count: 1 });
-    assert.dom('th.table-header').exists({ count: 7 });
+    assert.dom('th.table-header').exists({ count: 8 });
     assert
       .dom('thead')
-      .hasText('JOB HISTORY DURATION START TIME COVERAGE METRICS ACTIONS');
+      .hasText(
+        'JOB HISTORY DURATION START TIME COVERAGE STAGE METRICS ACTIONS'
+      );
     assert.dom('tbody tr').exists({ count: 1 });
     assert.dom('tbody tr').includesText('Still running.');
     assert.dom('tbody tr').includesText('04/16/2020, 01:30 AM');
@@ -498,10 +510,12 @@ module('Integration | Component | pipeline list view', function (hooks) {
     assert.dom('table').exists({ count: 1 });
     assert.dom('thead').exists({ count: 1 });
     assert.dom('tbody').exists({ count: 1 });
-    assert.dom('th.table-header').exists({ count: 7 });
+    assert.dom('th.table-header').exists({ count: 8 });
     assert
       .dom('thead')
-      .hasText('JOB HISTORY DURATION START TIME COVERAGE METRICS ACTIONS');
+      .hasText(
+        'JOB HISTORY DURATION START TIME COVERAGE STAGE METRICS ACTIONS'
+      );
     assert.dom('tbody tr').exists({ count: 1 });
     assert.dom('tbody tr').includesText('Still running.');
     assert.dom('tbody tr').includesText('04/16/2020, 01:30 AM');
@@ -561,10 +575,12 @@ module('Integration | Component | pipeline list view', function (hooks) {
     assert.dom('table').exists({ count: 1 });
     assert.dom('thead').exists({ count: 1 });
     assert.dom('tbody').exists({ count: 1 });
-    assert.dom('th.table-header').exists({ count: 7 });
+    assert.dom('th.table-header').exists({ count: 8 });
     assert
       .dom('thead')
-      .hasText('JOB HISTORY DURATION START TIME COVERAGE METRICS ACTIONS');
+      .hasText(
+        'JOB HISTORY DURATION START TIME COVERAGE STAGE METRICS ACTIONS'
+      );
     assert.dom('tbody tr').exists({ count: 1 });
     assert.dom('tbody tr').includesText('Still running.');
     assert.dom('tbody tr').includesText('04/16/2020, 01:30 AM');
@@ -624,10 +640,12 @@ module('Integration | Component | pipeline list view', function (hooks) {
     assert.dom('table').exists({ count: 1 });
     assert.dom('thead').exists({ count: 1 });
     assert.dom('tbody').exists({ count: 1 });
-    assert.dom('th.table-header').exists({ count: 7 });
+    assert.dom('th.table-header').exists({ count: 8 });
     assert
       .dom('thead')
-      .hasText('JOB HISTORY DURATION START TIME COVERAGE METRICS ACTIONS');
+      .hasText(
+        'JOB HISTORY DURATION START TIME COVERAGE STAGE METRICS ACTIONS'
+      );
     assert.dom('tbody tr').exists({ count: 1 });
     assert.dom('tbody tr').includesText('Not started.');
   });
@@ -683,10 +701,12 @@ module('Integration | Component | pipeline list view', function (hooks) {
     assert.dom('table').exists({ count: 1 });
     assert.dom('thead').exists({ count: 1 });
     assert.dom('tbody').exists({ count: 1 });
-    assert.dom('th.table-header').exists({ count: 7 });
+    assert.dom('th.table-header').exists({ count: 8 });
     assert
       .dom('thead')
-      .hasText('JOB HISTORY DURATION START TIME COVERAGE METRICS ACTIONS');
+      .hasText(
+        'JOB HISTORY DURATION START TIME COVERAGE STAGE METRICS ACTIONS'
+      );
     assert.dom('tbody tr').exists({ count: 1 });
     assert.dom('tbody tr').doesNotIncludeText('Still running.');
   });

tests/unit/components/pipeline/jobs/table/cell/stage/util-test.js

@@ -0,0 +1,28 @@
+import { module, test } from 'qunit';
+import getStageName from 'screwdriver-ui/components/pipeline/jobs/table/cell/stage/util';
+
+module('Unit | Component | pipeline/jobs/table/cell/stage/util', function () {
+  test('getStageName uses stage name', function (assert) {
+    const job = {
+      name: 'abc123',
+      permutations: [
+        {
+          stage: {
+            name: 'production'
+          }
+        }
+      ]
+    };
+
+    assert.equal(getStageName(job), job.permutations[0].stage.name);
+  });
+
+  test('getStageName uses default stage name when it does not exist', function (assert) {
+    const job = {
+      name: 'abc123',
+      permutations: [{}]
+    };
+
+    assert.equal(getStageName(job), 'N/A');
+  });
+});