*ngIf="clientsSelect">
</cd-cephfs-clients>
</tab>
+ <tab i18n-heading
+ heading="Performance Details">
+ <cd-grafana [grafanaPath]="'rRfFzWtik/mds-performance?var-mds_servers=mds.' + grafanaId"
+ grafanaStyle="one">
+ </cd-grafana>
+ </tab>
</tabset>
<!-- templates -->
standbys = [];
clientCount: number;
mdsCounters = {};
+ grafanaId: any;
objectValues = Object.values;
clientsSelect = false;
ngOnChanges() {
if (this.selection.hasSelection) {
this.selectedItem = this.selection.first();
+ const mdsInfo: any[] = this.selectedItem.mdsmap.info;
+ this.grafanaId = Object.values(mdsInfo)[0].name;
if (this.id !== this.selectedItem.id) {
this.id = this.selectedItem.id;
import { SharedModule } from '../../shared/shared.module';
import { PerformanceCounterModule } from '../performance-counter/performance-counter.module';
import { ConfigurationComponent } from './configuration/configuration.component';
+import { HostDetailsComponent } from './hosts/host-details/host-details.component';
import { HostsComponent } from './hosts/hosts.component';
import { MonitorComponent } from './monitor/monitor.component';
import { OsdDetailsComponent } from './osd/osd-details/osd-details.component';
OsdDetailsComponent,
OsdPerformanceHistogramComponent,
OsdScrubModalComponent,
- OsdFlagsModalComponent
+ OsdFlagsModalComponent,
+ HostDetailsComponent
]
})
export class ClusterModule {}
--- /dev/null
+<tabset *ngIf="selection.hasSingleSelection">
+ <tab i18n-heading
+ heading="Performance Details">
+ <cd-grafana [grafanaPath]="'7IGu2Ttmz/host-details?'"
+ grafanaStyle="three">
+ </cd-grafana>
+ </tab>
+</tabset>
--- /dev/null
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BsDropdownModule } from 'ngx-bootstrap';
+import { TabsModule } from 'ngx-bootstrap/tabs';
+
+import { configureTestBed } from '../../../../../testing/unit-test-helper';
+import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
+import { SharedModule } from '../../../../shared/shared.module';
+import { HostDetailsComponent } from './host-details.component';
+
+describe('HostDetailsComponent', () => {
+ let component: HostDetailsComponent;
+ let fixture: ComponentFixture<HostDetailsComponent>;
+
+ configureTestBed({
+ imports: [
+ HttpClientTestingModule,
+ TabsModule.forRoot(),
+ BsDropdownModule.forRoot(),
+ SharedModule
+ ],
+ declarations: [HostDetailsComponent]
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HostDetailsComponent);
+ component = fixture.componentInstance;
+
+ component.selection = new CdTableSelection();
+
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, Input, OnChanges } from '@angular/core';
+
+import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
+
+@Component({
+ selector: 'cd-host-details',
+ templateUrl: './host-details.component.html',
+ styleUrls: ['./host-details.component.scss']
+})
+export class HostDetailsComponent implements OnChanges {
+ @Input()
+ selection: CdTableSelection;
+ host: any;
+
+ constructor() {}
+
+ ngOnChanges() {
+ if (this.selection.hasSelection) {
+ this.host = this.selection.first();
+ }
+ }
+}
-<cd-table [data]="hosts"
- [columns]="columns"
- columnMode="flex"
- (fetchData)="getHosts($event)">
- <ng-template #servicesTpl let-value="value">
- <span *ngFor="let service of value; last as isLast">
- <a [routerLink]="[service.cdLink]"
- [queryParams]="cdParams"
- *ngIf="service.canRead">{{ service.type }}.{{ service.id }}</a>
- <span *ngIf="!service.canRead">{{ service.type }}.{{ service.id }}</span>
- {{ !isLast ? ", " : "" }}
- </span>
- </ng-template>
-</cd-table>
+<tabset>
+ <tab i18n-heading
+ heading="Hosts List">
+ <cd-table [data]="hosts"
+ [columns]="columns"
+ columnMode="flex"
+ (fetchData)="getHosts($event)"
+ selectionType="single"
+ (updateSelection)="updateSelection($event)">
+ <ng-template #servicesTpl let-value="value">
+ <span *ngFor="let service of value; last as isLast">
+ <a [routerLink]="[service.cdLink]"
+ [queryParams]="cdParams"
+ *ngIf="service.canRead">{{ service.type }}.{{ service.id }}
+ </a>
+ <span *ngIf="!service.canRead">
+ {{ service.type }}.{{ service.id }}
+ </span>
+ {{ !isLast ? ", " : "" }}
+ </span>
+ </ng-template>
+ <cd-host-details cdTableDetail
+ [selection]="selection">
+ </cd-host-details>
+ </cd-table>
+ </tab>
+ <tab i18n-heading
+ heading="Overall Performance">
+ <cd-grafana [grafanaPath]="'lxnjcTAmk/host-overview?'"
+ grafanaStyle="two">
+ </cd-grafana>
+ </tab>
+</tabset>
import { RouterTestingModule } from '@angular/router/testing';
import { BsDropdownModule } from 'ngx-bootstrap';
+import { TabsModule } from 'ngx-bootstrap/tabs';
import { configureTestBed } from '../../../../testing/unit-test-helper';
import { ComponentsModule } from '../../../shared/components/components.module';
import { Permissions } from '../../../shared/models/permissions';
import { AuthStorageService } from '../../../shared/services/auth-storage.service';
import { SharedModule } from '../../../shared/shared.module';
+import { HostDetailsComponent } from './host-details/host-details.component';
import { HostsComponent } from './hosts.component';
describe('HostsComponent', () => {
imports: [
SharedModule,
HttpClientTestingModule,
+ TabsModule.forRoot(),
ComponentsModule,
BsDropdownModule.forRoot(),
RouterTestingModule
],
providers: [{ provide: AuthStorageService, useValue: fakeAuthStorageService }],
- declarations: [HostsComponent]
+ declarations: [HostsComponent, HostDetailsComponent]
});
beforeEach(() => {
import { HostService } from '../../../shared/api/host.service';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
+import { CdTableSelection } from '../../../shared/models/cd-table-selection';
import { Permissions } from '../../../shared/models/permissions';
import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
import { AuthStorageService } from '../../../shared/services/auth-storage.service';
hosts: Array<object> = [];
isLoadingHosts = false;
cdParams = { fromLink: '/hosts' };
+ selection = new CdTableSelection();
@ViewChild('servicesTpl')
public servicesTpl: TemplateRef<any>;
];
}
+ updateSelection(selection: CdTableSelection) {
+ this.selection = selection;
+ }
+
getHosts(context: CdTableFetchDataContext) {
if (this.isLoadingHosts) {
return;
</div>
</div>
</tab>
+ <tab i18n-heading
+ heading="Performance Details">
+ <cd-grafana [grafanaPath]="'MKj_9ipiz/osd-device-details?var-osd_id=' + osd['id']"
+ grafanaStyle="GrafanaStyles.two">
+ </cd-grafana>
+ </tab>
</tabset>
-<cd-table [data]="osds"
- (fetchData)="getOsdList()"
- [columns]="columns"
- selectionType="single"
- (updateSelection)="updateSelection($event)"
- [updateSelectionOnRefresh]="'never'">
- <div class="table-actions btn-toolbar"
- *ngIf="permission.update">
- <cd-table-actions [permission]="permission"
- [selection]="selection"
- onlyDropDown="Perform Task"
- class="btn-group"
- [tableActions]="tableActions">
- </cd-table-actions>
+<tabset>
+ <tab i18n-heading
+ heading="OSDs List">
+ <cd-table [data]="osds"
+ (fetchData)="getOsdList()"
+ [columns]="columns"
+ selectionType="single"
+ (updateSelection)="updateSelection($event)"
+ [updateSelectionOnRefresh]="'never'">
+ <div class="table-actions btn-toolbar" *ngIf="permission.update">
+ <cd-table-actions [permission]="permission"
+ [selection]="selection"
+ onlyDropDown="Perform Task"
+ class="btn-group"
+ [tableActions]="tableActions">
+ </cd-table-actions>
- <button class="btn btn-sm btn-default btn-label tc_configureCluster"
- type="button"
- (click)="configureClusterAction()">
- <i class="fa fa-fw fa-cog"
- aria-hidden="true"></i>
- <ng-container i18n>Set Cluster-wide OSD Flags</ng-container>
- </button>
- </div>
+ <button class="btn btn-sm btn-default btn-label tc_configureCluster"
+ type="button"
+ (click)="configureClusterAction()">
+ <i class="fa fa-fw fa-cog"
+ aria-hidden="true">
+ </i>
+ <ng-container i18n>Set Cluster-wide OSD Flags</ng-container>
+ </button>
+ </div>
- <cd-osd-details cdTableDetail
- [selection]="selection">
- </cd-osd-details>
-</cd-table>
+ <cd-osd-details cdTableDetail
+ [selection]="selection">
+ </cd-osd-details>
+ </cd-table>
-<ng-template #statusColor
- let-value="value">
- <span *ngFor="let state of value; last as last">
- <span class="label"
- [ngClass]="{'label-success': ['in', 'up'].includes(state), 'label-danger': ['down', 'out'].includes(state)}">
- {{ state }}
- </span>
- <span *ngIf="!last"> </span>
- </span>
-</ng-template>
+ <ng-template #statusColor
+ let-value="value">
+ <span *ngFor="let state of value; last as last">
+ <span class="label"
+ [ngClass]="{'label-success': ['in', 'up'].includes(state), 'label-danger': ['down', 'out'].includes(state)}">
+ {{ state }}
+ </span>
+ <span *ngIf="!last"> </span>
+ </span>
+ </ng-template>
-<ng-template #osdUsageTpl
- let-row="row">
- <cd-usage-bar [totalBytes]="row.stats.stat_bytes"
- [usedBytes]="row.stats.stat_bytes_used"></cd-usage-bar>
-</ng-template>
+ <ng-template #osdUsageTpl
+ let-row="row">
+ <cd-usage-bar [totalBytes]="row.stats.stat_bytes"
+ [usedBytes]="row.stats.stat_bytes_used">
+ </cd-usage-bar>
+ </ng-template>
+ </tab>
+ <tab i18n-heading
+ heading="Overall Performance">
+ <cd-grafana [grafanaPath]="'lo02I1Aiz/osd-overview?'"
+ grafanaStyle="three">
+ </cd-grafana>
+ </tab>
+</tabset>
-<cd-table [data]="pools"
- (fetchData)="getPoolList($event)"
- [columns]="columns"
- selectionType="single"
- (updateSelection)="updateSelection($event)">
- <tabset cdTableDetail *ngIf="selection.hasSingleSelection">
- <tab i18n-heading
- heading="Details">
- <cd-table-key-value [data]="selection.first()" [autoReload]="false">
- </cd-table-key-value>
- </tab>
- </tabset>
-</cd-table>
+<tabset>
+ <tab i18n-heading heading="Pools List">
+ <cd-table [data]="pools"
+ (fetchData)="getPoolList($event)"
+ [columns]="columns" selectionType="single"
+ (updateSelection)="updateSelection($event)">
+ <tabset cdTableDetail
+ *ngIf="selection.hasSingleSelection">
+ <tab i18n-heading heading="Details">
+ <cd-table-key-value [data]="selection.first()"
+ [autoReload]="false">
+ </cd-table-key-value>
+ </tab>
+ <tab i18n-heading
+ heading="Performance Details">
+ <cd-grafana [grafanaPath]="'8ypfkWpik/ceph-pool-detail?var-pool_name='
+ + selection.first()['pool_name']"
+ grafanaStyle="one">
+ </cd-grafana>
+ </tab>
+ </tabset>
+ </cd-table>
+ </tab>
+ <tab i18n-heading
+ heading="Overall Performance">
+ <cd-grafana [grafanaPath]="'z99hzWtmk/ceph-pools-overview?'"
+ grafanaStyle="two">
+ </cd-grafana>
+ </tab>
+</tabset>
[serviceId]="serviceId">
</cd-table-performance-counter>
</tab>
+ <tab i18n-heading
+ heading="Performance Details">
+ <cd-grafana [grafanaPath]="'x5ARzZtmk/rgw-instance-detail?var-rgw_servers=rgw.' + this.selection.first().id"
+ grafanaStyle="one">
+ </cd-grafana>
+ </tab>
</tabset>
-<cd-table [data]="daemons"
- [columns]="columns"
- columnMode="flex"
- selectionType="single"
- (updateSelection)="updateSelection($event)"
- (fetchData)="getDaemonList($event)">
- <cd-rgw-daemon-details cdTableDetail
- [selection]="selection">
- </cd-rgw-daemon-details>
-</cd-table>
+<tabset>
+ <tab i18n-heading heading="Daemons List">
+ <cd-table [data]="daemons"
+ [columns]="columns"
+ columnMode="flex"
+ selectionType="single"
+ (updateSelection)="updateSelection($event)"
+ (fetchData)="getDaemonList($event)">
+ <cd-rgw-daemon-details cdTableDetail [selection]="selection">
+ </cd-rgw-daemon-details>
+ </cd-table>
+ </tab>
+
+ <tab i18n-heading
+ heading="Overall Performance">
+ <cd-grafana [grafanaPath]="'WAkugZpiz/rgw-overview?'"
+ grafanaStyle="two">
+ </cd-grafana>
+ </tab>
+</tabset>
projects / ceph.git / commitdiff