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

<cd-pwd-expiration-notification></cd-pwd-expiration-notification>
<cd-telemetry-notification></cd-telemetry-notification>
<cd-notifications-sidebar></cd-notifications-sidebar>

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

    <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="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">Inventory</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>
Commit	Line	Data
9f95a23c	1	<cd-pwd-expiration-notification></cd-pwd-expiration-notification>
f6b5b4d7	2	<cd-telemetry-notification></cd-telemetry-notification>
9f95a23c	3	<cd-notifications-sidebar></cd-notifications-sidebar>
11fdf7f2	4
9f95a23c TL	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"
11fdf7f2	14	href="#">
f67539c2	15	<img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
9f95a23c	16	alt="Ceph" />
11fdf7f2 TL	17	</a>
	18
	19	<button type="button"
9f95a23c	20	class="navbar-toggler"
b3b6e05e	21	(click)="toggleRightSidebar()">
11fdf7f2 TL	22	<span i18n
11fdf7f2 TL	23	class="sr-only">Toggle navigation</span>
9f95a23c TL	24	<span class="">
	25	<i class="fa fa-navicon fa-lg"></i>
	26	</span>
11fdf7f2	27	</button>
11fdf7f2	28
b3b6e05e TL	29	<div class="collapse navbar-collapse"
b3b6e05e TL	30	[ngClass]="{'show': rightSidebarOpen}">
9f95a23c TL	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>
11fdf7f2	53	</div>
9f95a23c TL	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 ">
b3b6e05e TL	61	<cd-notifications class="cd-navbar"
b3b6e05e TL	62	(click)="toggleRightSidebar()"></cd-notifications>
9f95a23c TL	63	</li>
	64	<li class="nav-item ">
	65	<cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
	66	</li>
	67	<li class="nav-item ">
	68	<cd-administration class="cd-navbar"></cd-administration>
	69	</li>
	70	<li class="nav-item ">
	71	<cd-identity class="cd-navbar"></cd-identity>
	72	</li>
	73	</ng-template>
	74
f67539c2	75	<ng-template #cd_menu>
9f95a23c TL	76	<ng-container *ngIf="enabledFeature$ \| async as enabledFeature">
	77	<!-- Dashboard -->
	78	<li routerLinkActive="active"
	79	class="nav-item tc_menuitem_dashboard">
	80	<a routerLink="/dashboard"
	81	class="nav-link">
	82	<span i18n>Dashboard</span>
	83	<i [ngClass]="[icons.health]"
	84	[ngStyle]="summaryData?.health_status \| healthColor"></i>
	85	</a>
	86	</li>
	87
	88	<!-- Cluster -->
	89	<li routerLinkActive="active"
	90	class="nav-item tc_menuitem_cluster"
	91	*ngIf="permissions.hosts.read \|\| permissions.monitor.read \|\|
	92	permissions.osd.read \|\| permissions.configOpt.read \|\|
	93	permissions.log.read \|\| permissions.prometheus.read">
	94	<a (click)="toggleSubMenu('cluster')"
	95	class="nav-link dropdown-toggle"
	96	[attr.aria-expanded]="displayedSubMenu == 'cluster'"
	97	aria-controls="collapseBasic">
	98	<ng-container i18n>Cluster</ng-container>
	99	</a>
	100	<ul class="list-unstyled"
f67539c2	101	[ngbCollapse]="displayedSubMenu !== 'cluster'">
9f95a23c TL	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
f91f0fd5	148	routerLink="/mgr-modules">Manager Modules</a>
9f95a23c TL	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">
e306af50 TL	159	<a routerLink="/monitoring">
e306af50 TL	160	<ng-container i18n>Monitoring</ng-container>
cd265ab1 TL	161	<small *ngIf="prometheusAlertService.activeAlerts > 0"
cd265ab1 TL	162	class="badge badge-danger">{{ prometheusAlertService.activeAlerts }}</small>
e306af50	163	</a>
9f95a23c TL	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"
f67539c2	191	[ngbCollapse]="displayedSubMenu !== 'block'">
9f95a23c TL	192	<li routerLinkActive="active"
	193	class="tc_submenuitem tc_submenuitem_block_images"
	194	*ngIf="permissions.rbdImage.read && enabledFeature.rbd">
	195	<a i18n
	196	routerLink="/block/rbd">Images</a>
	197	</li>
	198
	199	<li routerLinkActive="active"
	200	class="tc_submenuitem tc_submenuitem_block_mirroring"
	201	*ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
	202	<a routerLink="/block/mirroring">
	203	<ng-container i18n>Mirroring</ng-container>
	204	<small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
	205	class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
	206	<small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
	207	class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
	208	</a>
	209	</li>
	210
	211	<li routerLinkActive="active"
	212	class="tc_submenuitem tc_submenuitem_block_iscsi"
	213	*ngIf="permissions.iscsi.read && enabledFeature.iscsi">
	214	<a i18n
	215	routerLink="/block/iscsi">iSCSI</a>
	216	</li>
	217	</ul>
	218	</li>
	219
	220	<!-- NFS -->
	221	<li routerLinkActive="active"
	222	class="nav-item tc_menuitem_nfs"
	223	*ngIf="permissions.nfs.read && enabledFeature.nfs">
	224	<a i18n
	225	class="nav-link"
	226	routerLink="/nfs">NFS</a>
	227	</li>
	228
	229	<!-- Filesystem -->
	230	<li routerLinkActive="active"
	231	class="nav-item tc_menuitem_cephfs"
	232	*ngIf="permissions.cephfs.read && enabledFeature.cephfs">
	233	<a i18n
	234	class="nav-link"
b3b6e05e	235	routerLink="/cephfs">File Systems</a>
9f95a23c TL	236	</li>
	237
	238	<!-- Object Gateway -->
	239	<li routerLinkActive="active"
	240	class="nav-item tc_menuitem_rgw"
	241	*ngIf="permissions.rgw.read && enabledFeature.rgw">
	242	<a class="nav-link dropdown-toggle"
	243	(click)="toggleSubMenu('rgw')"
	244	[attr.aria-expanded]="displayedSubMenu == 'rgw'"
	245	aria-controls="collapseBasic">
	246	<ng-container i18n>Object Gateway</ng-container>
	247	</a>
	248	<ul class="list-unstyled"
f67539c2	249	[ngbCollapse]="displayedSubMenu !== 'rgw'">
9f95a23c TL	250	<li routerLinkActive="active"
	251	class="tc_submenuitem tc_submenuitem_rgw_daemons">
	252	<a i18n
	253	routerLink="/rgw/daemon">Daemons</a>
	254	</li>
	255	<li routerLinkActive="active"
	256	class="tc_submenuitem tc_submenuitem_rgw_users">
	257	<a i18n
	258	routerLink="/rgw/user">Users</a>
	259	</li>
	260	<li routerLinkActive="active"
	261	class="tc_submenuitem tc_submenuitem_rgw_buckets">
	262	<a i18n
	263	routerLink="/rgw/bucket">Buckets</a>
	264	</li>
	265	</ul>
	266	</li>
	267	</ng-container>
	268	</ng-template>