debian-mirror-gitlab/app/assets/javascripts/monitoring/components/dashboard.vue

<script>
import { mapActions, mapState, mapGetters } from 'vuex';
import VueDraggable from 'vuedraggable';
import Mousetrap from 'mousetrap';
import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
import DashboardHeader from './dashboard_header.vue';
import DashboardPanel from './dashboard_panel.vue';
import { s__ } from '~/locale';
import { deprecatedCreateFlash as createFlash } from '~/flash';
import { ESC_KEY } from '~/lib/utils/keys';
import { mergeUrlParams, updateHistory } from '~/lib/utils/url_utility';
import invalidUrl from '~/lib/utils/invalid_url';
import Icon from '~/vue_shared/components/icon.vue';

import GraphGroup from './graph_group.vue';
import EmptyState from './empty_state.vue';
import GroupEmptyState from './group_empty_state.vue';
import VariablesSection from './variables_section.vue';
import LinksSection from './links_section.vue';

import TrackEventDirective from '~/vue_shared/directives/track_event';
import {
  timeRangeFromUrl,
  panelToUrl,
  expandedPanelPayloadFromUrl,
  convertVariablesForURL,
} from '../utils';
import { metricStates, keyboardShortcutKeys } from '../constants';
import { defaultTimeRange } from '~/vue_shared/constants';

