File
Implements
Methods
getControllerCellClass
|
getControllerCellClass(undefined)
|
|
|
getSessionCellClass
|
getSessionCellClass(undefined)
|
|
|
bindFunc
|
Default value : _.bind
|
|
headerHeight
|
Default value : Settings.tableHeaderHeight
|
|
isLoading
|
Default value : true
|
|
rowHeight
|
Default value : Settings.tableRowHeight
|
|
sorts
|
Type : []
|
Default value : [{ prop: 'date', dir: 'desc' }]
|
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as _ from 'lodash';
import { Settings } from '../../core/settings';
import { HistoryService } from '../shared/history.service';
import { History } from '../shared/history.model';
@Component({
selector: 'hi-history-list',
templateUrl: './history-list.component.html',
styleUrls: ['./history-list.component.scss'],
providers: [HistoryService],
// FIXME: have to turn off shadow dom or .current-controller won't work
encapsulation: ViewEncapsulation.None,
})
export class HistoryListComponent implements OnInit {
rows: History[];
rowHeight = Settings.tableRowHeight;
headerHeight = Settings.tableHeaderHeight;
isController: boolean;
isLoading = true;
sorts = [{ prop: 'date', dir: 'desc' }];
// to let ngx-datatable helper funcs have 'this' context
bindFunc = _.bind;
constructor(private route: ActivatedRoute, private service: HistoryService) {}
ngOnInit() {
if (this.route.parent) {
const clusterName = this.route.parent.snapshot.params['cluster_name'];
const instanceName = this.route.parent.snapshot.params['instance_name'];
const observable = instanceName
? this.service.getInstanceHistory(clusterName, instanceName)
: this.service.getControllerHistory(clusterName);
this.isController = !instanceName;
observable.subscribe(
(histories) => (this.rows = histories),
(error) => {},
() => (this.isLoading = false)
);
}
}
getControllerCellClass({ value }): any {
return {
current: value == this.rows[this.rows.length - 1].controller,
};
}
getSessionCellClass({ value }): any {
return {
current: value == this.rows[this.rows.length - 1].session,
};
}
}
<!--
~ 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
#historyTable
class="material"
[loadingIndicator]="isLoading"
[headerHeight]="headerHeight"
[rowHeight]="rowHeight"
columnMode="force"
[rows]="rows"
[sorts]="sorts"
>
<ngx-datatable-column
name="Date (GMT)"
prop="date"
[width]="240"
[canAutoResize]="false"
></ngx-datatable-column>
<ngx-datatable-column
name="Epoch Time"
prop="time"
[width]="200"
[canAutoResize]="false"
>
<ng-template let-value="value" ngx-datatable-cell-template>
<span matTooltip="Local time: {{ value | date: 'medium' }}">
{{ value }}
</span>
<button
mat-icon-button
matTooltip="Copy to clipboard"
ngxClipboard
[cbContent]="value"
>
<mat-icon>content_copy</mat-icon>
</button>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Controller"
*ngIf="isController"
[cellClass]="bindFunc(getControllerCellClass, this)"
>
</ngx-datatable-column>
<ngx-datatable-column
name="Session"
*ngIf="!isController"
[cellClass]="bindFunc(getSessionCellClass, this)"
>
</ngx-datatable-column>
</ngx-datatable>
</section>
// Import theming functions
@use '@angular/material' as mat;
// Import custom theme
@import 'src/theme.scss';
hi-history-list {
.current {
color: mat.get-color-from-palette($hi-primary);
}
.mat-icon {
@include md-icon-size(20px);
}
}
Legend
Html element with directive