[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 i18n
             routerLink="/monitoring">Monitoring</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">
158	<a i18n
159	routerLink="/monitoring">Monitoring</a>
160	</li>
161	</ul>
162	</li>
163
164	<!-- Pools -->
165	<li routerLinkActive="active"
166	class="nav-item tc_menuitem_pool"
167	*ngIf="permissions.pool.read">
168	<a class="nav-link"
169	i18n
170	routerLink="/pool">Pools</a>
171	</li>
172
173	<!-- Block -->
174	<li routerLinkActive="active"
175	class="nav-item tc_menuitem_block"
176	*ngIf="(permissions.rbdImage.read \|\| permissions.rbdMirroring.read \|\| permissions.iscsi.read) &&
177	(enabledFeature.rbd \|\| enabledFeature.mirroring \|\| enabledFeature.iscsi)">
178	<a class="nav-link dropdown-toggle"
179	(click)="toggleSubMenu('block')"
180	[attr.aria-expanded]="displayedSubMenu == 'block'"
181	aria-controls="collapseBasic"
182	[ngStyle]="blockHealthColor()">
183	<ng-container i18n>Block</ng-container>
184	</a>
185
186	<ul class="list-unstyled"
187	[collapse]="displayedSubMenu !== 'block'"
188	[isAnimated]="true">
189	<li routerLinkActive="active"
190	class="tc_submenuitem tc_submenuitem_block_images"
191	*ngIf="permissions.rbdImage.read && enabledFeature.rbd">
192	<a i18n
193	routerLink="/block/rbd">Images</a>
194	</li>
195
196	<li routerLinkActive="active"
197	class="tc_submenuitem tc_submenuitem_block_mirroring"
198	*ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
199	<a routerLink="/block/mirroring">
200	<ng-container i18n>Mirroring</ng-container>
201	<small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
202	class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
203	<small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
204	class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
205	</a>
206	</li>
207
208	<li routerLinkActive="active"
209	class="tc_submenuitem tc_submenuitem_block_iscsi"
210	*ngIf="permissions.iscsi.read && enabledFeature.iscsi">
211	<a i18n
212	routerLink="/block/iscsi">iSCSI</a>
213	</li>
214	</ul>
215	</li>
216
217	<!-- NFS -->
218	<li routerLinkActive="active"
219	class="nav-item tc_menuitem_nfs"
220	*ngIf="permissions.nfs.read && enabledFeature.nfs">
221	<a i18n
222	class="nav-link"
223	routerLink="/nfs">NFS</a>
224	</li>
225
226	<!-- Filesystem -->
227	<li routerLinkActive="active"
228	class="nav-item tc_menuitem_cephfs"
229	*ngIf="permissions.cephfs.read && enabledFeature.cephfs">
230	<a i18n
231	class="nav-link"
232	routerLink="/cephfs">Filesystems</a>
233	</li>
234
235	<!-- Object Gateway -->
236	<li routerLinkActive="active"
237	class="nav-item tc_menuitem_rgw"
238	*ngIf="permissions.rgw.read && enabledFeature.rgw">
239	<a class="nav-link dropdown-toggle"
240	(click)="toggleSubMenu('rgw')"
241	[attr.aria-expanded]="displayedSubMenu == 'rgw'"
242	aria-controls="collapseBasic">
243	<ng-container i18n>Object Gateway</ng-container>
244	</a>
245	<ul class="list-unstyled"
246	[collapse]="displayedSubMenu !== 'rgw'"
247	[isAnimated]="true">
248	<li routerLinkActive="active"
249	class="tc_submenuitem tc_submenuitem_rgw_daemons">
250	<a i18n
251	routerLink="/rgw/daemon">Daemons</a>
252	</li>
253	<li routerLinkActive="active"
254	class="tc_submenuitem tc_submenuitem_rgw_users">
255	<a i18n
256	routerLink="/rgw/user">Users</a>
257	</li>
258	<li routerLinkActive="active"
259	class="tc_submenuitem tc_submenuitem_rgw_buckets">
260	<a i18n
261	routerLink="/rgw/bucket">Buckets</a>
262	</li>
263	</ul>
264	</li>
265	</ng-container>
266	</ng-template>