Commit 4b6a8ba5 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Merge branch '340808-vsa-make-lead-time-tile-a-link-to-lead-time-chart' into 'master'

[VSA] Make deployment frequency tile a link to lead time chart

See merge request gitlab-org/gitlab!72485
parents 485ff5f5 fb9c7aaa
<script>
import { GlPopover, GlLink, GlIcon } from '@gitlab/ui';
export default {
name: 'MetricPopover',
components: {
GlPopover,
GlLink,
GlIcon,
},
props: {
metric: {
type: Object,
required: true,
},
target: {
type: String,
required: true,
},
},
computed: {
metricLinks() {
return this.metric.links?.filter((link) => !link.docs_link) || [];
},
docsLink() {
return this.metric.links?.find((link) => link.docs_link);
},
},
};
</script>
<template>
<gl-popover :target="target" placement="bottom">
<template #title>
<span class="gl-display-block gl-text-left" data-testid="metric-label">{{
metric.label
}}</span>
</template>
<div
v-for="(link, idx) in metricLinks"
:key="`link-${idx}`"
class="gl-display-flex gl-justify-content-space-between gl-text-right gl-py-1"
data-testid="metric-link"
>
<span>{{ link.label }}</span>
<gl-link :href="link.url" class="gl-font-sm">
{{ link.name }}
</gl-link>
</div>
<span v-if="metric.description" data-testid="metric-description">{{ metric.description }}</span>
<gl-link
v-if="docsLink"
:href="docsLink.url"
class="gl-font-sm"
target="_blank"
data-testid="metric-docs-link"
>{{ docsLink.label }}
<gl-icon name="external-link" class="gl-vertical-align-middle" />
</gl-link>
</gl-popover>
</template>
<script>
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlPopover } from '@gitlab/ui';
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
import { GlSingleStat } from '@gitlab/ui/dist/charts';
import { flatten } from 'lodash';
import createFlash from '~/flash';
import { sprintf, s__ } from '~/locale';
import { redirectTo } from '~/lib/utils/url_utility';
import { METRICS_POPOVER_CONTENT } from '../constants';
import { removeFlash, prepareTimeMetricsData } from '../utils';
import MetricPopover from './metric_popover.vue';
const requestData = ({ request, endpoint, path, params, name }) => {
return request({ endpoint, params, requestPath: path })
......@@ -31,9 +33,9 @@ const fetchMetricsData = (reqs = [], path, params) => {
export default {
name: 'ValueStreamMetrics',
components: {
GlPopover,
GlSingleStat,
GlSkeletonLoading,
MetricPopover,
},
props: {
requestPath: {
......@@ -76,6 +78,14 @@ export default {
this.isLoading = false;
});
},
hasLinks(links) {
return links?.length && links[0].url;
},
clickHandler({ links }) {
if (this.hasLinks(links)) {
redirectTo(links[0].url);
}
},
},
};
</script>
......@@ -93,14 +103,11 @@ export default {
:unit="metric.unit || ''"
:should-animate="true"
:animation-decimal-places="1"
:class="{ 'gl-hover-cursor-pointer': hasLinks(metric.links) }"
tabindex="0"
@click="clickHandler(metric)"
/>
<gl-popover :target="metric.key" placement="bottom">
<template #title>
<span class="gl-display-block gl-text-left">{{ metric.label }}</span>
</template>
<span v-if="metric.description">{{ metric.description }}</span>
</gl-popover>
<metric-popover :metric="metric" :target="metric.key" />
</div>
</template>
</div>
......
......@@ -4,6 +4,7 @@ class AnalyticsSummaryEntity < Grape::Entity
expose :value, safe: true
expose :title
expose :unit, if: { with_unit: true }
expose :links
private
......
......@@ -29,6 +29,10 @@ module Gitlab
raise NotImplementedError, "Expected #{self.name} to implement end_event_identifier"
end
def links
[]
end
private
def assign_event_identifiers
......
......@@ -20,6 +20,10 @@ module Gitlab
def value
raise NotImplementedError, "Expected #{self.name} to implement value"
end
def links
[]
end
end
end
end
......
......@@ -27,6 +27,13 @@ module Gitlab
def unit
_('per day')
end
def links
[
{ "name" => _('Deployment frequency'), "url" => Gitlab::Routing.url_helpers.group_analytics_ci_cd_analytics_path(group, tab: 'deployment-frequency'), "label" => s_('ValueStreamAnalytics|Dashboard') },
{ "name" => _('Deployment frequency'), "url" => Gitlab::Routing.url_helpers.help_page_path('user/analytics/index', anchor: 'definitions'), "docs_link" => true, "label" => s_('ValueStreamAnalytics|Go to docs') }
]
end
end
end
end
......
......@@ -25,6 +25,10 @@ module Gitlab
n_('day', 'days', value)
end
def links
[]
end
private
attr_reader :stage, :current_user, :options, :from, :to
......
......@@ -38,7 +38,8 @@ module Gitlab
serialize(
Summary::DeploymentFrequency.new(
deployments: deployments_summary.value.raw_value,
options: @options),
options: @options,
project: @project),
with_unit: true
)
end
......
......@@ -17,6 +17,10 @@ module Gitlab
raise NotImplementedError, "Expected #{self.name} to implement value"
end
def links
[]
end
private
attr_reader :project, :options
......
......@@ -6,7 +6,7 @@ module Gitlab
class DeploymentFrequency < Base
include SummaryHelper
def initialize(deployments:, options:, project: nil)
def initialize(deployments:, options:, project:)
@deployments = deployments
super(project: project, options: options)
......@@ -23,6 +23,13 @@ module Gitlab
def unit
_('per day')
end
def links
[
{ "name" => _('Deployment frequency'), "url" => Gitlab::Routing.url_helpers.charts_project_pipelines_path(project, chart: 'deployment-frequency'), "label" => s_('ValueStreamAnalytics|Dashboard') },
{ "name" => _('Deployment frequency'), "url" => Gitlab::Routing.url_helpers.help_page_path('user/analytics/index', anchor: 'definitions'), "docs_link" => true, "label" => s_('ValueStreamAnalytics|Go to docs') }
]
end
end
end
end
......
......@@ -37690,6 +37690,12 @@ msgstr ""
msgid "ValueStreamAnalytics|Average number of deployments to production per day."
msgstr ""
msgid "ValueStreamAnalytics|Dashboard"
msgstr ""
msgid "ValueStreamAnalytics|Go to docs"
msgstr ""
msgid "ValueStreamAnalytics|Items in Value Stream Analytics are currently filtered by their creation time. There is an %{epic_link_start}epic%{epic_link_end} that will change the Value Stream Analytics date filter to use the end event time for the selected stage."
msgstr ""
......
......@@ -14,6 +14,9 @@
},
"unit": {
"type": "string"
},
"links": {
"type": "array"
}
},
"additionalProperties": false
......
import { GlLink, GlIcon } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import MetricPopover from '~/cycle_analytics/components/metric_popover.vue';
const MOCK_METRIC = {
key: 'deployment-frequency',
label: 'Deployment Frequency',
value: '10.0',
unit: 'per day',
description: 'Average number of deployments to production per day.',
links: [],
};
describe('MetricPopover', () => {
let wrapper;
const createComponent = (props = {}) => {
return shallowMountExtended(MetricPopover, {
propsData: {
target: 'deployment-frequency',
...props,
},
stubs: {
'gl-popover': { template: '<div><slot name="title"></slot><slot></slot></div>' },
},
});
};
const findMetricLabel = () => wrapper.findByTestId('metric-label');
const findAllMetricLinks = () => wrapper.findAll('[data-testid="metric-link"]');
const findMetricDescription = () => wrapper.findByTestId('metric-description');
const findMetricDocsLink = () => wrapper.findByTestId('metric-docs-link');
const findMetricDocsLinkIcon = () => findMetricDocsLink().find(GlIcon);
afterEach(() => {
wrapper.destroy();
});
it('renders the metric label', () => {
wrapper = createComponent({ metric: MOCK_METRIC });
expect(findMetricLabel().text()).toBe(MOCK_METRIC.label);
});
it('renders the metric description', () => {
wrapper = createComponent({ metric: MOCK_METRIC });
expect(findMetricDescription().text()).toBe(MOCK_METRIC.description);
});
describe('with links', () => {
const links = [
{
name: 'Deployment frequency',
url: '/groups/gitlab-org/-/analytics/ci_cd?tab=deployment-frequency',
label: 'Dashboard',
},
{
name: 'Another link',
url: '/groups/gitlab-org/-/analytics/another-link',
label: 'Another link',
},
];
const docsLink = {
name: 'Deployment frequency',
url: '/help/user/analytics/index#definitions',
label: 'Go to docs',
docs_link: true,
};
const linksWithDocs = [...links, docsLink];
describe.each`
hasDocsLink | allLinks | displayedMetricLinks
${true} | ${linksWithDocs} | ${links}
${false} | ${links} | ${links}
`(
'when one link has docs_link=$hasDocsLink',
({ hasDocsLink, allLinks, displayedMetricLinks }) => {
beforeEach(() => {
wrapper = createComponent({ metric: { ...MOCK_METRIC, links: allLinks } });
});
displayedMetricLinks.forEach((link, idx) => {
it(`renders a link for "${link.name}"`, () => {
const allLinkContainers = findAllMetricLinks();
expect(allLinkContainers.at(idx).text()).toContain(link.name);
expect(allLinkContainers.at(idx).find(GlLink).attributes('href')).toBe(link.url);
});
});
it(`${hasDocsLink ? 'renders' : "doesn't render"} a docs link`, () => {
expect(findMetricDocsLink().exists()).toBe(hasDocsLink);
if (hasDocsLink) {
expect(findMetricDocsLink().attributes('href')).toBe(docsLink.url);
expect(findMetricDocsLink().text()).toBe(docsLink.label);
expect(findMetricDocsLinkIcon().attributes('name')).toBe('external-link');
}
});
},
);
});
});
......@@ -6,9 +6,11 @@ import waitForPromises from 'helpers/wait_for_promises';
import { METRIC_TYPE_SUMMARY } from '~/api/analytics_api';
import ValueStreamMetrics from '~/cycle_analytics/components/value_stream_metrics.vue';
import createFlash from '~/flash';
import { redirectTo } from '~/lib/utils/url_utility';
import { group } from './mock_data';
jest.mock('~/flash');
jest.mock('~/lib/utils/url_utility');
describe('ValueStreamMetrics', () => {
let wrapper;
......@@ -68,19 +70,30 @@ describe('ValueStreamMetrics', () => {
expectToHaveRequest({ params: {} });
});
it.each`
index | value | title | unit
${0} | ${metricsData[0].value} | ${metricsData[0].title} | ${metricsData[0].unit}
${1} | ${metricsData[1].value} | ${metricsData[1].title} | ${metricsData[1].unit}
${2} | ${metricsData[2].value} | ${metricsData[2].title} | ${metricsData[2].unit}
${3} | ${metricsData[3].value} | ${metricsData[3].title} | ${metricsData[3].unit}
`(
'renders a single stat component for the $title with value and unit',
({ index, value, title, unit }) => {
describe.each`
index | value | title | unit | clickable
${0} | ${metricsData[0].value} | ${metricsData[0].title} | ${metricsData[0].unit} | ${false}
${1} | ${metricsData[1].value} | ${metricsData[1].title} | ${metricsData[1].unit} | ${false}
${2} | ${metricsData[2].value} | ${metricsData[2].title} | ${metricsData[2].unit} | ${false}
${3} | ${metricsData[3].value} | ${metricsData[3].title} | ${metricsData[3].unit} | ${true}
`('metric tiles', ({ index, value, title, unit, clickable }) => {
it(`renders a single stat component for "${title}" with value and unit`, () => {
const metric = findMetrics().at(index);
expect(metric.props()).toMatchObject({ value, title, unit: unit ?? '' });
},
);
});
it(`${
clickable ? 'redirects' : "doesn't redirect"
} when the user clicks the "${title}" metric`, () => {
const metric = findMetrics().at(index);
metric.vm.$emit('click');
if (clickable) {
expect(redirectTo).toHaveBeenCalledWith(metricsData[index].links[0].url);
} else {
expect(redirectTo).not.toHaveBeenCalled();
}
});
});
it('will not display a loading icon', () => {
expect(wrapper.find(GlSkeletonLoading).exists()).toBe(false);
......
......@@ -36,7 +36,7 @@ RSpec.describe AnalyticsSummarySerializer do
context 'when representing with unit' do
let(:resource) do
Gitlab::CycleAnalytics::Summary::DeploymentFrequency
.new(deployments: 10, options: { from: 1.day.ago })
.new(deployments: 10, options: { from: 1.day.ago }, project: project)
end
subject { described_class.new.represent(resource, with_unit: true) }
......
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