diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components')
8 files changed, 30 insertions, 36 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue index d7d01def45e..511f77a441b 100644 --- a/app/assets/javascripts/monitoring/components/charts/column.vue +++ b/app/assets/javascripts/monitoring/components/charts/column.vue @@ -35,18 +35,14 @@ export default { }; }, computed: { - chartData() { - const queryData = this.graphData.metrics.reduce((acc, query) => { + barChartData() { + return this.graphData.metrics.reduce((acc, query) => { const series = makeDataSeries(query.result || [], { name: this.formatLegendLabel(query), }); return acc.concat(series); }, []); - - return { - values: queryData[0].data, - }; }, chartOptions() { const xAxis = getTimeAxisOptions({ timezone: this.timezone }); @@ -109,7 +105,7 @@ export default { <gl-column-chart ref="columnChart" v-bind="$attrs" - :data="chartData" + :bars="barChartData" :option="chartOptions" :width="width" :height="height" diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue index 9bcd4419a14..66b4d0d86e6 100644 --- a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue +++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue @@ -61,14 +61,16 @@ export default { }, computed: { chartData() { - return this.graphData.metrics.map(({ result }) => { - // This needs a fix. Not only metrics[0] should be shown. - // See https://gitlab.com/gitlab-org/gitlab/-/issues/220492 - if (!result || result.length === 0) { - return []; - } - return result[0].values.map(val => val[1]); - }); + return this.graphData.metrics + .map(({ label: name, result }) => { + // This needs a fix. Not only metrics[0] should be shown. + // See https://gitlab.com/gitlab-org/gitlab/-/issues/220492 + if (!result || result.length === 0) { + return []; + } + return { name, data: result[0].values.map(val => val[1]) }; + }) + .slice(0, 1); }, xAxisTitle() { return this.graphData.x_label !== undefined ? this.graphData.x_label : ''; @@ -136,7 +138,7 @@ export default { <gl-stacked-column-chart ref="chart" v-bind="$attrs" - :data="chartData" + :bars="chartData" :option="chartOptions" :x-axis-title="xAxisTitle" :y-axis-title="yAxisTitle" @@ -144,7 +146,6 @@ export default { :group-by="groupBy" :width="width" :height="height" - :series-names="seriesNames" :legend-layout="legendLayout" :legend-average-text="legendAverageText" :legend-current-text="legendCurrentText" diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 6bae3fdcc2e..bda2adeb62a 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -402,21 +402,21 @@ export default { @updated="onChartUpdated" > <template v-if="tooltip.type === 'deployments'"> - <template slot="tooltipTitle"> + <template slot="tooltip-title"> {{ __('Deployed') }} </template> - <div slot="tooltipContent" class="d-flex align-items-center"> + <div slot="tooltip-content" class="d-flex align-items-center"> <gl-icon name="commit" class="mr-2" /> <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link> </div> </template> <template v-else> - <template slot="tooltipTitle"> + <template slot="tooltip-title"> <div class="text-nowrap"> {{ tooltip.title }} </div> </template> - <template slot="tooltipContent" :tooltip="tooltip"> + <template slot="tooltip-content" :tooltip="tooltip"> <div v-for="(content, key) in tooltip.content" :key="key" diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index cbfacd73b5b..16c2c87a4b7 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -423,7 +423,7 @@ export default { :prometheus-alerts-available="prometheusAlertsAvailable" @timerangezoom="onTimeRangeZoom" > - <template #topLeft> + <template #top-left> <gl-button ref="goBackBtn" v-gl-tooltip diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue index 18310f7c71e..597600bba07 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue @@ -365,7 +365,7 @@ export default { <template> <div v-gl-resize-observer="onResize" class="prometheus-graph"> <div class="d-flex align-items-center"> - <slot name="topLeft"></slot> + <slot name="top-left"></slot> <h5 ref="graphTitle" class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate gl-mr-3" diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue index 88d5a35146f..0a1b1cd2c08 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue @@ -85,7 +85,7 @@ export default { <template> <div class="prometheus-panel-builder"> <div class="gl-xs-flex-direction-column gl-display-flex gl-mx-n3"> - <gl-card class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3"> + <gl-card class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3 gl-mb-5"> <template #header> <h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|1. Define and preview panel') }}</h2> </template> @@ -124,7 +124,7 @@ export default { </gl-card> <gl-card - class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3" + class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3 gl-mb-5" body-class="gl-display-flex gl-flex-direction-column" > <template #header> diff --git a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue index f07483c34b8..481ba3636cb 100644 --- a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue +++ b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue @@ -73,7 +73,7 @@ export default { <template> <gl-card v-show="numCharts > 0" - class="collapsible-card border p-0 mb-3" + class="collapsible-card border p-0 gl-mb-5" header-class="d-flex align-items-center border-bottom-0 py-2" :body-class="bodyClass" > diff --git a/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue index 5563a27301d..4e48292c48d 100644 --- a/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue +++ b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue @@ -1,11 +1,11 @@ <script> -import { GlFormGroup, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui'; +import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui'; export default { components: { GlFormGroup, - GlDeprecatedDropdown, - GlDeprecatedDropdownItem, + GlDropdown, + GlDropdownItem, }, props: { name: { @@ -41,16 +41,13 @@ export default { </script> <template> <gl-form-group :label="label"> - <gl-deprecated-dropdown - toggle-class="dropdown-menu-toggle" - :text="text || s__('Metrics|Select a value')" - > - <gl-deprecated-dropdown-item + <gl-dropdown toggle-class="dropdown-menu-toggle" :text="text || s__('Metrics|Select a value')"> + <gl-dropdown-item v-for="val in options.values" :key="val.value" @click="onUpdate(val.value)" - >{{ val.text }}</gl-deprecated-dropdown-item + >{{ val.text }}</gl-dropdown-item > - </gl-deprecated-dropdown> + </gl-dropdown> </gl-form-group> </template> |