feat(frontend): add admin computing units dashboard

frontend/src/app/app-routing.constant.ts

@@ -44,6 +44,7 @@ export const ADMIN = "/admin";
 export const ADMIN_USER = `${ADMIN}/user`;
 export const ADMIN_GMAIL = `${ADMIN}/gmail`;
 export const ADMIN_EXECUTION = `${ADMIN}/execution`;
+export const ADMIN_COMPUTING_UNIT = `${ADMIN}/compute`;
 export const ADMIN_SETTINGS = `${ADMIN}/settings`;
 
 export const SEARCH = "/search";

frontend/src/app/app-routing.module.ts

@@ -31,6 +31,7 @@ import { AboutComponent } from "./hub/component/about/about.component";
 import { AuthGuardService } from "./common/service/user/auth-guard.service";
 import { AdminUserComponent } from "./dashboard/component/admin/user/admin-user.component";
 import { AdminExecutionComponent } from "./dashboard/component/admin/execution/admin-execution.component";
+import { AdminComputingUnitComponent } from "./dashboard/component/admin/computing-unit/admin-computing-unit.component";
 import { AdminGuardService } from "./dashboard/service/admin/guard/admin-guard.service";
 import { SearchComponent } from "./dashboard/component/user/search/search.component";
 import { FlarumComponent } from "./dashboard/component/user/flarum/flarum.component";
