simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880397712
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/taskmanagers/job-overview-drawer-taskmanagers.component.html:
##########
@@ -17,81 +17,81 @@
-->
<nz-table
- #table
- class="small full-height"
- [nzSize]="'small'"
+ nzSize="small"
[nzLoading]="isLoading"
[nzData]="listOfTaskManager"
- [nzScroll]="{ x: '1500px', y: 'calc( 100vh - 35px )' }"
+ [nzScroll]="{ x: '1550px', y: 'calc( 100% - 36px )' }"
[nzFrontPagination]="false"
[nzShowPagination]="false"
+ [nzVirtualItemSize]="virtualItemSize"
+ [nzVirtualMinBufferPx]="300"
+ [nzVirtualMaxBufferPx]="300"
+ [nzVirtualForTrackBy]="trackByHost"
>
<thead>
<tr>
- <th nzWidth="160px" nzLeft="0px" [nzSortFn]="sortHostFn">Host</th>
- <th nzWidth="50px" nzLeft="160px">LOG</th>
+ <th nzWidth="160px" nzLeft [nzSortFn]="sortHostFn">Host</th>
<th nzWidth="150px" [nzSortFn]="sortReadBytesFn">Bytes received</th>
<th nzWidth="150px" [nzSortFn]="sortReadRecordsFn">Records received</th>
<th nzWidth="120px" [nzSortFn]="sortWriteBytesFn">Bytes sent</th>
<th nzWidth="150px" [nzSortFn]="sortWriteRecordsFn">Records sent</th>
<th nzWidth="200px" [nzSortFn]="sortStartTimeFn">Start Time</th>
<th nzWidth="200px" [nzSortFn]="sortEndTimeFn">End Time</th>
- <th nzWidth="100px" [nzSortFn]="sortDurationFn">Duration</th>
+ <th nzWidth="150px" [nzSortFn]="sortDurationFn">Duration</th>
<th nzWidth="120px">Tasks</th>
- <th nzWidth="100px" nzRight="0px" [nzSortFn]="sortStatusFn">Status</th>
+ <th nzWidth="100px" nzRight [nzSortFn]="sortStatusFn">Status</th>
+ <th nzWidth="50px" nzRight>More</th>
</tr>
</thead>
<tbody>
- <tr *ngFor="let taskManager of table.data; trackBy: trackByHost">
- <td nzLeft="0px">{{ taskManager.host }}</td>
- <td nzLeft="160px">
- <span
- *ngIf="
- !taskManager['taskmanager-id'] || taskManager['taskmanager-id']
=== '(unassigned)';
- else hrefTpl
- "
- >
- -
- </span>
- <ng-template #hrefTpl>
- <a
- [routerLink]="['/task-manager', taskManager['taskmanager-id'],
'logs']"
- target="_blank"
- >
- LOG
- </a>
- </ng-template>
- </td>
- <td>
- <span *ngIf="taskManager.metrics['read-bytes-complete']; else
loadingTemplate">
- {{ taskManager.metrics['read-bytes'] | humanizeBytes }}
- </span>
- </td>
- <td>
- <span *ngIf="taskManager.metrics['read-records-complete']; else
loadingTemplate">
- {{ taskManager.metrics['read-records'] | number }}
- </span>
- </td>
- <td>
- <span *ngIf="taskManager.metrics['write-bytes-complete']; else
loadingTemplate">
- {{ taskManager.metrics['write-bytes'] | humanizeBytes }}
- </span>
- </td>
- <td>
- <span *ngIf="taskManager.metrics['write-records-complete']; else
loadingTemplate">
- {{ taskManager.metrics['write-records'] | number }}
- </span>
- </td>
- <td>{{ taskManager['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss'
}}</td>
- <td>{{ taskManager['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss'
}}</td>
- <td>{{ taskManager['duration'] | humanizeDuration }}</td>
- <td>
- <flink-task-badge
[tasks]="taskManager['status-counts']"></flink-task-badge>
- </td>
- <td nzRight="0px">
- <flink-job-badge [state]="taskManager.status"></flink-job-badge>
- </td>
- </tr>
+ <ng-template nz-virtual-scroll let-data>
+ <ng-container *ngIf="narrowLogData(data) as taskManager">
+ <tr>
+ <td nzLeft>{{ taskManager.host }}</td>
Review Comment:
nit: we can display an ellipsis if host is longger than the width
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
