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"
   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 ml-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="collapseBasic">
 100           <ng-container i18n>Cluster</ng-container>
 101         </a>
 102         <ul class="list-unstyled"
 103             [ngbCollapse]="displayedSubMenu !== 'cluster'">
 104           <li routerLinkActive="active"
 105               class="tc_submenuitem tc_submenuitem_hosts"
 106               *ngIf="permissions.hosts.read">
 107             <a i18n
 108                routerLink="/hosts">Hosts</a>
 109           </li>
 110           <li routerLinkActive="active"
 111               class="tc_submenuitem tc_submenuitem_cluster_inventory"
 112               *ngIf="permissions.hosts.read">
 113             <a i18n
 114                routerLink="/inventory">Physical Disks</a>
 115           </li>
 116           <li routerLinkActive="active"
 117               class="tc_submenuitem tc_submenuitem_cluster_monitor"
 118               *ngIf="permissions.monitor.read">
 119             <a i18n
 120                routerLink="/monitor/">Monitors</a>
 121           </li>
 122           <li routerLinkActive="active"
 123               class="tc_submenuitem tc_submenuitem_cluster_services"
 124               *ngIf="permissions.hosts.read">
 125             <a i18n
 126                routerLink="/services/">Services</a>
 127           </li>
 128           <li routerLinkActive="active"
 129               class="tc_submenuitem tc_submenuitem_osds"
 130               *ngIf="permissions.osd.read">
 131             <a i18n
 132                routerLink="/osd">OSDs</a>
 133           </li>
 134           <li routerLinkActive="active"
 135               class="tc_submenuitem tc_submenuitem_configuration"
 136               *ngIf="permissions.configOpt.read">
 137             <a i18n
 138                routerLink="/configuration">Configuration</a>
 139           </li>
 140           <li routerLinkActive="active"
 141               class="tc_submenuitem tc_submenuitem_crush"
 142               *ngIf="permissions.osd.read">
 143             <a i18n
 144                routerLink="/crush-map">CRUSH map</a>
 145           </li>
 146           <li routerLinkActive="active"
 147               class="tc_submenuitem tc_submenuitem_modules"
 148               *ngIf="permissions.configOpt.read">
 149             <a i18n
 150                routerLink="/mgr-modules">Manager Modules</a>
 151           </li>
 152           <li routerLinkActive="active"
 153               class="tc_submenuitem tc_submenuitem_log"
 154               *ngIf="permissions.log.read">
 155             <a i18n
 156                routerLink="/logs">Logs</a>
 157           </li>
 158           <li routerLinkActive="active"
 159               class="tc_submenuitem tc_submenuitem_monitoring"
 160               *ngIf="permissions.prometheus.read">
 161             <a routerLink="/monitoring">
 162               <ng-container i18n>Monitoring</ng-container>
 163               <small *ngIf="prometheusAlertService.activeAlerts > 0"
 164                      class="badge badge-danger">{{ prometheusAlertService.activeAlerts }}</small>
 165             </a>
 166           </li>
 167         </ul>
 168       </li>
 169
 170       <!-- Pools -->
 171       <li routerLinkActive="active"
 172           class="nav-item tc_menuitem_pool"
 173           *ngIf="permissions.pool.read">
 174         <a class="nav-link"
 175            i18n
 176            routerLink="/pool">Pools</a>
 177       </li>
 178
 179       <!-- Block -->
 180       <li routerLinkActive="active"
 181           class="nav-item tc_menuitem_block"
 182           *ngIf="(permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read) &&
 183           (enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi)">
 184         <a class="nav-link dropdown-toggle"
 185            (click)="toggleSubMenu('block')"
 186            [attr.aria-expanded]="displayedSubMenu == 'block'"
 187            aria-controls="collapseBasic"
 188            [ngStyle]="blockHealthColor()">
 189           <ng-container i18n>Block</ng-container>
 190         </a>
 191
 192         <ul class="list-unstyled"
 193             [ngbCollapse]="displayedSubMenu !== 'block'">
 194           <li routerLinkActive="active"
 195               class="tc_submenuitem tc_submenuitem_block_images"
 196               *ngIf="permissions.rbdImage.read && enabledFeature.rbd">
 197             <a i18n
 198                routerLink="/block/rbd">Images</a>
 199           </li>
 200
 201           <li routerLinkActive="active"
 202               class="tc_submenuitem tc_submenuitem_block_mirroring"
 203               *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
 204             <a routerLink="/block/mirroring">
 205               <ng-container i18n>Mirroring</ng-container>
 206               <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
 207                      class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
 208               <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
 209                      class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
 210             </a>
 211           </li>
 212
 213           <li routerLinkActive="active"
 214               class="tc_submenuitem tc_submenuitem_block_iscsi"
 215               *ngIf="permissions.iscsi.read && enabledFeature.iscsi">
 216             <a i18n
 217                routerLink="/block/iscsi">iSCSI</a>
 218           </li>
 219         </ul>
 220       </li>
 221
 222       <!-- NFS -->
 223       <li routerLinkActive="active"
 224           class="nav-item tc_menuitem_nfs"
 225           *ngIf="permissions.nfs.read && enabledFeature.nfs">
 226         <a i18n
 227            class="nav-link"
 228            routerLink="/nfs">NFS</a>
 229       </li>
 230
 231       <!-- Filesystem -->
 232       <li routerLinkActive="active"
 233           class="nav-item tc_menuitem_cephfs"
 234           *ngIf="permissions.cephfs.read && enabledFeature.cephfs">
 235         <a i18n
 236            class="nav-link"
 237            routerLink="/cephfs">File Systems</a>
 238       </li>
 239
 240       <!-- Object Gateway -->
 241       <li routerLinkActive="active"
 242           class="nav-item tc_menuitem_rgw"
 243           *ngIf="permissions.rgw.read && enabledFeature.rgw">
 244         <a class="nav-link dropdown-toggle"
 245            (click)="toggleSubMenu('rgw')"
 246            [attr.aria-expanded]="displayedSubMenu == 'rgw'"
 247            aria-controls="collapseBasic">
 248           <ng-container i18n>Object Gateway</ng-container>
 249         </a>
 250         <ul class="list-unstyled"
 251             [ngbCollapse]="displayedSubMenu !== 'rgw'">
 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>
 271
 272 </div>