kunwp1 commented on code in PR #8888: URL: https://github.com/apache/texera/pull/8888#discussion_r4239353659
########## frontend/src/app/dashboard/component/admin/computing-unit/admin-computing-unit.component.ts: ########## @@ -0,0 +1,195 @@ +/** + * 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. + */ + +import { Component, OnInit } from "@angular/core"; +import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; +import { EMPTY, interval } from "rxjs"; +import { catchError, exhaustMap, finalize, startWith } from "rxjs/operators"; +import { DatePipe, NgFor, NgIf } from "@angular/common"; +import { + NzTableComponent, + NzTheadComponent, + NzTbodyComponent, + NzTrDirective, + NzTableCellDirective, + NzThMeasureDirective, + NzThAddOnComponent, + NzTdAddOnComponent, + NzTableSortFn, + NzTableFilterFn, +} from "ng-zorro-antd/table"; +import { NzCardComponent } from "ng-zorro-antd/card"; +import { NzBadgeComponent } from "ng-zorro-antd/badge"; +import { NzTooltipDirective } from "ng-zorro-antd/tooltip"; +import { NzSpinComponent } from "ng-zorro-antd/spin"; +import { NzMessageService } from "ng-zorro-antd/message"; +import { WorkflowComputingUnitManagingService } from "../../../../common/service/computing-unit/workflow-computing-unit/workflow-computing-unit-managing.service"; +import { + DashboardWorkflowComputingUnit, + WorkflowComputingUnitResourceLimit, +} from "../../../../common/type/workflow-computing-unit"; +import { getComputingUnitBadgeColor, getComputingUnitStatusTooltip } from "../../../../common/util/computing-unit.util"; +import { formatRelativeTime } from "../../../../common/util/format.util"; +import { extractErrorMessage } from "../../../../common/util/error"; +import { UserAvatarComponent } from "../../user/user-avatar/user-avatar.component"; +import { ComputingUnitState } from "../../../../common/type/computing-unit-connection.interface"; + +// Same cadence as the admin executions page. +const COMPUTING_UNIT_REFRESH_INTERVAL_MS = 5000; + +// Local units have no limits, so their specs come back as this placeholder. +const NOT_APPLICABLE = "NaN"; + +const hasSpec = (value?: string) => !!value && value !== NOT_APPLICABLE; + +// All resource fields except `nodeAddresses`, which is a list. +type SpecKey = Exclude<keyof WorkflowComputingUnitResourceLimit, "nodeAddresses">; + +@UntilDestroy() +@Component({ + templateUrl: "./admin-computing-unit.component.html", + styleUrls: ["./admin-computing-unit.component.scss"], + imports: [ + NzCardComponent, + NzTableComponent, + NzTheadComponent, + NzTbodyComponent, + NzTrDirective, + NzTableCellDirective, + NzThMeasureDirective, + NzThAddOnComponent, + NzTdAddOnComponent, + NzBadgeComponent, + NzTooltipDirective, + NzSpinComponent, + UserAvatarComponent, + NgFor, + NgIf, + DatePipe, + ], +}) +export class AdminComputingUnitComponent implements OnInit { + computingUnits: ReadonlyArray<DashboardWorkflowComputingUnit> = []; + isLoading: boolean = true; + readonly expandedCuids = new Set<number>(); + + readonly getBadgeColor = getComputingUnitBadgeColor; + readonly getStatusTooltip = getComputingUnitStatusTooltip; + readonly formatRelativeTime = formatRelativeTime; + + readonly specFields: { label: string; key: SpecKey }[] = [ + { label: "CPU", key: "cpuLimit" }, + { label: "Memory", key: "memoryLimit" }, + { label: "GPU", key: "gpuLimit" }, + { label: "JVM Memory", key: "jvmMemorySize" }, + { label: "Shared Memory", key: "shmSize" }, + ]; + + readonly typeFilters = [ + { text: "Kubernetes", value: "kubernetes" }, + { text: "Local", value: "local" }, + ]; + // Every reportable status, so an admin can filter to the `Failed` ones, but not the `NoComputingUnit` sentinel. + readonly statusFilters = Object.values(ComputingUnitState) + .filter(status => status !== ComputingUnitState.NoComputingUnit) + .map(status => ({ text: status, value: status })); + + readonly sortByName: NzTableSortFn<DashboardWorkflowComputingUnit> = (a, b) => + (a.computingUnit.name ?? "").localeCompare(b.computingUnit.name ?? ""); + readonly sortByOwner: NzTableSortFn<DashboardWorkflowComputingUnit> = (a, b) => + (a.ownerName ?? "").localeCompare(b.ownerName ?? ""); + readonly sortByType: NzTableSortFn<DashboardWorkflowComputingUnit> = (a, b) => + a.computingUnit.type.localeCompare(b.computingUnit.type); + readonly sortByStatus: NzTableSortFn<DashboardWorkflowComputingUnit> = (a, b) => a.status.localeCompare(b.status); + readonly sortByCreated: NzTableSortFn<DashboardWorkflowComputingUnit> = (a, b) => + a.computingUnit.creationTime - b.computingUnit.creationTime; + + readonly filterByType: NzTableFilterFn<DashboardWorkflowComputingUnit> = (selected: string[], unit) => + selected.includes(unit.computingUnit.type); + readonly filterByStatus: NzTableFilterFn<DashboardWorkflowComputingUnit> = (selected: string[], unit) => + selected.includes(unit.status); + + constructor( + private computingUnitService: WorkflowComputingUnitManagingService, + private messageService: NzMessageService + ) {} + + ngOnInit(): void { + // `startWith(0)` loads at once. `exhaustMap` rather than `switchMap` lets a response slower than the interval + // finish instead of being cancelled by the next tick, so a slow cluster still refreshes. `catchError` sits inside + // it, so one failed poll shows a message without ending the stream. + interval(COMPUTING_UNIT_REFRESH_INTERVAL_MS) + .pipe( + startWith(0), + exhaustMap(() => + this.computingUnitService.listAllComputingUnits().pipe( + catchError((err: unknown) => { + this.messageService.error(extractErrorMessage(err)); + return EMPTY; + }), + // Also runs after a failed load, so the spinner cannot spin forever. + finalize(() => (this.isLoading = false)) + ) + ), + untilDestroyed(this) + ) + .subscribe(units => (this.computingUnits = units)); Review Comment: Done in aa890e255. Took the suggestion plus the optional follow-up, since toasting once on its own leaves the stale table with no hint after the toast fades. - `pollFailing` is now a field. The toast fires only on the first failure and re-arms after a success. - A warning `nz-alert` shows above the table while it is set: "Showing data from <time>…", or "Could not load computing units…" when the first poll failed, so that case no longer renders a bare "No Data". - Specs cover toast-once and re-arm, the warning with the last-good time, its clearing on recovery, and the first-load-failure message. One small correction to the premise: the toasts did not stack. ng-zorro's default `nzDuration` is 3s and the poll runs every 5s, so it was one toast flashing every 5s, not a pile. Still worth fixing. -- 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]
