Fetch variable options from the Prometheus API to populate dropdown
What does this MR do?
Fetches variable options from the Prometheus API inlining them into the filtering options.
Internally, it adds a new action to load dynamic options from the Prometheus endpoint provided by the backend. New options are loaded and replaced in the variables, allowing the user to select them.
Test this
Use the following dashboard to check ❗ ❗
dashboard: 'Pod metrics'
priority: 10
templating:
variables:
pod_name:
type: metric_label_values
options:
series_selector: 'container_cpu_usage_seconds_total{container_name="POD"}'
label: 'pod_name'
panel_groups:
- group: CPU metrics
panels:
- title: "CPU usage"
type: "line-chart"
y_label: "Cores per pod"
metrics:
- id: pod_cpu_usage_seconds_total
query_range: 'rate(container_cpu_usage_seconds_total{pod_name="{{pod_name}}",container_name="POD"}[5m])'
unit: "cores"
label: pod_name
- group: Memory metrics
panels:
- title: "Memory usage working set"
type: "line-chart"
y_label: "Working set memory (MiB)"
metrics:
- id: pod_memory_working_set
query_range: 'container_memory_working_set_bytes{pod_name="{{pod_name}}",container_name="POD"}/1024/1024'
unit: "MiB"
label: pod_name
- group: Network metrics
panels:
- title: "Network Receive (In)"
type: "line-chart"
y_label: "Received (KiB/sec)"
metrics:
- id: pod_network_receive
query_range: 'rate(container_network_receive_bytes_total{pod_name="{{pod_name}}",container_name="POD"}[5m])/1024'
unit: "KiB / sec"
label: pod_name
- title: "Network Transmit (Out)"
type: "line-chart"
y_label: "Transmitted (KiB/sec)"
metrics:
- id: pod_network_transmit
query_range: 'rate(container_network_transmit_bytes_total{pod_name="{{pod_name}}",container_name="POD"}[5m])/1024'
unit: "KiB / sec"
label: pod_name
- group: Disk metrics
panels:
- title: "Disk Reads"
type: "line-chart"
y_label: "Disk reads (KiB/sec)"
metrics:
- id: pod_disk_reads
query_range: 'rate(container_fs_reads_bytes_total{container_name="POD",pod_name="{{pod_name}}"}[5m])/1024'
unit: "KiB / sec"
label: pod_name
- title: "Disk Writes"
type: "line-chart"
y_label: "Disk writes (KiB/sec)"
metrics:
- id: pod_disk_writes
query_range: 'rate(container_fs_writes_bytes_total{container_name="POD",pod_name="{{pod_name}}"}[5m])/1024'
unit: "KiB / sec"
label: pod_name
Technical Implementation Notes
- I realized that often we will have to keep the
options
of a variable in the vuex store structure, so I opted for following more closely the backend/yml structure, and keep the options as "settings options". - The previous
options
, which populated dropdowns, moved tooptions.values
, similarly to the yml. - I leveraged the
CustomVariable
form field that renders the dropdown and used in for the new variable type.- As the relationship between "variable type" and "field" is not 1-1 anymore, and the component is presentational, I decoupled their names, so the components where renamed to
TextField
andDropdownField
respectively.
- As the relationship between "variable type" and "field" is not 1-1 anymore, and the component is presentational, I decoupled their names, so the components where renamed to
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec
-
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Edited by 🤖 GitLab Bot 🤖