colored badge

frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css

@@ -14,5 +14,4 @@
 
 .collapse-buttons { text-align: right; }
 .collapse-buttons button { font-size: 0.6em; }
-
 .mat-expansion-panel-spacing { margin: 0; }

frontends/dnet-is-application/src/app/wf-history/wf-history.component.html

@@ -43,7 +43,7 @@
 
   <ng-container matColumnDef="status">
     <th mat-header-cell *matHeaderCellDef style="width: 10%;" mat-sort-header sortActionDescription="Sort by Status"> Status </th>
-    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
+    <td mat-cell *matCellDef="let element"><span class="badge-label" [ngClass]="{'badge-success' : element.status === 'success', 'badge-failure' : element.status === 'failure'}">{{element.status}}</span> </td>
   </ng-container>
 
   <ng-container matColumnDef="startDate">

frontends/dnet-is-application/src/styles.css

@@ -45,3 +45,26 @@ th, td {
 }
 
 .muted { color: darkgray; }
+
+.badge-label {
+    padding-top: 0.3em;
+    padding-bottom: 0.3em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    border-radius: 0.7em;
+    font-size: 0.9em;
+    color: #fff;
+    text-align: center;
+}
+
+.badge-success {
+    background-color:darkgreen;
+}
+
+.badge-failure {
+    background-color:red;
+}
+
+.badge-warning {
+    background-color:darkorange;
+}