[webapp] fix bulletin with multiple rows of results (#2761)

Signed-off-by: tomsun28 <[email protected]>
apache · Oct 7, 2024 · 2856c3f · 2856c3f
1 parent bad49ce
commit 2856c3f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -113,18 +113,20 @@
               </td>
               <td nzAlign="center" [rowSpan]="1">{{ content.host }}</td>
               <ng-container *ngFor="let metric of content.metrics">
-                <ng-container *ngFor="let field of metric.fields">
-                  <ng-container *ngFor="let item of field">
-                    <td nzAlign="center">
+                <ng-container *ngFor="let field of metric.fields[0]">
+                  <td nzAlign="center">
+                    <ng-container *ngFor="let item of combine(field, metric.fields)">
                       <ng-container *ngIf="item.value === 'NO_DATA'; else hasData">
                         <nz-tag nzColor="warning">No Data Available</nz-tag>
                       </ng-container>
                       <ng-template #hasData>
-                        {{ item.value }}
-                        <nz-tag *ngIf="item.unit !== ''" nzColor="success">{{ item.unit }}</nz-tag>
+                        <div style="display: flex; justify-content: space-between">
+                          {{ item.value }}
+                          <nz-tag *ngIf="item.unit !== ''" nzColor="success">{{ item.unit }}</nz-tag>
+                        </div>
                       </ng-template>
-                    </td>
-                  </ng-container>
+                    </ng-container>
+                  </td>
                 </ng-container>
               </ng-container>
             </tr>

diff --git a/web-app/src/app/routes/bulletin/bulletin.component.ts b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -554,4 +554,18 @@ export class BulletinComponent implements OnInit, OnDestroy {
     this.countDownTime = this.deadline;
     this.cdr.detectChanges();
   }
+
+  combine(field: any, fields: any): any[] {
+    let result: any[] = [];
+    if (fields.length == 0) {
+      return result;
+    }
+    for (let i = 0; i < fields.length; i++) {
+      let find = fields[i].filter((item: any) => {
+        return item.key == field.key;
+      });
+      result = result.concat(find);
+    }
+    return result;
+  }
 }