Merge branch '38031-monitoring-hover-info-is-clipped' into 'master'

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

@@ -250,6 +250,7 @@
             <graph-deployment
               :show-deploy-info="showDeployInfo"
               :deployment-data="reducedDeploymentData"
+              :graph-width="graphWidth"
               :graph-height="graphHeight"
               :graph-height-offset="graphHeightOffset"
             />

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">

changelogs/unreleased/38031-monitoring-hover-info-is-clipped.yml

+---
+title: Move the deployment flag content to the left when deployment marker is near
+  the end
+merge_request: 14514
+author:
+type: fixed

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,
         });