From c14617709498eebef1755ee67c51f6e428ebbbce Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Wed, 27 Sep 2017 11:37:23 -0500
Subject: Fixed deployment flag having content hidden when being too far right

---
 .../javascripts/monitoring/components/graph.vue    |  1 +
 .../monitoring/components/graph/deployment.vue     | 14 +++++++++++-
 .../38031-monitoring-hover-info-is-clipped.yml     |  6 ++++++
 .../monitoring/graph/deployment_spec.js            | 25 ++++++++++++++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 changelogs/unreleased/38031-monitoring-hover-info-is-clipped.yml

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 6b3e341f936..f292b56c5c1 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -247,6 +247,7 @@
             <graph-deployment
               :show-deploy-info="showDeployInfo"
               :deployment-data="reducedDeploymentData"
+              :graph-width="graphWidth"
               :graph-height="graphHeight"
               :graph-height-offset="graphHeightOffset"
             />
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index 3623d2ed946..e3b8be0c7fb 100644
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -19,6 +19,10 @@
         type: Number,
         required: true,
       },
+      graphWidth: {
+        type: Number,
+        required: true,
+      },
     },
 
     computed: {
@@ -47,6 +51,14 @@
       transformDeploymentGroup(deployment) {
         return `translate(${Math.floor(deployment.xPos) + 1}, 20)`;
       },
+
+      positionFlag(deployment) {
+        let xPosition = 3;
+        if (deployment.xPos > (this.graphWidth - 200)) {
+          xPosition = -97;
+        }
+        return xPosition;
+      },
     },
   };
 </script>
@@ -77,7 +89,7 @@
       <svg
         v-if="deployment.showDeploymentFlag"
         class="js-deploy-info-box"
-        x="3"
+        :x="positionFlag(deployment)"
         y="0"
         width="92"
         height="60">
diff --git a/changelogs/unreleased/38031-monitoring-hover-info-is-clipped.yml b/changelogs/unreleased/38031-monitoring-hover-info-is-clipped.yml
new file mode 100644
index 00000000000..8b3fae2c103
--- /dev/null
+++ b/changelogs/unreleased/38031-monitoring-hover-info-is-clipped.yml
@@ -0,0 +1,6 @@
+---
+title: Move the deployment flag content to the left when deployment marker is near
+  the end
+merge_request: 14514
+author:
+type: fixed
diff --git a/spec/javascripts/monitoring/graph/deployment_spec.js b/spec/javascripts/monitoring/graph/deployment_spec.js
index c2ff38ffab9..dea42d755d4 100644
--- a/spec/javascripts/monitoring/graph/deployment_spec.js
+++ b/spec/javascripts/monitoring/graph/deployment_spec.js
@@ -21,6 +21,7 @@ describe('MonitoringDeployment', () => {
       const component = createComponent({
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
+        graphWidth: 440,
         graphHeight: 300,
         graphHeightOffset: 120,
       });
@@ -36,6 +37,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -49,6 +51,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -62,6 +65,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -75,6 +79,7 @@ describe('MonitoringDeployment', () => {
       const component = createComponent({
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
+        graphWidth: 440,
         graphHeight: 300,
         graphHeightOffset: 120,
       });
@@ -82,12 +87,29 @@ describe('MonitoringDeployment', () => {
       expect(component.$el.querySelector('.js-deploy-info-box')).toBeNull();
     });
 
+    it('positions the flag to the left when the xPos is too far right', () => {
+      reducedDeploymentData[0].showDeploymentFlag = false;
+      reducedDeploymentData[0].xPos = 250;
+      const component = createComponent({
+        showDeployInfo: true,
+        deploymentData: reducedDeploymentData,
+        graphWidth: 440,
+        graphHeight: 300,
+        graphHeightOffset: 120,
+      });
+
+      expect(
+        component.positionFlag(reducedDeploymentData[0]),
+      ).toBeLessThan(0);
+    });
+
     it('shows the deployment flag', () => {
       reducedDeploymentData[0].showDeploymentFlag = true;
       const component = createComponent({
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -102,6 +124,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -115,6 +138,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -127,6 +151,7 @@ describe('MonitoringDeployment', () => {
           showDeployInfo: true,
           deploymentData: reducedDeploymentData,
           graphHeight: 300,
+          graphWidth: 440,
           graphHeightOffset: 120,
         });
 
-- 
cgit v1.2.1