10 files changed, 702 insertions, 27 deletions

diff --git a/spec/javascripts/monitoring/charts/area_spec.js b/spec/javascripts/monitoring/charts/area_spec.js
index d3a76f33679..1e49a955815 100644
--- a/spec/javascripts/monitoring/charts/area_spec.js
+++ b/spec/javascripts/monitoring/charts/area_spec.js
@@ -1,9 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
+import { createStore } from '~/monitoring/stores';
 import { GlLink } from '@gitlab/ui';
 import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { shallowWrapperContainsSlotText } from 'spec/helpers/vue_test_utils_helper';
 import Area from '~/monitoring/components/charts/area.vue';
-import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import { TEST_HOST } from 'spec/test_constants';
 import MonitoringMock, { deploymentData } from '../mock_data';
@@ -17,10 +17,10 @@ describe('Area component', () => {
   let mockGraphData;
   let areaChart;
   let spriteSpy;
+  let store;
 
   beforeEach(() => {
-    const store = createStore();
-
+    store = createStore();
     store.commit(`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, MonitoringMock.data);
     store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
 
@@ -36,6 +36,7 @@ describe('Area component', () => {
       slots: {
         default: mockWidgets,
       },
+      store,
     });
 
     spriteSpy = spyOnDependency(Area, 'getSvgIconPathContent').and.callFake(
@@ -224,6 +225,14 @@ describe('Area component', () => {
     });
 
     describe('chartOptions', () => {
+      describe('dataZoom', () => {
+        it('contains an svg object within an array to properly render icon', () => {
+          const dataZoomObject = [{}];
+
+          expect(areaChart.vm.chartOptions.dataZoom).toEqual(dataZoomObject);
+        });
+      });
+
       describe('yAxis formatter', () => {
         let format;
 
diff --git a/spec/javascripts/monitoring/charts/empty_chart_spec.js b/spec/javascripts/monitoring/charts/empty_chart_spec.js
new file mode 100644
index 00000000000..bbfca27dc5a
--- /dev/null
+++ b/spec/javascripts/monitoring/charts/empty_chart_spec.js
@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
+
+describe('Empty Chart component', () => {
+  let emptyChart;
+  const graphTitle = 'Memory Usage';
+
+  beforeEach(() => {
+    emptyChart = shallowMount(EmptyChart, {
+      propsData: {
+        graphTitle,
+      },
+    });
+  });
+
+  afterEach(() => {
+    emptyChart.destroy();
+  });
+
+  it('render the chart title', () => {
+    expect(emptyChart.find({ ref: 'graphTitle' }).text()).toBe(graphTitle);
+  });
+
+  describe('Computed props', () => {
+    it('sets the height for the svg container', () => {
+      expect(emptyChart.vm.svgContainerStyle.height).toBe('300px');
+    });
+  });
+});
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/charts/time_series_spec.js b/spec/javascripts/monitoring/charts/time_series_spec.js
new file mode 100644
index 00000000000..d145a64e8d0
--- /dev/null
+++ b/spec/javascripts/monitoring/charts/time_series_spec.js
@@ -0,0 +1,335 @@
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from '~/monitoring/stores';
+import { GlLink } from '@gitlab/ui';
+import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
+import { shallowWrapperContainsSlotText } from 'spec/helpers/vue_test_utils_helper';
+import TimeSeries from '~/monitoring/components/charts/time_series.vue';
+import * as types from '~/monitoring/stores/mutation_types';
+import { TEST_HOST } from 'spec/test_constants';
+import MonitoringMock, { deploymentData, mockProjectPath } from '../mock_data';
+
+describe('Time series component', () => {
+  const mockSha = 'mockSha';
+  const mockWidgets = 'mockWidgets';
+  const mockSvgPathContent = 'mockSvgPathContent';
+  const projectPath = `${TEST_HOST}${mockProjectPath}`;
+  const commitUrl = `${projectPath}/commit/${mockSha}`;
+  let mockGraphData;
+  let makeTimeSeriesChart;
+  let spriteSpy;
+  let store;
+
+  beforeEach(() => {
+    store = createStore();
+    store.commit(`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, MonitoringMock.data);
+    store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
+    store.dispatch('monitoringDashboard/setFeatureFlags', { exportMetricsToCsvEnabled: true });
+    [mockGraphData] = store.state.monitoringDashboard.groups[0].metrics;
+
+    makeTimeSeriesChart = (graphData, type) =>
+      shallowMount(TimeSeries, {
+        propsData: {
+          graphData: { ...graphData, type },
+          containerWidth: 0,
+          deploymentData: store.state.monitoringDashboard.deploymentData,
+          projectPath,
+        },
+        slots: {
+          default: mockWidgets,
+        },
+        sync: false,
+        store,
+      });
+
+    spriteSpy = spyOnDependency(TimeSeries, 'getSvgIconPathContent').and.callFake(
+      () => new Promise(resolve => resolve(mockSvgPathContent)),
+    );
+  });
+
+  describe('general functions', () => {
+    let timeSeriesChart;
+
+    beforeEach(() => {
+      timeSeriesChart = makeTimeSeriesChart(mockGraphData, 'area-chart');
+    });
+
+    it('renders chart title', () => {
+      expect(timeSeriesChart.find('.js-graph-title').text()).toBe(mockGraphData.title);
+    });
+
+    it('contains graph widgets from slot', () => {
+      expect(timeSeriesChart.find('.js-graph-widgets').text()).toBe(mockWidgets);
+    });
+
+    describe('when exportMetricsToCsvEnabled is disabled', () => {
+      beforeEach(() => {
+        store.dispatch('monitoringDashboard/setFeatureFlags', { exportMetricsToCsvEnabled: false });
+      });
+
+      it('does not render the Download CSV button', done => {
+        timeSeriesChart.vm.$nextTick(() => {
+          expect(timeSeriesChart.contains('glbutton-stub')).toBe(false);
+          done();
+        });
+      });
+    });
+
+    describe('methods', () => {
+      describe('formatTooltipText', () => {
+        const mockDate = deploymentData[0].created_at;
+        const mockCommitUrl = deploymentData[0].commitUrl;
+        const generateSeriesData = type => ({
+          seriesData: [
+            {
+              seriesName: timeSeriesChart.vm.chartData[0].name,
+              componentSubType: type,
+              value: [mockDate, 5.55555],
+              seriesIndex: 0,
+            },
+          ],
+          value: mockDate,
+        });
+
+        describe('when series is of line type', () => {
+          beforeEach(done => {
+            timeSeriesChart.vm.formatTooltipText(generateSeriesData('line'));
+            timeSeriesChart.vm.$nextTick(done);
+          });
+
+          it('formats tooltip title', () => {
+            expect(timeSeriesChart.vm.tooltip.title).toBe('31 May 2017, 9:23PM');
+          });
+
+          it('formats tooltip content', () => {
+            const name = 'Core Usage';
+            const value = '5.556';
+            const seriesLabel = timeSeriesChart.find(GlChartSeriesLabel);
+
+            expect(seriesLabel.vm.color).toBe('');
+            expect(shallowWrapperContainsSlotText(seriesLabel, 'default', name)).toBe(true);
+            expect(timeSeriesChart.vm.tooltip.content).toEqual([{ name, value, color: undefined }]);
+            expect(
+              shallowWrapperContainsSlotText(
+                timeSeriesChart.find(GlAreaChart),
+                'tooltipContent',
+                value,
+              ),
+            ).toBe(true);
+          });
+        });
+
+        describe('when series is of scatter type', () => {
+          beforeEach(() => {
+            timeSeriesChart.vm.formatTooltipText(generateSeriesData('scatter'));
+          });
+
+          it('formats tooltip title', () => {
+            expect(timeSeriesChart.vm.tooltip.title).toBe('31 May 2017, 9:23PM');
+          });
+
+          it('formats tooltip sha', () => {
+            expect(timeSeriesChart.vm.tooltip.sha).toBe('f5bcd1d9');
+          });
+
+          it('formats tooltip commit url', () => {
+            expect(timeSeriesChart.vm.tooltip.commitUrl).toBe(mockCommitUrl);
+          });
+        });
+      });
+
+      describe('setSvg', () => {
+        const mockSvgName = 'mockSvgName';
+
+        beforeEach(done => {
+          timeSeriesChart.vm.setSvg(mockSvgName);
+          timeSeriesChart.vm.$nextTick(done);
+        });
+
+        it('gets svg path content', () => {
+          expect(spriteSpy).toHaveBeenCalledWith(mockSvgName);
+        });
+
+        it('sets svg path content', () => {
+          timeSeriesChart.vm.$nextTick(() => {
+            expect(timeSeriesChart.vm.svgs[mockSvgName]).toBe(`path://${mockSvgPathContent}`);
+          });
+        });
+      });
+
+      describe('onResize', () => {
+        const mockWidth = 233;
+
+        beforeEach(() => {
+          spyOn(Element.prototype, 'getBoundingClientRect').and.callFake(() => ({
+            width: mockWidth,
+          }));
+          timeSeriesChart.vm.onResize();
+        });
+
+        it('sets area chart width', () => {
+          expect(timeSeriesChart.vm.width).toBe(mockWidth);
+        });
+      });
+    });
+
+    describe('computed', () => {
+      describe('chartData', () => {
+        let chartData;
+        const seriesData = () => chartData[0];
+
+        beforeEach(() => {
+          ({ chartData } = timeSeriesChart.vm);
+        });
+
+        it('utilizes all data points', () => {
+          const { values } = mockGraphData.queries[0].result[0];
+
+          expect(chartData.length).toBe(1);
+          expect(seriesData().data.length).toBe(values.length);
+        });
+
+        it('creates valid data', () => {
+          const { data } = seriesData();
+
+          expect(
+            data.filter(
+              ([time, value]) => new Date(time).getTime() > 0 && typeof value === 'number',
+            ).length,
+          ).toBe(data.length);
+        });
+
+        it('formats line width correctly', () => {
+          expect(chartData[0].lineStyle.width).toBe(2);
+        });
+      });
+
+      describe('chartOptions', () => {
+        describe('yAxis formatter', () => {
+          let format;
+
+          beforeEach(() => {
+            format = timeSeriesChart.vm.chartOptions.yAxis.axisLabel.formatter;
+          });
+
+          it('rounds to 3 decimal places', () => {
+            expect(format(0.88888)).toBe('0.889');
+          });
+        });
+      });
+
+      describe('scatterSeries', () => {
+        it('utilizes deployment data', () => {
+          expect(timeSeriesChart.vm.scatterSeries.data).toEqual([
+            ['2017-05-31T21:23:37.881Z', 0],
+            ['2017-05-30T20:08:04.629Z', 0],
+            ['2017-05-30T17:42:38.409Z', 0],
+          ]);
+
+          expect(timeSeriesChart.vm.scatterSeries.symbolSize).toBe(14);
+        });
+      });
+
+      describe('yAxisLabel', () => {
+        it('constructs a label for the chart y-axis', () => {
+          expect(timeSeriesChart.vm.yAxisLabel).toBe('CPU');
+        });
+      });
+
+      describe('csvText', () => {
+        it('converts data from json to csv', () => {
+          const header = `timestamp,${mockGraphData.y_label}`;
+          const data = mockGraphData.queries[0].result[0].values;
+          const firstRow = `${data[0][0]},${data[0][1]}`;
+
+          expect(timeSeriesChart.vm.csvText).toMatch(`^${header}\r\n${firstRow}`);
+        });
+      });
+
+      describe('downloadLink', () => {
+        it('produces a link to download metrics as csv', () => {
+          const link = timeSeriesChart.vm.downloadLink;
+
+          expect(link).toContain('blob:');
+        });
+      });
+    });
+
+    afterEach(() => {
+      timeSeriesChart.destroy();
+    });
+  });
+
+  describe('wrapped components', () => {
+    const glChartComponents = [
+      {
+        chartType: 'area-chart',
+        component: GlAreaChart,
+      },
+      {
+        chartType: 'line-chart',
+        component: GlLineChart,
+      },
+    ];
+
+    glChartComponents.forEach(dynamicComponent => {
+      describe(`GitLab UI: ${dynamicComponent.chartType}`, () => {
+        let timeSeriesAreaChart;
+        let glChart;
+
+        beforeEach(done => {
+          timeSeriesAreaChart = makeTimeSeriesChart(mockGraphData, dynamicComponent.chartType);
+          glChart = timeSeriesAreaChart.find(dynamicComponent.component);
+          timeSeriesAreaChart.vm.$nextTick(done);
+        });
+
+        it('is a Vue instance', () => {
+          expect(glChart.exists()).toBe(true);
+          expect(glChart.isVueInstance()).toBe(true);
+        });
+
+        it('receives data properties needed for proper chart render', () => {
+          const props = glChart.props();
+
+          expect(props.data).toBe(timeSeriesAreaChart.vm.chartData);
+          expect(props.option).toBe(timeSeriesAreaChart.vm.chartOptions);
+          expect(props.formatTooltipText).toBe(timeSeriesAreaChart.vm.formatTooltipText);
+          expect(props.thresholds).toBe(timeSeriesAreaChart.vm.thresholds);
+        });
+
+        it('recieves a tooltip title', done => {
+          const mockTitle = 'mockTitle';
+          timeSeriesAreaChart.vm.tooltip.title = mockTitle;
+
+          timeSeriesAreaChart.vm.$nextTick(() => {
+            expect(shallowWrapperContainsSlotText(glChart, 'tooltipTitle', mockTitle)).toBe(true);
+            done();
+          });
+        });
+
+        describe('when tooltip is showing deployment data', () => {
+          beforeEach(done => {
+            timeSeriesAreaChart.vm.tooltip.isDeployment = true;
+            timeSeriesAreaChart.vm.$nextTick(done);
+          });
+
+          it('uses deployment title', () => {
+            expect(shallowWrapperContainsSlotText(glChart, 'tooltipTitle', 'Deployed')).toBe(true);
+          });
+
+          it('renders clickable commit sha in tooltip content', done => {
+            timeSeriesAreaChart.vm.tooltip.sha = mockSha;
+            timeSeriesAreaChart.vm.tooltip.commitUrl = commitUrl;
+
+            timeSeriesAreaChart.vm.$nextTick(() => {
+              const commitLink = timeSeriesAreaChart.find(GlLink);
+
+              expect(shallowWrapperContainsSlotText(commitLink, 'default', mockSha)).toBe(true);
+              expect(commitLink.attributes('href')).toEqual(commitUrl);
+              done();
+            });
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/components/dashboard_spec.js
index d3e10194d92..f3ec7520c6f 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/components/dashboard_spec.js
@@ -1,18 +1,21 @@
 import Vue from 'vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlToast } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
 import * as types from '~/monitoring/stores/mutation_types';
 import { createStore } from '~/monitoring/stores';
 import axios from '~/lib/utils/axios_utils';
-import {
+import MonitoringMock, {
   metricsGroupsAPIResponse,
   mockApiEndpoint,
   environmentData,
   singleGroupResponse,
   dashboardGitResponse,
-} from './mock_data';
+} from '../mock_data';
 
+const localVue = createLocalVue();
 const propsData = {
   hasMetrics: false,
   documentationPath: '/path/to/docs',
@@ -40,6 +43,7 @@ describe('Dashboard', () => {
   let mock;
   let store;
   let component;
+  let mockGraphData;
 
   beforeEach(() => {
     setFixtures(`
@@ -58,7 +62,9 @@ describe('Dashboard', () => {
   });
 
   afterEach(() => {
-    component.$destroy();
+    if (component) {
+      component.$destroy();
+    }
     mock.restore();
   });
 
@@ -307,7 +313,7 @@ describe('Dashboard', () => {
       });
 
       spyOn(component.$store, 'dispatch').and.stub();
-      const getTimeDiffSpy = spyOnDependency(Dashboard, 'getTimeDiff');
+      const getTimeDiffSpy = spyOnDependency(Dashboard, 'getTimeDiff').and.callThrough();
 
       component.$store.commit(
         `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
@@ -319,7 +325,7 @@ describe('Dashboard', () => {
       Vue.nextTick()
         .then(() => {
           expect(component.$store.dispatch).toHaveBeenCalled();
-          expect(getTimeDiffSpy).toHaveBeenCalledWith(component.selectedTimeWindow);
+          expect(getTimeDiffSpy).toHaveBeenCalled();
 
           done();
         })
@@ -327,7 +333,17 @@ describe('Dashboard', () => {
     });
 
     it('shows a specific time window selected from the url params', done => {
-      spyOnDependency(Dashboard, 'getParameterValues').and.returnValue(['thirtyMinutes']);
+      const start = 1564439536;
+      const end = 1564441336;
+      spyOnDependency(Dashboard, 'getTimeDiff').and.returnValue({
+        start,
+        end,
+      });
+      spyOnDependency(Dashboard, 'getParameterValues').and.callFake(param => {
+        if (param === 'start') return [start];
+        if (param === 'end') return [end];
+        return [];
+      });
 
       component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
@@ -362,6 +378,71 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('link to chart', () => {
+    let wrapper;
+    const currentDashboard = 'TEST_DASHBOARD';
+    localVue.use(GlToast);
+    const link = () => wrapper.find('.js-chart-link');
+    const clipboardText = () => link().element.dataset.clipboardText;
+
+    beforeEach(done => {
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+
+      wrapper = shallowMount(DashboardComponent, {
+        localVue,
+        sync: false,
+        attachToDocument: true,
+        propsData: { ...propsData, hasMetrics: true, currentDashboard },
+        store,
+      });
+
+      setTimeout(done);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('adds a copy button to the dropdown', () => {
+      expect(link().text()).toContain('Generate link to chart');
+    });
+
+    it('contains a link to the dashboard', () => {
+      expect(clipboardText()).toContain(`dashboard=${currentDashboard}`);
+      expect(clipboardText()).toContain(`group=`);
+      expect(clipboardText()).toContain(`title=`);
+      expect(clipboardText()).toContain(`y_label=`);
+    });
+
+    it('undefined parameter is stripped', done => {
+      wrapper.setProps({ currentDashboard: undefined });
+
+      wrapper.vm.$nextTick(() => {
+        expect(clipboardText()).not.toContain(`dashboard=`);
+        expect(clipboardText()).toContain(`y_label=`);
+        done();
+      });
+    });
+
+    it('null parameter is stripped', done => {
+      wrapper.setProps({ currentDashboard: null });
+
+      wrapper.vm.$nextTick(() => {
+        expect(clipboardText()).not.toContain(`dashboard=`);
+        expect(clipboardText()).toContain(`y_label=`);
+        done();
+      });
+    });
+
+    it('creates a toast when clicked', () => {
+      spyOn(wrapper.vm.$toast, 'show').and.stub();
+
+      link().vm.$emit('click');
+
+      expect(wrapper.vm.$toast.show).toHaveBeenCalled();
+    });
+  });
+
   describe('when the window resizes', () => {
     beforeEach(() => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
@@ -472,4 +553,36 @@ describe('Dashboard', () => {
       });
     });
   });
+
+  describe('when downloading metrics data as CSV', () => {
+    beforeEach(() => {
+      component = new DashboardComponent({
+        propsData: {
+          ...propsData,
+        },
+        store,
+      });
+      store.commit(
+        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+        MonitoringMock.data,
+      );
+      [mockGraphData] = component.$store.state.monitoringDashboard.groups[0].metrics;
+    });
+
+    describe('csvText', () => {
+      it('converts metrics data from json to csv', () => {
+        const header = `timestamp,${mockGraphData.y_label}`;
+        const data = mockGraphData.queries[0].result[0].values;
+        const firstRow = `${data[0][0]},${data[0][1]}`;
+
+        expect(component.csvText(mockGraphData)).toMatch(`^${header}\r\n${firstRow}`);
+      });
+    });
+
+    describe('downloadCsv', () => {
+      it('produces a link with a Blob', () => {
+        expect(component.downloadCsv(mockGraphData)).toContain(`blob:`);
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 7bbb215475a..17e7314e214 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -1,5 +1,7 @@
 export const mockApiEndpoint = `${gl.TEST_HOST}/monitoring/mock`;
 
+export const mockProjectPath = '/frontend-fixtures/environments-project';
+
 export const metricsGroupsAPIResponse = {
   success: true,
   data: [
@@ -902,7 +904,7 @@ export const metricsDashboardResponse = {
           },
           {
             title: 'Memory Usage (Pod average)',
-            type: 'area-chart',
+            type: 'line-chart',
             y_label: 'Memory Used per Pod',
             weight: 2,
             metrics: [
@@ -935,3 +937,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/panel_type_spec.js b/spec/javascripts/monitoring/panel_type_spec.js
new file mode 100644
index 00000000000..a2366e74d43
--- /dev/null
+++ b/spec/javascripts/monitoring/panel_type_spec.js
@@ -0,0 +1,79 @@
+import { shallowMount } from '@vue/test-utils';
+import PanelType from '~/monitoring/components/panel_type.vue';
+import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
+import TimeSeriesChart from '~/monitoring/components/charts/time_series.vue';
+import { graphDataPrometheusQueryRange } from './mock_data';
+import { createStore } from '~/monitoring/stores';
+
+describe('Panel Type component', () => {
+  let store;
+  let panelType;
+  const dashboardWidth = 100;
+
+  describe('When no graphData is available', () => {
+    let glEmptyChart;
+    // Deep clone object before modifying
+    const graphDataNoResult = JSON.parse(JSON.stringify(graphDataPrometheusQueryRange));
+    graphDataNoResult.queries[0].result = [];
+
+    beforeEach(() => {
+      panelType = shallowMount(PanelType, {
+        propsData: {
+          clipboardText: 'dashboard_link',
+          dashboardWidth,
+          graphData: graphDataNoResult,
+        },
+      });
+    });
+
+    afterEach(() => {
+      panelType.destroy();
+    });
+
+    describe('Empty Chart component', () => {
+      beforeEach(() => {
+        glEmptyChart = panelType.find(EmptyChart);
+      });
+
+      it('is a Vue instance', () => {
+        expect(glEmptyChart.isVueInstance()).toBe(true);
+      });
+
+      it('it receives a graph title', () => {
+        const props = glEmptyChart.props();
+
+        expect(props.graphTitle).toBe(panelType.vm.graphData.title);
+      });
+    });
+  });
+
+  describe('when Graph data is available', () => {
+    const exampleText = 'example_text';
+
+    beforeEach(() => {
+      store = createStore();
+      panelType = shallowMount(PanelType, {
+        propsData: {
+          clipboardText: exampleText,
+          dashboardWidth,
+          graphData: graphDataPrometheusQueryRange,
+        },
+        store,
+      });
+    });
+
+    describe('Time Series Chart panel type', () => {
+      it('is rendered', () => {
+        expect(panelType.find(TimeSeriesChart).isVueInstance()).toBe(true);
+        expect(panelType.find(TimeSeriesChart).exists()).toBe(true);
+      });
+
+      it('sets clipboard text on the dropdown', () => {
+        const link = () => panelType.find('.js-chart-link');
+        const clipboardText = () => link().element.dataset.clipboardText;
+
+        expect(clipboardText()).toBe(exampleText);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/monitoring/store/actions_spec.js b/spec/javascripts/monitoring/store/actions_spec.js
index 677455275de..955a39e03a5 100644
--- a/spec/javascripts/monitoring/store/actions_spec.js
+++ b/spec/javascripts/monitoring/store/actions_spec.js
@@ -313,8 +313,8 @@ describe('Monitoring store actions', () => {
     it('commits prometheus query result', done => {
       const commit = jasmine.createSpy();
       const params = {
-        start: '1557216349.469',
-        end: '1557218149.469',
+        start: '2019-08-06T12:40:02.184Z',
+        end: '2019-08-06T20:40:02.184Z',
       };
       const metric = metricsDashboardResponse.dashboard.panel_groups[0].panels[0].metrics[0];
       const state = storeState();
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..e22e8cdc03d 100644
--- a/spec/javascripts/monitoring/utils_spec.js
+++ b/spec/javascripts/monitoring/utils_spec.js
@@ -1,29 +1,64 @@
-import { getTimeDiff } from '~/monitoring/utils';
+import { getTimeDiff, graphDataValidatorForValues } from '~/monitoring/utils';
 import { timeWindows } from '~/monitoring/constants';
+import { graphDataPrometheusQuery, graphDataPrometheusQueryRange } from './mock_data';
 
 describe('getTimeDiff', () => {
+  function secondsBetween({ start, end }) {
+    return (new Date(end) - new Date(start)) / 1000;
+  }
+
+  function minutesBetween(timeRange) {
+    return secondsBetween(timeRange) / 60;
+  }
+
+  function hoursBetween(timeRange) {
+    return minutesBetween(timeRange) / 60;
+  }
+
   it('defaults to an 8 hour (28800s) difference', () => {
     const params = getTimeDiff();
 
-    expect(params.end - params.start).toEqual(28800);
+    expect(hoursBetween(params)).toEqual(8);
   });
 
   it('accepts time window as an argument', () => {
-    const params = getTimeDiff(timeWindows.thirtyMinutes);
+    const params = getTimeDiff('thirtyMinutes');
 
-    expect(params.end - params.start).not.toEqual(28800);
+    expect(minutesBetween(params)).toEqual(30);
   });
 
   it('returns a value for every defined time window', () => {
     const nonDefaultWindows = Object.keys(timeWindows).filter(window => window !== 'eightHours');
 
-    nonDefaultWindows.forEach(window => {
-      const params = getTimeDiff(timeWindows[window]);
-      const diff = params.end - params.start;
+    nonDefaultWindows.forEach(timeWindow => {
+      const params = getTimeDiff(timeWindow);
 
-      // Ensure we're not returning the default, 28800 (the # of seconds in 8 hrs)
-      expect(diff).not.toEqual(28800);
-      expect(typeof diff).toEqual('number');
+      // Ensure we're not returning the default
+      expect(hoursBetween(params)).not.toEqual(8);
     });
   });
 });
+
+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);
+  });
+});