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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
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);
|
