Merge branch '38032-deploy-markers-should-be-more-verbose' into 'master'

Resolve "Deploy markers should be more verbose"

Closes #38032

See merge request gitlab-org/gitlab-ce!15641

(cherry picked from commit 8730054683c00f4c79cf452beef0df794c70bf6b)

d377aa54 Changed the deploy markers on the prometheus dashboard to be more verbose
3642f6f0 Reduce the size of the deploy flag when there's no tag available

12 files changed, 199 insertions, 38 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index cbe24c0915b..8da723ced03 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/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>
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index f8782fde927..cdae287658b 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/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>
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index e3b8be0c7fb..026e2fd0c49 100644
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -1,5 +1,6 @@
 <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,11 +59,19 @@
 
       positionFlag(deployment) {
         let xPosition = 3;
-        if (deployment.xPos > (this.graphWidth - 200)) {
-          xPosition = -97;
+        if (deployment.xPos > (this.graphWidth - 225)) {
+          xPosition = -142;
         }
         return xPosition;
       },
+
+      svgContainerHeight(tag) {
+        let svgHeight = 80;
+        if (!tag) {
+          svgHeight -= 20;
+        }
+        return svgHeight;
+      },
     },
   };
 </script>
@@ -91,35 +104,75 @@
         class="js-deploy-info-box"
         :x="positionFlag(deployment)"
         y="0"
-        width="92"
-        height="60">
+        width="134"
+        :height="svgContainerHeight(deployment.tag)">
         <rect
           class="rect-text-metric deploy-info-rect rect-metric"
           x="1"
           y="1"
           rx="2"
-          width="90"
-          height="58">
+          width="132"
+          :height="svgContainerHeight(deployment.tag) - 2">
         </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"
-          transform="translate(5, 2)">
-          {{formatDate(deployment.time)}}
-        </text>
         <text
           class="deploy-info-text text-metric-bold"
-          y="38"
           transform="translate(5, 2)">
-          {{formatTime(deployment.time)}}
+          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"
+            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="3">
+          </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
diff --git a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
index 31f38aca5d6..cbca14ede02 100644
--- a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
+++ b/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,
diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
index c4c6b1ac1f5..ad07a8465e2 100644
--- a/app/assets/javascripts/monitoring/utils/date_time_formatters.js
+++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
@@ -1,6 +1,7 @@
 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;
 
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 4216660da8c..365229ea274 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/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>
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index b0795353ec1..a5a6b7461a3 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/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,
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index e0aedcac5e1..56cf16c3778 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/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) } }
diff --git a/changelogs/unreleased/38032-deploy-markers-should-be-more-verbose.yml b/changelogs/unreleased/38032-deploy-markers-should-be-more-verbose.yml
new file mode 100644
index 00000000000..a1f28b3ba0f
--- /dev/null
+++ b/changelogs/unreleased/38032-deploy-markers-should-be-more-verbose.yml
@@ -0,0 +1,5 @@
+---
+title: Changed the deploy markers on the prometheus dashboard to be more verbose
+merge_request: 38032
+author:
+type: changed
diff --git a/spec/javascripts/monitoring/graph/deployment_spec.js b/spec/javascripts/monitoring/graph/deployment_spec.js
index dea42d755d4..bf6ada8185e 100644
--- a/spec/javascripts/monitoring/graph/deployment_spec.js
+++ b/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', () => {
diff --git a/spec/javascripts/monitoring/graph_spec.js b/spec/javascripts/monitoring/graph_spec.js
index fd79abe241a..b1d69752bad 100644
--- a/spec/javascripts/monitoring/graph_spec.js
+++ b/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();
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 6b34855b8b2..1f4e858e731 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/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
   }
 ];