File

src/app/ceph/cluster/crushmap/crushmap.component.ts

Implements

OnInit

Metadata

selector cd-crushmap
styleUrls ./crushmap.component.scss
templateUrl ./crushmap.component.html

Index

Properties
Methods

Constructor

constructor(healthService: HealthService)
Parameters :
Name Type Optional
healthService HealthService No

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...
ngOnInit
ngOnInit()
Returns : void
onNodeSelected
onNodeSelected(e: NodeEvent)
Parameters :
Name Type Optional
e NodeEvent No
Returns : void

Properties

metadata
Type : any
metadataKeyMap
Type : literal type
Default value : {}
metadataTitle
Type : string
tree
Type : TreeModel
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>&nbsp;</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>

./crushmap.component.scss

::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
Component
Html element with directive

result-matching ""

    No results matching ""