Implement Workflow Compute Unit Management

core/amber/computing-unit.dockerfile

@@ -13,6 +13,8 @@ RUN apt-get update && apt-get install -y \
     netcat \
     unzip \
     python3-pip \
+    libpq-dev \
+    python3-dev \
     && apt-get clean
 
 # Install Python dependencies

core/amber/src/main/scala/edu/uci/ics/texera/web/resource/ResultResource.scala

@@ -5,7 +5,7 @@ import edu.uci.ics.amber.core.virtualidentity.WorkflowIdentity
 import edu.uci.ics.texera.web.auth.SessionUser
 import edu.uci.ics.texera.web.model.websocket.request.ResultExportRequest
 import edu.uci.ics.texera.web.model.websocket.response.ResultExportResponse
-import edu.uci.ics.texera.web.service.{ResultExportService, WorkflowService}
+import edu.uci.ics.texera.web.service.ResultExportService
 import io.dropwizard.auth.Auth
 
 import javax.ws.rs._

core/amber/src/main/scala/edu/uci/ics/texera/web/service/ExecutionResultService.scala

@@ -4,7 +4,7 @@ import akka.actor.Cancellable
 import com.fasterxml.jackson.annotation.{JsonTypeInfo, JsonTypeName}
 import com.fasterxml.jackson.databind.node.ObjectNode
 import com.typesafe.scalalogging.LazyLogging
-import edu.uci.ics.amber.core.storage.DocumentFactory.{ICEBERG, MONGODB}
+import edu.uci.ics.amber.core.storage.DocumentFactory.ICEBERG
 import edu.uci.ics.amber.core.storage.VFSResourceType.MATERIALIZED_RESULT
 import edu.uci.ics.amber.core.storage.model.VirtualDocument
 import edu.uci.ics.amber.core.storage.{DocumentFactory, StorageConfig, VFSURIFactory}

core/amber/webserver.dockerfile

