diff options
4 files changed, 45 insertions, 1 deletions
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, }); |