feat(console): add datastore result view to job

console/src/pages/Job/JobOverviewLayout.tsx

@@ -6,7 +6,6 @@ import { useParams } from 'react-router-dom'
 import { INavItem } from '@/components/BaseSidebar'
 import { fetchJob } from '@job/services/job'
 import BaseSubLayout from '@/pages/BaseSubLayout'
-import IconFont from '@starwhale/ui/IconFont'
 
 export interface IJobLayoutProps {
     children: React.ReactNode
@@ -48,11 +47,14 @@ function JobOverviewLayout({ children }: IJobLayoutProps) {
 
     const navItems: INavItem[] = useMemo(() => {
         const items = [
+            {
+                title: t('Results'),
+                path: `/projects/${projectId}/jobs/${jobId}/results`,
+            },
             {
                 title: t('Tasks'),
                 path: `/projects/${projectId}/jobs/${jobId}/tasks`,
                 pattern: '/\\/tasks\\/?',
-                icon: <IconFont type='tasks' />,
             },
         ]
         return items

console/src/pages/Job/JobWidgetResults.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect } from 'react'
+import { FullTablesEditor } from '@/components/Editor/FullTablesEditor'
+import { useParams } from 'react-router-dom'
+import { Select } from '@starwhale/ui'
+import { useJob } from '@/domain/job/hooks/useJob'
+import { fetchPanelSetting, updatePanelSetting } from '@/domain/panel/services/panel'
+import { toaster } from 'baseui/toast'
+import { fetchModelVersionPanelSetting } from '@model/services/modelVersion'
+import { getToken } from '@/api'
+import { tryParseSimplified } from '@/domain/panel/utils'
+import { useProject } from '@project/hooks/useProject'
+import useTranslation from '@/hooks/useTranslation'
+
+interface Layout {
+    name: string
+    content: string | object
+    label: string
+}
+
+function JobWidgetResults() {
+    const [t] = useTranslation()
+    const { projectId: projectFromUri } = useParams<{ jobId: string; projectId: string }>()
+    const { project } = useProject()
+    const projectId = project?.id ?? projectFromUri
+    const { job } = useJob()
+    const storeKey = job?.modelName ? ['evaluation-model', job?.modelName].join('-') : ''
+    const [currentLayout, setCurrentLayout] = React.useState<Layout | undefined>(undefined)
+    const [layouts, setLayouts] = React.useState<Layout[]>([])
+    const onStateChange = async (data: any) => {
+        await updatePanelSetting(projectId, storeKey, data)
+        toaster.positive(t('panel.save.success'), { autoHideDuration: 2000 })
+    }
+
+    const updateLayout = useCallback((layout: Layout) => {
+        setLayouts((prevState) => {
+            const others = prevState.filter((i) => i.name !== layout.name)
+            others.push(layout)
+            return others
+        })
+    }, [])
+
+    useEffect(() => {
+        fetchModelVersionPanelSetting(project?.name, job?.modelName, job?.modelVersion, getToken()).then((data) => {
+            if (!data) return
+            const layout = tryParseSimplified(data) ?? data
+            updateLayout({ name: 'model-builtin', content: layout, label: t('panel.view.config.model-buildin') })
+        })
+    }, [project, job, updateLayout, t])
+
+    useEffect(() => {
+        if (!storeKey) {
+            return
+        }
+        fetchPanelSetting(projectId, storeKey).then((data) => {
+            if (!data) return
+            // try simplified version for standalone usage
+            const parsed = tryParseSimplified(JSON.parse(data)) ?? data
+            const layout = { name: 'custom', content: parsed, label: t('panel.view.config.custom') }
+            setCurrentLayout(layout)
+            updateLayout(layout)
+        })
+    }, [projectId, job, storeKey, updateLayout, t])
+
+    return (
+        <div style={{ width: '100%', height: 'auto' }}>
+            <div style={{ height: '50px', display: 'flex', justifyContent: 'space-between' }}>
+                <div style={{ display: 'flex' }}>
+                    <Select
+                        overrides={{
+                            ControlContainer: {
+                                style: {
+                                    width: '200px',
+                                },
+                            },
+                        }}
+                        clearable={false}
+                        options={layouts.map((layout) => ({ id: layout.name, label: layout.label }))}
+                        value={currentLayout ? [{ id: currentLayout.name, label: currentLayout.name }] : []}
+                        onChange={({ value }) => {
+                            const layout = layouts.find((l) => l.name === value[0].id)
+                            if (layout) setCurrentLayout(layout)
+                        }}
+                    />
+                </div>
+            </div>
+            <FullTablesEditor initialState={currentLayout?.content} onStateChange={onStateChange} />
+        </div>
+    )
+}
+export default JobWidgetResults

console/src/pages/Project/ProjectListCard.tsx

@@ -190,7 +190,7 @@ const ProjectCard = ({ project, onEdit, onRefresh }: IProjectCardProps) => {
         <div className={styles.projectCard}>
             <div className={styles.row}>
                 <div className={styles.name}>
-                    <TextLink className={styles.text} to={`/projects/${project.id}/evaluations`}>
+                    <TextLink className={styles.text} to={`/projects/${project.id}/jobs`}>
                         {[project.owner?.name, project.name].join('/')}
                     </TextLink>
                 </div>

console/src/routes.tsx

@@ -16,7 +16,7 @@ import DatasetOverviewLayout from '@/pages/Dataset/DatasetOverviewLayout'
 import JobNewCard from '@/pages/Project/JobNewCard'
 import ApiHeader from '@/api/ApiHeader'
 import JobTasks from '@/pages/Job/JobTasks'
-import JobResults from '@/pages/Job/JobResults'
+import JobWidgetResults from '@/pages/Job/JobWidgetResults'
 import JobOverviewLayout from '@/pages/Job/JobOverviewLayout'
 import SettingsOverviewLayout from '@/pages/Settings/SettingsOverviewLayout'
 import SettingAgentListCard from '@/pages/Settings/SettingAgentListCard'
@@ -168,7 +168,7 @@ const Routes = () => {
                                         <Route
                                             exact
                                             path='/projects/:projectId/jobs/:jobId/results'
-                                            component={JobResults}
+                                            component={JobWidgetResults}
                                         />
                                         <Redirect
                                             from='/projects/:projectId/jobs/:jobId'