Commit c1461770 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Fixed deployment flag having content hidden when being too far right

parent 3b2d68d3
...@@ -247,6 +247,7 @@ ...@@ -247,6 +247,7 @@
<graph-deployment <graph-deployment
:show-deploy-info="showDeployInfo" :show-deploy-info="showDeployInfo"
:deployment-data="reducedDeploymentData" :deployment-data="reducedDeploymentData"
:graph-width="graphWidth"
:graph-height="graphHeight" :graph-height="graphHeight"
:graph-height-offset="graphHeightOffset" :graph-height-offset="graphHeightOffset"
/> />
......
...@@ -19,6 +19,10 @@ ...@@ -19,6 +19,10 @@
type: Number, type: Number,
required: true, required: true,
}, },
graphWidth: {
type: Number,
required: true,
},
}, },
computed: { computed: {
...@@ -47,6 +51,14 @@ ...@@ -47,6 +51,14 @@
transformDeploymentGroup(deployment) { transformDeploymentGroup(deployment) {
return `translate(${Math.floor(deployment.xPos) + 1}, 20)`; return `translate(${Math.floor(deployment.xPos) + 1}, 20)`;
}, },
positionFlag(deployment) {
let xPosition = 3;
if (deployment.xPos > (this.graphWidth - 200)) {
xPosition = -97;
}
return xPosition;
},
}, },
}; };
</script> </script>
...@@ -77,7 +89,7 @@ ...@@ -77,7 +89,7 @@
<svg <svg
v-if="deployment.showDeploymentFlag" v-if="deployment.showDeploymentFlag"
class="js-deploy-info-box" class="js-deploy-info-box"
x="3" :x="positionFlag(deployment)"
y="0" y="0"
width="92" width="92"
height="60"> height="60">
......
---
title: Move the deployment flag content to the left when deployment marker is near
the end
merge_request: 14514
author:
type: fixed
...@@ -21,6 +21,7 @@ describe('MonitoringDeployment', () => { ...@@ -21,6 +21,7 @@ describe('MonitoringDeployment', () => {
const component = createComponent({ const component = createComponent({
showDeployInfo: false, showDeployInfo: false,
deploymentData: reducedDeploymentData, deploymentData: reducedDeploymentData,
graphWidth: 440,
graphHeight: 300, graphHeight: 300,
graphHeightOffset: 120, graphHeightOffset: 120,
}); });
...@@ -36,6 +37,7 @@ describe('MonitoringDeployment', () => { ...@@ -36,6 +37,7 @@ describe('MonitoringDeployment', () => {
showDeployInfo: false, showDeployInfo: false,
deploymentData: reducedDeploymentData, deploymentData: reducedDeploymentData,
graphHeight: 300, graphHeight: 300,
graphWidth: 440,
graphHeightOffset: 120, graphHeightOffset: 120,
}); });
...@@ -49,6 +51,7 @@ describe('MonitoringDeployment', () => { ...@@ -49,6 +51,7 @@ describe('MonitoringDeployment', () => {
showDeployInfo: false, showDeployInfo: false,
deploymentData: reducedDeploymentData, deploymentData: reducedDeploymentData,
graphHeight: 300, graphHeight: 300,
graphWidth: 440,
graphHeightOffset: 120, graphHeightOffset: 120,
}); });
...@@ -62,6 +65,7 @@ describe('MonitoringDeployment', () => { ...@@ -62,6 +65,7 @@ describe('MonitoringDeployment', () => {
showDeployInfo: false, showDeployInfo: false,
deploymentData: reducedDeploymentData, deploymentData: reducedDeploymentData,
graphHeight: 300, graphHeight: 300,
graphWidth: 440,
graphHeightOffset: 120, graphHeightOffset: 120,
}); });
...@@ -75,6 +79,7 @@ describe('MonitoringDeployment', () => { ...@@ -75,6 +79,7 @@ describe('MonitoringDeployment', () => {
const component = createComponent({ const component = createComponent({
showDeployInfo: true, showDeployInfo: true,
deploymentData: reducedDeploymentData, deploymentData: reducedDeploymentData,
graphWidth: 440,
graphHeight: 300, graphHeight: 300,
graphHeightOffset: 120, graphHeightOffset: 120,
}); });
...@@ -82,12 +87,29 @@ describe('MonitoringDeployment', () => { ...@@ -82,12 +87,29 @@ describe('MonitoringDeployment', () => {
expect(component.$el.querySelector('.js-deploy-info-box')).toBeNull(); 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', () => { it('shows the deployment flag', () => {
reducedDeploymentData[0].showDeploymentFlag = true; reducedDeploymentData[0].showDeploymentFlag = true;
const component = createComponent({ const component = createComponent({
showDeployInfo: true, showDeployInfo: true,
deploymentData: reducedDeploymentData, deploymentData: reducedDeploymentData,
graphHeight: 300, graphHeight: 300,
graphWidth: 440,
graphHeightOffset: 120, graphHeightOffset: 120,
}); });
...@@ -102,6 +124,7 @@ describe('MonitoringDeployment', () => { ...@@ -102,6 +124,7 @@ describe('MonitoringDeployment', () => {
showDeployInfo: true, showDeployInfo: true,
deploymentData: reducedDeploymentData, deploymentData: reducedDeploymentData,
graphHeight: 300, graphHeight: 300,
graphWidth: 440,
graphHeightOffset: 120, graphHeightOffset: 120,
}); });
...@@ -115,6 +138,7 @@ describe('MonitoringDeployment', () => { ...@@ -115,6 +138,7 @@ describe('MonitoringDeployment', () => {
showDeployInfo: true, showDeployInfo: true,
deploymentData: reducedDeploymentData, deploymentData: reducedDeploymentData,
graphHeight: 300, graphHeight: 300,
graphWidth: 440,
graphHeightOffset: 120, graphHeightOffset: 120,
}); });
...@@ -127,6 +151,7 @@ describe('MonitoringDeployment', () => { ...@@ -127,6 +151,7 @@ describe('MonitoringDeployment', () => {
showDeployInfo: true, showDeployInfo: true,
deploymentData: reducedDeploymentData, deploymentData: reducedDeploymentData,
graphHeight: 300, graphHeight: 300,
graphWidth: 440,
graphHeightOffset: 120, graphHeightOffset: 120,
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment