Dashboard UI plugin - Cluster Observability Operator | Observability

Installing the Cluster Observability Operator dashboard UI plugin
Configuring a dashboard
Additional resources

The Cluster Observability Operator is a Technology Preview feature only. Technology Preview features are not supported with Red Hat production service level agreements (SLAs) and might not be functionally complete. Red Hat does not recommend using them in production. These features provide early access to upcoming product features, enabling customers to test functionality and provide feedback during the development process.

For more information about the support scope of Red Hat Technology Preview features, see Technology Preview Features Support Scope.

The dashboard UI plugin supports enhanced dashboards in the OpenShift web console at Observe → Dashboards . You can add other Prometheus datasources from the cluster to the default dashboards, in addition to the in-cluster datasource. This results in a unified observability experience across different data sources.

The plugin searches for datasources from configmap resources in the openshift-config-managed namespace, that have the label console.openshift.io/dashboard-datasource: 'true'.

Installing the Cluster Observability Operator dashboard UI plugin

Prerequisites

You have access to the cluster as a user with the cluster-admin cluster role.
You have logged in to the OKD web console.
You have installed the Cluster Observability Operator.

Procedure

In the OKD web console, click Operators → Installed Operators and select Cluster Observability Operator.
Choose the UI Plugin tab (at the far right of the tab list) and press Create UIPlugin.

Select YAML view, enter the following content, and then press Create:

apiVersion: observability.openshift.io/v1alpha1
kind: UIPlugin
metadata:
  name: dashboards
spec:
  type: Dashboards

Configuring a dashboard

The dashboard UI plugin searches for datasources from configmap resources in the openshift-config-managed namespace, that have the label console.openshift.io/dashboard-datasource: 'true'. The configmap resource must define a datasource type and an in-cluster service where the data can be fetched.

The examples in the following section are taken from https://github.com/openshift/console-dashboards-plugin.

Prerequisites

You have access to the cluster as a user with the cluster-admin cluster role.
You have logged in to the OKD web console.
You have installed the Cluster Observability Operator.
You have installed the dashboard UI plugin.

Procedure

Create a configmap resource in the openshift-config-managed namespace, with the label console.openshift.io/dashboard-datasource: 'true'. The example below is from prometheus-datasource-example.yaml

apiVersion: v1
kind: configmap
metadata:
  name: cluster-prometheus-proxy
  namespace: openshift-config-managed
  labels:
    console.openshift.io/dashboard-datasource: "true"
data:
  "dashboard-datasource.yaml": |-
    kind: "Datasource"
    metadata:
      name: "cluster-prometheus-proxy"
      project: "openshift-config-managed"
    spec:
      plugin:
        kind: "prometheus"
        spec:
          direct_url: "https://prometheus-k8s.openshift-monitoring.svc.cluster.local:9091"

Configure a custom dashboard that connects to the datasource. The YAML for a sample dashboard is available at prometheus-dashboard-example.yaml. An excerpt from that file is shown below for demonstration purposes:

Extract from example dashboard, taken from prometheus-dashboard-example.yaml

apiVersion: v1
kind: configmap
metadata:
  name: dashboard-example
  namespace: openshift-config-managed
  labels:
    console.openshift.io/dashboard: "true"
data:
  k8s-resources-workloads-namespace.json: |-
    {
        "annotations": {
            "list": [

            ]
        },
        "editable": true,
        "gnetId": null,
        "graphTooltip": 0,
        "hideControls": false,
        "links": [

        ],
        "refresh": "10s",
        "rows": [
            {
                "collapse": false,
                "height": "250px",
                "panels": [
                    {
                        "aliasColors": {

                        },
                        "bars": false,
                        "dashLength": 10,
                        "dashes": false,
                        "datasource": {
                            "name": "cluster-prometheus-proxy",
                            "type": "prometheus"
                        },
                        "fill": 10,
                        "id": 1,
                        "interval": "1m",
                        "legend": {
                            "alignAsTable": true,
                            "avg": false,
                            "current": false,
                            "max": false,
                            "min": false,
                            "rightSide": true,
                            "show": true,
                            "total": false,
                            "values": false
                        },
                        "lines": true,
                        "linewidth": 0,
                        "links": [

                        ],
                        "nullPointMode": "null as zero",
                        "percentage": false,
                        "pointradius": 5,
                        "points": false,
                        "renderer": "flot",
                        "seriesOverrides": [
                            {
                                "alias": "quota - requests",
                                "color": "#F2495C",
                                "dashes": true,
                                "fill": 0,
                                "hiddenSeries": true,
                                "hideTooltip": true,
                                "legend": true,
                                "linewidth": 2,
                                "stack": false
                            },
                            {
                                "alias": "quota - limits",
                                "color": "#FF9830",
                                "dashes": true,
                                "fill": 0,
                                "hiddenSeries": true,
                                "hideTooltip": true,
                                "legend": true,
                                "linewidth": 2,
                                "stack": false
                            }
                        ],
                        "spaceLength": 10,
                        "span": 12,
                        "stack": false,
                        "steppedLine": false,
                        "targets": [
                            {
                                "expr": "sum(  node_namespace_pod_container:container_cpu_usage_seconds_total:sum_irate{cluster=\"$cluster\", namespace=\"$namespace\"}* on(namespace,pod)  group_left(workload, workload_type) namespace_workload_pod:kube_pod_owner:relabel{cluster=\"$cluster\", namespace=\"$namespace\", workload_type=\"$type\"}) by (workload, workload_type)",
                                "format": "time_series",
                                "intervalFactor": 2,
                                "legendFormat": "{{workload}} - {{workload_type}}",
                                "legendLink": null,
                                "step": 10
                            },
                            {
                                "expr": "scalar(kube_resourcequota{cluster=\"$cluster\", namespace=\"$namespace\", type=\"hard\",resource=\"requests.cpu\"})",
                                "format": "time_series",
                                "intervalFactor": 2,
                                "legendFormat": "quota - requests",
                                "legendLink": null,
                                "step": 10
                            },
                            {
                                "expr": "scalar(kube_resourcequota{cluster=\"$cluster\", namespace=\"$namespace\", type=\"hard\",resource=\"limits.cpu\"})",
                                "format": "time_series",
                                "intervalFactor": 2,
                                "legendFormat": "quota - limits",
                                "legendLink": null,
                                "step": 10
                            }
                        ],
                        "thresholds": [

                        ],
                        "timeFrom": null,
                        "timeShift": null,
                        "title": "CPU Usage",
                        "tooltip": {
                            "shared": false,
                            "sort": 2,
                            "value_type": "individual"
                        },
                        "type": "graph",
                        "xaxis": {
                            "buckets": null,
                            "mode": "time",
                            "name": null,
                            "show": true,
                            "values": [

                            ]
                        },
...

Click Observe → Dashboards and the custom dashboard is available with the title ** DASHBOARD EXAMPLE **, based on the configuration in prometheus-dashboard-example.yaml.

You can set the namespace, time range and refresh interval for the dashboard in the UI.

Additional resources

See how to add a new datasource in the console-dashboards-plugin GitHub repository.