Refactor jobs table for use in events view

screwdriver-cd · Dec 10, 2024 · 64ff9e8 · 64ff9e8
1 parent 0193e86
commit 64ff9e8
Show file tree

Hide file tree

Showing 7 changed files with 272 additions and 130 deletions.
diff --git a/app/components/pipeline/jobs/table/component.js b/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 });
-  }
 }
diff --git a/app/components/pipeline/jobs/table/template.hbs b/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>
diff --git a/app/components/pipeline/workflow/component.js b/app/components/pipeline/workflow/component.js
@@ -45,6 +45,8 @@ export default class PipelineWorkflowComponent extends Component {
 
   @tracked workflowGraphToDisplay;
 
+  @tracked showGraph;
+
   workflowGraph;
 
   workflowGraphWithDownstreamTriggers;
@@ -107,6 +109,8 @@ export default class PipelineWorkflowComponent extends Component {
         this.setWorkflowGraphFromEvent();
       }
     }
+
+    this.showGraph = true;
   }
 
   willDestroy() {
@@ -180,9 +184,9 @@ export default class PipelineWorkflowComponent extends Component {
     return getDisplayJobNameLength(this.userSettings);
   }
 
-  get disableDownstreamTriggers() {
+  get hasDownstreamTriggers() {
     return (
-      this.workflowGraph.nodes.length ===
+      this.workflowGraph.nodes.length !==
       this.workflowGraphWithDownstreamTriggers.nodes.length
     );
   }
@@ -217,4 +221,9 @@ export default class PipelineWorkflowComponent extends Component {
       this.d3Data = null;
     }
   }
+
+  @action
+  setShowGraph(showGraph) {
+    this.showGraph = showGraph;
+  }
 }
diff --git a/app/components/pipeline/workflow/event-rail/styles.scss b/app/components/pipeline/workflow/event-rail/styles.scss
@@ -1,10 +1,7 @@
 @use 'screwdriver-colors' as colors;
-@use 'screwdriver-button' as button;
 
 @mixin styles {
   #event-rail {
-    @include button.styles;
-
     height: 100%;
     border-top: 1px solid rgba(colors.$sd-text-med, 0.5);
     border-right: 1px solid rgba(colors.$sd-text-med, 0.5);