update(console): refactor job form combint extend components, support…

… rerun & online eval (#2572)

console/package.json

@@ -40,6 +40,7 @@
     "@types/styletron-standard": "^2.0.2",
     "@types/uuid": "^8.3.1",
     "@uiw/react-md-editor": "^3.9.3",
+    "ahooks": "^3.7.8",
     "axios": "^0.21.1",
     "base64-js": "^1.5.1",
     "baseui": "12.2.0",
@@ -272,4 +273,4 @@
     "framer-motion": "4.1.17",
     "react-virtualized": "git+https://[email protected]/remorses/react-virtualized-fixed-import.git#9.22.3"
   }
-}
+}

console/packages/starwhale-ui/src/base/tree-view/tree-view.tsx

@@ -173,10 +173,10 @@ export default function TreeView(props: TreeViewProps) {
 
     return (
         <Root role='tree' {...getOverrideProps(RootOverride)}>
-            {data.map((node) => (
+            {data.map((node, i) => (
                 <TreeNode
                     indentGuides={indentGuides}
-                    key={getId(node)}
+                    key={[getId(node), i].join('/')}
                     node={node}
                     getId={getId}
                     onToggle={(node) => {

console/src/api/const.ts

@@ -8,6 +8,7 @@ export const Privileges = {
     'evaluation.action': true,
     'evaluation.create': true,
     'runtime.version.revert': true,
+    'model.run': true,
     'model.version.revert': true,
     'model.version.serve': true,
     'dataset.version.revert': true,

console/src/components/Extensions/index.tsx

@@ -1,12 +1,35 @@
 import React from 'react'
+import FormFieldResource from '@/domain/job/components/FormFieldResource'
+import FormFieldAutoRelease from '@/domain/job/components/FormFieldAutoRelease'
 
-let HeaderExtend: React.FC = () => <></>
+let HeaderExtendTmp: React.FC = () => <></>
+let FormFieldResourceTmp = FormFieldResource
+let FormFieldPriTmp: React.FC = () => <></>
+let FormFieldAutoReleaseTmp = FormFieldAutoRelease
 
-export function registerExtensions(components: { HeaderExtend: React.FC }) {
+export function registerExtensions(components: any) {
     if (!components) return
-    HeaderExtend = components?.HeaderExtend
+    HeaderExtendTmp = components?.HeaderExtend
+    FormFieldResourceTmp = components?.FormFieldResource
+    FormFieldPriTmp = components?.FormFieldPri
+    FormFieldAutoReleaseTmp = components?.FormFieldAutoRelease
 }
 
 export function HeaderExtends() {
-    return <HeaderExtend />
+    return <HeaderExtendTmp />
+}
+
+export function FormFieldResourceExtend(props: any) {
+    if (!FormFieldResourceTmp) return null
+    return <FormFieldResourceTmp {...props} />
+}
+
+export function FormFieldPriExtend(props: any) {
+    if (!FormFieldPriTmp) return null
+    return <FormFieldPriTmp {...props} />
+}
+
+export function FormFieldAutoReleaseExtend(props: any) {
+    if (!FormFieldAutoReleaseTmp) return null
+    return <FormFieldAutoReleaseTmp {...props} />
 }

console/src/components/Form/form.tsx

@@ -198,8 +198,8 @@ export function createForm<S extends {} = Store>({
                             'div',
                             { style: { display: 'flex', alignItems: 'center', gap: 4 } },
                             [
-                                React.createElement('div', { style: { flexShrink: 0 } }, label),
-                                React.createElement('div', {}, '*'),
+                                React.createElement('div', { style: { flexShrink: 0 }, key: 0 }, label),
+                                React.createElement('div', { key: 1 }, '*'),
                             ]
                         )
                     }

console/src/components/LogViewer/LogViewer.tsx

@@ -1,6 +1,6 @@
 import '@patternfly/react-core/dist/styles/base.css'
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer'
 import {
     Button,
@@ -62,7 +62,7 @@ const ComplexToolbarLogViewer = ({
     }[]
 }) => {
     const [isPaused, setIsPaused] = React.useState(false)
-    const [isFullScreen, setIsFullScreen] = React.useState(false)
+    const [, setIsFullScreen] = React.useState(true)
     const [currentItemCount, setCurrentItemCount] = React.useState(0)
     const [renderData, setRenderData] = React.useState('')
     const [selectedDataSource, setSelectedDataSource] = React.useState(dataSources[0]?.id)
@@ -117,7 +117,9 @@ const ComplexToolbarLogViewer = ({
     // @ts-ignore
     const onExpandClick = () => {
         const element = document.querySelector('#complex-toolbar-demo')
-        if (!isFullScreen) {
+        if (!document.fullscreenElement) {
+            setIsFullScreen(true)
+
             if (element?.requestFullscreen) {
                 element.requestFullscreen()
                 // @ts-ignore
@@ -129,8 +131,9 @@ const ComplexToolbarLogViewer = ({
                 // @ts-ignore
                 element?.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
             }
-            setIsFullScreen(true)
         } else {
+            setIsFullScreen(false)
+
             if (document.exitFullscreen) {
                 document.exitFullscreen()
                 // @ts-ignore
@@ -144,10 +147,24 @@ const ComplexToolbarLogViewer = ({
                 // @ts-ignore
                 document.msExitFullscreen()
             }
-            setIsFullScreen(false)
         }
     }
 
+    useEffect(() => {
+        const element = document.querySelector('#complex-toolbar-demo')
+        if (element?.requestFullscreen) {
+            element.requestFullscreen()
+            // @ts-ignore
+        } else if (element?.mozRequestFullScreen) {
+            // @ts-ignore
+            element?.mozRequestFullScreen()
+            // @ts-ignore
+        } else if (element?.webkitRequestFullScreen) {
+            // @ts-ignore
+            element?.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
+        }
+    }, [])
+
     const onDownloadClick = () => {
         const element = document.createElement('a')
         const dataToDownload = [selectedData.join('\n')]

console/src/domain/job/components/FormFieldAutoRelease.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import useTranslation from '@/hooks/useTranslation'
+import { FormInstance, FormItemProps } from '@/components/Form/form'
+import { ICreateJobFormSchema } from '../schemas/job'
+import { Toggle } from '@starwhale/ui/Select'
+import { NumberInput } from '@starwhale/ui/Input'
+
+function FormFieldAutoRelease({
+    form,
+    FormItem,
+}: {
+    form: FormInstance<ICreateJobFormSchema, keyof ICreateJobFormSchema>
+    FormItem: (props_: FormItemProps<ICreateJobFormSchema>) => any
+}) {
+    const [t] = useTranslation()
+
+    return (
+        <>
+            {form.getFieldValue('isTimeToLiveInSec') && (
+                <p style={{ marginBottom: '10px' }}>{t('job.autorelease.notice')}</p>
+            )}
+            <div style={{ width: '660px', marginBottom: '36px', display: 'flex', gap: '40px' }}>
+                <FormItem label={t('job.autorelease.toggle')} name='isTimeToLiveInSec'>
+                    <Toggle />
+                </FormItem>
+                {form.getFieldValue('isTimeToLiveInSec') && (
+                    <FormItem label={t('job.autorelease.time')} name='timeToLiveInSec' initialValue={60 * 60}>
+                        <NumberInput endEnhancer={() => t('resource.price.unit.second')} />
+                    </FormItem>
+                )}
+            </div>
+        </>
+    )
+}
+
+export default FormFieldAutoRelease

console/src/domain/job/components/FormFieldDataset.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import useTranslation from '@/hooks/useTranslation'
+import { FormInstance, FormItemProps } from '@/components/Form/form'
+import { useParams } from 'react-router-dom'
+import { ICreateJobFormSchema } from '../schemas/job'
+import DatasetTreeSelector from '@/domain/dataset/components/DatasetTreeSelector'
+
+function FormFieldDataset({
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    form,
+    FormItem,
+}: {
+    form: FormInstance<ICreateJobFormSchema, keyof ICreateJobFormSchema>
+    FormItem: (props_: FormItemProps<ICreateJobFormSchema>) => any
+}) {
+    const [t] = useTranslation()
+    const { projectId } = useParams<{ projectId: string }>()
+
+    return (
+        <div className='bfc' style={{ width: '660px', marginBottom: '36px' }}>
+            <FormItem label={t('Dataset Version')} name='datasetVersionUrls' required>
+                <DatasetTreeSelector projectId={projectId} multiple />
+            </FormItem>
+        </div>
+    )
+}
+
+export default FormFieldDataset

console/src/domain/job/components/FormFieldDevMode.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import useTranslation from '@/hooks/useTranslation'
+import { FormInstance, FormItemProps } from '@/components/Form/form'
+import { ICreateJobFormSchema } from '../schemas/job'
+import generatePassword from '@/utils/passwordGenerator'
+import { EventEmitter } from 'ahooks/lib/useEventEmitter'
+import { WithCurrentAuth } from '@/api/WithAuth'
+import { Toggle } from '@starwhale/ui/Select'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import Input from '@starwhale/ui/Input'
+import IconFont from '@starwhale/ui/IconFont'
+import { toaster } from 'baseui/toast'
+
+function FormFieldDevMode({
+    form,
+    FormItem,
+    // eslint-disable-next-line
+    EventEmitter,
+}: {
+    form: FormInstance<ICreateJobFormSchema, keyof ICreateJobFormSchema>
+    FormItem: (props_: FormItemProps<ICreateJobFormSchema>) => any
+    EventEmitter: EventEmitter<any>
+}) {
+    const [t] = useTranslation()
+
+    EventEmitter.useSubscription(({ changes: _changes }) => {
+        if ('devMode' in _changes && _changes.devMode) {
+            form.setFieldsValue({
+                devPassword: generatePassword(),
+            })
+        }
+    })
+
+    return (
+        <WithCurrentAuth id='job-dev'>
+            {form.getFieldValue('devMode') && <p style={{ marginBottom: '10px' }}>{t('job.debug.notice')}</p>}
+            <div style={{ width: '660px', marginBottom: '20px', display: 'flex', gap: '40px' }}>
+                <FormItem label={t('job.debug.mode')} name='devMode'>
+                    <Toggle />
+                </FormItem>
+                {form.getFieldValue('devMode') && (
+                    <FormItem label={t('job.debug.password')} name='devPassword' required>
+                        <Input
+                            endEnhancer={
+                                <CopyToClipboard
+                                    text={form.getFieldValue('devPassword') as string}
+                                    onCopy={() => {
+                                        toaster.positive(t('Copied'), { autoHideDuration: 1000 })
+                                    }}
+                                >
+                                    <span style={{ cursor: 'pointer' }}>
+                                        <IconFont type='overview' />
+                                    </span>
+                                </CopyToClipboard>
+                            }
+                        />
+                    </FormItem>
+                )}
+            </div>
+        </WithCurrentAuth>
+    )
+}
+
+export default FormFieldDevMode