1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
export const PROMETHEUS_TIMEOUT = 120000; // TWO_MINUTES
/**
* 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',
};
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,
};
export const dateFormats = {
timeOfDay: 'h:MM TT',
default: 'dd mmm yyyy, h:MMTT',
};
/**
* 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 = [
'metricsEndpoint',
'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 DEFAULT_DASHBOARD_PATH = 'config/prometheus/common_metrics.yml';
|
