fix: make dashboard/show page fetch pipeline metrics

app/components/collection-table-row/styles.scss

@@ -1,3 +1,28 @@
-.events-thumbnail {
-  width: 100%;
+& {
+  .events-thumbnail {
+    width: 100%;
+  }
+
+  .branch {
+    i {
+      vertical-align: middle;
+    }
+
+    span {
+      display: inline-block;
+      max-width: 70%;
+      vertical-align: middle;
+    }
+  }
+
+  .app-id a {
+    max-width: 95%;
+  }
+
+  .branch span,
+  .app-id a {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }

app/components/collection-table-row/template.hbs

@@ -4,11 +4,16 @@
   {{/if}}
 </td>
 <td class="app-id">
-  {{#link-to "pipeline" pipeline.id}}{{pipeline.scmRepo.name}}{{/link-to}}
+  {{#link-to "pipeline" pipeline.id title=pipeline.scmRepo.name}}{{pipeline.scmRepo.name}}{{/link-to}}
+</td>
+<td class="branch">
+  {{fa-icon "code-fork"}}
+  <span title={{pipeline.branch}}>{{pipeline.branch}}</span>
 </td>
-<td class="branch">{{fa-icon "code-fork"}}{{pipeline.branch}}</td>
 <td class="status">
-  {{fa-icon lastEventInfo.icon class=lastEventInfo.statusColor}}
+  {{#link-to "pipeline" pipeline.id title=pipeline.scmRepo.name}}
+    {{fa-icon lastEventInfo.icon class=lastEventInfo.statusColor}}
+  {{/link-to}}
   <a href={{lastEventInfo.commitUrl}}>
     {{lastEventInfo.sha}}
   </a>
@@ -22,7 +27,7 @@
 <td class="history">
   {{events-thumbnail
       events=eventsInfo
-      pipeline=pipeline.id
+      pipelineId=pipeline.id
       class="events-thumbnail"
   }}
 </td>

app/components/collection-view/component.js

@@ -96,8 +96,10 @@ export default Component.extend({
             return 'ban';
           case 'unstable':
             return 'exclamation-circle';
+          case 'frozen':
+            return 'minus-circle';
           default:
-            return '';
+            return 'question-circle';
         }
       };
 
@@ -116,8 +118,10 @@ export default Component.extend({
             return 'build-running';
           case 'unstable':
             return 'build-unstable';
+          case 'frozen':
+            return 'build-frozen';
           default:
-            return '';
+            return 'build-unknown';
         }
       };
 
@@ -175,13 +179,13 @@ export default Component.extend({
               .padStart(2, '0');
 
             ret.eventsInfo = metrics.map(event => ({
-              duration: event.duration,
+              duration: event.duration || 0,
               statusColor: getColor(event.status.toLowerCase())
             }));
             ret.lastEventInfo = {
               startTime: `${lastEventStartMonth}/${lastEventStartDay}/${lastEventStartYear}`,
               statusColor: getColor(lastEvent.status.toLowerCase()),
-              durationText: formatTime(lastEvent.duration),
+              durationText: lastEvent.duration ? formatTime(lastEvent.duration) : '--',
               sha: getSha(lastEvent.sha),
               icon: getIcon(lastEvent.status.toLowerCase()),
               commitMessage: lastEvent.commit.message,

app/components/collection-view/styles.scss

@@ -1,6 +1,8 @@
 .collection-view {
   overflow-y: scroll;
+  overflow-x: hidden;
   height: calc(100vh - 56px);
+  width: 100%;
 
   button {
     border: none;
@@ -162,15 +164,18 @@
   }
 
   .app-id {
-    width: 22%;
+    width: 20%;
+    max-width: 400px;
   }
 
   .branch {
-    width: 15%;
+    width: 12%;
+    max-width: 200px;
   }
 
   .status {
-    width: 10%;
+    width: 15%;
+    min-width: 120px;
 
     a {
       display: inline;
@@ -291,6 +296,67 @@
     }
   }
 
+  @media screen and (max-width: 900px) {
+    .pipeline-card {
+      width: 100%;
+    }
+
+    .app-id {
+      max-width: 180px;
+      width: 21%;
+    }
+
+    .branch {
+      max-width: 180px;
+      width: 21%;
+    }
+
+    .status {
+      width: 20%;
+    }
+
+    .start {
+      width: 15%;
+    }
+
+    .duration {
+      width: 15%;
+    }
+
+    .history {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .header__organize {
+      justify-content: flex-start;
+    }
+
+    .duration {
+      display: none;
+    }
+
+    .app-id {
+      max-width: 120px;
+      width: 26%;
+    }
+
+    .branch {
+      max-width: 120px;
+      width: 26%;
+    }
+
+    .status {
+      width: 23%;
+      min-width: 120px;
+    }
+
+    .start {
+      width: 17%;
+    }
+  }
+
   // sass-lint:disable class-name-format
   .collection-pipeline__remove {
     opacity: 0;
@@ -322,10 +388,18 @@
     color: $sd-unstable;
   }
 
+  .build-frozen {
+    color: $sd-frozen;
+  }
+
   .build-empty {
     color: $sd-no-build;
   }
 
+  .build-unknown {
+    color: $sd-no-build;
+  }
+
   .description-placeholder {
     opacity: 0.5;
   }

app/components/collection-view/template.hbs

@@ -9,7 +9,7 @@
     {{info-message message=linkCopied type="success" icon="check"}}
   {{/if}}
   <div class="header row">
-    <div class="col-md-8">
+    <div class="col-xs-12 col-sm-8">
       <h2 class="header__name">{{collection.name}}</h2>
 
       <span onclick={{action "toggleAddPipelineModal"}} class="collection-operation">
@@ -88,7 +88,7 @@
         <p class="description-placeholder">Add a description</p>
       {{/if}}
     </div>
-    <div class="header__organize col-md-3">
+    <div class="header__organize col-xs-6 col-sm-3">
       {{#if showOrganizeButton}}
         {{#if isOrganizing}}
           {{#if showOperations}}
@@ -109,7 +109,7 @@
       {{/if}}
     </div>
     <BsButtonGroup
-      class="header__change-view col-md-1"
+      class="header__change-view col-xs-6 col-sm-1"
       @value={{activeViewOptionValue}}
       @type="radio"
       @onChange={{action (mut activeViewOptionValue)}} as |bg|>

app/components/collections-flyout/styles.scss

@@ -1,6 +1,4 @@
 & {
-  max-width: 275px;
-
   a {
     cursor: pointer;
   }
@@ -23,6 +21,13 @@
     border-bottom: 1px solid $sd-white;
     position: relative;
 
+    a {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+    }
+
     &:hover {
       background-color: $sd-flyout-hover;
 
@@ -72,19 +77,31 @@
   // sass-lint:disable class-name-format
   .header {
     &__text {
-      font-size: 1.5em;
-      margin-top: 20px;
+      font-size: 1.3em;
+      margin-top: 22px;
+      padding: 0 2px 0;
     }
 
     &__edit {
       font-size: 0.9em;
       text-decoration: none;
       margin-top: 25px;
+      text-align: end;
     }
   }
   // sass-lint:enable class-name-format
 }
 
+@media (min-width: 1330px) {
+  .flyout {
+    .header__text {
+      font-size: 1.5em;
+      margin-top: 20;
+      padding: 0 20px 0;
+    }
+  }
+}
+
 // match with bootstrap min-width: for .col-md-2
 @media (min-width: 992px) {
   .flyout {

app/components/collections-flyout/template.hbs

@@ -13,7 +13,7 @@
   </div>
   {{#each orderedCollections as |collection|}}
     <div class="collection-wrapper row {{if (eq collection.id selectedCollectionId) " row--active"}}">
-      {{#link-to "dashboard.show" collection.id}}
+      {{#link-to "dashboard.show" collection.id title=collection.name}}
         {{collection.name}}
       {{/link-to}}
       {{#unless (eq collection.type "default")}}

app/components/events-thumbnail/component.js

@@ -38,14 +38,19 @@ export default Component.extend({
     svg.style('padding', `0 ${paddingLeft} 0 ${paddingRight}`);
 
     // Fixed number of bars
-    this.events = this.events.reverse().concat(
-      RANDOM_NUMS.slice(totalNumberOfEvents - MAX_NUM_EVENTS_SHOWN, MAX_NUM_EVENTS_SHOWN).map(
-        randomNum => ({
-          duration: maxDuration * randomNum,
-          statusColor: 'build-empty'
-        })
-      )
-    );
+    if (this.events.length < MAX_NUM_EVENTS_SHOWN) {
+      this.events = [
+        ...this.events.reverse(),
+        ...RANDOM_NUMS.slice(totalNumberOfEvents - MAX_NUM_EVENTS_SHOWN, MAX_NUM_EVENTS_SHOWN).map(
+          randomNum => ({
+            duration: maxDuration * randomNum,
+            statusColor: 'build-empty'
+          })
+        )
+      ];
+    } else {
+      this.events = this.events.slice(0, MAX_NUM_EVENTS_SHOWN).reverse();
+    }
 
     const bars = svg
       .selectAll('rect')

app/components/events-thumbnail/styles.scss

@@ -17,6 +17,10 @@ svg {
   fill: $sd-failure;
 }
 
+.build-frozen {
+  fill: $sd-frozen;
+}
+
 .build-unstable {
   fill: $sd-unstable;
 }

app/components/pipeline-card/template.hbs

@@ -19,14 +19,16 @@
       }} --}}
       {{pipeline.scmRepo.name}}
     {{/link-to}}
-    <div>
+    <div title={{pipeline.branch}}>
       {{fa-icon "code-fork"}}
       {{pipeline.branch}}
     </div>
   </div>
   <div class="commit-info">
     <div class="commit-status">
-      {{fa-icon lastEventInfo.icon class=lastEventInfo.statusColor}}
+      {{#link-to "pipeline" pipeline.id title=pipeline.scmRepo.name}}
+        {{fa-icon lastEventInfo.icon class=lastEventInfo.statusColor}}
+      {{/link-to}}
       <a href={{lastEventInfo.commitUrl}}> 
         {{lastEventInfo.sha}}
       </a>

app/dashboard/show/route.js

@@ -1,20 +1,19 @@
 import RSVP from 'rsvp';
 import Route from '@ember/routing/route';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
-import timeRange from 'screwdriver-ui/utils/time-range';
+
+const MAX_NUM_EVENTS_SHOWN = 20;
 
 export default Route.extend(AuthenticatedRouteMixin, {
   model(params) {
-    const { startTime, endTime } = timeRange(new Date(), '1mo');
-
     return this.store.findRecord('collection', params.collection_id).then(collection => {
       return RSVP.hash({
         metricsMap: RSVP.hash(
           (collection.pipelineIds || []).reduce((oldMap, pipelineId) => {
             oldMap[pipelineId] = this.store.query('metric', {
               pipelineId,
-              startTime,
-              endTime
+              page: 1,
+              count: MAX_NUM_EVENTS_SHOWN
             });
 
             return oldMap;

app/styles/screwdriver-colors.scss

@@ -45,6 +45,7 @@ $sd-no-build: $grey-600;
 $sd-empty: #e8e8e8;
 
 $sd-running: #0f69ff;
+$sd-frozen: #acd9ff;
 $sd-queued: $sd-running;
 $sd-unstable: $sd-warning;
 $sd-running-gradient-start: $sd-link;