Merge branch '38031-monitoring-hover-info-is-clipped' into 'master'
Resolve "Monitoring hover info is clipped" Closes #38031 See merge request gitlab-org/gitlab-ce!14514
This commit is contained in:
commit
d55216c092
|
@ -250,6 +250,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 @@
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
graphWidth: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -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 @@
|
||||||
<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">
|
||||||
|
|
|
@ -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({
|
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', () => {
|
||||||
showDeployInfo: false,
|
showDeployInfo: false,
|
||||||
deploymentData: reducedDeploymentData,
|
deploymentData: reducedDeploymentData,
|
||||||
graphHeight: 300,
|
graphHeight: 300,
|
||||||
|
graphWidth: 440,
|
||||||
graphHeightOffset: 120,
|
graphHeightOffset: 120,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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', () => {
|
||||||
showDeployInfo: false,
|
showDeployInfo: false,
|
||||||
deploymentData: reducedDeploymentData,
|
deploymentData: reducedDeploymentData,
|
||||||
graphHeight: 300,
|
graphHeight: 300,
|
||||||
|
graphWidth: 440,
|
||||||
graphHeightOffset: 120,
|
graphHeightOffset: 120,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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', () => {
|
||||||
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', () => {
|
||||||
showDeployInfo: true,
|
showDeployInfo: true,
|
||||||
deploymentData: reducedDeploymentData,
|
deploymentData: reducedDeploymentData,
|
||||||
graphHeight: 300,
|
graphHeight: 300,
|
||||||
|
graphWidth: 440,
|
||||||
graphHeightOffset: 120,
|
graphHeightOffset: 120,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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', () => {
|
||||||
showDeployInfo: true,
|
showDeployInfo: true,
|
||||||
deploymentData: reducedDeploymentData,
|
deploymentData: reducedDeploymentData,
|
||||||
graphHeight: 300,
|
graphHeight: 300,
|
||||||
|
graphWidth: 440,
|
||||||
graphHeightOffset: 120,
|
graphHeightOffset: 120,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue