Added support for flexible DisplayField order in capabilities config (#…

…532) * Made the `name` and `id` columns in the job list more configurable * Made it possible to completely configure the order of columns in the capabilities endpoint
DataBiosphere · Dec 10, 2018 · 7e9c9dc · 7e9c9dc
1 parent 3415dfa
commit 7e9c9dc
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,15 @@
+# Job Manager Change Log
+
+## v0.5.1 Release Notes
+
+### Made the `name` and `id` columns in the job list more configurable
+
+They will no longer appear unless explicitly included in the capabilities (either default or `capabilities_config.json` file).  The job details drop-down menu and the link to the job details page will always be attached to the first column, no matter what that is.
+
+### Made it possible to completely configure the order of columns in the capabilities endpoint
+
+The order of the columns in either the default settings or `capabilities_config.json` file will be the order they appear on the job list page.
+
+### Added the `filterable` property to the displayFields in the capabilities endpoint
+
+Any column (not just the first column in the job details drop-down menu) can (if it is not also `editable`) the ability to filter by the name:value pair in a particular cell.
diff --git a/api/jobs.yaml b/api/jobs.yaml
@@ -182,6 +182,9 @@ definitions:
           type: string
   DisplayField:
     description: Description of a display field
+    required:
+      - field
+      - display
     properties:
       field:
         type: string
@@ -379,6 +382,11 @@ definitions:
         description: >
           If specified, returns only jobs containing labels with exact string
           matches to each of these labels.
+      id:
+        type: string
+        pattern: ^[a-zA-Z][a-zA-Z0-9_-]*$
+        description: >
+          Returns only jobs with the specified id.
       name:
         type: string
         pattern: ^[a-zA-Z][a-zA-Z0-9_-]*$