@@ -164,6 +165,10 @@ routes.push({
           path: "execution",
           component: AdminExecutionComponent,
         },
+        {
+          path: "compute",
+          component: AdminComputingUnitComponent,
+        },
         {
           path: "settings",
           component: AdminSettingsComponent,

frontend/src/app/app.module.ts

@@ -99,6 +99,7 @@ import { NzModalCommentBoxComponent } from "./workspace/component/workflow-edito
 import { NzCommentModule } from "ng-zorro-antd/comment";
 import { AdminUserComponent } from "./dashboard/component/admin/user/admin-user.component";
 import { AdminExecutionComponent } from "./dashboard/component/admin/execution/admin-execution.component";
+import { AdminComputingUnitComponent } from "./dashboard/component/admin/computing-unit/admin-computing-unit.component";
 import { NzPopconfirmModule } from "ng-zorro-antd/popconfirm";
 import { AdminGuardService } from "./dashboard/service/admin/guard/admin-guard.service";
 import { ContextMenuComponent } from "./workspace/component/workflow-editor/context-menu/context-menu/context-menu.component";
@@ -289,6 +290,7 @@ registerLocaleData(en);
     DashboardComponent,
     AdminUserComponent,
     AdminExecutionComponent,
+    AdminComputingUnitComponent,
     UserIconComponent,
     UserAvatarComponent,
     LocalLoginComponent,

frontend/src/app/common/service/computing-unit/workflow-computing-unit/workflow-computing-unit-managing.service.spec.ts

@@ -22,6 +22,7 @@ import { TestBed } from "@angular/core/testing";
 import { AppSettings } from "../../../app-setting";
 import {
   WorkflowComputingUnitManagingService,
+  COMPUTING_UNIT_ADMIN_LIST_URL,
   COMPUTING_UNIT_BASE_URL,
   COMPUTING_UNIT_CREATE_URL,
   COMPUTING_UNIT_LIST_URL,
@@ -154,6 +155,17 @@ describe("WorkflowComputingUnitManagingService", () => {
     expect(result.map(u => u.computingUnit.resource)).toEqual([{ cpuLimit: "1" }, { cpuLimit: "2" }]);
   });
 
+  it("listAllComputingUnits() GETs the admin list endpoint and parses every unit's resource", () => {
+    let result: any[] = [];
+    service.listAllComputingUnits().subscribe(r => (result = r));
+
+    const req = httpMock.expectOne(`${api}/${COMPUTING_UNIT_ADMIN_LIST_URL}`);
+    expect(req.request.method).toEqual("GET");
+    req.flush([unitWithResource('{"cpuLimit":"1"}'), unitWithResource('{"cpuLimit":"2"}')]);
+
+    expect(result.map(u => u.computingUnit.resource)).toEqual([{ cpuLimit: "1" }, { cpuLimit: "2" }]);
+  });
+
   it("renameComputingUnit() PUTs to a URI-encoded rename endpoint", () => {
     service.renameComputingUnit(3, "my unit/name").subscribe();
 

frontend/src/app/common/service/computing-unit/workflow-computing-unit/workflow-computing-unit-managing.service.ts

@@ -33,6 +33,7 @@ export const COMPUTING_UNIT_BASE_URL = "computing-unit";
 export const COMPUTING_UNIT_CREATE_URL = `${COMPUTING_UNIT_BASE_URL}/create`;
 export const COMPUTING_UNIT_LIST_URL = `${COMPUTING_UNIT_BASE_URL}`;
 export const COMPUTING_UNIT_TYPES_URL = `${COMPUTING_UNIT_BASE_URL}/types`;
+export const COMPUTING_UNIT_ADMIN_LIST_URL = `${COMPUTING_UNIT_BASE_URL}/admin/list`;
 
 @Injectable({
   providedIn: "root",
@@ -173,6 +174,16 @@ export class WorkflowComputingUnitManagingService {
       .pipe(map(arr => arr.map(unit => this.parseDashboardUnit(unit))));
   }
 
+  /**
+   * List every active computing unit across all users. ADMIN only.
+   * @returns An Observable of a list of DashboardWorkflowComputingUnit.
+   */
+  public listAllComputingUnits(): Observable<DashboardWorkflowComputingUnit[]> {
+    return this.http
+      .get<DashboardWorkflowComputingUnit[]>(`${AppSettings.getApiEndpoint()}/${COMPUTING_UNIT_ADMIN_LIST_URL}`)
+      .pipe(map(arr => arr.map(unit => this.parseDashboardUnit(unit))));
+  }
+
   public getComputingUnit(cuid: number): Observable<DashboardWorkflowComputingUnit> {
     return this.http
       .get<DashboardWorkflowComputingUnit>(`${AppSettings.getApiEndpoint()}/${COMPUTING_UNIT_BASE_URL}/${cuid}`)

frontend/src/app/dashboard/component/admin/computing-unit/admin-computing-unit.component.html

@@ -0,0 +1,141 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<nz-card
+  class="section-title"
+  style="background-color: lightcoral">
+  <h2
+    class="page-title"
+    style="color: white">
+    Computing Units
+  </h2>
+</nz-card>
+
+<nz-table
+  #cuTable
+  nzShowSizeChanger
+  [nzScroll]="{ y: '500px' }"
+  [nzData]="computingUnits"
+  [nzLoading]="isLoading"
+  [nzLoadingIndicator]="loadingTemplate"
+  [nzPageSize]="20"
+  [nzPageSizeOptions]="[10, 20, 50, 100]"
+  class="computing-unit-table">
+  <thead>
+    <tr>
+      <th nzWidth="40px"></th>
+      <th
+        [nzSortFn]="sortByName"
+        nzWidth="20%">
+        Name
+      </th>
+      <th
+        [nzSortFn]="sortByOwner"
+        nzWidth="20%">
+        Owner
+      </th>
+      <th
+        [nzSortFn]="sortByType"
+        [nzFilters]="typeFilters"
+        [nzFilterFn]="filterByType"
+        nzWidth="12%">
+        Type
+      </th>
+      <th
+        [nzSortFn]="sortByStatus"
+        [nzFilters]="statusFilters"
+        [nzFilterFn]="filterByStatus"
+        nzWidth="12%">
+        Status
+      </th>
+      <th
+        [nzSortFn]="sortByCreated"
+        nzWidth="16%">
+        Created
+      </th>
+      <th nzWidth="20%">Resources</th>
+    </tr>
+  </thead>
+  <tbody>
+    <ng-container *ngFor="let unit of cuTable.data; trackBy: trackByCuid">
+      <tr>
+        <td
+          [nzShowExpand]="!isLocal(unit)"
+          [nzExpand]="expandedCuids.has(unit.computingUnit.cuid)"
+          (nzExpandChange)="onExpandChange(unit.computingUnit.cuid, $event)"></td>
+        <td>{{ unit.computingUnit.name }}</td>
+        <td>
+          <span class="owner-cell">
+            <texera-user-avatar
+              [googleAvatar]="unit.ownerGoogleAvatar"
+              [userName]="unit.ownerName"></texera-user-avatar>
+            <span>{{ unit.ownerName || "Unknown" }}</span>
+          </span>
+        </td>
+        <td>{{ unit.computingUnit.type }}</td>
+        <td>
+          <nz-badge
+            [nzColor]="getBadgeColor(unit.status)"
+            [nz-tooltip]="getStatusTooltip(unit)"
+            [nzText]="unit.status"></nz-badge>
+        </td>
+        <td [nz-tooltip]="unit.computingUnit.creationTime | date: 'medium'">
+          {{ formatRelativeTime(unit.computingUnit.creationTime) }}
+        </td>
+        <td>{{ resourceSummary(unit) }}</td>
+      </tr>
+      <tr *ngIf="expandedCuids.has(unit.computingUnit.cuid)">
+        <td></td>
+        <td colspan="6">
+          <dl class="spec-detail">
+            <div>
+              <dt>CPU</dt>
+              <dd>{{ displaySpec(unit.computingUnit.resource.cpuLimit) }}</dd>
+            </div>
+            <div>
+              <dt>Memory</dt>
+              <dd>{{ displaySpec(unit.computingUnit.resource.memoryLimit) }}</dd>
+            </div>
+            <div>
+              <dt>GPU</dt>
+              <dd>{{ displaySpec(unit.computingUnit.resource.gpuLimit) }}</dd>
+            </div>
+            <div>
+              <dt>JVM Memory</dt>
+              <dd>{{ displaySpec(unit.computingUnit.resource.jvmMemorySize) }}</dd>
+            </div>
+            <div>
+              <dt>Shared Memory</dt>
+              <dd>{{ displaySpec(unit.computingUnit.resource.shmSize) }}</dd>
+            </div>
+          </dl>
+        </td>
+      </tr>
+    </ng-container>
+  </tbody>
+</nz-table>
+
+<ng-template #loadingTemplate>
+  <div class="loading-container">
+    <nz-spin
+      nzTip="Loading..."
+      [nzSpinning]="true"
+      nzSize="large"></nz-spin>
+  </div>
+</ng-template>

frontend/src/app/dashboard/component/admin/computing-unit/admin-computing-unit.component.scss

@@ -0,0 +1,60 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 300px;
+}
+
+.computing-unit-table {
+  display: block;
+}
+
+.owner-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+// The expanded spec detail: a compact label/value grid that wraps on narrow viewports.
+.spec-detail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 32px;
+  margin: 0;
+  padding: 4px 0;
+
+  div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  dt {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
+    font-weight: 400;
+  }
+
+  dd {
+    margin: 0;
+    font-variant-numeric: tabular-nums;
+  }
+}