Changed the deploy markers on the prometheus dashboard to be more verbose

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -21,6 +21,8 @@
         hasMetrics: convertPermissionToBoolean(metricsData.hasMetrics),
         documentationPath: metricsData.documentationPath,
         settingsPath: metricsData.settingsPath,
+        tagsPath: metricsData.tagsPath,
+        projectPath: metricsData.projectPath,
         metricsEndpoint: metricsData.additionalMetrics,
         deploymentEndpoint: metricsData.deploymentEndpoint,
         emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath,
@@ -112,6 +114,8 @@
         :hover-data="hoverData"
         :update-aspect-ratio="updateAspectRatio"
         :deployment-data="store.deploymentData"
+        :project-path="projectPath"
+        :tags-path="tagsPath"
       />
     </graph-group>
   </div>

app/assets/javascripts/monitoring/components/graph.vue

@@ -30,6 +30,14 @@
         required: false,
         default: () => ({}),
       },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      tagsPath: {
+        type: String,
+        required: true,
+      },
     },
 
     mixins: [MonitoringMixin],
@@ -251,6 +259,14 @@
               :line-color="path.lineColor"
               :area-color="path.areaColor"
             />
+            <rect
+              class="prometheus-graph-overlay"
+              :width="(graphWidth - 70)"
+              :height="(graphHeight - 100)"
+              transform="translate(-5, 20)"
+              ref="graphOverlay"
+              @mousemove="handleMouseOverGraph($event)">
+            </rect>
             <graph-deployment
               :show-deploy-info="showDeployInfo"
               :deployment-data="reducedDeploymentData"
@@ -267,14 +283,6 @@
               :graph-height-offset="graphHeightOffset"
               :show-flag-content="showFlagContent"
             />
-            <rect
-              class="prometheus-graph-overlay"
-              :width="(graphWidth - 70)"
-              :height="(graphHeight - 100)"
-              transform="translate(-5, 20)"
-              ref="graphOverlay"
-              @mousemove="handleMouseOverGraph($event)">
-            </rect>
         </svg>
       </svg>
     </div>

app/assets/javascripts/monitoring/components/graph/deployment.vue

 <script>
-  import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
+  import { dateFormatWithName, timeFormat } from '../../utils/date_time_formatters';
+  import Icon from '../../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -25,6 +26,10 @@
       },
     },
 
