metric_embed.vue 3.49 KB
Newer Older
1 2
<script>
import { mapState, mapActions } from 'vuex';
3
import PanelType from '~/monitoring/components/panel_type_with_alerts.vue';
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
import { convertToFixedRange } from '~/lib/utils/datetime_range';
import { defaultTimeRange } from '~/vue_shared/constants';
import { timeRangeFromUrl, removeTimeRangeParams } from '../../utils';
import { sidebarAnimationDuration } from '../../constants';

let sidebarMutationObserver;

export default {
  components: {
    PanelType,
  },
  props: {
    containerClass: {
      type: String,
      required: false,
      default: 'col-lg-12',
    },
    dashboardUrl: {
      type: String,
      required: true,
    },
    namespace: {
      type: String,
      required: false,
      default: 'monitoringDashboard',
    },
  },
  data() {
    const timeRange = timeRangeFromUrl(this.dashboardUrl) || defaultTimeRange;
    return {
      timeRange: convertToFixedRange(timeRange),
      elWidth: 0,
    };
  },
  computed: {
    ...mapState({
      dashboard(state) {
        return state[this.namespace].dashboard;
      },
      metricsWithData(state, getters) {
        return getters[`${this.namespace}/metricsWithData`]();
      },
    }),
    charts() {
      if (!this.dashboard || !this.dashboard.panelGroups) {
        return [];
      }
      return this.dashboard.panelGroups.reduce(
        (acc, currentGroup) => acc.concat(currentGroup.panels.filter(this.chartHasData)),
        [],
      );
    },
    isSingleChart() {
      return this.charts.length === 1;
    },
    embedClass() {
      return this.isSingleChart ? this.containerClass : 'col-lg-12';
    },
    panelClass() {
      return this.isSingleChart ? 'col-lg-12' : 'col-lg-6';
    },
  },
  mounted() {
67 68 69 70
    this.setInitialState({
      dashboardEndpoint: removeTimeRangeParams(this.dashboardUrl),
    });
    this.setShowErrorBanner(false);
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
    this.setTimeRange(this.timeRange);
    this.fetchDashboard();

    sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
    sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
      attributes: true,
      childList: false,
      subtree: false,
    });
  },
  beforeDestroy() {
    if (sidebarMutationObserver) {
      sidebarMutationObserver.disconnect();
    }
  },
  methods: {
    // Use function args to support dynamic namespaces in mapXXX helpers. Pattern described
    // in https://github.com/vuejs/vuex/issues/863#issuecomment-329510765
    ...mapActions({
      setTimeRange(dispatch, payload) {
        return dispatch(`${this.namespace}/setTimeRange`, payload);
      },
      fetchDashboard(dispatch, payload) {
        return dispatch(`${this.namespace}/fetchDashboard`, payload);
      },
96 97
      setInitialState(dispatch, payload) {
        return dispatch(`${this.namespace}/setInitialState`, payload);
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
      },
      setShowErrorBanner(dispatch, payload) {
        return dispatch(`${this.namespace}/setShowErrorBanner`, payload);
      },
    }),
    chartHasData(chart) {
      return chart.metrics.some(metric => this.metricsWithData.includes(metric.metricId));
    },
    onSidebarMutation() {
      setTimeout(() => {
        this.elWidth = this.$el.clientWidth;
      }, sidebarAnimationDuration);
    },
  },
};
</script>
<template>
  <div class="metrics-embed p-0 d-flex flex-wrap" :class="embedClass">
    <panel-type
      v-for="(graphData, graphIndex) in charts"
      :key="`panel-type-${graphIndex}`"
      :class="panelClass"
      :graph-data="graphData"
      :group-id="dashboardUrl"
      :namespace="namespace"
    />
  </div>
</template>