Add latest changes from gitlab-org/gitlab@master

3 files changed, 174 insertions, 0 deletions

diff --git a/spec/javascripts/monitoring/charts/heatmap_spec.js b/spec/javascripts/monitoring/charts/heatmap_spec.js
new file mode 100644
index 00000000000..9a98fc6fb05
--- /dev/null
+++ b/spec/javascripts/monitoring/charts/heatmap_spec.js
@@ -0,0 +1,69 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlHeatmap } from '@gitlab/ui/dist/charts';
+import Heatmap from '~/monitoring/components/charts/heatmap.vue';
+import { graphDataPrometheusQueryRangeMultiTrack } from '../mock_data';
+
+describe('Heatmap component', () => {
+  let heatmapChart;
+  let store;
+
+  beforeEach(() => {
+    heatmapChart = shallowMount(Heatmap, {
+      propsData: {
+        graphData: graphDataPrometheusQueryRangeMultiTrack,
+        containerWidth: 100,
+      },
+      store,
+    });
+  });
+
+  afterEach(() => {
+    heatmapChart.destroy();
+  });
+
+  describe('wrapped components', () => {
+    describe('GitLab UI heatmap chart', () => {
+      let glHeatmapChart;
+
+      beforeEach(() => {
+        glHeatmapChart = heatmapChart.find(GlHeatmap);
+      });
+
+      it('is a Vue instance', () => {
+        expect(glHeatmapChart.isVueInstance()).toBe(true);
+      });
+
+      it('should display a label on the x axis', () => {
+        expect(heatmapChart.vm.xAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.x_label);
+      });
+
+      it('should display a label on the y axis', () => {
+        expect(heatmapChart.vm.yAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.y_label);
+      });
+
+      // According to the echarts docs https://echarts.apache.org/en/option.html#series-heatmap.data
+      // each row of the heatmap chart is represented by an array inside another parent array
+      // e.g. [[0, 0, 10]], the format represents the column, the row and finally the value
+      // corresponding to the cell
+
+      it('should return chartData with a length of x by y, with a length of 3 per array', () => {
+        const row = heatmapChart.vm.chartData[0];
+
+        expect(row.length).toBe(3);
+        expect(heatmapChart.vm.chartData.length).toBe(30);
+      });
+
+      it('returns a series of labels for the x axis', () => {
+        const { xAxisLabels } = heatmapChart.vm;
+
+        expect(xAxisLabels.length).toBe(5);
+      });
+
+      it('returns a series of labels for the y axis', () => {
+        const { yAxisLabels } = heatmapChart.vm;
+
+        expect(yAxisLabels.length).toBe(6);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 6f9a2a34ef5..4d63f91f658 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -1013,3 +1013,82 @@ export const graphDataPrometheusQueryRange = {
     },
   ],
 };
+
+export const graphDataPrometheusQueryRangeMultiTrack = {
+  title: 'Super Chart A3',
+  type: 'heatmap',
+  weight: 3,
+  x_label: 'Status Code',
+  y_label: 'Time',
+  metrics: [],
+  queries: [
+    {
+      metricId: '1',
+      id: 'response_metrics_nginx_ingress_throughput_status_code',
+      query_range:
+        'sum(rate(nginx_upstream_responses_total{upstream=~"%{kube_namespace}-%{ci_environment_slug}-.*"}[60m])) by (status_code)',
+      unit: 'req / sec',
+      label: 'Status Code',
+      metric_id: 1,
+      prometheus_endpoint_path:
+        '/root/rails_nodb/environments/3/prometheus/api/v1/query_range?query=sum%28rate%28nginx_upstream_responses_total%7Bupstream%3D~%22%25%7Bkube_namespace%7D-%25%7Bci_environment_slug%7D-.%2A%22%7D%5B2m%5D%29%29+by+%28status_code%29',
+      result: [
+        {
+          metric: { status_code: '1xx' },
+          values: [
+            ['2019-08-30T15:00:00.000Z', 0],
+            ['2019-08-30T16:00:00.000Z', 2],
+            ['2019-08-30T17:00:00.000Z', 0],
+            ['2019-08-30T18:00:00.000Z', 0],
+            ['2019-08-30T19:00:00.000Z', 0],
+            ['2019-08-30T20:00:00.000Z', 3],
+          ],
+        },
+        {
+          metric: { status_code: '2xx' },
+          values: [
+            ['2019-08-30T15:00:00.000Z', 1],
+            ['2019-08-30T16:00:00.000Z', 3],
+            ['2019-08-30T17:00:00.000Z', 6],
+            ['2019-08-30T18:00:00.000Z', 10],
+            ['2019-08-30T19:00:00.000Z', 8],
+            ['2019-08-30T20:00:00.000Z', 6],
+          ],
+        },
+        {
+          metric: { status_code: '3xx' },
+          values: [
+            ['2019-08-30T15:00:00.000Z', 1],
+            ['2019-08-30T16:00:00.000Z', 2],
+            ['2019-08-30T17:00:00.000Z', 3],
+            ['2019-08-30T18:00:00.000Z', 3],
+            ['2019-08-30T19:00:00.000Z', 2],
+            ['2019-08-30T20:00:00.000Z', 1],
+          ],
+        },
+        {
+          metric: { status_code: '4xx' },
+          values: [
+            ['2019-08-30T15:00:00.000Z', 2],
+            ['2019-08-30T16:00:00.000Z', 0],
+            ['2019-08-30T17:00:00.000Z', 0],
+            ['2019-08-30T18:00:00.000Z', 2],
+            ['2019-08-30T19:00:00.000Z', 0],
+            ['2019-08-30T20:00:00.000Z', 2],
+          ],
+        },
+        {
+          metric: { status_code: '5xx' },
+          values: [
+            ['2019-08-30T15:00:00.000Z', 0],
+            ['2019-08-30T16:00:00.000Z', 1],
+            ['2019-08-30T17:00:00.000Z', 0],
+            ['2019-08-30T18:00:00.000Z', 0],
+            ['2019-08-30T19:00:00.000Z', 0],
+            ['2019-08-30T20:00:00.000Z', 2],
+          ],
+        },
+      ],
+    },
+  ],
+};
diff --git a/spec/javascripts/monitoring/shared/prometheus_header_spec.js b/spec/javascripts/monitoring/shared/prometheus_header_spec.js
new file mode 100644
index 00000000000..9f916a4dfbb
--- /dev/null
+++ b/spec/javascripts/monitoring/shared/prometheus_header_spec.js
@@ -0,0 +1,26 @@
+import { shallowMount } from '@vue/test-utils';
+import PrometheusHeader from '~/monitoring/components/shared/prometheus_header.vue';
+
+describe('Prometheus Header component', () => {
+  let prometheusHeader;
+
+  beforeEach(() => {
+    prometheusHeader = shallowMount(PrometheusHeader, {
+      propsData: {
+        graphTitle: 'graph header',
+      },
+    });
+  });
+
+  afterEach(() => {
+    prometheusHeader.destroy();
+  });
+
+  describe('Prometheus header component', () => {
+    it('should show a title', () => {
+      const title = prometheusHeader.vm.$el.querySelector('.js-graph-title').textContent;
+
+      expect(title).toBe('graph header');
+    });
+  });
+});