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

8 files changed, 148 insertions, 35 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) } }