Commit b95c1850 authored by Mike Greiling's avatar Mike Greiling 💬 Committed by Clement Ho
Browse files

Clean up monitoring components

parent d3520573

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

+142 −149
Original line number Diff line number Diff line
@@ -14,7 +14,6 @@ 
    GraphGroup,

    EmptyState,

  },



  props: {

    hasMetrics: {

      type: Boolean,
@@ -82,7 +81,6 @@ 
      required: true,

    },

  },



  data() {

    return {

      store: new MonitoringStore(),
@@ -94,7 +92,6 @@ 
      resizeThrottled: {},

    };

  },



  created() {

    this.service = new MonitoringService({

      metricsEndpoint: this.metricsEndpoint,
@@ -103,13 +100,11 @@ 
    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) {
@@ -119,14 +114,13 @@ 
      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()

        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.')),

      ])
@@ -137,13 +131,13 @@ 
          }

          this.showEmptyState = false;

        })

          .catch(() => { this.state = 'unableToConnect'; });

        .catch(() => {

          this.state = 'unableToConnect';

        });

    },



    resize() {

      this.updateAspectRatio = true;

    },



    toggleAspectRatio() {

      this.updatedAspectRatios = this.updatedAspectRatios += 1;

      if (this.store.getMetricsCount() === this.updatedAspectRatios) {
@@ -151,7 +145,6 @@ 
        this.updatedAspectRatios = 0;

      }

    },



    hoverChanged(data) {

      this.hoverData = data;

    },

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

+79 −80
Original line number Diff line number Diff line
@@ -79,7 +79,6 @@ 
    currentState() {

      return this.states[this.selectedState];

    },



    showButtonDescription() {

      if (this.selectedState === 'unableToConnect') return true;

      return false;

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

+203 −210
Original line number Diff line number Diff line
@@ -23,9 +23,7 @@ 
    GraphDeployment,

    GraphPath,

  },



  mixins: [MonitoringMixin],



  props: {

    graphData: {

      type: Object,
@@ -63,7 +61,6 @@ 
      default: false,

    },

  },



  data() {

    return {

      baseGraphHeight: 450,
@@ -90,31 +87,25 @@ 
      realPixelRatio: 1,

    };

  },



  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}%`,

        paddingBottom: `${Math.ceil(this.baseGraphHeight * 100) / this.baseGraphWidth || 0}%`,

      };

    },



    deploymentFlagData() {

      return this.reducedDeploymentData.find(deployment => deployment.showDeploymentFlag);

    },

  },



  watch: {

    updateAspectRatio() {

      if (this.updateAspectRatio) {
@@ -125,16 +116,13 @@ 
        eventHub.$emit('toggleAspectRatio');

      }

    },



    hoverData() {

      this.positionFlag();

    },

  },



  mounted() {

    this.draw();

  },



  methods: {

    draw() {

      const breakpointSize = bp.getBreakpointSize();
@@ -148,19 +136,17 @@ 
      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.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.realPixelRatio = this.$refs.baseSvg.clientWidth / this.baseGraphWidth;



      this.renderAxesPaths();

      this.formatDeployments();

    },



    handleMouseOverGraph(e) {

      let point = this.$refs.graphData.createSVGPoint();

      point.x = e.clientX;
@@ -174,7 +160,7 @@ 
      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 hoveredDataIndex = evalTime ? overlayIndex : overlayIndex - 1;

      const hoveredDate = firstTimeSeries.values[hoveredDataIndex].time;

      const currentDeployXPos = this.mouseOverDeployInfo(point.x);
@@ -183,7 +169,6 @@ 
        currentDeployXPos,

      });

    },



    renderAxesPaths() {

      this.timeSeries = createTimeSeries(

        this.graphData.queries,
@@ -198,32 +183,40 @@ 
        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 xAxis = d3.axisBottom()

      const xAxis = d3

        .axisBottom()

        .scale(axisXScale)

        .ticks(this.graphWidth / 120)

        .tickFormat(timeScaleFormat);



        const yAxis = d3.axisLeft()

      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)

      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')

            d3

              .select(this)

              .select('line')

              .attr('x2', width)

              .attr('class', 'axis-tick');

          } // Avoid adding the class to the first tick, to prevent coloring

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

+23 −25
Original line number Diff line number Diff line
@@ -14,13 +14,11 @@ 
      required: true,

    },

  },



  computed: {

    calculatedHeight() {

      return this.graphHeight - this.graphHeightOffset;

    },

  },



  methods: {

    transformDeploymentGroup(deployment) {

      return `translate(${Math.floor(deployment.xPos) - 5}, 20)`;

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

+109 −117
Original line number Diff line number Diff line
@@ -54,24 +54,21 @@ 
      required: true,

    },

  },



  computed: {

    formatTime() {

        return this.deploymentFlagData ?

          timeFormat(this.deploymentFlagData.time) :

          timeFormat(this.currentData.time);

      return this.deploymentFlagData

        ? timeFormat(this.deploymentFlagData.time)

        : timeFormat(this.currentData.time);

    },



    formatDate() {

        return this.deploymentFlagData ?

          dateFormat(this.deploymentFlagData.time) :

          dateFormat(this.currentData.time);

      return this.deploymentFlagData

        ? dateFormat(this.deploymentFlagData.time)

        : dateFormat(this.currentData.time);

    },



    cursorStyle() {

        const xCoordinate = this.deploymentFlagData ?

          this.deploymentFlagData.xPos :

          this.currentXCoordinate;

      const xCoordinate = this.deploymentFlagData

        ? this.deploymentFlagData.xPos

        : this.currentXCoordinate;



      const offsetTop = 20 * this.realPixelRatio;

      const offsetLeft = (70 + xCoordinate) * this.realPixelRatio;
@@ -83,7 +80,6 @@ 
        height: `${height}px`,

      };

    },



    flagOrientation() {

      if (this.currentXCoordinate * this.realPixelRatio > 120) {

        return 'left';
@@ -91,20 +87,17 @@ 
      return 'right';

    },

  },



  methods: {

    seriesMetricValue(series) {

        const index = this.deploymentFlagData ?

          this.deploymentFlagData.seriesIndex :

          this.currentDataIndex;

        const value = series.values[index] &&

          series.values[index].value;

      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;
@@ -114,7 +107,6 @@ 
      }

      return `series ${index + 1}`;

    },



    strokeDashArray(type) {

      if (type === 'dashed') return '6, 3';

      if (type === 'dotted') return '3, 3';