From f4484373961a3dde4b914ae71551719001c5e5ee Mon Sep 17 00:00:00 2001
From: nsedrickm <nsedrick101@gmail.com>
Date: Mon, 11 Jul 2022 21:37:45 +0100
Subject: [PATCH] mgr/dashboard: Improve level A accessibility for grafana
 component

*Add descriptive iframe titles for embedded grafana panels

Fixes: https://tracker.ceph.com/issues/55890
Signed-off-by: nsedrickm <nsedrick101@gmail.com>
---
 .../app/ceph/block/rbd-details/rbd-details.component.html | 4 +++-
 .../block/rbd-performance/rbd-performance.component.html  | 4 +++-
 .../ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html    | 4 +++-
 .../hosts/host-details/host-details.component.html        | 4 +++-
 .../src/app/ceph/cluster/hosts/hosts.component.html       | 4 +++-
 .../src/app/ceph/cluster/logs/logs.component.html         | 4 +++-
 .../cluster/osd/osd-details/osd-details.component.html    | 4 +++-
 .../app/ceph/cluster/osd/osd-list/osd-list.component.html | 4 +++-
 .../ceph/pool/pool-details/pool-details.component.html    | 4 +++-
 .../src/app/ceph/pool/pool-list/pool-list.component.html  | 4 +++-
 .../rgw-daemon-details/rgw-daemon-details.component.html  | 4 +++-
 .../rgw/rgw-daemon-list/rgw-daemon-list.component.html    | 8 ++++++--
 .../app/shared/components/grafana/grafana.component.html  | 4 +++-
 .../shared/components/grafana/grafana.component.spec.ts   | 1 +
 .../app/shared/components/grafana/grafana.component.ts    | 2 ++
 15 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
index 8614dfe72bc..3490daabe43 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
@@ -149,7 +149,9 @@
       <a ngbNavLink
          i18n>Performance</a>
       <ng-template ngbNavContent>
-        <cd-grafana [grafanaPath]="rbdDashboardUrl"
+        <cd-grafana i18n-title
+                    title="RBD details"
+                    [grafanaPath]="rbdDashboardUrl"
                     [type]="'metrics'"
                     uid="YhCYGcuZz"
                     grafanaStyle="one">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-performance/rbd-performance.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-performance/rbd-performance.component.html
index e8116ea2a86..01f69dcbceb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-performance/rbd-performance.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-performance/rbd-performance.component.html
@@ -1,6 +1,8 @@
 <cd-rbd-tabs></cd-rbd-tabs>
 
-<cd-grafana [grafanaPath]="'rbd-overview?'"
+<cd-grafana i18n-title
+            title="RBD overview"
+            [grafanaPath]="'rbd-overview?'"
             [type]="'metrics'"
             uid="41FrpeUiz"
             grafanaStyle="two">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
index 830645d2b6f..d2f7ad4b05b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
@@ -35,7 +35,9 @@
       <a ngbNavLink
          i18n>Performance Details</a>
       <ng-template ngbNavContent>
-        <cd-grafana [grafanaPath]="'mds-performance?var-mds_servers=mds.' + grafanaId"
+        <cd-grafana i18n-title
+                    title="CephFS MDS performance"
+                    [grafanaPath]="'mds-performance?var-mds_servers=mds.' + grafanaId"
                     [type]="'metrics'"
                     uid="tbO9LAiZz"
                     grafanaStyle="one">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
index 5803776d0aa..7bda5c520a6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
@@ -34,7 +34,9 @@
       <a ngbNavLink
          i18n>Performance Details</a>
       <ng-template ngbNavContent>
-        <cd-grafana [grafanaPath]="'host-details?var-ceph_hosts=' + selectedHostname"
+        <cd-grafana i18n-title
+                    title="Host details"
+                    [grafanaPath]="'host-details?var-ceph_hosts=' + selectedHostname"
                     [type]="'metrics'"
                     uid="rtOg0AiWz"
                     grafanaStyle="four">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
index b8a17135af4..a6c597cd823 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
@@ -35,7 +35,9 @@
     <a ngbNavLink
        i18n>Overall Performance</a>
     <ng-template ngbNavContent>
-      <cd-grafana [grafanaPath]="'host-overview?'"
+      <cd-grafana i18n-title
+                  title="Host overview"
+                  [grafanaPath]="'host-overview?'"
                   [type]="'metrics'"
                   uid="y0KGL0iZz"
                   grafanaStyle="two">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
index 5c84673698a..f233617422f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
@@ -73,7 +73,9 @@
       <ng-template ngbNavContent>
         <ng-container *ngIf="lokiServiceStatus$ | async as lokiServiceStatus; else daemonLogsTpl">
           <div *ngIf="promtailServiceStatus$ | async as promtailServiceStatus; else daemonLogsTpl">
