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

<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 ms-3"
              (click)="showMenuSidebar = !showMenuSidebar"
              aria-label="toggle sidebar visibility">
        <i class="fa fa-bars fa-2x"
           aria-hidden="true"></i>
      </button>

      <a class="navbar-brand ms-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>&nbsp;
          <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="cluster-nav"
           role="button">
          <ng-container i18n>Cluster</ng-container>
        </a>
        <ul class="list-unstyled"
            id="cluster-nav"
            [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.activeCriticalAlerts > 0"
                     class="badge badge-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</small>
              <small *ngIf="prometheusAlertService.activeWarningAlerts > 0"
                     class="badge badge-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</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="block-nav"
           role="button"
           [ngStyle]="blockHealthColor()">
          <ng-container i18n>Block</ng-container>
        </a>

        <ul class="list-unstyled"
            id="block-nav"
            [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="gateway-nav"
           role="button">
          <ng-container i18n>Object Gateway</ng-container>
        </a>
        <ul class="list-unstyled"
            id="gateway-nav"
            [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>
Commit	Line	Data
20effc67 TL	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">
39ae355f	8	<button class="btn btn-link py-0 ms-3"
20effc67 TL	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>
11fdf7f2	14
39ae355f	15	<a class="navbar-brand ms-2"
20effc67 TL	16	href="#">
	17	<img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
	18	alt="Ceph" />
	19	</a>
11fdf7f2	20
20effc67 TL	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>
11fdf7f2	30
20effc67 TL	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>
9f95a23c	39
20effc67 TL	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>
9f95a23c	50
20effc67 TL	51	<!-- Page Content -->
	52	<div id="content"
	53	[ngClass]="{'active': !showMenuSidebar}">
	54	<ng-content></ng-content>
	55	</div>
11fdf7f2	56	</div>
9f95a23c	57
20effc67 TL	58	<ng-template #cd_utilities>
	59	<li class="nav-item">
	60	<cd-language-selector class="cd-navbar"></cd-language-selector>
9f95a23c	61	</li>
20effc67 TL	62	<li class="nav-item">
	63	<cd-notifications class="cd-navbar"
	64	(click)="toggleRightSidebar()"></cd-notifications>
9f95a23c	65	</li>
20effc67 TL	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>
9f95a23c	71	</li>
20effc67 TL	72	<li class="nav-item">
	73	<cd-identity class="cd-navbar"></cd-identity>
	74	</li>
	75	</ng-template>
9f95a23c	76
20effc67 TL	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>
	85	<i [ngClass]="[icons.health]"
	86	[ngStyle]="summaryData?.health_status \| healthColor"></i>
	87	</a>
	88	</li>
9f95a23c	89
20effc67 TL	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"
39ae355f TL	98	[attr.aria-expanded]="displayedSubMenu === 'cluster'"
	99	aria-controls="cluster-nav"
	100	role="button">
20effc67 TL	101	<ng-container i18n>Cluster</ng-container>
	102	</a>
	103	<ul class="list-unstyled"
39ae355f	104	id="cluster-nav"
20effc67 TL	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_log"
	156	*ngIf="permissions.log.read">
	157	<a i18n
	158	routerLink="/logs">Logs</a>
	159	</li>
	160	<li routerLinkActive="active"
	161	class="tc_submenuitem tc_submenuitem_monitoring"
	162	*ngIf="permissions.prometheus.read">
	163	<a routerLink="/monitoring">
	164	<ng-container i18n>Monitoring</ng-container>
2a845540	165	<small *ngIf="prometheusAlertService.activeCriticalAlerts > 0"
39ae355f	166	class="badge badge-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</small>
2a845540	167	<small *ngIf="prometheusAlertService.activeWarningAlerts > 0"
39ae355f	168	class="badge badge-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</small>
20effc67 TL	169	</a>
	170	</li>
	171	</ul>
	172	</li>
9f95a23c	173
20effc67 TL	174	<!-- Pools -->
	175	<li routerLinkActive="active"
	176	class="nav-item tc_menuitem_pool"
	177	*ngIf="permissions.pool.read">
	178	<a class="nav-link"
	179	i18n
	180	routerLink="/pool">Pools</a>
	181	</li>
9f95a23c	182
20effc67 TL	183	<!-- Block -->
	184	<li routerLinkActive="active"
	185	class="nav-item tc_menuitem_block"
	186	*ngIf="(permissions.rbdImage.read \|\| permissions.rbdMirroring.read \|\| permissions.iscsi.read) &&
	187	(enabledFeature.rbd \|\| enabledFeature.mirroring \|\| enabledFeature.iscsi)">
	188	<a class="nav-link dropdown-toggle"
	189	(click)="toggleSubMenu('block')"
39ae355f TL	190	[attr.aria-expanded]="displayedSubMenu === 'block'"
	191	aria-controls="block-nav"
	192	role="button"
20effc67 TL	193	[ngStyle]="blockHealthColor()">
	194	<ng-container i18n>Block</ng-container>
	195	</a>
9f95a23c	196
20effc67	197	<ul class="list-unstyled"
39ae355f	198	id="block-nav"
20effc67 TL	199	[ngbCollapse]="displayedSubMenu !== 'block'">
	200	<li routerLinkActive="active"
	201	class="tc_submenuitem tc_submenuitem_block_images"
	202	*ngIf="permissions.rbdImage.read && enabledFeature.rbd">
	203	<a i18n
	204	routerLink="/block/rbd">Images</a>
	205	</li>
9f95a23c	206
20effc67 TL	207	<li routerLinkActive="active"
	208	class="tc_submenuitem tc_submenuitem_block_mirroring"
	209	*ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
	210	<a routerLink="/block/mirroring">
	211	<ng-container i18n>Mirroring</ng-container>
	212	<small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
	213	class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
	214	<small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
	215	class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
	216	</a>
	217	</li>
9f95a23c	218
20effc67 TL	219	<li routerLinkActive="active"
	220	class="tc_submenuitem tc_submenuitem_block_iscsi"
	221	*ngIf="permissions.iscsi.read && enabledFeature.iscsi">
	222	<a i18n
	223	routerLink="/block/iscsi">iSCSI</a>
	224	</li>
	225	</ul>
	226	</li>
	227
	228	<!-- NFS -->
	229	<li routerLinkActive="active"
	230	class="nav-item tc_menuitem_nfs"
	231	*ngIf="permissions.nfs.read && enabledFeature.nfs">
	232	<a i18n
	233	class="nav-link"
	234	routerLink="/nfs">NFS</a>
	235	</li>
	236
	237	<!-- Filesystem -->
	238	<li routerLinkActive="active"
	239	class="nav-item tc_menuitem_cephfs"
	240	*ngIf="permissions.cephfs.read && enabledFeature.cephfs">
	241	<a i18n
	242	class="nav-link"
	243	routerLink="/cephfs">File Systems</a>
	244	</li>
	245
	246	<!-- Object Gateway -->
	247	<li routerLinkActive="active"
	248	class="nav-item tc_menuitem_rgw"
	249	*ngIf="permissions.rgw.read && enabledFeature.rgw">
	250	<a class="nav-link dropdown-toggle"
	251	(click)="toggleSubMenu('rgw')"
39ae355f TL	252	[attr.aria-expanded]="displayedSubMenu === 'rgw'"
	253	aria-controls="gateway-nav"
	254	role="button">
20effc67 TL	255	<ng-container i18n>Object Gateway</ng-container>
	256	</a>
	257	<ul class="list-unstyled"
39ae355f	258	id="gateway-nav"
20effc67 TL	259	[ngbCollapse]="displayedSubMenu !== 'rgw'">
	260	<li routerLinkActive="active"
	261	class="tc_submenuitem tc_submenuitem_rgw_daemons">
	262	<a i18n
	263	routerLink="/rgw/daemon">Daemons</a>
	264	</li>
	265	<li routerLinkActive="active"
	266	class="tc_submenuitem tc_submenuitem_rgw_users">
	267	<a i18n
	268	routerLink="/rgw/user">Users</a>
	269	</li>
	270	<li routerLinkActive="active"
	271	class="tc_submenuitem tc_submenuitem_rgw_buckets">
	272	<a i18n
	273	routerLink="/rgw/bucket">Buckets</a>
	274	</li>
	275	</ul>
	276	</li>
	277	</ng-container>
	278	</ng-template>
	279
	280	</div>