-<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>
- <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>
+ <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>