Merge branch 'adriel-remove-d3-metrics-graph' into 'master'

Remove d3 metrics graph

See merge request gitlab-org/gitlab-ce!24647

24 files changed, 2 insertions, 1868 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 973fc8e10c9..0b4bb9cc686 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -6,15 +6,12 @@ import Flash from '../../flash';
 import MonitoringService from '../services/monitoring_service';
 import MonitorAreaChart from './charts/area.vue';
 import GraphGroup from './graph_group.vue';
-import Graph from './graph.vue';
 import EmptyState from './empty_state.vue';
 import MonitoringStore from '../stores/monitoring_store';
-import eventHub from '../event_hub';
 
 export default {
   components: {
     MonitorAreaChart,
-    Graph,
     GraphGroup,
     EmptyState,
     Icon,
@@ -25,21 +22,11 @@ export default {
       required: false,
       default: true,
     },
-    showLegend: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     showPanels: {
       type: Boolean,
       required: false,
       default: true,
     },
-    forceSmallGraph: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     documentationPath: {
       type: String,
       required: true,
@@ -99,14 +86,10 @@ export default {
       store: new MonitoringStore(),
       state: 'gettingStarted',
       showEmptyState: true,
-      hoverData: {},
       elWidth: 0,
     };
   },
   computed: {
-    graphComponent() {
-      return gon.features && gon.features.areaChart ? MonitorAreaChart : Graph;
-    },
     forceRedraw() {
       return this.elWidth;
     },
@@ -122,10 +105,8 @@ export default {
       childList: false,
       subtree: false,
     };
-    eventHub.$on('hoverChanged', this.hoverChanged);
   },
   beforeDestroy() {
-    eventHub.$off('hoverChanged', this.hoverChanged);
     window.removeEventListener('resize', this.resizeThrottled, false);
     this.sidebarMutationObserver.disconnect();
   },
@@ -176,9 +157,6 @@ export default {
     resize() {
       this.elWidth = this.$el.clientWidth;
     },
-    hoverChanged(data) {
-      this.hoverData = data;
-    },
   },
 };
 </script>
@@ -215,23 +193,13 @@ export default {
       :name="groupData.group"
       :show-panels="showPanels"
     >
-      <component
-        :is="graphComponent"
+      <monitor-area-chart
         v-for="(graphData, graphIndex) in groupData.metrics"
         :key="graphIndex"
         :graph-data="graphData"
-        :hover-data="hoverData"
-        :deployment-data="store.deploymentData"
-        :project-path="projectPath"
-        :tags-path="tagsPath"
-        :show-legend="showLegend"
-        :small-graph="forceSmallGraph"
         :alert-data="getGraphAlerts(graphData.id)"
         group-id="monitor-area-chart"
-      >
-        <!-- EE content -->
-        {{ null }}
-      </component>
+      />
     </graph-group>
   </div>
   <empty-state
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
deleted file mode 100644
index 309b73f5a4d..00000000000
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ /dev/null
@@ -1,329 +0,0 @@
-<script>
-import { scaleLinear, scaleTime } from 'd3-scale';
-import { axisLeft, axisBottom } from 'd3-axis';
-import _ from 'underscore';
-import { max, extent } from 'd3-array';
-import { select } from 'd3-selection';
-import GraphAxis from './graph/axis.vue';
-import GraphLegend from './graph/legend.vue';
-import GraphFlag from './graph/flag.vue';
-import GraphDeployment from './graph/deployment.vue';
-import GraphPath from './graph/path.vue';
-import MonitoringMixin from '../mixins/monitoring_mixins';
-import eventHub from '../event_hub';
-import measurements from '../utils/measurements';
-import { bisectDate, timeScaleFormat } from '../utils/date_time_formatters';
-import createTimeSeries from '../utils/multiple_time_series';
-import bp from '../../breakpoints';
-
-const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select };
-
-export default {
-  components: {
-    GraphAxis,
-    GraphFlag,
-    GraphDeployment,
-    GraphPath,
-    GraphLegend,
-  },
-  mixins: [MonitoringMixin],
-  props: {
-    graphData: {
-      type: Object,
-      required: true,
-    },
-    deploymentData: {
-      type: Array,
-      required: true,
-    },
-    hoverData: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    projectPath: {
-      type: String,
-      required: true,
-    },
-    tagsPath: {
-      type: String,
-      required: true,
-    },
-    showLegend: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    smallGraph: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      baseGraphHeight: 450,
-      baseGraphWidth: 600,
-      graphHeight: 450,
-      graphWidth: 600,
-      graphHeightOffset: 120,
-      margin: {},
-      unitOfDisplay: '',
-      yAxisLabel: '',
-      legendTitle: '',
-      reducedDeploymentData: [],
-      measurements: measurements.large,
-      currentData: {
-        time: new Date(),
-        value: 0,
-      },
-      currentXCoordinate: 0,
-      currentCoordinates: {},
-      showFlag: false,
-      showFlagContent: false,
-      timeSeries: [],
-      graphDrawData: {},
-      realPixelRatio: 1,
-      seriesUnderMouse: [],
-    };
-  },
-  computed: {
-    outerViewBox() {
-      return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
-    },
-    innerViewBox() {
-      return `0 0 ${this.baseGraphWidth - 150} ${this.baseGraphHeight}`;
-    },
-    axisTransform() {
-      return `translate(70, ${this.graphHeight - 100})`;
-    },
-    paddingBottomRootSvg() {
-      return {
-        paddingBottom: `${Math.ceil(this.baseGraphHeight * 100) / this.baseGraphWidth || 0}%`,
-      };
-    },
-    deploymentFlagData() {
-      return this.reducedDeploymentData.find(deployment => deployment.showDeploymentFlag);
-    },
-    shouldRenderData() {
-      return this.graphData.queries.filter(s => s.result.length > 0).length > 0;
-    },
-  },
-  watch: {
-    hoverData() {
-      this.positionFlag();
-    },
-  },
-  mounted() {
-    this.draw();
-  },
-  methods: {
-    showDot(path) {
-      return this.showFlagContent && this.seriesUnderMouse.includes(path);
-    },
-    draw() {
-      const breakpointSize = bp.getBreakpointSize();
-      const svgWidth = this.$refs.baseSvg.getBoundingClientRect().width;
-
-      this.margin = measurements.large.margin;
-
-      if (this.smallGraph || breakpointSize === 'xs' || breakpointSize === 'sm') {
-        this.graphHeight = 300;
-        this.margin = measurements.small.margin;
-        this.measurements = measurements.small;
-      }
-
-      this.yAxisLabel = this.graphData.y_label || 'Values';
-      this.graphWidth = svgWidth - this.margin.left - this.margin.right;
-      this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
-      this.baseGraphHeight = this.graphHeight - 50;
-      this.baseGraphWidth = this.graphWidth;
-
-      // pixel offsets inside the svg and outside are not 1:1
-      this.realPixelRatio = svgWidth / this.baseGraphWidth;
-
-      // set the legends on the axes
-      const [query] = this.graphData.queries;
-      this.legendTitle = query ? query.label : 'Average';
-      this.unitOfDisplay = query ? query.unit : '';
-
-      if (this.shouldRenderData) {
-        this.renderAxesPaths();
-        this.formatDeployments();
-      }
-    },
-    handleMouseOverGraph(e) {
-      let point = this.$refs.graphData.createSVGPoint();
-      point.x = e.clientX;
-      point.y = e.clientY;
-      point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
-      point.x += 7;
-
-      this.seriesUnderMouse = this.timeSeries.filter(series => {
-        const mouseX = series.timeSeriesScaleX.invert(point.x);
-        let minDistance = Infinity;
-
-        const closestTickMark = Object.keys(this.allXAxisValues).reduce((closest, x) => {
-          const distance = Math.abs(Number(new Date(x)) - Number(mouseX));
-          if (distance < minDistance) {
-            minDistance = distance;
-            return x;
-          }
-          return closest;
-        });
-
-        return series.values.find(v => v.time.toString() === closestTickMark);
-      });
-
-      const firstTimeSeries = this.seriesUnderMouse[0];
-      const timeValueOverlay = firstTimeSeries.timeSeriesScaleX.invert(point.x);
-      const overlayIndex = bisectDate(firstTimeSeries.values, timeValueOverlay, 1);
-      const d0 = firstTimeSeries.values[overlayIndex - 1];
-      const d1 = firstTimeSeries.values[overlayIndex];
-      if (d0 === undefined || d1 === undefined) return;
-      const evalTime = timeValueOverlay - d0[0] > d1[0] - timeValueOverlay;
-      const hoveredDataIndex = evalTime ? overlayIndex : overlayIndex - 1;
-      const hoveredDate = firstTimeSeries.values[hoveredDataIndex].time;
-      const currentDeployXPos = this.mouseOverDeployInfo(point.x);
-
-      eventHub.$emit('hoverChanged', {
-        hoveredDate,
-        currentDeployXPos,
-      });
-    },
-    renderAxesPaths() {
-      ({ timeSeries: this.timeSeries, graphDrawData: this.graphDrawData } = createTimeSeries(
-        this.graphData.queries,
-        this.graphWidth,
-        this.graphHeight,
-        this.graphHeightOffset,
-      ));
-
-      if (_.findWhere(this.timeSeries, { renderCanary: true })) {
-        this.timeSeries = this.timeSeries.map(series => ({ ...series, renderCanary: true }));
-      }
-
-      const axisXScale = d3.scaleTime().range([0, this.graphWidth - 70]);
-      const axisYScale = d3.scaleLinear().range([this.graphHeight - this.graphHeightOffset, 0]);
-
-      const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []);
-      axisXScale.domain(d3.extent(allValues, d => d.time));
-      axisYScale.domain([0, d3.max(allValues.map(d => d.value))]);
-
-      this.allXAxisValues = this.timeSeries.reduce((obj, series) => {
-        const seriesKeys = {};
-        series.values.forEach(v => {
-          seriesKeys[v.time] = true;
-        });
-        return {
-          ...obj,
-          ...seriesKeys,
-        };
-      }, {});
-
-      const xAxis = d3
-        .axisBottom()
-        .scale(axisXScale)
-        .ticks(this.graphWidth / 120)
-        .tickFormat(timeScaleFormat);
-
-      const yAxis = d3
-        .axisLeft()
-        .scale(axisYScale)
-        .ticks(measurements.yTicks);
-
-      d3.select(this.$refs.baseSvg)
-        .select('.x-axis')
-        .call(xAxis);
-
-      const width = this.graphWidth;
-      d3.select(this.$refs.baseSvg)
-        .select('.y-axis')
-        .call(yAxis)
-        .selectAll('.tick')
-        .each(function createTickLines(d, i) {
-          if (i > 0) {
-            d3.select(this)
-              .select('line')
-              .attr('x2', width)
-              .attr('class', 'axis-tick');
-          } // Avoid adding the class to the first tick, to prevent coloring
-        }); // This will select all of the ticks once they're rendered
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="prometheus-graph"
-    @mouseover="showFlagContent = true"
-    @mouseleave="showFlagContent = false"
-  >
-    <div class="prometheus-graph-header">
-      <h5 class="prometheus-graph-title">{{ graphData.title }}</h5>
-      <div class="prometheus-graph-widgets"><slot></slot></div>
-    </div>
-    <div :style="paddingBottomRootSvg" class="prometheus-svg-container">
-      <svg ref="baseSvg" :viewBox="outerViewBox">
-        <g :transform="axisTransform" class="x-axis" />
-        <g class="y-axis" transform="translate(70, 20)" />
-        <graph-axis
-          :graph-width="graphWidth"
-          :graph-height="graphHeight"
-          :margin="margin"
-          :measurements="measurements"
-          :y-axis-label="yAxisLabel"
-          :unit-of-display="unitOfDisplay"
-        />
-        <svg v-if="shouldRenderData" ref="graphData" :viewBox="innerViewBox" class="graph-data">
-          <slot name="additionalSvgContent" :graphDrawData="graphDrawData" />
-          <graph-path
-            v-for="(path, index) in timeSeries"
-            :key="index"
-            :generated-line-path="path.linePath"
-            :generated-area-path="path.areaPath"
-            :line-style="path.lineStyle"
-            :line-color="path.lineColor"
-            :area-color="path.areaColor"
-            :current-coordinates="currentCoordinates[path.metricTag]"
-            :show-dot="showDot(path)"
-          />
-          <graph-deployment
-            :deployment-data="reducedDeploymentData"
-            :graph-height="graphHeight"
-            :graph-height-offset="graphHeightOffset"
-          />
-          <rect
-            ref="graphOverlay"
-            :width="graphWidth - 70"
-            :height="graphHeight - 100"
-            class="prometheus-graph-overlay"
-            transform="translate(-5, 20)"
-            @mousemove="handleMouseOverGraph($event)"
-          />
-        </svg>
-        <svg v-else :viewBox="innerViewBox" class="js-no-data-to-display">
-          <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">
-            {{ s__('Metrics|No data to display') }}
-          </text>
-        </svg>
-      </svg>
-      <graph-flag
-        v-if="shouldRenderData"
-        :real-pixel-ratio="realPixelRatio"
-        :current-x-coordinate="currentXCoordinate"
-        :current-data="currentData"
-        :graph-height="graphHeight"
-        :graph-height-offset="graphHeightOffset"
-        :show-flag-content="showFlagContent"
-        :time-series="seriesUnderMouse"
-        :unit-of-display="unitOfDisplay"
-        :legend-title="legendTitle"
-        :deployment-flag-data="deploymentFlagData"
-        :current-coordinates="currentCoordinates"
-      />
-    </div>
-    <graph-legend v-if="showLegend" :legend-title="legendTitle" :time-series="timeSeries" />
-  </div>
-</template>
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue
deleted file mode 100644
index 8f046857a20..00000000000
--- a/app/assets/javascripts/monitoring/components/graph/axis.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<script>
-import { convertToSentenceCase } from '~/lib/utils/text_utility';
-import { s__ } from '~/locale';
-
-export default {
-  props: {
-    graphWidth: {
-      type: Number,
-      required: true,
-    },
-    graphHeight: {
-      type: Number,
-      required: true,
-    },
-    margin: {
-      type: Object,
-      required: true,
-    },
-    measurements: {
-      type: Object,
-      required: true,
-    },
-    yAxisLabel: {
-      type: String,
-      required: true,
-    },
-    unitOfDisplay: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      yLabelWidth: 0,
-      yLabelHeight: 0,
-    };
-  },
-  computed: {
-    textTransform() {
-      const yCoordinate =
-        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 || 0;
-
-      return `translate(15, ${yCoordinate}) rotate(-90)`;
-    },
-
-    rectTransform() {
-      const yCoordinate =
-        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 +
-          this.yLabelWidth / 2 || 0;
-
-      return `translate(0, ${yCoordinate}) rotate(-90)`;
-    },
-
-    xPosition() {
-      return (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 - this.margin.right || 0;
-    },
-
-    yPosition() {
-      return this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset || 0;
-    },
-
-    yAxisLabelSentenceCase() {
-      return `${convertToSentenceCase(this.yAxisLabel)} (${this.unitOfDisplay})`;
-    },
-
-    timeString() {
-      return s__('PrometheusDashboard|Time');
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      const bbox = this.$refs.ylabel.getBBox();
-      this.yLabelWidth = bbox.width + 10; // Added some padding
-      this.yLabelHeight = bbox.height + 5;
-    });
-  },
-};
-</script>
-<template>
-  <g class="axis-label-container">
-    <line
-      :y1="yPosition"
-      :x2="graphWidth + 20"
-      :y2="yPosition"
-      class="label-x-axis-line"
-      stroke="#000000"
-      stroke-width="1"
-      x1="10"
-    />
-    <line
-      :x2="10"
-      :y2="yPosition"
-      class="label-y-axis-line"
-      stroke="#000000"
-      stroke-width="1"
-      x1="10"
-      y1="0"
-    />
-    <rect
-      :transform="rectTransform"
-      :width="yLabelWidth"
-      :height="yLabelHeight"
-      class="rect-axis-text"
-    />
-    <text
-      ref="ylabel"
-      :transform="textTransform"
-      class="label-axis-text y-label-text"
-      text-anchor="middle"
-    >
-      {{ yAxisLabelSentenceCase }}
-    </text>
-    <rect :x="xPosition + 60" :y="graphHeight - 80" class="rect-axis-text" width="35" height="50" />
-    <text :x="xPosition + 60" :y="yPosition" class="label-axis-text x-label-text" dy=".35em">
-      {{ timeString }}
-    </text>
-  </g>
-</template>
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
deleted file mode 100644
index bee9784692c..00000000000
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-export default {
-  props: {
-    deploymentData: {
-      type: Array,
-      required: true,
-    },
-    graphHeight: {
-      type: Number,
-      required: true,
-    },
-    graphHeightOffset: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    calculatedHeight() {
-      return this.graphHeight - this.graphHeightOffset;
-    },
-  },
-  methods: {
-    transformDeploymentGroup(deployment) {
-      return `translate(${Math.floor(deployment.xPos) - 5}, 20)`;
-    },
-  },
-};
-</script>
-<template>
-  <g class="deploy-info">
-    <g
-      v-for="(deployment, index) in deploymentData"
-      :key="index"
-      :transform="transformDeploymentGroup(deployment)"
-    >
-      <rect :height="calculatedHeight" x="0" y="0" width="3" fill="url(#shadow-gradient)" />
-      <line :y2="calculatedHeight" class="deployment-line" x1="0" y1="0" x2="0" stroke="#000" />
-    </g>
-    <svg height="0" width="0">
-      <defs>
-        <linearGradient id="shadow-gradient">
-          <stop offset="0%" stop-color="#000" stop-opacity="0.4" />
-          <stop offset="100%" stop-color="#000" stop-opacity="0" />
-        </linearGradient>
-      </defs>
-    </svg>
-  </g>
-</template>
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
deleted file mode 100644
index 9d6d1caef80..00000000000
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script>
-import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
-import { formatRelevantDigits } from '../../../lib/utils/number_utils';
-import Icon from '../../../vue_shared/components/icon.vue';
-import TrackLine from './track_line.vue';
-
-export default {
-  components: {
-    Icon,
-    TrackLine,
-  },
-  props: {
-    currentXCoordinate: {
-      type: Number,
-      required: true,
-    },
-    currentData: {
-      type: Object,
-      required: true,
-    },
-    deploymentFlagData: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    graphHeight: {
-      type: Number,
-      required: true,
-    },
-    graphHeightOffset: {
-      type: Number,
-      required: true,
-    },
-    realPixelRatio: {
-      type: Number,
-      required: true,
-    },
-    showFlagContent: {
-      type: Boolean,
-      required: true,
-    },
-    timeSeries: {
-      type: Array,
-      required: true,
-    },
-    unitOfDisplay: {
-      type: String,
-      required: true,
-    },
-    legendTitle: {
-      type: String,
-      required: true,
-    },
-    currentCoordinates: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    formatTime() {
-      return this.deploymentFlagData
-        ? timeFormat(this.deploymentFlagData.time)
-        : timeFormat(this.currentData.time);
-    },
-    formatDate() {
-      return this.deploymentFlagData
-        ? dateFormat(this.deploymentFlagData.time)
-        : dateFormat(this.currentData.time);
-    },
-    cursorStyle() {
-      const xCoordinate = this.deploymentFlagData
-        ? this.deploymentFlagData.xPos
-        : this.currentXCoordinate;
-
-      const offsetTop = 20 * this.realPixelRatio;
-      const offsetLeft = (70 + xCoordinate) * this.realPixelRatio;
-      const height = (this.graphHeight - this.graphHeightOffset) * this.realPixelRatio;
-
-      return {
-        top: `${offsetTop}px`,
-        left: `${offsetLeft}px`,
-        height: `${height}px`,
-      };
-    },
-    flagOrientation() {
-      if (this.currentXCoordinate * this.realPixelRatio > 120) {
-        return 'left';
-      }
-      return 'right';
-    },
-  },
-  methods: {
-    seriesMetricValue(seriesIndex, series) {
-      const indexFromCoordinates = this.currentCoordinates[series.metricTag]
-        ? this.currentCoordinates[series.metricTag].currentDataIndex
-        : 0;
-      const index = this.deploymentFlagData
-        ? this.deploymentFlagData.seriesIndex
-        : indexFromCoordinates;
-      const value = series.values[index] && series.values[index].value;
-      if (Number.isNaN(value)) {
-        return '-';
-      }
-      return `${formatRelevantDigits(value)}${this.unitOfDisplay}`;
-    },
-    seriesMetricLabel(index, series) {
-      if (this.timeSeries.length < 2) {
-        return this.legendTitle;
-      }
-      if (series.metricTag) {
-        return series.metricTag;
-      }
-      return `series ${index + 1}`;
-    },
-  },
-};
-</script>
-
-<template>
-  <div :style="cursorStyle" class="prometheus-graph-cursor">
-    <div v-if="showFlagContent" :class="flagOrientation" class="prometheus-graph-flag popover">
-      <div class="arrow-shadow"></div>
-      <div class="arrow"></div>
-      <div class="popover-title">
-        <h5 v-if="deploymentFlagData">Deployed</h5>
-        {{ formatDate }} <strong>{{ formatTime }}</strong>
-      </div>
-      <div v-if="deploymentFlagData" class="popover-content deploy-meta-content">
-        <div>
-          <icon :size="12" name="commit" />
-          <a :href="deploymentFlagData.commitUrl"> {{ deploymentFlagData.sha.slice(0, 8) }} </a>
-        </div>
-        <div v-if="deploymentFlagData.tag">
-          <icon :size="12" name="label" />
-          <a :href="deploymentFlagData.tagUrl"> {{ deploymentFlagData.ref }} </a>
-        </div>
-      </div>
-      <div class="popover-content">
-        <table class="prometheus-table">
-          <tr v-for="(series, index) in timeSeries" :key="index">
-            <track-line :track="series" />
-            <td>{{ series.track }} {{ seriesMetricLabel(index, series) }}</td>
-            <td>
-              <strong>{{ seriesMetricValue(index, series) }}</strong>
-            </td>
-          </tr>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
deleted file mode 100644
index b5211c306a3..00000000000
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-import TrackLine from './track_line.vue';
-import TrackInfo from './track_info.vue';
-
-export default {
-  components: {
-    TrackLine,
-    TrackInfo,
-  },
-  props: {
-    legendTitle: {
-      type: String,
-      required: true,
-    },
-    timeSeries: {
-      type: Array,
-      required: true,
-    },
-  },
-  methods: {
-    isStable(track) {
-      return {
-        'prometheus-table-row-highlight': track.trackName !== 'Canary' && track.renderCanary,
-      };
-    },
-  },
-};
-</script>
-<template>
-  <div class="prometheus-graph-legends prepend-left-10">
-    <table class="prometheus-table">
-      <tr
-        v-for="(series, index) in timeSeries"
-        v-if="series.shouldRenderLegend"
-        :key="index"
-        :class="isStable(series)"
-      >
-        <td>
-          <strong v-if="series.renderCanary">{{ series.trackName }}</strong>
-        </td>
-        <track-line :track="series" />
-        <td v-if="timeSeries.length > 1" class="legend-metric-title">
-          <track-info v-if="series.metricTag" :track="series" />
-          <track-info v-else :track="series">
-            <strong>{{ legendTitle }}</strong> series {{ index + 1 }}
-          </track-info>
-        </td>
-        <td v-else>
-          <track-info :track="series">
-            <strong>{{ legendTitle }}</strong>
-          </track-info>
-        </td>
-        <template v-for="(track, trackIndex) in series.tracksLegend">
-          <track-line :key="`track-line-${trackIndex}`" :track="track" />
-          <td :key="`track-info-${trackIndex}`">
-            <track-info :track="track" class="legend-metric-title" />
-          </td>
-        </template>
-      </tr>
-    </table>
-  </div>
-</template>
diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue
deleted file mode 100644
index f2c237ec391..00000000000
--- a/app/assets/javascripts/monitoring/components/graph/path.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-export default {
-  props: {
-    generatedLinePath: {
-      type: String,
-      required: true,
-    },
-    generatedAreaPath: {
-      type: String,
-      required: true,
-    },
-    lineStyle: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    lineColor: {
-      type: String,
-      required: true,
-    },
-    areaColor: {
-      type: String,
-      required: true,
-    },
-    currentCoordinates: {
-      type: Object,
-      required: false,
-      default: () => ({ currentX: 0, currentY: 0 }),
-    },
-    showDot: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    strokeDashArray() {
-      if (this.lineStyle === 'dashed') return '3, 1';
-      if (this.lineStyle === 'dotted') return '1, 1';
-      return null;
-    },
-  },
-};
-</script>
-<template>
-  <g transform="translate(-5, 20)">
-    <circle
-      v-if="showDot"
-      :cx="currentCoordinates.currentX"
-      :cy="currentCoordinates.currentY"
-      :fill="lineColor"
-      :stroke="lineColor"
-      class="circle-path"
-      r="3"
-    />
-    <path :d="generatedAreaPath" :fill="areaColor" class="metric-area" />
-    <path
-      :d="generatedLinePath"
-      :stroke="lineColor"
-      :stroke-dasharray="strokeDashArray"
-      class="metric-line"
-      fill="none"
-      stroke-width="1"
-    />
-  </g>
-</template>
diff --git a/app/assets/javascripts/monitoring/components/graph/track_info.vue b/app/assets/javascripts/monitoring/components/graph/track_info.vue
deleted file mode 100644
index 3464067834f..00000000000
--- a/app/assets/javascripts/monitoring/components/graph/track_info.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-import { formatRelevantDigits } from '~/lib/utils/number_utils';
-
-export default {
-  name: 'TrackInfo',
-  props: {
-    track: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    summaryMetrics() {
-      return `Avg: ${formatRelevantDigits(this.track.average)} · Max: ${formatRelevantDigits(
-        this.track.max,
-      )}`;
-    },
-  },
-};
-</script>
-<template>
-  <span>
-    <slot>
-      <strong> {{ track.metricTag }} </strong>
-    </slot>
-    {{ summaryMetrics }}
-  </span>
-</template>
diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue
deleted file mode 100644
index d2ed1ba113e..00000000000
--- a/app/assets/javascripts/monitoring/components/graph/track_line.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-export default {
-  name: 'TrackLine',
-  props: {
-    track: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    stylizedLine() {
-      if (this.track.lineStyle === 'dashed') return '6, 3';
-      if (this.track.lineStyle === 'dotted') return '3, 3';
-      return null;
-    },
-  },
-};
-</script>
-<template>
-  <td>
-    <svg width="16" height="8">
-      <line
-        :stroke-dasharray="stylizedLine"
-        :stroke="track.lineColor"
-        :x1="0"
-        :x2="16"
-        :y1="4"
-        :y2="4"
-        stroke-width="4"
-      />
-    </svg>
-  </td>
-</template>
diff --git a/app/assets/javascripts/monitoring/event_hub.js b/app/assets/javascripts/monitoring/event_hub.js
deleted file mode 100644
index 0948c2e5352..00000000000
--- a/app/assets/javascripts/monitoring/event_hub.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Vue from 'vue';
-
-export default new Vue();
diff --git a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
deleted file mode 100644
index 87c3d969de4..00000000000
--- a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { bisectDate } from '../utils/date_time_formatters';
-
-const mixins = {
-  methods: {
-    mouseOverDeployInfo(mouseXPos) {
-      if (!this.reducedDeploymentData) return false;
-
-      let dataFound = false;
-      this.reducedDeploymentData = this.reducedDeploymentData.map(d => {
-        const deployment = d;
-        if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
-          dataFound = d.xPos + 1;
-
-          deployment.showDeploymentFlag = true;
-        } else {
-          deployment.showDeploymentFlag = false;
-        }
-        return deployment;
-      });
-
-      return dataFound;
-    },
-
-    formatDeployments() {
-      this.reducedDeploymentData = this.deploymentData.reduce((deploymentDataArray, deployment) => {
-        const time = new Date(deployment.created_at);
-        const xPos = Math.floor(this.timeSeries[0].timeSeriesScaleX(time));
-
-        time.setSeconds(this.timeSeries[0].values[0].time.getSeconds());
-
-        if (xPos >= 0) {
-          const seriesIndex = bisectDate(this.timeSeries[0].values, time, 1);
-
-          deploymentDataArray.push({
-            id: deployment.id,
-            time,
-            sha: deployment.sha,
-            commitUrl: `${this.projectPath}/commit/${deployment.sha}`,
-            tag: deployment.tag,
-            tagUrl: deployment.tag ? `${this.tagsPath}/${deployment.ref.name}` : null,
-            ref: deployment.ref.name,
-            xPos,
-            seriesIndex,
-            showDeploymentFlag: false,
-          });
-        }
-
-        return deploymentDataArray;
-      }, []);
-    },
-
-    positionFlag() {
-      const timeSeries = this.seriesUnderMouse[0];
-      if (!timeSeries) {
-        return;
-      }
-      const hoveredDataIndex = bisectDate(timeSeries.values, this.hoverData.hoveredDate);
-
-      this.currentData = timeSeries.values[hoveredDataIndex];
-      this.currentXCoordinate = Math.floor(timeSeries.timeSeriesScaleX(this.currentData.time));
-
-      this.currentCoordinates = {};
-
-      this.seriesUnderMouse.forEach(series => {
-        const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
-        const currentData = series.values[currentDataIndex];
-        const currentX = Math.floor(series.timeSeriesScaleX(currentData.time));
-        const currentY = Math.floor(series.timeSeriesScaleY(currentData.value));
-
-        this.currentCoordinates[series.metricTag] = {
-          currentX,
-          currentY,
-          currentDataIndex,
-        };
-      });
-
-      if (this.hoverData.currentDeployXPos) {
-        this.showFlag = false;
-      } else {
-        this.showFlag = true;
-      }
-    },
-  },
-};
-
-export default mixins;
diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
deleted file mode 100644
index d88c13609dc..00000000000
--- a/app/assets/javascripts/monitoring/utils/date_time_formatters.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { timeFormat as time } from 'd3-time-format';
-import { timeSecond, timeMinute, timeHour, timeDay, timeWeek, timeMonth, timeYear } from 'd3-time';
-import { bisector } from 'd3-array';
-
-const d3 = {
-  time,
-  bisector,
-  timeSecond,
-  timeMinute,
-  timeHour,
-  timeDay,
-  timeWeek,
-  timeMonth,
-  timeYear,
-};
-
-export const dateFormat = d3.time('%d %b %Y, ');
-export const timeFormat = d3.time('%-I:%M%p');
-export const dateFormatWithName = d3.time('%a, %b %-d');
-export const bisectDate = d3.bisector(d => d.time).left;
-
-export function timeScaleFormat(date) {
-  let formatFunction;
-  if (d3.timeSecond(date) < date) {
-    formatFunction = d3.time('.%L');
-  } else if (d3.timeMinute(date) < date) {
-    formatFunction = d3.time(':%S');
-  } else if (d3.timeHour(date) < date) {
-    formatFunction = d3.time('%-I:%M');
-  } else if (d3.timeDay(date) < date) {
-    formatFunction = d3.time('%-I %p');
-  } else if (d3.timeWeek(date) < date) {
-    formatFunction = d3.time('%a %d');
-  } else if (d3.timeMonth(date) < date) {
-    formatFunction = d3.time('%b %d');
-  } else if (d3.timeYear(date) < date) {
-    formatFunction = d3.time('%B');
-  } else {
-    formatFunction = d3.time('%Y');
-  }
-  return formatFunction(date);
-}
diff --git a/app/assets/javascripts/monitoring/utils/measurements.js b/app/assets/javascripts/monitoring/utils/measurements.js
deleted file mode 100644
index 7c771f43eee..00000000000
--- a/app/assets/javascripts/monitoring/utils/measurements.js
+++ /dev/null
@@ -1,44 +0,0 @@
-export default {
-  small: {
-    // Covers both xs and sm screen sizes
-    margin: {
-      top: 40,
-      right: 40,
-      bottom: 50,
-      left: 40,
-    },
-    legends: {
-      width: 15,
-      height: 3,
-      offsetX: 20,
-      offsetY: 32,
-    },
-    backgroundLegend: {
-      width: 30,
-      height: 50,
-    },
-    axisLabelLineOffset: -20,
-  },
-  large: {
-    // This covers both md and lg screen sizes
-    margin: {
-      top: 80,
-      right: 80,
-      bottom: 100,
-      left: 80,
-    },
-    legends: {
-      width: 15,
-      height: 3,
-      offsetX: 20,
-      offsetY: 34,
-    },
-    backgroundLegend: {
-      width: 30,
-      height: 150,
-    },
-    axisLabelLineOffset: 20,
-  },
-  xTicks: 8,
-  yTicks: 3,
-};
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
deleted file mode 100644
index 50ba14dfb2e..00000000000
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ /dev/null
@@ -1,223 +0,0 @@
-import _ from 'underscore';
-import { scaleLinear, scaleTime } from 'd3-scale';
-import { line, area, curveLinear } from 'd3-shape';
-import { extent, max, sum } from 'd3-array';
-import { timeMinute, timeSecond } from 'd3-time';
-import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
-
-const d3 = {
-  scaleLinear,
-  scaleTime,
-  line,
-  area,
-  curveLinear,
-  extent,
-  max,
-  timeMinute,
-  timeSecond,
-  sum,
-};
-
-const defaultColorPalette = {
-  blue: ['#1f78d1', '#8fbce8'],
-  orange: ['#fc9403', '#feca81'],
-  red: ['#db3b21', '#ed9d90'],
-  green: ['#1aaa55', '#8dd5aa'],
-  purple: ['#6666c4', '#d1d1f0'],
-};
-
-const defaultColorOrder = ['blue', 'orange', 'red', 'green', 'purple'];
-
-const defaultStyleOrder = ['solid', 'dashed', 'dotted'];
-
-function queryTimeSeries(query, graphDrawData, lineStyle) {
-  let usedColors = [];
-  let renderCanary = false;
-  const timeSeriesParsed = [];
-
-  function pickColor(name) {
-    let pick;
-    if (name && defaultColorPalette[name]) {
-      pick = name;
-    } else {
-      const unusedColors = _.difference(defaultColorOrder, usedColors);
-      if (unusedColors.length > 0) {
-        [pick] = unusedColors;
-      } else {
-        usedColors = [];
-        [pick] = defaultColorOrder;
-      }
-    }
-    usedColors.push(pick);
-    return defaultColorPalette[pick];
-  }
-
-  function findByDate(series, time) {
-    const val = series.find(v => Math.abs(d3.timeSecond.count(time, v.time)) < 60);
-    if (val) {
-      return val.value;
-    }
-    return NaN;
-  }
-
-  // The timeseries data may have gaps in it
-  // but we need a regularly-spaced set of time/value pairs
-  // this gives us a complete range of one minute intervals
-  // offset the same amount as the original data
-  const [minX, maxX] = graphDrawData.xDom;
-  const offset = d3.timeMinute(minX) - Number(minX);
-  const datesWithoutGaps = d3.timeSecond
-    .every(60)
-    .range(d3.timeMinute.offset(minX, -1), maxX)
-    .map(d => d - offset);
-
-  query.result.forEach((timeSeries, timeSeriesNumber) => {
-    let metricTag = '';
-    let lineColor = '';
-    let areaColor = '';
-    let shouldRenderLegend = true;
-    const timeSeriesValues = timeSeries.values.map(d => d.value);
-    const maximumValue = d3.max(timeSeriesValues);
-    const accum = d3.sum(timeSeriesValues);
-    const trackName = capitalizeFirstCharacter(query.track ? query.track : 'Stable');
-
-    if (trackName === 'Canary') {
-      renderCanary = true;
-    }
-
-    const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]];
-    const seriesCustomizationData =
-      query.series != null && _.findWhere(query.series[0].when, { value: timeSeriesMetricLabel });
-
-    if (seriesCustomizationData) {
-      metricTag = seriesCustomizationData.value || timeSeriesMetricLabel;
-      [lineColor, areaColor] = pickColor(seriesCustomizationData.color);
-      if (timeSeriesParsed.length > 0) {
-        shouldRenderLegend = false;
-      } else {
-        shouldRenderLegend = true;
-      }
-    } else {
-      metricTag = timeSeriesMetricLabel || query.label || `series ${timeSeriesNumber + 1}`;
-      [lineColor, areaColor] = pickColor();
-      if (timeSeriesParsed.length > 1) {
-        shouldRenderLegend = false;
-      }
-    }
-
-    const values = datesWithoutGaps.map(time => ({
-      time,
-      value: findByDate(timeSeries.values, time),
-    }));
-
-    timeSeriesParsed.push({
-      linePath: graphDrawData.lineFunction(values),
-      areaPath: graphDrawData.areaBelowLine(values),
-      timeSeriesScaleX: graphDrawData.timeSeriesScaleX,
-      timeSeriesScaleY: graphDrawData.timeSeriesScaleY,
-      values: timeSeries.values,
-      max: maximumValue,
-      average: accum / timeSeries.values.length,
-      lineStyle,
-      lineColor,
-      areaColor,
-      metricTag,
-      trackName,
-      shouldRenderLegend,
-      renderCanary,
-    });
-
-    if (!shouldRenderLegend) {
-      if (!timeSeriesParsed[0].tracksLegend) {
-        timeSeriesParsed[0].tracksLegend = [];
-      }
-      timeSeriesParsed[0].tracksLegend.push({
-        max: maximumValue,
-        average: accum / timeSeries.values.length,
-        lineStyle,
-        lineColor,
-        metricTag,
-      });
-    }
-  });
-
-  return timeSeriesParsed;
-}
-
-function xyDomain(queries) {
-  const allValues = queries.reduce(
-    (allQueryResults, query) =>
-      allQueryResults.concat(
-        query.result.reduce((allResults, result) => allResults.concat(result.values), []),
-      ),
-    [],
-  );
-
-  const xDom = d3.extent(allValues, d => d.time);
-  const yDom = [0, d3.max(allValues.map(d => d.value))];
-
-  return {
-    xDom,
-    yDom,
-  };
-}
-
-export function generateGraphDrawData(queries, graphWidth, graphHeight, graphHeightOffset) {
-  const { xDom, yDom } = xyDomain(queries);
-
-  const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth - 70]);
-  const timeSeriesScaleY = d3.scaleLinear().range([graphHeight - graphHeightOffset, 0]);
-
-  timeSeriesScaleX.domain(xDom);
-  timeSeriesScaleX.ticks(d3.timeMinute, 60);
-  timeSeriesScaleY.domain(yDom);
-
-  const defined = d => !Number.isNaN(d.value) && d.value != null;
-
-  const lineFunction = d3
-    .line()
-    .defined(defined)
-    .curve(d3.curveLinear) // d3 v4 uses curbe instead of interpolate
-    .x(d => timeSeriesScaleX(d.time))
-    .y(d => timeSeriesScaleY(d.value));
-
-  const areaBelowLine = d3
-    .area()
-    .defined(defined)
-    .curve(d3.curveLinear)
-    .x(d => timeSeriesScaleX(d.time))
-    .y0(graphHeight - graphHeightOffset)
-    .y1(d => timeSeriesScaleY(d.value));
-
-  const areaAboveLine = d3
-    .area()
-    .defined(defined)
-    .curve(d3.curveLinear)
-    .x(d => timeSeriesScaleX(d.time))
-    .y0(0)
-    .y1(d => timeSeriesScaleY(d.value));
-
-  return {
-    lineFunction,
-    areaBelowLine,
-    areaAboveLine,
-    xDom,
-    yDom,
-    timeSeriesScaleX,
-    timeSeriesScaleY,
-  };
-}
-
-export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) {
-  const graphDrawData = generateGraphDrawData(queries, graphWidth, graphHeight, graphHeightOffset);
-
-  const timeSeries = queries.reduce((series, query, index) => {
-    const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];
-    return series.concat(queryTimeSeries(query, graphDrawData, lineStyle));
-  }, []);
-
-  return {
-    timeSeries,
-    graphDrawData,
-  };
-}
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bb98fc06ed6..8caa876e6b0 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4447,9 +4447,6 @@ msgstr ""
 msgid "Metrics|Learn about environments"
 msgstr ""
 
-msgid "Metrics|No data to display"
-msgstr ""
-
 msgid "Metrics|No deployed environments"
 msgstr ""
 
@@ -5711,9 +5708,6 @@ msgstr ""
 msgid "ProjectsDropdown|This feature requires browser localStorage support"
 msgstr ""
 
-msgid "PrometheusDashboard|Time"
-msgstr ""
-
 msgid "PrometheusService|%{exporters} with %{metrics} were found"
 msgstr ""
 
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);
-  });
-});