diff options
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html')
| -rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html new file mode 100644 index 000000000..bdb35a610 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html @@ -0,0 +1,272 @@ +<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> + + <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> + + <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> + + <!-- Page Content --> + <div id="content" + [ngClass]="{'active': !showMenuSidebar}"> + <ng-content></ng-content> + </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> + </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> + + <!-- Pools --> + <li routerLinkActive="active" + class="nav-item tc_menuitem_pool" + *ngIf="permissions.pool.read"> + <a class="nav-link" + i18n + routerLink="/pool">Pools</a> + </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> + + <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> + + <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> + + <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> |