281 lines
6.6 KiB
JavaScript
281 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',
|
|
];
|
|
|
|
/**
|
|
* 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',
|
|
SHOW_ALERT: 'a',
|
|
DOWNLOAD_CSV: 'd',
|
|
CHART_COPY: 'c',
|
|
};
|
|
|
|
export const thresholdModeTypes = {
|
|
ABSOLUTE: 'absolute',
|
|
PERCENTAGE: 'percentage',
|
|
};
|