This is an automated email from the ASF dual-hosted git repository. github-merge-queue[bot] pushed a commit to branch gh-readonly-queue/main/pr-5644-1c580e59eb69bc45205298606c3980c67a05803f in repository https://gitbox.apache.org/repos/asf/texera.git
commit 2e2a2d2bd7764f8ad23bfc79a0e64c7e9d37d90a Author: Sarah Asad <[email protected]> AuthorDate: Wed Jun 24 06:22:39 2026 -0700 feat(frontend): Virtual Environments: Show loading spinner while system packages resolve (#5644) <!-- Thanks for sending a pull request (PR)! Here are some tips for you: 1. If this is your first time, please read our contributor guidelines: [Contributing to Texera](https://github.com/apache/texera/blob/main/CONTRIBUTING.md) 2. Ensure you have added or run the appropriate tests for your PR 3. If the PR is work in progress, mark it a draft on GitHub. 4. Please write your PR title to summarize what this PR proposes, we are following Conventional Commits style for PR titles as well. 5. Be sure to keep the PR description updated to reflect all changes. --> ### What changes were proposed in this PR? <!-- Please clarify what changes you are proposing. The purpose of this section is to outline the changes. Here are some tips for you: 1. If you propose a new API, clarify the use case for a new API. 2. If you fix a bug, you can clarify why it is a bug. 3. If it is a refactoring, clarify what has been changed. 3. It would be helpful to include a before-and-after comparison using screenshots or GIFs. 4. Please consider writing useful notes for better and faster reviews. --> PR #5613 removed the `system-requirements-lock.txt` file which changes how system packages are loaded. Previously, the package list was available immediately from the lock file. With the new approach, the system package set is generated on demand by creating a temporary environment, installing the requirements, and running pip freeze, which introduces a noticeable delay on the initial load. The PR introduces new UI changes to handle this new loading state and provide feedback to the user while the system packages are being resolved by adding a loading spinner. <img width="1948" height="948" alt="image" src="https://github.com/user-attachments/assets/4c80f93c-fbb2-42f0-91dc-4942ccaf67c5"; /> <img width="1932" height="1186" alt="image" src="https://github.com/user-attachments/assets/5bde688b-baf9-4151-825e-309893ff8c3d"; /> ### Any related issues, documentation, discussions? <!-- Please use this section to link other resources if not mentioned already. 1. If this PR fixes an issue, please include `Fixes #1234`, `Resolves #1234` or `Closes #1234`. If it is only related, simply mention the issue number. 2. If there is design documentation, please add the link. 3. If there is a discussion in the mailing list, please add the link. --> Related PR: #5613. Closes #5926 ### How was this PR tested? <!-- If tests were added, say they were added here. Or simply mention that if the PR is tested with existing test cases. Make sure to include/update test cases that check the changes thoroughly including negative and positive cases if possible. If it was tested in a way different from regular unit tests, please clarify how you tested step by step, ideally copy and paste-able, so that other reviewers can test and check, and descendants can verify in the future. If tests were not added, please describe why they were not added and/or why it was difficult to add. --> Tested manually. ### Was this PR authored or co-authored using generative AI tooling? <!-- If generative AI tooling has been used in the process of authoring this PR, please include the phrase: 'Generated-by: ' followed by the name of the tool and its version. If no, write 'No'. Please refer to the [ASF Generative Tooling Guidance](https://www.apache.org/legal/generative-tooling.html) for details. --> Co-authored using: Claude Code --- .../computing-unit-selection.component.html | 48 +++++++++------ .../computing-unit-selection.component.spec.ts | 72 ++++++++++++++++++++++ .../computing-unit-selection.component.ts | 8 +++ frontend/src/styles.scss | 9 +++ 4 files changed, 119 insertions(+), 18 deletions(-) diff --git a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.html b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.html index 6167d36759..7fe7dca677 100644 --- a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.html +++ b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.html @@ -472,28 +472,40 @@ </ng-template> <nz-collapse-panel [nzHeader]="systemHeaderTpl"> <div class="system-panel-inner"> - <div class="package-header-row"> - <div class="package-column-label">Package</div> - <div class="package-column-label">Version</div> + <div + *ngIf="systemPackagesLoading" + class="system-loading"> + <span + nz-icon + nzType="loading" + nzTheme="outline"></span> + Fetching system packages… </div> - <div - *ngFor="let pkg of systemPackages" - class="package-row system-row"> - <div class="system-package-inputs"> - <input - nz-input - class="system-input" - [disabled]="true" - [ngModel]="pkg.name" /> + <ng-container *ngIf="!systemPackagesLoading"> + <div class="package-header-row"> + <div class="package-column-label">Package</div> + <div class="package-column-label">Version</div> + </div> - <input - nz-input - class="system-input" - [disabled]="true" - [ngModel]="pkg.version" /> + <div + *ngFor="let pkg of systemPackages" + class="package-row system-row"> + <div class="system-package-inputs"> + <input + nz-input + class="system-input" + [disabled]="true" + [ngModel]="pkg.name" /> + + <input + nz-input + class="system-input" + [disabled]="true" + [ngModel]="pkg.version" /> + </div> </div> - </div> + </ng-container> </div> </nz-collapse-panel> </nz-collapse> diff --git a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.spec.ts b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.spec.ts index 5702dfa9ba..b5827ecb15 100644 --- a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.spec.ts +++ b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.spec.ts @@ -29,6 +29,13 @@ import { NzModalModule, NzModalService } from "ng-zorro-antd/modal"; import { ComputingUnitStatusService } from "../../../common/service/computing-unit/computing-unit-status/computing-unit-status.service"; import { MockComputingUnitStatusService } from "../../../common/service/computing-unit/computing-unit-status/mock-computing-unit-status.service"; import { commonTestProviders } from "../../../common/testing/test-utils"; +import { Subject, of, throwError } from "rxjs"; +import { + PackageResponse, + PvePackageResponse, + WorkflowPveService, +} from "../../service/virtual-environment/virtual-environment.service"; +import { DashboardWorkflowComputingUnit } from "../../../common/type/workflow-computing-unit"; describe("PowerButtonComponent", () => { let component: ComputingUnitSelectionComponent; @@ -82,4 +89,69 @@ describe("PowerButtonComponent", () => { it("should create", () => { expect(component).toBeTruthy(); }); + + describe("getPVEs() systemPackagesLoading flag", () => { + const selectedUnit = { + computingUnit: { cuid: 123 }, + } as unknown as DashboardWorkflowComputingUnit; + + let pveService: WorkflowPveService; + + beforeEach(() => { + pveService = TestBed.inject(WorkflowPveService); + component.selectedComputingUnit = selectedUnit; + component.systemPackagesLoading = false; + component.pves = []; + component.systemPackages = []; + }); + + it("sets systemPackagesLoading=true immediately and keeps it true while /pve/system is in flight", () => { + const pvesResp: PvePackageResponse[] = [{ pveName: "env-a", userPackages: ["numpy==1.26.0"] }]; + const systemSubject = new Subject<PackageResponse>(); + vi.spyOn(pveService, "fetchPVEs").mockReturnValue(of(pvesResp)); + vi.spyOn(pveService, "getSystemPackages").mockReturnValue(systemSubject.asObservable()); + + component.getPVEs(); + + expect(component.systemPackagesLoading).toBe(true); + expect(component.pves.length).toBe(1); + expect(component.pves[0].name).toBe("env-a"); + + systemSubject.next({ system: ["pandas==2.0.0"] }); + systemSubject.complete(); + + expect(component.systemPackagesLoading).toBe(false); + expect(component.systemPackages).toEqual([{ name: "pandas", version: "2.0.0" }]); + }); + + it("clears systemPackagesLoading when /pve/system errors", () => { + vi.spyOn(pveService, "fetchPVEs").mockReturnValue(of([] as PvePackageResponse[])); + vi.spyOn(pveService, "getSystemPackages").mockReturnValue(throwError(() => new Error("system fetch failed"))); + vi.spyOn(console, "error").mockImplementation(() => {}); + + component.getPVEs(); + + expect(component.systemPackagesLoading).toBe(false); + expect(component.systemPackages).toEqual([]); + }); + + it("clears systemPackagesLoading and resets state when /pve/pves errors", () => { + const fetchPvesSpy = vi + .spyOn(pveService, "fetchPVEs") + .mockReturnValue(throwError(() => new Error("pves fetch failed"))); + const getSystemSpy = vi.spyOn(pveService, "getSystemPackages"); + vi.spyOn(console, "error").mockImplementation(() => {}); + + component.pves = [{ name: "stale" }] as any; + component.systemPackages = [{ name: "stale", version: "0.0.0" }]; + + component.getPVEs(); + + expect(fetchPvesSpy).toHaveBeenCalledWith(123); + expect(getSystemSpy).not.toHaveBeenCalled(); + expect(component.systemPackagesLoading).toBe(false); + expect(component.pves).toEqual([]); + expect(component.systemPackages).toEqual([]); + }); + }); }); diff --git a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts index b9a41c5b5f..5c7123a91f 100644 --- a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts +++ b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts @@ -139,6 +139,10 @@ export class ComputingUnitSelectionComponent implements OnInit { // variables for creating a virtual environment pves: PveDraft[] = []; systemPackages: { name: string; version: string }[] = []; + // True while a /pve/system response is in flight. The server resolves + // the full pinned set with a `pip freeze` against a throwaway venv, + // which can take 30–60s on the first request after a server restart. + systemPackagesLoading = false; pveModalVisible = false; // current workflow's Id, will change with wid in the workflowActionService.metadata @@ -782,6 +786,7 @@ export class ComputingUnitSelectionComponent implements OnInit { getPVEs(): void { const cuId = this.selectedComputingUnit!.computingUnit.cuid; + this.systemPackagesLoading = true; this.workflowPveService .fetchPVEs(cuId) @@ -812,10 +817,12 @@ export class ComputingUnitSelectionComponent implements OnInit { version: (version ?? "").trim(), }; }); + this.systemPackagesLoading = false; }, error: (err: unknown) => { console.error("Failed to fetch system packages:", err); this.systemPackages = []; + this.systemPackagesLoading = false; }, }); }, @@ -823,6 +830,7 @@ export class ComputingUnitSelectionComponent implements OnInit { console.error("Failed to fetch PVEs:", err); this.pves = []; this.systemPackages = []; + this.systemPackagesLoading = false; }, }); } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 5f4a00952a..d761cf56a5 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -161,6 +161,15 @@ hr { gap: 6px; } + .system-loading { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 4px; + color: rgba(0, 0, 0, 0.55); + font-style: italic; + } + .package-header-row, .package-inputs { display: grid;
