From 5beae596655fd227518e44c39fd3ef7aba9a700b Mon Sep 17 00:00:00 2001 From: Tanishq Gandhi Date: Thu, 27 Aug 2026 22:04:18 -0700 Subject: [PATCH 1/2] feat(frontend): add the Models page --- frontend/proxy.config.json | 5 + frontend/src/app/app-routing.constant.ts | 1 + frontend/src/app/app-routing.module.ts | 5 + frontend/src/app/common/type/gui-config.ts | 1 + frontend/src/app/common/type/model.ts | 32 ++ .../settings/admin-settings.component.html | 9 + .../settings/admin-settings.component.spec.ts | 6 +- .../settings/admin-settings.component.ts | 1 + .../component/dashboard.component.html | 12 + .../component/dashboard.component.spec.ts | 7 +- .../component/dashboard.component.ts | 3 + .../user/filters/filters.component.ts | 42 +- .../card-item/card-item.component.ts | 125 ++--- .../list-item/list-item.component.spec.ts | 9 +- .../user/list-item/list-item.component.ts | 117 ++--- .../user-model-creator.component.html | 70 +++ .../user-model-creator.component.scss | 75 +++ .../user-model-creator.component.spec.ts | 188 ++++++++ .../user-model-creator.component.ts | 187 ++++++++ .../user/user-model/user-model.component.html | 101 ++++ .../user/user-model/user-model.component.scss | 22 + .../user-model/user-model.component.spec.ts | 438 ++++++++++++++++++ .../user/user-model/user-model.component.ts | 247 ++++++++++ .../service/user/model/model.service.spec.ts | 164 +++++++ .../service/user/model/model.service.ts | 97 ++++ .../service/user/model/stub-model.service.ts | 47 ++ .../dataset-resource.descriptor.ts | 47 ++ .../file-resource.descriptor.ts | 33 ++ .../model-resource.descriptor.ts | 44 ++ .../project-resource.descriptor.ts | 35 ++ .../resource-registry.service.spec.ts | 176 +++++++ .../resource-registry.service.ts | 77 +++ .../workflow-resource.descriptor.ts | 51 ++ .../src/app/dashboard/type/dashboard-entry.ts | 29 ++ .../type/dashboard-model.interface.ts | 28 ++ .../app/dashboard/type/resource-descriptor.ts | 50 ++ .../src/app/dashboard/type/search-result.ts | 4 +- .../src/app/dashboard/type/type-predicates.ts | 5 + .../app/hub/component/hub.component.spec.ts | 1 + frontend/src/app/hub/service/hub.service.ts | 1 + 40 files changed, 2377 insertions(+), 215 deletions(-) create mode 100644 frontend/src/app/common/type/model.ts create mode 100644 frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.html create mode 100644 frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.scss create mode 100644 frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.spec.ts create mode 100644 frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts create mode 100644 frontend/src/app/dashboard/component/user/user-model/user-model.component.html create mode 100644 frontend/src/app/dashboard/component/user/user-model/user-model.component.scss create mode 100644 frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts create mode 100644 frontend/src/app/dashboard/component/user/user-model/user-model.component.ts create mode 100644 frontend/src/app/dashboard/service/user/model/model.service.spec.ts create mode 100644 frontend/src/app/dashboard/service/user/model/model.service.ts create mode 100644 frontend/src/app/dashboard/service/user/model/stub-model.service.ts create mode 100644 frontend/src/app/dashboard/service/user/resource-registry/dataset-resource.descriptor.ts create mode 100644 frontend/src/app/dashboard/service/user/resource-registry/file-resource.descriptor.ts create mode 100644 frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts create mode 100644 frontend/src/app/dashboard/service/user/resource-registry/project-resource.descriptor.ts create mode 100644 frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts create mode 100644 frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.ts create mode 100644 frontend/src/app/dashboard/service/user/resource-registry/workflow-resource.descriptor.ts create mode 100644 frontend/src/app/dashboard/type/dashboard-model.interface.ts create mode 100644 frontend/src/app/dashboard/type/resource-descriptor.ts diff --git a/frontend/proxy.config.json b/frontend/proxy.config.json index bc33371071e..7801e0c256f 100755 --- a/frontend/proxy.config.json +++ b/frontend/proxy.config.json @@ -35,6 +35,11 @@ "secure": false, "changeOrigin": true }, + "/api/model/**": { + "target": "http://localhost:9092", + "secure": false, + "changeOrigin": true + }, "/api/access/dataset/**": { "target": "http://localhost:9092", "secure": false, diff --git a/frontend/src/app/app-routing.constant.ts b/frontend/src/app/app-routing.constant.ts index 53cc71d79cc..3882984dd9b 100644 --- a/frontend/src/app/app-routing.constant.ts +++ b/frontend/src/app/app-routing.constant.ts @@ -35,6 +35,7 @@ export const USER_WORKSPACE = `${USER}/workflow`; export const USER_WORKFLOW = `${USER}/workflow`; export const USER_DATASET = `${USER}/dataset`; export const USER_DATASET_CREATE = `${USER_DATASET}/create`; +export const USER_MODEL = `${USER}/model`; export const USER_COMPUTING_UNIT = `${USER}/compute`; export const USER_PYTHON_VENV = `${USER}/python-venv`; export const USER_QUOTA = `${USER}/quota`; diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index e255fe16710..6acbccebf1e 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -39,6 +39,7 @@ import { FeedbackComponent } from "./dashboard/component/user/feedback/feedback. import { AdminGmailComponent } from "./dashboard/component/admin/gmail/admin-gmail.component"; import { DatasetDetailComponent } from "./dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component"; import { UserDatasetComponent } from "./dashboard/component/user/user-dataset/user-dataset.component"; +import { UserModelComponent } from "./dashboard/component/user/user-model/user-model.component"; import { HubWorkflowDetailComponent } from "./hub/component/workflow/detail/hub-workflow-detail.component"; import { LandingPageComponent } from "./hub/component/landing-page/landing-page.component"; import { USER_WORKFLOW } from "./app-routing.constant"; @@ -135,6 +136,10 @@ routes.push({ path: "dataset/create", component: DatasetDetailComponent, }, + { + path: "model", + component: UserModelComponent, + }, { path: "compute", component: UserComputingUnitComponent, diff --git a/frontend/src/app/common/type/gui-config.ts b/frontend/src/app/common/type/gui-config.ts index d9750d7d3b1..cf36f046eed 100644 --- a/frontend/src/app/common/type/gui-config.ts +++ b/frontend/src/app/common/type/gui-config.ts @@ -57,6 +57,7 @@ export interface SidebarTabs { workflows_enabled: boolean; compute_enabled: boolean; datasets_enabled: boolean; + models_enabled: boolean; quota_enabled: boolean; forum_enabled: boolean; about_enabled: boolean; diff --git a/frontend/src/app/common/type/model.ts b/frontend/src/app/common/type/model.ts new file mode 100644 index 00000000000..05e979249d9 --- /dev/null +++ b/frontend/src/app/common/type/model.ts @@ -0,0 +1,32 @@ +/** + * 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. + */ + +export interface Model { + mid: number | undefined; + ownerUid: number | undefined; + name: string; + repositoryName: string | undefined; + isPublic: boolean; + isDownloadable: boolean; + description: string; + creationTime: number | undefined; + coverImage: string | undefined; + framework: string | undefined; + format: string | undefined; +} diff --git a/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.html b/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.html index fd2fea7f753..2bfc1daaf00 100644 --- a/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.html +++ b/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.html @@ -190,6 +190,15 @@

General Settings

+
+ Models + + +
+
Compute { "projects_enabled", "workflows_enabled", "datasets_enabled", + "models_enabled", "compute_enabled", "quota_enabled", "forum_enabled", @@ -664,7 +665,10 @@ describe("AdminSettingsComponent wiring", () => { component.sidebarTabs.your_work_enabled = false; fixture.detectChanges(); - [0, 4, 11].forEach(i => expect(switches()[i].componentInstance.nzDisabled).toBeFalsy()); + // Indexed by key, not position, so adding a tab does not silently retarget this. + (["hub_enabled", "your_work_enabled", "about_enabled"] as const).forEach(key => + expect(switches()[SWITCH_KEYS.indexOf(key)].componentInstance.nzDisabled).toBeFalsy() + ); }); }); diff --git a/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.ts b/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.ts index 44b8fad73d5..100ba45d036 100644 --- a/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.ts +++ b/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.ts @@ -71,6 +71,7 @@ export class AdminSettingsComponent implements OnInit { workflows_enabled: false, compute_enabled: false, datasets_enabled: false, + models_enabled: false, quota_enabled: false, forum_enabled: false, about_enabled: false, diff --git a/frontend/src/app/dashboard/component/dashboard.component.html b/frontend/src/app/dashboard/component/dashboard.component.html index ca30e6df04a..1bb5a0667c7 100644 --- a/frontend/src/app/dashboard/component/dashboard.component.html +++ b/frontend/src/app/dashboard/component/dashboard.component.html @@ -97,6 +97,18 @@ nzType="database"> Datasets +
  • + + Models +
  • { projects_enabled: true, workflows_enabled: true, datasets_enabled: true, + models_enabled: true, compute_enabled: true, quota_enabled: true, forum_enabled: true, @@ -294,8 +295,9 @@ describe("DashboardComponent", () => { }; fixture.detectChanges(); - // 7 "Your Work" links (incl. Python Venvs) + 4 admin links + 1 about link + 1 feedback link = 13 - expect(fixture.debugElement.queryAll(By.directive(RouterLink)).length).toBe(13); + // 8 "Your Work" links (incl. Python Venvs and Models) + 4 admin links + 1 about link + // + 1 feedback link = 14 + expect(fixture.debugElement.queryAll(By.directive(RouterLink)).length).toBe(14); }); describe("sidebar active-route highlighting (#3490)", () => { @@ -308,6 +310,7 @@ describe("DashboardComponent", () => { projects_enabled: true, workflows_enabled: true, datasets_enabled: true, + models_enabled: true, compute_enabled: true, quota_enabled: true, forum_enabled: true, diff --git a/frontend/src/app/dashboard/component/dashboard.component.ts b/frontend/src/app/dashboard/component/dashboard.component.ts index 7da993dace4..1c1fb30c82a 100644 --- a/frontend/src/app/dashboard/component/dashboard.component.ts +++ b/frontend/src/app/dashboard/component/dashboard.component.ts @@ -35,6 +35,7 @@ import { ADMIN_USER, USER_COMPUTING_UNIT, USER_DATASET, + USER_MODEL, USER_DISCUSSION, USER_PROJECT, USER_PYTHON_VENV, @@ -106,6 +107,7 @@ export class DashboardComponent implements OnInit { projects_enabled: false, workflows_enabled: false, datasets_enabled: false, + models_enabled: false, compute_enabled: false, quota_enabled: false, forum_enabled: false, @@ -116,6 +118,7 @@ export class DashboardComponent implements OnInit { protected readonly USER_PROJECT = USER_PROJECT; protected readonly USER_WORKFLOW = USER_WORKFLOW; protected readonly USER_DATASET = USER_DATASET; + protected readonly USER_MODEL = USER_MODEL; protected readonly USER_COMPUTING_UNIT = USER_COMPUTING_UNIT; protected readonly USER_PYTHON_VENV = USER_PYTHON_VENV; protected readonly USER_QUOTA = USER_QUOTA; diff --git a/frontend/src/app/dashboard/component/user/filters/filters.component.ts b/frontend/src/app/dashboard/component/user/filters/filters.component.ts index 824ace5d440..cb1b19ba1dc 100644 --- a/frontend/src/app/dashboard/component/user/filters/filters.component.ts +++ b/frontend/src/app/dashboard/component/user/filters/filters.component.ts @@ -24,8 +24,7 @@ import { Observable, of } from "rxjs"; import { DashboardProject } from "../../../type/dashboard-project.interface"; import { NotificationService } from "src/app/common/service/notification/notification.service"; import { UserProjectService } from "../../../service/user/project/user-project.service"; -import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service"; -import { DatasetService } from "../../../service/user/dataset/dataset.service"; +import { ResourceRegistryService } from "../../../service/user/resource-registry/resource-registry.service"; import { EntityType } from "../../../../hub/service/hub.service"; import { SearchFilterParameters } from "../../../type/search-filter-parameters"; import { UserService } from "../../../../common/service/user/user.service"; @@ -124,20 +123,13 @@ export class FiltersComponent implements OnInit { private operatorMetadataService: OperatorMetadataService, private notificationService: NotificationService, private userProjectService: UserProjectService, - private workflowPersistService: WorkflowPersistService, - private datasetService: DatasetService, + private resourceRegistry: ResourceRegistryService, private cdr: ChangeDetectorRef ) {} - /** Only workflows expose an id-listing endpoint. */ + /** The id dropdown is hidden for kinds with no id-listing endpoint. */ public get hasIdFilter(): boolean { - return this.entityType === EntityType.Workflow; - } - - private retrieveOwners(): Observable { - return this.entityType === EntityType.Dataset - ? this.datasetService.retrieveOwners() - : this.workflowPersistService.retrieveOwners(); + return this.resourceRegistry.get(this.entityType).retrieveIds !== undefined; } ngOnInit(): void { @@ -197,24 +189,24 @@ export class FiltersComponent implements OnInit { this.operatorGroups = opdata.groups.map(group => group.groupName); }); if (this.isLogin) { - this.retrieveOwners() + const descriptor = this.resourceRegistry.get(this.entityType); + descriptor + .retrieveOwners?.() .pipe(untilDestroyed(this)) .subscribe(list_of_owners => { this.owners = list_of_owners.map(i => ({ userName: i, checked: false })); }); - if (this.hasIdFilter) { - this.workflowPersistService - .retrieveWorkflowIDs() - .pipe(untilDestroyed(this)) - .subscribe(wids => { - this.wids = wids.map(wid => { - return { - id: wid.toString(), - checked: false, - }; - }); + descriptor + .retrieveIds?.() + .pipe(untilDestroyed(this)) + .subscribe(ids => { + this.wids = ids.map(id => { + return { + id: id.toString(), + checked: false, + }; }); - } + }); } } diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts index c890bc4a25d..7061cd9050f 100644 --- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts +++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts @@ -42,32 +42,19 @@ import { NzModalRef, NzModalService } from "ng-zorro-antd/modal"; import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry"; import { ShareAccessComponent } from "../../share-access/share-access.component"; import { UserAvatarComponent } from "../../user-avatar/user-avatar.component"; -import { - DEFAULT_WORKFLOW_NAME, - WorkflowPersistService, -} from "src/app/common/service/workflow-persist/workflow-persist.service"; +import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service"; import { firstValueFrom } from "rxjs"; import { HubWorkflowDetailComponent } from "../../../../../hub/component/workflow/detail/hub-workflow-detail.component"; import { ActionType, HubService } from "../../../../../hub/service/hub.service"; import { DownloadService } from "src/app/dashboard/service/user/download/download.service"; import { formatSize } from "src/app/common/util/size-formatter.util"; import { formatRelativeTime, formatCount } from "src/app/common/util/format.util"; -import { - DatasetService, - DEFAULT_DATASET_NAME, - validateDatasetName, -} from "../../../../service/user/dataset/dataset.service"; +import { DatasetService } from "../../../../service/user/dataset/dataset.service"; import { NotificationService } from "../../../../../common/service/notification/notification.service"; import { extractErrorMessage } from "../../../../../common/util/error"; import { WorkflowCoverService } from "../../../../service/user/workflow-cover/workflow-cover.service"; -import { - HUB_DATASET_RESULT_DETAIL, - HUB_WORKFLOW_RESULT_DETAIL, - USER_DATASET, - USER_PROJECT, - USER_WORKSPACE, -} from "../../../../../app-routing.constant"; import { isDefined } from "../../../../../common/util/predicate"; +import { ResourceRegistryService } from "../../../../service/user/resource-registry/resource-registry.service"; @UntilDestroy() @Component({ @@ -88,7 +75,6 @@ import { isDefined } from "../../../../../common/util/predicate"; ], }) export class CardItemComponent implements OnChanges { - private owners: number[] = []; public originalName: string = ""; public originalDescription: string | undefined = undefined; public disableDelete: boolean = false; @@ -142,7 +128,8 @@ export class CardItemComponent implements OnChanges { private downloadService: DownloadService, private cdr: ChangeDetectorRef, private notificationService: NotificationService, - private workflowCoverService: WorkflowCoverService + private workflowCoverService: WorkflowCoverService, + private resourceRegistry: ResourceRegistryService ) {} get hasCustomImage(): boolean { @@ -201,41 +188,19 @@ export class CardItemComponent implements OnChanges { initializeEntry() { this.coverImageSrc = CardItemComponent.DEFAULT_PREVIEW_IMAGE; this.customImage = undefined; + const descriptor = this.resourceRegistry.get(this.entry.type); + this.iconType = descriptor.iconType; + this.disableDelete = !descriptor.isOwner(this.entry); + this.entryLink = this.resourceRegistry.entryLink(this.entry, this.currentUid); + if (descriptor.hasSize && typeof this.entry.id === "number") { + this.size = this.entry.size; + } + // Covers are still per-type; they move onto the descriptor with the rest of the sharing surface. if (this.entry.type === "workflow") { - if (typeof this.entry.id === "number") { - this.disableDelete = !this.entry.workflow.isOwner; - this.owners = this.entry.accessibleUserIds; - if (this.currentUid !== undefined && this.owners.includes(this.currentUid)) { - this.entryLink = [USER_WORKSPACE, String(this.entry.id)]; - } else { - this.entryLink = [HUB_WORKFLOW_RESULT_DETAIL, String(this.entry.id)]; - } - this.size = this.entry.size; - this.coverImageSrc = this.entry.coverImageUrl ?? CardItemComponent.DEFAULT_PREVIEW_IMAGE; - this.customImage = this.entry.coverImageUrl ?? undefined; - } - this.iconType = "project"; - } else if (this.entry.type === "project") { - this.entryLink = [USER_PROJECT, String(this.entry.id)]; - this.iconType = "container"; - } else if (this.entry.type === "dataset") { - if (typeof this.entry.id === "number") { - this.disableDelete = !this.entry.dataset.isOwner; - this.owners = this.entry.accessibleUserIds; - if (this.currentUid !== undefined && this.owners.includes(this.currentUid)) { - this.entryLink = [USER_DATASET, String(this.entry.id)]; - } else { - this.entryLink = [HUB_DATASET_RESULT_DETAIL, String(this.entry.id)]; - } - this.iconType = "database"; - this.size = this.entry.size; - this.loadDatasetCover(this.entry.id); - } - } else if (this.entry.type === "file") { - // not sure where to redirect - this.iconType = "folder-open"; - } else { - throw new Error("Unexpected type in DashboardEntry."); + this.coverImageSrc = this.entry.coverImageUrl ?? CardItemComponent.DEFAULT_PREVIEW_IMAGE; + this.customImage = this.entry.coverImageUrl ?? undefined; + } else if (this.entry.type === "dataset" && typeof this.entry.id === "number") { + this.loadDatasetCover(this.entry.id); } this.likeCount = this.entry.likeCount; this.viewCount = this.entry.viewCount; @@ -399,33 +364,21 @@ export class CardItemComponent implements OnChanges { this.editingName = false; return; } - const newName = this.entry.type === "workflow" ? name || DEFAULT_WORKFLOW_NAME : name || DEFAULT_DATASET_NAME; - - if (this.entry.type === "dataset") { - const nameError = validateDatasetName(newName); - if (nameError) { - this.notificationService.error(nameError); - this.entry.name = this.originalName; - this.editingName = false; - return; - } + const descriptor = this.resourceRegistry.get(this.entry.type); + if (!descriptor.rename) { + return; } + const newName = name || descriptor.defaultName || ""; - if (this.entry.type === "workflow") { - this.updateProperty( - this.workflowPersistService.updateWorkflowName.bind(this.workflowPersistService), - "name", - newName, - this.originalName - ); - } else if (this.entry.type === "dataset") { - this.updateProperty( - this.datasetService.updateDatasetName.bind(this.datasetService), - "name", - newName, - this.originalName - ); + const nameError = descriptor.validateName?.(newName); + if (nameError) { + this.notificationService.error(nameError); + this.entry.name = this.originalName; + this.editingName = false; + return; } + + this.updateProperty(descriptor.rename, "name", newName, this.originalName); } public confirmUpdateCustomDescription(description: string | undefined): void { @@ -433,23 +386,11 @@ export class CardItemComponent implements OnChanges { this.editingDescription = false; return; } - const updatedDescription = description ?? ""; - - if (this.entry.type === "workflow") { - this.updateProperty( - this.workflowPersistService.updateWorkflowDescription.bind(this.workflowPersistService), - "description", - updatedDescription, - this.originalDescription - ); - } else if (this.entry.type === "dataset") { - this.updateProperty( - this.datasetService.updateDatasetDescription.bind(this.datasetService), - "description", - updatedDescription, - this.originalDescription - ); + const descriptor = this.resourceRegistry.get(this.entry.type); + if (!descriptor.updateDescription) { + return; } + this.updateProperty(descriptor.updateDescription, "description", description ?? "", this.originalDescription); } openDetailModal(wid: number | undefined): void { diff --git a/frontend/src/app/dashboard/component/user/list-item/list-item.component.spec.ts b/frontend/src/app/dashboard/component/user/list-item/list-item.component.spec.ts index 9c6211ef0e7..eb38647b7fe 100644 --- a/frontend/src/app/dashboard/component/user/list-item/list-item.component.spec.ts +++ b/frontend/src/app/dashboard/component/user/list-item/list-item.component.spec.ts @@ -406,12 +406,13 @@ describe("ListItemComponent", () => { expect(() => feed(entryOf({ type: "quantum" }))).toThrowError("Unexpected type in DashboardEntry."); }); - it("leaves a dataset without a numeric id unrouted", () => { - // The dataset arm reads isOwner and the link only for a persisted entry. - feed(entryOf({ type: "dataset", id: undefined, dataset: { isOwner: false } })); + it("leaves a dataset without a numeric id unrouted but still badged", () => { + // Routing and size need a persisted entry; the icon is a property of the kind, not the row. + feed(entryOf({ type: "dataset", id: undefined, size: 99, dataset: { isOwner: false } })); expect(component.entryLink).toEqual([]); - expect(component.iconType).not.toBe("database"); + expect(component.size).toBe(0); + expect(component.iconType).toBe("database"); }); it("reduces a description to a plain preview, and blanks an empty one", () => { diff --git a/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts b/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts index 5291b79b1d0..d1419115966 100644 --- a/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts +++ b/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts @@ -33,31 +33,18 @@ import { NzModalRef, NzModalService } from "ng-zorro-antd/modal"; import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry"; import { MarkdownDescriptionComponent } from "../markdown-description/markdown-description.component"; import { ShareAccessComponent } from "../share-access/share-access.component"; -import { - DEFAULT_WORKFLOW_NAME, - WorkflowPersistService, -} from "src/app/common/service/workflow-persist/workflow-persist.service"; +import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service"; import { firstValueFrom } from "rxjs"; import { HubWorkflowDetailComponent } from "../../../../hub/component/workflow/detail/hub-workflow-detail.component"; import { ActionType, HubService } from "../../../../hub/service/hub.service"; import { DownloadService } from "src/app/dashboard/service/user/download/download.service"; import { formatSize } from "src/app/common/util/size-formatter.util"; import { formatCount, formatRelativeTime } from "src/app/common/util/format.util"; -import { - DatasetService, - DEFAULT_DATASET_NAME, - validateDatasetName, -} from "../../../service/user/dataset/dataset.service"; +import { DatasetService } from "../../../service/user/dataset/dataset.service"; import { NotificationService } from "../../../../common/service/notification/notification.service"; import { extractErrorMessage } from "../../../../common/util/error"; -import { - HUB_DATASET_RESULT_DETAIL, - HUB_WORKFLOW_RESULT_DETAIL, - USER_DATASET, - USER_PROJECT, - USER_WORKSPACE, -} from "../../../../app-routing.constant"; import { isDefined } from "../../../../common/util/predicate"; +import { ResourceRegistryService } from "../../../service/user/resource-registry/resource-registry.service"; import { NzCardComponent } from "ng-zorro-antd/card"; import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid"; import { RouterLink } from "@angular/router"; @@ -94,7 +81,6 @@ import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm"; ], }) export class ListItemComponent implements OnChanges { - private owners: number[] = []; public originalName: string = ""; public originalDescription: string | undefined = undefined; public disableDelete: boolean = false; @@ -141,42 +127,17 @@ export class ListItemComponent implements OnChanges { private hubService: HubService, private downloadService: DownloadService, private cdr: ChangeDetectorRef, - private notificationService: NotificationService + private notificationService: NotificationService, + private resourceRegistry: ResourceRegistryService ) {} initializeEntry() { - if (this.entry.type === "workflow") { - if (typeof this.entry.id === "number") { - this.disableDelete = !this.entry.workflow.isOwner; - this.owners = this.entry.accessibleUserIds; - if (this.currentUid !== undefined && this.owners.includes(this.currentUid)) { - this.entryLink = [USER_WORKSPACE, String(this.entry.id)]; - } else { - this.entryLink = [HUB_WORKFLOW_RESULT_DETAIL, String(this.entry.id)]; - } - this.size = this.entry.size; - } - this.iconType = "project"; - } else if (this.entry.type === "project") { - this.entryLink = [USER_PROJECT, String(this.entry.id)]; - this.iconType = "container"; - } else if (this.entry.type === "dataset") { - if (typeof this.entry.id === "number") { - this.disableDelete = !this.entry.dataset.isOwner; - this.owners = this.entry.accessibleUserIds; - if (this.currentUid !== undefined && this.owners.includes(this.currentUid)) { - this.entryLink = [USER_DATASET, String(this.entry.id)]; - } else { - this.entryLink = [HUB_DATASET_RESULT_DETAIL, String(this.entry.id)]; - } - this.iconType = "database"; - this.size = this.entry.size; - } - } else if (this.entry.type === "file") { - // not sure where to redirect - this.iconType = "folder-open"; - } else { - throw new Error("Unexpected type in DashboardEntry."); + const descriptor = this.resourceRegistry.get(this.entry.type); + this.iconType = descriptor.iconType; + this.disableDelete = !descriptor.isOwner(this.entry); + this.entryLink = this.resourceRegistry.entryLink(this.entry, this.currentUid); + if (descriptor.hasSize && typeof this.entry.id === "number") { + this.size = this.entry.size; } this.likeCount = this.entry.likeCount; this.viewCount = this.entry.viewCount; @@ -339,53 +300,29 @@ export class ListItemComponent implements OnChanges { } public confirmUpdateCustomName(name: string): void { - const newName = this.entry.type === "workflow" ? name || DEFAULT_WORKFLOW_NAME : name || DEFAULT_DATASET_NAME; - - if (this.entry.type === "dataset") { - const nameError = validateDatasetName(newName); - if (nameError) { - this.notificationService.error(nameError); - this.entry.name = this.originalName; - this.editingName = false; - return; - } + const descriptor = this.resourceRegistry.get(this.entry.type); + if (!descriptor.rename) { + return; } + const newName = name || descriptor.defaultName || ""; - if (this.entry.type === "workflow") { - this.updateProperty( - this.workflowPersistService.updateWorkflowName.bind(this.workflowPersistService), - "name", - newName, - this.originalName - ); - } else if (this.entry.type === "dataset") { - this.updateProperty( - this.datasetService.updateDatasetName.bind(this.datasetService), - "name", - newName, - this.originalName - ); + const nameError = descriptor.validateName?.(newName); + if (nameError) { + this.notificationService.error(nameError); + this.entry.name = this.originalName; + this.editingName = false; + return; } + + this.updateProperty(descriptor.rename, "name", newName, this.originalName); } public confirmUpdateCustomDescription(description: string | undefined): void { - const updatedDescription = description ?? ""; - - if (this.entry.type === "workflow") { - this.updateProperty( - this.workflowPersistService.updateWorkflowDescription.bind(this.workflowPersistService), - "description", - updatedDescription, - this.originalDescription - ); - } else if (this.entry.type === "dataset") { - this.updateProperty( - this.datasetService.updateDatasetDescription.bind(this.datasetService), - "description", - updatedDescription, - this.originalDescription - ); + const descriptor = this.resourceRegistry.get(this.entry.type); + if (!descriptor.updateDescription) { + return; } + this.updateProperty(descriptor.updateDescription, "description", description ?? "", this.originalDescription); } formatRelativeTime = formatRelativeTime; diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.html b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.html new file mode 100644 index 00000000000..01e9ba57224 --- /dev/null +++ b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.html @@ -0,0 +1,70 @@ + + +
    + +
    + +
    +
    + + +
    +
    + + +
    +
    +
    + + + + +     +
    diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.scss b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.scss new file mode 100644 index 00000000000..50145f32930 --- /dev/null +++ b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.scss @@ -0,0 +1,75 @@ +/** + * 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. + */ +// Forked from user-dataset-version-creator.component.scss, dropping the uploader selectors. +// Convergence with the dataset creator is tracked under #6494. + +.texera-user-model-creator-form { + width: 80%; + margin: auto; +} + +.create-btn { + background-color: #ffffff; + color: #007bff; + border: 1px solid lightgray; + padding: 5px 20px; + cursor: pointer; + margin-left: 15%; + margin-right: 5%; + width: 30%; + text-align: center; + &:hover { + background-color: #0069d9; + color: #ffffff; + } +} + +.cancel-btn { + background-color: #ffffff; + color: #ff0000; + border: 1px solid lightgray; + padding: 5px 20px; + cursor: pointer; + margin-right: 15%; + margin-left: 5%; + margin-top: 10%; + width: 30%; + text-align: center; + &:hover { + background-color: #cc0000; + color: #ffffff; + } +} + +.model-toggles { + margin-top: 16px; + margin-bottom: 16px; +} + +.toggle-item { + display: flex; + align-items: center; + margin-bottom: 12px; + + label { + margin-right: 12px; + min-width: 80px; + font-weight: 500; + } +} diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.spec.ts b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.spec.ts new file mode 100644 index 00000000000..1ae955ec021 --- /dev/null +++ b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.spec.ts @@ -0,0 +1,188 @@ +/** + * 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 } from "@angular/core"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { FieldType, FieldTypeConfig, FormlyModule } from "@ngx-formly/core"; +import { HttpClientTestingModule } from "@angular/common/http/testing"; +import { NzModalRef } from "ng-zorro-antd/modal"; +import { of, throwError } from "rxjs"; + +import { sanitizeModelName, UserModelCreatorComponent } from "./user-model-creator.component"; +import { MODEL_FORMATS, MODEL_FRAMEWORKS, ModelService } from "../../../../service/user/model/model.service"; +import { NotificationService } from "../../../../../common/service/notification/notification.service"; +import { commonTestProviders } from "../../../../../common/testing/test-utils"; + +@Component({ template: "", standalone: true }) +class StubFormlyFieldComponent extends FieldType {} + +describe("sanitizeModelName", () => { + it("keeps underscores and hyphens, unlike the dataset sanitizer", () => { + // MODEL_NAME_PATTERN allows _ and -, so collapsing them would reject valid names. + expect(sanitizeModelName("churn_predictor-v2")).toBe("churn_predictor-v2"); + }); + + it("lower-cases and replaces disallowed runs with a single hyphen", () => { + expect(sanitizeModelName("My Model!!Name")).toBe("my-model-name"); + }); + + it("trims leading whitespace", () => { + expect(sanitizeModelName(" spaced")).toBe("spaced"); + }); +}); + +describe("UserModelCreatorComponent", () => { + let modalClose: ReturnType; + let createModel: ReturnType; + let notifySuccess: ReturnType; + let notifyError: ReturnType; + + async function createFixture(): Promise> { + modalClose = vi.fn(); + createModel = vi.fn(); + notifySuccess = vi.fn(); + notifyError = vi.fn(); + + await TestBed.configureTestingModule({ + imports: [ + UserModelCreatorComponent, + BrowserAnimationsModule, + FormsModule, + ReactiveFormsModule, + FormlyModule.forRoot({ + types: [ + { name: "input", component: StubFormlyFieldComponent }, + { name: "select", component: StubFormlyFieldComponent }, + ], + }), + HttpClientTestingModule, + ], + providers: [ + { provide: NzModalRef, useValue: { close: modalClose } }, + { provide: ModelService, useValue: { createModel } }, + { provide: NotificationService, useValue: { success: notifySuccess, error: notifyError } }, + ...commonTestProviders, + ], + }).compileComponents(); + + return TestBed.createComponent(UserModelCreatorComponent); + } + + it("renders the four create fields, with no version-description field", async () => { + const fixture = await createFixture(); + fixture.detectChanges(); + + // Create-only: the dataset creator's dual-purpose version branch is deliberately not forked. + expect(fixture.componentInstance.fields.map(f => f.key)).toEqual(["name", "description", "framework", "format"]); + expect(fixture.componentInstance.form.contains("name")).toBe(true); + }); + + it("offers exactly the framework and format values the backend accepts", async () => { + const fixture = await createFixture(); + fixture.detectChanges(); + const optionsFor = (key: string) => + ( + fixture.componentInstance.fields.find(f => f.key === key)?.templateOptions?.options as Array<{ value: string }> + ).map(o => o.value); + + // A drift here becomes a 400 from ModelResource's whitelist at create time. + expect(optionsFor("framework")).toEqual([...MODEL_FRAMEWORKS]); + expect(optionsFor("format")).toEqual([...MODEL_FORMATS]); + }); + + it("does nothing when the required name is empty", async () => { + const fixture = await createFixture(); + fixture.detectChanges(); + + fixture.componentInstance.onClickCreate(); + + expect(createModel).not.toHaveBeenCalled(); + expect(modalClose).not.toHaveBeenCalled(); + }); + + it("creates the model with the sanitized name and the toggle values", async () => { + const fixture = await createFixture(); + fixture.detectChanges(); + const component = fixture.componentInstance; + createModel.mockReturnValue(of({ model: { mid: 9 } })); + + component.form.get("name")?.setValue("churn_predictor"); + component.form.get("description")?.setValue("tabular"); + component.form.get("framework")?.setValue("sklearn"); + component.form.get("format")?.setValue("joblib"); + component.onPublicStatusChange(true); + component.onDownloadableStatusChange(true); + + component.onClickCreate(); + + expect(createModel).toHaveBeenCalledWith( + expect.objectContaining({ + name: "churn_predictor", + description: "tabular", + framework: "sklearn", + format: "joblib", + isPublic: true, + isDownloadable: true, + }) + ); + expect(notifySuccess).toHaveBeenCalledWith("Model 'churn_predictor' created successfully."); + expect(modalClose).toHaveBeenCalledWith({ model: { mid: 9 } }); + }); + + it("reports the rename when the entered name had to be sanitized", async () => { + const fixture = await createFixture(); + fixture.detectChanges(); + const component = fixture.componentInstance; + createModel.mockReturnValue(of({ model: { mid: 3 } })); + + component.form.get("name")?.setValue("My Model"); + component.onClickCreate(); + + expect(createModel).toHaveBeenCalledWith(expect.objectContaining({ name: "my-model" })); + expect(notifySuccess).toHaveBeenCalledWith( + "Model 'My Model' was sanitized to 'my-model' and created successfully." + ); + }); + + it("surfaces the server message and closes with null when creation fails", async () => { + const fixture = await createFixture(); + fixture.detectChanges(); + const component = fixture.componentInstance; + createModel.mockReturnValue(throwError(() => ({ error: { message: "name already taken" } }))); + + component.form.get("name")?.setValue("dupe"); + component.onClickCreate(); + + expect(notifyError).toHaveBeenCalledWith("Model dupe creation failed: name already taken"); + expect(modalClose).toHaveBeenCalledWith(null); + expect(component.isCreating).toBe(false); + }); + + it("closes with null on cancel without calling the backend", async () => { + const fixture = await createFixture(); + fixture.detectChanges(); + + fixture.componentInstance.onClickCancel(); + + expect(modalClose).toHaveBeenCalledWith(null); + expect(createModel).not.toHaveBeenCalled(); + }); +}); diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts new file mode 100644 index 00000000000..2da751c0c29 --- /dev/null +++ b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts @@ -0,0 +1,187 @@ +/** + * 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 { FormGroup, FormsModule } from "@angular/forms"; +import { FormlyFieldConfig, FormlyModule } from "@ngx-formly/core"; +import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; +import { HttpErrorResponse } from "@angular/common/http"; +import { NzModalRef } from "ng-zorro-antd/modal"; +import { NzSpinComponent } from "ng-zorro-antd/spin"; +import { NgClass } from "@angular/common"; +import { NzSwitchComponent } from "ng-zorro-antd/switch"; +import { NzButtonComponent } from "ng-zorro-antd/button"; +import { NzWaveDirective } from "ng-zorro-antd/core/wave"; +import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch"; + +import { MODEL_FORMATS, MODEL_FRAMEWORKS, ModelService } from "../../../../service/user/model/model.service"; +import { Model } from "../../../../../common/type/model"; +import { NotificationService } from "../../../../../common/service/notification/notification.service"; + +export function sanitizeModelName(name: string): string { + return name + .trimStart() + .replace(/[^a-zA-Z0-9_-]+/g, "-") + .toLowerCase(); +} + +@UntilDestroy() +@Component({ + selector: "texera-user-model-creator", + templateUrl: "./user-model-creator.component.html", + styleUrls: ["./user-model-creator.component.scss"], + imports: [ + NzSpinComponent, + NgClass, + FormlyModule, + NzSwitchComponent, + FormsModule, + NzButtonComponent, + NzWaveDirective, + ɵNzTransitionPatchDirective, + ], +}) +export class UserModelCreatorComponent implements OnInit { + public form: FormGroup = new FormGroup({}); + formModel: any = {}; + fields: FormlyFieldConfig[] = []; + + isModelPublic: boolean = false; + isModelDownloadable: boolean = false; + isModelNameSanitized: boolean = false; + isCreating: boolean = false; + + constructor( + private modalRef: NzModalRef, + private modelService: ModelService, + private notificationService: NotificationService + ) {} + + ngOnInit() { + this.setFormFields(); + this.isModelNameSanitized = false; + } + + private setFormFields() { + this.fields = [ + { + key: "name", + type: "input", + templateOptions: { + label: "Name", + required: true, + }, + }, + { + key: "description", + type: "input", + defaultValue: "", + templateOptions: { + label: "Description", + }, + }, + // Options mirror ModelResource's whitelists, which reject anything else with a 400. + { + key: "framework", + type: "select", + defaultValue: MODEL_FRAMEWORKS[0], + templateOptions: { + label: "Framework", + required: true, + options: MODEL_FRAMEWORKS.map(value => ({ label: value, value })), + }, + }, + { + key: "format", + type: "select", + defaultValue: MODEL_FORMATS[0], + templateOptions: { + label: "Format", + required: true, + options: MODEL_FORMATS.map(value => ({ label: value, value })), + }, + }, + ]; + } + + private triggerValidation() { + Object.keys(this.form.controls).forEach(field => { + this.form.get(field)?.markAsTouched({ onlySelf: true }); + }); + } + + onClickCancel() { + this.modalRef.close(null); + } + + onClickCreate() { + this.triggerValidation(); + + if (!this.form.valid) { + return; + } + + const originalName = this.form.get("name")?.value as string; + const sanitizedName = sanitizeModelName(originalName); + this.isModelNameSanitized = sanitizedName !== originalName; + + const model: Model = { + name: sanitizedName, + description: this.form.get("description")?.value ?? "", + framework: this.form.get("framework")?.value, + format: this.form.get("format")?.value, + isPublic: this.isModelPublic, + isDownloadable: this.isModelDownloadable, + mid: undefined, + ownerUid: undefined, + repositoryName: undefined, + creationTime: undefined, + coverImage: undefined, + }; + + this.isCreating = true; + this.modelService + .createModel(model) + .pipe(untilDestroyed(this)) + .subscribe({ + next: res => { + const msg = this.isModelNameSanitized + ? `Model '${originalName}' was sanitized to '${sanitizedName}' and created successfully.` + : `Model '${sanitizedName}' created successfully.`; + this.notificationService.success(msg); + this.isCreating = false; + this.modalRef.close(res); + }, + error: (res: unknown) => { + const err = res as HttpErrorResponse; + this.notificationService.error(`Model ${sanitizedName} creation failed: ${err.error?.message}`); + this.isCreating = false; + this.modalRef.close(null); + }, + }); + } + + onPublicStatusChange(newValue: boolean): void { + this.isModelPublic = newValue; + } + + onDownloadableStatusChange(newValue: boolean): void { + this.isModelDownloadable = newValue; + } +} diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.html b/frontend/src/app/dashboard/component/user/user-model/user-model.component.html new file mode 100644 index 00000000000..0c8ff840106 --- /dev/null +++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.html @@ -0,0 +1,101 @@ + + +
    + +

    Models

    +
    + + + + + + +
    +     + +
    + + +
    + + + + + + + +
    diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.scss b/frontend/src/app/dashboard/component/user/user-model/user-model.component.scss new file mode 100644 index 00000000000..4b699f09198 --- /dev/null +++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.scss @@ -0,0 +1,22 @@ +/** + * 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. + */ + +@use "../../dashboard.component" as *; +@use "../../section-style" as *; +@use "../../button-style" as *; diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts b/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts new file mode 100644 index 00000000000..3e105115148 --- /dev/null +++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts @@ -0,0 +1,438 @@ +/** + * 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 { of, Subject, throwError } from "rxjs"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { By } from "@angular/platform-browser"; +import { provideRouter } from "@angular/router"; +import { NzModalService } from "ng-zorro-antd/modal"; +import { en_US, NZ_I18N } from "ng-zorro-antd/i18n"; +import { commonTestImports, commonTestProviders } from "../../../../common/testing/test-utils"; +import { SearchResultsComponent } from "../search-results/search-results.component"; +import { NgModel } from "@angular/forms"; +import { UserService } from "../../../../common/service/user/user.service"; +import { StubUserService } from "../../../../common/service/user/stub-user.service"; +import { SearchService } from "../../../service/user/search.service"; +import { ModelService } from "../../../service/user/model/model.service"; +import { DashboardEntry } from "../../../type/dashboard-entry"; +import { SortMethod } from "../../../type/sort-method"; +import { EntityType } from "../../../../hub/service/hub.service"; +import { USER_MODEL } from "../../../../app-routing.constant"; +import { User } from "../../../../common/type/user"; +import { UserModelComponent } from "./user-model.component"; +import { UserModelCreatorComponent } from "./user-model-creator/user-model-creator.component"; + +type LoadMoreFn = (start: number, count: number) => Promise<{ entries: any[]; more: boolean }>; + +describe("UserModelComponent", () => { + let component: UserModelComponent; + + let userChangedSubject: Subject; + let isLoginSpy: ReturnType; + let getCurrentUserSpy: ReturnType; + + let modalServiceMock: { create: ReturnType }; + let routerMock: { navigate: ReturnType }; + let searchServiceMock: { getUserInfo: ReturnType }; + let modelServiceMock: { + deleteModel: ReturnType; + retrieveAccessibleModels: ReturnType; + }; + + let searchResultsStub: any; + let capturedLoadMoreFn: LoadMoreFn | null; + let modalAfterClose: Subject; + + const buildEntry = (mid: number | undefined, name = `model-${mid}`) => + ({ + type: EntityType.Model, + model: { model: { mid, name } }, + }) as unknown as DashboardEntry; + + /** A /model/list row. */ + const listedModel = (mid: number, overrides: Partial> = {}): any => ({ + isOwner: true, + ownerEmail: "owner@example.com", + accessPrivilege: "WRITE", + size: 0, + ...overrides, + model: { + mid, + ownerUid: 1, + name: `model-${mid}`, + description: "", + framework: "pytorch", + format: "torchscript", + creationTime: mid, + isPublic: false, + isDownloadable: false, + repositoryName: undefined, + coverImage: undefined, + ...((overrides["model"] as object) ?? {}), + }, + }); + + beforeEach(() => { + userChangedSubject = new Subject(); + isLoginSpy = vi.fn(() => true); + getCurrentUserSpy = vi.fn(() => ({ uid: 42 }) as User); + + const userServiceMock = { + userChanged: () => userChangedSubject.asObservable(), + isLogin: isLoginSpy, + getCurrentUser: getCurrentUserSpy, + }; + + modalAfterClose = new Subject(); + modalServiceMock = { create: vi.fn(() => ({ afterClose: modalAfterClose.asObservable() })) }; + routerMock = { navigate: vi.fn() }; + searchServiceMock = { getUserInfo: vi.fn(() => of({})) }; + modelServiceMock = { + deleteModel: vi.fn(() => of({} as Response)), + retrieveAccessibleModels: vi.fn(() => of([])), + }; + + component = new UserModelComponent( + modalServiceMock as any, + userServiceMock as any, + routerMock as any, + searchServiceMock as any, + modelServiceMock as any + ); + + capturedLoadMoreFn = null; + searchResultsStub = { + entries: [] as DashboardEntry[], + reset: vi.fn((fn: LoadMoreFn) => { + capturedLoadMoreFn = fn; + }), + loadMore: vi.fn(async () => {}), + }; + + component.searchResultsComponent = searchResultsStub; + }); + + // ─── wiring ─────────────────────────────────────────────────────────────── + + it("defaults to newest-first, since models carry no last-modified time", () => { + expect(component.sortMethod).toBe(SortMethod.CreateTimeDesc); + }); + + it("tracks login state as the user changes", () => { + expect(component.isLogin).toBe(true); + expect(component.currentUid).toBe(42); + + isLoginSpy.mockReturnValue(false); + getCurrentUserSpy.mockReturnValue(undefined); + userChangedSubject.next(undefined); + + expect(component.isLogin).toBe(false); + expect(component.currentUid).toBeUndefined(); + }); + + it("re-searches whenever the signed-in user changes", () => { + const searchSpy = vi.spyOn(component, "search").mockResolvedValue(); + component.ngAfterViewInit(); + + expect(searchSpy).not.toHaveBeenCalled(); + userChangedSubject.next({ uid: 42 } as User); + expect(searchSpy).toHaveBeenCalledTimes(1); + }); + + // ─── listing ────────────────────────────────────────────────────────────── + + it("lists the accessible models rather than going through unified search", async () => { + // Models must not reach global search before the hub backend lands, so this page reads + // /model/list directly. + modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1), listedModel(2)])); + + await component.search(); + const page = await capturedLoadMoreFn!(0, 20); + + expect(modelServiceMock.retrieveAccessibleModels).toHaveBeenCalled(); + expect(page.entries.map((e: DashboardEntry) => e.id)).toEqual([2, 1]); + expect(page.more).toBe(false); + }); + + it("fetches the list once and re-slices it, refetching only when forced", async () => { + modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1)])); + + await component.search(); + await capturedLoadMoreFn!(0, 20); + await capturedLoadMoreFn!(0, 20); + expect(modelServiceMock.retrieveAccessibleModels).toHaveBeenCalledTimes(1); + + await component.search(true); + await capturedLoadMoreFn!(0, 20); + expect(modelServiceMock.retrieveAccessibleModels).toHaveBeenCalledTimes(2); + }); + + it("reports more pages while the filtered list runs past the window", async () => { + modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1), listedModel(2), listedModel(3)])); + + await component.search(); + + expect((await capturedLoadMoreFn!(0, 2)).more).toBe(true); + expect((await capturedLoadMoreFn!(2, 2)).more).toBe(false); + }); + + it("sorts by name in both directions, and by newest first otherwise", async () => { + const names = async (): Promise => { + await component.search(true); + return (await capturedLoadMoreFn!(0, 20)).entries.map((e: DashboardEntry) => e.name); + }; + modelServiceMock.retrieveAccessibleModels.mockReturnValue( + of([listedModel(1, { model: { name: "b" } }), listedModel(2, { model: { name: "a" } })]) + ); + + component.sortMethod = SortMethod.NameAsc; + expect(await names()).toEqual(["a", "b"]); + + component.sortMethod = SortMethod.NameDesc; + expect(await names()).toEqual(["b", "a"]); + + component.sortMethod = SortMethod.CreateTimeDesc; + expect(await names()).toEqual(["a", "b"]); // mid 2 was created later + }); + + // ─── keyword matching ───────────────────────────────────────────────────── + + it("matches keywords against name, description, framework, format and owner", async () => { + const matches = async (keyword: string): Promise => { + component.searchKeywords = [keyword]; + await component.search(); + return (await capturedLoadMoreFn!(0, 20)).entries.map((e: DashboardEntry) => e.id!); + }; + modelServiceMock.retrieveAccessibleModels.mockReturnValue( + of([ + listedModel(1, { model: { name: "resnet", description: "vision", framework: "pytorch" } }), + listedModel(2, { ownerEmail: "someone@else.com", model: { name: "tree", format: "joblib" } }), + ]) + ); + + expect(await matches("resnet")).toEqual([1]); + expect(await matches("VISION")).toEqual([1]); // case-insensitive + expect(await matches("joblib")).toEqual([2]); + expect(await matches("else.com")).toEqual([2]); + expect(await matches(" ")).toEqual([2, 1]); // a blank term filters nothing + }); + + it("requires every keyword to match, not just one", async () => { + modelServiceMock.retrieveAccessibleModels.mockReturnValue( + of([listedModel(1, { model: { name: "resnet", description: "vision" } }), listedModel(2)]) + ); + component.searchKeywords = ["resnet", "vision"]; + + await component.search(); + expect((await capturedLoadMoreFn!(0, 20)).entries.map((e: DashboardEntry) => e.id)).toEqual([1]); + + component.searchKeywords = ["resnet", "absent"]; + await component.search(); + expect((await capturedLoadMoreFn!(0, 20)).entries).toEqual([]); + }); + + // ─── owner names ────────────────────────────────────────────────────────── + + it("labels each card with its owner's display name", async () => { + modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1)])); + searchServiceMock.getUserInfo.mockReturnValue(of({ 1: { userName: "ada", avatar: "a.png" } })); + + await component.search(); + const [entry] = (await capturedLoadMoreFn!(0, 20)).entries; + + expect(searchServiceMock.getUserInfo).toHaveBeenCalledWith([1]); + expect(entry.ownerName).toBe("ada"); + }); + + it("still lists the models when the owner lookup fails", async () => { + modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1)])); + searchServiceMock.getUserInfo.mockReturnValue(throwError(() => new Error("offline"))); + + await component.search(); + + expect((await capturedLoadMoreFn!(0, 20)).entries).toHaveLength(1); + }); + + it("skips the owner lookup when there is nobody to look up", async () => { + modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([])); + + await component.search(); + await capturedLoadMoreFn!(0, 20); + + expect(searchServiceMock.getUserInfo).not.toHaveBeenCalled(); + }); + + // ─── view mode ──────────────────────────────────────────────────────────── + + it("remembers the chosen view for the next visit, and ignores a no-op change", () => { + const setItem = vi.spyOn(Storage.prototype, "setItem"); + try { + component.setViewType("card"); // already the default + expect(setItem).not.toHaveBeenCalled(); + + component.setViewType("list"); + expect(component.viewType).toBe("list"); + expect(setItem).toHaveBeenCalledWith("texera.userModel.viewMode", "list"); + } finally { + setItem.mockRestore(); + } + }); + + // ─── create ─────────────────────────────────────────────────────────────── + + it("opens the creator and navigates to whatever it created", () => { + component.onClickOpenModelAddComponent(); + + expect(modalServiceMock.create).toHaveBeenCalledWith( + expect.objectContaining({ nzContent: UserModelCreatorComponent }) + ); + + modalAfterClose.next({ model: { mid: 9 } }); + + expect(routerMock.navigate).toHaveBeenCalledWith([`${USER_MODEL}/9`]); + }); + + it("stays put when the creator was cancelled", () => { + component.onClickOpenModelAddComponent(); + + modalAfterClose.next(null); + + expect(routerMock.navigate).not.toHaveBeenCalled(); + }); + + // ─── delete ─────────────────────────────────────────────────────────────── + + it("deletes the model and drops just that row from the list", () => { + searchResultsStub.entries = [buildEntry(1), buildEntry(2)]; + + component.deleteModel(buildEntry(1)); + + expect(modelServiceMock.deleteModel).toHaveBeenCalledWith(1); + expect(searchResultsStub.entries.map((e: DashboardEntry) => e.model.model.mid)).toEqual([2]); + }); + + it("does not call the backend for a model that was never persisted", () => { + component.deleteModel(buildEntry(undefined)); + + expect(modelServiceMock.deleteModel).not.toHaveBeenCalled(); + }); +}); + +/** + * The suite above constructs the component directly, so its template has never been rendered. + * These mount it for real: the toolbar, the view toggle and the bindings handed to the filters and + * the results list live only in the template. + */ +/** Mirrors UserModelComponent's private static VIEW_MODE_STORAGE_KEY. */ +const VIEW_MODE_STORAGE_KEY = "texera.userModel.viewMode"; + +describe("UserModelComponent rendering", () => { + let fixture: ComponentFixture; + let component: UserModelComponent; + let modalCreate: ReturnType; + + beforeEach(async () => { + // viewType is seeded from localStorage at construction, so a view chosen by an earlier test + // would leak into this one. + localStorage.removeItem(VIEW_MODE_STORAGE_KEY); + modalCreate = vi.fn(() => ({ afterClose: of(null) })); + await TestBed.configureTestingModule({ + imports: [UserModelComponent, ...commonTestImports], + providers: [ + { provide: NzModalService, useValue: { create: modalCreate } }, + { provide: UserService, useClass: StubUserService }, + { provide: SearchService, useValue: { getUserInfo: vi.fn(() => of({})) } }, + { + provide: ModelService, + useValue: { deleteModel: vi.fn(() => of({} as Response)), retrieveAccessibleModels: vi.fn(() => of([])) }, + }, + { provide: NZ_I18N, useValue: en_US }, + provideRouter([]), + ...commonTestProviders, + ], + }).compileComponents(); + + fixture = TestBed.createComponent(UserModelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + afterEach(() => { + localStorage.removeItem(VIEW_MODE_STORAGE_KEY); + vi.restoreAllMocks(); + }); + + const host = (): HTMLElement => fixture.nativeElement as HTMLElement; + + it("titles the page and offers the create button", () => { + expect(host().querySelector(".page-title")?.textContent).toContain("Models"); + const create = host().querySelector(".create-btn"); + expect(create?.textContent).toContain("Create Model"); + + create!.click(); + + expect(modalCreate).toHaveBeenCalled(); + }); + + it("renders no shared filter bar", () => { + // The dropdowns it offers (owner, id, ctime, operator, project) are server-side criteria, and + // this page filters client-side. It returns with the hub and unified-search work. + expect(host().querySelector("texera-filters")).toBeNull(); + }); + + it("writes the tags typed into the search box back to the keyword list, and re-filters", () => { + // nz-select's value arrives through its ControlValueAccessor, so the edit has to be driven at + // the NgModel. With a one-way binding the tags would render but never reach the filter. + const searchSpy = vi.spyOn(component, "search").mockResolvedValue(); + const select = fixture.debugElement.query(By.css("nz-select")); + expect(select, "no nz-select in the search bar").not.toBeNull(); + // Free-text keywords only exist in tag mode. + expect(select.componentInstance.nzMode).toBe("tags"); + + select.injector.get(NgModel).viewToModelUpdate(["resnet", "vision"]); + fixture.detectChanges(); + + expect(component.searchKeywords).toEqual(["resnet", "vision"]); + expect(searchSpy).toHaveBeenCalled(); + }); + + it("starts in card view and moves the highlight when the list view is chosen", () => { + // nz-button renders nzType="primary" as ant-btn-primary; the highlight is how the user can tell + // which view they are in, so it has to follow viewType. + const buttonTitled = (title: string) => host().querySelector(`button[title="${title}"]`)!; + expect(component.viewType).toBe("card"); + expect(buttonTitled("Card View").classList).toContain("ant-btn-primary"); + expect(buttonTitled("List View").classList).not.toContain("ant-btn-primary"); + + buttonTitled("List View").click(); + fixture.detectChanges(); + + expect(component.viewType).toBe("list"); + expect(buttonTitled("List View").classList).toContain("ant-btn-primary"); + expect(localStorage.getItem(VIEW_MODE_STORAGE_KEY)).toBe("list"); + }); + + it("hands the results list the page's view settings", () => { + const results = fixture.debugElement.query(By.directive(SearchResultsComponent)).componentInstance; + expect(results.viewMode).toBe(component.viewType); + expect(results.editable).toBe(true); + expect(results.isPrivateSearch).toBe(true); + expect(results.currentUid).toBe(component.currentUid); + }); +}); diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts b/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts new file mode 100644 index 00000000000..940917b3f73 --- /dev/null +++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts @@ -0,0 +1,247 @@ +/** + * 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 { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { Router } from "@angular/router"; +import { firstValueFrom } from "rxjs"; +import { isDefined } from "../../../../common/util/predicate"; +import { NzModalService } from "ng-zorro-antd/modal"; +import { NzCardComponent } from "ng-zorro-antd/card"; +import { NzSpaceCompactItemDirective, NzSpaceCompactComponent } from "ng-zorro-antd/space"; +import { NzButtonComponent } from "ng-zorro-antd/button"; +import { NzWaveDirective } from "ng-zorro-antd/core/wave"; +import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch"; +import { NzIconDirective } from "ng-zorro-antd/icon"; +import { NzSelectComponent } from "ng-zorro-antd/select"; +import { FormsModule } from "@angular/forms"; +import { UserService } from "../../../../common/service/user/user.service"; +import { SearchService } from "../../../service/user/search.service"; +import { ModelService } from "../../../service/user/model/model.service"; +import { SortMethod } from "../../../type/sort-method"; +import { DashboardEntry } from "../../../type/dashboard-entry"; +import { DashboardModel } from "../../../type/dashboard-model.interface"; +import { USER_MODEL } from "../../../../app-routing.constant"; +import { SearchResultsComponent } from "../search-results/search-results.component"; +import { CardItemComponent } from "../list-item/card-item/card-item.component"; +import { SortButtonComponent } from "../sort-button/sort-button.component"; +import { UserModelCreatorComponent } from "./user-model-creator/user-model-creator.component"; + +@UntilDestroy() +@Component({ + selector: "texera-model-section", + templateUrl: "user-model.component.html", + styleUrls: ["user-model.component.scss"], + imports: [ + NzCardComponent, + NzSpaceCompactItemDirective, + NzSpaceCompactComponent, + NzButtonComponent, + NzWaveDirective, + ɵNzTransitionPatchDirective, + NzIconDirective, + SortButtonComponent, + NzSelectComponent, + FormsModule, + SearchResultsComponent, + CardItemComponent, + ], +}) +export class UserModelComponent implements AfterViewInit { + private static readonly VIEW_MODE_STORAGE_KEY = "texera.userModel.viewMode"; + // Models carry no "last modified" timestamp, so sorting by edit time would leave the key NULL on + // every row. Newest-first is the useful default, as on the Datasets page. + public sortMethod = SortMethod.CreateTimeDesc; + public isLogin = this.userService.isLogin(); + public currentUid = this.userService.getCurrentUser()?.uid; + public viewType: "list" | "card" = + localStorage.getItem(UserModelComponent.VIEW_MODE_STORAGE_KEY) === "list" ? "list" : "card"; + + private _searchResultsComponent?: SearchResultsComponent; + @ViewChild(SearchResultsComponent) get searchResultsComponent(): SearchResultsComponent { + if (this._searchResultsComponent) { + return this._searchResultsComponent; + } + throw new Error("Property cannot be accessed before it is initialized."); + } + + set searchResultsComponent(value: SearchResultsComponent) { + this._searchResultsComponent = value; + } + + /** Free-text terms from the search box; matched client-side against the listed models. */ + public searchKeywords: string[] = []; + + private cachedModels: DashboardModel[] | null = null; + + constructor( + private modalService: NzModalService, + private userService: UserService, + private router: Router, + private searchService: SearchService, + private modelService: ModelService + ) { + this.userService + .userChanged() + .pipe(untilDestroyed(this)) + .subscribe(() => { + this.isLogin = this.userService.isLogin(); + this.currentUid = this.userService.getCurrentUser()?.uid; + }); + } + + ngAfterViewInit() { + this.userService + .userChanged() + .pipe(untilDestroyed(this)) + .subscribe(() => this.search()); + } + + public setViewType(viewType: "list" | "card"): void { + if (this.viewType === viewType) { + return; + } + this.viewType = viewType; + localStorage.setItem(UserModelComponent.VIEW_MODE_STORAGE_KEY, viewType); + } + + /** + * Re-filters and re-sorts the accessible models. + * + * Models are listed from /model/list and filtered here rather than through unified search: the + * backend does not accept `resourceType=model` until the hub work lands, and models must not + * surface in global search before then. + * + * @param forced discards the cached list and refetches + */ + async search(forced: Boolean = false): Promise { + if (forced) { + this.cachedModels = null; + } + + this.searchResultsComponent.reset(async (start, count) => { + const models = await this.accessibleModels(); + const matching = this.sortModels(models.filter(model => this.matchesKeyword(model))); + const entries = matching.slice(start, start + count).map(model => new DashboardEntry(model)); + await this.attachOwnerNames(entries); + return { entries, more: start + count < matching.length }; + }); + await this.searchResultsComponent.loadMore(); + } + + private async accessibleModels(): Promise { + if (this.cachedModels === null) { + this.cachedModels = await firstValueFrom(this.modelService.retrieveAccessibleModels()); + } + return this.cachedModels; + } + + private matchesKeyword(model: DashboardModel): boolean { + const keywords = this.searchKeywords.map(keyword => keyword.trim().toLowerCase()).filter(keyword => keyword !== ""); + if (keywords.length === 0) { + return true; + } + const haystack = [ + model.model.name, + model.model.description, + model.model.framework, + model.model.format, + model.ownerEmail, + ] + .filter((field): field is string => typeof field === "string") + .map(field => field.toLowerCase()); + + return keywords.every(keyword => haystack.some(field => field.includes(keyword))); + } + + private sortModels(models: DashboardModel[]): DashboardModel[] { + const byName = (a: DashboardModel, b: DashboardModel) => a.model.name.localeCompare(b.model.name); + const byCreation = (a: DashboardModel, b: DashboardModel) => + (a.model.creationTime ?? 0) - (b.model.creationTime ?? 0); + + switch (this.sortMethod) { + case SortMethod.NameAsc: + return [...models].sort(byName); + case SortMethod.NameDesc: + return [...models].sort((a, b) => byName(b, a)); + default: + return [...models].sort((a, b) => byCreation(b, a)); + } + } + + /** Resolves owner uids to display names, so cards show a username rather than the placeholder. */ + private async attachOwnerNames(entries: DashboardEntry[]): Promise { + const ownerIds = Array.from(new Set(entries.map(entry => entry.model.model.ownerUid).filter(isDefined))); + if (ownerIds.length === 0) { + return; + } + try { + const userInfo = await firstValueFrom(this.searchService.getUserInfo(ownerIds)); + entries.forEach(entry => { + const info = userInfo[entry.model.model.ownerUid!]; + if (info) { + entry.setOwnerName(info.userName); + entry.setOwnerAvatar(info.avatar ?? ""); + } + }); + } catch { + // Decoration only: a lookup failure must not empty the list. + } + } + + public onClickOpenModelAddComponent(): void { + const modal = this.modalService.create({ + nzTitle: "Create New Model", + nzContent: UserModelCreatorComponent, + nzFooter: null, + nzBodyStyle: { + resize: "both", + overflow: "auto", + minHeight: "200px", + minWidth: "550px", + maxWidth: "90vw", + maxHeight: "80vh", + }, + nzWidth: "fit-content", + }); + + modal.afterClose.pipe(untilDestroyed(this)).subscribe(result => { + if (result != null) { + const created = result as DashboardModel; + this.router.navigate([`${USER_MODEL}/${created.model.mid}`]); + } + }); + } + + public deleteModel(entry: DashboardEntry): void { + const mid = entry.model.model.mid; + if (mid === undefined) { + return; + } + this.modelService + .deleteModel(mid) + .pipe(untilDestroyed(this)) + .subscribe(() => { + this.cachedModels = this.cachedModels?.filter(model => model.model.mid !== mid) ?? null; + this.searchResultsComponent.entries = this.searchResultsComponent.entries.filter( + modelEntry => modelEntry.model.model.mid !== mid + ); + }); + } +} diff --git a/frontend/src/app/dashboard/service/user/model/model.service.spec.ts b/frontend/src/app/dashboard/service/user/model/model.service.spec.ts new file mode 100644 index 00000000000..f99a8ff4ed9 --- /dev/null +++ b/frontend/src/app/dashboard/service/user/model/model.service.spec.ts @@ -0,0 +1,164 @@ +/** + * 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 { TestBed } from "@angular/core/testing"; +import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing"; +import { firstValueFrom } from "rxjs"; +import { + DEFAULT_MODEL_NAME, + MODEL_FORMATS, + MODEL_FRAMEWORKS, + MODEL_NAME_MAX_LENGTH, + ModelService, + validateModelName, +} from "./model.service"; +import { Model } from "../../../../common/type/model"; +import { DashboardModel } from "../../../type/dashboard-model.interface"; +import { commonTestProviders } from "../../../../common/testing/test-utils"; + +const API = "api"; + +const newModel = (overrides: Partial = {}): Model => ({ + mid: undefined, + ownerUid: undefined, + name: "resnet-50", + repositoryName: undefined, + isPublic: false, + isDownloadable: false, + description: "a model", + creationTime: undefined, + coverImage: undefined, + framework: "pytorch", + format: "torchscript", + ...overrides, +}); + +describe("validateModelName", () => { + it("accepts letters, digits, underscores and hyphens", () => { + expect(validateModelName("resnet-50")).toBeNull(); + expect(validateModelName("my_model_2")).toBeNull(); + expect(validateModelName("A")).toBeNull(); + }); + + it("rejects anything else, including the empty name", () => { + for (const name of ["", "has spaces", "slash/es", "dots.", "emoji-🙂", "semi;colon"]) { + expect(validateModelName(name)).toContain("Invalid model name"); + } + }); + + it("rejects a name one character past the limit but accepts the limit itself", () => { + expect(validateModelName("a".repeat(MODEL_NAME_MAX_LENGTH))).toBeNull(); + expect(validateModelName("a".repeat(MODEL_NAME_MAX_LENGTH + 1))).toContain("Invalid model name"); + }); + + it("offers a default name that is itself valid", () => { + expect(validateModelName(DEFAULT_MODEL_NAME)).toBeNull(); + }); +}); + +describe("model whitelists", () => { + it("mirror the backend's accepted frameworks and formats", () => { + // The backend answers anything outside these with a 400, so drift here is a broken create form. + expect([...MODEL_FRAMEWORKS]).toEqual(["pytorch", "tensorflow", "onnx", "sklearn", "other"]); + expect([...MODEL_FORMATS]).toEqual([ + "torchscript", + "state-dict", + "safetensors", + "onnx", + "savedmodel", + "joblib", + "pickle", + "other", + ]); + }); +}); + +describe("ModelService", () => { + let service: ModelService; + let http: HttpTestingController; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [ModelService, ...commonTestProviders], + }); + service = TestBed.inject(ModelService); + http = TestBed.inject(HttpTestingController); + }); + + afterEach(() => { + http.verify(); + }); + + it("posts a create request under the model-shaped field names", () => { + // The backend reads modelName/isModelPublic; the dataset spellings would be silently dropped. + service.createModel(newModel({ isPublic: true, isDownloadable: true })).subscribe(); + + const req = http.expectOne(`${API}/model/create`); + expect(req.request.method).toBe("POST"); + expect(req.request.body).toEqual({ + modelName: "resnet-50", + modelDescription: "a model", + isModelPublic: true, + isModelDownloadable: true, + framework: "pytorch", + format: "torchscript", + }); + req.flush({}); + }); + + it("returns the created model to the caller", async () => { + const created = { model: { mid: 7 } } as DashboardModel; + const pending = firstValueFrom(service.createModel(newModel())); + + http.expectOne(`${API}/model/create`).flush(created); + + expect(await pending).toEqual(created); + }); + + it("lists the accessible models, including when the user has none", async () => { + const pending = firstValueFrom(service.retrieveAccessibleModels()); + http.expectOne(`${API}/model/list`).flush([]); + expect(await pending).toEqual([]); + }); + + it("deletes by id", () => { + service.deleteModel(7).subscribe(); + expect(http.expectOne(`${API}/model/7`).request.method).toBe("DELETE"); + http.verify(); + }); + + it("sends renames and description edits with the id in the body", () => { + service.updateModelName(7, "new-name").subscribe(); + const rename = http.expectOne(`${API}/model/update/name`); + expect(rename.request.body).toEqual({ mid: 7, name: "new-name" }); + rename.flush({}); + + service.updateModelDescription(7, "new description").subscribe(); + const describe = http.expectOne(`${API}/model/update/description`); + expect(describe.request.body).toEqual({ mid: 7, description: "new description" }); + describe.flush({}); + }); + + it("surfaces a server error rather than swallowing it", async () => { + const outcome = firstValueFrom(service.retrieveAccessibleModels()).catch((err: unknown) => err); + http.expectOne(`${API}/model/list`).flush({ message: "nope" }, { status: 500, statusText: "Server Error" }); + expect(await outcome).toMatchObject({ status: 500 }); + }); +}); diff --git a/frontend/src/app/dashboard/service/user/model/model.service.ts b/frontend/src/app/dashboard/service/user/model/model.service.ts new file mode 100644 index 00000000000..c83f1369193 --- /dev/null +++ b/frontend/src/app/dashboard/service/user/model/model.service.ts @@ -0,0 +1,97 @@ +/** + * 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 { Injectable } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { Observable } from "rxjs"; +import { AppSettings } from "../../../../common/app-setting"; +import { Model } from "../../../../common/type/model"; +import { DashboardModel } from "../../../type/dashboard-model.interface"; + +export const MODEL_BASE_URL = "model"; +export const MODEL_CREATE_URL = MODEL_BASE_URL + "/create"; +export const MODEL_UPDATE_BASE_URL = MODEL_BASE_URL + "/update"; +export const MODEL_UPDATE_NAME_URL = MODEL_UPDATE_BASE_URL + "/name"; +export const MODEL_UPDATE_DESCRIPTION_URL = MODEL_UPDATE_BASE_URL + "/description"; +export const MODEL_LIST_URL = MODEL_BASE_URL + "/list"; + +export const DEFAULT_MODEL_NAME = "Untitled-model"; + +export const MODEL_NAME_MAX_LENGTH = 128; +const MODEL_NAME_PATTERN = /^[A-Za-z0-9_-]+$/; + +// Both lists mirror ModelResource's whitelists, which reject anything else with a 400. +export const MODEL_FRAMEWORKS = ["pytorch", "tensorflow", "onnx", "sklearn", "other"] as const; +export const MODEL_FORMATS = [ + "torchscript", + "state-dict", + "safetensors", + "onnx", + "savedmodel", + "joblib", + "pickle", + "other", +] as const; + +export function validateModelName(name: string): string | null { + if (!MODEL_NAME_PATTERN.test(name) || name.length > MODEL_NAME_MAX_LENGTH) { + return "Invalid model name: only letters, numbers, underscores, and hyphens are allowed (max 128 characters)"; + } + return null; +} + +@Injectable({ + providedIn: "root", +}) +export class ModelService { + constructor(private http: HttpClient) {} + + public createModel(model: Model): Observable { + return this.http.post(`${AppSettings.getApiEndpoint()}/${MODEL_CREATE_URL}`, { + modelName: model.name, + modelDescription: model.description, + isModelPublic: model.isPublic, + isModelDownloadable: model.isDownloadable, + framework: model.framework, + format: model.format, + }); + } + + public retrieveAccessibleModels(): Observable { + return this.http.get(`${AppSettings.getApiEndpoint()}/${MODEL_LIST_URL}`); + } + + public deleteModel(mid: number): Observable { + return this.http.delete(`${AppSettings.getApiEndpoint()}/${MODEL_BASE_URL}/${mid}`); + } + + public updateModelName(mid: number, name: string): Observable { + return this.http.post(`${AppSettings.getApiEndpoint()}/${MODEL_UPDATE_NAME_URL}`, { + mid: mid, + name: name, + }); + } + + public updateModelDescription(mid: number, description: string): Observable { + return this.http.post(`${AppSettings.getApiEndpoint()}/${MODEL_UPDATE_DESCRIPTION_URL}`, { + mid: mid, + description: description, + }); + } +} diff --git a/frontend/src/app/dashboard/service/user/model/stub-model.service.ts b/frontend/src/app/dashboard/service/user/model/stub-model.service.ts new file mode 100644 index 00000000000..d7f37a637c3 --- /dev/null +++ b/frontend/src/app/dashboard/service/user/model/stub-model.service.ts @@ -0,0 +1,47 @@ +/** + * 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 { Injectable } from "@angular/core"; +import { Observable, of } from "rxjs"; +import { DashboardModel } from "../../../type/dashboard-model.interface"; + +/** + * In-memory ModelService double, so specs rendering a Models view need no HttpTestingController. + */ +@Injectable() +export class StubModelService { + constructor(private models: DashboardModel[] = []) {} + + public retrieveAccessibleModels(): Observable { + return of(this.models); + } + + public deleteModel(mid: number): Observable { + this.models = this.models.filter(model => model.model.mid !== mid); + return of({} as Response); + } + + public updateModelName(): Observable { + return of({} as Response); + } + + public updateModelDescription(): Observable { + return of({} as Response); + } +} diff --git a/frontend/src/app/dashboard/service/user/resource-registry/dataset-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/dataset-resource.descriptor.ts new file mode 100644 index 00000000000..727ff7c2805 --- /dev/null +++ b/frontend/src/app/dashboard/service/user/resource-registry/dataset-resource.descriptor.ts @@ -0,0 +1,47 @@ +/** + * 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 { Injectable } from "@angular/core"; +import { DashboardEntry } from "../../../type/dashboard-entry"; +import { ResourceDescriptor } from "../../../type/resource-descriptor"; +import { EntityType } from "../../../../hub/service/hub.service"; +import { DatasetService, DEFAULT_DATASET_NAME, validateDatasetName } from "../dataset/dataset.service"; +import { HUB_DATASET_RESULT_DETAIL, USER_DATASET } from "../../../../app-routing.constant"; + +@Injectable({ + providedIn: "root", +}) +export class DatasetResourceDescriptor implements ResourceDescriptor { + readonly type = EntityType.Dataset; + readonly iconType = "database"; + readonly privateRoute = USER_DATASET; + readonly hubRoute = HUB_DATASET_RESULT_DETAIL; + readonly hasSize = true; + readonly defaultName = DEFAULT_DATASET_NAME; + + constructor(private datasetService: DatasetService) {} + + isOwner = (entry: DashboardEntry): boolean => entry.dataset.isOwner; + validateName = validateDatasetName; + rename = (id: number, name: string) => this.datasetService.updateDatasetName(id, name); + updateDescription = (id: number, description: string) => + this.datasetService.updateDatasetDescription(id, description); + retrieveOwners = () => this.datasetService.retrieveOwners(); + // No dataset-id endpoint exists, so `retrieveIds` stays absent and the id filter hides itself. +} diff --git a/frontend/src/app/dashboard/service/user/resource-registry/file-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/file-resource.descriptor.ts new file mode 100644 index 00000000000..ba90117b27b --- /dev/null +++ b/frontend/src/app/dashboard/service/user/resource-registry/file-resource.descriptor.ts @@ -0,0 +1,33 @@ +/** + * 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 { Injectable } from "@angular/core"; +import { ResourceDescriptor } from "../../../type/resource-descriptor"; +import { EntityType } from "../../../../hub/service/hub.service"; + +@Injectable({ + providedIn: "root", +}) +export class FileResourceDescriptor implements ResourceDescriptor { + readonly type = EntityType.File; + readonly iconType = "folder-open"; + // Files have no page of their own, so entries of this kind stay unrouted. + + isOwner = (): boolean => true; +} diff --git a/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts new file mode 100644 index 00000000000..801ba0931b9 --- /dev/null +++ b/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts @@ -0,0 +1,44 @@ +/** + * 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 { Injectable } from "@angular/core"; +import { DashboardEntry } from "../../../type/dashboard-entry"; +import { ResourceDescriptor } from "../../../type/resource-descriptor"; +import { EntityType } from "../../../../hub/service/hub.service"; +import { DEFAULT_MODEL_NAME, ModelService, validateModelName } from "../model/model.service"; +import { USER_MODEL } from "../../../../app-routing.constant"; + +@Injectable({ + providedIn: "root", +}) +export class ModelResourceDescriptor implements ResourceDescriptor { + readonly type = EntityType.Model; + readonly iconType = "experiment"; + readonly privateRoute = USER_MODEL; + readonly hasSize = true; + readonly defaultName = DEFAULT_MODEL_NAME; + + constructor(private modelService: ModelService) {} + + isOwner = (entry: DashboardEntry): boolean => entry.model.isOwner; + validateName = validateModelName; + rename = (id: number, name: string) => this.modelService.updateModelName(id, name); + updateDescription = (id: number, description: string) => this.modelService.updateModelDescription(id, description); + // `retrieveOwners` arrives with the share modal and the filters, which need it. +} diff --git a/frontend/src/app/dashboard/service/user/resource-registry/project-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/project-resource.descriptor.ts new file mode 100644 index 00000000000..f7fb69b9f2b --- /dev/null +++ b/frontend/src/app/dashboard/service/user/resource-registry/project-resource.descriptor.ts @@ -0,0 +1,35 @@ +/** + * 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 { Injectable } from "@angular/core"; +import { ResourceDescriptor } from "../../../type/resource-descriptor"; +import { EntityType } from "../../../../hub/service/hub.service"; +import { USER_PROJECT } from "../../../../app-routing.constant"; + +@Injectable({ + providedIn: "root", +}) +export class ProjectResourceDescriptor implements ResourceDescriptor { + readonly type = EntityType.Project; + readonly iconType = "container"; + readonly privateRoute = USER_PROJECT; + + // Projects are only ever listed to the user who owns them. + isOwner = (): boolean => true; +} diff --git a/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts new file mode 100644 index 00000000000..963c4b13d80 --- /dev/null +++ b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts @@ -0,0 +1,176 @@ +/** + * 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 { TestBed } from "@angular/core/testing"; +import { HttpClientTestingModule } from "@angular/common/http/testing"; +import { of } from "rxjs"; +import { ResourceRegistryService } from "./resource-registry.service"; +import { DashboardEntry } from "../../../type/dashboard-entry"; +import { EntityType } from "../../../../hub/service/hub.service"; +import { DatasetService } from "../dataset/dataset.service"; +import { ModelService } from "../model/model.service"; +import { WorkflowPersistService } from "../../../../common/service/workflow-persist/workflow-persist.service"; +import { + HUB_DATASET_RESULT_DETAIL, + HUB_WORKFLOW_RESULT_DETAIL, + USER_DATASET, + USER_MODEL, + USER_PROJECT, + USER_WORKSPACE, +} from "../../../../app-routing.constant"; +import { commonTestProviders } from "../../../../common/testing/test-utils"; + +const entry = (overrides: Partial>): DashboardEntry => + ({ id: 7, accessibleUserIds: [], ...overrides }) as unknown as DashboardEntry; + +describe("ResourceRegistryService", () => { + let registry: ResourceRegistryService; + let workflowPersistService: { [k: string]: ReturnType }; + let datasetService: { [k: string]: ReturnType }; + let modelService: { [k: string]: ReturnType }; + + beforeEach(() => { + // Partial spies on purpose: the descriptors must not touch these until a caller asks. + workflowPersistService = { + updateWorkflowName: vi.fn().mockReturnValue(of({})), + updateWorkflowDescription: vi.fn().mockReturnValue(of({})), + retrieveOwners: vi.fn().mockReturnValue(of(["wf-owner"])), + retrieveWorkflowIDs: vi.fn().mockReturnValue(of([1, 2])), + }; + datasetService = { + updateDatasetName: vi.fn().mockReturnValue(of({})), + updateDatasetDescription: vi.fn().mockReturnValue(of({})), + retrieveOwners: vi.fn().mockReturnValue(of(["ds-owner"])), + }; + + modelService = { + updateModelName: vi.fn().mockReturnValue(of({})), + updateModelDescription: vi.fn().mockReturnValue(of({})), + }; + + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [ + { provide: WorkflowPersistService, useValue: workflowPersistService }, + { provide: DatasetService, useValue: datasetService }, + { provide: ModelService, useValue: modelService }, + ...commonTestProviders, + ], + }); + registry = TestBed.inject(ResourceRegistryService); + }); + + // ─── lookup ─────────────────────────────────────────────────────────────── + + it("resolves every kind the dashboard renders", () => { + expect(registry.get(EntityType.Workflow).iconType).toBe("project"); + expect(registry.get(EntityType.Dataset).iconType).toBe("database"); + expect(registry.get(EntityType.Project).iconType).toBe("container"); + expect(registry.get(EntityType.File).iconType).toBe("folder-open"); + expect(registry.get(EntityType.Model).iconType).toBe("experiment"); + }); + + it("refuses a kind it does not carry", () => { + // Computing units reach the dashboard as entities but never as list entries. + expect(() => registry.get(EntityType.ComputingUnit)).toThrowError("Unexpected type in DashboardEntry."); + expect(() => registry.get("quantum" as EntityType)).toThrowError("Unexpected type in DashboardEntry."); + }); + + // ─── capability checks ──────────────────────────────────────────────────── + + it("exposes rename and description only for the kinds that support them", () => { + for (const type of [EntityType.Workflow, EntityType.Dataset, EntityType.Model]) { + expect(registry.get(type).rename).toBeDefined(); + expect(registry.get(type).updateDescription).toBeDefined(); + } + // Models gain `retrieveOwners` with the share modal and the filters, which are the only callers. + expect(registry.get(EntityType.Model).retrieveOwners).toBeUndefined(); + for (const type of [EntityType.Project, EntityType.File]) { + expect(registry.get(type).rename).toBeUndefined(); + expect(registry.get(type).updateDescription).toBeUndefined(); + } + }); + + it("offers an id filter only where the backend has an id endpoint", () => { + expect(registry.get(EntityType.Workflow).retrieveIds).toBeDefined(); + expect(registry.get(EntityType.Dataset).retrieveIds).toBeUndefined(); + expect(registry.get(EntityType.Model).retrieveIds).toBeUndefined(); + }); + + it("validates names only where the backend restricts them", () => { + expect(registry.get(EntityType.Workflow).validateName).toBeUndefined(); + expect(registry.get(EntityType.Dataset).validateName!("has spaces")).toContain("Invalid dataset name"); + expect(registry.get(EntityType.Dataset).validateName!("fine-name_1")).toBeNull(); + expect(registry.get(EntityType.Model).validateName!("has spaces")).toContain("Invalid model name"); + expect(registry.get(EntityType.Model).validateName!("resnet-50")).toBeNull(); + }); + + // ─── delegation ─────────────────────────────────────────────────────────── + + it("delegates each operation to the owning service", () => { + registry.get(EntityType.Workflow).rename!(1, "wf"); + registry.get(EntityType.Workflow).updateDescription!(1, "d"); + registry.get(EntityType.Dataset).rename!(2, "ds"); + registry.get(EntityType.Dataset).updateDescription!(2, "d"); + registry.get(EntityType.Model).rename!(3, "m"); + registry.get(EntityType.Model).updateDescription!(3, "d"); + + expect(workflowPersistService["updateWorkflowName"]).toHaveBeenCalledWith(1, "wf"); + expect(workflowPersistService["updateWorkflowDescription"]).toHaveBeenCalledWith(1, "d"); + expect(datasetService["updateDatasetName"]).toHaveBeenCalledWith(2, "ds"); + expect(datasetService["updateDatasetDescription"]).toHaveBeenCalledWith(2, "d"); + expect(modelService["updateModelName"]).toHaveBeenCalledWith(3, "m"); + expect(modelService["updateModelDescription"]).toHaveBeenCalledWith(3, "d"); + }); + + it("reads ownership off the kind's own payload", () => { + expect(registry.get(EntityType.Workflow).isOwner(entry({ workflow: { isOwner: false } }))).toBe(false); + expect(registry.get(EntityType.Dataset).isOwner(entry({ dataset: { isOwner: true } }))).toBe(true); + expect(registry.get(EntityType.Model).isOwner(entry({ model: { isOwner: false } }))).toBe(false); + // Project and file entries carry no ownership payload at all, so theirs must not read one. + expect(registry.get(EntityType.Project).isOwner(entry({}))).toBe(true); + expect(registry.get(EntityType.File).isOwner(entry({}))).toBe(true); + }); + + // ─── entryLink ──────────────────────────────────────────────────────────── + + it("routes a viewer with access to the private page and everyone else to the hub", () => { + const workflow = entry({ type: EntityType.Workflow, id: 7, accessibleUserIds: [42] }); + expect(registry.entryLink(workflow, 42)).toEqual([USER_WORKSPACE, "7"]); + expect(registry.entryLink(workflow, 99)).toEqual([HUB_WORKFLOW_RESULT_DETAIL, "7"]); + // An anonymous viewer is not on anyone's access list. + expect(registry.entryLink(workflow, undefined)).toEqual([HUB_WORKFLOW_RESULT_DETAIL, "7"]); + + const dataset = entry({ type: EntityType.Dataset, id: 5, accessibleUserIds: [42] }); + expect(registry.entryLink(dataset, 42)).toEqual([USER_DATASET, "5"]); + expect(registry.entryLink(dataset, 99)).toEqual([HUB_DATASET_RESULT_DETAIL, "5"]); + }); + + it("routes a kind with no hub page straight to its private page", () => { + // Projects have no hub presence, and models do not get one until the hub UI lands. + expect(registry.entryLink(entry({ type: EntityType.Project, id: 3 }), undefined)).toEqual([USER_PROJECT, "3"]); + expect(registry.entryLink(entry({ type: EntityType.Model, id: 9 }), 42)).toEqual([USER_MODEL, "9"]); + }); + + it("leaves an unroutable or unsaved entry unlinked", () => { + expect(registry.entryLink(entry({ type: EntityType.File, id: 8 }), 42)).toEqual([]); + expect(registry.entryLink(entry({ type: EntityType.Dataset, id: undefined }), 42)).toEqual([]); + expect(registry.entryLink(entry({ type: EntityType.Workflow, id: "draft" }), 42)).toEqual([]); + }); +}); diff --git a/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.ts b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.ts new file mode 100644 index 00000000000..4c472d678d8 --- /dev/null +++ b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.ts @@ -0,0 +1,77 @@ +/** + * 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 { Injectable } from "@angular/core"; +import { DashboardEntry } from "../../../type/dashboard-entry"; +import { ResourceDescriptor } from "../../../type/resource-descriptor"; +import { EntityType } from "../../../../hub/service/hub.service"; +import { WorkflowResourceDescriptor } from "./workflow-resource.descriptor"; +import { DatasetResourceDescriptor } from "./dataset-resource.descriptor"; +import { ProjectResourceDescriptor } from "./project-resource.descriptor"; +import { FileResourceDescriptor } from "./file-resource.descriptor"; +import { ModelResourceDescriptor } from "./model-resource.descriptor"; + +/** + * The one place that knows every dashboard resource kind. Descriptors are injectable rather than a + * const map because each needs an HttpClient-backed service, which `inject()` cannot supply at + * module scope. + */ +@Injectable({ + providedIn: "root", +}) +export class ResourceRegistryService { + private readonly descriptors: ReadonlyMap; + + constructor( + workflow: WorkflowResourceDescriptor, + dataset: DatasetResourceDescriptor, + project: ProjectResourceDescriptor, + file: FileResourceDescriptor, + model: ModelResourceDescriptor + ) { + // Computing units are deliberately absent: nothing in the dashboard renders them as entries. + this.descriptors = new Map( + [workflow, dataset, project, file, model].map(descriptor => [descriptor.type, descriptor]) + ); + } + + public get(type: EntityType): ResourceDescriptor { + const descriptor = this.descriptors.get(type); + if (!descriptor) { + throw new Error("Unexpected type in DashboardEntry."); + } + return descriptor; + } + + /** + * Where an entry's card links to: the owner-facing page when the viewer can reach it, the hub page + * otherwise. An entry with no route, or one not yet persisted, links nowhere. + */ + public entryLink(entry: DashboardEntry, currentUid: number | undefined): string[] { + const descriptor = this.get(entry.type); + if (descriptor.privateRoute === undefined || typeof entry.id !== "number") { + return []; + } + if (descriptor.hubRoute === undefined) { + return [descriptor.privateRoute, String(entry.id)]; + } + const reachableByViewer = currentUid !== undefined && entry.accessibleUserIds.includes(currentUid); + return [reachableByViewer ? descriptor.privateRoute : descriptor.hubRoute, String(entry.id)]; + } +} diff --git a/frontend/src/app/dashboard/service/user/resource-registry/workflow-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/workflow-resource.descriptor.ts new file mode 100644 index 00000000000..79e1e4bec17 --- /dev/null +++ b/frontend/src/app/dashboard/service/user/resource-registry/workflow-resource.descriptor.ts @@ -0,0 +1,51 @@ +/** + * 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 { Injectable } from "@angular/core"; +import { DashboardEntry } from "../../../type/dashboard-entry"; +import { ResourceDescriptor } from "../../../type/resource-descriptor"; +import { EntityType } from "../../../../hub/service/hub.service"; +import { + DEFAULT_WORKFLOW_NAME, + WorkflowPersistService, +} from "../../../../common/service/workflow-persist/workflow-persist.service"; +import { HUB_WORKFLOW_RESULT_DETAIL, USER_WORKSPACE } from "../../../../app-routing.constant"; + +@Injectable({ + providedIn: "root", +}) +export class WorkflowResourceDescriptor implements ResourceDescriptor { + readonly type = EntityType.Workflow; + readonly iconType = "project"; + readonly privateRoute = USER_WORKSPACE; + readonly hubRoute = HUB_WORKFLOW_RESULT_DETAIL; + readonly hasSize = true; + readonly defaultName = DEFAULT_WORKFLOW_NAME; + + constructor(private workflowPersistService: WorkflowPersistService) {} + + // Bound lazily, never in the constructor: specs hand these descriptors partial service spies, + // and reading an absent method up front would fail the whole TestBed. + isOwner = (entry: DashboardEntry): boolean => entry.workflow.isOwner; + rename = (id: number, name: string) => this.workflowPersistService.updateWorkflowName(id, name); + updateDescription = (id: number, description: string) => + this.workflowPersistService.updateWorkflowDescription(id, description); + retrieveOwners = () => this.workflowPersistService.retrieveOwners(); + retrieveIds = () => this.workflowPersistService.retrieveWorkflowIDs(); +} diff --git a/frontend/src/app/dashboard/type/dashboard-entry.ts b/frontend/src/app/dashboard/type/dashboard-entry.ts index 995618fb5f7..e4eac2688ba 100644 --- a/frontend/src/app/dashboard/type/dashboard-entry.ts +++ b/frontend/src/app/dashboard/type/dashboard-entry.ts @@ -21,10 +21,12 @@ import { DashboardFile } from "./dashboard-file.interface"; import { DashboardWorkflow } from "./dashboard-workflow.interface"; import { DashboardProject } from "./dashboard-project.interface"; import { DashboardDataset } from "./dashboard-dataset.interface"; +import { DashboardModel } from "./dashboard-model.interface"; import { DashboardWorkflowComputingUnit } from "../../common/type/workflow-computing-unit"; import { isDashboardDataset, isDashboardFile, + isDashboardModel, isDashboardProject, isDashboardWorkflow, isDashboardWorkflowComputingUnit, @@ -63,6 +65,7 @@ export class DashboardEntry { | DashboardProject | DashboardFile | DashboardDataset + | DashboardModel | DashboardWorkflowComputingUnit ) { if (isDashboardWorkflow(value)) { @@ -139,6 +142,25 @@ export class DashboardEntry { this.isLiked = false; this.accessibleUserIds = []; this.coverImageUrl = value.dataset.coverImage; + } else if (isDashboardModel(value)) { + this.type = EntityType.Model; + this.id = value.model.mid; + this.name = value.model.name; + this.description = value.model.description; + this.creationTime = value.model.creationTime; + this.lastModifiedTime = value.model.creationTime; + this.accessLevel = value.accessPrivilege; + this.ownerName = ""; + this.ownerEmail = value.ownerEmail; + this.ownerAvatar = ""; + this.ownerId = value.model.ownerUid; + this.size = value.size; + this.viewCount = 0; + this.cloneCount = 0; + this.likeCount = 0; + this.isLiked = false; + this.accessibleUserIds = []; + this.coverImageUrl = value.model.coverImage; } else if (isDashboardWorkflowComputingUnit(value)) { this.type = EntityType.ComputingUnit; this.id = value.computingUnit.cuid; @@ -212,6 +234,13 @@ export class DashboardEntry { return this.value; } + get model(): DashboardModel { + if (!isDashboardModel(this.value)) { + throw new Error("Value is not of type DashboardModel"); + } + return this.value; + } + get computingUnit(): DashboardWorkflowComputingUnit { if (!isDashboardWorkflowComputingUnit(this.value)) { throw new Error("Value is not of type DashboardWorkflowComputingUnit"); diff --git a/frontend/src/app/dashboard/type/dashboard-model.interface.ts b/frontend/src/app/dashboard/type/dashboard-model.interface.ts new file mode 100644 index 00000000000..886ea250b53 --- /dev/null +++ b/frontend/src/app/dashboard/type/dashboard-model.interface.ts @@ -0,0 +1,28 @@ +/** + * 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 { Model } from "../../common/type/model"; + +export interface DashboardModel { + isOwner: boolean; + ownerEmail: string; + model: Model; + accessPrivilege: "READ" | "WRITE" | "NONE"; + size: number; +} diff --git a/frontend/src/app/dashboard/type/resource-descriptor.ts b/frontend/src/app/dashboard/type/resource-descriptor.ts new file mode 100644 index 00000000000..bfba83a1679 --- /dev/null +++ b/frontend/src/app/dashboard/type/resource-descriptor.ts @@ -0,0 +1,50 @@ +/** + * 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 { Observable } from "rxjs"; +import { DashboardEntry } from "./dashboard-entry"; +import { EntityType } from "../../hub/service/hub.service"; + +/** + * What one dashboard resource kind can do. Optional members are the capability check: a component + * asks `if (descriptor.rename)` instead of testing the entry type, so adding a resource is a new + * descriptor rather than another arm in every branch chain. + */ +export interface ResourceDescriptor { + readonly type: EntityType; + /** ng-zorro icon shown on this kind's cards and rows. */ + readonly iconType: string; + /** Route to the owner-facing page; absent when the kind has no page of its own. */ + readonly privateRoute?: string; + /** Route to the public hub page; absent when the kind is never browsed in the hub. */ + readonly hubRoute?: string; + /** Whether an entry of this kind carries a size worth showing. */ + readonly hasSize?: boolean; + isOwner(entry: DashboardEntry): boolean; + /** Applied when the user clears the name field; absent when the kind cannot be renamed. */ + readonly defaultName?: string; + /** Returns an error message, or null when the name is acceptable. */ + validateName?(name: string): string | null; + rename?(id: number, name: string): Observable; + updateDescription?(id: number, description: string): Observable; + /** Owners of this kind, for the filter dropdown. */ + retrieveOwners?(): Observable; + /** Entry ids of this kind; absent when the backend exposes no such endpoint. */ + retrieveIds?(): Observable; +} diff --git a/frontend/src/app/dashboard/type/search-result.ts b/frontend/src/app/dashboard/type/search-result.ts index 8fc14361b17..8f0e64364d1 100644 --- a/frontend/src/app/dashboard/type/search-result.ts +++ b/frontend/src/app/dashboard/type/search-result.ts @@ -24,7 +24,9 @@ import { DashboardDataset } from "./dashboard-dataset.interface"; import { DashboardEntry } from "./dashboard-entry"; export interface SearchResultItem { - resourceType: "workflow" | "project" | "file" | "dataset" | "computing-unit"; + // "model" is listed because EntityType carries it; nothing populates a model result until the hub + // and unified-search backend lands. + resourceType: "workflow" | "project" | "file" | "dataset" | "model" | "computing-unit"; workflow?: DashboardWorkflow; project?: DashboardProject; file?: DashboardFile; diff --git a/frontend/src/app/dashboard/type/type-predicates.ts b/frontend/src/app/dashboard/type/type-predicates.ts index 8c128b2c113..81002675710 100644 --- a/frontend/src/app/dashboard/type/type-predicates.ts +++ b/frontend/src/app/dashboard/type/type-predicates.ts @@ -21,6 +21,7 @@ import { DashboardWorkflow } from "./dashboard-workflow.interface"; import { DashboardProject } from "./dashboard-project.interface"; import { DashboardFile } from "./dashboard-file.interface"; import { DashboardDataset } from "./dashboard-dataset.interface"; +import { DashboardModel } from "./dashboard-model.interface"; import { DashboardWorkflowComputingUnit } from "../../common/type/workflow-computing-unit"; import { isNonNullObject } from "../../common/util/predicate"; @@ -40,6 +41,10 @@ export function isDashboardDataset(value: any): value is DashboardDataset { return !!value && isNonNullObject(value.dataset); } +export function isDashboardModel(value: any): value is DashboardModel { + return !!value && isNonNullObject(value.model); +} + export function isDashboardWorkflowComputingUnit(value: any): value is DashboardWorkflowComputingUnit { return !!value && isNonNullObject(value.computingUnit); } diff --git a/frontend/src/app/hub/component/hub.component.spec.ts b/frontend/src/app/hub/component/hub.component.spec.ts index 5a883606394..dae531e4a52 100644 --- a/frontend/src/app/hub/component/hub.component.spec.ts +++ b/frontend/src/app/hub/component/hub.component.spec.ts @@ -44,6 +44,7 @@ function makeSidebarTabs(overrides: Partial = {}): SidebarTabs { workflows_enabled: false, compute_enabled: false, datasets_enabled: false, + models_enabled: false, quota_enabled: false, forum_enabled: false, about_enabled: false, diff --git a/frontend/src/app/hub/service/hub.service.ts b/frontend/src/app/hub/service/hub.service.ts index 4562ae9c8c8..61913fad3a2 100644 --- a/frontend/src/app/hub/service/hub.service.ts +++ b/frontend/src/app/hub/service/hub.service.ts @@ -29,6 +29,7 @@ export const WORKFLOW_BASE_URL = `${AppSettings.getApiEndpoint()}/workflow`; export enum EntityType { Workflow = "workflow", Dataset = "dataset", + Model = "model", Project = "project", File = "file", ComputingUnit = "computing-unit", From aa95760fa640c3ab1fc6d2e9d25cd3e90a43f727 Mon Sep 17 00:00:00 2001 From: Tanishq Gandhi Date: Thu, 27 Aug 2026 23:29:32 -0700 Subject: [PATCH 2/2] fix(frontend, file-service): address review findings on the Models page --- .licenserc.yaml | 2 + LICENSE | 6 +++ .../service/resource/ModelResource.scala | 3 +- .../service/resource/ResourceAccess.scala | 38 ++++++++++--------- .../service/resource/ModelResourceSpec.scala | 16 +++++--- frontend/src/app/app.component.ts | 8 +++- frontend/src/app/common/icon/model-icon.ts | 11 ++++++ .../settings/admin-settings.component.spec.ts | 13 ++++++- .../component/dashboard.component.html | 2 +- .../component/dashboard.component.ts | 2 + .../user-model-creator.component.spec.ts | 35 ++++++++++++++++- .../user-model-creator.component.ts | 17 ++++++++- .../user-model/user-model.component.spec.ts | 15 ++++---- .../user/user-model/user-model.component.ts | 7 +--- .../model-resource.descriptor.ts | 7 ++-- .../resource-registry.service.spec.ts | 13 +++++-- 16 files changed, 144 insertions(+), 51 deletions(-) create mode 100644 frontend/src/app/common/icon/model-icon.ts diff --git a/.licenserc.yaml b/.licenserc.yaml index a9fcde7e3b9..fc97bf09f19 100644 --- a/.licenserc.yaml +++ b/.licenserc.yaml @@ -52,6 +52,8 @@ header: - 'frontend/src/assets/svg/operator-reuse-cache-invalid.svg' - 'frontend/src/assets/svg/operator-reuse-cache-valid.svg' - 'frontend/src/assets/notebook_migration_tool/jupyter-logo.svg' + # Third-party icon glyph - see LICENSE file for attribution + - 'frontend/src/app/common/icon/model-icon.ts' - 'frontend/src/app/common/type/proto/org/apache/texera/amber/core/virtualidentity.ts' - 'frontend/src/app/common/type/proto/org/apache/texera/amber/core/workflow.ts' - 'frontend/src/app/common/type/proto/google/protobuf/descriptor.ts' diff --git a/LICENSE b/LICENSE index b73a5017149..9e1e228eb23 100644 --- a/LICENSE +++ b/LICENSE @@ -232,6 +232,12 @@ This product bundles code derived from TypeFox monaco-languageclient: Source: https://github.com/TypeFox/monaco-languageclient License: MIT License (licenses-3rd-party-code/monaco-languageclient.txt) +This product includes an icon from Google's Material Symbols: + - frontend/src/app/common/icon/model-icon.ts ("hub") + Copyright (c) Google LLC + Source: https://github.com/google/material-design-icons + License: Apache License 2.0 (this LICENSE file) + This product includes SVG icons from SVGRepo: - frontend/src/assets/svg/operator-view-result.svg - frontend/src/assets/svg/operator-reuse-cache-valid.svg diff --git a/file-service/src/main/scala/org/apache/texera/service/resource/ModelResource.scala b/file-service/src/main/scala/org/apache/texera/service/resource/ModelResource.scala index 54cf7cc5ce8..80a69cbda2a 100644 --- a/file-service/src/main/scala/org/apache/texera/service/resource/ModelResource.scala +++ b/file-service/src/main/scala/org/apache/texera/service/resource/ModelResource.scala @@ -501,7 +501,8 @@ class ModelResource extends LazyLogging { MODEL_RESOURCE, uid, classOf[Model], - (model: Model) => model.getMid + (model: Model) => model.getMid, + includePublic = false )( fromGrant = (model, ownerEmail, privilege, isOwner) => Some( diff --git a/file-service/src/main/scala/org/apache/texera/service/resource/ResourceAccess.scala b/file-service/src/main/scala/org/apache/texera/service/resource/ResourceAccess.scala index 3276d32b68d..b12204877d7 100644 --- a/file-service/src/main/scala/org/apache/texera/service/resource/ResourceAccess.scala +++ b/file-service/src/main/scala/org/apache/texera/service/resource/ResourceAccess.scala @@ -187,7 +187,8 @@ object ResourceAccess { resource: ResourceTables[R, A], uid: Integer, pojoClass: Class[P], - idOf: P => Integer + idOf: P => Integer, + includePublic: Boolean = true )( fromGrant: (P, String, PrivilegeEnum, Boolean) => Option[D], fromPublic: (P, String) => Option[D] @@ -216,22 +217,25 @@ object ResourceAccess { val grantedIds = granted.map(_._1).toSet - val public = ctx - .select() - .from( - resource.table - .leftJoin(USER) - .on(USER.UID.eq(resource.ownerUidField)) - ) - .where(resource.isPublicField.eq(true)) - .fetch() - .asScala - .toList - .flatMap { record => - val entity = record.into(resource.table).into(pojoClass) - if (grantedIds.contains(idOf(entity))) None - else fromPublic(entity, record.into(USER).getEmail) - } + val public = + if (!includePublic) Nil + else + ctx + .select() + .from( + resource.table + .leftJoin(USER) + .on(USER.UID.eq(resource.ownerUidField)) + ) + .where(resource.isPublicField.eq(true)) + .fetch() + .asScala + .toList + .flatMap { record => + val entity = record.into(resource.table).into(pojoClass) + if (grantedIds.contains(idOf(entity))) None + else fromPublic(entity, record.into(USER).getEmail) + } granted.map(_._2) ++ public } diff --git a/file-service/src/test/scala/org/apache/texera/service/resource/ModelResourceSpec.scala b/file-service/src/test/scala/org/apache/texera/service/resource/ModelResourceSpec.scala index 218eb244707..01147f234e8 100644 --- a/file-service/src/test/scala/org/apache/texera/service/resource/ModelResourceSpec.scala +++ b/file-service/src/test/scala/org/apache/texera/service/resource/ModelResourceSpec.scala @@ -492,7 +492,7 @@ class ModelResourceSpec } } - "listModels" should "include public models owned by another user" in { + "listModels" should "omit public models owned by another user" in { val othersPublic = modelResource.createModel( ModelResource.CreateModelRequest( modelName = "others-public-model", @@ -505,10 +505,14 @@ class ModelResourceSpec sessionUser2 ) - val listed = modelResource.listModels(sessionUser) - val entry = listed.find(_.model.getMid == othersPublic.model.getMid) - entry should not be empty - entry.get.isOwner shouldBe false - entry.get.accessPrivilege shouldEqual PrivilegeEnum.READ + // /model/list backs the "Your Work" page, so it lists only what the caller was granted. + // Public models are discovered through the hub and fetched with getPublicModel. + modelResource + .listModels(sessionUser) + .find(_.model.getMid == othersPublic.model.getMid) shouldBe empty + modelResource + .getPublicModel(othersPublic.model.getMid) + .model + .getMid shouldEqual othersPublic.model.getMid } } diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index aae87fe4a93..f12d8c44ad1 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -22,6 +22,8 @@ import { GuiConfigService } from "./common/service/gui-config.service"; import { DeploymentVersionService } from "./common/service/deployment-version/deployment-version.service"; import { Version } from "../environments/version"; import { UntilDestroy } from "@ngneat/until-destroy"; +import { NzIconService } from "ng-zorro-antd/icon"; +import { MODEL_ICON, MODEL_ICON_SVG } from "./common/icon/model-icon"; @UntilDestroy() @Component({ @@ -44,8 +46,12 @@ export class AppComponent { constructor( private configService: GuiConfigService, - private deploymentVersionService: DeploymentVersionService + private deploymentVersionService: DeploymentVersionService, + iconService: NzIconService ) { + // ng-zorro has no icon that reads as an ML model, so this one is registered from Material Symbols. + iconService.addIconLiteral(MODEL_ICON, MODEL_ICON_SVG); + // determine whether configuration was successfully loaded by APP_INITIALIZER try { // accessing env will throw if not loaded diff --git a/frontend/src/app/common/icon/model-icon.ts b/frontend/src/app/common/icon/model-icon.ts new file mode 100644 index 00000000000..0f0b8417595 --- /dev/null +++ b/frontend/src/app/common/icon/model-icon.ts @@ -0,0 +1,11 @@ +/* + * Material Symbols "hub", from Google's material-design-icons. + * Apache License 2.0 — see the LICENSE file at the repository root for attribution. + * https://github.com/google/material-design-icons + */ + +/** Namespaced name to pass as `nzType`, once registered with NzIconService. */ +export const MODEL_ICON = "texera:model"; + +export const MODEL_ICON_SVG = + ''; diff --git a/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.spec.ts b/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.spec.ts index 9ca24367574..637a516ee8a 100644 --- a/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.spec.ts +++ b/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.spec.ts @@ -648,7 +648,18 @@ describe("AdminSettingsComponent wiring", () => { }); it("locks the Your Work children until Your Work itself is on", () => { - const yourWorkChildren = [5, 6, 7, 8, 9, 10]; + // Indexed by key, not position: adding a tab shifts these and would silently drop one. + const yourWorkChildren = ( + [ + "projects_enabled", + "workflows_enabled", + "datasets_enabled", + "models_enabled", + "compute_enabled", + "quota_enabled", + "forum_enabled", + ] as const + ).map(key => SWITCH_KEYS.indexOf(key)); component.sidebarTabs.your_work_enabled = false; fixture.detectChanges(); diff --git a/frontend/src/app/dashboard/component/dashboard.component.html b/frontend/src/app/dashboard/component/dashboard.component.html index 1bb5a0667c7..515bf7247b2 100644 --- a/frontend/src/app/dashboard/component/dashboard.component.html +++ b/frontend/src/app/dashboard/component/dashboard.component.html @@ -106,7 +106,7 @@ [routerLink]="USER_MODEL"> + [nzType]="MODEL_ICON"> Models
  • { ); }); - it("surfaces the server message and closes with null when creation fails", async () => { + it("refuses a name that sanitizes to nothing, without calling the backend", async () => { + // Whitespace survives `required` but sanitizes to "", which the backend answers with a 400. + // Punctuation does not belong here: "!!" sanitizes to "-", which is a legal name. + const fixture = await createFixture(); + fixture.detectChanges(); + const component = fixture.componentInstance; + + for (const typed of [" ", "\t\n "]) { + notifyError.mockClear(); + component.form.get("name")?.setValue(typed); + component.onClickCreate(); + + expect(notifyError).toHaveBeenCalledWith("Model name cannot be empty."); + } + expect(createModel).not.toHaveBeenCalled(); + expect(modalClose).not.toHaveBeenCalled(); + }); + + it("refuses a name past the length limit, without calling the backend", async () => { + const fixture = await createFixture(); + fixture.detectChanges(); + const component = fixture.componentInstance; + + component.form.get("name")?.setValue("a".repeat(129)); + component.onClickCreate(); + + expect(createModel).not.toHaveBeenCalled(); + expect(notifyError).toHaveBeenCalledWith(expect.stringContaining("Invalid model name")); + }); + + it("surfaces the server message and keeps the modal open when creation fails", async () => { const fixture = await createFixture(); fixture.detectChanges(); const component = fixture.componentInstance; @@ -172,7 +202,8 @@ describe("UserModelCreatorComponent", () => { component.onClickCreate(); expect(notifyError).toHaveBeenCalledWith("Model dupe creation failed: name already taken"); - expect(modalClose).toHaveBeenCalledWith(null); + // The modal stays open so the rejected name can be corrected rather than retyped. + expect(modalClose).not.toHaveBeenCalled(); expect(component.isCreating).toBe(false); }); diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts index 2da751c0c29..44696238042 100644 --- a/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts +++ b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts @@ -30,7 +30,12 @@ import { NzButtonComponent } from "ng-zorro-antd/button"; import { NzWaveDirective } from "ng-zorro-antd/core/wave"; import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch"; -import { MODEL_FORMATS, MODEL_FRAMEWORKS, ModelService } from "../../../../service/user/model/model.service"; +import { + MODEL_FORMATS, + MODEL_FRAMEWORKS, + ModelService, + validateModelName, +} from "../../../../service/user/model/model.service"; import { Model } from "../../../../../common/type/model"; import { NotificationService } from "../../../../../common/service/notification/notification.service"; @@ -141,6 +146,14 @@ export class UserModelCreatorComponent implements OnInit { const sanitizedName = sanitizeModelName(originalName); this.isModelNameSanitized = sanitizedName !== originalName; + // A name of only punctuation or whitespace sanitizes to "", which passes `required` but the + // backend rejects. Check the sanitized name against the same rule the rename path uses. + const nameError = sanitizedName === "" ? "Model name cannot be empty." : validateModelName(sanitizedName); + if (nameError) { + this.notificationService.error(nameError); + return; + } + const model: Model = { name: sanitizedName, description: this.form.get("description")?.value ?? "", @@ -171,8 +184,8 @@ export class UserModelCreatorComponent implements OnInit { error: (res: unknown) => { const err = res as HttpErrorResponse; this.notificationService.error(`Model ${sanitizedName} creation failed: ${err.error?.message}`); + // Left open on purpose, so a rejected name can be corrected rather than retyped. this.isCreating = false; - this.modalRef.close(null); }, }); } diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts b/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts index 3e105115148..2b7b28b6171 100644 --- a/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts +++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts @@ -33,7 +33,6 @@ import { ModelService } from "../../../service/user/model/model.service"; import { DashboardEntry } from "../../../type/dashboard-entry"; import { SortMethod } from "../../../type/sort-method"; import { EntityType } from "../../../../hub/service/hub.service"; -import { USER_MODEL } from "../../../../app-routing.constant"; import { User } from "../../../../common/type/user"; import { UserModelComponent } from "./user-model.component"; import { UserModelCreatorComponent } from "./user-model-creator/user-model-creator.component"; @@ -48,7 +47,6 @@ describe("UserModelComponent", () => { let getCurrentUserSpy: ReturnType; let modalServiceMock: { create: ReturnType }; - let routerMock: { navigate: ReturnType }; let searchServiceMock: { getUserInfo: ReturnType }; let modelServiceMock: { deleteModel: ReturnType; @@ -101,7 +99,6 @@ describe("UserModelComponent", () => { modalAfterClose = new Subject(); modalServiceMock = { create: vi.fn(() => ({ afterClose: modalAfterClose.asObservable() })) }; - routerMock = { navigate: vi.fn() }; searchServiceMock = { getUserInfo: vi.fn(() => of({})) }; modelServiceMock = { deleteModel: vi.fn(() => of({} as Response)), @@ -111,7 +108,6 @@ describe("UserModelComponent", () => { component = new UserModelComponent( modalServiceMock as any, userServiceMock as any, - routerMock as any, searchServiceMock as any, modelServiceMock as any ); @@ -296,7 +292,9 @@ describe("UserModelComponent", () => { // ─── create ─────────────────────────────────────────────────────────────── - it("opens the creator and navigates to whatever it created", () => { + it("opens the creator and refreshes the list with whatever it created", () => { + // There is no model detail page yet, so the new model has to appear in this list instead. + const searchSpy = vi.spyOn(component, "search").mockResolvedValue(); component.onClickOpenModelAddComponent(); expect(modalServiceMock.create).toHaveBeenCalledWith( @@ -305,15 +303,16 @@ describe("UserModelComponent", () => { modalAfterClose.next({ model: { mid: 9 } }); - expect(routerMock.navigate).toHaveBeenCalledWith([`${USER_MODEL}/9`]); + expect(searchSpy).toHaveBeenCalledWith(true); }); - it("stays put when the creator was cancelled", () => { + it("does not refresh when the creator was cancelled", () => { + const searchSpy = vi.spyOn(component, "search").mockResolvedValue(); component.onClickOpenModelAddComponent(); modalAfterClose.next(null); - expect(routerMock.navigate).not.toHaveBeenCalled(); + expect(searchSpy).not.toHaveBeenCalled(); }); // ─── delete ─────────────────────────────────────────────────────────────── diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts b/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts index 940917b3f73..907bc4ca3e6 100644 --- a/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts +++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts @@ -19,7 +19,6 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; import { AfterViewInit, Component, ViewChild } from "@angular/core"; -import { Router } from "@angular/router"; import { firstValueFrom } from "rxjs"; import { isDefined } from "../../../../common/util/predicate"; import { NzModalService } from "ng-zorro-antd/modal"; @@ -37,7 +36,6 @@ import { ModelService } from "../../../service/user/model/model.service"; import { SortMethod } from "../../../type/sort-method"; import { DashboardEntry } from "../../../type/dashboard-entry"; import { DashboardModel } from "../../../type/dashboard-model.interface"; -import { USER_MODEL } from "../../../../app-routing.constant"; import { SearchResultsComponent } from "../search-results/search-results.component"; import { CardItemComponent } from "../list-item/card-item/card-item.component"; import { SortButtonComponent } from "../sort-button/sort-button.component"; @@ -93,7 +91,6 @@ export class UserModelComponent implements AfterViewInit { constructor( private modalService: NzModalService, private userService: UserService, - private router: Router, private searchService: SearchService, private modelService: ModelService ) { @@ -221,10 +218,10 @@ export class UserModelComponent implements AfterViewInit { nzWidth: "fit-content", }); + // Refreshes rather than opening the new model: it has no detail page yet. modal.afterClose.pipe(untilDestroyed(this)).subscribe(result => { if (result != null) { - const created = result as DashboardModel; - this.router.navigate([`${USER_MODEL}/${created.model.mid}`]); + void this.search(true); } }); } diff --git a/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts index 801ba0931b9..25b36b03ab4 100644 --- a/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts +++ b/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts @@ -22,15 +22,16 @@ import { DashboardEntry } from "../../../type/dashboard-entry"; import { ResourceDescriptor } from "../../../type/resource-descriptor"; import { EntityType } from "../../../../hub/service/hub.service"; import { DEFAULT_MODEL_NAME, ModelService, validateModelName } from "../model/model.service"; -import { USER_MODEL } from "../../../../app-routing.constant"; +import { MODEL_ICON } from "../../../../common/icon/model-icon"; @Injectable({ providedIn: "root", }) export class ModelResourceDescriptor implements ResourceDescriptor { readonly type = EntityType.Model; - readonly iconType = "experiment"; - readonly privateRoute = USER_MODEL; + readonly iconType = MODEL_ICON; + // `privateRoute` is deliberately absent: /user/model/:mid has no component yet, so + // entryLink returns [] and a model card does not navigate. readonly hasSize = true; readonly defaultName = DEFAULT_MODEL_NAME; diff --git a/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts index 963c4b13d80..4701cf643e4 100644 --- a/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts +++ b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts @@ -30,11 +30,11 @@ import { HUB_DATASET_RESULT_DETAIL, HUB_WORKFLOW_RESULT_DETAIL, USER_DATASET, - USER_MODEL, USER_PROJECT, USER_WORKSPACE, } from "../../../../app-routing.constant"; import { commonTestProviders } from "../../../../common/testing/test-utils"; +import { MODEL_ICON } from "../../../../common/icon/model-icon"; const entry = (overrides: Partial>): DashboardEntry => ({ id: 7, accessibleUserIds: [], ...overrides }) as unknown as DashboardEntry; @@ -83,7 +83,7 @@ describe("ResourceRegistryService", () => { expect(registry.get(EntityType.Dataset).iconType).toBe("database"); expect(registry.get(EntityType.Project).iconType).toBe("container"); expect(registry.get(EntityType.File).iconType).toBe("folder-open"); - expect(registry.get(EntityType.Model).iconType).toBe("experiment"); + expect(registry.get(EntityType.Model).iconType).toBe(MODEL_ICON); }); it("refuses a kind it does not carry", () => { @@ -163,9 +163,14 @@ describe("ResourceRegistryService", () => { }); it("routes a kind with no hub page straight to its private page", () => { - // Projects have no hub presence, and models do not get one until the hub UI lands. + // Projects have no hub presence, so access lists never come into it. expect(registry.entryLink(entry({ type: EntityType.Project, id: 3 }), undefined)).toEqual([USER_PROJECT, "3"]); - expect(registry.entryLink(entry({ type: EntityType.Model, id: 9 }), 42)).toEqual([USER_MODEL, "9"]); + }); + + it("leaves models unrouted until they have a page to open", () => { + // /user/model/:mid has no component yet; a link would hit the ** wildcard and land on Workflows. + expect(registry.get(EntityType.Model).privateRoute).toBeUndefined(); + expect(registry.entryLink(entry({ type: EntityType.Model, id: 9 }), 42)).toEqual([]); }); it("leaves an unroutable or unsaved entry unlinked", () => {