fix: add more metrics links (#445)

app/components/build-banner/template.hbs

@@ -41,6 +41,7 @@
       <li class="subsection"><span class="banner-value">{{imagePullDuration}} pulling image</span></li>
       <li class="subsection"><span class="banner-value">{{buildDuration}} in build</span></li>
     </details>
+    {{#link-to "pipeline.metrics" (query-params jobId=jobId)}}See build metrics{{/link-to}}
     <span class="banner-label">Duration</span>
   </li>
   <li class="created">

app/components/workflow-tooltip/template.hbs

@@ -5,6 +5,7 @@
     {{#if tooltipData.job.buildId}}
       {{#link-to "pipeline.build" tooltipData.job.buildId}}Go to build details{{/link-to}}
     {{/if}}
+    {{#link-to "pipeline.metrics" (query-params jobId=tooltipData.job.id)}}Go to build metrics{{/link-to}}
     {{#if displayRestartButton}}
       {{#if (eq tooltipData.job.status "DISABLED")}}
         <p>{{tooltipData.job.stateChangeMessage}}</p>
@@ -17,4 +18,4 @@
     {{/if}}
   {{/if}}
   {{yield}}
-</div>
+</div>

app/pipeline/metrics/controller.js

@@ -13,6 +13,11 @@ const locked = Symbol('locked');
 export default Controller.extend({
   router: service(),
   session: service(),
+  queryParams: [
+    {
+      jobId: { type: 'string' }
+    }
+  ],
   inTrendlineView: false,
   isUTC: false,
   eventsChartName: 'eventsChart',
@@ -762,6 +767,7 @@ export default Controller.extend({
 
       if (id && this.selectedJobName !== name) {
         this.send('setJobId', id);
+        this.transitionToRoute({ queryParams: { jobId: id } });
       } else {
         this.set('errorMessage', `Unknown Job: ${name}`);
       }

app/pipeline/metrics/route.js

@@ -33,12 +33,12 @@ export default Route.extend({
     this.reinit();
     this.controllerFor('pipeline.metrics').reinit();
   },
-  model() {
+  model({ jobId = this.jobId }) {
     const controller = this.controllerFor('pipeline.metrics');
 
     controller.set('pipeline', this.pipeline);
 
-    const { successOnly, jobId, fetchAll, fetchJob, startTime, endTime } = this;
+    const { successOnly, fetchAll, fetchJob, startTime, endTime } = this;
     const toMinute = (sec = null) => (sec === null ? null : sec / 60);
     const jobsMap = this.get('pipeline.jobs').then(jobs =>
       jobs.reduce((map, j) => {
@@ -53,6 +53,10 @@ export default Route.extend({
       }, new Map())
     );
 
+    if (jobId) {
+      this.set('jobId', jobId);
+    }
+
     const metrics = RSVP.all([
       jobsMap,
       fetchAll
@@ -137,7 +141,7 @@ export default Route.extend({
               const jobName = jobs.get(`${b.jobId}`);
 
               if (jobName) {
-                jobMap[jobName] = b.jobId;
+                jobMap[jobName] = `${b.jobId}`;
                 info.values[jobName] = toMinute(b.duration);
                 info.ids[jobName] = b.id;
               }

app/styles/chart.scss

@@ -127,6 +127,7 @@
 
   svg {
     font-size: 0.8em;
+    overflow: visible !important;
 
     &:hover {
       .cursor-line {

tests/integration/components/build-banner/component-test.js

@@ -73,7 +73,7 @@ module('Integration | Component | build banner', function(hooks) {
   });
 
   test('it renders', async function(assert) {
-    assert.expect(10);
+    assert.expect(11);
 
     this.set('reloadCb', () => {
       assert.ok(true);
@@ -117,6 +117,7 @@ module('Integration | Component | build banner', function(hooks) {
         'title',
         'Total duration: 11 seconds, Blocked time: 4 seconds, Image pull time: 5 seconds, Build time: 2 seconds'
       );
+    assert.dom('.duration > a').hasText('See build metrics');
     assert.dom('.created .banner-value').hasText(expectedTime);
     assert.dom('.user .banner-value').hasText('Bruce W');
     assert.dom('.docker-container .banner-value').hasText('node:6');

tests/integration/components/workflow-tooltip/component-test.js

@@ -9,7 +9,7 @@ module('Integration | Component | workflow tooltip', function(hooks) {
   test('it renders', async function(assert) {
     await render(hbs`{{workflow-tooltip}}`);
 
-    assert.dom(this.element).hasText('');
+    assert.dom(this.element).hasText('Go to build metrics');
 
     // Template block usage:
     await render(hbs`
@@ -21,9 +21,10 @@ module('Integration | Component | workflow tooltip', function(hooks) {
     assert.dom(this.element).includesText('template block text');
   });
 
-  test('it renders build link', async function(assert) {
+  test('it renders build detail and metrics links', async function(assert) {
     const data = {
       job: {
+        id: 1,
         buildId: 1234,
         name: 'batmobile'
       }
@@ -33,8 +34,9 @@ module('Integration | Component | workflow tooltip', function(hooks) {
 
     await render(hbs`{{workflow-tooltip tooltipData=data}}`);
 
-    assert.dom('.content a').exists({ count: 1 });
-    assert.dom(this.element).hasText('Go to build details');
+    assert.dom('.content a').exists({ count: 2 });
+    assert.dom('a:first-child').hasText('Go to build details');
+    assert.dom('a:last-child').hasText('Go to build metrics');
   });
 
   test('it renders remote trigger link', async function(assert) {
@@ -71,7 +73,7 @@ module('Integration | Component | workflow tooltip', function(hooks) {
       confirmStartBuild="confirmStartBuild"
     }}`);
 
-    assert.dom('.content a').exists({ count: 2 });
+    assert.dom('.content a').exists({ count: 3 });
     assert.dom('a:first-child').hasText('Go to build details');
     assert.dom('a:last-child').hasText('Start pipeline from here');
   });

tests/mock/metrics.js

@@ -235,7 +235,7 @@ export function model() {
       startTime: '2019-03-25T01:00',
       endTime: '2019-03-26T17:01:19',
       successOnly: false,
-      jobId: 156,
+      jobId: '156',
       metrics: {
         events: {
           queuedTime: [0.18333333333333332, 0.23333333333333334, 0.25, 0.45],
@@ -281,10 +281,10 @@ export function model() {
           }
         ],
         jobMap: {
-          main: 156,
-          publish: 157,
-          beta: 158,
-          prod: 159
+          main: '156',
+          publish: '157',
+          beta: '158',
+          prod: '159'
         },
         steps: {
           sha: [

tests/unit/pipeline/metrics/controller-test.js

@@ -255,6 +255,8 @@ module('Unit | Controller | pipeline/metrics', function(hooks) {
   test('it sets dates, range and job id', function(assert) {
     let controller = this.owner.lookup('controller:pipeline/metrics');
 
+    controller.transitionToRoute = sinon.stub();
+
     run(() => {
       controller.set('model', metricsMock);
       controller.set('setDates', sinon.stub());
@@ -282,7 +284,8 @@ module('Unit | Controller | pipeline/metrics', function(hooks) {
       assert.ok(controller.get('setDates').calledWith(startISO, endISO));
 
       controller.send('selectJob', 'publish');
-      assert.ok(controller.get('actions.setJobId').calledWith(157));
+      assert.ok(controller.get('actions.setJobId').calledWith('157'));
+      assert.ok(controller.transitionToRoute.called);
 
       controller.send('selectJob', 'do not exist');
       assert.equal(controller.get('errorMessage'), 'Unknown Job: do not exist');