Read about our upcoming Code of Conduct on this issue

panel_type.vue 4.85 KB
Newer Older
1
2
3
<script>
import { mapState } from 'vuex';
import _ from 'underscore';
4
import { __ } from '~/locale';
5
6
7
8
9
10
11
12
import {
  GlDropdown,
  GlDropdownItem,
  GlModal,
  GlModalDirective,
  GlTooltipDirective,
} from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
13
import MonitorTimeSeriesChart from './charts/time_series.vue';
14
import MonitorAnomalyChart from './charts/anomaly.vue';
15
import MonitorSingleStatChart from './charts/single_stat.vue';
16
import MonitorHeatmapChart from './charts/heatmap.vue';
Jose Ivan Vargas's avatar
Jose Ivan Vargas committed
17
import MonitorEmptyChart from './charts/empty_chart.vue';
18
19
import TrackEventDirective from '~/vue_shared/directives/track_event';
import { downloadCSVOptions, generateLinkToChartOptions } from '../utils';
20
21
22
23

export default {
  components: {
    MonitorSingleStatChart,
24
    MonitorHeatmapChart,
Jose Ivan Vargas's avatar
Jose Ivan Vargas committed
25
    MonitorEmptyChart,
26
    Icon,
27
28
29
30
31
32
    GlDropdown,
    GlDropdownItem,
    GlModal,
  },
  directives: {
    GlModal: GlModalDirective,
33
    GlTooltip: GlTooltipDirective,
34
    TrackEvent: TrackEventDirective,
35
36
  },
  props: {
37
38
39
40
    clipboardText: {
      type: String,
      required: true,
    },
41
42
43
44
    graphData: {
      type: Object,
      required: true,
    },
Simon Knox's avatar
Simon Knox committed
45
46
47
48
49
    index: {
      type: String,
      required: false,
      default: '',
    },
50
51
52
53
54
55
  },
  computed: {
    ...mapState('monitoringDashboard', ['deploymentData', 'projectPath']),
    alertWidgetAvailable() {
      return IS_EE && this.prometheusAlertsAvailable && this.alertsEndpoint && this.graphData;
    },
Jose Ivan Vargas's avatar
Jose Ivan Vargas committed
56
    graphDataHasMetrics() {
57
58
59
60
61
      return (
        this.graphData.metrics &&
        this.graphData.metrics[0].result &&
        this.graphData.metrics[0].result.length > 0
      );
Jose Ivan Vargas's avatar
Jose Ivan Vargas committed
62
    },
63
    csvText() {
64
      const chartData = this.graphData.metrics[0].result[0].values;
65
66
67
68
69
70
71
72
73
74
75
      const yLabel = this.graphData.y_label;
      const header = `timestamp,${yLabel}\r\n`; // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
      return chartData.reduce((csv, data) => {
        const row = data.join(',');
        return `${csv}${row}\r\n`;
      }, header);
    },
    downloadCsv() {
      const data = new Blob([this.csvText], { type: 'text/plain' });
      return window.URL.createObjectURL(data);
    },
76
77
78
79
80
81
    monitorChartComponent() {
      if (this.isPanelType('anomaly-chart')) {
        return MonitorAnomalyChart;
      }
      return MonitorTimeSeriesChart;
    },
82
83
84
85
86
87
88
89
90
91
92
93
94
  },
  methods: {
    getGraphAlerts(queries) {
      if (!this.allAlerts) return {};
      const metricIdsForChart = queries.map(q => q.metricId);
      return _.pick(this.allAlerts, alert => metricIdsForChart.includes(alert.metricId));
    },
    getGraphAlertValues(queries) {
      return Object.values(this.getGraphAlerts(queries));
    },
    isPanelType(type) {
      return this.graphData.type && this.graphData.type === type;
    },
95
    showToast() {
96
      this.$toast.show(__('Link copied'));
97
    },
98
99
    downloadCSVOptions,
    generateLinkToChartOptions,
100
101
102
103
  },
};
</script>
<template>
Jose Ivan Vargas's avatar
Jose Ivan Vargas committed
104
105
106
107
  <monitor-single-stat-chart
    v-if="isPanelType('single-stat') && graphDataHasMetrics"
    :graph-data="graphData"
  />
108
109
110
111
112
  <monitor-heatmap-chart
    v-else-if="isPanelType('heatmap') && graphDataHasMetrics"
    :graph-data="graphData"
    :container-width="dashboardWidth"
  />
113
114
  <component
    :is="monitorChartComponent"
Jose Ivan Vargas's avatar
Jose Ivan Vargas committed
115
    v-else-if="graphDataHasMetrics"
116
117
118
    :graph-data="graphData"
    :deployment-data="deploymentData"
    :project-path="projectPath"
119
    :thresholds="getGraphAlertValues(graphData.metrics)"
120
    group-id="panel-type-chart"
121
  >
122
123
124
125
126
    <div class="d-flex align-items-center">
      <alert-widget
        v-if="alertWidgetAvailable && graphData"
        :modal-id="`alert-modal-${index}`"
        :alerts-endpoint="alertsEndpoint"
127
128
        :relevant-queries="graphData.metrics"
        :alerts-to-manage="getGraphAlerts(graphData.metrics)"
129
130
131
132
        @setAlerts="setAlerts"
      />
      <gl-dropdown
        v-gl-tooltip
133
        class="ml-auto mx-3"
134
135
136
137
138
139
140
141
        toggle-class="btn btn-transparent border-0"
        :right="true"
        :no-caret="true"
        :title="__('More actions')"
      >
        <template slot="button-content">
          <icon name="ellipsis_v" class="text-secondary" />
        </template>
142
143
144
145
146
        <gl-dropdown-item
          v-track-event="downloadCSVOptions(graphData.title)"
          :href="downloadCsv"
          download="chart_metrics.csv"
        >
147
148
          {{ __('Download CSV') }}
        </gl-dropdown-item>
149
        <gl-dropdown-item
150
          v-track-event="generateLinkToChartOptions(clipboardText)"
151
152
          class="js-chart-link"
          :data-clipboard-text="clipboardText"
153
          @click="showToast(clipboardText)"
154
155
156
        >
          {{ __('Generate link to chart') }}
        </gl-dropdown-item>
157
158
159
160
161
        <gl-dropdown-item v-if="alertWidgetAvailable" v-gl-modal="`alert-modal-${index}`">
          {{ __('Alerts') }}
        </gl-dropdown-item>
      </gl-dropdown>
    </div>
162
  </component>
Jose Ivan Vargas's avatar
Jose Ivan Vargas committed
163
  <monitor-empty-chart v-else :graph-title="graphData.title" />
164
</template>