]> git.proxmox.com Git - ceph.git/blobdiff - ceph/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
import quincy beta 17.1.0
[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / core / navigation / navigation / navigation.component.html
index a98f042c1c3799be5da058ae4354932c6ebd85ea..bdb35a610d973036def487cee01a53bbfc5acf63 100644 (file)
-<cd-pwd-expiration-notification></cd-pwd-expiration-notification>
-<cd-telemetry-notification></cd-telemetry-notification>
-<cd-motd></cd-motd>
-<cd-notifications-sidebar></cd-notifications-sidebar>
+<div class="cd-navbar-main">
+  <cd-pwd-expiration-notification></cd-pwd-expiration-notification>
+  <cd-telemetry-notification></cd-telemetry-notification>
+  <cd-motd></cd-motd>
+  <cd-notifications-sidebar></cd-notifications-sidebar>
+  <div class="cd-navbar-top">
+    <nav class="navbar navbar-expand-md navbar-dark cd-navbar-brand">
+      <button class="btn btn-link py-0"
+              (click)="showMenuSidebar = !showMenuSidebar"
+              aria-label="toggle sidebar visibility">
+        <i class="fa fa-bars fa-2x"
+           aria-hidden="true"></i>
+      </button>
 
-<div class="cd-navbar-top">
-  <nav class="navbar fixed-top navbar-expand-md navbar-dark cd-navbar-brand">
-    <button class="btn btn-link py-0"
-            (click)="showMenuSidebar = !showMenuSidebar">
-      <i class="fa fa-bars fa-2x"
-         aria-hidden="true"></i>
-    </button>
-
-    <a class="navbar-brand ml-2"
-       href="#">
-      <img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
-           alt="Ceph" />
-    </a>
+      <a class="navbar-brand ml-2"
+         href="#">
+        <img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
+             alt="Ceph" />
+      </a>
 
-    <button type="button"
-            class="navbar-toggler"
-            (click)="toggleRightSidebar()">
-      <span i18n
-            class="sr-only">Toggle navigation</span>
-      <span class="">
-        <i class="fa fa-navicon fa-lg"></i>
-      </span>
-    </button>
+      <button type="button"
+              class="navbar-toggler"
+              (click)="toggleRightSidebar()">
+        <span i18n
+              class="sr-only">Toggle navigation</span>
+        <span class="">
+          <i class="fa fa-navicon fa-lg"></i>
+        </span>
+      </button>
 
-    <div class="collapse navbar-collapse"
-         [ngClass]="{'show': rightSidebarOpen}">
-      <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
-        <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
-      </ul>
-    </div>
-  </nav>
-</div>
+      <div class="collapse navbar-collapse"
+           [ngClass]="{'show': rightSidebarOpen}">
+        <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
+          <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
+        </ul>
+      </div>
+    </nav>
+  </div>
 
-<div class="wrapper">
-  <!-- Content -->
-  <nav id="sidebar"
-       [ngClass]="{'active': !showMenuSidebar}">
-    <ngx-simplebar [options]="simplebar">
-      <ul class="list-unstyled components cd-navbar-primary">
-        <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
-      </ul>
-    </ngx-simplebar>
-  </nav>
+  <div class="wrapper">
+    <!-- Content -->
+    <nav id="sidebar"
+         [ngClass]="{'active': !showMenuSidebar}">
+      <ngx-simplebar [options]="simplebar">
+        <ul class="list-unstyled components cd-navbar-primary">
+          <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
+        </ul>
+      </ngx-simplebar>
+    </nav>
 
-  <!-- Page Content -->
-  <div id="content"
-       [ngClass]="{'active': !showMenuSidebar}">
-    <ng-content></ng-content>
+    <!-- Page Content -->
+    <div id="content"
+         [ngClass]="{'active': !showMenuSidebar}">
+      <ng-content></ng-content>
+    </div>
   </div>
-</div>
 
-<ng-template #cd_utilities>
-  <li class="nav-item ">
-    <cd-language-selector class="cd-navbar"></cd-language-selector>
-  </li>
-  <li class="nav-item ">
-    <cd-notifications class="cd-navbar"
-                      (click)="toggleRightSidebar()"></cd-notifications>
-  </li>
-  <li class="nav-item ">
-    <cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
-  </li>
-  <li class="nav-item ">
-    <cd-administration class="cd-navbar"></cd-administration>
-  </li>
-  <li class="nav-item ">
-    <cd-identity class="cd-navbar"></cd-identity>
-  </li>
-</ng-template>
-
-<ng-template #cd_menu>
-  <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
-    <!-- Dashboard -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_dashboard">
-      <a routerLink="/dashboard"
-         class="nav-link">
-        <span i18n>Dashboard</span>&nbsp;
-        <i [ngClass]="[icons.health]"
-           [ngStyle]="summaryData?.health_status | healthColor"></i>
-      </a>
+  <ng-template #cd_utilities>
+    <li class="nav-item">
+      <cd-language-selector class="cd-navbar"></cd-language-selector>
     </li>
-
-    <!-- Cluster -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_cluster"
-        *ngIf="permissions.hosts.read || permissions.monitor.read ||
-        permissions.osd.read || permissions.configOpt.read ||
-        permissions.log.read || permissions.prometheus.read">
-      <a (click)="toggleSubMenu('cluster')"
-         class="nav-link dropdown-toggle"
-         [attr.aria-expanded]="displayedSubMenu == 'cluster'"
-         aria-controls="collapseBasic">
-        <ng-container i18n>Cluster</ng-container>
-      </a>
-      <ul class="list-unstyled"
-          [ngbCollapse]="displayedSubMenu !== 'cluster'">
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_hosts"
-            *ngIf="permissions.hosts.read">
-          <a i18n
-             routerLink="/hosts">Hosts</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_cluster_inventory"
-            *ngIf="permissions.hosts.read">
-          <a i18n
-             routerLink="/inventory">Physical Disks</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_cluster_monitor"
-            *ngIf="permissions.monitor.read">
-          <a i18n
-             routerLink="/monitor/">Monitors</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_cluster_services"
-            *ngIf="permissions.hosts.read">
-          <a i18n
-             routerLink="/services/">Services</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_osds"
-            *ngIf="permissions.osd.read">
-          <a i18n
-             routerLink="/osd">OSDs</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_configuration"
-            *ngIf="permissions.configOpt.read">
-          <a i18n
-             routerLink="/configuration">Configuration</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_crush"
-            *ngIf="permissions.osd.read">
-          <a i18n
-             routerLink="/crush-map">CRUSH map</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_modules"
-            *ngIf="permissions.configOpt.read">
-          <a i18n
-             routerLink="/mgr-modules">Manager Modules</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_log"
-            *ngIf="permissions.log.read">
-          <a i18n
-             routerLink="/logs">Logs</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_monitoring"
-            *ngIf="permissions.prometheus.read">
-          <a routerLink="/monitoring">
-            <ng-container i18n>Monitoring</ng-container>
-            <small *ngIf="prometheusAlertService.activeAlerts > 0"
-                   class="badge badge-danger">{{ prometheusAlertService.activeAlerts }}</small>
-          </a>
-        </li>
-      </ul>
+    <li class="nav-item">
+      <cd-notifications class="cd-navbar"
+                        (click)="toggleRightSidebar()"></cd-notifications>
     </li>
-
-    <!-- Pools -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_pool"
-        *ngIf="permissions.pool.read">
-      <a class="nav-link"
-         i18n
-         routerLink="/pool">Pools</a>
+    <li class="nav-item">
+      <cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
+    </li>
+    <li class="nav-item">
+      <cd-administration class="cd-navbar"></cd-administration>
     </li>
+    <li class="nav-item">
+      <cd-identity class="cd-navbar"></cd-identity>
+    </li>
+  </ng-template>
 
-    <!-- Block -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_block"
-        *ngIf="(permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read) &&
-        (enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi)">
-      <a class="nav-link dropdown-toggle"
-         (click)="toggleSubMenu('block')"
-         [attr.aria-expanded]="displayedSubMenu == 'block'"
-         aria-controls="collapseBasic"
-         [ngStyle]="blockHealthColor()">
-        <ng-container i18n>Block</ng-container>
-      </a>
+  <ng-template #cd_menu>
+    <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
+      <!-- Dashboard -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_dashboard">
+        <a routerLink="/dashboard"
+           class="nav-link">
+          <span i18n>Dashboard</span>&nbsp;
+          <i [ngClass]="[icons.health]"
+             [ngStyle]="summaryData?.health_status | healthColor"></i>
+        </a>
+      </li>
 
-      <ul class="list-unstyled"
-          [ngbCollapse]="displayedSubMenu !== 'block'">
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_block_images"
-            *ngIf="permissions.rbdImage.read && enabledFeature.rbd">
-          <a i18n
-             routerLink="/block/rbd">Images</a>
-        </li>
+      <!-- Cluster -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_cluster"
+          *ngIf="permissions.hosts.read || permissions.monitor.read ||
+          permissions.osd.read || permissions.configOpt.read ||
+          permissions.log.read || permissions.prometheus.read">
+        <a (click)="toggleSubMenu('cluster')"
+           class="nav-link dropdown-toggle"
+           [attr.aria-expanded]="displayedSubMenu == 'cluster'"
+           aria-controls="collapseBasic">
+          <ng-container i18n>Cluster</ng-container>
+        </a>
+        <ul class="list-unstyled"
+            [ngbCollapse]="displayedSubMenu !== 'cluster'">
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_hosts"
+              *ngIf="permissions.hosts.read">
+            <a i18n
+               routerLink="/hosts">Hosts</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_cluster_inventory"
+              *ngIf="permissions.hosts.read">
+            <a i18n
+               routerLink="/inventory">Physical Disks</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_cluster_monitor"
+              *ngIf="permissions.monitor.read">
+            <a i18n
+               routerLink="/monitor/">Monitors</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_cluster_services"
+              *ngIf="permissions.hosts.read">
+            <a i18n
+               routerLink="/services/">Services</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_osds"
+              *ngIf="permissions.osd.read">
+            <a i18n
+               routerLink="/osd">OSDs</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_configuration"
+              *ngIf="permissions.configOpt.read">
+            <a i18n
+               routerLink="/configuration">Configuration</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_crush"
+              *ngIf="permissions.osd.read">
+            <a i18n
+               routerLink="/crush-map">CRUSH map</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_modules"
+              *ngIf="permissions.configOpt.read">
+            <a i18n
+               routerLink="/mgr-modules">Manager Modules</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_log"
+              *ngIf="permissions.log.read">
+            <a i18n
+               routerLink="/logs">Logs</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_monitoring"
+              *ngIf="permissions.prometheus.read">
+            <a routerLink="/monitoring">
+              <ng-container i18n>Monitoring</ng-container>
+              <small *ngIf="prometheusAlertService.activeAlerts > 0"
+                     class="badge badge-danger">{{ prometheusAlertService.activeAlerts }}</small>
+            </a>
+          </li>
+        </ul>
+      </li>
 
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_block_mirroring"
-            *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
-          <a routerLink="/block/mirroring">
-            <ng-container i18n>Mirroring</ng-container>
-            <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
-                   class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
-            <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
-                   class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
-          </a>
-        </li>
+      <!-- Pools -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_pool"
+          *ngIf="permissions.pool.read">
+        <a class="nav-link"
+           i18n
+           routerLink="/pool">Pools</a>
+      </li>
 
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_block_iscsi"
-            *ngIf="permissions.iscsi.read && enabledFeature.iscsi">
-          <a i18n
-             routerLink="/block/iscsi">iSCSI</a>
-        </li>
-      </ul>
-    </li>
+      <!-- Block -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_block"
+          *ngIf="(permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read) &&
+          (enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi)">
+        <a class="nav-link dropdown-toggle"
+           (click)="toggleSubMenu('block')"
+           [attr.aria-expanded]="displayedSubMenu == 'block'"
+           aria-controls="collapseBasic"
+           [ngStyle]="blockHealthColor()">
+          <ng-container i18n>Block</ng-container>
+        </a>
 
-    <!-- NFS -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_nfs"
-        *ngIf="permissions.nfs.read && enabledFeature.nfs">
-      <a i18n
-         class="nav-link"
-         routerLink="/nfs">NFS</a>
-    </li>
+        <ul class="list-unstyled"
+            [ngbCollapse]="displayedSubMenu !== 'block'">
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_block_images"
+              *ngIf="permissions.rbdImage.read && enabledFeature.rbd">
+            <a i18n
+               routerLink="/block/rbd">Images</a>
+          </li>
 
-    <!-- Filesystem -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_cephfs"
-        *ngIf="permissions.cephfs.read && enabledFeature.cephfs">
-      <a i18n
-         class="nav-link"
-         routerLink="/cephfs">File Systems</a>
-    </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_block_mirroring"
+              *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
+            <a routerLink="/block/mirroring">
+              <ng-container i18n>Mirroring</ng-container>
+              <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
+                     class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
+              <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
+                     class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
+            </a>
+          </li>
 
-    <!-- Object Gateway -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_rgw"
-        *ngIf="permissions.rgw.read && enabledFeature.rgw">
-      <a class="nav-link dropdown-toggle"
-         (click)="toggleSubMenu('rgw')"
-         [attr.aria-expanded]="displayedSubMenu == 'rgw'"
-         aria-controls="collapseBasic">
-        <ng-container i18n>Object Gateway</ng-container>
-      </a>
-      <ul class="list-unstyled"
-          [ngbCollapse]="displayedSubMenu !== 'rgw'">
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_rgw_daemons">
-          <a i18n
-             routerLink="/rgw/daemon">Daemons</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_rgw_users">
-          <a i18n
-             routerLink="/rgw/user">Users</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_rgw_buckets">
-          <a i18n
-             routerLink="/rgw/bucket">Buckets</a>
-        </li>
-      </ul>
-    </li>
-  </ng-container>
-</ng-template>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_block_iscsi"
+              *ngIf="permissions.iscsi.read && enabledFeature.iscsi">
+            <a i18n
+               routerLink="/block/iscsi">iSCSI</a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- NFS -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_nfs"
+          *ngIf="permissions.nfs.read && enabledFeature.nfs">
+        <a i18n
+           class="nav-link"
+           routerLink="/nfs">NFS</a>
+      </li>
+
+      <!-- Filesystem -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_cephfs"
+          *ngIf="permissions.cephfs.read && enabledFeature.cephfs">
+        <a i18n
+           class="nav-link"
+           routerLink="/cephfs">File Systems</a>
+      </li>
+
+      <!-- Object Gateway -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_rgw"
+          *ngIf="permissions.rgw.read && enabledFeature.rgw">
+        <a class="nav-link dropdown-toggle"
+           (click)="toggleSubMenu('rgw')"
+           [attr.aria-expanded]="displayedSubMenu == 'rgw'"
+           aria-controls="collapseBasic">
+          <ng-container i18n>Object Gateway</ng-container>
+        </a>
+        <ul class="list-unstyled"
+            [ngbCollapse]="displayedSubMenu !== 'rgw'">
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_rgw_daemons">
+            <a i18n
+               routerLink="/rgw/daemon">Daemons</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_rgw_users">
+            <a i18n
+               routerLink="/rgw/user">Users</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_rgw_buckets">
+            <a i18n
+               routerLink="/rgw/bucket">Buckets</a>
+          </li>
+        </ul>
+      </li>
+    </ng-container>
+  </ng-template>
+
+</div>