mgr/dashboard: add tab structure to File Systems page and embed Ceph-Filesystem Overview dashboard

fixes: https://tracker.ceph.com/issues/72039
Signed-off-by: Abhishek Desai <[email protected]>

Author: Abhishek Desai

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html

@@ -1,29 +1,67 @@
-<cd-table [data]="filesystems"
-          columnMode="flex"
-          [columns]="columns"
-          (fetchData)="loadFilesystems($event)"
-          identifier="id"
-          forceIdentifier="true"
-          selectionType="single"
-          [hasDetails]="true"
-          (setExpandedRow)="setExpandedRow($event)"
-          (updateSelection)="updateSelection($event)">
-  <cd-cephfs-tabs *cdTableDetail
-                  [selection]="expandedRow">
-  </cd-cephfs-tabs>
-  <div class="table-actions">
-    <cd-table-actions [permission]="permissions.cephfs"
-                      [selection]="selection"
-                      class="btn-group"
-                      id="cephfs-actions"
-                      [tableActions]="tableActions">
-    </cd-table-actions>
-  </div>
-</cd-table>
+<cds-tabs
+  [type]="'contained'"
+  [followFocus]="true"
+  [isNavigation]="false"
+  [cacheActive]="true"
+  >
+  <cds-tab
+    heading="File systems"
+    i18n-heading
+    [tabContent]="fileSystemListContent">
+  </cds-tab>
+  <cds-tab
+    heading="Overview"
+    i18n-heading
+    [tabContent]="grafanaContent">
+  </cds-tab>
+</cds-tabs>
+
+<ng-template #fileSystemListContent>
+  <cd-table
+    [data]="filesystems"
+    columnMode="flex"
+    [columns]="columns"
+    (fetchData)="loadFilesystems($event)"
+    identifier="id"
+    forceIdentifier="true"
+    selectionType="single"
+    [hasDetails]="true"
+    (setExpandedRow)="setExpandedRow($event)"
+    (updateSelection)="updateSelection($event)"
+  >
+    <cd-cephfs-tabs
+      *cdTableDetail
+      [selection]="expandedRow">
+    </cd-cephfs-tabs>
+    <div class="table-actions">
+      <cd-table-actions
+        [permission]="permissions.cephfs"
+        [selection]="selection"
+        class="btn-group"
+        id="cephfs-actions"
+        [tableActions]="tableActions"
+      >
+      </cd-table-actions>
+    </div>
+  </cd-table>
+</ng-template>
 
 <ng-template #deleteTpl>
   <cd-alert-panel type="danger"
                   i18n>
     This will remove its data and metadata pools. It'll also remove the MDS daemon associated with the volume.
   </cd-alert-panel>
 </ng-template>
+
+<ng-template #grafanaContent>
+  <cd-grafana
+    i18n-title
+    title="CephFS Overview"
+    [grafanaPath]="'ceph-filesystem-overview?'"
+    [type]="'metrics'"
+    uid="718Bruins"
+    *ngIf="permissions.grafana.read"
+    grafanaStyle="two"
+  >
+  </cd-grafana>
+</ng-template>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html

@@ -80,14 +80,14 @@
     <ng-container ngbNavItem="performance-details">
       <a
       ngbNavLink
-      i18n>Performance Details</a>
+      i18n>Overview</a>
       <ng-template ngbNavContent>
         <cd-grafana
           i18n-title
-          title="CephFS MDS performance"
-          [grafanaPath]="'mds-performance?var-mds_servers=mds.' + grafanaId"
+          title="CephFS performance"
+          [grafanaPath]="'ceph-filesystem-overview?var-name=' + details.name"
           [type]="'metrics'"
-          uid="tbO9LAiZz"
+          uid="718Bruins"
           grafanaStyle="one"
         >
         </cd-grafana>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs.module.ts

@@ -47,7 +47,8 @@ import {
   PlaceholderModule,
   SelectModule,
   TimePickerModule,
-  TreeviewModule
+  TreeviewModule,
+  TabsModule
 } from 'carbon-components-angular';
 
 import AddIcon from '@carbon/icons/es/add/32';
@@ -84,7 +85,8 @@ import Trash from '@carbon/icons/es/trash-can/32';
     LayoutModule,
     ComboBoxModule,
     IconModule,
-    BaseChartDirective
+    BaseChartDirective,
+    TabsModule
   ],
   declarations: [
     CephfsDetailComponent,