ceph/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html

   1 <cd-pwd-expiration-notification></cd-pwd-expiration-notification>
   2 <cd-telemetry-notification></cd-telemetry-notification>
   3 <cd-notifications-sidebar></cd-notifications-sidebar>
   4
   5 <div class="cd-navbar-top">
   6   <nav class="navbar fixed-top navbar-expand-md navbar-dark cd-navbar-brand">
   7     <button class="btn btn-link py-0"
   8             (click)="showMenuSidebar = !showMenuSidebar">
   9       <i class="fa fa-bars fa-2x"
  10          aria-hidden="true"></i>
  11     </button>
  12
  13     <a class="navbar-brand ml-2"
  14        href="#">
  15       <img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
  16            alt="Ceph" />
  17     </a>
  18
  19     <button type="button"
  20             class="navbar-toggler"
  21             (click)="isCollapsed = !isCollapsed">
  22       <span i18n
  23             class="sr-only">Toggle navigation</span>
  24       <span class="">
  25         <i class="fa fa-navicon fa-lg"></i>
  26       </span>
  27     </button>
  28
  29     <div class="collapse navbar-collapse">
  30       <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
  31         <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
  32       </ul>
  33     </div>
  34   </nav>
  35 </div>
  36
  37 <div class="wrapper">
  38   <!-- Content -->
  39   <nav id="sidebar"
  40        [ngClass]="{'active': !showMenuSidebar}">
  41     <ngx-simplebar [options]="simplebar">
  42       <ul class="list-unstyled components cd-navbar-primary">
  43         <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
  44       </ul>
  45     </ngx-simplebar>
  46   </nav>
  47
  48   <!-- Page Content -->
  49   <div id="content"
  50        [ngClass]="{'active': !showMenuSidebar}">
  51     <ng-content></ng-content>
  52   </div>
  53 </div>
  54
  55 <ng-template #cd_utilities>
  56   <li class="nav-item ">
  57     <cd-language-selector class="cd-navbar"></cd-language-selector>
  58   </li>
  59   <li class="nav-item ">
  60     <cd-notifications class="cd-navbar"></cd-notifications>
  61   </li>
  62   <li class="nav-item ">
  63     <cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
  64   </li>
  65   <li class="nav-item ">
  66     <cd-administration class="cd-navbar"></cd-administration>
  67   </li>
  68   <li class="nav-item ">
  69     <cd-identity class="cd-navbar"></cd-identity>
  70   </li>
  71 </ng-template>
  72
  73 <ng-template #cd_menu>
  74   <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
  75     <!-- Dashboard -->
  76     <li routerLinkActive="active"
  77         class="nav-item tc_menuitem_dashboard">
  78       <a routerLink="/dashboard"
  79          class="nav-link">
  80         <span i18n>Dashboard</span>&nbsp;
  81         <i [ngClass]="[icons.health]"
  82            [ngStyle]="summaryData?.health_status | healthColor"></i>
  83       </a>
  84     </li>
  85
  86     <!-- Cluster -->
  87     <li routerLinkActive="active"
  88         class="nav-item tc_menuitem_cluster"
  89         *ngIf="permissions.hosts.read || permissions.monitor.read ||
  90         permissions.osd.read || permissions.configOpt.read ||
  91         permissions.log.read || permissions.prometheus.read">
  92       <a (click)="toggleSubMenu('cluster')"
  93          class="nav-link dropdown-toggle"
  94          [attr.aria-expanded]="displayedSubMenu == 'cluster'"
  95          aria-controls="collapseBasic">
  96         <ng-container i18n>Cluster</ng-container>
  97       </a>
  98       <ul class="list-unstyled"
  99           [ngbCollapse]="displayedSubMenu !== 'cluster'">
 100         <li routerLinkActive="active"
 101             class="tc_submenuitem tc_submenuitem_hosts"
 102             *ngIf="permissions.hosts.read">
 103           <a i18n
 104              routerLink="/hosts">Hosts</a>
 105         </li>
 106         <li routerLinkActive="active"
 107             class="tc_submenuitem tc_submenuitem_cluster_inventory"
 108             *ngIf="permissions.hosts.read">
 109           <a i18n
 110              routerLink="/inventory">Inventory</a>
 111         </li>
 112         <li routerLinkActive="active"
 113             class="tc_submenuitem tc_submenuitem_cluster_monitor"
 114             *ngIf="permissions.monitor.read">
 115           <a i18n
 116              routerLink="/monitor/">Monitors</a>
 117         </li>
 118         <li routerLinkActive="active"
 119             class="tc_submenuitem tc_submenuitem_cluster_services"
 120             *ngIf="permissions.hosts.read">
 121           <a i18n
 122              routerLink="/services/">Services</a>
 123         </li>
 124         <li routerLinkActive="active"
 125             class="tc_submenuitem tc_submenuitem_osds"
 126             *ngIf="permissions.osd.read">
 127           <a i18n
 128              routerLink="/osd">OSDs</a>
 129         </li>
 130         <li routerLinkActive="active"
 131             class="tc_submenuitem tc_submenuitem_configuration"
 132             *ngIf="permissions.configOpt.read">
 133           <a i18n
 134              routerLink="/configuration">Configuration</a>
 135         </li>
 136         <li routerLinkActive="active"
 137             class="tc_submenuitem tc_submenuitem_crush"
 138             *ngIf="permissions.osd.read">
 139           <a i18n
 140              routerLink="/crush-map">CRUSH map</a>
 141         </li>
 142         <li routerLinkActive="active"
 143             class="tc_submenuitem tc_submenuitem_modules"
 144             *ngIf="permissions.configOpt.read">
 145           <a i18n
 146              routerLink="/mgr-modules">Manager Modules</a>
 147         </li>
 148         <li routerLinkActive="active"
 149             class="tc_submenuitem tc_submenuitem_log"
 150             *ngIf="permissions.log.read">
 151           <a i18n
 152              routerLink="/logs">Logs</a>
 153         </li>
 154         <li routerLinkActive="active"
 155             class="tc_submenuitem tc_submenuitem_monitoring"
 156             *ngIf="permissions.prometheus.read">
 157           <a routerLink="/monitoring">
 158             <ng-container i18n>Monitoring</ng-container>
 159             <small *ngIf="prometheusAlertService.activeAlerts > 0"
 160                    class="badge badge-danger">{{ prometheusAlertService.activeAlerts }}</small>
 161           </a>
 162         </li>
 163       </ul>
 164     </li>
 165
 166     <!-- Pools -->
 167     <li routerLinkActive="active"
 168         class="nav-item tc_menuitem_pool"
 169         *ngIf="permissions.pool.read">
 170       <a class="nav-link"
 171          i18n
 172          routerLink="/pool">Pools</a>
 173     </li>
 174
 175     <!-- Block -->
 176     <li routerLinkActive="active"
 177         class="nav-item tc_menuitem_block"
 178         *ngIf="(permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read) &&
 179         (enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi)">
 180       <a class="nav-link dropdown-toggle"
 181          (click)="toggleSubMenu('block')"
 182          [attr.aria-expanded]="displayedSubMenu == 'block'"
 183          aria-controls="collapseBasic"
 184          [ngStyle]="blockHealthColor()">
 185         <ng-container i18n>Block</ng-container>
 186       </a>
 187
 188       <ul class="list-unstyled"
 189           [ngbCollapse]="displayedSubMenu !== 'block'">
 190         <li routerLinkActive="active"
 191             class="tc_submenuitem tc_submenuitem_block_images"
 192             *ngIf="permissions.rbdImage.read && enabledFeature.rbd">
 193           <a i18n
 194              routerLink="/block/rbd">Images</a>
 195         </li>
 196
 197         <li routerLinkActive="active"
 198             class="tc_submenuitem tc_submenuitem_block_mirroring"
 199             *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
 200           <a routerLink="/block/mirroring">
 201             <ng-container i18n>Mirroring</ng-container>
 202             <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
 203                    class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
 204             <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
 205                    class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
 206           </a>
 207         </li>
 208
 209         <li routerLinkActive="active"
 210             class="tc_submenuitem tc_submenuitem_block_iscsi"
 211             *ngIf="permissions.iscsi.read && enabledFeature.iscsi">
 212           <a i18n
 213              routerLink="/block/iscsi">iSCSI</a>
 214         </li>
 215       </ul>
 216     </li>
 217
 218     <!-- NFS -->
 219     <li routerLinkActive="active"
 220         class="nav-item tc_menuitem_nfs"
 221         *ngIf="permissions.nfs.read && enabledFeature.nfs">
 222       <a i18n
 223          class="nav-link"
 224          routerLink="/nfs">NFS</a>
 225     </li>
 226
 227     <!-- Filesystem -->
 228     <li routerLinkActive="active"
 229         class="nav-item tc_menuitem_cephfs"
 230         *ngIf="permissions.cephfs.read && enabledFeature.cephfs">
 231       <a i18n
 232          class="nav-link"
 233          routerLink="/cephfs">Filesystems</a>
 234     </li>
 235
 236     <!-- Object Gateway -->
 237     <li routerLinkActive="active"
 238         class="nav-item tc_menuitem_rgw"
 239         *ngIf="permissions.rgw.read && enabledFeature.rgw">
 240       <a class="nav-link dropdown-toggle"
 241          (click)="toggleSubMenu('rgw')"
 242          [attr.aria-expanded]="displayedSubMenu == 'rgw'"
 243          aria-controls="collapseBasic">
 244         <ng-container i18n>Object Gateway</ng-container>
 245       </a>
 246       <ul class="list-unstyled"
 247           [ngbCollapse]="displayedSubMenu !== 'rgw'">
 248         <li routerLinkActive="active"
 249             class="tc_submenuitem tc_submenuitem_rgw_daemons">
 250           <a i18n
 251              routerLink="/rgw/daemon">Daemons</a>
 252         </li>
 253         <li routerLinkActive="active"
 254             class="tc_submenuitem tc_submenuitem_rgw_users">
 255           <a i18n
 256              routerLink="/rgw/user">Users</a>
 257         </li>
 258         <li routerLinkActive="active"
 259             class="tc_submenuitem tc_submenuitem_rgw_buckets">
 260           <a i18n
 261              routerLink="/rgw/bucket">Buckets</a>
 262         </li>
 263       </ul>
 264     </li>
 265   </ng-container>
 266 </ng-template>