kunwp1 commented on code in PR #4331:
URL: https://github.com/apache/texera/pull/4331#discussion_r3034728253
##########
frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit.component.html:
##########
@@ -20,10 +20,214 @@
<div class="section-container subsection-grid-container">
<nz-card class="section-title">
<h2 class="page-title">Computing Units</h2>
+ <div class="button-group">
+ <button
+ nz-button
+ class="create-btn"
+ (click)="showAddComputeUnitModalVisible()"
+ title="Create Computing Unit">
+ <i
+ nz-icon
+ nzType="file-add"
+ nzTheme="outline"></i>
+ <span>Create Computing Unit</span>
+ </button>
+ </div>
</nz-card>
<nz-card
class="section-list-container"
[nzBodyStyle]="{ height: '100%'}">
+ <cdk-virtual-scroll-viewport
+ itemSize="70"
+ class="virtual-scroll-container">
+ <nz-list>
+ <ng-container *ngFor="let entry of entries">
+ <texera-user-computing-unit-list-item
+
(deleted)="terminateComputingUnit(entry.computingUnit.computingUnit.cuid)"
+ [editable]="editable"
+
[entry]="entry.computingUnit"></texera-user-computing-unit-list-item>
+ </ng-container>
+ </nz-list>
+ </cdk-virtual-scroll-viewport>
</nz-card>
</div>
+
+<!-- Panel for creating the computing unit -->
+<nz-modal
+ [nzVisible]="addComputeUnitModalVisible"
+ [nzTitle]="getCreateModalTitle()"
+ [nzContent]="addComputeUnitModalContent"
+ [nzFooter]="addComputeUnitModalFooter"
+ (nzOnCancel)="handleAddComputeUnitModalCancel()">
+ <ng-template #addComputeUnitModalTitle>Create Computing Unit</ng-template>
+ <ng-template #addComputeUnitModalContent>
+ <div class="create-compute-unit-container">
+ <!-- Computing unit type selection -->
+ <div class="select-unit">
+ <span>Computing Unit Type</span>
+ <nz-select
+ class="type-selection"
+ [(ngModel)]="selectedComputingUnitType">
+ <nz-option
+ *ngFor="let type of availableComputingUnitTypes"
+ [nzValue]="type"
+ [nzLabel]="type | titlecase">
+ </nz-option>
+ </nz-select>
+ </div>
+
+ <!-- Fields for Kubernetes computing units -->
+ <ng-container *ngIf="selectedComputingUnitType === 'kubernetes'">
+ <div class="select-unit name-field">
+ <span>Computing Unit Name</span>
+ <input
+ [required]="true"
+ nz-input
+ placeholder="Enter the name of your computing unit (required)"
+ [(ngModel)]="newComputingUnitName"
+ class="unit-name-input" />
+ </div>
+ <div class="select-unit">
+ <span>Select RAM Size</span>
+ <nz-select
+ class="memory-selection"
+ [(ngModel)]="selectedMemory"
+ (ngModelChange)="onMemorySelectionChange()">
+ <nz-option
+ *ngFor="let option of memoryOptions"
+ [nzValue]="option"
+ [nzLabel]="option">
+ </nz-option>
+ </nz-select>
+ </div>
+
+ <div class="select-unit">
+ <span>Select #CPU Core(s)</span>
+ <nz-select
+ class="cpu-selection"
+ [(ngModel)]="selectedCpu">
+ <nz-option
+ *ngFor="let option of cpuOptions"
+ [nzValue]="option"
+ [nzLabel]="option">
+ </nz-option>
+ </nz-select>
+ </div>
+
+ <div
+ *ngIf="showGpuSelection()"
+ class="select-unit">
+ <span>Select #GPU(s)</span>
+ <nz-select
+ class="gpu-selection"
+ [(ngModel)]="selectedGpu">
+ <nz-option
+ *ngFor="let option of gpuOptions"
+ [nzValue]="option"
+ [nzLabel]="option">
+ </nz-option>
+ </nz-select>
+ </div>
+
+ <div class="select-unit shared-memory-group">
+ <span>
+ Adjust the Shared Memory Size
+ <i
+ nz-icon
+ nzType="info-circle"
+ nz-tooltip
+ [nzTooltipTitle]="
+ 'Shared memory (/dev/shm) is used for inter-process
communication. If you plan to run ML tasks (e.g., using PyTorch), consider
increasing this size. Learn more:
https://man7.org/linux/man-pages/man7/shm_overview.7.html'
+ ">
+ </i>
+ </span>
+ <div class="shm-input-row">
+ <input
+ nz-input
+ type="number"
+ min="0"
+ [(ngModel)]="shmSizeValue"
+ class="shm-size-input"
+ placeholder="e.g. 512" />
+ <nz-select
+ class="shm-unit-select"
+ [(ngModel)]="shmSizeUnit">
+ <nz-option
+ nzValue="Mi"
+ nzLabel="Mi"></nz-option>
+ <nz-option
+ nzValue="Gi"
+ nzLabel="Gi"></nz-option>
+ </nz-select>
+ </div>
+ <div
+ *ngIf="isShmTooLarge()"
+ class="shm-warning">
+ Shared memory cannot be greater than total memory.
+ </div>
+ </div>
+
+ <div class="select-unit name-field">
+ <span>JVM Memory Size: {{selectedJvmMemorySize}}</span>
+ <nz-slider
+ *ngIf="showJvmMemorySlider"
+ class="jvm-memory-slider"
+ [nzMarks]="jvmMemoryMarks"
+ [nzMin]="jvmMemorySteps[0] || 2"
+ [nzMax]="jvmMemoryMax"
+ [nzStep]="null"
+ [nzIncluded]="false"
+ [ngModel]="jvmMemorySliderValue"
+ (ngModelChange)="onJvmMemorySliderChange($event)">
+ </nz-slider>
+ <div
+ *ngIf="isMaxJvmMemorySelected()"
+ class="memory-warning">
+ <nz-alert
+ nzType="warning"
+ nzMessage="Using maximum JVM memory may affect the performance
of Python-based operators."
+ nzShowIcon>
+ </nz-alert>
+ </div>
+ </div>
+ </ng-container>
+
+ <!-- Fields for Local computing units -->
+ <ng-container *ngIf="selectedComputingUnitType === 'local'">
+ <div class="select-unit name-field">
+ <span>Computing Unit Name</span>
+ <input
+ [required]="true"
+ nz-input
+ placeholder="Enter the name of your local computing unit
(required)"
+ [(ngModel)]="newComputingUnitName"
+ class="unit-name-input" />
+ </div>
+ <div class="select-unit name-field">
+ <span>Computing Unit URI</span>
+ <input
+ [required]="true"
+ nz-input
+ placeholder="URI of the local computing unit (e.g.
http://localhost:8085)"
Review Comment:
I remember we had a default value in this field. Can you revert a default
value back so that user doesn't have to type in the URI?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
