Remove d3 metrics graph

9 files changed, 0 insertions, 596 deletions

diff --git a/spec/javascripts/monitoring/graph/axis_spec.js b/spec/javascripts/monitoring/graph/axis_spec.js
deleted file mode 100644
index c7adba00637..00000000000
--- a/spec/javascripts/monitoring/graph/axis_spec.js
+++ /dev/null
@@ -1,65 +0,0 @@
-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',
-  unitOfDisplay: 'MB',
-};
-
-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('Values (MB)');
-  });
-});
diff --git a/spec/javascripts/monitoring/graph/deployment_spec.js b/spec/javascripts/monitoring/graph/deployment_spec.js
deleted file mode 100644
index 7d39c4345d2..00000000000
--- a/spec/javascripts/monitoring/graph/deployment_spec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import Vue from 'vue';
-import GraphDeployment from '~/monitoring/components/graph/deployment.vue';
-import { deploymentData } from '../mock_data';
-
-const createComponent = propsData => {
-  const Component = Vue.extend(GraphDeployment);
-
-  return new Component({
-    propsData,
-  }).$mount();
-};
-
-describe('MonitoringDeployment', () => {
-  describe('Methods', () => {
-    it('should contain a hidden gradient', () => {
-      const component = createComponent({
-        showDeployInfo: true,
-        deploymentData,
-        graphHeight: 300,
-        graphWidth: 440,
-        graphHeightOffset: 120,
-      });
-
-      expect(component.$el.querySelector('#shadow-gradient')).not.toBeNull();
-    });
-
-    it('transformDeploymentGroup translates an available deployment', () => {
-      const component = createComponent({
-        showDeployInfo: false,
-        deploymentData,
-        graphHeight: 300,
-        graphWidth: 440,
-        graphHeightOffset: 120,
-      });
-
-      expect(component.transformDeploymentGroup({ xPos: 16 })).toContain('translate(11, 20)');
-    });
-
-    describe('Computed props', () => {
-      it('calculatedHeight', () => {
-        const component = createComponent({
-          showDeployInfo: true,
-          deploymentData,
-          graphHeight: 300,
-          graphWidth: 440,
-          graphHeightOffset: 120,
-        });
-
-        expect(component.calculatedHeight).toEqual(180);
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/monitoring/graph/flag_spec.js b/spec/javascripts/monitoring/graph/flag_spec.js
deleted file mode 100644
index 038bfffd44f..00000000000
--- a/spec/javascripts/monitoring/graph/flag_spec.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import Vue from 'vue';
-import GraphFlag from '~/monitoring/components/graph/flag.vue';
-import { deploymentData } from '../mock_data';
-
-const createComponent = propsData => {
-  const Component = Vue.extend(GraphFlag);
-
-  return new Component({
-    propsData,
-  }).$mount();
-};
-
-const defaultValuesComponent = {
-  currentXCoordinate: 200,
-  currentYCoordinate: 100,
-  currentFlagPosition: 100,
-  currentData: {
-    time: new Date('2017-06-04T18:17:33.501Z'),
-    value: '1.49609375',
-  },
-  graphHeight: 300,
-  graphHeightOffset: 120,
-  showFlagContent: true,
-  realPixelRatio: 1,
-  timeSeries: [
-    {
-      values: [
-        {
-          time: new Date('2017-06-04T18:17:33.501Z'),
-          value: '1.49609375',
-        },
-      ],
-    },
-  ],
-  unitOfDisplay: 'ms',
-  currentDataIndex: 0,
-  legendTitle: 'Average',
-  currentCoordinates: {},
-};
-
-const deploymentFlagData = {
-  ...deploymentData[0],
-  ref: deploymentData[0].ref.name,
-  xPos: 10,
-  time: new Date(deploymentData[0].created_at),
-};
-
-describe('GraphFlag', () => {
-  let component;
-
-  it('has a line at the currentXCoordinate', () => {
-    component = createComponent(defaultValuesComponent);
-
-    expect(component.$el.style.left).toEqual(`${70 + component.currentXCoordinate}px`);
-  });
-
-  describe('Deployment flag', () => {
-    it('shows a deployment flag when deployment data provided', () => {
-      const deploymentFlagComponent = createComponent({
-        ...defaultValuesComponent,
-        deploymentFlagData,
-      });
-
-      expect(deploymentFlagComponent.$el.querySelector('.popover-title')).toContainText('Deployed');
-    });
-
-    it('contains the ref when a tag is available', () => {
-      const deploymentFlagComponent = createComponent({
-        ...defaultValuesComponent,
-        deploymentFlagData: {
-          ...deploymentFlagData,
-          sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
-          tag: true,
-          ref: '1.0',
-        },
-      });
-
-      expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).toContainText(
-        'f5bcd1d9',
-      );
-
-      expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).toContainText(
-        '1.0',
-      );
-    });
-
-    it('does not contain the ref when a tag is unavailable', () => {
-      const deploymentFlagComponent = createComponent({
-        ...defaultValuesComponent,
-        deploymentFlagData: {
-          ...deploymentFlagData,
-          sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
-          tag: false,
-          ref: '1.0',
-        },
-      });
-
-      expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).toContainText(
-        'f5bcd1d9',
-      );
-
-      expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).not.toContainText(
-        '1.0',
-      );
-    });
-  });
-
-  describe('Computed props', () => {
-    beforeEach(() => {
-      component = createComponent(defaultValuesComponent);
-    });
-
-    it('formatTime', () => {
-      expect(component.formatTime).toMatch(/\d:17PM/);
-    });
-
-    it('formatDate', () => {
-      expect(component.formatDate).toEqual('04 Jun 2017, ');
-    });
-
-    it('cursorStyle', () => {
-      expect(component.cursorStyle).toEqual({
-        top: '20px',
-        left: '270px',
-        height: '180px',
-      });
-    });
-
-    it('flagOrientation', () => {
-      expect(component.flagOrientation).toEqual('left');
-    });
-  });
-});
diff --git a/spec/javascripts/monitoring/graph/legend_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js
deleted file mode 100644
index 9209e77dcf4..00000000000
--- a/spec/javascripts/monitoring/graph/legend_spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import Vue from 'vue';
-import GraphLegend from '~/monitoring/components/graph/legend.vue';
-import createTimeSeries from '~/monitoring/utils/multiple_time_series';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from '../mock_data';
-
-const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
-
-const defaultValuesComponent = {};
-
-const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 500, 300, 120);
-
-defaultValuesComponent.timeSeries = timeSeries;
-
-describe('Legend Component', () => {
-  let vm;
-  let Legend;
-
-  beforeEach(() => {
-    Legend = Vue.extend(GraphLegend);
-  });
-
-  describe('View', () => {
-    beforeEach(() => {
-      vm = mountComponent(Legend, {
-        legendTitle: 'legend',
-        timeSeries,
-        currentDataIndex: 0,
-        unitOfDisplay: 'Req/Sec',
-      });
-    });
-
-    it('should render the usage, title and time with multiple time series', () => {
-      const titles = vm.$el.querySelectorAll('.legend-metric-title');
-
-      expect(titles[0].textContent.indexOf('1xx')).not.toEqual(-1);
-      expect(titles[1].textContent.indexOf('2xx')).not.toEqual(-1);
-    });
-
-    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/track_info_spec.js b/spec/javascripts/monitoring/graph/track_info_spec.js
deleted file mode 100644
index ce93ae28842..00000000000
--- a/spec/javascripts/monitoring/graph/track_info_spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import Vue from 'vue';
-import TrackInfo from '~/monitoring/components/graph/track_info.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import createTimeSeries from '~/monitoring/utils/multiple_time_series';
-import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from '../mock_data';
-
-const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
-const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 500, 300, 120);
-
-describe('TrackInfo component', () => {
-  let vm;
-  let Component;
-
-  beforeEach(() => {
-    Component = Vue.extend(TrackInfo);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('Computed props', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, { track: timeSeries[0] });
-    });
-
-    it('summaryMetrics', () => {
-      expect(vm.summaryMetrics).toEqual('Avg: 0.000 · Max: 0.000');
-    });
-  });
-
-  describe('Rendered output', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, { track: timeSeries[0] });
-    });
-
-    it('contains metric tag and the summary metrics', () => {
-      const metricTag = vm.$el.querySelector('strong');
-
-      expect(metricTag.textContent.trim()).toEqual(vm.track.metricTag);
-      expect(vm.$el.textContent).toContain('Avg: 0.000 · Max: 0.000');
-    });
-  });
-});
diff --git a/spec/javascripts/monitoring/graph/track_line_spec.js b/spec/javascripts/monitoring/graph/track_line_spec.js
deleted file mode 100644
index 2a4f89ddf6e..00000000000
--- a/spec/javascripts/monitoring/graph/track_line_spec.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import Vue from 'vue';
-import TrackLine from '~/monitoring/components/graph/track_line.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import createTimeSeries from '~/monitoring/utils/multiple_time_series';
-import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from '../mock_data';
-
-const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
-const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 500, 300, 120);
-
-describe('TrackLine component', () => {
-  let vm;
-  let Component;
-
-  beforeEach(() => {
-    Component = Vue.extend(TrackLine);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('Computed props', () => {
-    it('stylizedLine for dashed lineStyles', () => {
-      vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dashed' } });
-
-      expect(vm.stylizedLine).toEqual('6, 3');
-    });
-
-    it('stylizedLine for dotted lineStyles', () => {
-      vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dotted' } });
-
-      expect(vm.stylizedLine).toEqual('3, 3');
-    });
-  });
-
-  describe('Rendered output', () => {
-    it('has an svg with a line', () => {
-      vm = mountComponent(Component, { track: { ...timeSeries[0] } });
-      const svgEl = vm.$el.querySelector('svg');
-      const lineEl = vm.$el.querySelector('svg line');
-
-      expect(svgEl.getAttribute('width')).toEqual('16');
-      expect(svgEl.getAttribute('height')).toEqual('8');
-
-      expect(lineEl.getAttribute('stroke-width')).toEqual('4');
-      expect(lineEl.getAttribute('x1')).toEqual('0');
-      expect(lineEl.getAttribute('x2')).toEqual('16');
-      expect(lineEl.getAttribute('y1')).toEqual('4');
-      expect(lineEl.getAttribute('y2')).toEqual('4');
-    });
-  });
-});
diff --git a/spec/javascripts/monitoring/graph_path_spec.js b/spec/javascripts/monitoring/graph_path_spec.js
deleted file mode 100644
index fd167b83d51..00000000000
--- a/spec/javascripts/monitoring/graph_path_spec.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import Vue from 'vue';
-import GraphPath from '~/monitoring/components/graph/path.vue';
-import createTimeSeries from '~/monitoring/utils/multiple_time_series';
-import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data';
-
-const createComponent = propsData => {
-  const Component = Vue.extend(GraphPath);
-
-  return new Component({
-    propsData,
-  }).$mount();
-};
-
-const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
-
-const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 428, 272, 120);
-const firstTimeSeries = timeSeries[0];
-
-describe('Monitoring Paths', () => {
-  it('renders two paths to represent a line and the area underneath it', () => {
-    const component = createComponent({
-      generatedLinePath: firstTimeSeries.linePath,
-      generatedAreaPath: firstTimeSeries.areaPath,
-      lineColor: firstTimeSeries.lineColor,
-      areaColor: firstTimeSeries.areaColor,
-      showDot: false,
-    });
-    const metricArea = component.$el.querySelector('.metric-area');
-    const metricLine = component.$el.querySelector('.metric-line');
-
-    expect(metricArea.getAttribute('fill')).toBe('#8fbce8');
-    expect(metricArea.getAttribute('d')).toBe(firstTimeSeries.areaPath);
-    expect(metricLine.getAttribute('stroke')).toBe('#1f78d1');
-    expect(metricLine.getAttribute('d')).toBe(firstTimeSeries.linePath);
-  });
-
-  describe('Computed properties', () => {
-    it('strokeDashArray', () => {
-      const component = createComponent({
-        generatedLinePath: firstTimeSeries.linePath,
-        generatedAreaPath: firstTimeSeries.areaPath,
-        lineColor: firstTimeSeries.lineColor,
-        areaColor: firstTimeSeries.areaColor,
-        showDot: false,
-      });
-
-      component.lineStyle = 'dashed';
-
-      expect(component.strokeDashArray).toBe('3, 1');
-
-      component.lineStyle = 'dotted';
-
-      expect(component.strokeDashArray).toBe('1, 1');
-    });
-  });
-});
diff --git a/spec/javascripts/monitoring/graph_spec.js b/spec/javascripts/monitoring/graph_spec.js
deleted file mode 100644
index 59d6d4f3a7f..00000000000
--- a/spec/javascripts/monitoring/graph_spec.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import Vue from 'vue';
-import Graph from '~/monitoring/components/graph.vue';
-import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
-import {
-  deploymentData,
-  convertDatesMultipleSeries,
-  singleRowMetricsMultipleSeries,
-  queryWithoutData,
-} 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 Component = Vue.extend(Graph);
-
-  return new Component({
-    propsData,
-  }).$mount();
-};
-
-const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
-
-describe('Graph', () => {
-  beforeEach(() => {
-    spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
-  });
-
-  it('has a title', () => {
-    const component = createComponent({
-      graphData: convertedMetrics[1],
-      updateAspectRatio: false,
-      deploymentData,
-      tagsPath,
-      projectPath,
-    });
-
-    expect(component.$el.querySelector('.prometheus-graph-title').innerText.trim()).toBe(
-      component.graphData.title,
-    );
-  });
-
-  describe('Computed props', () => {
-    it('axisTransform translates an element Y position depending of its height', () => {
-      const component = createComponent({
-        graphData: convertedMetrics[1],
-        updateAspectRatio: false,
-        deploymentData,
-        tagsPath,
-        projectPath,
-      });
-
-      const transformedHeight = `${component.graphHeight - 100}`;
-
-      expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual(-1);
-    });
-
-    it('outerViewBox gets a width and height property based on the DOM size of the element', () => {
-      const component = createComponent({
-        graphData: convertedMetrics[1],
-        updateAspectRatio: false,
-        deploymentData,
-        tagsPath,
-        projectPath,
-      });
-
-      const viewBoxArray = component.outerViewBox.split(' ');
-
-      expect(typeof component.outerViewBox).toEqual('string');
-      expect(viewBoxArray[2]).toEqual(component.graphWidth.toString());
-      expect(viewBoxArray[3]).toEqual((component.graphHeight - 50).toString());
-    });
-  });
-
-  it('has a title for the y-axis and the chart legend that comes from the backend', () => {
-    const component = createComponent({
-      graphData: convertedMetrics[1],
-      updateAspectRatio: false,
-      deploymentData,
-      tagsPath,
-      projectPath,
-    });
-
-    expect(component.yAxisLabel).toEqual(component.graphData.y_label);
-    expect(component.legendTitle).toEqual(component.graphData.queries[0].label);
-  });
-
-  it('sets the currentData object based on the hovered data index', () => {
-    const component = createComponent({
-      graphData: convertedMetrics[1],
-      updateAspectRatio: false,
-      deploymentData,
-      graphIdentifier: 0,
-      hoverData: {
-        hoveredDate: new Date('Sun Aug 27 2017 06:11:51 GMT-0500 (CDT)'),
-        currentDeployXPos: null,
-      },
-      tagsPath,
-      projectPath,
-    });
-
-    // simulate moving mouse over data series
-    component.seriesUnderMouse = component.timeSeries;
-
-    component.positionFlag();
-
-    expect(component.currentData).toBe(component.timeSeries[0].values[10]);
-  });
-
-  describe('Without data to display', () => {
-    it('shows a "no data to display" empty state on a graph', done => {
-      const component = createComponent({
-        graphData: queryWithoutData,
-        deploymentData,
-        tagsPath,
-        projectPath,
-      });
-
-      Vue.nextTick(() => {
-        expect(
-          component.$el.querySelector('.js-no-data-to-display text').textContent.trim(),
-        ).toEqual('No data to display');
-
-        done();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js
deleted file mode 100644
index 8937b7d9680..00000000000
--- a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import createTimeSeries from '~/monitoring/utils/multiple_time_series';
-import { convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from '../mock_data';
-
-const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
-const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 428, 272, 120);
-const firstTimeSeries = timeSeries[0];
-
-describe('Multiple time series', () => {
-  it('createTimeSeries returned array contains an object for each element', () => {
-    expect(typeof firstTimeSeries.linePath).toEqual('string');
-    expect(typeof firstTimeSeries.areaPath).toEqual('string');
-    expect(typeof firstTimeSeries.timeSeriesScaleX).toEqual('function');
-    expect(typeof firstTimeSeries.areaColor).toEqual('string');
-    expect(typeof firstTimeSeries.lineColor).toEqual('string');
-    expect(firstTimeSeries.values instanceof Array).toEqual(true);
-  });
-
-  it('createTimeSeries returns an array', () => {
-    expect(timeSeries instanceof Array).toEqual(true);
-    expect(timeSeries.length).toEqual(2);
-  });
-});