-            <cd-grafana [grafanaPath]="'explore?'"
+            <cd-grafana i18n-title
+                        title="Daemon logs"
+                        [grafanaPath]="'explore?'"
                         [type]="'logs'"
                         uid="CrAHE0iZz"
                         grafanaStyle="two">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
index 56eee8c8b9c..fbee639d2e2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
@@ -55,7 +55,9 @@
       <a ngbNavLink
          i18n>Performance Details</a>
       <ng-template ngbNavContent>
-        <cd-grafana [grafanaPath]="'osd-device-details?var-osd=osd.' + osd['id']"
+        <cd-grafana i18n-title
+                    title="OSD details"
+                    [grafanaPath]="'osd-device-details?var-osd=osd.' + osd['id']"
                     [type]="'metrics'"
                     uid="CrAHE0iZz"
                     grafanaStyle="three">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index afec81d9d19..dc906d81457 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -43,7 +43,9 @@
     <a ngbNavLink
        i18n>Overall Performance</a>
     <ng-template ngbNavContent>
-      <cd-grafana [grafanaPath]="'osd-overview?'"
+      <cd-grafana i18n-title
+                  title="OSD list"
+                  [grafanaPath]="'osd-overview?'"
                   [type]="'metrics'"
                   uid="lo02I1Aiz"
                   grafanaStyle="four">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html
index 40d71dd0e32..b9c197aefda 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html
@@ -19,7 +19,9 @@
       <a ngbNavLink
          i18n>Performance Details</a>
       <ng-template ngbNavContent>
-        <cd-grafana grafanaPath="ceph-pool-detail?var-pool_name={{selection.pool_name}}"
+        <cd-grafana i18n-title
+                    title="Pool details"
+                    grafanaPath="ceph-pool-detail?var-pool_name={{selection.pool_name}}"
                     [type]="'metrics'"
                     uid="-xyV8KCiz"
                     grafanaStyle="three">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
index bd568a9107e..42a8f8b0d73 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
@@ -37,7 +37,9 @@
     <a ngbNavLink
        i18n>Overall Performance</a>
     <ng-template ngbNavContent>
-      <cd-grafana [grafanaPath]="'ceph-pools-overview?'"
+      <cd-grafana i18n-title
+                  title="Ceph pools overview"
+                  [grafanaPath]="'ceph-pools-overview?'"
                   [type]="'metrics'"
                   uid="z99hzWtmk"
                   grafanaStyle="two">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
index f10394342b1..20b3f5ed8c5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
@@ -26,7 +26,9 @@
       <a ngbNavLink
          i18n>Performance Details</a>
       <ng-template ngbNavContent>
-        <cd-grafana [grafanaPath]="'rgw-instance-detail?var-rgw_servers=rgw.' + this.serviceId"
+        <cd-grafana i18n-title
+                    title="RGW instance details"
+                    [grafanaPath]="'rgw-instance-detail?var-rgw_servers=rgw.' + this.serviceId"
                     [type]="'metrics'"
                     uid="x5ARzZtmk"
                     grafanaStyle="one">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
index e5b01305706..88e82314f21 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
@@ -23,7 +23,9 @@
     <a ngbNavLink
        i18n>Overall Performance</a>
     <ng-template ngbNavContent>
-      <cd-grafana [grafanaPath]="'rgw-overview?'"
+      <cd-grafana i18n-title
+                  title="RGW overview"
+                  [grafanaPath]="'rgw-overview?'"
                   [type]="'metrics'"
                   uid="WAkugZpiz"
                   grafanaStyle="two">
@@ -36,7 +38,9 @@
     <a ngbNavLink
        i18n>Sync Performance</a>
     <ng-template ngbNavContent>
-      <cd-grafana [grafanaPath]="'radosgw-sync-overview?'"
+      <cd-grafana i18n-title
+                  title="Radosgw sync overview"
+                  [grafanaPath]="'radosgw-sync-overview?'"
                   [type]="'metrics'"
                   uid="rgw-sync-overview"
                   grafanaStyle="two">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
index 8ad98b27f47..ba5f4c3c707 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
@@ -70,7 +70,9 @@
                 class="grafana"
                 [ngClass]="panelStyle"
                 frameborder="0"
-                scrolling="no">
+                scrolling="no"
+                [title]="title"
+                i18n-title>
         </iframe>
       </div>
     </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
index 5052ef9ec6e..07fd97965ce 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
@@ -35,6 +35,7 @@ describe('GrafanaComponent', () => {
     component.grafanaPath = 'somePath';
     component.type = 'metrics';
     component.uid = 'foo';
+    component.title = 'panel title';
   });
 
   it('should create', () => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
index e7f3f5dc990..d82d414ae95 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
@@ -37,6 +37,8 @@ export class GrafanaComponent implements OnInit, OnChanges {
   grafanaStyle: string;
   @Input()
   uid: string;
+  @Input()
+  title: string;
 
   constructor(private sanitizer: DomSanitizer, private settingsService: SettingsService) {
     this.grafanaTimes = [
-- 
2.39.5