File
Implements
Metadata
| selector |
cd-osd-details |
| styleUrls |
./osd-details.component.scss |
| templateUrl |
./osd-details.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
ngOnChanges
|
ngOnChanges()
|
|
|
|
|
import { Component, Input, OnChanges } from '@angular/core';
import * as _ from 'lodash';
import { OsdService } from '../../../../shared/api/osd.service';
import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
import { Permission } from '../../../../shared/models/permissions';
import { AuthStorageService } from '../../../../shared/services/auth-storage.service';
@Component({
selector: 'cd-osd-details',
templateUrl: './osd-details.component.html',
styleUrls: ['./osd-details.component.scss']
})
export class OsdDetailsComponent implements OnChanges {
@Input()
selection: CdTableSelection;
osd: any;
grafanaPermission: Permission;
constructor(private osdService: OsdService, private authStorageService: AuthStorageService) {
this.grafanaPermission = this.authStorageService.getPermissions().grafana;
}
ngOnChanges() {
this.osd = {
loaded: false
};
if (this.selection.hasSelection) {
this.osd = this.selection.first();
this.refresh();
}
}
refresh() {
this.osdService.getDetails(this.osd.id).subscribe((data: any) => {
this.osd.details = data;
this.osd.histogram_failed = '';
if (!_.isObject(data.histogram)) {
this.osd.histogram_failed = data.histogram;
this.osd.details.histogram = undefined;
}
this.osd.loaded = true;
});
}
}
<tabset *ngIf="selection.hasSingleSelection">
<tab heading="Attributes (OSD map)"
i18n-heading>
<cd-table-key-value *ngIf="osd.loaded"
[data]="osd.details.osd_map">
</cd-table-key-value>
</tab>
<tab heading="Metadata"
i18n-heading>
<cd-table-key-value *ngIf="osd.loaded && osd.details.osd_metadata; else noMetaData"
(fetchData)="refresh()"
[data]="osd.details.osd_metadata">
</cd-table-key-value>
<ng-template #noMetaData>
<cd-warning-panel i18n>Metadata not available</cd-warning-panel>
</ng-template>
</tab>
<tab heading="Performance counter"
i18n-heading>
<cd-table-performance-counter *ngIf="osd.loaded"
serviceType="osd"
[serviceId]="osd.id">
</cd-table-performance-counter>
</tab>
<tab heading="Histogram"
i18n-heading>
<cd-warning-panel *ngIf="osd.loaded && osd.histogram_failed"
i18n>Histogram not available: {{ osd.histogram_failed }}</cd-warning-panel>
<div class="row"
*ngIf="osd.loaded && osd.details.histogram">
<div class="col-md-6">
<h4 i18n>Writes</h4>
<cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_w_latency_in_bytes_histogram">
</cd-osd-performance-histogram>
</div>
<div class="col-md-6">
<h4 i18n>Reads</h4>
<cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_r_latency_out_bytes_histogram">
</cd-osd-performance-histogram>
</div>
</div>
</tab>
<tab i18n-heading
*ngIf="grafanaPermission.read"
heading="Performance Details">
<cd-grafana [grafanaPath]="'osd-device-details?var-osd_id=' + osd['id']"
uid="MKj_9ipiz"
grafanaStyle="GrafanaStyles.two">
</cd-grafana>
</tab>
</tabset>
Legend
Html element with directive