+    components: {
+      Icon,
+    },
+
     computed: {
       calculatedHeight() {
         return this.graphHeight - this.graphHeightOffset;
@@ -33,7 +38,7 @@
 
     methods: {
       refText(d) {
-        return d.tag ? d.ref : d.sha.slice(0, 6);
+        return d.tag ? d.ref : d.sha.slice(0, 8);
       },
 
       formatTime(deploymentTime) {
@@ -41,7 +46,7 @@
       },
 
       formatDate(deploymentTime) {
-        return dateFormat(deploymentTime);
+        return dateFormatWithName(deploymentTime);
       },
 
       nameDeploymentClass(deployment) {
@@ -54,8 +59,8 @@
 
       positionFlag(deployment) {
         let xPosition = 3;
-        if (deployment.xPos > (this.graphWidth - 200)) {
-          xPosition = -97;
+        if (deployment.xPos > (this.graphWidth - 225)) {
+          xPosition = -142;
         }
         return xPosition;
       },
@@ -91,35 +96,75 @@
         class="js-deploy-info-box"
         :x="positionFlag(deployment)"
         y="0"
-        width="92"
-        height="60">
+        width="134"
+        height="80">
         <rect
           class="rect-text-metric deploy-info-rect rect-metric"
           x="1"
           y="1"
           rx="2"
-          width="90"
-          height="58">
+          width="132"
+          height="78">
         </rect>
-        <g
-          transform="translate(5, 2)">
-          <text
-            class="deploy-info-text text-metric-bold">
-            {{refText(deployment)}}
-          </text>
-        </g>
         <text
-          class="deploy-info-text"
-          y="18"
+          class="deploy-info-text text-metric-bold"
           transform="translate(5, 2)">
+          Deployed
+        </text>
+        <!--The date info-->
+        <g transform="translate(5, 20)">
+          <text class="deploy-info-text">
             {{formatDate(deployment.time)}}
           </text>
           <text 
             class="deploy-info-text text-metric-bold"
-          y="38"
-          transform="translate(5, 2)">
+            x="62">
             {{formatTime(deployment.time)}}
           </text>
+        </g>
+        <line
+          class="divider-line"
+          x1="0"
+          y1="38"
+          x2="132"
+          :y2="38"
+          stroke="#000">
+        </line>
+        <!--Commit information-->
+        <g transform="translate(5, 40)">
+          <icon
+            name="commit"
+            :width="12"
+            :height="12"
+            :y="5">
+          </icon>
+          <a :xlink:href="deployment.commitUrl">
+            <text
+              class="deploy-info-text deploy-info-text-link"
+              transform="translate(20, 2)">
+              {{refText(deployment)}}
+            </text>
+          </a>
+        </g>
+        <!--Tag information-->
+        <g
+          transform="translate(5, 55)" 
+          v-if="deployment.tag">
+          <icon
+            name="label"
+            :width="12"
+            :height="12"
+            :y="5">
+          </icon>
+          <a :xlink:href="deployment.tagUrl">
+            <text
+              class="deploy-info-text deploy-info-text-link"
+              transform="translate(20, 2)"
+              y="2">
+              {{deployment.tag}}
+            </text>
+          </a>
+        </g>
       </svg>
     </g>
     <svg

app/assets/javascripts/monitoring/mixins/monitoring_mixins.js

@@ -33,7 +33,9 @@ const mixins = {
             id: deployment.id,
             time,
             sha: deployment.sha,
+            commitUrl: `${this.projectPath}/commit/${deployment.sha}`,
             tag: deployment.tag,
+            tagUrl: `${this.tagsPath}/${deployment.tag}`,
             ref: deployment.ref.name,
             xPos,
             showDeploymentFlag: false,

app/assets/javascripts/monitoring/utils/date_time_formatters.js

 import d3 from 'd3';
 
 export const dateFormat = d3.time.format('%b %-d, %Y');
+export const dateFormatWithName = d3.time.format('%a, %b %-d');
 export const timeFormat = d3.time.format('%-I:%M%p');
 export const bisectDate = d3.bisector(d => d.time).left;
 

app/assets/javascripts/vue_shared/components/icon.vue

@@ -36,6 +36,30 @@
         required: false,
         default: '',
       },
+
+      width: {
+        type: Number,
+        required: false,
+        default: null,
+      },
+
+      height: {
+        type: Number,
+        required: false,
+        default: null,
+      },
+
+      y: {
+        type: Number,
+        required: false,
+        default: null,
+      },
+
+      x: {
+        type: Number,
+        required: false,
+        default: null,
+      },
     },
 
     computed: {
@@ -51,7 +75,11 @@
 
 <template>
   <svg
-    :class="[iconSizeClass, cssClasses]">
+    :class="[iconSizeClass, cssClasses]"
+    :width="width"
+    :height="height"
+    :x="x"
+    :y="y">
     <use
       v-bind="{'xlink:href':spriteHref}"/>
   </svg>

app/assets/stylesheets/pages/environments.scss

@@ -201,8 +201,9 @@
   stroke-width: 1;
 }
 
-.deploy-info-text {
-  dominant-baseline: text-before-edge;
+.divider-line {
+  stroke-width: 1;
+  stroke: $gray-darkest;
 }
 
 .prometheus-state {
@@ -312,6 +313,20 @@
       stroke: $gray-darker;
     }
 
+    .deploy-info-text {
+      dominant-baseline: text-before-edge;
+      font-size: 12px;
+    }
+
+    .deploy-info-text-link {
+      font-family: $monospace_font;
+      fill: $gl-link-color;
+
+      &:hover {
+        fill: $gl-link-hover-color;
+      }
+    }
+
     @media (max-width: $screen-sm-max) {
       .label-axis-text,
       .text-metric-usage,

app/views/projects/environments/metrics.html.haml

@@ -19,4 +19,6 @@
     "empty-loading-svg-path": image_path('illustrations/monitoring/loading'),
     "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect'),
     "additional-metrics": additional_metrics_project_environment_path(@project, @environment, format: :json),
+    "project-path": project_path(@project),
+    "tags-path": project_tags_path(@project),
     "has-metrics": "#{@environment.has_metrics?}", deployment_endpoint: project_environment_deployments_path(@project, @environment, format: :json) } }

changelogs/unreleased/38032-deploy-markers-should-be-more-verbose.yml

+---
+title: Changed the deploy markers on the prometheus dashboard to be more verbose
+merge_request: 38032
+author:
+type: changed

spec/javascripts/monitoring/graph/deployment_spec.js

@@ -118,7 +118,7 @@ describe('MonitoringDeployment', () => {
       ).not.toEqual('display: none;');
     });
 
-    it('shows the refText inside a text element with the deploy-info-text class', () => {
+    it('contains date, refs and the "deployed" text', () => {
       reducedDeploymentData[0].showDeploymentFlag = true;
       const component = createComponent({
         showDeployInfo: true,
@@ -129,8 +129,31 @@ describe('MonitoringDeployment', () => {
       });
 
       expect(
-        component.$el.querySelector('.deploy-info-text').firstChild.nodeValue.trim(),
-      ).toEqual(component.refText(reducedDeploymentData[0]));
+        component.$el.querySelectorAll('.deploy-info-text'),
+      ).toContainText('Deployed');
+
+      expect(
+        component.$el.querySelectorAll('.deploy-info-text'),
+      ).toContainText('Wed, May 31');
+
+      expect(
+        component.$el.querySelectorAll('.deploy-info-text'),
+      ).toContainText(component.refText(reducedDeploymentData[0]));
+    });
+
+    it('contains a link to the commit contents', () => {
+      reducedDeploymentData[0].showDeploymentFlag = true;
+      const component = createComponent({
+        showDeployInfo: true,
+        deploymentData: reducedDeploymentData,
+        graphHeight: 300,
+        graphWidth: 440,
+        graphHeightOffset: 120,
+      });
+
+      expect(
+        component.$el.querySelectorAll('.deploy-info-text-link')[0].parentElement.getAttribute('xlink:href'),
+      ).not.toEqual('');
     });
 
     it('should contain a hidden gradient', () => {

spec/javascripts/monitoring/graph_spec.js

@@ -4,6 +4,8 @@ import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
 import eventHub from '~/monitoring/event_hub';
 import { deploymentData, convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from './mock_data';
 
+const tagsPath = 'http://test.host/frontend-fixtures/environments-project/tags';
+const projectPath = 'http://test.host/frontend-fixtures/environments-project';
 const createComponent = (propsData) => {
   const Component = Vue.extend(Graph);
 
@@ -25,6 +27,8 @@ describe('Graph', () => {
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
+      tagsPath,
+      projectPath,
     });
 
     expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.graphData.title);
@@ -37,6 +41,8 @@ describe('Graph', () => {
         classType: 'col-md-6',
         updateAspectRatio: false,
         deploymentData,
+        tagsPath,
+        projectPath,
       });
 
       const transformedHeight = `${component.graphHeight - 100}`;
@@ -50,6 +56,8 @@ describe('Graph', () => {
         classType: 'col-md-6',
         updateAspectRatio: false,
         deploymentData,
+        tagsPath,
+        projectPath,
       });
 
       const viewBoxArray = component.outerViewBox.split(' ');
@@ -65,6 +73,8 @@ describe('Graph', () => {
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
+      tagsPath,
+      projectPath,
     });
     spyOn(eventHub, '$emit');
 
@@ -81,6 +91,8 @@ describe('Graph', () => {
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
+      tagsPath,
+      projectPath,
     });
 
     expect(component.yAxisLabel).toEqual(component.graphData.y_label);
@@ -98,6 +110,8 @@ describe('Graph', () => {
         hoveredDate: new Date('Sun Aug 27 2017 06:11:51 GMT-0500 (CDT)'),
         currentDeployXPos: null,
       },
+      tagsPath,
+      projectPath,
     });
 
     component.positionFlag();

spec/javascripts/monitoring/mock_data.js

@@ -2430,33 +2430,39 @@ export const deploymentData = [
     id: 111,
     iid: 3,
     sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
+    commitUrl: 'http://test.host/frontend-fixtures/environments-project/commit/f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
     ref: {
       name: 'master'
     },
     created_at: '2017-05-31T21:23:37.881Z',
     tag: false,
+    tagUrl: 'http://test.host/frontend-fixtures/environments-project/tags/false',
     'last?': true
   },
   {
     id: 110,
     iid: 2,
     sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
+    commitUrl: 'http://test.host/frontend-fixtures/environments-project/commit/f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
     ref: {
       name: 'master'
     },
     created_at: '2017-05-30T20:08:04.629Z',
     tag: false,
+      tagUrl: 'http://test.host/frontend-fixtures/environments-project/tags/false',
     'last?': false
   },
   {
     id: 109,
     iid: 1,
     sha: '6511e58faafaa7ad2228990ec57f19d66f7db7c2',
+    commitUrl: 'http://test.host/frontend-fixtures/environments-project/commit/6511e58faafaa7ad2228990ec57f19d66f7db7c2',
     ref: {
       name: 'update2-readme'
     },
     created_at: '2017-05-30T17:42:38.409Z',
     tag: false,
+    tagUrl: 'http://test.host/frontend-fixtures/environments-project/tags/false',
     'last?': false
   }
 ];