Add summary statistics prometheus dashboard

3 files changed, 145 insertions, 87 deletions

diff --git a/spec/javascripts/monitoring/graph/axis_spec.js b/spec/javascripts/monitoring/graph/axis_spec.js
new file mode 100644
index 00000000000..a251a72cfcf
--- /dev/null
+++ b/spec/javascripts/monitoring/graph/axis_spec.js
@@ -0,0 +1,70 @@
+import Vue from 'vue';
+import GraphAxis from '~/monitoring/components/graph/axis.vue';
+import measurements from '~/monitoring/utils/measurements';
+
+const createComponent = propsData => {
+  const Component = Vue.extend(GraphAxis);
+
+  return new Component({
+    propsData,
+  }).$mount();
+};
+
+const defaultValuesComponent = {
+  graphWidth: 500,
+  graphHeight: 300,
+  graphHeightOffset: 120,
+  margin: measurements.large.margin,
+  measurements: measurements.large,
+  yAxisLabel: 'Values',
+};
+
+function getTextFromNode(component, selector) {
+  return component.$el.querySelector(selector).firstChild.nodeValue.trim();
+}
+
+describe('Axis', () => {
+  describe('Computed props', () => {
+    it('textTransform', () => {
+      const component = createComponent(defaultValuesComponent);
+
+      expect(component.textTransform).toContain(
+        'translate(15, 120) rotate(-90)',
+      );
+    });
+
+    it('xPosition', () => {
+      const component = createComponent(defaultValuesComponent);
+
+      expect(component.xPosition).toEqual(180);
+    });
+
+    it('yPosition', () => {
+      const component = createComponent(defaultValuesComponent);
+
+      expect(component.yPosition).toEqual(240);
+    });
+
+    it('rectTransform', () => {
+      const component = createComponent(defaultValuesComponent);
+
+      expect(component.rectTransform).toContain(
+        'translate(0, 120) rotate(-90)',
+      );
+    });
+  });
+
+  it('has 2 rect-axis-text rect svg elements', () => {
+    const component = createComponent(defaultValuesComponent);
+
+    expect(component.$el.querySelectorAll('.rect-axis-text').length).toEqual(2);
+  });
+
+  it('contains text to signal the usage, title and time with multiple time series', () => {
+    const component = createComponent(defaultValuesComponent);
+
+    expect(getTextFromNode(component, '.y-label-text')).toEqual(
+      component.yAxisLabel,
+    );
+  });
+});
diff --git a/spec/javascripts/monitoring/graph/legend_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js
index 145c8db28d5..6c085ebba89 100644
--- a/spec/javascripts/monitoring/graph/legend_spec.js
+++ b/spec/javascripts/monitoring/graph/legend_spec.js
@@ -1,106 +1,85 @@
 import Vue from 'vue';
 import GraphLegend from '~/monitoring/components/graph/legend.vue';
-import measurements from '~/monitoring/utils/measurements';
 import createTimeSeries from '~/monitoring/utils/multiple_time_series';
-import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from '../mock_data';
-
-const createComponent = (propsData) => {
-  const Component = Vue.extend(GraphLegend);
-
-  return new Component({
-    propsData,
-  }).$mount();
-};
-
-const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
-
-const defaultValuesComponent = {
-  graphWidth: 500,
-  graphHeight: 300,
-  graphHeightOffset: 120,
-  margin: measurements.large.margin,
-  measurements: measurements.large,
-  areaColorRgb: '#f0f0f0',
-  legendTitle: 'Title',
-  yAxisLabel: 'Values',
-  metricUsage: 'Value',
-  unitOfDisplay: 'Req/Sec',
-  currentDataIndex: 0,
-};
-
-const timeSeries = createTimeSeries(convertedMetrics[0].queries,
-  defaultValuesComponent.graphWidth, defaultValuesComponent.graphHeight,
-  defaultValuesComponent.graphHeightOffset);
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import {
+  singleRowMetricsMultipleSeries,
+  convertDatesMultipleSeries,
+} from '../mock_data';
 
