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>

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 8614dfe72bccbd50973ceca123652e908760aee4..3490daabe43971cefeff8fae65b8c619bd733a95 100644 (file)
--- 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 e8116ea2a86d2b3af772b5bcc9cd2237ab752ab6..01f69dcbcebd4f4876d6723c7480b1c19c744fc7 100644 (file)
--- 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 830645d2b6fca0a2a43c5f483254f14b8313c7b9..d2f7ad4b05b8b9ec83671989cbffbe3aef031137 100644 (file)
--- 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 5803776d0aaefb28813c17accc2495a01386f7d7..7bda5c520a61cf9a7219c8755591add9949cb6d7 100644 (file)
--- 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 b8a17135af4379336f6f6c00176e0769e7d534c7..a6c597cd823a594cce886d00b0dc974af8a01c58 100644 (file)
--- 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 5c84673698a00c3052bf634e004f27e5c02d59f9..f233617422f9555dffac67f04c79b803e51b5030 100644 (file)
--- 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 56eee8c8b9c432dba8c8b46c73f8fd417db8448b..fbee639d2e2147858edea9e0a90fcc8dae18d3d9 100644 (file)
--- 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 afec81d9d1971e2446d5b36768329ee7ae8ecc01..dc906d814575b0c067c5ec69fd5f9448bcaa7bd6 100644 (file)
--- 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 40d71dd0e32182f39d87120bc02f45dcc0ed8d01..b9c197aefda2914382411f42518f3011f75a75e0 100644 (file)
--- 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 bd568a9107ea03d1a93453e4c51927305106bc59..42a8f8b0d737b7edd8b5a15191a93e7fe217df55 100644 (file)
--- 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 f10394342b1381e0eef7c587bad937fb63e8ff18..20b3f5ed8c5c613c80f44975987c68461da19982 100644 (file)
--- 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 e5b01305706ae81ec6e2450f3ae5ec1486dcafc8..88e82314f21c7cf1a1d192264bb5cd43be4c9445 100644 (file)
--- 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 8ad98b27f47e7bf11b0e394503dfd7ddf7109efc..ba5f4c3c70769a1defef272b293be494c086bbd6 100644 (file)
--- 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 5052ef9ec6e822eac104b8b9c6f13077c0af1c78..07fd97965cedb7dd23625f28e9c2b826a4898fb4 100644 (file)
--- 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 e7f3f5dc990b34bfd76c1f71439794f606f567be..d82d414ae955cb07170accf364ae16edb459bdad 100644 (file)
--- 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 = [