feat(netflix): Improve Availability Context Dropdown

spinnaker · Mar 8, 2017 · 0458e06 · 0458e06
1 parent 5a891b4
commit 0458e06
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 11 deletions.
diff --git a/app/scripts/modules/netflix/availability/availability.directive.html b/app/scripts/modules/netflix/availability/availability.directive.html
@@ -5,12 +5,12 @@
 
   <div class="dropdown-menu availability-graphs" uib-dropdown-menu>
     <div class="heading">
-      <h4>Availability Status <help-field content="The availability trends for the Netflix service represented as 'nines' and availability percentage."></help-field></h4>
+      <h4>Netflix Service Availability Status <help-field key="availability.context"></help-field></h4>
     </div>
     <div class="row">
       <div class="section current">
         <h5>Recent</h5>
-        <h6>Current</h6>
+        <h6>Reason</h6>
         <div class="current-score aggregate-score-{{aggregate.score}}"><span ng-bind-html="aggregate.reason"></span></div>
         <h6>Yesterday <help-field content="The availability of the Netflix service from {{yesterday.date_range[0] | date:'short'}} to {{yesterday.date_range[1] | date:'short'}} has a target of {{yesterday.target_nines}} nines."></help-field></h6>
         <div class="section-title">Average</div>

diff --git a/app/scripts/modules/netflix/availability/availability.less b/app/scripts/modules/netflix/availability/availability.less
@@ -18,6 +18,9 @@
         font-size: 16px;
         margin-left: 5px;
       }
+      .aggregate-score-4 {
+        color: @mid_light_grey;
+      }
       .current-score {
         width: 220px;
         text-align: center;
@@ -149,6 +152,9 @@
       padding: 15px 20px;
       color: #fff;
     }
+    .glyphicon {
+      color: @mid_light_grey;
+    }
   }
 
   .section {
@@ -162,3 +168,10 @@
     float: left;
   }
 }