-defaultValuesComponent.timeSeries = timeSeries;
-
-function getTextFromNode(component, selector) {
-  return component.$el.querySelector(selector).firstChild.nodeValue.trim();
-}
+const convertedMetrics = convertDatesMultipleSeries(
+  singleRowMetricsMultipleSeries,
+);
 
-describe('GraphLegend', () => {
-  describe('Computed props', () => {
-    it('textTransform', () => {
-      const component = createComponent(defaultValuesComponent);
+const defaultValuesComponent = {};
 
-      expect(component.textTransform).toContain('translate(15, 120) rotate(-90)');
-    });
+const timeSeries = createTimeSeries(convertedMetrics[0].queries, 500, 300, 120);
 
-    it('xPosition', () => {
-      const component = createComponent(defaultValuesComponent);
+defaultValuesComponent.timeSeries = timeSeries;
 
-      expect(component.xPosition).toEqual(180);
-    });
+describe('Legend Component', () => {
+  let vm;
+  let Legend;
 
-    it('yPosition', () => {
-      const component = createComponent(defaultValuesComponent);
+  beforeEach(() => {
+    Legend = Vue.extend(GraphLegend);
+  });
 
-      expect(component.yPosition).toEqual(240);
+  describe('Methods', () => {
+    beforeEach(() => {
+      vm = mountComponent(Legend, {
+        legendTitle: 'legend',
+        timeSeries,
+        currentDataIndex: 0,
+        unitOfDisplay: 'Req/Sec',
+      });
     });
 
-    it('rectTransform', () => {
-      const component = createComponent(defaultValuesComponent);
+    it('formatMetricUsage should contain the unit of display and the current value selected via "currentDataIndex"', () => {
+      const formattedMetricUsage = vm.formatMetricUsage(timeSeries[0]);
+      const valueFromSeries = timeSeries[0].values[vm.currentDataIndex].value;
 
-      expect(component.rectTransform).toContain('translate(0, 120) rotate(-90)');
+      expect(formattedMetricUsage.indexOf(vm.unitOfDisplay)).not.toEqual(-1);
+      expect(formattedMetricUsage.indexOf(valueFromSeries)).not.toEqual(-1);
     });
-  });
 
-  describe('methods', () => {
-    it('translateLegendGroup should only change Y direction', () => {
-      const component = createComponent(defaultValuesComponent);
+    it('strokeDashArray', () => {
+      const dashedArray = vm.strokeDashArray('dashed');
+      const dottedArray = vm.strokeDashArray('dotted');
 
-      const translatedCoordinate = component.translateLegendGroup(1);
-      expect(translatedCoordinate.indexOf('translate(0, ')).not.toEqual(-1);
+      expect(dashedArray).toEqual('6, 3');
+      expect(dottedArray).toEqual('3, 3');
     });
 
-    it('formatMetricUsage should contain the unit of display and the current value selected via "currentDataIndex"', () => {
-      const component = createComponent(defaultValuesComponent);
+    it('summaryMetrics gets the average and max of a series', () => {
+      const summary = vm.summaryMetrics(timeSeries[0]);
 
-      const formattedMetricUsage = component.formatMetricUsage(timeSeries[0]);
-      const valueFromSeries = timeSeries[0].values[component.currentDataIndex].value;
-      expect(formattedMetricUsage.indexOf(component.unitOfDisplay)).not.toEqual(-1);
-      expect(formattedMetricUsage.indexOf(valueFromSeries)).not.toEqual(-1);
+      expect(summary.indexOf('Max')).not.toEqual(-1);
+      expect(summary.indexOf('Avg')).not.toEqual(-1);
     });
   });
 
-  it('has 2 rect-axis-text rect svg elements', () => {
-    const component = createComponent(defaultValuesComponent);
-
-    expect(component.$el.querySelectorAll('.rect-axis-text').length).toEqual(2);
-  });
-
-  it('contains text to signal the usage, title and time with multiple time series', () => {
-    const component = createComponent(defaultValuesComponent);
-    const titles = component.$el.querySelectorAll('.legend-metric-title');
+  describe('View', () => {
+    beforeEach(() => {
+      vm = mountComponent(Legend, {
+        legendTitle: 'legend',
+        timeSeries,
+        currentDataIndex: 0,
+        unitOfDisplay: 'Req/Sec',
+      });
+    });
 
-    expect(titles[0].textContent.indexOf('1xx')).not.toEqual(-1);
-    expect(titles[1].textContent.indexOf('2xx')).not.toEqual(-1);
-    expect(getTextFromNode(component, '.y-label-text')).toEqual(component.yAxisLabel);
-  });
+    it('should render the usage, title and time with multiple time series', () => {
+      const titles = vm.$el.querySelectorAll('.legend-metric-title');
 
-  it('should contain the same number of legend groups as the timeSeries length', () => {
-    const component = createComponent(defaultValuesComponent);
+      expect(titles[0].textContent.indexOf('1xx')).not.toEqual(-1);
+      expect(titles[1].textContent.indexOf('2xx')).not.toEqual(-1);
+    });
 
-    expect(component.$el.querySelectorAll('.legend-group').length).toEqual(component.timeSeries.length);
+    it('should container the same number of rows in the table as time series', () => {
+      expect(vm.$el.querySelectorAll('.prometheus-table tr').length).toEqual(
+        vm.timeSeries.length,
+      );
+    });
   });
 });
diff --git a/spec/javascripts/monitoring/graph_spec.js b/spec/javascripts/monitoring/graph_spec.js
index b1d69752bad..1213c80ba3a 100644
--- a/spec/javascripts/monitoring/graph_spec.js
+++ b/spec/javascripts/monitoring/graph_spec.js
@@ -2,11 +2,15 @@ import Vue from 'vue';
 import Graph from '~/monitoring/components/graph.vue';
 import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
 import eventHub from '~/monitoring/event_hub';
-import { deploymentData, convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from './mock_data';
+import {
+  deploymentData,
+  convertDatesMultipleSeries,
+  singleRowMetricsMultipleSeries,
+} from './mock_data';
 
 const tagsPath = 'http://test.host/frontend-fixtures/environments-project/tags';
 const projectPath = 'http://test.host/frontend-fixtures/environments-project';
-const createComponent = (propsData) => {
+const createComponent = propsData => {
   const Component = Vue.extend(Graph);
 
   return new Component({
@@ -14,7 +18,9 @@ const createComponent = (propsData) => {
   }).$mount();
 };
 
-const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
+const convertedMetrics = convertDatesMultipleSeries(
+  singleRowMetricsMultipleSeries,
+);
 
 describe('Graph', () => {
   beforeEach(() => {
@@ -31,7 +37,9 @@ describe('Graph', () => {
       projectPath,
     });
 
-    expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.graphData.title);
+    expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(
+      component.graphData.title,
+    );
   });
 
   describe('Computed props', () => {
@@ -46,8 +54,9 @@ describe('Graph', () => {
       });
 
       const transformedHeight = `${component.graphHeight - 100}`;
-      expect(component.axisTransform.indexOf(transformedHeight))
-        .not.toEqual(-1);
+      expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual(
+        -1,
+      );
     });
 
     it('outerViewBox gets a width and height property based on the DOM size of the element', () => {
@@ -63,11 +72,11 @@ describe('Graph', () => {
       const viewBoxArray = component.outerViewBox.split(' ');
       expect(typeof component.outerViewBox).toEqual('string');
       expect(viewBoxArray[2]).toEqual(component.graphWidth.toString());
-      expect(viewBoxArray[3]).toEqual(component.graphHeight.toString());
+      expect(viewBoxArray[3]).toEqual((component.graphHeight - 50).toString());
     });
   });
 
-  it('sends an event to the eventhub when it has finished resizing', (done) => {
+  it('sends an event to the eventhub when it has finished resizing', done => {
     const component = createComponent({
       graphData: convertedMetrics[1],
       classType: 'col-md-6',