File
Implements
Methods
onSelect
|
onSelect(undefined)
|
|
|
headerHeight
|
Default value : Settings.tableHeaderHeight
|
|
isLoading
|
Default value : true
|
|
rowHeight
|
Default value : Settings.tableRowHeight
|
|
sorts
|
Type : []
|
Default value : [
{ prop: 'liveInstance', dir: 'asc' },
{ prop: 'name', dir: 'asc' },
]
|
|
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Settings } from '../../core/settings';
import { InstanceService } from '../shared/instance.service';
import { HelperService } from '../../shared/helper.service';
@Component({
selector: 'hi-instance-list',
templateUrl: './instance-list.component.html',
styleUrls: ['./instance-list.component.scss'],
})
export class InstanceListComponent implements OnInit {
isLoading = true;
clusterName: string;
instances: any[];
rowHeight = Settings.tableRowHeight;
headerHeight = Settings.tableHeaderHeight;
sorts = [
{ prop: 'liveInstance', dir: 'asc' },
{ prop: 'name', dir: 'asc' },
];
constructor(
protected route: ActivatedRoute,
protected router: Router,
protected service: InstanceService,
protected helper: HelperService
) {}
ngOnInit() {
if (this.route.parent) {
this.clusterName = this.route.parent.snapshot.params['name'];
this.service.getAll(this.clusterName).subscribe(
(data) => (this.instances = data),
(error) => this.helper.showError(error),
() => (this.isLoading = false)
);
}
}
onSelect({ selected }) {
const row = selected[0];
this.router.navigate([row.name], { relativeTo: this.route });
}
}
<!--
~ 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
#instancesTable
class="material"
[headerHeight]="headerHeight"
[rowHeight]="rowHeight"
columnMode="force"
[footerHeight]="rowHeight"
[rows]="instances"
[loadingIndicator]="isLoading"
selectionType="single"
[sorts]="sorts"
(select)="onSelect($event)"
>
<ngx-datatable-column
name="Status"
prop="healthy"
[width]="85"
[resizeable]="false"
[draggable]="false"
[canAutoResize]="false"
>
<ng-template let-row="row" ngx-datatable-cell-template>
<mat-icon *ngIf="row.healthy" class="status-healthy"
>check_circle</mat-icon
>
<mat-icon
*ngIf="!row.healthy && row.enabled"
class="status-not-healthy"
matTooltip="The instance is offline."
>cancel</mat-icon
>
<mat-icon
*ngIf="!row.healthy && row.liveInstance"
class="status-not-healthy"
matTooltip="The instance is disabled."
>cancel</mat-icon
>
<mat-icon
*ngIf="!row.healthy && !row.enabled && !row.liveInstance"
class="status-not-healthy"
matTooltip="The instance is offline and disabled."
>cancel</mat-icon
>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Name">
<ng-template let-row="row" ngx-datatable-cell-template>
<section fxLayout="row" fxLayoutAlign="start center">
{{ row.name }}
<hi-disabled-label
*ngIf="!row.enabled"
text="DISABLED"
></hi-disabled-label>
</section>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</section>
@use '@angular/material' as mat;
.info {
padding: 24px;
}
.status-healthy {
color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette));
}
.status-not-healthy {
color: mat.get-color-from-palette(
mat.define-palette(mat.$grey-palette, 900, 900, 900)
);
}
Legend
Html element with directive