forked from kubeflow/katib
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
frontend: Support paging/sorting/filtering in trials table (kubeflow#…
…1441) * Make trials table support paging, sorting and filtering. Signed-off-by: Elena Zioga <elena@arrikto.com>
- Loading branch information
Showing
5 changed files
with
122 additions
and
146 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 10 additions & 64 deletions
74
...1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,64 +1,10 @@ | ||
<table [dataSource]="data" class="wide" mat-table> | ||
<!--- Note that these columns can be defined in any order. | ||
The actual rendered columns are set as a property on the row definition" --> | ||
|
||
<!-- Position Column --> | ||
<ng-container | ||
*ngFor="let column of displayedColumns; let i = index" | ||
[matColumnDef]="column" | ||
> | ||
<th mat-header-cell *matHeaderCellDef> | ||
{{ column === 'Kfp run' ? '' : column }} | ||
</th> | ||
<td | ||
*matCellDef="let element" | ||
[ngClass]="{ cell: column === 'Trial name' }" | ||
mat-cell | ||
> | ||
<span | ||
*ngIf=" | ||
column !== 'Trial name' && column !== 'Status' && column !== 'Kfp run' | ||
" | ||
>{{ element[i] }} | ||
</span> | ||
|
||
<span | ||
(click)="openTrialModal(element[i])" | ||
*ngIf="column === 'Trial name'" | ||
class="name" | ||
>{{ element[i] }} | ||
</span> | ||
|
||
<div *ngIf="column === 'Kfp run'" class="svg-color"> | ||
<mat-icon | ||
(click)="goToKfpRun(element[i])" | ||
[matTooltipDisabled]="!!element[i]" | ||
[ngClass]="{ 'icon-disable': !element[i] }" | ||
class="icon" | ||
matTooltip="No KFP run" | ||
svgIcon="pipeline-centered" | ||
></mat-icon> | ||
</div> | ||
|
||
<span | ||
*ngIf="column === 'Status'" | ||
[ngClass]="{ | ||
green: element[i] === 'Succeeded', | ||
red: element[i] === 'Failed' | ||
}" | ||
>{{ element[i] }}</span | ||
> | ||
</td> | ||
</ng-container> | ||
|
||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> | ||
<tr | ||
(mouseleave)="handleMouseLeave()" | ||
(mouseover)="handleMouseOver(row)" | ||
*matRowDef="let row; let i = index; columns: displayedColumns" | ||
[ngClass]="{ 'best-trail-row': bestTrialIndex === i }" | ||
mat-row | ||
> | ||
> | ||
</tr> | ||
</table> | ||
<div class="lib-content-wrapper"> | ||
<div class="page-padding lib-flex-grow lib-overflow-auto"> | ||
<lib-table | ||
[config]="config" | ||
[data]="processedData" | ||
[highlightedRow]="bestTrialRow" | ||
(actionsEmitter)="reactToAction($event)" | ||
></lib-table> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters