Merge branch 'prettify-monitoring-code' into 'master'

Clean up monitoring components

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

app/assets/javascripts/monitoring/components/dashboard.vue

 <script>
-  import _ from 'underscore';
-  import Flash from '../../flash';
-  import MonitoringService from '../services/monitoring_service';
-  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';
+import _ from 'underscore';
+import Flash from '../../flash';
+import MonitoringService from '../services/monitoring_service';
+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: {
-      Graph,
-      GraphGroup,
-      EmptyState,
+export default {
+  components: {
+    Graph,
+    GraphGroup,
+    EmptyState,
+  },
+  props: {
+    hasMetrics: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-
-    props: {
-      hasMetrics: {
-        type: Boolean,
-        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,
-      },
-      settingsPath: {
-        type: String,
-        required: true,
-      },
-      clustersPath: {
-        type: String,
-        required: true,
-      },
-      tagsPath: {
-        type: String,
-        required: true,
-      },
-      projectPath: {
-        type: String,
-        required: true,
-      },
-      metricsEndpoint: {
-        type: String,
-        required: true,
-      },
-      deploymentEndpoint: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      emptyGettingStartedSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyLoadingSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyNoDataSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyUnableToConnectSvgPath: {
-        type: String,
-        required: true,
-      },
+    showLegend: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-
-    data() {
-      return {
-        store: new MonitoringStore(),
-        state: 'gettingStarted',
-        showEmptyState: true,
-        updateAspectRatio: false,
-        updatedAspectRatios: 0,
-        hoverData: {},
-        resizeThrottled: {},
-      };
+    showPanels: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-
-    created() {
-      this.service = new MonitoringService({
-        metricsEndpoint: this.metricsEndpoint,
-        deploymentEndpoint: this.deploymentEndpoint,
-      });
-      eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
-      eventHub.$on('hoverChanged', this.hoverChanged);
+    forceSmallGraph: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-
-    beforeDestroy() {
-      eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
-      eventHub.$off('hoverChanged', this.hoverChanged);
-      window.removeEventListener('resize', this.resizeThrottled, false);
+    documentationPath: {
+      type: String,
+      required: true,
     },
-
-    mounted() {
-      this.resizeThrottled = _.throttle(this.resize, 600);
-      if (!this.hasMetrics) {
-        this.state = 'gettingStarted';
-      } else {
-        this.getGraphsData();
-        window.addEventListener('resize', this.resizeThrottled, false);
+    settingsPath: {
+      type: String,
+      required: true,
+    },
+    clustersPath: {
+      type: String,
+      required: true,
+    },
+    tagsPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    metricsEndpoint: {
+      type: String,
+      required: true,
+    },
+    deploymentEndpoint: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    emptyGettingStartedSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyLoadingSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyNoDataSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyUnableToConnectSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      store: new MonitoringStore(),
+      state: 'gettingStarted',
+      showEmptyState: true,
+      updateAspectRatio: false,
+      updatedAspectRatios: 0,
+      hoverData: {},
+      resizeThrottled: {},
+    };
+  },
+  created() {
+    this.service = new MonitoringService({
+      metricsEndpoint: this.metricsEndpoint,
+      deploymentEndpoint: this.deploymentEndpoint,
+    });
+    eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
+    eventHub.$on('hoverChanged', this.hoverChanged);
+  },
+  beforeDestroy() {
+    eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
+    eventHub.$off('hoverChanged', this.hoverChanged);
+    window.removeEventListener('resize', this.resizeThrottled, false);
+  },
+  mounted() {
+    this.resizeThrottled = _.throttle(this.resize, 600);
+    if (!this.hasMetrics) {
+      this.state = 'gettingStarted';
+    } else {
+      this.getGraphsData();
+      window.addEventListener('resize', this.resizeThrottled, false);
+    }
+  },
+  methods: {
+    getGraphsData() {
+      this.state = 'loading';
+      Promise.all([
+        this.service.getGraphsData().then(data => this.store.storeMetrics(data)),
+        this.service
+          .getDeploymentData()
+          .then(data => this.store.storeDeploymentData(data))
+          .catch(() => new Flash('Error getting deployment information.')),
+      ])
+        .then(() => {
+          if (this.store.groups.length < 1) {
+            this.state = 'noData';
+            return;
+          }
+          this.showEmptyState = false;
+        })
+        .catch(() => {
+          this.state = 'unableToConnect';
+        });
+    },
+    resize() {
+      this.updateAspectRatio = true;
+    },
+    toggleAspectRatio() {
+      this.updatedAspectRatios = this.updatedAspectRatios += 1;
+      if (this.store.getMetricsCount() === this.updatedAspectRatios) {
+        this.updateAspectRatio = !this.updateAspectRatio;
+        this.updatedAspectRatios = 0;
       }
     },
-
-    methods: {
-      getGraphsData() {
-        this.state = 'loading';
-        Promise.all([
-          this.service.getGraphsData()
-            .then(data => this.store.storeMetrics(data)),
-          this.service.getDeploymentData()
-            .then(data => this.store.storeDeploymentData(data))
-            .catch(() => new Flash('Error getting deployment information.')),
-        ])
-          .then(() => {
-            if (this.store.groups.length < 1) {
-              this.state = 'noData';
-              return;
-            }
-            this.showEmptyState = false;
-          })
-          .catch(() => { this.state = 'unableToConnect'; });
-      },
-
-      resize() {
-        this.updateAspectRatio = true;
-      },
-
-      toggleAspectRatio() {
-        this.updatedAspectRatios = this.updatedAspectRatios += 1;
-        if (this.store.getMetricsCount() === this.updatedAspectRatios) {
-          this.updateAspectRatio = !this.updateAspectRatio;
-          this.updatedAspectRatios = 0;
-        }
-      },
-
-      hoverChanged(data) {
-        this.hoverData = data;
-      },
+    hoverChanged(data) {
+      this.hoverData = data;
     },
-  };
+  },
+};
 </script>
 
 <template>

app/assets/javascripts/monitoring/components/empty_state.vue

 <script>
-  export default {
-    props: {
-      documentationPath: {
-        type: String,
-        required: true,
-      },
-      settingsPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      clustersPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      selectedState: {
-        type: String,
-        required: true,
-      },
-      emptyGettingStartedSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyLoadingSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyNoDataSvgPath: {
-        type: String,
-        required: true,
-      },
-      emptyUnableToConnectSvgPath: {
-        type: String,
-        required: true,
-      },
+export default {
+  props: {
+    documentationPath: {
+      type: String,
+      required: true,
+    },
+    settingsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    clustersPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    selectedState: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        states: {
-          gettingStarted: {
-            svgUrl: this.emptyGettingStartedSvgPath,
-            title: 'Get started with performance monitoring',
-            description: `Stay updated about the performance and health
+    emptyGettingStartedSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyLoadingSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyNoDataSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyUnableToConnectSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      states: {
+        gettingStarted: {
+          svgUrl: this.emptyGettingStartedSvgPath,
+          title: 'Get started with performance monitoring',
+          description: `Stay updated about the performance and health
               of your environment by configuring Prometheus to monitor your deployments.`,
-            buttonText: 'Install Prometheus on clusters',
-            buttonPath: this.clustersPath,
-            secondaryButtonText: 'Configure existing Prometheus',
-            secondaryButtonPath: this.settingsPath,
-          },
-          loading: {
-            svgUrl: this.emptyLoadingSvgPath,
-            title: 'Waiting for performance data',
-            description: `Creating graphs uses the data from the Prometheus server.
+          buttonText: 'Install Prometheus on clusters',
+          buttonPath: this.clustersPath,
+          secondaryButtonText: 'Configure existing Prometheus',
+          secondaryButtonPath: this.settingsPath,
+        },
+        loading: {
+          svgUrl: this.emptyLoadingSvgPath,
+          title: 'Waiting for performance data',
+          description: `Creating graphs uses the data from the Prometheus server.
               If this takes a long time, ensure that data is available.`,
-            buttonText: 'View documentation',
-            buttonPath: this.documentationPath,
-          },
-          noData: {
-            svgUrl: this.emptyNoDataSvgPath,
-            title: 'No data found',
-            description: `You are connected to the Prometheus server, but there is currently
+          buttonText: 'View documentation',
+          buttonPath: this.documentationPath,
+        },
+        noData: {
+          svgUrl: this.emptyNoDataSvgPath,
+          title: 'No data found',
+          description: `You are connected to the Prometheus server, but there is currently
               no data to display.`,
-            buttonText: 'Configure Prometheus',
-            buttonPath: this.settingsPath,
-          },
-          unableToConnect: {
-            svgUrl: this.emptyUnableToConnectSvgPath,
-            title: 'Unable to connect to Prometheus server',
-            description: 'Ensure connectivity is available from the GitLab server to the ',
-            buttonText: 'View documentation',
-            buttonPath: this.documentationPath,
-          },
+          buttonText: 'Configure Prometheus',
+          buttonPath: this.settingsPath,
+        },
+        unableToConnect: {
+          svgUrl: this.emptyUnableToConnectSvgPath,
+          title: 'Unable to connect to Prometheus server',
+          description: 'Ensure connectivity is available from the GitLab server to the ',
+          buttonText: 'View documentation',
+          buttonPath: this.documentationPath,
         },
-      };
-    },
-    computed: {
-      currentState() {
-        return this.states[this.selectedState];
-      },
-
-      showButtonDescription() {
-        if (this.selectedState === 'unableToConnect') return true;
-        return false;
       },
+    };
+  },
+  computed: {
+    currentState() {
+      return this.states[this.selectedState];
+    },
+    showButtonDescription() {
+      if (this.selectedState === 'unableToConnect') return true;
+      return false;
     },
-  };
+  },
+};
 </script>
 
 <template>

app/assets/javascripts/monitoring/components/graph.vue

 <script>
-  import { scaleLinear, scaleTime } from 'd3-scale';
-  import { axisLeft, axisBottom } from 'd3-axis';
-  import { max, extent } from 'd3-array';
-  import { select } from 'd3-selection';
-  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';
+import { scaleLinear, scaleTime } from 'd3-scale';
+import { axisLeft, axisBottom } from 'd3-axis';
+import { max, extent } from 'd3-array';
+import { select } from 'd3-selection';
+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 };
+const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select };
 
-  export default {
-    components: {
-      GraphLegend,
-      GraphFlag,
-      GraphDeployment,
-      GraphPath,
+export default {
+  components: {
+    GraphLegend,
+    GraphFlag,
+    GraphDeployment,
+    GraphPath,
+  },
+  mixins: [MonitoringMixin],
+  props: {
+    graphData: {
+      type: Object,
+      required: true,
     },
-
-    mixins: [MonitoringMixin],
-
-    props: {
-      graphData: {
-        type: Object,
-        required: true,
-      },
-      updateAspectRatio: {
-        type: Boolean,
-        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,
+    updateAspectRatio: {
+      type: Boolean,
+      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,
       },
+      currentDataIndex: 0,
+      currentXCoordinate: 0,
+      currentFlagPosition: 0,
+      showFlag: false,
+      showFlagContent: false,
+      timeSeries: [],
+      realPixelRatio: 1,
+    };
+  },
+  computed: {
+    outerViewBox() {
+      return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
     },
-
-    data() {
+    innerViewBox() {
+      return `0 0 ${this.baseGraphWidth - 150} ${this.baseGraphHeight}`;
+    },
+    axisTransform() {
+      return `translate(70, ${this.graphHeight - 100})`;
+    },
+    paddingBottomRootSvg() {
       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,
-        },
-        currentDataIndex: 0,
-        currentXCoordinate: 0,
-        currentFlagPosition: 0,
-        showFlag: false,
-        showFlagContent: false,
-        timeSeries: [],
-        realPixelRatio: 1,
+        paddingBottom: `${Math.ceil(this.baseGraphHeight * 100) / this.baseGraphWidth || 0}%`,
       };
     },
-
-    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);
-      },
+    deploymentFlagData() {
+      return this.reducedDeploymentData.find(deployment => deployment.showDeploymentFlag);
     },
-
-    watch: {
-      updateAspectRatio() {
-        if (this.updateAspectRatio) {
-          this.graphHeight = 450;
-          this.graphWidth = 600;
-          this.measurements = measurements.large;
-          this.draw();
-          eventHub.$emit('toggleAspectRatio');
-        }
-      },
-
-      hoverData() {
-        this.positionFlag();
-      },
+  },
+  watch: {
+    updateAspectRatio() {
+      if (this.updateAspectRatio) {
+        this.graphHeight = 450;
+        this.graphWidth = 600;
+        this.measurements = measurements.large;
+        this.draw();
+        eventHub.$emit('toggleAspectRatio');
+      }
     },
-
-    mounted() {
-      this.draw();
+    hoverData() {
+      this.positionFlag();
     },
+  },
+  mounted() {
+    this.draw();
+  },
+  methods: {
+    draw() {
+      const breakpointSize = bp.getBreakpointSize();
+      const query = this.graphData.queries[0];
+      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.unitOfDisplay = query.unit || '';
+      this.yAxisLabel = this.graphData.y_label || 'Values';
+      this.legendTitle = query.label || 'Average';
+      this.graphWidth = this.$refs.baseSvg.clientWidth - this.margin.left - this.margin.right;
+      this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
+      this.baseGraphHeight = this.graphHeight;
+      this.baseGraphWidth = this.graphWidth;
 
-    methods: {
-      draw() {
-        const breakpointSize = bp.getBreakpointSize();
-        const query = this.graphData.queries[0];
-        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.unitOfDisplay = query.unit || '';
-        this.yAxisLabel = this.graphData.y_label || 'Values';
-        this.legendTitle = query.label || 'Average';
-        this.graphWidth = this.$refs.baseSvg.clientWidth -
-                     this.margin.left - this.margin.right;
-        this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
-        this.baseGraphHeight = this.graphHeight;
-        this.baseGraphWidth = this.graphWidth;
-
-        // pixel offsets inside the svg and outside are not 1:1
-        this.realPixelRatio = (this.$refs.baseSvg.clientWidth / this.baseGraphWidth);
-
-        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 = point.x += 7;
-        const firstTimeSeries = this.timeSeries[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);
+      // pixel offsets inside the svg and outside are not 1:1
+      this.realPixelRatio = this.$refs.baseSvg.clientWidth / this.baseGraphWidth;
 
-        eventHub.$emit('hoverChanged', {
-          hoveredDate,
-          currentDeployXPos,
-        });
-      },
+      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 = point.x += 7;
+      const firstTimeSeries = this.timeSeries[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);
 
-      renderAxesPaths() {
-        this.timeSeries = createTimeSeries(
-          this.graphData.queries,
-          this.graphWidth,
-          this.graphHeight,
-          this.graphHeightOffset,
-        );
+      eventHub.$emit('hoverChanged', {
+        hoveredDate,
+        currentDeployXPos,
+      });
+    },
+    renderAxesPaths() {
+      this.timeSeries = createTimeSeries(
+        this.graphData.queries,
+        this.graphWidth,
+        this.graphHeight,
+        this.graphHeightOffset,
+      );
 
-        if (!this.showLegend) {
-          this.baseGraphHeight -= 50;
-        } else if (this.timeSeries.length > 3) {
-          this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
-        }
+      if (!this.showLegend) {
+        this.baseGraphHeight -= 50;
+      } else if (this.timeSeries.length > 3) {
+        this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
+      }
 
-        const axisXScale = d3.scaleTime()
-          .range([0, this.graphWidth - 70]);
-        const axisYScale = d3.scaleLinear()
-          .range([this.graphHeight - this.graphHeightOffset, 0]);
+      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))]);
+      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))]);
 
-        const xAxis = d3.axisBottom()
-          .scale(axisXScale)
-          .ticks(this.graphWidth / 120)
-          .tickFormat(timeScaleFormat);
+      const xAxis = d3
+        .axisBottom()
+        .scale(axisXScale)
+        .ticks(this.graphWidth / 120)
+        .tickFormat(timeScaleFormat);
 
-        const yAxis = d3.axisLeft()
-          .scale(axisYScale)
-          .ticks(measurements.yTicks);
+      const yAxis = d3
+        .axisLeft()
+        .scale(axisYScale)
+        .ticks(measurements.yTicks);
 
-        d3.select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
+      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
-      },
+      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>

app/assets/javascripts/monitoring/components/graph/deployment.vue

 <script>
-  export default {
-    props: {
-      deploymentData: {
-        type: Array,
-        required: true,
-      },
-      graphHeight: {
-        type: Number,
-        required: true,
-      },
-      graphHeightOffset: {
-        type: Number,
-        required: true,
-      },
+export default {
+  props: {
+    deploymentData: {
+      type: Array,
+      required: true,
     },
-
-    computed: {
-      calculatedHeight() {
-        return this.graphHeight - this.graphHeightOffset;
-      },
+    graphHeight: {
+      type: Number,
+      required: true,
     },
-
-    methods: {
-      transformDeploymentGroup(deployment) {
-        return `translate(${Math.floor(deployment.xPos) - 5}, 20)`;
-      },
+    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">

app/assets/javascripts/monitoring/components/graph/flag.vue

 <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 { dateFormat, timeFormat } from '../../utils/date_time_formatters';
+import { formatRelevantDigits } from '../../../lib/utils/number_utils';
+import icon from '../../../vue_shared/components/icon.vue';
 
-  export default {
-    components: {
-      icon,
-    },
-    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,
-      },
-      currentDataIndex: {
-        type: Number,
-        required: true,
-      },
-      legendTitle: {
-        type: String,
-        required: true,
-      },
+export default {
+  components: {
+    icon,
+  },
+  props: {
+    currentXCoordinate: {
+      type: Number,
+      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';
-      },
+    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,
+    },
+    currentDataIndex: {
+      type: Number,
+      required: true,
+    },
+    legendTitle: {
+      type: String,
+      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;
 
-    methods: {
-      seriesMetricValue(series) {
-        const index = this.deploymentFlagData ?
-          this.deploymentFlagData.seriesIndex :
-          this.currentDataIndex;
-        const value = series.values[index] &&
-          series.values[index].value;
-        if (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}`;
-      },
+      const offsetTop = 20 * this.realPixelRatio;
+      const offsetLeft = (70 + xCoordinate) * this.realPixelRatio;
+      const height = (this.graphHeight - this.graphHeightOffset) * this.realPixelRatio;
 
-      strokeDashArray(type) {
-        if (type === 'dashed') return '6, 3';
-        if (type === 'dotted') return '3, 3';
-        return null;
-      },
+      return {
+        top: `${offsetTop}px`,
+        left: `${offsetLeft}px`,
+        height: `${height}px`,
+      };
+    },
+    flagOrientation() {
+      if (this.currentXCoordinate * this.realPixelRatio > 120) {
+        return 'left';
+      }
+      return 'right';
+    },
+  },
+  methods: {
+    seriesMetricValue(series) {
+      const index = this.deploymentFlagData
+        ? this.deploymentFlagData.seriesIndex
+        : this.currentDataIndex;
+      const value = series.values[index] && series.values[index].value;
+      if (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}`;
+    },
+    strokeDashArray(type) {
+      if (type === 'dashed') return '6, 3';
+      if (type === 'dotted') return '3, 3';
+      return null;
     },
-  };
+  },
+};
 </script>
 
 <template>

app/assets/javascripts/monitoring/components/graph/legend.vue

 <script>
-  import { formatRelevantDigits } from '../../../lib/utils/number_utils';
-
-  export default {
-    props: {
-      graphWidth: {
-        type: Number,
-        required: true,
-      },
-      graphHeight: {
-        type: Number,
-        required: true,
-      },
-      margin: {
-        type: Object,
-        required: true,
-      },
-      measurements: {
-        type: Object,
-        required: true,
-      },
-      legendTitle: {
-        type: String,
-        required: true,
-      },
-      yAxisLabel: {
-        type: String,
-        required: true,
-      },
-      timeSeries: {
-        type: Array,
-        required: true,
-      },
-      unitOfDisplay: {
-        type: String,
-        required: true,
-      },
-      currentDataIndex: {
-        type: Number,
-        required: true,
-      },
-      showLegendGroup: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-    },
-    data() {
-      return {
-        yLabelWidth: 0,
-        yLabelHeight: 0,
-        seriesXPosition: 0,
-        metricUsageXPosition: 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;
-      },
+import { formatRelevantDigits } from '../../../lib/utils/number_utils';
 
+export default {
+  props: {
+    graphWidth: {
+      type: Number,
+      required: true,
     },
-    mounted() {
-      this.$nextTick(() => {
-        const bbox = this.$refs.ylabel.getBBox();
-        this.metricUsageXPosition = 0;
-        this.seriesXPosition = 0;
-        if (this.$refs.legendTitleSvg != null) {
-          this.seriesXPosition = this.$refs.legendTitleSvg[0].getBBox().width;
-        }
-        if (this.$refs.seriesTitleSvg != null) {
-          this.metricUsageXPosition = this.$refs.seriesTitleSvg[0].getBBox().width;
-        }
-        this.yLabelWidth = bbox.width + 10; // Added some padding
-        this.yLabelHeight = bbox.height + 5;
-      });
-    },
-    methods: {
-      translateLegendGroup(index) {
-        return `translate(0, ${12 * (index)})`;
-      },
-
-      formatMetricUsage(series) {
-        const value = series.values[this.currentDataIndex] &&
-          series.values[this.currentDataIndex].value;
-        if (isNaN(value)) {
-          return '-';
-        }
-        return `${formatRelevantDigits(value)} ${this.unitOfDisplay}`;
-      },
+    graphHeight: {
+      type: Number,
+      required: true,
+    },
+    margin: {
+      type: Object,
+      required: true,
+    },
+    measurements: {
+      type: Object,
+      required: true,
+    },
+    legendTitle: {
+      type: String,
+      required: true,
+    },
+    yAxisLabel: {
+      type: String,
+      required: true,
+    },
+    timeSeries: {
+      type: Array,
+      required: true,
+    },
+    unitOfDisplay: {
+      type: String,
+      required: true,
+    },
+    currentDataIndex: {
+      type: Number,
+      required: true,
+    },
+    showLegendGroup: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      yLabelWidth: 0,
+      yLabelHeight: 0,
+      seriesXPosition: 0,
+      metricUsageXPosition: 0,
+    };
+  },
+  computed: {
+    textTransform() {
+      const yCoordinate =
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 || 0;
 
-      createSeriesString(index, series) {
-        if (series.metricTag) {
-          return `${series.metricTag} ${this.formatMetricUsage(series)}`;
-        }
-        return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`;
-      },
+      return `translate(15, ${yCoordinate}) rotate(-90)`;
+    },
+    rectTransform() {
+      const yCoordinate =
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 +
+          this.yLabelWidth / 2 || 0;
 
-      strokeDashArray(type) {
-        if (type === 'dashed') return '6, 3';
-        if (type === 'dotted') return '3, 3';
-        return null;
-      },
+      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;
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const bbox = this.$refs.ylabel.getBBox();
+      this.metricUsageXPosition = 0;
+      this.seriesXPosition = 0;
+      if (this.$refs.legendTitleSvg != null) {
+        this.seriesXPosition = this.$refs.legendTitleSvg[0].getBBox().width;
+      }
+      if (this.$refs.seriesTitleSvg != null) {
+        this.metricUsageXPosition = this.$refs.seriesTitleSvg[0].getBBox().width;
+      }
+      this.yLabelWidth = bbox.width + 10; // Added some padding
+      this.yLabelHeight = bbox.height + 5;
+    });
+  },
+  methods: {
+    translateLegendGroup(index) {
+      return `translate(0, ${12 * index})`;
+    },
+    formatMetricUsage(series) {
+      const value =
+        series.values[this.currentDataIndex] && series.values[this.currentDataIndex].value;
+      if (isNaN(value)) {
+        return '-';
+      }
+      return `${formatRelevantDigits(value)} ${this.unitOfDisplay}`;
+    },
+    createSeriesString(index, series) {
+      if (series.metricTag) {
+        return `${series.metricTag} ${this.formatMetricUsage(series)}`;
+      }
+      return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`;
+    },
+    strokeDashArray(type) {
+      if (type === 'dashed') return '6, 3';
+      if (type === 'dotted') return '3, 3';
+      return null;
     },
-  };
+  },
+};
 </script>
 <template>
   <g class="axis-label-container">

app/assets/javascripts/monitoring/components/graph/path.vue

 <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,
-      },
+export default {
+  props: {
+    generatedLinePath: {
+      type: String,
+      required: true,
     },
-    computed: {
-      strokeDashArray() {
-        if (this.lineStyle === 'dashed') return '3, 1';
-        if (this.lineStyle === 'dotted') return '1, 1';
-        return null;
-      },
+    generatedAreaPath: {
+      type: String,
+      required: true,
     },
-  };
+    lineStyle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lineColor: {
+      type: String,
+      required: true,
+    },
+    areaColor: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    strokeDashArray() {
+      if (this.lineStyle === 'dashed') return '3, 1';
+      if (this.lineStyle === 'dotted') return '1, 1';
+      return null;
+    },
+  },
+};
 </script>
 <template>
   <g>

app/assets/javascripts/monitoring/components/graph_group.vue

 <script>
-  export default {
-    props: {
-      name: {
-        type: String,
-        required: true,
-      },
-      showPanels: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
     },
-  };
+    showPanels: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+};
 </script>
 
 <template>