### File

`src/app/history/history-list/history-list.component.ts`

### Implements

`OnInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
providers | `HistoryService`
selector | `hi-history-list`
styleUrls | `./history-list.component.scss`
templateUrl | `./history-list.component.html`

### Index

###### Properties
bindFunc headerHeight isController isLoading rowHeight rows sorts
###### Methods
getControllerCellClass getSessionCellClass ngOnInit

### Constructor

`constructor(route: ActivatedRoute, service: HistoryService)`
Defined in src/app/history/history-list/history-list.component.ts:27
Parameters :
Name | Type | Optional
route | `ActivatedRoute` | No
service | `HistoryService` | No

### Methods

getControllerCellClass
`getControllerCellClass(undefined)`
Defined in src/app/history/history-list/history-list.component.ts:49
Parameters :
Name | Optional
No
Returns : `any`

getSessionCellClass
`getSessionCellClass(undefined)`
Defined in src/app/history/history-list/history-list.component.ts:55
Parameters :
Name | Optional
No
Returns : `any`

ngOnInit
`ngOnInit()`
Defined in src/app/history/history-list/history-list.component.ts:31
Returns : `void`

### Properties

bindFunc
Default value : `_.bind`
Defined in src/app/history/history-list/history-list.component.ts:27

headerHeight
Default value : `Settings.tableHeaderHeight`
Defined in src/app/history/history-list/history-list.component.ts:21

isController
Type : `boolean`
Defined in src/app/history/history-list/history-list.component.ts:22

isLoading
Default value : `true`
Defined in src/app/history/history-list/history-list.component.ts:23

rowHeight
Default value : `Settings.tableRowHeight`
Defined in src/app/history/history-list/history-list.component.ts:20

rows
Type : `History[]`
Defined in src/app/history/history-list/history-list.component.ts:19

sorts
Type : `[]`
Default value : `[{ prop: 'date', dir: 'desc' }]`
Defined in src/app/history/history-list/history-list.component.ts:24

    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>

`./history-list.component.scss`

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

# results matching ""

# No results matching ""