summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorClement Ho <clemmakesapps@gmail.com>2019-06-27 18:17:07 +0000
committerClement Ho <clemmakesapps@gmail.com>2019-06-27 18:17:07 +0000
commit50b69083d19fca516a9e0425f7b1bab4b84c2b18 (patch)
tree5f340ad8e15b4b435e323b6dd9ea0aed0223895a
parent2956cadd00793a3b1edbcd18ab24f3172c8227f3 (diff)
parent862e3ebad7d9589f677e06c35ed53c1e41855fd3 (diff)
downloadgitlab-ce-50b69083d19fca516a9e0425f7b1bab4b84c2b18.tar.gz
Merge branch '11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable' into 'master'
Turn commit sha in monitor charts popover to link Closes gitlab-ee#11888 See merge request gitlab-org/gitlab-ce!29914
-rw-r--r--app/assets/javascripts/monitoring/components/charts/area.vue14
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard.vue1
-rw-r--r--changelogs/unreleased/11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable.yml5
-rw-r--r--spec/javascripts/monitoring/charts/area_spec.js15
4 files changed, 29 insertions, 6 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index 9a3ce5174db..81773bd140e 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -1,5 +1,6 @@
<script>
import { __ } from '~/locale';
+import { GlLink } from '@gitlab/ui';
import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat';
import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
@@ -14,6 +15,7 @@ export default {
components: {
GlAreaChart,
GlChartSeriesLabel,
+ GlLink,
Icon,
},
inheritAttrs: false,
@@ -44,6 +46,10 @@ export default {
required: false,
default: () => [],
},
+ projectPath: {
+ type: String,
+ required: true,
+ },
thresholds: {
type: Array,
required: false,
@@ -55,6 +61,7 @@ export default {
tooltip: {
title: '',
content: [],
+ commitUrl: '',
isDeployment: false,
sha: '',
},
@@ -195,12 +202,13 @@ export default {
this.tooltip.title = dateFormat(params.value, 'dd mmm yyyy, h:MMTT');
this.tooltip.content = [];
params.seriesData.forEach(seriesData => {
- if (seriesData.componentSubType === graphTypes.deploymentData) {
- this.tooltip.isDeployment = true;
+ this.tooltip.isDeployment = seriesData.componentSubType === graphTypes.deploymentData;
+ if (this.tooltip.isDeployment) {
const [deploy] = this.recentDeployments.filter(
deployment => deployment.createdAt === seriesData.value[0],
);
this.tooltip.sha = deploy.sha.substring(0, 8);
+ this.tooltip.commitUrl = deploy.commitUrl;
} else {
const { seriesName, color } = seriesData;
// seriesData.value contains the chart's [x, y] value pair
@@ -259,7 +267,7 @@ export default {
</template>
<div slot="tooltipContent" class="d-flex align-items-center">
<icon name="commit" class="mr-2" />
- {{ tooltip.sha }}
+ <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
</div>
</template>
<template v-else>
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 23687c54fd3..2cbda8ea05d 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -359,6 +359,7 @@ export default {
<monitor-area-chart
v-for="(graphData, graphIndex) in chartsWithData(groupData.metrics)"
:key="graphIndex"
+ :project-path="projectPath"
:graph-data="graphData"
:deployment-data="deploymentData"
:thresholds="getGraphAlertValues(graphData.queries)"
diff --git a/changelogs/unreleased/11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable.yml b/changelogs/unreleased/11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable.yml
new file mode 100644
index 00000000000..606abe818b4
--- /dev/null
+++ b/changelogs/unreleased/11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable.yml
@@ -0,0 +1,5 @@
+---
+title: Turn commit sha in monitor charts popover to link
+merge_request: 29914
+author:
+type: fixed
diff --git a/spec/javascripts/monitoring/charts/area_spec.js b/spec/javascripts/monitoring/charts/area_spec.js
index ac7e0bb12a1..d3a76f33679 100644
--- a/spec/javascripts/monitoring/charts/area_spec.js
+++ b/spec/javascripts/monitoring/charts/area_spec.js
@@ -1,14 +1,19 @@
import { shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
import { shallowWrapperContainsSlotText } from 'spec/helpers/vue_test_utils_helper';
import Area from '~/monitoring/components/charts/area.vue';
import { createStore } from '~/monitoring/stores';
import * as types from '~/monitoring/stores/mutation_types';
+import { TEST_HOST } from 'spec/test_constants';
import MonitoringMock, { deploymentData } from '../mock_data';
describe('Area component', () => {
+ const mockSha = 'mockSha';
const mockWidgets = 'mockWidgets';
const mockSvgPathContent = 'mockSvgPathContent';
+ const projectPath = `${TEST_HOST}/path/to/project`;
+ const commitUrl = `${projectPath}/commit/${mockSha}`;
let mockGraphData;
let areaChart;
let spriteSpy;
@@ -26,6 +31,7 @@ describe('Area component', () => {
graphData: mockGraphData,
containerWidth: 0,
deploymentData: store.state.monitoringDashboard.deploymentData,
+ projectPath,
},
slots: {
default: mockWidgets,
@@ -88,11 +94,14 @@ describe('Area component', () => {
);
});
- it('renders commit sha in tooltip content', () => {
- const mockSha = 'mockSha';
+ it('renders clickable commit sha in tooltip content', () => {
areaChart.vm.tooltip.sha = mockSha;
+ areaChart.vm.tooltip.commitUrl = commitUrl;
- expect(shallowWrapperContainsSlotText(glAreaChart, 'tooltipContent', mockSha)).toBe(true);
+ const commitLink = areaChart.find(GlLink);
+
+ expect(shallowWrapperContainsSlotText(commitLink, 'default', mockSha)).toBe(true);
+ expect(commitLink.attributes('href')).toEqual(commitUrl);
});
});
});