Fix ui build + update python-multipart (#805)

* Fix ui build

* require python-multipart > 22

* missed styling

Author: lucymcnatt

servers/cromwell/requirements.txt

@@ -16,6 +16,7 @@ jsonschema==4.17.3
 MarkupSafe==2.1.1
 pathlib==1.0.1
 python-dateutil==2.6.0
+python-multipart>=0.0.22
 pytz==2022.4
 requests==2.32.5
 six==1.11.0

ui/Dockerfile

@@ -25,5 +25,5 @@ RUN /ui/node_modules/.bin/ng build --configuration=production
 
 FROM us.gcr.io/broad-dsp-gcr-public/base/nginx:mainline-alpine
 
-COPY --from=1 /ui/dist /ui/dist
+COPY --from=1 /ui/dist/browser /ui/dist
 ADD ./ui/nginx.prod.conf /etc/nginx/nginx.conf

ui/src/app/job-details/common/failures-table/failures-table.component.css

@@ -1,10 +1,16 @@
-mat-table {
+/* Failures table - matching resources/labels table styling */
+
+:host ::ng-deep mat-table,
+:host ::ng-deep .mat-table {
   margin-top: 1.25rem;
   display: table;
+  table-layout: fixed;
   width: 99%;
-  border-radius: 0.3125rem;
+  border-radius: 5px;
   border: 1px solid #CCCFD4;
   box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 3px 2px 0 rgba(0,0,0,0.12);
+  margin-left: auto;
+  margin-right: auto;
 }
 
 :host-context(mat-card.card) mat-table {
@@ -15,65 +21,103 @@ mat-table {
   margin-top: 0;
 }
 
-.mat-header-row,
-.mat-row {
+:host ::ng-deep .mat-mdc-header-row,
+:host ::ng-deep .mat-header-row,
+:host ::ng-deep .mat-mdc-row,
+:host ::ng-deep .mat-row {
   display: table-row;
+  padding: 0;
+  border: none;
+}
+
+:host ::ng-deep .mat-row {
   min-height: auto;
 }
 
-.mat-header-cell {
-  color: #333F52;
-  font-weight: 600;
+:host ::ng-deep .mat-mdc-header-cell,
+:host ::ng-deep .mat-header-cell,
+:host ::ng-deep .mat-mdc-cell,
+:host ::ng-deep .mat-cell,
+:host ::ng-deep td,
+:host ::ng-deep th {
+  display: table-cell;
+  vertical-align: middle;
   padding: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  text-align: left;
+  font-size: 0.75rem;
+  line-height: 1.2rem;
 }
 
-td,
-th {
-  text-align: left;
-  font-size: 0.7rem;
-  line-height: 1rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  display: table-cell;
+:host ::ng-deep .mat-mdc-header-cell:last-child,
+:host ::ng-deep .mat-header-cell:last-child,
+:host ::ng-deep .mat-mdc-cell:last-child,
+:host ::ng-deep .mat-cell:last-child,
+:host ::ng-deep th:last-child,
+:host ::ng-deep td:last-child {
+  border-right: none;
 }
 
-th {
+:host ::ng-deep .mat-mdc-header-row,
+:host ::ng-deep .mat-header-row {
   background-color: #F1F4F7;
+  min-height: 3rem;
+}
+
+:host ::ng-deep .mat-mdc-header-cell,
+:host ::ng-deep .mat-header-cell,
+:host ::ng-deep th {
   color: #333F52;
   font-weight: 600;
-  padding: 0.5rem 1rem;
+  font-size: 0.7rem;
+  white-space: nowrap;
 }
 
-td {
-  padding: 1rem;
+:host ::ng-deep .mat-mdc-cell,
+:host ::ng-deep .mat-cell,
+:host ::ng-deep td {
+  font-size: 0.75rem;
+  line-height: 1.2rem;
+  height: auto;
 }
 
 th.failure-task,
 td.failure-task {
-  min-width: 5.375rem;
-  max-width: 14.75rem;
+  width: 20%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 th.failure-message,
 td.failure-message {
+  width: 50%;
   line-height: 1.25rem;
   word-wrap: break-word;
+  white-space: normal;
 }
 
 th.failure-shard,
 td.failure-shard {
-  max-width: 3.5rem;
-  min-width: 3.5rem;
+  width: 10%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 th.failure-links,
 td.failure-links {
-  max-width: 7em;
-  min-width: 7em;
+  width: 20%;
+}
+
+.title-link {
+  color: #5C912E;
+  text-decoration: none;
+}
+
+.title-link:hover {
+  text-decoration: underline;
 }
 
 .log-item {

ui/src/app/job-list/table/table.component.ts

@@ -189,7 +189,16 @@ export class JobsTableComponent implements OnInit {
   }
 
   shouldShowMenu(job: QueryJobsResult, df: DisplayField): boolean {
-    return !this.isFirstColumn(df) && (this.canEdit(df) || (this.canFilterBy(df.field) && this.getFieldValue(job, df)));
+    // Don't show menu for first column (name field shown as link)
+    if (this.isFirstColumn(df)) {
+      return false;
+    }
+    // Don't show menu for copyable ID fields (they have their own display logic)
+    if (this.isCopyableIdField(df)) {
+      return false;
+    }
+    // Show menu for editable fields or filterable fields with values
+    return this.canEdit(df) || (this.canFilterBy(df.field) && this.getFieldValue(job, df));
   }
 
   getFieldValue(job: QueryJobsResult, df: DisplayField): any {

ui/src/app/sign-in/sign-in.component.css

@@ -11,3 +11,9 @@ p {
   text-align: center;
   position: relative
 }
+
+.sign-in-card .mat-mdc-card-title,
+.sign-in-card .mat-card-title {
+  font-family: 'Montserrat', sans-serif;
+}
+