@@ -26,7 +26,7 @@ COPY core/ .
 RUN rm -rf amber/user-resources/*
 
 RUN apt-get update
-RUN apt-get install -y netcat unzip python3-pip
+RUN apt-get install -y netcat unzip python3-pip libpq-dev python3-dev
 RUN pip3 install python-lsp-server python-lsp-server[websockets]
 RUN pip3 install -r amber/requirements.txt
 

core/gui/proxy.config.json

@@ -4,7 +4,6 @@
     "secure":  false,
     "changeOrigin": true
   },
-
   "/api": {
     "target": "http://texera.example.com:30080",
     "secure": false,

core/gui/src/app/app.module.ts

@@ -144,6 +144,7 @@ import { SocialLoginModule, SocialAuthServiceConfig, GoogleSigninButtonModule }
 import { GoogleLoginProvider } from "@abacritt/angularx-social-login";
 import { lastValueFrom } from "rxjs";
 import { HubSearchResultComponent } from "./hub/component/hub-search-result/hub-search-result.component";
+import { NzProgressModule } from "ng-zorro-antd/progress";
 
 registerLocaleData(en);
 
@@ -295,6 +296,7 @@ registerLocaleData(en);
     NzDividerModule,
     SocialLoginModule,
     GoogleSigninButtonModule,
+    NzProgressModule,
   ],
   providers: [
     provideNzI18n(en_US),

core/gui/src/app/dashboard/component/dashboard.component.html

@@ -152,7 +152,7 @@
           *ngIf="!isLogin && googleLogin"
           type="standard"
           size="large"
-          width="200"></asl-google-signin-button>
+          [width]="200"></asl-google-signin-button>
       </div>
 
       <nz-content>

core/gui/src/app/workspace/component/power-button/computing-unit-selection.component.html

@@ -1,52 +1,181 @@
-<nz-select
-  nzSize="large"
-  nzShowSearch
-  nzAllowClear
-  [nzDropdownRender]="renderTemplate"
-  nzPlaceHolder="Select a computing unit"
-  [(ngModel)]="selectedComputingUnit"
-  (ngModelChange)="onComputingUnitChange($event)">
-  <nz-option
-    *ngFor="let unit of computingUnits"
-    nzCustomContent
-    [nzLabel]="unit.uri"
-    [nzValue]="unit">
-    <div class="computing-unit-option">
-      <!-- Badge with state -->
-      <nz-badge
-        [nzColor]="getBadgeColor(unit.status)"
-        [nzText]="''">
-        <span
-          nz-icon
-          nzType="desktop"></span>
-      </nz-badge>
+<div
+  class="computing-units-selection"
+  [ngClass]="{ 'metrics-visible': isComputingUnitRunning() }">
+  <div
+    *ngIf="isComputingUnitRunning()"
+    nz-button
+    nz-popover
+    [nzPopoverContent]="selectedComputingUnit ? metricsTemplate : undefined"
+    nzPopoverTrigger="hover"
+    nzPopoverPlacement="bottom"
+    id="metrics-container-id"
+    class="metrics-container">
+    <div class="metric-item">
+      <span class="metric-label">CPU</span>
+      <nz-progress
+        id="cpu-progress-bar"
+        [nzPercent]="(getCpuPercentage() | number:'1.0-0')"
+        [nzStrokeColor]="'#52c41a'"
+        [nzStatus]="getCpuStatus()"
+        nzType="line"
+        [nzStrokeWidth]="8"
+        [nzShowInfo]="false"></nz-progress>
+    </div>
 
-      <!-- Name and tooltip -->
-      <span class="unit-details">
-        <span
-          nz-tooltip
-          [nzTooltipTitle]="unit.uri"
-          >{{ unit.computingUnit.name }}</span
-        >
+    <div class="metric-item">
+      <span class="metric-label">Memory</span>
+      <nz-progress
+        id="memory-progress-bar"
+        [nzPercent]="(getMemoryPercentage() | number:'1.0-0')"
+        [nzStrokeColor]="'#1890ff'"
+        [nzStatus]="getMemoryStatus()"
+        nzType="line"
+        [nzStrokeWidth]="8"
+        [nzShowInfo]="false"></nz-progress>
+    </div>
+  </div>
+
+  <button
+    nz-button
+    nz-dropdown
+    nzTrigger="click"
+    [nzDropdownMenu]="menu"
+    [nzPlacement]="'bottomRight'"
+    class="computing-units-dropdown-button">
+    <nz-badge
+      [nzStatus]="computeStatus()"
+      [nzText]="''"></nz-badge>
+    <span
+      *ngIf="selectedComputingUnit"
+      nz-tooltip
+      [nzTooltipTitle]="getComputingUnitName(selectedComputingUnit.uri)">
+      Connected
+    </span>
+    <span *ngIf="!selectedComputingUnit">Connect</span>
+    <i
+      nz-icon
+      nzType="down"></i>
+  </button>
+
+  <nz-dropdown-menu #menu="nzDropdownMenu">
+    <ul
+      nz-menu
+      class="computing-units-dropdown">
+      <li
+        nz-menu-item
+        *ngFor="let unit of computingUnits"
+        id="computing-unit-option"
+        [nzDisabled]="cannotSelectUnit(unit)"
+        [ngClass]="{ 'unit-selected': isSelectedUnit(unit) }"
+        (click)="selectedComputingUnit = unit; onComputingUnitChange(unit)">
+        <div class="computing-unit-name">
+          <nz-badge
+            [nzColor]="getBadgeColor(unit.status)"
+            [nzText]="''"></nz-badge>
+          <span
+            nz-tooltip
+            [nzTooltipTitle]="unit.computingUnit.name">
+            {{ getComputingUnitName(unit.uri) }}
+          </span>
+        </div>
         <div
-          class="terminate-box"
+          class="terminate-icon"
+          nz-icon
+          nzType="delete"
           nz-tooltip
-          [nzTooltipTitle]="'Terminate'"
-          (click)="terminateComputingUnit(unit.computingUnit.cuid)"></div>
-      </span>
-    </div>
-  </nz-option>
-</nz-select>
+          [nzTooltipTitle]="'Terminate ' + getComputingUnitName(unit.uri)"
+          (click)="terminateComputingUnit(unit.computingUnit.cuid); $event.stopPropagation()"></div>
+      </li>
+      <li nz-menu-divider></li>
+      <li
+        nz-menu-item
+        (click)="showAddComputeUnitModalVisible()">
+        <div class="create-computing-unit">
+          <i
+            nz-icon
+            nzType="plus"></i>
+          <span>Computing Unit</span>
+        </div>
+      </li>
+    </ul>
+  </nz-dropdown-menu>
+</div>
 
-<ng-template #renderTemplate>
-  <nz-divider></nz-divider>
-  <div class="dropdown-footer">
+<nz-modal
+  [(nzVisible)]="addComputeUnitModalVisible"
+  [nzTitle]="addComputeUnitModalTitle"
+  [nzContent]="addComputeUnitModalContent"
+  [nzFooter]="addComputeUnitModalFooter"
+  (nzOnCancel)="handleAddComputeUnitModalCancel()">
+  <ng-template #addComputeUnitModalTitle>Create Computing Unit</ng-template>
+  <ng-template #addComputeUnitModalContent>
+    <div class="create-compute-unit-container">
+      <div class="select-unit">
+        <span>Select Memory</span>
+        <nz-select
+          class="memory-selection"
+          [(ngModel)]="selectedMemory">
+          <nz-option
+            nzValue="1Gi"
+            nzLabel="Lowest Memory (1Gi)"></nz-option>
+          <nz-option
+            nzValue="2Gi"
+            nzLabel="Standard Memory (2Gi)"></nz-option>
+          <nz-option
+            nzValue="4Gi"
+            nzLabel="High Memory (4Gi)"></nz-option>
+        </nz-select>
+      </div>
+
+      <div class="select-unit">
+        <span>Select CPU</span>
+        <nz-select
+          class="cpu-selection"
+          [(ngModel)]="selectedCpu">
+          <nz-option
+            nzValue="1"
+            nzLabel="Lowest CPU (1 Core)"></nz-option>
+          <nz-option
+            nzValue="2"
+            nzLabel="Standard CPU (2 Core)"></nz-option>
+          <nz-option
+            nzValue="4"
+            nzLabel="High CPU (4 Core)"></nz-option>
+        </nz-select>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #addComputeUnitModalFooter>
+    <button
+      nz-button
+      nzType="default"
+      (click)="handleAddComputeUnitModalCancel()">
+      Cancel
+    </button>
     <button
       nz-button
       nzType="primary"
-      nzBlock
-      (click)="startComputingUnit()">
-      Start
+      (click)="handleAddComputeUnitModalOk()">
+      Create
     </button>
+  </ng-template>
+</nz-modal>
+
+<ng-template #metricsTemplate>
+  <div class="resource-metrics">
+    <div class="cpu-metric general-metric">
+      <p class="metric-name">CPU</p>
+      <p class="metric-value">
+        {{getCpuValue() | number:'1.2-2' || '0.00'}}
+        <span class="metric-unit">/ {{getCpuLimit()}} {{getCpuLimitUnit()}}</span>
+      </p>
+    </div>
+    <div class="memory-metric general-metric">
+      <p class="metric-name">Memory</p>
+      <p class="metric-value">
+        {{getMemoryValue() | number:'1.2-2' || '0.00'}}
+        <span class="metric-unit">/ {{getMemoryLimit()}} {{getMemoryLimitUnit()}}</span>
+      </p>
+    </div>
   </div>
 </ng-template>