[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_Logo_Standard_RGB_White_120411_fa.png"
           alt="Ceph" />
    </a>

    <button type="button"
            class="navbar-toggler"
            (click)="isCollapsed = !isCollapsed">
      <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"
         [collapse]="isCollapsed">
      <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"></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.alerts.length > 0"
                   class="badge badge-danger">{{ prometheusAlertService.alerts.length }}</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>
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 TL	14	href="#">
11fdf7f2 TL	15	<img src="assets/Ceph_Logo_Standard_RGB_White_120411_fa.png"
9f95a23c	16	alt="Ceph" />
11fdf7f2 TL	17	</a>
	18
	19	<button type="button"
9f95a23c	20	class="navbar-toggler"
11fdf7f2 TL	21	(click)="isCollapsed = !isCollapsed">
	22	<span i18n
	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
9f95a23c TL	29	<div class="collapse navbar-collapse"
	30	[collapse]="isCollapsed">
	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 ">
	61	<cd-notifications class="cd-navbar"></cd-notifications>
	62	</li>
	63	<li class="nav-item ">
	64	<cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
	65	</li>
	66	<li class="nav-item ">
	67	<cd-administration class="cd-navbar"></cd-administration>
	68	</li>
	69	<li class="nav-item ">
	70	<cd-identity class="cd-navbar"></cd-identity>
	71	</li>
	72	</ng-template>
	73
	74	<ng-template #cd_menu >
	75	<ng-container *ngIf="enabledFeature$ \| async as enabledFeature">
	76	<!-- Dashboard -->
	77	<li routerLinkActive="active"
	78	class="nav-item tc_menuitem_dashboard">
	79	<a routerLink="/dashboard"
	80	class="nav-link">
	81	<span i18n>Dashboard</span>
	82	<i [ngClass]="[icons.health]"
	83	[ngStyle]="summaryData?.health_status \| healthColor"></i>
	84	</a>
	85	</li>
	86
	87	<!-- Cluster -->
	88	<li routerLinkActive="active"
	89	class="nav-item tc_menuitem_cluster"
	90	*ngIf="permissions.hosts.read \|\| permissions.monitor.read \|\|
	91	permissions.osd.read \|\| permissions.configOpt.read \|\|
	92	permissions.log.read \|\| permissions.prometheus.read">
	93	<a (click)="toggleSubMenu('cluster')"
	94	class="nav-link dropdown-toggle"
	95	[attr.aria-expanded]="displayedSubMenu == 'cluster'"
	96	aria-controls="collapseBasic">
	97	<ng-container i18n>Cluster</ng-container>
	98	</a>
	99	<ul class="list-unstyled"
	100	[collapse]="displayedSubMenu !== 'cluster'"
	101	[isAnimated]="true">
	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">
	160	<ng-container i18n>Monitoring</ng-container>
	161	<small *ngIf="prometheusAlertService.alerts.length > 0"
	162	class="badge badge-danger">{{ prometheusAlertService.alerts.length }}</small>
	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"
	191	[collapse]="displayedSubMenu !== 'block'"
	192	[isAnimated]="true">
	193	<li routerLinkActive="active"
	194	class="tc_submenuitem tc_submenuitem_block_images"
	195	*ngIf="permissions.rbdImage.read && enabledFeature.rbd">
	196	<a i18n
	197	routerLink="/block/rbd">Images</a>
	198	</li>
	199
	200	<li routerLinkActive="active"
	201	class="tc_submenuitem tc_submenuitem_block_mirroring"
	202	*ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
	203	<a routerLink="/block/mirroring">
	204	<ng-container i18n>Mirroring</ng-container>
	205	<small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
	206	class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
	207	<small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
	208	class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
	209	</a>
	210	</li>
	211
	212	<li routerLinkActive="active"
	213	class="tc_submenuitem tc_submenuitem_block_iscsi"
	214	*ngIf="permissions.iscsi.read && enabledFeature.iscsi">
	215	<a i18n
	216	routerLink="/block/iscsi">iSCSI</a>
	217	</li>
	218	</ul>
	219	</li>
	220
	221	<!-- NFS -->
	222	<li routerLinkActive="active"
	223	class="nav-item tc_menuitem_nfs"
	224	*ngIf="permissions.nfs.read && enabledFeature.nfs">
	225	<a i18n
	226	class="nav-link"
	227	routerLink="/nfs">NFS</a>
228	</li>
229
230	<!-- Filesystem -->
231	<li routerLinkActive="active"
232	class="nav-item tc_menuitem_cephfs"
233	*ngIf="permissions.cephfs.read && enabledFeature.cephfs">
234	<a i18n
235	class="nav-link"
236	routerLink="/cephfs">Filesystems</a>
237	</li>
238
239	<!-- Object Gateway -->
240	<li routerLinkActive="active"
241	class="nav-item tc_menuitem_rgw"
242	*ngIf="permissions.rgw.read && enabledFeature.rgw">
243	<a class="nav-link dropdown-toggle"
244	(click)="toggleSubMenu('rgw')"
245	[attr.aria-expanded]="displayedSubMenu == 'rgw'"
246	aria-controls="collapseBasic">
247	<ng-container i18n>Object Gateway</ng-container>
248	</a>
249	<ul class="list-unstyled"
250	[collapse]="displayedSubMenu !== 'rgw'"
251	[isAnimated]="true">
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>