Skip to content

Fetch variable options from the Prometheus API to populate dropdown

Miguel Rincon requested to merge 214539-fe-fetch-dynamic-variable-options into master

What does this MR do?

frontend for #214539 (closed)

Fetches variable options from the Prometheus API inlining them into the filtering options.

2020-06-18_18.03.43

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 to options.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 and DropdownField respectively.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

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 🤖

Merge request reports