Merge branch '38032-deploy-markers-should-be-more-verbose' into 'master'
Resolve "Deploy markers should be more verbose" Closes #38032 See merge request gitlab-org/gitlab-ce!15641
This commit is contained in:
commit
8730054683
|
@ -21,6 +21,8 @@
|
|||
hasMetrics: convertPermissionToBoolean(metricsData.hasMetrics),
|
||||
documentationPath: metricsData.documentationPath,
|
||||
settingsPath: metricsData.settingsPath,
|
||||
tagsPath: metricsData.tagsPath,
|
||||
projectPath: metricsData.projectPath,
|
||||
metricsEndpoint: metricsData.additionalMetrics,
|
||||
deploymentEndpoint: metricsData.deploymentEndpoint,
|
||||
emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath,
|
||||
|
@ -112,6 +114,8 @@
|
|||
:hover-data="hoverData"
|
||||
:update-aspect-ratio="updateAspectRatio"
|
||||
:deployment-data="store.deploymentData"
|
||||
:project-path="projectPath"
|
||||
:tags-path="tagsPath"
|
||||
/>
|
||||
</graph-group>
|
||||
</div>
|
||||
|
|
|
@ -30,6 +30,14 @@
|
|||
required: false,
|
||||
default: () => ({}),
|
||||
},
|
||||
projectPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
tagsPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
mixins: [MonitoringMixin],
|
||||
|
@ -251,6 +259,14 @@
|
|||
:line-color="path.lineColor"
|
||||
:area-color="path.areaColor"
|
||||
/>
|
||||
<rect
|
||||
class="prometheus-graph-overlay"
|
||||
:width="(graphWidth - 70)"
|
||||
:height="(graphHeight - 100)"
|
||||
transform="translate(-5, 20)"
|
||||
ref="graphOverlay"
|
||||
@mousemove="handleMouseOverGraph($event)">
|
||||
</rect>
|
||||
<graph-deployment
|
||||
:show-deploy-info="showDeployInfo"
|
||||
:deployment-data="reducedDeploymentData"
|
||||
|
@ -267,14 +283,6 @@
|
|||
:graph-height-offset="graphHeightOffset"
|
||||
:show-flag-content="showFlagContent"
|
||||
/>
|
||||
<rect
|
||||
class="prometheus-graph-overlay"
|
||||
:width="(graphWidth - 70)"
|
||||
:height="(graphHeight - 100)"
|
||||
transform="translate(-5, 20)"
|
||||
ref="graphOverlay"
|
||||
@mousemove="handleMouseOverGraph($event)">
|
||||
</rect>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
|
||||
import { dateFormatWithName, timeFormat } from '../../utils/date_time_formatters';
|
||||
import Icon from '../../../vue_shared/components/icon.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
@ -25,6 +26,10 @@
|
|||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
|
||||
computed: {
|
||||
calculatedHeight() {
|
||||
return this.graphHeight - this.graphHeightOffset;
|
||||
|
@ -33,7 +38,7 @@
|
|||
|
||||
methods: {
|
||||
refText(d) {
|
||||
return d.tag ? d.ref : d.sha.slice(0, 6);
|
||||
return d.tag ? d.ref : d.sha.slice(0, 8);
|
||||
},
|
||||
|
||||
formatTime(deploymentTime) {
|
||||
|
@ -41,7 +46,7 @@
|
|||
},
|
||||
|
||||
formatDate(deploymentTime) {
|
||||
return dateFormat(deploymentTime);
|
||||
return dateFormatWithName(deploymentTime);
|
||||
},
|
||||
|
||||
nameDeploymentClass(deployment) {
|
||||
|
@ -54,11 +59,19 @@
|
|||
|
||||
positionFlag(deployment) {
|
||||
let xPosition = 3;
|
||||
if (deployment.xPos > (this.graphWidth - 200)) {
|
||||
xPosition = -97;
|
||||
if (deployment.xPos > (this.graphWidth - 225)) {
|
||||
xPosition = -142;
|
||||
}
|
||||
return xPosition;
|
||||
},
|
||||
|
||||
svgContainerHeight(tag) {
|
||||
let svgHeight = 80;
|
||||
if (!tag) {
|
||||
svgHeight -= 20;
|
||||
}
|
||||
return svgHeight;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -91,35 +104,75 @@
|
|||
class="js-deploy-info-box"
|
||||
:x="positionFlag(deployment)"
|
||||
y="0"
|
||||
width="92"
|
||||
height="60">
|
||||
width="134"
|
||||
:height="svgContainerHeight(deployment.tag)">
|
||||
<rect
|
||||
class="rect-text-metric deploy-info-rect rect-metric"
|
||||
x="1"
|
||||
y="1"
|
||||
rx="2"
|
||||
width="90"
|
||||
height="58">
|
||||
width="132"
|
||||
:height="svgContainerHeight(deployment.tag) - 2">
|
||||
</rect>
|
||||
<g
|
||||
transform="translate(5, 2)">
|
||||
<text
|
||||
class="deploy-info-text text-metric-bold">
|
||||
{{refText(deployment)}}
|
||||
</text>
|
||||
</g>
|
||||
<text
|
||||
class="deploy-info-text"
|
||||
y="18"
|
||||
transform="translate(5, 2)">
|
||||
{{formatDate(deployment.time)}}
|
||||
</text>
|
||||
<text
|
||||
class="deploy-info-text text-metric-bold"
|
||||
y="38"
|
||||
transform="translate(5, 2)">
|
||||
{{formatTime(deployment.time)}}
|
||||
Deployed
|
||||
</text>
|
||||
<!--The date info-->
|
||||
<g transform="translate(5, 20)">
|
||||
<text class="deploy-info-text">
|
||||
{{formatDate(deployment.time)}}
|
||||
</text>
|
||||
<text
|
||||
class="deploy-info-text text-metric-bold"
|
||||
x="62">
|
||||
{{formatTime(deployment.time)}}
|
||||
</text>
|
||||
</g>
|
||||
<line
|
||||
class="divider-line"
|
||||
x1="0"
|
||||
y1="38"
|
||||
x2="132"
|
||||
:y2="38"
|
||||
stroke="#000">
|
||||
</line>
|
||||
<!--Commit information-->
|
||||
<g transform="translate(5, 40)">
|
||||
<icon
|
||||
name="commit"
|
||||
:width="12"
|
||||
:height="12"
|
||||
:y="3">
|
||||
</icon>
|
||||
<a :xlink:href="deployment.commitUrl">
|
||||
<text
|
||||
class="deploy-info-text deploy-info-text-link"
|
||||
transform="translate(20, 2)">
|
||||
{{refText(deployment)}}
|
||||
</text>
|
||||
</a>
|
||||
</g>
|
||||
<!--Tag information-->
|
||||
<g
|
||||
transform="translate(5, 55)"
|
||||
v-if="deployment.tag">
|
||||
<icon
|
||||
name="label"
|
||||
:width="12"
|
||||
:height="12"
|
||||
:y="5">
|
||||
</icon>
|
||||
<a :xlink:href="deployment.tagUrl">
|
||||
<text
|
||||
class="deploy-info-text deploy-info-text-link"
|
||||
transform="translate(20, 2)"
|
||||
y="2">
|
||||
{{deployment.tag}}
|
||||
</text>
|
||||
</a>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
<svg
|
||||
|
|
|
@ -33,7 +33,9 @@ const mixins = {
|
|||
id: deployment.id,
|
||||
time,
|
||||
sha: deployment.sha,
|
||||
commitUrl: `${this.projectPath}/commit/${deployment.sha}`,
|
||||
tag: deployment.tag,
|
||||
tagUrl: `${this.tagsPath}/${deployment.tag}`,
|
||||
ref: deployment.ref.name,
|
||||
xPos,
|
||||
showDeploymentFlag: false,
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import d3 from 'd3';
|
||||
|
||||
export const dateFormat = d3.time.format('%b %-d, %Y');
|
||||
export const dateFormatWithName = d3.time.format('%a, %b %-d');
|
||||
export const timeFormat = d3.time.format('%-I:%M%p');
|
||||
export const bisectDate = d3.bisector(d => d.time).left;
|
||||
|
||||
|
|
|
@ -36,6 +36,30 @@
|
|||
required: false,
|
||||
default: '',
|
||||
},
|
||||
|
||||
width: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
|
||||
height: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
|
||||
y: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
|
||||
x: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
@ -51,7 +75,11 @@
|
|||
|
||||
<template>
|
||||
<svg
|
||||
:class="[iconSizeClass, cssClasses]">
|
||||
:class="[iconSizeClass, cssClasses]"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:x="x"
|
||||
:y="y">
|
||||
<use
|
||||
v-bind="{'xlink:href':spriteHref}"/>
|
||||
</svg>
|
||||
|
|
|
@ -201,8 +201,9 @@
|
|||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.deploy-info-text {
|
||||
dominant-baseline: text-before-edge;
|
||||
.divider-line {
|
||||
stroke-width: 1;
|
||||
stroke: $gray-darkest;
|
||||
}
|
||||
|
||||
.prometheus-state {
|
||||
|
@ -312,6 +313,20 @@
|
|||
stroke: $gray-darker;
|
||||
}
|
||||
|
||||
.deploy-info-text {
|
||||
dominant-baseline: text-before-edge;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.deploy-info-text-link {
|
||||
font-family: $monospace_font;
|
||||
fill: $gl-link-color;
|
||||
|
||||
&:hover {
|
||||
fill: $gl-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $screen-sm-max) {
|
||||
.label-axis-text,
|
||||
.text-metric-usage,
|
||||
|
|
|
@ -19,4 +19,6 @@
|
|||
"empty-loading-svg-path": image_path('illustrations/monitoring/loading'),
|
||||
"empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect'),
|
||||
"additional-metrics": additional_metrics_project_environment_path(@project, @environment, format: :json),
|
||||
"project-path": project_path(@project),
|
||||
"tags-path": project_tags_path(@project),
|
||||
"has-metrics": "#{@environment.has_metrics?}", deployment_endpoint: project_environment_deployments_path(@project, @environment, format: :json) } }
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Changed the deploy markers on the prometheus dashboard to be more verbose
|
||||
merge_request: 38032
|
||||
author:
|
||||
type: changed
|
|
@ -118,7 +118,7 @@ describe('MonitoringDeployment', () => {
|
|||
).not.toEqual('display: none;');
|
||||
});
|
||||
|
||||
it('shows the refText inside a text element with the deploy-info-text class', () => {
|
||||
it('contains date, refs and the "deployed" text', () => {
|
||||
reducedDeploymentData[0].showDeploymentFlag = true;
|
||||
const component = createComponent({
|
||||
showDeployInfo: true,
|
||||
|
@ -129,8 +129,31 @@ describe('MonitoringDeployment', () => {
|
|||
});
|
||||
|
||||
expect(
|
||||
component.$el.querySelector('.deploy-info-text').firstChild.nodeValue.trim(),
|
||||
).toEqual(component.refText(reducedDeploymentData[0]));
|
||||
component.$el.querySelectorAll('.deploy-info-text'),
|
||||
).toContainText('Deployed');
|
||||
|
||||
expect(
|
||||
component.$el.querySelectorAll('.deploy-info-text'),
|
||||
).toContainText('Wed, May 31');
|
||||
|
||||
expect(
|
||||
component.$el.querySelectorAll('.deploy-info-text'),
|
||||
).toContainText(component.refText(reducedDeploymentData[0]));
|
||||
});
|
||||
|
||||
it('contains a link to the commit contents', () => {
|
||||
reducedDeploymentData[0].showDeploymentFlag = true;
|
||||
const component = createComponent({
|
||||
showDeployInfo: true,
|
||||
deploymentData: reducedDeploymentData,
|
||||
graphHeight: 300,
|
||||
graphWidth: 440,
|
||||
graphHeightOffset: 120,
|
||||
});
|
||||
|
||||
expect(
|
||||
component.$el.querySelectorAll('.deploy-info-text-link')[0].parentElement.getAttribute('xlink:href'),
|
||||
).not.toEqual('');
|
||||
});
|
||||
|
||||
it('should contain a hidden gradient', () => {
|
||||
|
|
|
@ -4,6 +4,8 @@ import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
|
|||
import eventHub from '~/monitoring/event_hub';
|
||||
import { deploymentData, convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from './mock_data';
|
||||
|
||||
const tagsPath = 'http://test.host/frontend-fixtures/environments-project/tags';
|
||||
const projectPath = 'http://test.host/frontend-fixtures/environments-project';
|
||||
const createComponent = (propsData) => {
|
||||
const Component = Vue.extend(Graph);
|
||||
|
||||
|
@ -25,6 +27,8 @@ describe('Graph', () => {
|
|||
classType: 'col-md-6',
|
||||
updateAspectRatio: false,
|
||||
deploymentData,
|
||||
tagsPath,
|
||||
projectPath,
|
||||
});
|
||||
|
||||
expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.graphData.title);
|
||||
|
@ -37,6 +41,8 @@ describe('Graph', () => {
|
|||
classType: 'col-md-6',
|
||||
updateAspectRatio: false,
|
||||
deploymentData,
|
||||
tagsPath,
|
||||
projectPath,
|
||||
});
|
||||
|
||||
const transformedHeight = `${component.graphHeight - 100}`;
|
||||
|
@ -50,6 +56,8 @@ describe('Graph', () => {
|
|||
classType: 'col-md-6',
|
||||
updateAspectRatio: false,
|
||||
deploymentData,
|
||||
tagsPath,
|
||||
projectPath,
|
||||
});
|
||||
|
||||
const viewBoxArray = component.outerViewBox.split(' ');
|
||||
|
@ -65,6 +73,8 @@ describe('Graph', () => {
|
|||
classType: 'col-md-6',
|
||||
updateAspectRatio: false,
|
||||
deploymentData,
|
||||
tagsPath,
|
||||
projectPath,
|
||||
});
|
||||
spyOn(eventHub, '$emit');
|
||||
|
||||
|
@ -81,6 +91,8 @@ describe('Graph', () => {
|
|||
classType: 'col-md-6',
|
||||
updateAspectRatio: false,
|
||||
deploymentData,
|
||||
tagsPath,
|
||||
projectPath,
|
||||
});
|
||||
|
||||
expect(component.yAxisLabel).toEqual(component.graphData.y_label);
|
||||
|
@ -98,6 +110,8 @@ describe('Graph', () => {
|
|||
hoveredDate: new Date('Sun Aug 27 2017 06:11:51 GMT-0500 (CDT)'),
|
||||
currentDeployXPos: null,
|
||||
},
|
||||
tagsPath,
|
||||
projectPath,
|
||||
});
|
||||
|
||||
component.positionFlag();
|
||||
|
|
|
@ -2430,33 +2430,39 @@ export const deploymentData = [
|
|||
id: 111,
|
||||
iid: 3,
|
||||
sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
|
||||
commitUrl: 'http://test.host/frontend-fixtures/environments-project/commit/f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
|
||||
ref: {
|
||||
name: 'master'
|
||||
},
|
||||
created_at: '2017-05-31T21:23:37.881Z',
|
||||
tag: false,
|
||||
tagUrl: 'http://test.host/frontend-fixtures/environments-project/tags/false',
|
||||
'last?': true
|
||||
},
|
||||
{
|
||||
id: 110,
|
||||
iid: 2,
|
||||
sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
|
||||
commitUrl: 'http://test.host/frontend-fixtures/environments-project/commit/f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
|
||||
ref: {
|
||||
name: 'master'
|
||||
},
|
||||
created_at: '2017-05-30T20:08:04.629Z',
|
||||
tag: false,
|
||||
tagUrl: 'http://test.host/frontend-fixtures/environments-project/tags/false',
|
||||
'last?': false
|
||||
},
|
||||
{
|
||||
id: 109,
|
||||
iid: 1,
|
||||
sha: '6511e58faafaa7ad2228990ec57f19d66f7db7c2',
|
||||
commitUrl: 'http://test.host/frontend-fixtures/environments-project/commit/6511e58faafaa7ad2228990ec57f19d66f7db7c2',
|
||||
ref: {
|
||||
name: 'update2-readme'
|
||||
},
|
||||
created_at: '2017-05-30T17:42:38.409Z',
|
||||
tag: false,
|
||||
tagUrl: 'http://test.host/frontend-fixtures/environments-project/tags/false',
|
||||
'last?': false
|
||||
}
|
||||
];
|
||||
|
|
Loading…
Reference in New Issue