Skip to content

[enterprise-4.13] OBSDOCS-1295 dashdoard UI plugin #82133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 19, 2024
Merged

[enterprise-4.13] OBSDOCS-1295 dashdoard UI plugin #82133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions _topic_maps/_topic_map.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2809,6 +2809,8 @@ Topics:
Topics:
- Name: Observability UI plugins overview
File: observability-ui-plugins-overview
- Name: Dashboard UI plugin
File: dashboard-ui-plugin
---
Name: Scalability and performance
Dir: scalability_and_performance
Expand Down
Binary file added images/coo-custom-dashboard.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
200 changes: 200 additions & 0 deletions modules/coo-dashboard-ui-plugin-configure.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
// Module included in the following assemblies:

// * observability/cluster_observability_operator/ui_plugins/dashboard-ui-plugin.adoc

:_mod-docs-content-type: PROCEDURE
[id="coo-dashboard-ui-plugin-configure-_{context}"]
= 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 link:https://github.com/openshift/console-dashboards-plugin[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 {product-title} web console.
* You have installed the {coo-full}.
* 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 link:https://github.com/openshift/console-dashboards-plugin/blob/main/docs/prometheus-datasource-example.yaml[prometheus-datasource-example.yaml]
+
[source,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 link:https://github.com/openshift/console-dashboards-plugin/blob/main/docs/prometheus-dashboard-example.yaml[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
[%collapsible]
====
[source,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`.
+
image::coo-custom-dashboard.png[]
+
You can set the namespace, time range and refresh interval for the dashboard in the UI.

30 changes: 30 additions & 0 deletions modules/coo-dashboard-ui-plugin-install.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// Module included in the following assemblies:

// * observability/cluster_observability_operator/ui_plugins/dashboard-ui-plugin.adoc

:_mod-docs-content-type: PROCEDURE
[id="coo-dashboard-ui-plugin-install-_{context}"]
= Installing the {coo-full} 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 {product-title} web console.
* You have installed the {coo-full}.

.Procedure

. In the {product-title} web console, click *Operators* -> *Installed Operators* and select {coo-full}.
. 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*:
+
[source,yaml]
----
apiVersion: observability.openshift.io/v1alpha1
kind: UIPlugin
metadata:
name: dashboards
spec:
type: Dashboards
----
24 changes: 24 additions & 0 deletions observability/cluster_observability_operator/ui_plugins/dashboard-ui-plugin.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
:_mod-docs-content-type: ASSEMBLY
[id="dashboard-ui-plugin"]
= Dashboard UI plugin
include::_attributes/common-attributes.adoc[]
:context: dashboard-ui-plugin

toc::[]

:FeatureName: The Cluster Observability Operator
include::snippets/technology-preview.adoc[leveloffset=+2]

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'`.

include::modules/coo-dashboard-ui-plugin-install.adoc[leveloffset=+1]

include::modules/coo-dashboard-ui-plugin-configure.adoc[leveloffset=+1]

[role="_additional-resources"]
[id="additional-resources_{context}"]
== Additional resources

* See how to link:https://github.com/openshift/console-dashboards-plugin/blob/main/docs/add-datasource.md[add a new datasource] in the link:https://github.com/openshift/console-dashboards-plugin[console-dashboards-plugin] GitHub repository.