diff --git a/servers/cromwell/README.md b/servers/cromwell/README.md
@@ -58,6 +58,10 @@ Thin shim around [`cromwell`](https://github.com/broadinstitute/cromwell).
 ```json
 {
   "displayFields": [
+    {
+      "field": "id",
+      "display": "Workflow ID"
+    },
     {
       "field": "name",
       "display": "Name",
@@ -71,10 +75,6 @@ Thin shim around [`cromwell`](https://github.com/broadinstitute/cromwell).
       "field": "submission",
       "display": "Submitted"
     },
-    {
-      "field": "labels.cromwell-workflow-id",
-      "display": "Workflow ID"
-    },
     {
       "field": "labels.label",
       "display": "Label",
@@ -101,8 +101,8 @@ Thin shim around [`cromwell`](https://github.com/broadinstitute/cromwell).
     }
   ],
   "commonLabels": [
-    "cromwell-workflow-id",
-    "workflow-name",
+    "id",
+    "name",
     "label",
     "comment",
     "flag"
@@ -113,6 +113,7 @@ Thin shim around [`cromwell`](https://github.com/broadinstitute/cromwell).
 }
 ```
   - For the `displayFields`, which represent the columns that will be available in the job list view:
+    - The order that the fields are listed in will be the order in which they appear
     - Both `editable`, `bulkEditable` and `filterable` will be treated as `false` unless explicitly set to `true`
         - If the field is `editable`, then `fieldType` is required.
         - If the field is `editable`, then `filterable` will be ignored.
@@ -122,6 +123,10 @@ Thin shim around [`cromwell`](https://github.com/broadinstitute/cromwell).
 ```json
 {
   "displayFields": [
+    {
+      "field": "id",
+      "display": "Workflow ID"
+    },
     {
       "field": "name",
       "display": "Name",
@@ -135,10 +140,6 @@ Thin shim around [`cromwell`](https://github.com/broadinstitute/cromwell).
       "field": "submission",
       "display": "Submitted"
     },
-    {
-      "field": "labels.cromwell-workflow-id",
-      "display": "Workflow ID"
-    },
     {
       "field": "labels.label",
       "display": "Label",
@@ -165,8 +166,8 @@ Thin shim around [`cromwell`](https://github.com/broadinstitute/cromwell).
     }
   ],
   "commonLabels": [
-    "cromwell-workflow-id",
-    "workflow-name",
+    "id",
+    "name",
     "label",
     "comment",
     "flag"

diff --git a/servers/cromwell/jobs/controllers/capabilities_controller.py b/servers/cromwell/jobs/controllers/capabilities_controller.py
@@ -17,11 +17,10 @@ def get_capabilities():
     # Default capabilities configuration
     capabilities = CapabilitiesResponse(
         display_fields=[
+            DisplayField(field='id', display='Workflow ID'),
             DisplayField(field='name', display='Name', filterable=True),
             DisplayField(field='status', display='Status'),
             DisplayField(field='submission', display='Submitted'),
-            DisplayField(
-                field='labels.cromwell-workflow-id', display='Workflow ID'),
             DisplayField(
                 field='labels.label',
                 display='Label',
@@ -41,6 +40,6 @@ def get_capabilities():
                 editable=True,
                 field_type='text')
         ],
-        common_labels=['cromwell-workflow-id', 'label', 'flag'],
+        common_labels=['id', 'name', 'label', 'flag'],
         query_extensions=['hideArchived'])
     return capabilities
diff --git a/servers/cromwell/jobs/controllers/jobs_controller.py b/servers/cromwell/jobs/controllers/jobs_controller.py
@@ -316,6 +316,8 @@ def cromwell_query_params(query, page, page_size):
         submission = datetime.strftime(query.submission,
                                        '%Y-%m-%dT%H:%M:%S.%fZ')
         query_params.append({'submission': submission})
+    if query.id:
+        query_params.append({'id': query.id})
     if query.name:
         query_params.append({'name': query.name})
     if query.status:

diff --git a/ui/src/app/job-list/table/table.component.html b/ui/src/app/job-list/table/table.component.html
@@ -52,13 +52,13 @@
                   <span>Timing Diagram</span>
                 </a>
               </mat-list-item>
-              <mat-list-item *ngIf="j[firstColumnName] && canFilterBy(firstColumnName)">
+              <mat-list-item *ngIf="j[firstColumn] && canFilterBy(firstColumn)">
                 <clr-tooltip>
-                  <a (click)="filterOnFieldValue(firstColumnName, j[firstColumnName])" clrTooltipTrigger class="inline-filter">
+                  <a (click)="filterOnColumnValue(firstColumn, j[firstColumn])" clrTooltipTrigger class="inline-filter">
                     <clr-icon shape="filter-2" size="24"></clr-icon>
-                    <span>Filter by {{ firstColumnName }}:{{ j[firstColumnName] }}</span>
+                    <span>Filter by {{ getFilterFromField(firstColumn) }}:{{ j[firstColumn] }} {{ firstColumn }}</span>
                     <clr-tooltip-content clrPosition="top-right" clrSize="xs" *clrIfOpen>
-                      <span>Filter by {{ firstColumnName }}:{{ j[firstColumnName] }}</span>
+                      <span>Filter by {{ getFilterFromField(firstColumn) }}:{{ j[firstColumn] }}</span>
                     </clr-tooltip-content>
                   </a>
                 </clr-tooltip>
@@ -75,7 +75,7 @@
     <ng-container matColumnDef="{{ df.field }}">
       <mat-header-cell *matHeaderCellDef>{{ df.display }}</mat-header-cell>
       <mat-cell class="additional-column" *matCellDef="let j">
-        <div class="display-field" *ngIf="canEdit(df) || (canFilterBy(df.field) && getFieldValue(j, df))">
+        <div class="display-field" *ngIf="shouldShowMenu(j, df)">
           <div [ngSwitch]="getFieldType(df)">
             <div *ngSwitchCase="'text'">
               <div class="edit-field">
@@ -98,11 +98,11 @@
                 </div>
                 <div *ngIf="!canEdit(df) && canFilterBy(df.field)" class="mat-menu-content filter-menu">
                   <clr-tooltip>
-                    <a (click)="filterOnFieldValue(df.display, getFieldValue(j, df))" clrTooltipTrigger class="inline-filter">
+                    <a (click)="filterOnColumnValue(df.field, getFieldValue(j, df))" clrTooltipTrigger class="inline-filter">
                       <clr-icon shape="filter-2" size="24"></clr-icon>
-                      <span>Filter by {{ df.display }}:{{ getFieldValue(j, df) }}</span>
+                      <span>Filter by {{ getFilterFromField(df.field) }}:{{ getFieldValue(j, df) }}</span>
                       <clr-tooltip-content clrPosition="bottom-left" clrSize="xs" *clrIfOpen>
-                        Filter by {{ df.display }}:{{ getFieldValue(j, df) }}
+                        Filter by {{ getFilterFromField(df.field) }}:{{ getFieldValue(j, df) }}
                       </clr-tooltip-content>
                     </a>
                   </clr-tooltip>

diff --git a/ui/src/app/job-list/table/table.component.ts b/ui/src/app/job-list/table/table.component.ts
@@ -53,7 +53,7 @@ export class JobsTableComponent implements OnInit {
   public readonly labelCharLimit = 255;
 
   displayedColumns: string[];
-  firstColumnName: string;
+  firstColumn: string;
 
   constructor(
     private readonly route: ActivatedRoute,
@@ -122,7 +122,8 @@ export class JobsTableComponent implements OnInit {
       .catch((error) => this.handleError(error));
   }
 
-  filterOnFieldValue(field: string, value: string) {
+  filterOnColumnValue(column: string, value: string) {
+    const field = this.getFilterFromField(column);
     if (field && value) {
       this.onFiltersChanged.emit([field, value]);
     }
@@ -158,13 +159,17 @@ export class JobsTableComponent implements OnInit {
   }
 
   isFirstColumn(df: DisplayField): boolean {
-    return df.field == this.firstColumnName;
+    return df.field == this.firstColumn;
   }
 
   isSimpleField(df: DisplayField): boolean {
     return !this.isStatusField(df) && !this.canEdit(df) && !this.isFirstColumn(df) && !this.canFilterBy(df.field);
   }
 
+  shouldShowMenu(job: QueryJobsResult, df: DisplayField): boolean {
+    return !this.isFirstColumn(df) && (this.canEdit(df) || (this.canFilterBy(df.field) && this.getFieldValue(job, df)));
+  }
+
   getFieldValue(job: QueryJobsResult, df: DisplayField): any {
     // Handle nested fields, separated by '.', i.e. extensions.userId
     let fields = df.field.split(".");
@@ -185,16 +190,23 @@ export class JobsTableComponent implements OnInit {
   }
 
   getFieldType(df: DisplayField): string {
-    if (df.fieldType) {
+    if (df && df.fieldType) {
       return df.fieldType.toString();
     }
-    return 'Text';
+    return 'text';
   }
 
   getFieldOptions(df: DisplayField): string[] {
     return df.validFieldValues;
   }
 
+  getFilterFromField(field: string): string {
+    const filter = this.displayFields.filter( df => (field == df.field) && df.filterable).pop();
+    if (filter) {
+      return filter.field.split('.').pop();
+    }
+  }
+
   getQueryParams(): Params {
     return this.route.snapshot.queryParams;
   }
@@ -324,6 +336,7 @@ export class JobsTableComponent implements OnInit {
   }
 
   // set up fields to display as columns and bulk update-able labels for job list table
+  // add in "Details" column after the first non-checkbox column for job details menu
   public setUpFieldsAndColumns() {
     this.displayedColumns = ["Checkbox"];
     this.bulkLabelFields = [];
@@ -336,7 +349,7 @@ export class JobsTableComponent implements OnInit {
       }
     }
     this.displayedColumns.splice(2, 0, "Details");
-    this.firstColumnName = this.displayedColumns[1];
+    this.firstColumn = this.displayedColumns[1];
   }
 
   private prepareUpdateJobLabelsRequest (fieldValues: {}): UpdateJobLabelsRequest {

diff --git a/ui/src/app/shared/common.ts b/ui/src/app/shared/common.ts
@@ -30,6 +30,7 @@ export enum FieldDataType {
  *  over. These should encompass all fields on QueryJobsRequest (besides
  *  pageSize and pageToken). */
 export const queryDataTypes: Map<string, FieldDataType> = new Map([
+  ['id', FieldDataType.Text],
   ['name', FieldDataType.Text],
   ['status', FieldDataType.Enum],
   ['start', FieldDataType.Date],

diff --git a/ui/src/app/shared/utils/url-search-params.utils.ts b/ui/src/app/shared/utils/url-search-params.utils.ts
@@ -17,6 +17,9 @@ export class URLSearchParamsUtils {
     for (let s in request.status) {
       urlSearchParams.append('status', JobStatus[request.status[s]]);
     }
+    if (request.id) {
+      urlSearchParams.set('id', request.id);
+    }
     if (request.name) {
       urlSearchParams.set('name', request.name);
     }