chore(console): refine tag related pages (#2599)

star-whale · Aug 9, 2023 · daf2ee7 · daf2ee7
1 parent 898e871
commit daf2ee7
Show file tree

Hide file tree

Showing 21 changed files with 89 additions and 263 deletions.
diff --git a/console/src/components/Alias.tsx b/console/src/components/Alias.tsx
@@ -21,6 +21,7 @@ export function Alias({ alias = '' }: { alias?: string }) {
                             border: '1px solid #CFD7E6 ',
                             padding: '2px 8px',
                             color: '#02102B',
+                            whiteSpace: 'nowrap',
                         }}
                     >
                         {item}
@@ -49,6 +50,7 @@ const tagOverrides = {
     Text: {
         style: {
             fontSize: '14px',
+            maxWidth: null,
         },
     },
 }

diff --git a/console/src/domain/dataset/schemas/datasetVersion.tsx b/console/src/domain/dataset/schemas/datasetVersion.tsx
@@ -9,6 +9,7 @@ export interface IDatasetVersionSchema extends IResourceSchema, IHasTagSchema {
     meta: string
     owner?: IUserSchema
     shared?: number
+    indexTable?: string
 }
 
 export interface IDatasetTreeVersionSchema extends IDatasetVersionSchema {
@@ -19,14 +20,8 @@ export interface IDatasetTreeVersionSchema extends IDatasetVersionSchema {
 export interface IDatasetVersionDetailSchema {
     id?: string
     name?: string
-    createdTime?: number
-    versionMeta?: string
-    versionName?: string
-    versionTag?: string
-    versionAlias?: string
     files?: Array<IDatasetFileSchema>
-    indexTable?: string
-    shared?: number
+    versionInfo: IDatasetVersionSchema
 }
 
 export interface IUpdateDatasetVersionSchema {

diff --git a/console/src/domain/model/schemas/modelVersion.tsx b/console/src/domain/model/schemas/modelVersion.tsx
@@ -16,19 +16,14 @@ export interface IModelTreeVersionSchema extends IModelVersionSchema {
     createdTime?: number
 }
 
-export interface IModelVersionListSchema extends IResourceSchema, IFileSchema {
-    name: string
-    versionName: string
-    versionMeta: string
-    versionTag: string
-    versionAlias: string
-    manifest: string
-    createdTime?: number
-    shared?: number
+export interface IModelVersionDetailSchema extends IResourceSchema {
+    versionInfo: IModelVersionSchema
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IModelVersionDetailSchema extends IModelVersionListSchema {}
+export interface IModelVersionDiffSchema {
+    baseVersion: IFileSchema
+    compareVersion: IFileSchema
+}
 
 export interface IUpdateModelVersionSchema {
     tag: string

diff --git a/console/src/domain/model/services/modelVersion.ts b/console/src/domain/model/services/modelVersion.ts
@@ -5,6 +5,7 @@ import {
     IModelVersionSchema,
     IUpdateModelVersionSchema,
     IModelVersionDetailSchema,
+    IModelVersionDiffSchema,
 } from '../schemas/modelVersion'
 import { IFileSchema } from '@/domain/base/schemas/file'
 
@@ -33,7 +34,11 @@ export async function listModelVersionFiles(
     return resp.data
 }
 
-export async function fetchModelVersion(projectId: string, modelId: string, modelVersionId: string): Promise<any> {
+export async function fetchModelVersion(
+    projectId: string,
+    modelId: string,
+    modelVersionId: string
+): Promise<IModelVersionDetailSchema> {
     const resp = await axios.get<IModelVersionDetailSchema>(
         `/api/v1/project/${projectId}/model/${modelId}?versionUrl=${modelVersionId}`
     )
@@ -45,8 +50,8 @@ export async function fetchModelVersionDiff(
     modelId: string,
     modelVersionId: string,
     compareVersion: string
-): Promise<any> {
-    const resp = await axios.get<IModelVersionDetailSchema>(
+): Promise<IModelVersionDiffSchema> {
+    const resp = await axios.get<IModelVersionDiffSchema>(
         `/api/v1/project/${projectId}/model/${modelId}/diff?baseVersion=${modelVersionId}&compareVersion=${compareVersion}`
     )
     return resp.data

diff --git a/console/src/domain/runtime/schemas/runtime.tsx b/console/src/domain/runtime/schemas/runtime.tsx
@@ -1,5 +1,5 @@
 import { IResourceSchema } from '@/domain/base/schemas/resource'
-import { IUserSchema } from '../../user/schemas/user'
+import { IUserSchema } from '@user/schemas/user'
 import { IRuntimeTreeVersionSchema, IRuntimeVersionSchema } from './runtimeVersion'
 
 export interface IRuntimeSchema extends IResourceSchema {
@@ -9,31 +9,17 @@ export interface IRuntimeSchema extends IResourceSchema {
 }
 
 export interface IRuntimeDetailSchema {
+    id?: string
     name?: string
-    versionMeta?: string
-    versionName?: string
-    versionTag?: string
-    versionAlias?: string
-    createdTime?: number
     files?: Array<IRuntimeFileSchema>
-    id?: string
-    shared?: number
+    versionInfo: IRuntimeVersionSchema
 }
 
 export interface IRuntimeFileSchema {
     name: string
     size: string
 }
 
-export interface IUpdateRuntimeSchema {
-    description?: string
-}
-
-export interface ICreateRuntimeSchema {
-    modelName: string
-    zipFile?: FileList
-}
-
 export interface IRuntimeTreeSchema {
     ownerName: string
     projectName: string

diff --git a/console/src/domain/runtime/schemas/runtimeVersion.tsx b/console/src/domain/runtime/schemas/runtimeVersion.tsx
@@ -9,22 +9,14 @@ export interface IRuntimeVersionSchema extends IResourceSchema, IHasTagSchema {
     builtImage: string
     runtimeId: string
     shared?: number
+    meta: string
 }
 
 export interface IRuntimeTreeVersionSchema extends IRuntimeVersionSchema {
     versionName?: string
     createdTime?: number
 }
 
-export interface IRuntimeVersionListSchema extends IResourceSchema {
-    name: string
-    versionName: string
-    versionMeta: string
-    versionTag: string
-    versionAlias: string
-    manifest: string
-}
-
 export interface IRuntimeVersionDetailSchema extends IRuntimeVersionSchema {
     modelName?: string
 }
@@ -33,10 +25,6 @@ export interface IUpdateRuntimeVersionSchema {
     tag: string
 }
 
-export interface ICreateRuntimeVersionSchema {
-    file?: File
-}
-
 export interface IRuntimeVersionListQuerySchema extends IListQuerySchema {
     vName?: string
     vTag?: string

diff --git a/console/src/domain/runtime/services/runtime.ts b/console/src/domain/runtime/services/runtime.ts
@@ -9,7 +9,11 @@ export async function listRuntimes(projectId: string, query: IListQuerySchema):
     return resp.data
 }
 
-export async function fetchRuntime(projectId: string, runtimeId: string, versionUrl?: string): Promise<any> {
+export async function fetchRuntime(
+    projectId: string,
+    runtimeId: string,
+    versionUrl?: string
+): Promise<IRuntimeDetailSchema> {
     const config = { params: versionUrl ? { versionUrl } : {} }
     const resp = await axios.get<IRuntimeDetailSchema>(`/api/v1/project/${projectId}/runtime/${runtimeId}`, config)
     return resp.data

diff --git a/console/src/pages/Dataset/DatasetOverviewLayout.tsx b/console/src/pages/Dataset/DatasetOverviewLayout.tsx
@@ -63,7 +63,7 @@ export default function DatasetOverviewLayout({ children }: IDatasetLayoutProps)
         pageNum: 1,
         pageSize: 1,
     })
-    const { columnTypes } = useFetchDatastoreByTable(getQueryParams(datasetVersion?.indexTable), true)
+    const { columnTypes } = useFetchDatastoreByTable(getQueryParams(datasetVersion?.versionInfo.indexTable), true)
 
     const breadcrumbItems: INavItem[] = useMemo(() => {
         const items = [

diff --git a/console/src/pages/Dataset/DatasetVersionOverview.tsx b/console/src/pages/Dataset/DatasetVersionOverview.tsx
@@ -10,6 +10,7 @@ import Shared from '@/components/Shared'
 import { Alias } from '@/components/Alias'
 import { MonoText } from '@/components/Text'
 import { useProject } from '@project/hooks/useProject'
+import { getAliasStr } from '@base/utils/alias'
 
 export default function DatasetVersionOverview() {
     const { projectId, datasetId, datasetVersionId } = useParams<{
@@ -29,11 +30,11 @@ export default function DatasetVersionOverview() {
         },
         {
             label: t('Version Name'),
-            value: <MonoText>{dataset?.versionName ?? '-'} </MonoText>,
+            value: <MonoText>{dataset?.versionInfo.name ?? '-'} </MonoText>,
         },
         {
             label: t('Aliases'),
-            value: <Alias alias={dataset?.versionAlias} />,
+            value: dataset ? <Alias alias={getAliasStr(dataset.versionInfo)} /> : null,
         },
         {
             label: t('dataset.overview.shared'),
@@ -46,9 +47,9 @@ export default function DatasetVersionOverview() {
                         gap: '4px',
                     }}
                 >
-                    <Shared shared={dataset?.shared} isTextShow />
+                    <Shared shared={dataset?.versionInfo.shared} isTextShow />
                     <Toggle
-                        value={dataset?.shared === 1}
+                        value={dataset?.versionInfo.shared === 1}
                         onChange={async (v) => {
                             try {
                                 await updateDatasetVersionShared(projectId, datasetId, datasetVersionId, v)
@@ -65,7 +66,7 @@ export default function DatasetVersionOverview() {
         },
         {
             label: t('Created At'),
-            value: dataset?.createdTime && formatTimestampDateTime(dataset.createdTime),
+            value: dataset?.versionInfo.createdTime && formatTimestampDateTime(dataset.versionInfo.createdTime),
         },
     ].filter((item) => {
         // hide shared if project is private

diff --git a/console/src/pages/Dataset/DatasetVersionOverviewFiles.tsx b/console/src/pages/Dataset/DatasetVersionOverviewFiles.tsx
@@ -94,8 +94,8 @@ export default function DatasetVersionFiles() {
     const styles = useCardStyles()
     const { datasetVersion } = useDatasetVersion()
     const { revision } = React.useMemo(() => {
-        return getMeta(datasetVersion?.versionMeta as string)
-    }, [datasetVersion?.versionMeta])
+        return getMeta(datasetVersion?.versionInfo.meta as string)
+    }, [datasetVersion?.versionInfo.meta])
     const { query } = useQueryArgs()
     const extra = React.useMemo(() => {
         return {
@@ -118,16 +118,16 @@ export default function DatasetVersionFiles() {
     })
 
     const { records, columnTypes } = useFetchDatastoreByTable(
-        getQueryParams(datasetVersion?.indexTable, extra),
-        !!datasetVersion?.indexTable
+        getQueryParams(datasetVersion?.versionInfo.indexTable, extra),
+        !!datasetVersion?.versionInfo.indexTable
     )
 
     const options = React.useMemo(
         () => ({
             parseLink: parseDataSrc(
                 projectId,
                 datasetVersion?.name as string,
-                datasetVersion?.versionName as string,
+                datasetVersion?.versionInfo.name as string,
                 token as string
             ),
             showPrivate: false,

diff --git a/console/src/pages/Dataset/DatasetVersionOverviewMeta.tsx b/console/src/pages/Dataset/DatasetVersionOverviewMeta.tsx
@@ -8,9 +8,9 @@ export default function DatasetVersionMeta() {
     const { datasetVersion: dataset } = useDatasetVersion()
 
     const jsonData = useMemo(() => {
-        if (!dataset?.versionMeta) return {}
-        return yaml.load(dataset?.versionMeta)
-    }, [dataset?.versionMeta])
+        if (!dataset?.versionInfo.meta) return {}
+        return yaml.load(dataset?.versionInfo.meta)
+    }, [dataset?.versionInfo.meta])
 
     return (
         <Card

diff --git a/console/src/pages/Model/ModelListCard.tsx b/console/src/pages/Model/ModelListCard.tsx
@@ -14,6 +14,9 @@ import { useFetchModels } from '@model/hooks/useFetchModels'
 import { TextLink } from '@/components/Link'
 import { Button } from '@starwhale/ui'
 import { WithCurrentAuth } from '@/api/WithAuth'
+import { MonoText } from '@starwhale/ui/Text'
+import Alias from '@/components/Alias'
+import { getAliasStr } from '@base/utils/alias'
 
 export default function ModelListCard() {
     const [page] = usePage()
@@ -36,7 +39,14 @@ export default function ModelListCard() {
         <Card title={t('Models')}>
             <Table
                 isLoading={modelsInfo.isLoading}
-                columns={[t('sth name', [t('Model')]), t('Owner'), t('Created'), t('Action')]}
+                columns={[
+                    t('sth name', [t('Model')]),
+                    t('Model Version'),
+                    t('Alias'),
+                    t('Owner'),
+                    t('Created'),
+                    t('Action'),
+                ]}
                 data={
                     modelsInfo.data?.list.map((model) => {
                         return [
@@ -46,6 +56,8 @@ export default function ModelListCard() {
                             >
                                 {model.name}
                             </TextLink>,
+                            <MonoText key='name'>{model.version?.name ?? '-'}</MonoText>,
+                            model.version && <Alias key='alias' alias={getAliasStr(model.version)} />,
                             model.owner && <User user={model.owner} />,
                             model.createdTime && formatTimestampDateTime(model.createdTime),
                             <div key='action' style={{ display: 'flex', gap: '5px' }}>

diff --git a/console/src/pages/Model/ModelVersionOverview.tsx b/console/src/pages/Model/ModelVersionOverview.tsx
@@ -10,6 +10,7 @@ import { toaster } from 'baseui/toast'
 import { useParams } from 'react-router-dom'
 import { fetchModelVersion, updateModelVersionShared } from '@/domain/model/services/modelVersion'
 import { useProject } from '@project/hooks/useProject'
+import { getAliasStr } from '@base/utils/alias'
 
 export default function ModelVersionOverview() {
     const { projectId, modelId, modelVersionId } = useParams<{
@@ -28,11 +29,11 @@ export default function ModelVersionOverview() {
         },
         {
             label: t('Version Name'),
-            value: <MonoText>{modelVersion?.versionName ?? '-'} </MonoText>,
+            value: <MonoText>{modelVersion?.versionInfo.name ?? '-'} </MonoText>,
         },
         {
             label: t('Aliases'),
-            value: <Alias alias={modelVersion?.versionAlias} />,
+            value: modelVersion ? <Alias alias={getAliasStr(modelVersion.versionInfo)} /> : null,
         },
         {
             label: t('Shared'),
@@ -45,9 +46,9 @@ export default function ModelVersionOverview() {
                         gap: '4px',
                     }}
                 >
-                    <Shared shared={modelVersion?.shared} isTextShow />
+                    <Shared shared={modelVersion?.versionInfo.shared} isTextShow />
                     <Toggle
-                        value={modelVersion?.shared === 1}
+                        value={modelVersion?.versionInfo.shared === 1}
                         onChange={async (v) => {
                             try {
                                 await updateModelVersionShared(projectId, modelId, modelVersionId, v)
@@ -64,7 +65,8 @@ export default function ModelVersionOverview() {
         },
         {
             label: t('Created At'),
-            value: modelVersion?.createdTime && formatTimestampDateTime(modelVersion.createdTime),
+            value:
+                modelVersion?.versionInfo.createdTime && formatTimestampDateTime(modelVersion?.versionInfo.createdTime),
         },
     ].filter((item) => {
         return project?.privacy === 'PUBLIC' || item.label !== t('Shared')

diff --git a/console/src/pages/Model/ModelVersionOverviewFiles.tsx b/console/src/pages/Model/ModelVersionOverviewFiles.tsx
@@ -160,7 +160,7 @@ export default function ModelVersionFiles() {
         if (!isText(sourceFile) || isTooBig(sourceFile)) return
         // console.log(sourceFile)
         if (sourceFile.flag !== 'added') {
-            loadFileData(sourceFile, modelVersion?.versionName)
+            loadFileData(sourceFile, modelVersion?.versionInfo.name)
                 .then((text: string) => {
                     setContent(text || ' ')
                 })
@@ -172,7 +172,7 @@ export default function ModelVersionFiles() {
         }
         if (!query.compare) return
         if (sourceFile.flag !== 'deleted') {
-            loadFileData(sourceFile, compareVersionInfo.data?.versionName)
+            loadFileData(sourceFile, compareVersionInfo.data?.versionInfo.name)
                 .then((text: string) => {
                     setTargetContent(text ?? ' ')
                 })
@@ -183,7 +183,13 @@ export default function ModelVersionFiles() {
             setTargetContent(' ')
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sourceFile, project?.name, modelVersion?.versionName, compareVersionInfo.data?.versionName, query.compare])
+    }, [
+        sourceFile,
+        project?.name,
+        modelVersion?.versionInfo.name,
+        compareVersionInfo.data?.versionInfo.name,
+        query.compare,
+    ])
 
     return (
         <div className={styles.wrapper}>