Merge branch 'master' into 40468-empty-states

* master: (76 commits)
  Fix image view mode
  Remove the need for destroy and add a comment in the spec
  Use build instead of create in importer spec
  Simplify normalizing of paths
  Fix failing importer test case on MySQL due to missing trailing slash in root path
  Fix gitlab:import:repos Rake task moving repositories into the wrong location
  Allow git pull/push on project redirects
  Resolve "Include asset_sync gem"
  Use prefix for TableOfContents filter hrefs
  Resolve "No feedback when checking on checklist if potential spam was detected"
  Fix Rubocop
  Fix N+1 query when displaying events
  Add Chain::Command specs
  Fix a bug of before_sha being inproperly evaluated to `checkout_sha`
  Implement and use Gitlab::Ci::Pipeline::Chain::Command
  Fix invalid pipeline build chain tag evaluation
  Add docs explaining why you get signed out with "Remember me"
  Move the circuitbreaker check out in a separate process
  Migrate Git::Repository#fsck to Gitaly
  Fix new personal access token showing up in a flash message
  ...

1 files changed, 77 insertions, 24 deletions

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