Fixed deployment flag having content hidden when being too far right
This commit is contained in:
parent
3b2d68d37d
commit
c146177094
|
@ -247,6 +247,7 @@
|
|||
<graph-deployment
|
||||
:show-deploy-info="showDeployInfo"
|
||||
:deployment-data="reducedDeploymentData"
|
||||
:graph-width="graphWidth"
|
||||
:graph-height="graphHeight"
|
||||
:graph-height-offset="graphHeightOffset"
|
||||
/>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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
|
|
@ -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,
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue