File
Implements
Metadata
| selector |
cd-navigation |
| styleUrls |
./navigation.component.scss |
| templateUrl |
./navigation.component.html |
Methods
|
blockHealthColor
|
blockHealthColor()
|
|
|
|
Returns : { color: string; }
|
|
isCollapsed
|
Default value : true
|
|
|
|
prometheusConfigured
|
Default value : false
|
|
|
import { Component, OnInit } from '@angular/core';
import { PrometheusService } from '../../../shared/api/prometheus.service';
import { Permissions } from '../../../shared/models/permissions';
import { AuthStorageService } from '../../../shared/services/auth-storage.service';
import {
FeatureTogglesMap$,
FeatureTogglesService
} from '../../../shared/services/feature-toggles.service';
import { SummaryService } from '../../../shared/services/summary.service';
@Component({
selector: 'cd-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit {
permissions: Permissions;
summaryData: any;
isCollapsed = true;
prometheusConfigured = false;
enabledFeature$: FeatureTogglesMap$;
constructor(
private authStorageService: AuthStorageService,
private prometheusService: PrometheusService,
private summaryService: SummaryService,
private featureToggles: FeatureTogglesService
) {
this.permissions = this.authStorageService.getPermissions();
this.enabledFeature$ = this.featureToggles.get();
}
ngOnInit() {
this.summaryService.subscribe((data: any) => {
if (!data) {
return;
}
this.summaryData = data;
});
this.prometheusService.ifAlertmanagerConfigured(() => (this.prometheusConfigured = true));
}
blockHealthColor() {
if (this.summaryData && this.summaryData.rbd_mirroring) {
if (this.summaryData.rbd_mirroring.errors > 0) {
return { color: '#d9534f' };
} else if (this.summaryData.rbd_mirroring.warnings > 0) {
return { color: '#f0ad4e' };
}
}
}
}
<nav class="navbar navbar-default navbar-main">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header tc_logo_component">
<a class="navbar-brand"
href="#">
<img src="assets/Ceph_Logo_Standard_RGB_White_120411_fa.png"
alt="Ceph">
</a>
<button type="button"
class="navbar-toggle collapsed"
(click)="isCollapsed = !isCollapsed">
<span i18n
class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div *ngIf="enabledFeature$ | async as enabledFeature"
class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1"
[collapse]="isCollapsed">
<ul class="nav navbar-nav navbar-primary">
<!-- Dashboard -->
<li routerLinkActive="active"
class="tc_menuitem tc_menuitem_dashboard">
<a routerLink="/dashboard">
<i class="fa fa-heartbeat fa-fw"
[ngStyle]="summaryData?.health_status | healthColor"></i>
<span i18n>Dashboard</span>
</a>
</li>
<!-- Cluster -->
<li dropdown
routerLinkActive="active"
class="dropdown tc_menuitem tc_menuitem_cluster"
*ngIf="permissions.hosts.read || permissions.monitor.read || permissions.osd.read || permissions.configOpt.read">
<a dropdownToggle
class="dropdown-toggle"
data-toggle="dropdown">
<ng-container i18n>Cluster</ng-container>
<span class="caret"></span>
</a>
<ul *dropdownMenu
class="dropdown-menu">
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_hosts"
*ngIf="permissions.hosts.read">
<a i18n
class="dropdown-item"
routerLink="/hosts">Hosts</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_cluster_monitor"
*ngIf="permissions.monitor.read">
<a i18n
class="dropdown-item"
routerLink="/monitor/">Monitors</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_hosts"
*ngIf="permissions.osd.read">
<a i18n
class="dropdown-item"
routerLink="/osd">OSDs</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_configuration"
*ngIf="permissions.configOpt.read">
<a i18n
class="dropdown-item"
routerLink="/configuration">Configuration</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_crush"
*ngIf="permissions.hosts.read && permissions.osd.read">
<a i18n
class="dropdown-item"
routerLink="/crush-map">CRUSH map</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_modules"
*ngIf="permissions.configOpt.read">
<a i18n
class="dropdown-item"
routerLink="/mgr-modules">Manager modules</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_log"
*ngIf="permissions.log.read">
<a i18n
class="dropdown-item"
routerLink="/logs">Logs</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_prometheus"
*ngIf="prometheusConfigured && permissions.prometheus.read">
<a i18n
routerLink="/alerts">Alerts</a>
</li>
</ul>
</li>
<!-- Pools -->
<li routerLinkActive="active"
class="tc_menuitem tc_menuitem_pool"
*ngIf="permissions.pool.read">
<a i18n
routerLink="/pool">Pools</a>
</li>
<!-- Block -->
<li dropdown
routerLinkActive="active"
class="dropdown tc_menuitem tc_menuitem_block"
*ngIf="
(enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi) &&
(permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read)">
<a dropdownToggle
class="dropdown-toggle"
data-toggle="dropdown"
[ngStyle]="blockHealthColor()">
<ng-container i18n>Block</ng-container>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li routerLinkActive="active"
*ngIf="enabledFeature.rbd && permissions.rbdImage.read">
<a i18n
class="dropdown-item"
routerLink="/block/rbd">Images</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_block_mirroring"
*ngIf="enabledFeature.mirroring && permissions.rbdMirroring.read">
<a class="dropdown-item"
routerLink="/block/mirroring">
<ng-container i18n>Mirroring</ng-container>
<small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
class="label label-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
<small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
class="label label-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
</a>
</li>
<li routerLinkActive="active"
*ngIf="enabledFeature.iscsi && permissions.iscsi.read">
<a i18n
class="dropdown-item"
routerLink="/block/iscsi">iSCSI</a>
</li>
</ul>
</li>
<!-- NFS -->
<li routerLinkActive="active"
class="tc_menuitem tc_menuitem_nfs"
*ngIf="permissions?.nfs?.read">
<a i18n
routerLink="/nfs">NFS</a>
</li>
<!-- Filesystem -->
<li routerLinkActive="active"
class="tc_menuitem tc_menuitem_cephs"
*ngIf="enabledFeature.cephfs && permissions.cephfs.read">
<a i18n
routerLink="/cephfs">Filesystems</a>
</li>
<!-- Object Gateway -->
<li dropdown
routerLinkActive="active"
class="dropdown tc_menuitem tc_menuitem_rgw"
*ngIf="enabledFeature.rgw && permissions.rgw.read">
<a dropdownToggle
class="dropdown-toggle"
data-toggle="dropdown">
<ng-container i18n>Object Gateway</ng-container>
<span class="caret"></span>
</a>
<ul *dropdownMenu
class="dropdown-menu">
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_rgw_daemons">
<a i18n
class="dropdown-item"
routerLink="/rgw/daemon">Daemons</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_rgw_users">
<a i18n
class="dropdown-item"
routerLink="/rgw/user">Users</a>
</li>
<li routerLinkActive="active"
class="tc_submenuitem tc_submenuitem_rgw_buckets">
<a i18n
class="dropdown-item"
routerLink="/rgw/bucket">Buckets</a>
</li>
</ul>
</li>
</ul>
<!-- /.navbar-primary -->
<ul class="nav navbar-nav navbar-utility">
<li>
<cd-language-selector class="oa-navbar"></cd-language-selector>
</li>
<li>
<cd-task-manager class="oa-navbar"></cd-task-manager>
</li>
<li>
<cd-notifications class="oa-navbar"></cd-notifications>
</li>
<li>
<cd-dashboard-help class="oa-navbar"></cd-dashboard-help>
</li>
<li>
<cd-administration class="oa-navbar"></cd-administration>
</li>
<li>
<cd-identity class="oa-navbar"></cd-identity>
</li>
</ul>
<!-- /.navbar-utility -->
</div>
<!-- /.navbar-collapse -->
</nav>
@import '../../../../defaults';
/* Navbar */
::ng-deep .navbar-main {
margin-bottom: 0;
background: $color-navbar-bg;
border: 0;
border-radius: 0;
border-top: 4px solid $color-nav-top-bar;
font-size: 1.2em;
.navbar-header {
display: flex;
float: none;
}
.navbar-brand,
.navbar-brand:hover {
color: $color-navbar-brand;
height: auto;
margin: 15px 0 15px 20px;
padding: 0;
-webkit-align-self: flex-start;
align-self: flex-start;
}
.navbar-brand > img {
height: 25px;
}
.navbar-toggle {
margin-left: auto;
border: 0;
}
.navbar-toggle:focus,
.navbar-toggle:hover {
background-color: transparent;
outline: 0;
}
.navbar-toggle .icon-bar {
background-color: $color-nav-toggle-bar;
}
.navbar-toggle:focus .icon-bar,
.navbar-toggle:hover .icon-bar {
-webkit-box-shadow: 0 0 3px $color-nav-toggle-shadow;
box-shadow: 0 0 3px $color-nav-toggle-shadow;
}
.navbar-collapse {
padding: 0;
}
.navbar-nav > li > .oa-navbar > [dropdown] > ul > li > .dropdown-item {
font-size: 12px;
}
.navbar-nav > li > .oa-navbar > [dropdown] > a,
.navbar-nav > li > .oa-navbar > a,
.navbar-nav > li > a {
color: $color-nav-links;
line-height: 1;
padding: 10px 18px;
position: relative;
display: block;
text-decoration: none;
}
.navbar-nav > li > .oa-navbar > [dropdown] > a:focus,
.navbar-nav > li > .oa-navbar > [dropdown] > a:hover,
.navbar-nav > li > .oa-navbar > a:focus,
.navbar-nav > li > .oa-navbar > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li > a:hover {
color: $color-nav-links;
}
.navbar-nav > li > .oa-navbar > [dropdown] > a:hover,
.navbar-nav > li > .oa-navbar > [dropdown].open > a,
.navbar-nav > li > .oa-navbar > a:hover,
.navbar-nav > li > a:hover {
background-color: $color-nav-links-hover;
}
.navbar-nav > li a.dropdown-toggle span.caret {
margin-left: 5px;
}
.navbar-nav > .open > .oa-navbar > [dropdown] > a,
.navbar-nav > .open > .oa-navbar > [dropdown] > a:hover,
.navbar-nav > .open > .oa-navbar > a,
.navbar-nav > .open > .oa-navbar > a:focus,
.navbar-nav > .open > .oa-navbar > a:hover,
.navbar-nav > .open > .oa-navbar > li > a:focus,
.navbar-nav > .open > a,
.navbar-nav > .open > a:focus,
.navbar-nav > .open > a:hover {
color: $color-nav-links;
border-color: transparent;
background-color: transparent;
}
.navbar-primary > li > a {
border: 0;
}
.navbar-primary > .active > a,
.navbar-primary > .active > a:focus,
.navbar-primary > .active > a:hover {
color: $color-nav-links;
background-color: $color-nav-links-hover;
border: 0;
}
.navbar-utility .fa,
.navbar-utility a {
font-size: 1.1em;
}
.navbar-utility > .active > a {
color: $color-nav-links;
background-color: $color-nav-links-hover;
}
.navbar-utility > li > .open > a,
.navbar-utility > li > .open > a:focus,
.navbar-utility > li > .open > a:hover {
color: $color-nav-links;
border-color: transparent;
background-color: transparent;
}
@media (min-width: $screen-sm-min) {
.navbar-primary > li > a {
border-bottom: 4px solid transparent;
}
.navbar-primary > .active > a,
.navbar-primary > .active > a:focus,
.navbar-primary > .active > a:hover {
background-color: transparent;
border-bottom: 4px solid $color-nav-bottom-bar;
}
.navbar-utility {
border-bottom: 0;
font-size: 11px;
position: absolute;
right: 0;
top: 0;
}
}
@media (max-width: $screen-xs-max) {
.navbar-nav {
margin: 0;
.fa {
margin-right: 0.5em;
}
}
.navbar-collapse,
.navbar-form {
border-color: $color-nav-collapse-border;
}
.navbar-collapse {
padding: 0;
}
.navbar-nav .open .dropdown-menu {
padding-top: 0;
padding-bottom: 0;
background-color: $color-nav-open-bg;
}
.navbar-nav .open .dropdown-menu .dropdown-header,
.navbar-nav .open .dropdown-menu > li > a {
padding: 5px 15px 5px 35px;
}
.navbar-nav .open .dropdown-menu > li > a {
color: $color-nav-links;
}
.navbar-nav .open .dropdown-menu > .active > a {
color: $color-nav-links;
background-color: $color-nav-active-link-bg;
}
.navbar-nav > li > a:hover {
background-color: $color-nav-active-link-bg;
}
.navbar-utility {
border-top: 1px solid $color-nav-border-top-collapse;
a {
font-size: 1em;
}
}
.navbar-primary > .active > a,
.navbar-primary > .active > a:focus,
.navbar-primary > .active > a:hover {
background-color: $color-nav-active-link-bg;
}
}
}
Legend
Html element with directive