fix(3433): highlight the selected job when navigating from build details to event views (#1564)

Author: yk634

app/components/build-banner/component.js

@@ -152,6 +152,20 @@ export default Component.extend({
     }
   }),
 
+  usesLegacyUi: computed({
+    get() {
+      return localStorage.getItem('oldUi') === 'true';
+    }
+  }),
+
+  eventRoute: computed('usesLegacyUi', {
+    get() {
+      return this.usesLegacyUi
+        ? 'pipeline.events.show'
+        : 'v2.pipeline.events.show';
+    }
+  }),
+
   isButtonDisabledLoaded: false,
   isButtonDisabled: computed(
     'buildAction',

app/components/build-banner/template.hbs

@@ -10,8 +10,9 @@
         </LinkTo>
     {{else}}
       <LinkTo
-        @route="v2.pipeline.events.show"
+        @route={{this.eventRoute}}
         @models={{array this.pipelineId this.event.id}}
+        @query={{hash jobId=this.jobId}}
         class="banner-value"
       >
         {{this.jobName}}

app/components/pipeline/event/card/component.js

@@ -325,7 +325,15 @@ export default class PipelineEventCardComponent extends Component {
   }
 
   get isHighlighted() {
-    return this.router.currentURL.endsWith(this.event.id);
+    const routeEventId = this.router.currentRoute?.attributes?.id
+      ? this.router.currentRoute.attributes.id
+      : this.router.currentRoute?.params?.event_id;
+
+    if (routeEventId !== undefined) {
+      return `${routeEventId}` === `${this.event.id}`;
+    }
+
+    return this.router.currentURL.split('?')[0].endsWith(`/${this.event.id}`);
   }
 
   get isOutlined() {

app/components/pipeline/workflow/graph/component.js

@@ -40,6 +40,8 @@ export default class PipelineWorkflowGraphComponent extends Component {
 
   showPRJobs;
 
+  lastScrolledSelectedJobKey = null;
+
   constructor() {
     super(...arguments);
     this.event = this.args.event;
@@ -61,6 +63,18 @@ export default class PipelineWorkflowGraphComponent extends Component {
     );
   }
 
+  get selectedJobId() {
+    return this.args.selectedJobId ? `${this.args.selectedJobId}` : '';
+  }
+
+  get selectedJobKey() {
+    if (!this.event?.id || !this.selectedJobId) {
+      return null;
+    }
+
+    return `${this.event.id}:${this.selectedJobId}`;
+  }
+
   getDecoratedGraph(
     workflowGraph,
     builds,
@@ -91,6 +105,43 @@ export default class PipelineWorkflowGraphComponent extends Component {
     });
   }
 
+  applySelectedJobLabel() {
+    if (!this.graphSvg) {
+      return;
+    }
+
+    let jobFound = false;
+
+    this.graphSvg.selectAll('.graph-label').classed('selected-job', node => {
+      const isSelected =
+        !!this.selectedJobId && `${node?.id}` === this.selectedJobId;
+
+      if (isSelected) {
+        jobFound = true;
+      }
+
+      return isSelected;
+    });
+
+    if (!jobFound) {
+      this.lastScrolledSelectedJobKey = null;
+
+      return;
+    }
+
+    if (
+      this.selectedJobKey &&
+      this.lastScrolledSelectedJobKey !== this.selectedJobKey
+    ) {
+      const selectedLabel = this.graphSvg
+        .select('.graph-label.selected-job')
+        .node();
+
+      selectedLabel?.scrollIntoView({ block: 'center', inline: 'center' });
+      this.lastScrolledSelectedJobKey = this.selectedJobKey;
+    }
+  }
+
   @action
   draw(element) {
     const isSkippedEvent = isSkipped(this.event, this.builds);
@@ -188,6 +239,8 @@ export default class PipelineWorkflowGraphComponent extends Component {
       verticalDisplacements,
       horizontalDisplacements
     );
+
+    this.applySelectedJobLabel();
   }
 
   @action
@@ -243,5 +296,6 @@ export default class PipelineWorkflowGraphComponent extends Component {
       nodeWidth
     );
     updateStageStatuses(this.graphSvg, this.decoratedGraph);
+    this.applySelectedJobLabel();
   }
 }

