[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-motd></cd-motd>
<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_Logo_Standard_RGB_White_120411_fa.png"
           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"
          [collapse]="displayedSubMenu !== 'cluster'"
          [isAnimated]="true">
        <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"
          [collapse]="displayedSubMenu !== 'block'"
          [isAnimated]="true">
        <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">Filesystems</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"
          [collapse]="displayedSubMenu !== 'rgw'"
          [isAnimated]="true">
        <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>
ec96510d	3	<cd-motd></cd-motd>
9f95a23c	4	<cd-notifications-sidebar></cd-notifications-sidebar>
11fdf7f2	5
9f95a23c TL	6	<div class="cd-navbar-top">
	7	<nav class="navbar fixed-top navbar-expand-md navbar-dark cd-navbar-brand">
	8	<button class="btn btn-link py-0"
	9	(click)="showMenuSidebar = !showMenuSidebar">
	10	<i class="fa fa-bars fa-2x"
	11	aria-hidden="true"></i>
	12	</button>
	13
	14	<a class="navbar-brand ml-2"
11fdf7f2 TL	15	href="#">
11fdf7f2 TL	16	<img src="assets/Ceph_Logo_Standard_RGB_White_120411_fa.png"
9f95a23c	17	alt="Ceph" />
11fdf7f2 TL	18	</a>
	19
	20	<button type="button"
9f95a23c	21	class="navbar-toggler"
ec96510d	22	(click)="toggleRightSidebar()">
11fdf7f2 TL	23	<span i18n
11fdf7f2 TL	24	class="sr-only">Toggle navigation</span>
9f95a23c TL	25	<span class="">
	26	<i class="fa fa-navicon fa-lg"></i>
	27	</span>
11fdf7f2	28	</button>
11fdf7f2	29
9f95a23c	30	<div class="collapse navbar-collapse"
ec96510d	31	[ngClass]="{'show': rightSidebarOpen}">
9f95a23c TL	32	<ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
	33	<ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
	34	</ul>
	35	</div>
	36	</nav>
	37	</div>
	38
	39	<div class="wrapper">
	40	<!-- Content -->
	41	<nav id="sidebar"
	42	[ngClass]="{'active': !showMenuSidebar}">
	43	<ngx-simplebar [options]="simplebar">
	44	<ul class="list-unstyled components cd-navbar-primary">
	45	<ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
	46	</ul>
	47	</ngx-simplebar>
	48	</nav>
	49
	50	<!-- Page Content -->
	51	<div id="content"
	52	[ngClass]="{'active': !showMenuSidebar}">
	53	<ng-content></ng-content>
11fdf7f2	54	</div>
9f95a23c TL	55	</div>
	56
	57	<ng-template #cd_utilities>
	58	<li class="nav-item ">
	59	<cd-language-selector class="cd-navbar"></cd-language-selector>
	60	</li>
	61	<li class="nav-item ">
ec96510d FG	62	<cd-notifications class="cd-navbar"
ec96510d FG	63	(click)="toggleRightSidebar()"></cd-notifications>
9f95a23c TL	64	</li>
	65	<li class="nav-item ">
	66	<cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
	67	</li>
	68	<li class="nav-item ">
	69	<cd-administration class="cd-navbar"></cd-administration>
	70	</li>
	71	<li class="nav-item ">
	72	<cd-identity class="cd-navbar"></cd-identity>
	73	</li>
	74	</ng-template>
	75
	76	<ng-template #cd_menu >
	77	<ng-container *ngIf="enabledFeature$ \| async as enabledFeature">
	78	<!-- Dashboard -->
	79	<li routerLinkActive="active"
	80	class="nav-item tc_menuitem_dashboard">
	81	<a routerLink="/dashboard"
	82	class="nav-link">
	83	<span i18n>Dashboard</span>
	84	<i [ngClass]="[icons.health]"
	85	[ngStyle]="summaryData?.health_status \| healthColor"></i>
	86	</a>
	87	</li>
	88
	89	<!-- Cluster -->
	90	<li routerLinkActive="active"
	91	class="nav-item tc_menuitem_cluster"
	92	*ngIf="permissions.hosts.read \|\| permissions.monitor.read \|\|
	93	permissions.osd.read \|\| permissions.configOpt.read \|\|
	94	permissions.log.read \|\| permissions.prometheus.read">
	95	<a (click)="toggleSubMenu('cluster')"
	96	class="nav-link dropdown-toggle"
	97	[attr.aria-expanded]="displayedSubMenu == 'cluster'"
	98	aria-controls="collapseBasic">
	99	<ng-container i18n>Cluster</ng-container>
	100	</a>
	101	<ul class="list-unstyled"
	102	[collapse]="displayedSubMenu !== 'cluster'"
	103	[isAnimated]="true">
	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">Inventory</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
f91f0fd5	150	routerLink="/mgr-modules">Manager Modules</a>
9f95a23c TL	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">
e306af50 TL	161	<a routerLink="/monitoring">
e306af50 TL	162	<ng-container i18n>Monitoring</ng-container>
cd265ab1 TL	163	<small *ngIf="prometheusAlertService.activeAlerts > 0"
cd265ab1 TL	164	class="badge badge-danger">{{ prometheusAlertService.activeAlerts }}</small>
e306af50	165	</a>
9f95a23c TL	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	[collapse]="displayedSubMenu !== 'block'"
	194	[isAnimated]="true">
	195	<li routerLinkActive="active"
	196	class="tc_submenuitem tc_submenuitem_block_images"
	197	*ngIf="permissions.rbdImage.read && enabledFeature.rbd">
	198	<a i18n
	199	routerLink="/block/rbd">Images</a>
	200	</li>
	201
	202	<li routerLinkActive="active"
	203	class="tc_submenuitem tc_submenuitem_block_mirroring"
	204	*ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
	205	<a routerLink="/block/mirroring">
	206	<ng-container i18n>Mirroring</ng-container>
	207	<small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
	208	class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
	209	<small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
	210	class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
	211	</a>
	212	</li>
	213
	214	<li routerLinkActive="active"
	215	class="tc_submenuitem tc_submenuitem_block_iscsi"
	216	*ngIf="permissions.iscsi.read && enabledFeature.iscsi">
	217	<a i18n
	218	routerLink="/block/iscsi">iSCSI</a>
	219	</li>
	220	</ul>
	221	</li>
	222
	223	<!-- NFS -->
	224	<li routerLinkActive="active"
	225	class="nav-item tc_menuitem_nfs"
	226	*ngIf="permissions.nfs.read && enabledFeature.nfs">
	227	<a i18n
	228	class="nav-link"
	229	routerLink="/nfs">NFS</a>
230	</li>
231
232	<!-- Filesystem -->
233	<li routerLinkActive="active"
234	class="nav-item tc_menuitem_cephfs"
235	*ngIf="permissions.cephfs.read && enabledFeature.cephfs">
236	<a i18n
237	class="nav-link"
238	routerLink="/cephfs">Filesystems</a>
239	</li>
240
241	<!-- Object Gateway -->
242	<li routerLinkActive="active"
243	class="nav-item tc_menuitem_rgw"
244	*ngIf="permissions.rgw.read && enabledFeature.rgw">
245	<a class="nav-link dropdown-toggle"
246	(click)="toggleSubMenu('rgw')"
247	[attr.aria-expanded]="displayedSubMenu == 'rgw'"
248	aria-controls="collapseBasic">
249	<ng-container i18n>Object Gateway</ng-container>
250	</a>
251	<ul class="list-unstyled"
252	[collapse]="displayedSubMenu !== 'rgw'"
253	[isAnimated]="true">
254	<li routerLinkActive="active"
255	class="tc_submenuitem tc_submenuitem_rgw_daemons">
256	<a i18n
257	routerLink="/rgw/daemon">Daemons</a>
258	</li>
259	<li routerLinkActive="active"
260	class="tc_submenuitem tc_submenuitem_rgw_users">
261	<a i18n
262	routerLink="/rgw/user">Users</a>
263	</li>
264	<li routerLinkActive="active"
265	class="tc_submenuitem tc_submenuitem_rgw_buckets">
266	<a i18n
267	routerLink="/rgw/bucket">Buckets</a>
268	</li>
269	</ul>
270	</li>
271	</ng-container>
272	</ng-template>