File
Implements
Methods
getReasonWhyCannotAnalyse
|
getReasonWhyCannotAnalyse()
|
|
Returns : boolean | string
|
Protected
loadResource
|
loadResource()
|
|
|
onSelect
|
onSelect(undefined)
|
|
|
headerHeight
|
Default value : Settings.tableHeaderHeight
|
|
isLoading
|
Default value : true
|
|
rowHeight
|
Default value : Settings.tableRowHeight
|
|
sorts
|
Type : []
|
Default value : [
{ prop: 'isReady', dir: 'asc' },
{ prop: 'name', dir: 'asc' },
]
|
|
table
|
Type : DatatableComponent
|
Decorators :
@ViewChild('partitionsTable', {static: false})
|
|
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Settings } from '../../core/settings';
import { Partition, IReplica, Resource } from '../shared/resource.model';
import { HelperService } from '../../shared/helper.service';
import { ResourceService } from '../shared/resource.service';
import { DatatableComponent } from '@swimlane/ngx-datatable';
@Component({
selector: 'hi-partition-list',
templateUrl: './partition-list.component.html',
styleUrls: ['./partition-list.component.scss'],
})
export class PartitionListComponent implements OnInit {
@ViewChild('partitionsTable', { static: false })
table: DatatableComponent;
isLoading = true;
clusterName: string;
resource: Resource;
partitions: Partition[];
headerHeight = Settings.tableHeaderHeight;
rowHeight = Settings.tableRowHeight;
sorts = [
{ prop: 'isReady', dir: 'asc' },
{ prop: 'name', dir: 'asc' },
];
constructor(
protected route: ActivatedRoute,
protected service: ResourceService,
protected helper: HelperService
) {}
ngOnInit() {
if (this.route.parent) {
this.clusterName = this.route.parent.snapshot.params.cluster_name;
this.loadResource();
}
}
// check whether we are capable of analysing the states :(
canAnalyse() {
return this.partitions && this.partitions.length;
}
getReasonWhyCannotAnalyse(): boolean | string {
if (!this.canAnalyse()) {
if (!this.resource.online) {
return 'The resource is OFFLINE and does not have partition information available.';
}
if (this.resource.partitionCount < 1) {
return 'This resource does not contain any partition information.';
}
}
return false;
}
onSelect({ selected }) {
const row = selected[0];
this.table.rowDetail.toggleExpandRow(row);
}
protected loadResource() {
const resourceName = this.resource
? this.resource.name
: this.route.parent.snapshot.params.resource_name;
this.isLoading = true;
this.service.get(this.clusterName, resourceName).subscribe(
(resource) => {
this.resource = resource;
this.partitions = this.resource.partitions;
},
(error) => this.helper.showError(error),
() => (this.isLoading = false)
);
}
}
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<section>
<ngx-datatable
*ngIf="canAnalyse()"
#partitionsTable
class="material"
[headerHeight]="headerHeight"
[rowHeight]="rowHeight"
columnMode="force"
[footerHeight]="rowHeight"
[rows]="partitions"
[sorts]="sorts"
[limit]="20"
selectionType="single"
(select)="onSelect($event)"
>
<ngx-datatable-column
[width]="50"
[resizeable]="false"
[sortable]="false"
[draggable]="false"
[canAutoResize]="false"
>
<ng-template let-expanded="expanded" ngx-datatable-cell-template>
<mat-icon>{{ expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Status"
prop="isReady"
[width]="85"
[resizeable]="false"
[draggable]="false"
[canAutoResize]="false"
>
<ng-template let-value="value" ngx-datatable-cell-template>
<mat-icon *ngIf="value" [ngClass]="'status-ready'"
>check_circle</mat-icon
>
<mat-icon *ngIf="!value" [ngClass]="'status-not-ready'">error</mat-icon>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Name"></ngx-datatable-column>
<ngx-datatable-column
name="Replicas"
[width]="100 * partitions[0].replicas.length"
[resizeable]="false"
[canAutoResize]="false"
>
<ng-template let-value="value" ngx-datatable-cell-template>
<span *ngFor="let replica of value" [matTooltip]="replica.instanceName">
<hi-state-label
[state]="replica.externalView"
[isReady]="
replica.externalView && replica.externalView == replica.idealState
"
></hi-state-label>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-row-detail rowHeight="auto">
<ng-template let-row="row" ngx-datatable-row-detail-template>
<hi-partition-detail
[clusterName]="resource.cluster"
[partition]="row"
></hi-partition-detail>
</ng-template>
</ngx-datatable-row-detail>
<ngx-datatable-footer>
<ng-template
ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-curPage="curPage"
>
<section
class="footer"
fxLayout="row"
fxLayoutAlign="space-between center"
>
<section>{{ rowCount }} total</section>
<section>
<datatable-pager
[pagerLeftArrowIcon]="'datatable-icon-left'"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
[hidden]="!(rowCount / pageSize > 1)"
(change)="partitionsTable.onFooterPage($event)"
>
</datatable-pager>
</section>
</section>
</ng-template>
</ngx-datatable-footer>
</ngx-datatable>
<div
*ngIf="!canAnalyse()"
class="message"
fxLayout="column"
fxLayoutAlign="center center"
>
<mat-spinner *ngIf="isLoading"></mat-spinner>
<section *ngIf="!isLoading && getReasonWhyCannotAnalyse()" fxFlexFill>
{{ getReasonWhyCannotAnalyse() }}
</section>
<section *ngIf="!isLoading && !getReasonWhyCannotAnalyse()" fxFlexFill>
<div>
Sorry, we do not support this kind of partition information yet.
Detailed debugging information:
</div>
<ngx-json-viewer [json]="resource"></ngx-json-viewer>
</section>
</div>
</section>
@use '@angular/material' as mat;
div.message {
padding: 20px;
}
.status-ready {
color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette));
}
.status-not-ready {
color: mat.get-color-from-palette(
mat.define-palette(mat.$grey-palette, 900, 900, 900),
darker
);
}
.footer {
width: 100%;
padding: 0 20px;
}
Legend
Html element with directive