export default {
  components: {
    VueDraggable,
    DashboardHeader,
    DashboardPanel,
    Icon,
    GlButton,
    GraphGroup,
    EmptyState,
    GroupEmptyState,
    VariablesSection,
    LinksSection,
  },
  directives: {
    GlModal: GlModalDirective,
    GlTooltip: GlTooltipDirective,
    TrackEvent: TrackEventDirective,
  },
  props: {
    hasMetrics: {
      type: Boolean,
      required: false,
      default: true,
    },
    showHeader: {
      type: Boolean,
      required: false,
      default: true,
    },
    showPanels: {
      type: Boolean,
      required: false,
      default: true,
    },
    documentationPath: {
      type: String,
      required: true,
    },
    settingsPath: {
      type: String,
      required: true,
    },
    clustersPath: {
      type: String,
      required: true,
    },
    tagsPath: {
      type: String,
      required: true,
    },
    defaultBranch: {
      type: String,
      required: false,
      default: '',
    },
    emptyGettingStartedSvgPath: {
      type: String,
      required: true,
    },
    emptyLoadingSvgPath: {
      type: String,
      required: true,
    },
    emptyNoDataSvgPath: {
      type: String,
      required: true,
    },
    emptyNoDataSmallSvgPath: {
      type: String,
      required: true,
    },
    emptyUnableToConnectSvgPath: {
      type: String,
      required: true,
    },
    customMetricsAvailable: {
      type: Boolean,
      required: false,
      default: false,
    },
    customMetricsPath: {
      type: String,
      required: false,
      default: invalidUrl,
    },
    validateQueryPath: {
      type: String,
      required: false,
      default: invalidUrl,
    },
    smallEmptyState: {
      type: Boolean,
      required: false,
      default: false,
    },
    alertsEndpoint: {
      type: String,
      required: false,
      default: null,
    },
    prometheusAlertsAvailable: {
      type: Boolean,
      required: false,
      default: false,
    },
    rearrangePanelsAvailable: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      selectedTimeRange: timeRangeFromUrl() || defaultTimeRange,
      isRearrangingPanels: false,
      originalDocumentTitle: document.title,
      hoveredPanel: '',
    };
  },
  computed: {
    ...mapState('monitoringDashboard', [
      'dashboard',
      'emptyState',
      'expandedPanel',
      'variables',
      'links',
      'currentDashboard',
      'hasDashboardValidationWarnings',
    ]),
    ...mapGetters('monitoringDashboard', ['selectedDashboard', 'getMetricStates']),
    shouldShowEmptyState() {
      return Boolean(this.emptyState);
    },
    shouldShowVariablesSection() {
      return Boolean(this.variables.length);
    },
    shouldShowLinksSection() {
      return Object.keys(this.links).length > 0;
    },
  },
  watch: {
    dashboard(newDashboard) {
      try {
        const expandedPanel = expandedPanelPayloadFromUrl(newDashboard);
        if (expandedPanel) {
          this.setExpandedPanel(expandedPanel);
        }
      } catch {
        createFlash(
          s__(
            'Metrics|Link contains invalid chart information, please verify the link to see the expanded panel.',
          ),
        );
      }
    },
    expandedPanel: {
      handler({ group, panel }) {
        const dashboardPath = this.currentDashboard || this.selectedDashboard?.path;
        updateHistory({
          url: panelToUrl(dashboardPath, convertVariablesForURL(this.variables), group, panel),
          title: document.title,
        });
      },
      deep: true,
    },
    selectedDashboard(dashboard) {
      this.prependToDocumentTitle(dashboard?.display_name);
    },
    hasDashboardValidationWarnings(hasWarnings) {
      /**
       * This watcher is set for future SPA behaviour of the dashboard
       */
      if (hasWarnings) {
        createFlash(
          s__(
            'Metrics|Your dashboard schema is invalid. Edit the dashboard to correct the YAML schema.',
          ),
          'warning',
        );
      }
    },
  },
  created() {
    window.addEventListener('keyup', this.onKeyup);

    Mousetrap.bind(Object.values(keyboardShortcutKeys), this.runShortcut);
  },
  destroyed() {
    window.removeEventListener('keyup', this.onKeyup);

    Mousetrap.unbind(Object.values(keyboardShortcutKeys));
  },
  mounted() {
    if (!this.hasMetrics) {
      this.setGettingStartedEmptyState();
    } else {
      this.setTimeRange(this.selectedTimeRange);
      this.fetchData();
    }
  },
  methods: {
    ...mapActions('monitoringDashboard', [
      'setTimeRange',
      'fetchData',
      'setGettingStartedEmptyState',
      'setPanelGroupMetrics',
      'setExpandedPanel',
      'clearExpandedPanel',
    ]),
    updatePanels(key, panels) {
      this.setPanelGroupMetrics({
        panels,
        key,
      });
    },
    removePanel(key, panels, graphIndex) {
      this.setPanelGroupMetrics({
        panels: panels.filter((v, i) => i !== graphIndex),
        key,
      });
    },
    generatePanelUrl(groupKey, panel) {
      const dashboardPath = this.currentDashboard || this.selectedDashboard?.path;
      return panelToUrl(dashboardPath, convertVariablesForURL(this.variables), groupKey, panel);
    },
    /**
     * Return a single empty state for a group.
     *
     * If all states are the same a single state is returned to be displayed
     * Except if the state is OK, in which case the group is displayed.
     *
     * @param {String} groupKey - Identifier for group
     * @returns {String} state code from `metricStates`
     */
    groupSingleEmptyState(groupKey) {
      const states = this.getMetricStates(groupKey);
      if (states.length === 1 && states[0] !== metricStates.OK) {
        return states[0];
      }
      return null;
    },
    /**
     * Return true if the entire group is loading.
     * @param {String} groupKey - Identifier for group
     * @returns {boolean}
     */
    isGroupLoading(groupKey) {
      return this.groupSingleEmptyState(groupKey) === metricStates.LOADING;
    },
    /**
     * A group should be not collapsed if any metric is loaded (OK)
     *
     * @param {String} groupKey - Identifier for group
     * @returns {Boolean} If the group should be collapsed
     */
    collapseGroup(groupKey) {
      // Collapse group if no data is available
      return !this.getMetricStates(groupKey).includes(metricStates.OK);
    },
    prependToDocumentTitle(text) {
      if (text) {
        document.title = `${text} · ${this.originalDocumentTitle}`;
      }
    },
    onTimeRangeZoom({ start, end }) {
      updateHistory({
        url: mergeUrlParams({ start, end }, window.location.href),
        title: document.title,
      });
      this.selectedTimeRange = { start, end };
      // keep the current dashboard time range
      // in sync with the Vuex store
      this.setTimeRange(this.selectedTimeRange);
    },
    onExpandPanel(group, panel) {
      this.setExpandedPanel({ group, panel });
    },
    onGoBack() {
      this.clearExpandedPanel();
    },
    onKeyup(event) {
      const { key } = event;
      if (key === ESC_KEY) {
        this.clearExpandedPanel();
      }
    },
    onSetRearrangingPanels(isRearrangingPanels) {
      this.isRearrangingPanels = isRearrangingPanels;
    },
    onDateTimePickerInvalid() {
      createFlash(
        s__(
          'Metrics|Link contains an invalid time window, please verify the link to see the requested time range.',
        ),
      );
      // As a fallback, switch to default time range instead
      this.selectedTimeRange = defaultTimeRange;
    },
    isPanelHalfWidth(panelIndex, totalPanels) {
      /**
       * A single panel on a row should take the full width of its parent.
       * All others should have half the width their parent.
       */
      const isNumberOfPanelsEven = totalPanels % 2 === 0;
      const isLastPanel = panelIndex === totalPanels - 1;

      return isNumberOfPanelsEven || !isLastPanel;
    },
    /**
     * TODO: Investigate this to utilize the eventBus from Vue
     * The intentation behind this cleanup is to allow for better tests
     * as well as use the correct eventBus facilities that are compatible
     * with Vue 3
     * https://gitlab.com/gitlab-org/gitlab/-/issues/225583
     */
    //
    runShortcut(e) {
      const panel = this.$refs[this.hoveredPanel];

      if (!panel) return;

      const [panelInstance] = panel;
      let actionToRun = '';

      switch (e.key) {
        case keyboardShortcutKeys.EXPAND:
          actionToRun = 'onExpandFromKeyboardShortcut';
          break;

        case keyboardShortcutKeys.VISIT_LOGS:
          actionToRun = 'visitLogsPageFromKeyboardShortcut';
          break;

        case keyboardShortcutKeys.SHOW_ALERT:
          actionToRun = 'showAlertModalFromKeyboardShortcut';
          break;

        case keyboardShortcutKeys.DOWNLOAD_CSV:
          actionToRun = 'downloadCsvFromKeyboardShortcut';
          break;

        case keyboardShortcutKeys.CHART_COPY:
          actionToRun = 'copyChartLinkFromKeyboardShotcut';
          break;

        default:
          actionToRun = 'onExpandFromKeyboardShortcut';
          break;
      }

      panelInstance[actionToRun]();
    },
    setHoveredPanel(groupKey, graphIndex) {
      this.hoveredPanel = `dashboard-panel-${groupKey}-${graphIndex}`;
    },
    clearHoveredPanel() {
      this.hoveredPanel = '';
    },
  },
  i18n: {
    collapsePanelLabel: s__('Metrics|Collapse panel'),
    collapsePanelTooltip: s__('Metrics|Collapse panel (Esc)'),
  },
};
</script>

