| <!-- |
| ~ 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> |