[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-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 TL	1	<cd-pwd-expiration-notification></cd-pwd-expiration-notification>
9f95a23c TL	2	<cd-notifications-sidebar></cd-notifications-sidebar>
11fdf7f2	3
9f95a23c TL	4	<div class="cd-navbar-top">
	5	<nav class="navbar fixed-top navbar-expand-md navbar-dark cd-navbar-brand">
	6	<button class="btn btn-link py-0"
	7	(click)="showMenuSidebar = !showMenuSidebar">
	8	<i class="fa fa-bars fa-2x"
	9	aria-hidden="true"></i>
	10	</button>
	11
	12	<a class="navbar-brand ml-2"
11fdf7f2 TL	13	href="#">
11fdf7f2 TL	14	<img src="assets/Ceph_Logo_Standard_RGB_White_120411_fa.png"
9f95a23c	15	alt="Ceph" />
11fdf7f2 TL	16	</a>
	17
	18	<button type="button"
9f95a23c	19	class="navbar-toggler"
11fdf7f2 TL	20	(click)="isCollapsed = !isCollapsed">
	21	<span i18n
	22	class="sr-only">Toggle navigation</span>
9f95a23c TL	23	<span class="">
	24	<i class="fa fa-navicon fa-lg"></i>
	25	</span>
11fdf7f2	26	</button>
11fdf7f2	27
9f95a23c TL	28	<div class="collapse navbar-collapse"
	29	[collapse]="isCollapsed">
	30	<ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
	31	<ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
	32	</ul>
	33	</div>
	34	</nav>
	35	</div>
	36
	37	<div class="wrapper">
	38	<!-- Content -->
	39	<nav id="sidebar"
	40	[ngClass]="{'active': !showMenuSidebar}">
	41	<ngx-simplebar [options]="simplebar">
	42	<ul class="list-unstyled components cd-navbar-primary">
	43	<ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
	44	</ul>
	45	</ngx-simplebar>
	46	</nav>
	47
	48	<!-- Page Content -->
	49	<div id="content"
	50	[ngClass]="{'active': !showMenuSidebar}">
	51	<ng-content></ng-content>
11fdf7f2	52	</div>
9f95a23c TL	53	</div>
	54
	55	<ng-template #cd_utilities>
	56	<li class="nav-item ">
	57	<cd-language-selector class="cd-navbar"></cd-language-selector>
	58	</li>
	59	<li class="nav-item ">
	60	<cd-notifications class="cd-navbar"></cd-notifications>
	61	</li>
	62	<li class="nav-item ">
	63	<cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
	64	</li>
	65	<li class="nav-item ">
	66	<cd-administration class="cd-navbar"></cd-administration>
	67	</li>
	68	<li class="nav-item ">
	69	<cd-identity class="cd-navbar"></cd-identity>
	70	</li>
	71	</ng-template>
	72
	73	<ng-template #cd_menu >
	74	<ng-container *ngIf="enabledFeature$ \| async as enabledFeature">
	75	<!-- Dashboard -->
	76	<li routerLinkActive="active"
	77	class="nav-item tc_menuitem_dashboard">
	78	<a routerLink="/dashboard"
	79	class="nav-link">
	80	<span i18n>Dashboard</span>
	81	<i [ngClass]="[icons.health]"
	82	[ngStyle]="summaryData?.health_status \| healthColor"></i>
	83	</a>
	84	</li>
	85
	86	<!-- Cluster -->
	87	<li routerLinkActive="active"
	88	class="nav-item tc_menuitem_cluster"
	89	*ngIf="permissions.hosts.read \|\| permissions.monitor.read \|\|
	90	permissions.osd.read \|\| permissions.configOpt.read \|\|
	91	permissions.log.read \|\| permissions.prometheus.read">
	92	<a (click)="toggleSubMenu('cluster')"
	93	class="nav-link dropdown-toggle"
	94	[attr.aria-expanded]="displayedSubMenu == 'cluster'"
	95	aria-controls="collapseBasic">
	96	<ng-container i18n>Cluster</ng-container>
	97	</a>
	98	<ul class="list-unstyled"
	99	[collapse]="displayedSubMenu !== 'cluster'"
	100	[isAnimated]="true">
	101	<li routerLinkActive="active"
	102	class="tc_submenuitem tc_submenuitem_hosts"
	103	*ngIf="permissions.hosts.read">
	104	<a i18n
	105	routerLink="/hosts">Hosts</a>
	106	</li>
	107	<li routerLinkActive="active"
	108	class="tc_submenuitem tc_submenuitem_cluster_inventory"
	109	*ngIf="permissions.hosts.read">
	110	<a i18n
	111	routerLink="/inventory">Inventory</a>
	112	</li>
	113	<li routerLinkActive="active"
	114	class="tc_submenuitem tc_submenuitem_cluster_monitor"
	115	*ngIf="permissions.monitor.read">
	116	<a i18n
117	routerLink="/monitor/">Monitors</a>
118	</li>
119	<li routerLinkActive="active"
120	class="tc_submenuitem tc_submenuitem_cluster_services"
121	*ngIf="permissions.hosts.read">
122	<a i18n
123	routerLink="/services/">Services</a>
124	</li>
125	<li routerLinkActive="active"
126	class="tc_submenuitem tc_submenuitem_osds"
127	*ngIf="permissions.osd.read">
128	<a i18n
129	routerLink="/osd">OSDs</a>
130	</li>
131	<li routerLinkActive="active"
132	class="tc_submenuitem tc_submenuitem_configuration"
133	*ngIf="permissions.configOpt.read">
134	<a i18n
135	routerLink="/configuration">Configuration</a>
136	</li>
137	<li routerLinkActive="active"
138	class="tc_submenuitem tc_submenuitem_crush"
139	*ngIf="permissions.osd.read">
140	<a i18n
141	routerLink="/crush-map">CRUSH map</a>
142	</li>
143	<li routerLinkActive="active"
144	class="tc_submenuitem tc_submenuitem_modules"
145	*ngIf="permissions.configOpt.read">
146	<a i18n
147	routerLink="/mgr-modules">Manager modules</a>
148	</li>
149	<li routerLinkActive="active"
150	class="tc_submenuitem tc_submenuitem_log"
151	*ngIf="permissions.log.read">
152	<a i18n
153	routerLink="/logs">Logs</a>
154	</li>
155	<li routerLinkActive="active"
156	class="tc_submenuitem tc_submenuitem_monitoring"
157	*ngIf="permissions.prometheus.read">
e306af50 TL	158	<a routerLink="/monitoring">
	159	<ng-container i18n>Monitoring</ng-container>
	160	<small *ngIf="prometheusAlertService.alerts.length > 0"
	161	class="badge badge-danger">{{ prometheusAlertService.alerts.length }}</small>
	162	</a>
9f95a23c TL	163	</li>
	164	</ul>
	165	</li>
	166
	167	<!-- Pools -->
	168	<li routerLinkActive="active"
	169	class="nav-item tc_menuitem_pool"
	170	*ngIf="permissions.pool.read">
	171	<a class="nav-link"
	172	i18n
	173	routerLink="/pool">Pools</a>
	174	</li>
	175
	176	<!-- Block -->
	177	<li routerLinkActive="active"
	178	class="nav-item tc_menuitem_block"
	179	*ngIf="(permissions.rbdImage.read \|\| permissions.rbdMirroring.read \|\| permissions.iscsi.read) &&
	180	(enabledFeature.rbd \|\| enabledFeature.mirroring \|\| enabledFeature.iscsi)">
	181	<a class="nav-link dropdown-toggle"
	182	(click)="toggleSubMenu('block')"
	183	[attr.aria-expanded]="displayedSubMenu == 'block'"
	184	aria-controls="collapseBasic"
	185	[ngStyle]="blockHealthColor()">
	186	<ng-container i18n>Block</ng-container>
	187	</a>
	188
	189	<ul class="list-unstyled"
	190	[collapse]="displayedSubMenu !== 'block'"
	191	[isAnimated]="true">
	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"
235	routerLink="/cephfs">Filesystems</a>
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"
249	[collapse]="displayedSubMenu !== 'rgw'"
250	[isAnimated]="true">
251	<li routerLinkActive="active"
252	class="tc_submenuitem tc_submenuitem_rgw_daemons">
253	<a i18n
254	routerLink="/rgw/daemon">Daemons</a>
255	</li>
256	<li routerLinkActive="active"
257	class="tc_submenuitem tc_submenuitem_rgw_users">
258	<a i18n
259	routerLink="/rgw/user">Users</a>
260	</li>
261	<li routerLinkActive="active"
262	class="tc_submenuitem tc_submenuitem_rgw_buckets">
263	<a i18n
264	routerLink="/rgw/bucket">Buckets</a>
265	</li>
266	</ul>
267	</li>
268	</ng-container>
269	</ng-template>