<template>
  <div class="prometheus-graphs" data-qa-selector="prometheus_graphs">
    <dashboard-header
      v-if="showHeader"
      ref="prometheusGraphsHeader"
      class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
      :default-branch="defaultBranch"
      :rearrange-panels-available="rearrangePanelsAvailable"
      :custom-metrics-available="customMetricsAvailable"
      :custom-metrics-path="customMetricsPath"
      :validate-query-path="validateQueryPath"
      :is-rearranging-panels="isRearrangingPanels"
      :selected-time-range="selectedTimeRange"
      @dateTimePickerInvalid="onDateTimePickerInvalid"
      @setRearrangingPanels="onSetRearrangingPanels"
    />
    <template v-if="!shouldShowEmptyState">
      <variables-section v-if="shouldShowVariablesSection" />
      <links-section v-if="shouldShowLinksSection" />
      <dashboard-panel
        v-show="expandedPanel.panel"
        ref="expandedPanel"
        :settings-path="settingsPath"
        :clipboard-text="generatePanelUrl(expandedPanel.group, expandedPanel.panel)"
        :graph-data="expandedPanel.panel"
        :alerts-endpoint="alertsEndpoint"
        :height="600"
        :prometheus-alerts-available="prometheusAlertsAvailable"
        @timerangezoom="onTimeRangeZoom"
      >
        <template #topLeft>
          <gl-button
            ref="goBackBtn"
            v-gl-tooltip
            class="mr-3 my-3"
            :title="$options.i18n.collapsePanelTooltip"
            @click="onGoBack"
          >
            {{ $options.i18n.collapsePanelLabel }}
          </gl-button>
        </template>
      </dashboard-panel>

      <div v-show="!expandedPanel.panel">
        <graph-group
          v-for="groupData in dashboard.panelGroups"
          :key="`${groupData.group}.${groupData.priority}`"
          :name="groupData.group"
          :show-panels="showPanels"
          :is-loading="isGroupLoading(groupData.key)"
          :collapse-group="collapseGroup(groupData.key)"
        >
          <vue-draggable
            v-if="!groupSingleEmptyState(groupData.key)"
            :value="groupData.panels"
            group="metrics-dashboard"
            :component-data="{ attrs: { class: 'row mx-0 w-100' } }"
            :disabled="!isRearrangingPanels"
            @input="updatePanels(groupData.key, $event)"
          >
            <div
              v-for="(graphData, graphIndex) in groupData.panels"
              :key="`dashboard-panel-${graphIndex}`"
              data-testid="dashboard-panel-layout-wrapper"
              class="col-12 px-2 mb-2 draggable"
              :class="{
                'draggable-enabled': isRearrangingPanels,
                'col-lg-6': isPanelHalfWidth(graphIndex, groupData.panels.length),
              }"
              @mouseover="setHoveredPanel(groupData.key, graphIndex)"
              @mouseout="clearHoveredPanel"
            >
              <div class="position-relative draggable-panel js-draggable-panel">
                <div
                  v-if="isRearrangingPanels"
                  class="draggable-remove js-draggable-remove p-2 w-100 position-absolute d-flex justify-content-end"
                  @click="removePanel(groupData.key, groupData.panels, graphIndex)"
                >
                  <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')">
                    <icon name="close" />
                  </a>
                </div>

                <dashboard-panel
                  :ref="`dashboard-panel-${groupData.key}-${graphIndex}`"
                  :settings-path="settingsPath"
                  :clipboard-text="generatePanelUrl(groupData.group, graphData)"
                  :graph-data="graphData"
                  :alerts-endpoint="alertsEndpoint"
                  :prometheus-alerts-available="prometheusAlertsAvailable"
                  @timerangezoom="onTimeRangeZoom"
                  @expand="onExpandPanel(groupData.group, graphData)"
                />
              </div>
            </div>
          </vue-draggable>
          <div v-else class="py-5 col col-sm-10 col-md-8 col-lg-7 col-xl-6">
            <group-empty-state
              ref="empty-group"
              :documentation-path="documentationPath"
              :settings-path="settingsPath"
              :selected-state="groupSingleEmptyState(groupData.key)"
              :svg-path="emptyNoDataSmallSvgPath"
            />
          </div>
        </graph-group>
      </div>
    </template>
    <empty-state
      v-else
      :selected-state="emptyState"
      :documentation-path="documentationPath"
      :settings-path="settingsPath"
      :clusters-path="clustersPath"
      :empty-getting-started-svg-path="emptyGettingStartedSvgPath"
      :empty-loading-svg-path="emptyLoadingSvgPath"
      :empty-no-data-svg-path="emptyNoDataSvgPath"
      :empty-no-data-small-svg-path="emptyNoDataSmallSvgPath"
      :empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
      :compact="smallEmptyState"
    />
  </div>
</template>