File
Implements
Metadata
selector |
cd-crushmap |
styleUrls |
./crushmap.component.scss |
templateUrl |
./crushmap.component.html |
Methods
_abstractTreeData
|
_abstractTreeData(data: any)
|
|
Parameters :
Name |
Type |
Optional |
data |
any
|
No
|
Returns : TreeModel
|
Private
generateTreeLeaf
|
generateTreeLeaf(node: any, treeNodeMap)
|
|
Parameters :
Name |
Type |
Optional |
node |
any
|
No
|
treeNodeMap |
|
No
|
Returns : { value: string; status: string; settings: { static: boolean; }; id: any; children: {}; } | { val...
|
onNodeSelected
|
onNodeSelected(e: NodeEvent)
|
|
Parameters :
Name |
Type |
Optional |
e |
NodeEvent
|
No
|
|
metadataKeyMap
|
Type : literal type
|
Default value : {}
|
|
import { Component, OnInit } from '@angular/core';
import { NodeEvent, TreeModel } from 'ng2-tree';
import { HealthService } from '../../../shared/api/health.service';
@Component({
selector: 'cd-crushmap',
templateUrl: './crushmap.component.html',
styleUrls: ['./crushmap.component.scss']
})
export class CrushmapComponent implements OnInit {
tree: TreeModel;
metadata: any;
metadataTitle: string;
metadataKeyMap: { [key: number]: number } = {};
constructor(private healthService: HealthService) {}
ngOnInit() {
this.healthService.getFullHealth().subscribe((data: any) => {
this.tree = this._abstractTreeData(data);
});
}
_abstractTreeData(data: any): TreeModel {
const nodes = data.osd_map.tree.nodes || [];
const treeNodeMap: { [key: number]: any } = {};
if (0 === nodes.length) {
return {
value: 'No nodes!',
settings: { static: true }
};
}
const rootNodeId = nodes[0].id || null;
nodes.reverse().forEach((node) => {
treeNodeMap[node.id] = this.generateTreeLeaf(node, treeNodeMap);
});
return treeNodeMap[rootNodeId];
}
private generateTreeLeaf(node: any, treeNodeMap) {
const id = node.id;
this.metadataKeyMap[id] = node;
const settings = { static: true };
const value: string = node.name + ' (' + node.type + ')';
const status: string = node.status;
const children: any[] = [];
if (node.children) {
node.children.sort().forEach((childId) => {
children.push(treeNodeMap[childId]);
});
return { value, status, settings, id, children };
}
return { value, status, settings, id };
}
onNodeSelected(e: NodeEvent) {
const { name, type, status, ...remain } = this.metadataKeyMap[e.node.id];
this.metadata = remain;
this.metadataTitle = name + ' (' + type + ')';
}
}
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span i18n>CRUSH map viewer</span>
</h3>
</div>
<div class="panel-body">
<div class="col-sm-6 col-lg-6">
<tree [tree]="tree"
(nodeSelected)="onNodeSelected($event)">
<ng-template let-node>
<span class="label"
[ngClass]="{'label-success': ['in', 'up'].includes(node.status), 'label-danger': ['down', 'out'].includes(node.status)}">{{ node.status }}</span>
<span> </span>
<span class="node-name" [innerHTML]="node.value"></span>
</ng-template>
</tree>
</div>
<div class="col-sm-6 col-lg-6 metadata" *ngIf="metadata">
<legend>{{ metadataTitle }}</legend>
<cd-table-key-value [data]="metadata"></cd-table-key-value>
</div>
</div>
</div>
</div>
</div>
::ng-deep tree-internal .tree li {
cursor: pointer;
}
::ng-deep tree-internal .tree .node-value {
color: #2b99a8;
border-radius: 5px;
}
::ng-deep tree-internal .tree .node-selected {
background-color: #d9edf7;
color: #212121;
}
::ng-deep tree-internal .tree .node-value:hover {
color: #212121;
}
::ng-deep tree-internal .tree .node-value:after {
height: 0;
}
Legend
Html element with directive