app/components/pipeline/workflow/graph/styles.scss

@@ -12,6 +12,10 @@
 
 @mixin styles {
   #workflow-graph {
+    .graph-label.selected-job {
+      fill: colors.$sd-failure;
+    }
+
     .graph-node {
       font-family: 'screwdriver';
       fill: colors.$sd-text-light;

app/components/pipeline/workflow/graph/template.hbs

@@ -1,4 +1,4 @@
 <div id="workflow-graph"
   {{did-insert this.draw}}
-  {{did-update this.redraw @workflowGraph @builds @stageBuilds @event @collapsedStages this.pipelinePageState.jobs}}
+  {{did-update this.redraw @workflowGraph @builds @stageBuilds @event @collapsedStages @selectedJobId this.pipelinePageState.jobs}}
 />

app/components/pipeline/workflow/template.hbs

@@ -90,6 +90,7 @@
           <Pipeline::Workflow::Graph
             @workflowGraph={{this.workflowGraphToDisplay}}
             @event={{this.event}}
+            @selectedJobId={{@jobId}}
             @builds={{this.builds}}
             @stageBuilds={{this.stageBuilds}}
             @collapsedStages={{this.collapsedStages}}

app/components/workflow-graph-d3/component.js

@@ -218,6 +218,53 @@ export default Component.extend({
       }
     }
   },
+  getSelectedJobKey() {
+    const eventId = this.selectedEventObj?.id;
+    const selectedJobId = this.jobId;
+
+    if (!eventId || !selectedJobId || this.minified) {
+      return null;
+    }
+
+    return `${eventId}:${selectedJobId}`;
+  },
+
+  applySelectedJobLabel(svg) {
+    if (!svg) {
+      return;
+    }
+
+    const selectedJobId = this.jobId ? `${this.jobId}` : '';
+
+    let jobFound = false;
+
+    svg.selectAll('.graph-label').classed('selected-job', node => {
+      const isSelected =
+        !this.minified && !!selectedJobId && `${node?.id}` === selectedJobId;
+
+      if (isSelected) {
+        jobFound = true;
+      }
+
+      return isSelected;
+    });
+
+    const selectedJobKey = this.getSelectedJobKey();
+
+    if (!jobFound) {
+      this.set('lastScrolledSelectedJobKey', null);
+
+      return;
+    }
+
+    if (selectedJobKey && this.lastScrolledSelectedJobKey !== selectedJobKey) {
+      const selectedLabel = svg.select('.graph-label.selected-job').node();
+
+      selectedLabel?.scrollIntoView({ block: 'center', inline: 'center' });
+      this.set('lastScrolledSelectedJobKey', selectedJobKey);
+    }
+  },
+
   async redraw(data) {
     if (!data) return;
     const el = d3.select(this.element);
@@ -280,6 +327,8 @@ export default Component.extend({
         );
       }
     });
+
+    this.applySelectedJobLabel(el);
   },
   async draw(data) {
     if (this.isDestroying || this.isDestroyed) {
@@ -380,5 +429,7 @@ export default Component.extend({
         horizontalDisplacements
       );
     }
+
+    this.applySelectedJobLabel(svg);
   }
 });

app/v2/pipeline/events/show/controller.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+
+export default class NewPipelineEventsShowController extends Controller {
+  queryParams = ['jobId'];
+
+  jobId = '';
+}

app/v2/pipeline/events/show/route.js

@@ -10,13 +10,14 @@ export default class NewPipelineEventsShowRoute extends Route {
   async model(params, transition) {
     const eventId = params.event_id;
     const pipelineId = this.pipelinePageState.getPipelineId();
+    const transitionLatestEvent = transition.data?.latestEvent;
 
     let latestEvent;
 
     let event;
 
-    if (transition.data.latestEvent) {
-      event = transition.data.latestEvent;
+    if (`${transitionLatestEvent?.id}` === `${eventId}`) {
+      event = transitionLatestEvent;
       latestEvent = event;
     } else {
       event = await this.shuttle