gitlab-org--gitlab-foss/app/assets/javascripts/monitoring/stores/getters.js

import { NOT_IN_DB_PREFIX } from '../constants';
import {
  addPrefixToCustomVariableParams,
  addDashboardMetaDataToLink,
  normalizeCustomDashboardPath,
} from './utils';

const metricsIdsInPanel = (panel) =>
  panel.metrics
    .filter((metric) => metric.metricId && metric.result)
    .map((metric) => metric.metricId);

/**
 * Returns a reference to the currently selected dashboard
 * from the list of dashboards.
 *
 * @param {Object} state
 */
export const selectedDashboard = (state, getters) => {
  const { allDashboards } = state;
  return (
    allDashboards.find((d) => d.path === getters.fullDashboardPath) ||
    allDashboards.find((d) => d.default) ||
    null
  );
};

/**
 * Get all state for metric in the dashboard or a group. The
 * states are not repeated so the dashboard or group can show
 * a global state.
 *
 * @param {Object} state
 * @returns {Function} A function that returns an array of
 * states in all the metric in the dashboard or group.
 */
export const getMetricStates = (state) => (groupKey) => {
  let groups = state.dashboard.panelGroups;
  if (groupKey) {
    groups = groups.filter((group) => group.key === groupKey);
  }

  const metricStates = groups.reduce((acc, group) => {
    group.panels.forEach((panel) => {
      panel.metrics.forEach((metric) => {
        if (metric.state) {
          acc.push(metric.state);
        }
      });
    });
    return acc;
  }, []);

  // Deduplicate and sort array
  return Array.from(new Set(metricStates)).sort();
};

/**
 * Getter to obtain the list of metric ids that have data
 *
 * Useful to understand which parts of the dashboard should
 * be displayed. It is a Vuex Method-Style Access getter.
 *
 * @param {Object} state
 * @returns {Function} A function that returns an array of
 * metrics in the dashboard that contain results, optionally
 * filtered by group key.
 */
export const metricsWithData = (state) => (groupKey) => {
  let groups = state.dashboard.panelGroups;
  if (groupKey) {
    groups = groups.filter((group) => group.key === groupKey);
  }

  const res = [];
  groups.forEach((group) => {
    group.panels.forEach((panel) => {
      res.push(...metricsIdsInPanel(panel));
    });
  });

  return res;
};

/**
 * Metrics loaded from project-defined dashboards do not have a metric_id.
 * This getter checks which metrics are stored in the db (have a metric id)
 * This is hopefully a temporary solution until BE processes metrics before passing to FE
 *
 * Related:
 * https://gitlab.com/gitlab-org/gitlab/-/issues/28241
 * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27447
 */
export const metricsSavedToDb = (state) => {
  const metricIds = [];
  state.dashboard.panelGroups.forEach(({ panels }) => {
    panels.forEach(({ metrics }) => {
      const metricIdsInDb = metrics
        .filter(({ metricId }) => !metricId.startsWith(NOT_IN_DB_PREFIX))
        .map(({ metricId }) => metricId);

      metricIds.push(...metricIdsInDb);
    });
  });
  return metricIds;
};

/**
 * Filter environments by names.
 *
 * This is used in the environments dropdown with searchable input.
 *
 * @param {Object} state
 * @returns {Array} List of environments
 */
export const filteredEnvironments = (state) =>
  state.environments.filter((env) =>
    env.name.toLowerCase().includes((state.environmentsSearchTerm || '').trim().toLowerCase()),
  );

/**
 * User-defined links from the yml file can have other
 * dashboard-related metadata baked into it. This method
 * returns modified links which will get rendered in the
 * metrics dashboard
 *
 * @param {Object} state
 * @returns {Array} modified array of links
 */
export const linksWithMetadata = (state) => {
  const metadata = {
    timeRange: state.timeRange,
  };
  return state.links?.map(addDashboardMetaDataToLink(metadata));
};

/**
 * Maps a variables array to an object for replacement in
 * prometheus queries.
 *
 * This method outputs an object in the below format
 *
 * {
 *   variables[key1]=value1,
 *   variables[key2]=value2,
 * }
 *
 * This is done so that the backend can identify the custom
 * user-defined variables coming through the URL and differentiate
 * from other variables used for Prometheus API endpoint.
 *
 * @param {Object} state - State containing variables provided by the user
 * @returns {Array} The custom variables object to be send to the API
 * in the format of {variables[key1]=value1, variables[key2]=value2}
 */

export const getCustomVariablesParams = (state) =>
  state.variables.reduce((acc, variable) => {
    const { name, value } = variable;
    if (value !== null) {
      acc[addPrefixToCustomVariableParams(name)] = value;
    }
    return acc;
  }, {});

/**
 * For a given custom dashboard file name, this method
 * returns the full file path.
 *
 * @param {Object} state
 * @returns {String} full dashboard path
 */
export const fullDashboardPath = (state) =>
  normalizeCustomDashboardPath(state.currentDashboard, state.customDashboardBasePath);