RadioModule,
SelectModule,
UIShellModule,
- TreeviewModule
+ TreeviewModule,
+ TabsModule
} from 'carbon-components-angular';
// Icons
NumberModule,
ModalModule,
DatePickerModule,
- ComboBoxModule
+ ComboBoxModule,
+ TabsModule
],
declarations: [
RbdListComponent,
</cds-combo-box>
</div>
-<legend i18n>
- Gateways
- <cd-help-text>
- Ceph NVMe-oF gateways provide Ceph Block Device storage through NVMe/TCP. For VMware clients the NVMe/TCP volumes display as VMFS Datastores. For Linux clients the NVMe/TCP volumes display as as block devices.</cd-help-text>
-</legend>
-<div>
- <cd-table [data]="gateways"
- (fetchData)="getGateways()"
- [columns]="gatewayColumns">
- </cd-table>
-</div>
-
<ng-template #statusTpl
let-row="data.row">
<span class="badge"
{{ row.status_desc }}
</span>
</ng-template>
+
+<cds-tabs
+ type="contained"
+ followFocus="true"
+ isNavigation="true"
+ [cacheActive]="false">
+ <cds-tab
+ heading="Gateways"
+ [tabContent]="gateways_content"
+ i18n-heading
+ (selected)="onSelected(Tabs.gateways)">
+ </cds-tab>
+ <cds-tab
+ heading="Overview"
+ [tabContent]="overview_content"
+ i18n-heading
+ (selected)="onSelected(Tabs.overview)">
+ </cds-tab>
+ <cds-tab
+ heading="Performance"
+ [tabContent]="performance_content"
+ i18n-heading
+ (selected)="onSelected(Tabs.overview)">
+ </cds-tab>
+</cds-tabs>
+
+<ng-template #gateways_content>
+ <legend *ngIf="selectedTab === Tabs.gateways"
+ i18n>
+ Gateways
+ <cd-help-text>
+ Ceph NVMe-oF gateways provide Ceph Block Device storage through NVMe/TCP. For VMware clients the NVMe/TCP volumes display as VMFS Datastores. For Linux clients the NVMe/TCP volumes display as as block devices.
+ </cd-help-text>
+ </legend>
+ <div>
+ <cd-table [data]="gateways"
+ (fetchData)="getGateways()"
+ [columns]="gatewayColumns">
+ </cd-table>
+ </div>
+</ng-template>
+
+<ng-template #overview_content>
+ <cd-grafana i18n-title
+ title="Gateway overview"
+ grafanaPath="ceph-nvme-of-gateways-overview?var-group={{selectedGatewayGroup}}&var-gateway=All"
+ [type]="'metrics'"
+ uid="feeuv1dno43r4ddjhjssdd"
+ grafanaStyle="three">
+ </cd-grafana>
+</ng-template>
+
+<ng-template #performance_content>
+ <cd-grafana i18n-title
+ title="Gateway performance"
+ grafanaPath="ceph-nvme-of-gateways-performance?var-group={{selectedGatewayGroup}}"
+ [type]="'metrics'"
+ uid="feeuv1dno43r4deed"
+ grafanaStyle="three">
+ </cd-grafana>
+</ng-template>
status_desc: string;
};
+enum TABS {
+ 'gateways',
+ 'overview'
+}
+
@Component({
selector: 'cd-nvmeof-gateway',
templateUrl: './nvmeof-gateway.component.html',
styleUrls: ['./nvmeof-gateway.component.scss']
})
export class NvmeofGatewayComponent implements OnInit {
+ selectedTab: TABS;
+ selectedGatewayGroup: string = null;
+
+ onSelected(tab: TABS) {
+ this.selectedTab = tab;
+ }
+
+ public get Tabs(): typeof TABS {
+ return TABS;
+ }
+
@ViewChild('statusTpl', { static: true })
statusTpl: TemplateRef<any>;
onGroupSelection(selected: ComboBoxItem) {
selected.selected = true;
this.groupService = selected.serviceName;
+ this.selectedGatewayGroup = selected.content;
this.getGateways();
}
</cd-nvmeof-initiators-list>
</ng-template>
</ng-container>
+ <ng-container ngbNavItem="performance-details"
+ *ngIf="permissions.grafana.read">
+ <a ngbNavLink
+ i18n>Performance Details</a>
+ <ng-template ngbNavContent>
+ <cd-grafana i18n-title
+ title="Subsystem details"
+ grafanaPath="ceph-nvme-of-gateways-performance?var-group={{group}}&var-subsystem={{subsystemNQN}}"
+ [type]="'metrics'"
+ uid="feeuv1dno43r4deed"
+ grafanaStyle="three">
+ </cd-grafana>
+ </ng-template>
+ </ng-container>
</nav>
<div [ngbNavOutlet]="nav"></div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-
+import { Permissions } from '~/app/shared/models/permissions';
import { SharedModule } from '~/app/shared/shared.module';
import { NvmeofSubsystemsDetailsComponent } from './nvmeof-subsystems-details.component';
namespace_count: 1,
max_namespaces: 256
};
+ component.permissions = new Permissions({
+ grafana: ['read']
+ });
component.ngOnChanges();
fixture.detectChanges();
});
import { Component, Input, OnChanges } from '@angular/core';
import { NvmeofSubsystem } from '~/app/shared/models/nvmeof';
+import { Permissions } from '~/app/shared/models/permissions';
@Component({
selector: 'cd-nvmeof-subsystems-details',
@Input()
selection: NvmeofSubsystem;
@Input()
- group: NvmeofSubsystem;
+ group: string;
+ @Input()
+ permissions: Permissions;
selectedItem: any;
data: any;
(updateSelection)="updateSelection($event)">
<div class="table-actions">
- <cd-table-actions [permission]="permission"
+ <cd-table-actions [permission]="permissions.nvmeof"
[selection]="selection"
class="btn-group"
[tableActions]="tableActions">
<cd-nvmeof-subsystems-details *cdTableDetail
[selection]="expandedRow"
+ [permissions]="permissions"
[group]="group">
</cd-nvmeof-subsystems-details>
</cd-table>
import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants';
import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
import { NvmeofSubsystem } from '~/app/shared/models/nvmeof';
-import { Permission } from '~/app/shared/models/permissions';
+import { Permissions } from '~/app/shared/models/permissions';
import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
import { CdTableAction } from '~/app/shared/models/cd-table-action';
export class NvmeofSubsystemsComponent extends ListWithDetails implements OnInit {
subsystems: NvmeofSubsystem[] = [];
subsystemsColumns: any;
- permission: Permission;
+ permissions: Permissions;
selection = new CdTableSelection();
tableActions: CdTableAction[];
subsystemDetails: any[];
private route: ActivatedRoute
) {
super();
- this.permission = this.authStorageService.getPermissions().nvmeof;
+ this.permissions = this.authStorageService.getPermissions();
}
ngOnInit() {
projects / ceph.git / commitdiff