diff options
5 files changed, 54 insertions, 36 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue index eb407ad1d7f..0acdfe7675c 100644 --- a/app/assets/javascripts/monitoring/components/charts/column.vue +++ b/app/assets/javascripts/monitoring/components/charts/column.vue @@ -1,6 +1,6 @@ <script> +import { GlResizeObserverDirective } from '@gitlab/ui'; import { GlColumnChart } from '@gitlab/ui/dist/charts'; -import { debounceByAnimationFrame } from '~/lib/utils/common_utils'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; import { chartHeight } from '../../constants'; import { makeDataSeries } from '~/helpers/monitor_helper'; @@ -10,24 +10,21 @@ export default { components: { GlColumnChart, }, - inheritAttrs: false, + directives: { + GlResizeObserverDirective, + }, props: { graphData: { type: Object, required: true, validator: graphDataValidatorForValues.bind(null, false), }, - containerWidth: { - type: Number, - required: true, - }, }, data() { return { width: 0, height: chartHeight, svgs: {}, - debouncedResizeCallback: {}, }; }, computed: { @@ -68,15 +65,7 @@ export default { }; }, }, - watch: { - containerWidth: 'onResize', - }, - beforeDestroy() { - window.removeEventListener('resize', this.debouncedResizeCallback); - }, created() { - this.debouncedResizeCallback = debounceByAnimationFrame(this.onResize); - window.addEventListener('resize', this.debouncedResizeCallback); this.setSvg('scroll-handle'); }, methods: { @@ -84,6 +73,7 @@ export default { return `${query.label}`; }, onResize() { + if (!this.$refs.columnChart) return; const { width } = this.$refs.columnChart.$el.getBoundingClientRect(); this.width = width; }, @@ -100,7 +90,7 @@ export default { }; </script> <template> - <div class="prometheus-graph"> + <div v-gl-resize-observer-directive="onResize" class="prometheus-graph"> <div class="prometheus-graph-header"> <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphData.title }}</h5> <div ref="graphWidgets" class="prometheus-graph-widgets"><slot></slot></div> diff --git a/app/assets/javascripts/monitoring/components/charts/heatmap.vue b/app/assets/javascripts/monitoring/components/charts/heatmap.vue index 6ab5aaeba1d..881904cbd0c 100644 --- a/app/assets/javascripts/monitoring/components/charts/heatmap.vue +++ b/app/assets/javascripts/monitoring/components/charts/heatmap.vue @@ -1,26 +1,29 @@ <script> +import { GlResizeObserverDirective } from '@gitlab/ui'; import { GlHeatmap } from '@gitlab/ui/dist/charts'; import dateformat from 'dateformat'; import PrometheusHeader from '../shared/prometheus_header.vue'; -import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue'; import { graphDataValidatorForValues } from '../../utils'; export default { components: { GlHeatmap, - ResizableChartContainer, PrometheusHeader, }, + directives: { + GlResizeObserverDirective, + }, props: { graphData: { type: Object, required: true, validator: graphDataValidatorForValues.bind(null, false), }, - containerWidth: { - type: Number, - required: true, - }, + }, + data() { + return { + width: 0, + }; }, computed: { chartData() { @@ -52,22 +55,27 @@ export default { return this.graphData.metrics[0]; }, }, + methods: { + onResize() { + if (this.$refs.heatmapChart) return; + const { width } = this.$refs.heatmapChart.$el.getBoundingClientRect(); + this.width = width; + }, + }, }; </script> <template> - <div class="prometheus-graph col-12 col-lg-6"> + <div v-gl-resize-observer-directive="onResize" class="prometheus-graph col-12 col-lg-6"> <prometheus-header :graph-title="graphData.title" /> - <resizable-chart-container> - <gl-heatmap - ref="heatmapChart" - v-bind="$attrs" - :data-series="chartData" - :x-axis-name="xAxisName" - :y-axis-name="yAxisName" - :x-axis-labels="xAxisLabels" - :y-axis-labels="yAxisLabels" - :width="containerWidth" - /> - </resizable-chart-container> + <gl-heatmap + ref="heatmapChart" + v-bind="$attrs" + :data-series="chartData" + :x-axis-name="xAxisName" + :y-axis-name="yAxisName" + :x-axis-labels="xAxisLabels" + :y-axis-labels="yAxisLabels" + :width="width" + /> </div> </template> diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue index 9c50d3190b9..4d067365ed9 100644 --- a/app/assets/javascripts/monitoring/components/panel_type.vue +++ b/app/assets/javascripts/monitoring/components/panel_type.vue @@ -14,6 +14,7 @@ import MonitorTimeSeriesChart from './charts/time_series.vue'; import MonitorAnomalyChart from './charts/anomaly.vue'; import MonitorSingleStatChart from './charts/single_stat.vue'; import MonitorHeatmapChart from './charts/heatmap.vue'; +import MonitorColumnChart from './charts/column.vue'; import MonitorEmptyChart from './charts/empty_chart.vue'; import TrackEventDirective from '~/vue_shared/directives/track_event'; import { downloadCSVOptions, generateLinkToChartOptions } from '../utils'; @@ -21,6 +22,7 @@ import { downloadCSVOptions, generateLinkToChartOptions } from '../utils'; export default { components: { MonitorSingleStatChart, + MonitorColumnChart, MonitorHeatmapChart, MonitorEmptyChart, Icon, @@ -114,7 +116,10 @@ export default { <monitor-heatmap-chart v-else-if="isPanelType('heatmap') && graphDataHasMetrics" :graph-data="graphData" - :container-width="dashboardWidth" + /> + <monitor-column-chart + v-else-if="isPanelType('column') && graphDataHasMetrics" + :graph-data="graphData" /> <component :is="monitorChartComponent" diff --git a/changelogs/unreleased/jivanvl-support-column-charts.yml b/changelogs/unreleased/jivanvl-support-column-charts.yml new file mode 100644 index 00000000000..247d548786d --- /dev/null +++ b/changelogs/unreleased/jivanvl-support-column-charts.yml @@ -0,0 +1,5 @@ +--- +title: Add support for column charts +merge_request: 23903 +author: +type: changed diff --git a/doc/administration/troubleshooting/kubernetes_cheat_sheet.md b/doc/administration/troubleshooting/kubernetes_cheat_sheet.md index dfd5e82a159..4a7d677723a 100644 --- a/doc/administration/troubleshooting/kubernetes_cheat_sheet.md +++ b/doc/administration/troubleshooting/kubernetes_cheat_sheet.md @@ -72,6 +72,16 @@ and they will assist you with any issues you are having. This is the principle of Kubernetes, read [Twelve-factor app](https://12factor.net/) for details. +- How to get cronjobs configured on a cluster + + ```bash + kubectl get cronjobs + ``` + + When one configures [cron-based backups](https://docs.gitlab.com/charts/backup-restore/backup.html#cron-based-backup), + you will be able to see the new schedule here. Some details about the schedules can be found + in [Running Automated Tasks with a CronJob](https://kubernetes.io/docs/tasks/job/automated-tasks-with-cron-jobs/#creating-a-cron-job) + ## GitLab-specific Kubernetes information - Minimal config that can be used to test a Kubernetes Helm chart can be found |