+
+.availability-trend-popover {
+  h5 {
+    font-weight: 700;
+    font-size: 16px;
+  }
+}
diff --git a/app/scripts/modules/netflix/availability/availability.read.service.ts b/app/scripts/modules/netflix/availability/availability.read.service.ts
@@ -6,6 +6,7 @@ export interface IAvailabilityDataTimeSeries {
   is_outage: number[];
   availability: number[];
   datetime: string[];
+  incs: string[][];
 }
 
 export interface IAvailabilityWindow {

diff --git a/app/scripts/modules/netflix/availability/availability.trend.component.ts b/app/scripts/modules/netflix/availability/availability.trend.component.ts
@@ -1,28 +1,34 @@
 import { module } from 'angular';
 import { Line, line } from 'd3-shape';
 import { scaleLinear, scaleLog } from 'd3-scale';
+import { get } from 'lodash';
 
 import { IAvailabilityWindow } from './availability.read.service';
 
 import './availability.less';
 
+interface PopoverContent {
+  datetime: string;
+  incidents: string[];
+  availability: number;
+}
+
 interface Dot {
   r: number;
   cx: string;
   cy: string;
   score: number;
+  popoverContent: PopoverContent;
 }
 
 export class AvailabilityTrendController implements ng.IComponentController {
   public availabilityWindow: IAvailabilityWindow;
-  public datetime: string[];
   public height: number;
   public width: number;
   public trendLine: string;
   public dots: Dot[] = [];
   public popoverOpen: boolean[] = [];
   public popoverTemplate: string = require('./availability.trend.popover.html');
-  public popoverContents: string[] = [];
 
   private margin = 5;
   private popoverClose: ng.IPromise<void>[] = [];
@@ -51,11 +57,18 @@ export class AvailabilityTrendController implements ng.IComponentController {
 
     this.availabilityWindow.ts.is_outage.forEach((isOutage, index) => {
       if (isOutage) {
+        const popoverContent: PopoverContent = {
+          datetime: get(this.availabilityWindow, ['ts', 'datetime', index],  'Unknown'),
+          availability: get(this.availabilityWindow, ['ts', 'availability', index], 0),
+          incidents: get(this.availabilityWindow, ['ts', 'incs', index], <string[]>[])
+        };
+
         dots.push({
           r: 3,
           cx: xScale(index),
           cy: yScale(this.availabilityWindow.ts.availability[index]),
-          score: this.getScore(this.availabilityWindow.ts.availability[index])
+          score: this.getScore(this.availabilityWindow.ts.availability[index]),
+          popoverContent: popoverContent
         });
       }
     });
@@ -102,7 +115,7 @@ export class AvailabilityTrendController implements ng.IComponentController {
         () => {
           this.popoverOpen[index] = false;
         },
-        300);
+        500);
     } else {
       this.popoverOpen[index] = false;
     }

diff --git a/app/scripts/modules/netflix/availability/availability.trend.html b/app/scripts/modules/netflix/availability/availability.trend.html
@@ -2,13 +2,13 @@
   <svg ng-attr-width="{{$ctrl.width}}" ng-attr-height="{{$ctrl.height}}">
     <g>
       <path ng-attr-d="{{$ctrl.trendLine}}"></path>
-      <g ng-repeat="(i, dot) in $ctrl.dots">
-        <!--uib-popover-template="$ctrl.popoverTemplate"
+      <g ng-repeat="(i, dot) in $ctrl.dots"
+        uib-popover-template="$ctrl.popoverTemplate"
         ng-mouseenter="$ctrl.showPopover(i)"
         ng-mouseleave="$ctrl.hidePopover(i, true)"
         popover-placement="top"
         popover-is-open="$ctrl.popoverOpen[i]"
-        popover-trigger="none"-->
+        popover-trigger="none">
         <circle ng-attr-r="{{dot.r}}" ng-attr-cx="{{dot.cx}}" ng-attr-cy="{{dot.cy}}" class="score-fill-{{dot.score}}"></circle>
       </g>
     </g>

diff --git a/app/scripts/modules/netflix/availability/availability.trend.popover.html b/app/scripts/modules/netflix/availability/availability.trend.popover.html
@@ -1,3 +1,11 @@
 <div ng-mouseenter="$ctrl.popoverHovered(i)"
-     ng-mouseleave="$ctrl.hidePopover(i)"
-     ng-bind-html="$ctrl.popoverContent[i]"></div>
+     ng-mouseleave="$ctrl.hidePopover(i)" class="availability-trend-popover">
+  <h5>{{dot.popoverContent.datetime}}</h5>
+  <strong>Availability:</strong> {{dot.popoverContent.availability}}%<br />
+  <strong>Incident{{dot.popoverContent.incidents.length !== 1 ? 's' : ''}}:</strong>
+  <span ng-repeat="(i, inc) in dot.popoverContent.incidents">
+    <a href="http://go/jira/browse/{{inc}}" target="_blank">{{inc}}</a>
+    <span ng-if="i < dot.popoverContent.incidents.length - 1">, </span>
+  </span>
+  <span ng-if="dot.popoverContent.incidents.length === 0">Unknown</span>
+</div>
diff --git a/app/scripts/modules/netflix/help/netflixHelpContents.registry.js b/app/scripts/modules/netflix/help/netflixHelpContents.registry.js
@@ -74,6 +74,10 @@ module.exports = angular
                     <li>none</li>
                   </ul>
                   <a href="https://confluence.netflix.com/display/PDCLOUD/Validation+for+Persisted+Properties" target="_blank">Full Documentation</a>`
+      },
+      {
+        key: 'availability.context',
+        contents: 'The availability trends for the Netflix service represented as percentage of excepted stream starts acheived and the number of \'nines\' of that availability. <a href="http://go/availabilitycontextdoc" target="_blank">Click here</a> for more details.'
       }
     ];
     if (settings.feature && settings.feature.netflixMode) {