diff options
Diffstat (limited to 'app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue')
-rw-r--r-- | app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue | 49 |
1 files changed, 26 insertions, 23 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue b/app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue index 7371ffd2c7c..9671742e564 100644 --- a/app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue +++ b/app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue @@ -1,11 +1,13 @@ <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,32 +78,33 @@ export default { this.isLoading = false; }); }, + hasLinks(links) { + return links?.length && links[0].url; + }, + clickHandler({ links }) { + if (this.hasLinks(links)) { + redirectTo(links[0].url); + } + }, }, }; </script> <template> <div class="gl-display-flex gl-flex-wrap" data-testid="vsa-time-metrics"> - <div v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6"> - <gl-skeleton-loading /> + <gl-skeleton-loading v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6" /> + <div v-for="metric in metrics" v-show="!isLoading" :key="metric.key" class="gl-my-6 gl-pr-9"> + <gl-single-stat + :id="metric.key" + :value="`${metric.value}`" + :title="metric.label" + :unit="metric.unit || ''" + :should-animate="true" + :animation-decimal-places="1" + :class="{ 'gl-hover-cursor-pointer': hasLinks(metric.links) }" + tabindex="0" + @click="clickHandler(metric)" + /> + <metric-popover :metric="metric" :target="metric.key" /> </div> - <template v-else> - <div v-for="metric in metrics" :key="metric.key" class="gl-my-6 gl-pr-9"> - <gl-single-stat - :id="metric.key" - :value="`${metric.value}`" - :title="metric.label" - :unit="metric.unit || ''" - :should-animate="true" - :animation-decimal-places="1" - tabindex="0" - /> - <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> - </div> - </template> </div> </template> |