git.apps.os.sepia.ceph.com Git - ceph.git/blob

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