Sorting support for VWA and TWA (kubeflow#6743)

* vwa(front): Enable sorting in VWA (kubeflow#6460) * Enable sorting functionality in VWA. Signed-off-by: Elena Zioga <elena@arrikto.com> * twa(front): Enable sorting in TWA (kubeflow#6460) * Enable sorting functionality in TWA. Signed-off-by: Elena Zioga <elena@arrikto.com> * web-apps(front): Fix unit tests * Fix unit tests. Signed-off-by: Elena Zioga <elena@arrikto.com> Signed-off-by: Elena Zioga <elena@arrikto.com>
maroroman · Feb 7, 2023 · 44143ca · 44143ca
1 parent ec3c616
commit 44143ca
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/...end/kubeflow-common-lib/projects/kubeflow/src/lib/resource-table/resource-table.module.ts b/...end/kubeflow-common-lib/projects/kubeflow/src/lib/resource-table/resource-table.module.ts
@@ -24,7 +24,6 @@ import { ComponentValueComponent } from './component-value/component-value.compo
 import { PortalModule } from '@angular/cdk/portal';
 import { MatSortModule } from '@angular/material/sort';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatSortModule } from '@angular/material/sort';
 
 @NgModule({
   imports: [

diff --git a/...d/kubeflow-common-lib/projects/kubeflow/src/lib/resource-table/table/table.component.html b/...d/kubeflow-common-lib/projects/kubeflow/src/lib/resource-table/table/table.component.html
@@ -16,6 +16,7 @@
       [arrowPosition]="col.textAlignment === 'right' ? 'before' : 'after'"
       [disabled]="!col.sort"
       data-cy-resource-table-row
+      [attr.data-cy-table-header-row]="col.matHeaderCellDef"
       [ngClass]="{
         grey: tableTheme === TABLE_THEME.FLAT,
         'right-align': col.textAlignment === 'right',
@@ -154,7 +155,10 @@
 
     <!--Action List Value-->
     <ng-container *ngIf="isActionListValue(col.value)">
-      <td mat-cell *matCellDef="let element" [attr.data-cy-resource-table-row]="col.matHeaderCellDef"
+      <td
+        mat-cell
+        *matCellDef="let element"
+        [attr.data-cy-resource-table-row]="col.matHeaderCellDef"
       >
         <div class="action-list">
           <ng-container *ngFor="let action of col.value.actions">

diff --git a/components/crud-web-apps/tensorboards/frontend/src/app/pages/index/config.ts b/components/crud-web-apps/tensorboards/frontend/src/app/pages/index/config.ts
@@ -16,6 +16,7 @@ const tableConfig: TableConfig = {
       matColumnDef: 'status',
       style: { width: '1%' },
       value: new StatusValue(),
+      sort: true,
     },
     {
       matHeaderCellDef: $localize`Name`,
@@ -26,6 +27,7 @@ const tableConfig: TableConfig = {
         tooltipField: 'name',
         truncate: true,
       }),
+      sort: true,
     },
     {
       matHeaderCellDef: $localize`Created at`,
@@ -35,6 +37,7 @@ const tableConfig: TableConfig = {
       value: new DateTimeValue({
         field: 'age',
       }),
+      sort: true,
     },
     {
       matHeaderCellDef: $localize`Logspath`,
@@ -45,6 +48,7 @@ const tableConfig: TableConfig = {
         tooltipField: 'logspath',
         truncate: true,
       }),
+      sort: true,
     },
   ],
 };

diff --git a/components/crud-web-apps/volumes/frontend/src/app/pages/index/config.ts b/components/crud-web-apps/volumes/frontend/src/app/pages/index/config.ts
@@ -6,6 +6,7 @@ import {
   TableConfig,
   DateTimeValue,
 } from 'kubeflow';
+import { quantityToScalar } from '@kubernetes/client-node/dist/util';
 
 export const tableConfig: TableConfig = {
   columns: [
@@ -14,6 +15,7 @@ export const tableConfig: TableConfig = {
       matColumnDef: 'status',
       style: { width: '1%' },
       value: new StatusValue(),
+      sort: true,
     },
     {
       matHeaderCellDef: $localize`Name`,
@@ -24,6 +26,7 @@ export const tableConfig: TableConfig = {
         tooltipField: 'name',
         truncate: true,
       }),
+      sort: true,
     },
     {
       matHeaderCellDef: $localize`Created at`,
@@ -33,25 +36,30 @@ export const tableConfig: TableConfig = {
       value: new DateTimeValue({
         field: 'age',
       }),
+      sort: true,
     },
     {
       matHeaderCellDef: $localize`Size`,
       matColumnDef: 'size',
       textAlignment: 'right',
       style: { width: '10%' },
       value: new PropertyValue({ field: 'capacity', truncate: true }),
+      sort: true,
+      sortingPreprocessorFn: quantityToScalar,
     },
     {
       matHeaderCellDef: $localize`Access Mode`,
       matColumnDef: 'modes',
       style: { width: '15%' },
       value: new PropertyValue({ field: 'modes', truncate: true }),
+      sort: true,
     },
     {
       matHeaderCellDef: $localize`Storage Class`,
       matColumnDef: 'class',
       style: { width: '10%' },
       value: new PropertyValue({ field: 'class', truncate: true }),
+      sort: true,
     },
 
     // the apps should import the actions they want