Add latest changes from gitlab-org/gitlab@master

3 files changed, 119 insertions, 0 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
new file mode 100644
index 00000000000..55ae4a3bdb2
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
@@ -0,0 +1,103 @@
+<script>
+import { GlResizeObserverDirective } from '@gitlab/ui';
+import { GlStackedColumnChart } from '@gitlab/ui/dist/charts';
+import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
+import { chartHeight } from '../../constants';
+import { graphDataValidatorForValues } from '../../utils';
+
+export default {
+  components: {
+    GlStackedColumnChart,
+  },
+  directives: {
+    GlResizeObserverDirective,
+  },
+  props: {
+    graphData: {
+      type: Object,
+      required: true,
+      validator: graphDataValidatorForValues.bind(null, false),
+    },
+  },
+  data() {
+    return {
+      width: 0,
+      height: chartHeight,
+      svgs: {},
+    };
+  },
+  computed: {
+    chartData() {
+      return this.graphData.metrics.map(metric => metric.result[0].values.map(val => val[1]));
+    },
+    xAxisTitle() {
+      return this.graphData.x_label !== undefined ? this.graphData.x_label : '';
+    },
+    yAxisTitle() {
+      return this.graphData.y_label !== undefined ? this.graphData.y_label : '';
+    },
+    xAxisType() {
+      return this.graphData.x_type !== undefined ? this.graphData.x_type : 'category';
+    },
+    groupBy() {
+      return this.graphData.metrics[0].result[0].values.map(val => val[0]);
+    },
+    dataZoomConfig() {
+      const handleIcon = this.svgs['scroll-handle'];
+
+      return handleIcon ? { handleIcon } : {};
+    },
+    chartOptions() {
+      return {
+        dataZoom: this.dataZoomConfig,
+      };
+    },
+    seriesNames() {
+      return this.graphData.metrics.map(metric => metric.series_name);
+    },
+  },
+  created() {
+    this.setSvg('scroll-handle');
+  },
+  methods: {
+    setSvg(name) {
+      getSvgIconPathContent(name)
+        .then(path => {
+          if (path) {
+            this.$set(this.svgs, name, `path://${path}`);
+          }
+        })
+        .catch(e => {
+          // eslint-disable-next-line no-console, @gitlab/i18n/no-non-i18n-strings
+          console.error('SVG could not be rendered correctly: ', e);
+        });
+    },
+    onResize() {
+      if (!this.$refs.chart) return;
+      const { width } = this.$refs.chart.$el.getBoundingClientRect();
+      this.width = width;
+    },
+  },
+};
+</script>
+<template>
+  <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>
+    </div>
+    <gl-stacked-column-chart
+      ref="chart"
+      v-bind="$attrs"
+      :data="chartData"
+      :option="chartOptions"
+      :x-axis-title="xAxisTitle"
+      :y-axis-title="yAxisTitle"
+      :x-axis-type="xAxisType"
+      :group-by="groupBy"
+      :width="width"
+      :height="height"
+      :series-names="seriesNames"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index 4d067365ed9..6751f3d31e8 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/app/assets/javascripts/monitoring/components/panel_type.vue
@@ -15,6 +15,7 @@ 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 MonitorStackedColumnChart from './charts/stacked_column.vue';
 import MonitorEmptyChart from './charts/empty_chart.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { downloadCSVOptions, generateLinkToChartOptions } from '../utils';
@@ -24,6 +25,7 @@ export default {
     MonitorSingleStatChart,
     MonitorColumnChart,
     MonitorHeatmapChart,
+    MonitorStackedColumnChart,
     MonitorEmptyChart,
     Icon,
     GlDropdown,
@@ -121,6 +123,10 @@ export default {
     v-else-if="isPanelType('column') && graphDataHasMetrics"
     :graph-data="graphData"
   />
+  <monitor-stacked-column-chart
+    v-else-if="isPanelType('stacked-column') && graphDataHasMetrics"
+    :graph-data="graphData"
+  />
   <component
     :is="monitorChartComponent"
     v-else-if="graphDataHasMetrics"
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 7fa48c70f41..58279bba4ca 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -160,6 +160,11 @@ $ide-commit-header-height: 48px;
   height: 0;
 }
 
+// stylelint-disable selector-class-pattern
+// stylelint-disable selector-max-compound-selectors
+// stylelint-disable stylelint-gitlab/duplicate-selectors
+// stylelint-disable stylelint-gitlab/utility-classes
+
 .blob-editor-container {
   flex: 1;
   height: 0;
@@ -301,6 +306,11 @@ $ide-commit-header-height: 48px;
   }
 }
 
+// stylelint-enable selector-class-pattern
+// stylelint-enable selector-max-compound-selectors
+// stylelint-enable stylelint-gitlab/duplicate-selectors
+// stylelint-enable stylelint-gitlab/utility-classes
+
 .preview-container {
   flex-grow: 1;
   position: relative;