### File

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

### Implements

`OnInit`

### Metadata

selector | `hi-instance-list`
styleUrls | `./instance-list.component.scss`
templateUrl | `./instance-list.component.html`

### Index

###### Properties
clusterName headerHeight instances isLoading rowHeight sorts
###### Methods
ngOnInit onSelect

### Constructor

`constructor(route: ActivatedRoute, router: Router, service: InstanceService, helper: HelperService)`
Defined in src/app/instance/instance-list/instance-list.component.ts:22
Parameters :
Name | Type | Optional
route | `ActivatedRoute` | No
router | `Router` | No
service | `InstanceService` | No
helper | `HelperService` | No

### Methods

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

onSelect
`onSelect(undefined)`
Defined in src/app/instance/instance-list/instance-list.component.ts:42
Parameters :
Name | Optional
No
Returns : `void`

### Properties

clusterName
Type : `string`
Defined in src/app/instance/instance-list/instance-list.component.ts:15

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

instances
Type : `any[]`
Defined in src/app/instance/instance-list/instance-list.component.ts:16

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

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

sorts
Type : `[]`
Default value : `[ { prop: 'liveInstance', dir: 'asc' }, { prop: 'name', dir: 'asc' }, ]`
Defined in src/app/instance/instance-list/instance-list.component.ts:19

    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>

`./instance-list.component.scss`

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

# results matching ""

# No results matching ""