Add support for additional panel types

This introduces the single stat chart component aside from
the area chart component

4 files changed, 104 insertions, 6 deletions

diff --git a/spec/javascripts/monitoring/charts/single_stat_spec.js b/spec/javascripts/monitoring/charts/single_stat_spec.js
index 12b73002f97..127a4a7955a 100644
--- a/spec/javascripts/monitoring/charts/single_stat_spec.js
+++ b/spec/javascripts/monitoring/charts/single_stat_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
+import { graphDataPrometheusQuery } from '../mock_data';
 
 describe('Single Stat Chart component', () => {
   let singleStatChart;
@@ -7,9 +8,7 @@ describe('Single Stat Chart component', () => {
   beforeEach(() => {
     singleStatChart = shallowMount(SingleStatChart, {
       propsData: {
-        title: 'Time to render',
-        value: 1,
-        unit: 'sec',
+        graphData: graphDataPrometheusQuery,
       },
     });
   });
@@ -19,9 +18,9 @@ describe('Single Stat Chart component', () => {
   });
 
   describe('computed', () => {
-    describe('valueWithUnit', () => {
+    describe('engineeringNotation', () => {
       it('should interpolate the value and unit props', () => {
-        expect(singleStatChart.vm.valueWithUnit).toBe('1sec');
+        expect(singleStatChart.vm.engineeringNotation).toBe('91MB');
       });
     });
   });
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 7bbb215475a..85e660d3925 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -935,3 +935,75 @@ export const dashboardGitResponse = [
     default: false,
   },
 ];
+
+export const graphDataPrometheusQuery = {
+  title: 'Super Chart A2',
+  type: 'single-stat',
+  weight: 2,
+  metrics: [
+    {
+      id: 'metric_a1',
+      metric_id: 2,
+      query: 'max(go_memstats_alloc_bytes{job="prometheus"}) by (job) /1024/1024',
+      unit: 'MB',
+      label: 'Total Consumption',
+      prometheus_endpoint_path:
+        '/root/kubernetes-gke-project/environments/35/prometheus/api/v1/query?query=max%28go_memstats_alloc_bytes%7Bjob%3D%22prometheus%22%7D%29+by+%28job%29+%2F1024%2F1024',
+    },
+  ],
+  queries: [
+    {
+      metricId: null,
+      id: 'metric_a1',
+      metric_id: 2,
+      query: 'max(go_memstats_alloc_bytes{job="prometheus"}) by (job) /1024/1024',
+      unit: 'MB',
+      label: 'Total Consumption',
+      prometheus_endpoint_path:
+        '/root/kubernetes-gke-project/environments/35/prometheus/api/v1/query?query=max%28go_memstats_alloc_bytes%7Bjob%3D%22prometheus%22%7D%29+by+%28job%29+%2F1024%2F1024',
+      result: [
+        {
+          metric: { job: 'prometheus' },
+          value: ['2019-06-26T21:03:20.881Z', 91],
+        },
+      ],
+    },
+  ],
+};
+
+export const graphDataPrometheusQueryRange = {
+  title: 'Super Chart A1',
+  type: 'area',
+  weight: 2,
+  metrics: [
+    {
+      id: 'metric_a1',
+      metric_id: 2,
+      query_range:
+        'avg(sum(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-(.*)",namespace="%{kube_namespace}"}) by (job)) without (job)  /1024/1024/1024',
+      unit: 'MB',
+      label: 'Total Consumption',
+      prometheus_endpoint_path:
+        '/root/kubernetes-gke-project/environments/35/prometheus/api/v1/query?query=max%28go_memstats_alloc_bytes%7Bjob%3D%22prometheus%22%7D%29+by+%28job%29+%2F1024%2F1024',
+    },
+  ],
+  queries: [
+    {
+      metricId: null,
+      id: 'metric_a1',
+      metric_id: 2,
+      query_range:
+        'avg(sum(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-(.*)",namespace="%{kube_namespace}"}) by (job)) without (job)  /1024/1024/1024',
+      unit: 'MB',
+      label: 'Total Consumption',
+      prometheus_endpoint_path:
+        '/root/kubernetes-gke-project/environments/35/prometheus/api/v1/query?query=max%28go_memstats_alloc_bytes%7Bjob%3D%22prometheus%22%7D%29+by+%28job%29+%2F1024%2F1024',
+      result: [
+        {
+          metric: {},
+          values: [[1495700554.925, '8.0390625'], [1495700614.925, '8.0390625']],
+        },
+      ],
+    },
+  ],
+};
diff --git a/spec/javascripts/monitoring/store/mutations_spec.js b/spec/javascripts/monitoring/store/mutations_spec.js
index 91580366531..43776b1b7f2 100644
--- a/spec/javascripts/monitoring/store/mutations_spec.js
+++ b/spec/javascripts/monitoring/store/mutations_spec.js
@@ -115,12 +115,14 @@ describe('Monitoring mutations', () => {
         environmentsEndpoint: 'environments.json',
         deploymentsEndpoint: 'deployments.json',
         dashboardEndpoint: 'dashboard.json',
+        projectPath: '/gitlab-org/gitlab-ce',
       });
 
       expect(stateCopy.metricsEndpoint).toEqual('additional_metrics.json');
       expect(stateCopy.environmentsEndpoint).toEqual('environments.json');
       expect(stateCopy.deploymentsEndpoint).toEqual('deployments.json');
       expect(stateCopy.dashboardEndpoint).toEqual('dashboard.json');
+      expect(stateCopy.projectPath).toEqual('/gitlab-org/gitlab-ce');
     });
   });
 
diff --git a/spec/javascripts/monitoring/utils_spec.js b/spec/javascripts/monitoring/utils_spec.js
index e3c455d1686..5570d57b8b2 100644
--- a/spec/javascripts/monitoring/utils_spec.js
+++ b/spec/javascripts/monitoring/utils_spec.js
@@ -1,5 +1,6 @@
-import { getTimeDiff } from '~/monitoring/utils';
+import { getTimeDiff, graphDataValidatorForValues } from '~/monitoring/utils';
 import { timeWindows } from '~/monitoring/constants';
+import { graphDataPrometheusQuery, graphDataPrometheusQueryRange } from './mock_data';
 
 describe('getTimeDiff', () => {
   it('defaults to an 8 hour (28800s) difference', () => {
@@ -27,3 +28,27 @@ describe('getTimeDiff', () => {
     });
   });
 });
+
+describe('graphDataValidatorForValues', () => {
+  /*
+   * When dealing with a metric using the query format, e.g.
+   * query: 'max(go_memstats_alloc_bytes{job="prometheus"}) by (job) /1024/1024'
+   * the validator will look for the `value` key instead of `values`
+   */
+  it('validates data with the query format', () => {
+    const validGraphData = graphDataValidatorForValues(true, graphDataPrometheusQuery);
+
+    expect(validGraphData).toBe(true);
+  });
+
+  /*
+   * When dealing with a metric using the query?range format, e.g.
+   * query_range: 'avg(sum(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-(.*)",namespace="%{kube_namespace}"}) by (job)) without (job)  /1024/1024/1024',
+   * the validator will look for the `values` key instead of `value`
+   */
+  it('validates data with the query_range format', () => {
+    const validGraphData = graphDataValidatorForValues(false, graphDataPrometheusQueryRange);
+
+    expect(validGraphData).toBe(true);
+  });
+});