gitlab-org--gitlab-foss/app/assets/javascripts/monitoring/constants.js

283 lines
6.6 KiB
JavaScript

export const PROMETHEUS_TIMEOUT = 120000; // TWO_MINUTES
export const dashboardEmptyStates = {
GETTING_STARTED: 'gettingStarted',
LOADING: 'loading',
NO_DATA: 'noData',
UNABLE_TO_CONNECT: 'unableToConnect',
};
/**
* States and error states in Prometheus Queries (PromQL) for metrics
*/
export const metricStates = {
/**
* Metric data is available
*/
OK: 'OK',
/**
* Metric data is being fetched for the first time.
*
* Not used during data refresh, if data is available in
* the metric, the recommneded state is OK.
*/
LOADING: 'LOADING',
/**
* Connection timed out to prometheus server
* the timeout is set to PROMETHEUS_TIMEOUT
*
*/
TIMEOUT: 'TIMEOUT',
/**
* The prometheus server replies with an empty data set
*/
NO_DATA: 'NO_DATA',
/**
* The prometheus server cannot be reached
*/
CONNECTION_FAILED: 'CONNECTION_FAILED',
/**
* The prometheus server was reached but it cannot process
* the query. This can happen for several reasons:
* - PromQL syntax is incorrect
* - An operator is not supported
*/
BAD_QUERY: 'BAD_QUERY',
/**
* No specific reason found for error
*/
UNKNOWN_ERROR: 'UNKNOWN_ERROR',
};
/**
* Supported panel types in dashboards, values of `panel.type`.
*
* Values should not be changed as they correspond to
* values in users the `.yml` dashboard definition.
*/
export const panelTypes = {
/**
* Area Chart
*
* Time Series chart with an area
*/
AREA_CHART: 'area-chart',
/**
* Line Chart
*
* Time Series chart with a line
*/
LINE_CHART: 'line-chart',
/**
* Anomaly Chart
*
* Time Series chart with 3 metrics
*/
ANOMALY_CHART: 'anomaly-chart',
/**
* Single Stat
*
* Single data point visualization
*/
SINGLE_STAT: 'single-stat',
/**
* Gauge
*/
GAUGE_CHART: 'gauge',
/**
* Heatmap
*/
HEATMAP: 'heatmap',
/**
* Bar chart
*/
BAR: 'bar',
/**
* Column chart
*/
COLUMN: 'column',
/**
* Stacked column chart
*/
STACKED_COLUMN: 'stacked-column',
};
export const sidebarAnimationDuration = 300; // milliseconds.
export const chartHeight = 300;
export const graphTypes = {
annotationsData: 'scatter',
};
export const symbolSizes = {
anomaly: 8,
default: 14,
};
export const areaOpacityValues = {
default: 0.2,
};
export const colorValues = {
primaryColor: '#1f78d1', // $blue-500 (see variables.scss)
anomalySymbol: '#db3b21',
anomalyAreaColor: '#1f78d1',
};
export const lineTypes = {
default: 'solid',
};
export const lineWidths = {
default: 2,
};
/**
* User-defined links can be passed in dashboard yml file.
* These are the supported type of links.
*/
export const linkTypes = {
GRAFANA: 'grafana',
};
/**
* These are the supported values for the GitLab-UI
* chart legend layout.
*
* Currently defined in
* https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/utils/charts/constants.js
*
*/
export const legendLayoutTypes = {
inline: 'inline',
table: 'table',
};
/**
* These Vuex store properties are allowed to be
* replaced dynamically after component has been created
* and initial state has been set.
*
* Currently used in `receiveMetricsDashboardSuccess` action.
*/
export const endpointKeys = [
'deploymentsEndpoint',
'dashboardEndpoint',
'dashboardsEndpoint',
'currentDashboard',
'projectPath',
'logsPath',
];
/**
* These Vuex store properties are set as soon as the
* dashboard component has been created. The values are
* passed as data-* attributes and received by dashboard
* as Vue props.
*/
export const initialStateKeys = [...endpointKeys, 'currentEnvironmentName'];
/**
* Constant to indicate if a metric exists in the database
*/
export const NOT_IN_DB_PREFIX = 'NO_DB';
/**
* graphQL environments API value for active environments.
* Used as a value for the 'states' query filter
*/
export const ENVIRONMENT_AVAILABLE_STATE = 'available';
/**
* As of %12.10, the svg icon library does not have an annotation
* arrow icon yet. In order to deliver annotations feature, the icon
* is hard coded until the icon is added. The below issue is
* to track the icon.
*
* https://gitlab.com/gitlab-org/gitlab-svgs/-/issues/118
*
* Once the icon is merged this can be removed.
* https://gitlab.com/gitlab-org/gitlab/-/issues/214540
*/
export const annotationsSymbolIcon = 'path://m5 229 5 8h-10z';
/**
* As of %12.10, dashboard path is required to create annotation.
* The FE gets the dashboard name from the URL params. It is not
* ideal to store the path this way but there is no other way to
* get this path unless annotations fetch is delayed. This could
* potentially be removed and have the backend send this to the FE.
*
* This technical debt is being tracked here
* https://gitlab.com/gitlab-org/gitlab/-/issues/214671
*/
export const OVERVIEW_DASHBOARD_PATH = 'config/prometheus/common_metrics.yml';
/**
* GitLab provide metrics dashboards that are available to a user once
* the Prometheus managed app has been installed, without any extra setup
* required. These "out of the box" dashboards are defined under the
* `config/prometheus` path.
*/
export const OUT_OF_THE_BOX_DASHBOARDS_PATH_PREFIX = 'config/prometheus/';
export const OPERATORS = {
greaterThan: '>',
equalTo: '==',
lessThan: '<',
};
/**
* Dashboard yml files support custom user-defined variables that
* are rendered as input elements in the monitoring dashboard.
* These values can be edited by the user and are passed on to the
* the backend and eventually to Prometheus API proxy.
*
* As of 13.0, the supported types are:
* simple custom -> dropdown elements
* advanced custom -> dropdown elements
* text -> text input elements
*
* Custom variables have a simple and a advanced variant.
*/
export const VARIABLE_TYPES = {
custom: 'custom',
text: 'text',
metric_label_values: 'metric_label_values',
};
/**
* The names of templating variables defined in the dashboard yml
* file are prefixed with a constant so that it doesn't collide with
* other URL params that the monitoring dashboard relies on for
* features like panel fullscreen etc.
*
* The prefix is added before it is appended to the URL and removed
* before passing the data to the backend.
*/
export const VARIABLE_PREFIX = 'var-';
/**
* All of the actions inside each panel dropdown can be accessed
* via keyboard shortcuts than can be activated via mouse hovers
* and or focus via tabs.
*/
export const keyboardShortcutKeys = {
EXPAND: 'e',
VISIT_LOGS: 'l',
SHOW_ALERT: 'a',
DOWNLOAD_CSV: 'd',
CHART_COPY: 'c',
};
export const thresholdModeTypes = {
ABSOLUTE: 'absolute',
PERCENTAGE: 'percentage',
};