aicam commented on code in PR #8888: URL: https://github.com/apache/texera/pull/8888#discussion_r4239330505
########## 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: `catchError` raises a toast on **every** failed poll, so a sustained outage (computing-unit service restarting, k8s API unreachable) stacks a new red toast every 5s: ~24 toasts for a 2-minute blip. Meanwhile the table keeps showing the last good snapshot with no hint that it's stale, so units can read `Running` after they're gone. Small fix: only toast when polling *starts* failing, and re-arm on the next success: ```suggestion // `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 a failed poll does not end the stream; it toasts only when polling starts failing, not on every tick. let pollFailing = false; interval(COMPUTING_UNIT_REFRESH_INTERVAL_MS) .pipe( startWith(0), exhaustMap(() => this.computingUnitService.listAllComputingUnits().pipe( catchError((err: unknown) => { if (!pollFailing) { this.messageService.error(extractErrorMessage(err)); } pollFailing = true; return EMPTY; }), // Also runs after a failed load, so the spinner cannot spin forever. finalize(() => (this.isLoading = false)) ) ), untilDestroyed(this) ) .subscribe(units => { pollFailing = false; this.computingUnits = units; }); ``` Optional follow-up: promote `pollFailing` to a field and show an `nz-alert` above the table while it's true ("Showing data from <time>; refresh failing"). That also covers the case where the *first* poll fails and the table renders "No Data" as if there were no units. -- 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]
