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

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