### File

`src/app/resource/partition-list/partition-list.component.ts`

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties
clusterName headerHeight isLoading partitions resource rowHeight sorts table
###### Methods
canAnalyse getReasonWhyCannotAnalyse Protected loadResource ngOnInit onSelect

### Constructor

`constructor(route: ActivatedRoute, service: ResourceService, helper: HelperService)`
Defined in src/app/resource/partition-list/partition-list.component.ts:28
Parameters :
Name | Type | Optional
route | `ActivatedRoute` | No
service | `ResourceService` | No
helper | `HelperService` | No

### Methods

canAnalyse
`canAnalyse()`
Defined in src/app/resource/partition-list/partition-list.component.ts:45
Returns : `any`

getReasonWhyCannotAnalyse
`getReasonWhyCannotAnalyse()`
Defined in src/app/resource/partition-list/partition-list.component.ts:49
Returns : `boolean | string`

Protected loadResource
`loadResource()`
Defined in src/app/resource/partition-list/partition-list.component.ts:68
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/resource/partition-list/partition-list.component.ts:36
Returns : `void`

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

### Properties

clusterName
Type : `string`
Defined in src/app/resource/partition-list/partition-list.component.ts:20

headerHeight
Default value : `Settings.tableHeaderHeight`
Defined in src/app/resource/partition-list/partition-list.component.ts:23

isLoading
Default value : `true`
Defined in src/app/resource/partition-list/partition-list.component.ts:19

partitions
Type : `Partition[]`
Defined in src/app/resource/partition-list/partition-list.component.ts:22

resource
Type : `Resource`
Defined in src/app/resource/partition-list/partition-list.component.ts:21

rowHeight
Default value : `Settings.tableRowHeight`
Defined in src/app/resource/partition-list/partition-list.component.ts:24

sorts
Type : `[]`
Default value : `[ { prop: 'isReady', dir: 'asc' }, { prop: 'name', dir: 'asc' }, ]`
Defined in src/app/resource/partition-list/partition-list.component.ts:25

table
Type : `DatatableComponent`
Decorators : `@ViewChild('partitionsTable', {static: false})`
Defined in src/app/resource/partition-list/partition-list.component.ts:17

    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>

`./partition-list.component.scss`

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

# results matching ""

# No results matching ""