Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 2x 3x 23x 20x 23x 1x 22x 23x 20x 20x 7x 7x 6x 6x | <script>
import { GlEmptyState } from '@gitlab/ui';
import { isUndefined } from 'lodash';
// eslint-disable-next-line no-restricted-imports
import { mapActions, mapState } from 'vuex';
import { __ } from '~/locale';
import { InternalEvents } from '~/tracking';
import {
INSIGHTS_CHART_ITEM_SETTINGS,
INSIGHTS_CHART_ITEM_TRACKING_CLICK_ACTION,
} from 'ee/insights/constants';
import InsightsChart from './insights_chart.vue';
export default {
components: {
GlEmptyState,
InsightsChart,
},
mixins: [InternalEvents.mixin()],
props: {
queryEndpoint: {
type: String,
required: true,
},
pageConfig: {
type: Object,
required: true,
},
},
computed: {
...mapState('insights', ['chartData']),
emptyState() {
return {
title: __('There are no charts configured for this page'),
description: __(
'Please check the configuration file to ensure that a collection of charts has been declared.',
),
};
},
charts() {
return this.pageConfig.charts;
},
chartKeys() {
return this.charts.map((chart) => chart.title);
},
hasChartsConfigured() {
return !isUndefined(this.charts) && this.charts.length > 0;
},
},
watch: {
pageConfig() {
this.fetchCharts();
},
},
mounted() {
this.fetchCharts();
},
methods: {
...mapActions('insights', ['fetchChartData', 'initChartData']),
fetchCharts() {
if (this.hasChartsConfigured) {
this.initChartData(this.chartKeys);
this.charts.forEach((chart) =>
this.fetchChartData({ endpoint: this.queryEndpoint, chart }),
);
}
},
onChartItemClicked(dataSourceType) {
const { trackingClickAction } = INSIGHTS_CHART_ITEM_SETTINGS[dataSourceType] || {};
if (trackingClickAction) {
this.trackEvent(INSIGHTS_CHART_ITEM_TRACKING_CLICK_ACTION);
this.trackEvent(trackingClickAction);
}
},
},
};
</script>
<template>
<div class="insights-page" data-testid="insights-page">
<div v-if="hasChartsConfigured" class="js-insights-page-container">
<h4 class="text-center">{{ pageConfig.title }}</h4>
<div class="insights-charts" data-testid="insights-charts">
<insights-chart
v-for="(
{
loaded,
type,
description,
data,
dataSourceType,
error,
filterLabels,
collectionLabels,
groupBy,
},
key,
index
) in chartData"
:key="index"
:loaded="loaded"
:type="type"
:title="key"
:description="description"
:data="data"
:data-source-type="dataSourceType"
:error="error"
:filter-labels="filterLabels"
:collection-labels="collectionLabels"
:group-by="groupBy"
@chart-item-clicked="onChartItemClicked(dataSourceType)"
/>
</div>
</div>
<gl-empty-state
v-else
:title="emptyState.title"
:description="emptyState.description"
svg-path="/assets/illustrations/empty-state/empty-dashboard-md.svg"
/>
</div>
</template>
|