545

src/rest-server/src/models/job.js

@@ -138,6 +138,9 @@ class Job {
               completedTime: frameworkInfo.frameworkCompletedTimestamp,
               appExitCode: frameworkInfo.applicationExitCode,
               virtualCluster: frameworkInfo.queue,
+              totalGpuNumber: frameworkInfo.totalGpuNumber,
+              totalTaskNumber: frameworkInfo.totalTaskNumber,
+              totalTaskRoleNumber: frameworkInfo.totalTaskRoleNumber,
             };
 
             const tildeIndex = job.name.indexOf('~');

src/webportal/src/app/job/job-view/fabric/JobList/Ordering.js

@@ -2,7 +2,7 @@ import {getModified, getDuration, getStatusIndex} from './utils';
 
 export default class Ordering {
   /**
-   * @param {"name" | "modified" | "user" | "duration" | "virtualCluster" | "retries" | "status" | undefined} field
+   * @param {"name" | "modified" | "user" | "duration" | "virtualCluster" | "retries" | "status" | "taskCount" | "gpuCount" | undefined} field
    * @param {boolean | undefined} descending
    */
   constructor(field, descending=false) {
@@ -44,6 +44,14 @@ export default class Ordering {
       comparator = descending
         ? (a, b) => getStatusIndex(b) - getStatusIndex(a)
         : (a, b) => getStatusIndex(a) - getStatusIndex(b);
+    } else if (field === 'taskCount') {
+      comparator = descending
+        ? (a, b) => b.totalTaskNumber - a.totalTaskNumber
+        : (a, b) => a.totalTaskNumber - b.totalTaskNumber;
+    } else if (field === 'gpuCount') {
+      comparator = descending
+        ? (a, b) => b.totalGpuNumber - a.totalGpuNumber
+        : (a, b) => a.totalGpuNumber - b.totalGpuNumber;
     }
     return jobs.slice().sort(comparator);
   }

src/webportal/src/app/job/job-view/fabric/JobList/Table.jsx

@@ -131,6 +131,24 @@ export default function Table() {
     headerClassName: FontClassNames.medium,
     isResizable: true,
   });
+  const taskCountColumn = applySortProps({
+    key: 'taskCount',
+    minWidth: 60,
+    name: 'Tasks',
+    fieldName: 'totalTaskNumber',
+    className: FontClassNames.mediumPlus,
+    headerClassName: FontClassNames.medium,
+    isResizable: true,
+  });
+  const gpuCountColumn = applySortProps({
+    key: 'gpuCount',
+    minWidth: 60,
+    name: 'GPUs',
+    fieldName: 'totalGpuNumber',
+    className: FontClassNames.mediumPlus,
+    headerClassName: FontClassNames.medium,
+    isResizable: true,
+  });
   const statusColumn = applySortProps({
     key: 'status',
     minWidth: 100,
@@ -223,6 +241,8 @@ export default function Table() {
     durationColumn,
     virtualClusterColumn,
     retriesColumn,
+    taskCountColumn,
+    gpuCountColumn,
     statusColumn,
     actionsColumn,
   ];

src/webportal/src/app/job/job-view/fabric/JobList/TopBar.jsx

@@ -145,7 +145,6 @@ function TopBar() {
     return {
       key: 'filters',
       name: 'Filters',
-      buttonStyles: {root: {backgroundColor: 'transparent'}},
       iconProps: {iconName: 'Filter'},
       menuIconProps: {iconName: active ? 'ChevronUp' : 'ChevronDown'},
       onClick() {
@@ -157,6 +156,7 @@ function TopBar() {
             onClick={item.onClick}
             iconProps={item.iconProps}
             menuIconProps={item.menuIconProps}
+            styles={{root: {backgroundColor: 'transparent'}}}
           >
             Filter
           </CommandBarButton>