Skip to content

Commit e2ecf31

Browse files
gabriel-rhgabriel-rh
authored
Merge pull request #81403 from gabriel-rh/OBSDOCS-1295
OBSDOCS-1295 dashdoard UI plugin
2 parents 52aa37c + 1bf3388 commit e2ecf31

File tree

5 files changed

+256
-0
lines changed

5 files changed

+256
-0
lines changed

‎_topic_maps/_topic_map.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3068,6 +3068,8 @@ Topics:
30683068
Topics:
30693069
- Name: Observability UI plugins overview
30703070
File: observability-ui-plugins-overview
3071+
- Name: Dashboard UI plugin
3072+
File: dashboard-ui-plugin
30713073
---
30723074
Name: Scalability and performance
30733075
Dir: scalability_and_performance

‎images/coo-custom-dashboard.png

59.3 KB
Loading

‎modules/coo-dashboard-ui-plugin-configure.adoc

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
// Module included in the following assemblies:
2+
3+
// * observability/cluster_observability_operator/ui_plugins/dashboard-ui-plugin.adoc
4+
5+
:_mod-docs-content-type: PROCEDURE
6+
[id="coo-dashboard-ui-plugin-configure-_{context}"]
7+
= Configuring a dashboard
8+
9+
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.
10+
11+
The examples in the following section are taken from link:https://github.com/openshift/console-dashboards-plugin[https://github.com/openshift/console-dashboards-plugin].
12+
13+
.Prerequisites
14+
15+
* You have access to the cluster as a user with the `cluster-admin` cluster role.
16+
* You have logged in to the {product-title} web console.
17+
* You have installed the {coo-full}.
18+
* You have installed the dashboard UI plugin.
19+
20+
.Procedure
21+
22+
. 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]
23+
+
24+
[source,yaml]
25+
----
26+
apiVersion: v1
27+
kind: ConfigMap
28+
metadata:
29+
name: cluster-prometheus-proxy
30+
namespace: openshift-config-managed
31+
labels:
32+
console.openshift.io/dashboard-datasource: "true"
33+
data:
34+
"dashboard-datasource.yaml": |-
35+
kind: "Datasource"
36+
metadata:
37+
name: "cluster-prometheus-proxy"
38+
project: "openshift-config-managed"
39+
spec:
40+
plugin:
41+
kind: "prometheus"
42+
spec:
43+
direct_url: "https://prometheus-k8s.openshift-monitoring.svc.cluster.local:9091"
44+
----
45+
46+
. 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:
47+
+
48+
.Extract from example dashboard, taken from prometheus-dashboard-example.yaml
49+
[%collapsible]
50+
====
51+
[source,yaml]
52+
----
53+
apiVersion: v1
54+
kind: ConfigMap
55+
metadata:
56+
name: dashboard-example
57+
namespace: openshift-config-managed
58+
labels:
59+
console.openshift.io/dashboard: "true"
60+
data:
61+
k8s-resources-workloads-namespace.json: |-
62+
{
63+
"annotations": {
64+
"list": [
65+
66+
]
67+
},
68+
"editable": true,
69+
"gnetId": null,
70+
"graphTooltip": 0,
71+
"hideControls": false,
72+
"links": [
73+
74+
],
75+
"refresh": "10s",
76+
"rows": [
77+
{
78+
"collapse": false,
79+
"height": "250px",
80+
"panels": [
81+
{
82+
"aliasColors": {
83+
84+
},
85+
"bars": false,
86+
"dashLength": 10,
87+
"dashes": false,
88+
"datasource": {
89+
"name": "cluster-prometheus-proxy",
90+
"type": "prometheus"
91+
},
92+
"fill": 10,
93+
"id": 1,
94+
"interval": "1m",
95+
"legend": {
96+
"alignAsTable": true,
97+
"avg": false,
98+
"current": false,
99+
"max": false,
100+
"min": false,
101+
"rightSide": true,
102+
"show": true,
103+
"total": false,
104+
"values": false
105+
},
106+
"lines": true,
107+
"linewidth": 0,
108+
"links": [
109+
110+
],
111+
"nullPointMode": "null as zero",
112+
"percentage": false,
113+
"pointradius": 5,
114+
"points": false,
115+
"renderer": "flot",
116+
"seriesOverrides": [
117+
{
118+
"alias": "quota - requests",
119+
"color": "#F2495C",
120+
"dashes": true,
121+
"fill": 0,
122+
"hiddenSeries": true,
123+
"hideTooltip": true,
124+
"legend": true,
125+
"linewidth": 2,
126+
"stack": false
127+
},
128+
{
129+
"alias": "quota - limits",
130+
"color": "#FF9830",
131+
"dashes": true,
132+
"fill": 0,
133+
"hiddenSeries": true,
134+
"hideTooltip": true,
135+
"legend": true,
136+
"linewidth": 2,
137+
"stack": false
138+
}
139+
],
140+
"spaceLength": 10,
141+
"span": 12,
142+
"stack": false,
143+
"steppedLine": false,
144+
"targets": [
145+
{
146+
"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)",
147+
"format": "time_series",
148+
"intervalFactor": 2,
149+
"legendFormat": "{{workload}} - {{workload_type}}",
150+
"legendLink": null,
151+
"step": 10
152+
},
153+
{
154+
"expr": "scalar(kube_resourcequota{cluster=\"$cluster\", namespace=\"$namespace\", type=\"hard\",resource=\"requests.cpu\"})",
155+
"format": "time_series",
156+
"intervalFactor": 2,
157+
"legendFormat": "quota - requests",
158+
"legendLink": null,
159+
"step": 10
160+
},
161+
{
162+
"expr": "scalar(kube_resourcequota{cluster=\"$cluster\", namespace=\"$namespace\", type=\"hard\",resource=\"limits.cpu\"})",
163+
"format": "time_series",
164+
"intervalFactor": 2,
165+
"legendFormat": "quota - limits",
166+
"legendLink": null,
167+
"step": 10
168+
}
169+
],
170+
"thresholds": [
171+
172+
],
173+
"timeFrom": null,
174+
"timeShift": null,
175+
"title": "CPU Usage",
176+
"tooltip": {
177+
"shared": false,
178+
"sort": 2,
179+
"value_type": "individual"
180+
},
181+
"type": "graph",
182+
"xaxis": {
183+
"buckets": null,
184+
"mode": "time",
185+
"name": null,
186+
"show": true,
187+
"values": [
188+
189+
]
190+
},
191+
...
192+
----
193+
====
194+
195+
. Click *Observe* -> *Dashboards* and the custom dashboard is available with the title ++** DASHBOARD EXAMPLE **++, based on the configuration in `prometheus-dashboard-example.yaml`.
196+
+
197+
image::coo-custom-dashboard.png[]
198+
+
199+
You can set the namespace, time range and refresh interval for the dashboard in the UI.
200+

‎modules/coo-dashboard-ui-plugin-install.adoc

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Module included in the following assemblies:
2+
3+
// * observability/cluster_observability_operator/ui_plugins/dashboard-ui-plugin.adoc
4+
5+
:_mod-docs-content-type: PROCEDURE
6+
[id="coo-dashboard-ui-plugin-install-_{context}"]
7+
= Installing the {coo-full} dashboard UI plugin
8+
9+
10+
.Prerequisites
11+
12+
* You have access to the cluster as a user with the `cluster-admin` cluster role.
13+
* You have logged in to the {product-title} web console.
14+
* You have installed the {coo-full}.
15+
16+
.Procedure
17+
18+
. In the {product-title} web console, click *Operators* -> *Installed Operators* and select {coo-full}.
19+
. Choose the *UI Plugin* tab (at the far right of the tab list) and press *Create UIPlugin*.
20+
. Select *YAML view*, enter the following content, and then press *Create*:
21+
+
22+
[source,yaml]
23+
----
24+
apiVersion: observability.openshift.io/v1alpha1
25+
kind: UIPlugin
26+
metadata:
27+
name: dashboards
28+
spec:
29+
type: Dashboards
30+
----

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
:_mod-docs-content-type: ASSEMBLY
2+
[id="dashboard-ui-plugin"]
3+
= Dashboard UI plugin
4+
include::_attributes/common-attributes.adoc[]
5+
:context: dashboard-ui-plugin
6+
7+
toc::[]
8+
9+
:FeatureName: The Cluster Observability Operator
10+
include::snippets/technology-preview.adoc[leveloffset=+2]
11+
12+
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.
13+
14+
The plugin searches for datasources from `ConfigMap` resources in the `openshift-config-managed` namespace, that have the label `console.openshift.io/dashboard-datasource: 'true'`.
15+
16+
include::modules/coo-dashboard-ui-plugin-install.adoc[leveloffset=+1]
17+
18+
include::modules/coo-dashboard-ui-plugin-configure.adoc[leveloffset=+1]
19+
20+
[role="_additional-resources"]
21+
[id="additional-resources_{context}"]
22+
== Additional resources
23+
24+
* 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.

0 commit comments

Comments
 (0)