feat: Job table for use in event/PR view

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

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { dom } from '@fortawesome/fontawesome-svg-core';
 import DataReloader from './dataReloader';
 import getDisplayName from './util';
@@ -10,11 +11,23 @@ const INITIAL_PAGE_SIZE = 10;
 export default class PipelineJobsTableComponent extends Component {
   @service shuttle;
 
+  @service workflowDataReload;
+
   @service('emt-themes/ember-bootstrap-v5') emberModelTableBootstrapTheme;
 
+  pipeline;
+
+  userSettings;
+
+  event;
+
+  jobs;
+
   dataReloader;
 
-  data = [];
+  numBuilds;
+
+  @tracked data;
 
   columns = [
     {
@@ -66,24 +79,53 @@ export default class PipelineJobsTableComponent extends Component {
   constructor() {
     super(...arguments);
 
-    const jobIds = this.args.jobs.map(job => job.id);
+    this.pipeline = this.args.pipeline;
+    this.event = this.args.event;
+    this.jobs = this.args.jobs;
+    this.userSettings = this.args.userSettings;
+    this.numBuilds = this.args.numBuilds;
+    this.data = null;
+  }
+
+  willDestroy() {
+    super.willDestroy();
+
+    this.dataReloader.stop(this.event?.id);
+  }
+
+  @action
+  initialize(element) {
+    dom.i2svg({ node: element });
+    this.initializeDataLoader().then(() => {});
+  }
+
+  @action
+  async initializeDataLoader() {
+    const prNum = this.event?.prNum;
+
+    if (prNum) {
+      this.jobs = this.workflowDataReload.getJobsForPr(prNum);
+    }
+
+    const jobIds = this.jobs.map(job => job.id);
 
     this.dataReloader = new DataReloader(
-      this.shuttle,
+      { shuttle: this.shuttle, workflowDataReload: this.workflowDataReload },
       jobIds,
       INITIAL_PAGE_SIZE,
-      this.args.numBuilds
+      this.numBuilds
     );
-    const initialJobIds = this.dataReloader.newJobIds();
 
-    this.args.jobs.forEach(job => {
+    this.data = [];
+
+    this.jobs.forEach(job => {
       this.data.push({
         job,
-        jobName: getDisplayName(job),
+        jobName: getDisplayName(job, prNum),
         stageName: job?.permutations?.[0]?.stage?.name || 'N/A',
-        pipeline: this.args.pipeline,
-        jobs: this.args.jobs,
-        timestampFormat: this.args.userSettings.timestampFormat,
+        pipeline: this.pipeline,
+        jobs: this.jobs,
+        timestampFormat: this.userSettings.timestampFormat,
         onCreate: (jobToMonitor, buildsCallback) => {
           this.dataReloader.addCallbackForJobId(
             jobToMonitor.id,
@@ -96,15 +138,27 @@ export default class PipelineJobsTableComponent extends Component {
       });
     });
 
-    this.dataReloader.fetchBuildsForJobs(initialJobIds).then(() => {
-      this.dataReloader.start();
-    });
+    const eventId = this.event?.id;
+
+    if (!eventId) {
+      const initialJobIds = this.dataReloader.newJobIds();
+
+      await this.dataReloader.fetchBuildsForJobs(initialJobIds);
+    }
+
+    this.dataReloader.start(eventId);
   }
 
-  willDestroy() {
-    super.willDestroy();
+  @action
+  update(element, [event]) {
+    this.data = [];
+
+    if (event) {
+      this.dataReloader.stop(this.event?.id);
+      this.event = event;
+    }
 
-    this.dataReloader.destroy();
+    this.initializeDataLoader().then(() => {});
   }
 
   get theme() {
@@ -129,9 +183,4 @@ export default class PipelineJobsTableComponent extends Component {
       .fetchBuildsForJobs(this.dataReloader.newJobIds())
       .then(() => {});
   }
-
-  @action
-  handleDidInsert(element) {
-    dom.i2svg({ node: element });
-  }
 }

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

@@ -1,9 +1,13 @@
 import ENV from 'screwdriver-ui/config/environment';
 import { setBuildStatus } from 'screwdriver-ui/utils/pipeline/build';
 
+const QUEUE_NAME = 'jobs-table-data-reloader';
+
 export default class DataReloader {
   shuttle;
 
+  workflowDataReload;
+
   pageSize;
 
   jobIdsMatchingFilter = [];
@@ -16,8 +20,11 @@ export default class DataReloader {
 
   numBuilds;
 
-  constructor(shuttle, jobIds, pageSize, numBuilds) {
+  constructor(apiFetchers, jobIds, pageSize, numBuilds) {
+    const { shuttle, workflowDataReload } = apiFetchers;
+
     this.shuttle = shuttle;
+    this.workflowDataReload = workflowDataReload;
     this.jobIdsMatchingFilter = jobIds.slice(0, pageSize);
 
     jobIds.forEach(jobId => {
@@ -68,6 +75,14 @@ export default class DataReloader {
     this.jobCallbacks[jobId].push(buildsCallback);
   }
 
+  sendBuildsToCallbacks(jobId, builds) {
+    if (this.jobCallbacks[jobId]) {
+      this.jobCallbacks[jobId].forEach(callback => {
+        callback(builds);
+      });
+    }
+  }
+
   async fetchBuildsForJobs(jobIds) {
     if (jobIds.length === 0) {
       return;
@@ -87,12 +102,7 @@ export default class DataReloader {
           const { jobId } = buildsForJob;
 
           this.builds[jobId] = buildsForJob.builds;
-
-          if (this.jobCallbacks[jobId]) {
-            this.jobCallbacks[jobId].forEach(callback => {
-              callback(buildsForJob.builds);
-            });
-          }
+          this.sendBuildsToCallbacks(jobId, buildsForJob.builds);
         });
       });
   }
@@ -101,21 +111,44 @@ export default class DataReloader {
     this.numBuilds = numBuilds;
   }
 
-  start() {
-    this.intervalId = setInterval(() => {
-      if (Object.keys(this.jobCallbacks).length === 0) {
-        return;
-      }
+  start(eventId) {
+    if (eventId) {
+      this.workflowDataReload.registerBuildsCallback(
+        QUEUE_NAME,
+        eventId,
+        builds => {
+          this.parseEventBuilds(builds);
+        }
+      );
+    } else {
+      this.intervalId = setInterval(() => {
+        if (Object.keys(this.jobCallbacks).length === 0) {
+          return;
+        }
 
-      this.fetchBuildsForJobs(this.jobIdsMatchingFilter).then(() => {});
-    }, ENV.APP.BUILD_RELOAD_TIMER);
+        this.fetchBuildsForJobs(this.jobIdsMatchingFilter).then(() => {});
+      }, ENV.APP.BUILD_RELOAD_TIMER);
+    }
   }
 
-  destroy() {
+  stop(eventId) {
     if (this.intervalId) {
       clearInterval(this.intervalId);
     }
+    if (eventId) {
+      this.workflowDataReload.removeBuildsCallback(QUEUE_NAME, eventId);
+    }
 
     this.intervalId = null;
   }
+
+  parseEventBuilds(eventBuilds) {
+    eventBuilds.forEach(eventBuild => {
+      const { jobId } = eventBuild;
+      const builds = [eventBuild];
+
+      this.builds[jobId] = builds;
+      this.sendBuildsToCallbacks(jobId, builds);
+    });
+  }
 }

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

@@ -1,9 +1,13 @@
-
-<ModelsTable {{did-insert this.handleDidInsert}}
-  id="pipeline-jobs"
-  @data={{this.data}}
-  @columns={{this.columns}}
-  @columnComponents={{hash
+<div
+  id="pipeline-jobs-container"
+  {{did-insert this.initialize}}
+  {{did-update this.update @event}}
+>
+  <ModelsTable
+    id="pipeline-jobs"
+    @data={{this.data}}
+    @columns={{this.columns}}
+    @columnComponents={{hash
     jobCell=(component "pipeline/jobs/table/cell/job")
     historyCell=(component "pipeline/jobs/table/cell/history")
     durationCell=(component "pipeline/jobs/table/cell/duration")
@@ -19,50 +23,51 @@
 >
   <div id="jobs-table">
       <MT.Table />
-  </div>
+    </div>
 
-  <div id="jobs-table-footer">
-    <MT.Summary
-      id="table-summary"
-      as |Summary|
-    >
-      {{Summary.summary}}
-    </MT.Summary>
+    <div id="jobs-table-footer">
+      <MT.Summary
+        id="table-summary"
+        as |Summary|
+      >
+        {{Summary.summary}}
+      </MT.Summary>
 
-    <MT.PageSizeSelect id="select-pagination-size"/>
+      <MT.PageSizeSelect id="select-pagination-size"/>
 
-    <MT.PaginationSimple id="pagination-controls"as |PS|>
-      <div id="page-navigation">
-        <BsButton
-          disabled={{if PS.goToBackEnabled false true}}
-          @onClick={{fn PS.goToFirst}}
-        >
-          <FaIcon @icon="angle-double-left"/>
-        </BsButton>
-        <BsButton
-          disabled={{if PS.goToBackEnabled false true}}
-          @onClick={{fn PS.goToPrev}}
-        >
-          <FaIcon @icon="angle-left"/>
-        </BsButton>
-        <BsButton
-          disabled={{if PS.goToForwardEnabled false true}}
-          @onClick={{fn PS.goToNext}}
-        >
-          <FaIcon @icon="angle-right"/>
-        </BsButton>
-        <BsButton
-          disabled={{if PS.goToForwardEnabled false true}}
-          @onClick={{fn PS.goToLast}}
-        >
-          <FaIcon @icon="angle-double-right"/>
-        </BsButton>
-      </div>
+      <MT.PaginationSimple id="pagination-controls"as |PS|>
+        <div id="page-navigation">
+          <BsButton
+            disabled={{if PS.goToBackEnabled false true}}
+            @onClick={{fn PS.goToFirst}}
+          >
+            <FaIcon @icon="angle-double-left"/>
+          </BsButton>
+          <BsButton
+            disabled={{if PS.goToBackEnabled false true}}
+            @onClick={{fn PS.goToPrev}}
+          >
+            <FaIcon @icon="angle-left"/>
+          </BsButton>
+          <BsButton
+            disabled={{if PS.goToForwardEnabled false true}}
+            @onClick={{fn PS.goToNext}}
+          >
+            <FaIcon @icon="angle-right"/>
+          </BsButton>
+          <BsButton
+            disabled={{if PS.goToForwardEnabled false true}}
+            @onClick={{fn PS.goToLast}}
+          >
+            <FaIcon @icon="angle-double-right"/>
+          </BsButton>
+        </div>
 
-      <div id="page-select">
-        <label class="input-group-text">Page:</label>
-        <PS.PageNumberSelect/>
-      </div>
-    </MT.PaginationSimple>
-  </div>
-</ModelsTable>
+        <div id="page-select">
+          <label class="input-group-text">Page:</label>
+          <PS.PageNumberSelect/>
+        </div>
+      </MT.PaginationSimple>
+    </div>
+  </ModelsTable>
+</div>

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

@@ -1,10 +1,11 @@
 /**
  * Get the display name of the job.  Uses the display name configured in the annotation if available.
  * @param job {Object} Job in the format returned by the API
+ * @param prNum {Number} PR number
  * @returns {string}
  */
-export default function getDisplayName(job) {
-  const jobName = job.name;
+export default function getDisplayName(job, prNum) {
+  const jobName = prNum ? job.name.slice(`PR-${prNum}:`.length) : job.name;
   const { annotations } = job?.permutations?.[0] || {};
 
   if (annotations) {