feat(console): support global auth from system features

console/src/api/ApiHeader.tsx

@@ -10,8 +10,10 @@ import { useFetchProject } from '@/domain/project/hooks/useFetchProject'
 import qs from 'qs'
 import { useProjectRole } from '@/domain/project/hooks/useProjectRole'
 import { useFetchProjectRole } from '@/domain/project/hooks/useFetchProjectRole'
+import { useFetchSystemFeatures } from '@/domain/setting/hooks/useSettings'
+import { useSystemFeatures } from '@/domain/setting/hooks/useSystemFeatures'
 
-export default function ApiHeader() {
+function ApiHeader() {
     const location = useLocation()
     const errMsgExpireTimeSeconds = 5
     const lastErrMsgRef = useRef<Record<string, number>>({})
@@ -21,7 +23,9 @@ export default function ApiHeader() {
     const projectInfo = useFetchProject(projectId)
     const { setProject } = useProject()
     const { role: projectRole } = useFetchProjectRole(projectId as string)
+    const systemFeaturesInfo = useFetchSystemFeatures()
     const { setRole } = useProjectRole()
+    const { setSystemFeatures } = useSystemFeatures()
 
     useFirstRender(() => {
         // @ts-ignore
@@ -133,5 +137,13 @@ export default function ApiHeader() {
         }
     }, [projectRole, setRole])
 
+    useEffect(() => {
+        if (systemFeaturesInfo.data) {
+            setSystemFeatures(systemFeaturesInfo?.data)
+        }
+    }, [systemFeaturesInfo?.data, setSystemFeatures])
+
     return <></>
 }
+
+export default ApiHeader

console/src/api/WithAuth.tsx

@@ -4,6 +4,7 @@ import { useCurrentUser } from '@/hooks/useCurrentUser'
 import React from 'react'
 import { IUserSchema } from '@user/schemas/user'
 import { IPrivileges, Privileges, Role, RolePrivilege } from './const'
+import { useSystemFeatures } from '@/domain/setting/hooks/useSystemFeatures'
 
 const hasPrivilege = (role: Role, id: string) => {
     return RolePrivilege[role]?.[id] ?? false
@@ -27,13 +28,17 @@ export default function WithAuth({
     let isPrivileged = false
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const { currentUser } = useCurrentUser()
+    const { systemFeatures } = useSystemFeatures()
+
     if (!currentUser) return <Empty />
     if (isWrongKey(id)) return <Empty str='wrong key' />
-    if (isAdmin(currentUser)) isPrivileged = true
-    else {
-        isPrivileged = hasPrivilege(role, id)
-    }
 
+    // prirority: system global > admin > role
+    if (systemFeatures.disabled?.includes(id)) isPrivileged = false
+    else if (isAdmin(currentUser)) isPrivileged = true
+    else isPrivileged = hasPrivilege(role, id)
+
+    // render
     if (typeof children === 'function') {
         return children(isPrivileged)
     }
@@ -43,6 +48,7 @@ export default function WithAuth({
 
 export function WithCurrentAuth({ id, children }: { id: keyof IPrivileges; children: React.ReactElement | any }) {
     const { role } = useProjectRole()
+
     return (
         <WithAuth role={role} id={id}>
             {children}

console/src/api/const.ts

@@ -13,6 +13,10 @@ export const Privileges = {
     'dataset.version.revert': true,
     'evaluation.panel.save': true,
     'runtime.image.build': true,
+    // global
+    'online-eval': true,
+    'job-pause': true,
+    'job-resume': true,
 }
 export type IPrivileges = typeof Privileges
 

console/src/domain/project/hooks/useFetchProjectRole.tsx

@@ -7,22 +7,10 @@ import { listProjectRole } from '../services/project'
 export function useFetchProjectRole(projectId: string) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const { currentUser } = useCurrentUser()
-    const members = useQuery(
-        ['fetchProjectMembers', projectId],
-        () => {
-            if (!projectId) return
-            // eslint-disable-next-line consistent-return
-            return listProjectRole(projectId)
-        },
-        { refetchOnWindowFocus: true, enabled: true }
-    )
-
-    React.useEffect(() => {
-        if (projectId) {
-            members.refetch()
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [projectId])
+    const members = useQuery(['fetchProjectMembers', projectId], () => listProjectRole(projectId), {
+        refetchOnWindowFocus: true,
+        enabled: !!projectId,
+    })
 
     const role = React.useMemo(() => {
         if (!members.data) return Role.NONE

console/src/domain/setting/hooks/useSettings.ts

@@ -1,7 +1,13 @@
 import { IListQuerySchema } from '@/domain/base/schemas/list'
 import { useQuery } from 'react-query'
 import qs from 'qs'
-import { listAgents, fetchSystemVersion, fetchSystemSetting, fetchSystemResourcePool } from '../services/system'
+import {
+    listAgents,
+    fetchSystemVersion,
+    fetchSystemSetting,
+    fetchSystemResourcePool,
+    fetchSystemFeatures,
+} from '../services/system'
 
 export function useFetchAgents(query: IListQuerySchema) {
     const info = useQuery(`fetchAgents:${qs.stringify(query)}`, () => listAgents(query))
@@ -18,6 +24,11 @@ export function useFetchSystemSetting() {
     return info
 }
 
+export function useFetchSystemFeatures() {
+    const info = useQuery('fetchSystemFeatures', () => fetchSystemFeatures())
+    return info
+}
+
 export function useFetchSystemResourcePool() {
     const info = useQuery('fetchSystemResourcePool', () => fetchSystemResourcePool())
     return info

console/src/domain/setting/hooks/useSystemFeatures.ts

@@ -0,0 +1,9 @@
+import useGlobalState from '@/hooks/global'
+
+export const useSystemFeatures = () => {
+    const [systemFeatures, setSystemFeatures] = useGlobalState('systemFeatures')
+    return {
+        systemFeatures,
+        setSystemFeatures,
+    }
+}

console/src/domain/setting/schemas/system.tsx

@@ -1,3 +1,4 @@
+import { IPrivileges } from '@/api/const'
 import { IResourceSchema } from '@/domain/base/schemas/resource'
 
 export type IBaseImageSchema = IResourceSchema
@@ -34,3 +35,7 @@ export type ISystemResourcePool = {
     nodeSelector: Record<string, string>
     resources: ISystemResource[]
 }
+
+export type ISystemFeaturesSchema = {
+    disabled?: Array<keyof IPrivileges>
+}

console/src/domain/setting/services/system.ts

@@ -3,6 +3,7 @@ import axios from 'axios'
 import {
     IAgentSchema,
     IDeviceSchema,
+    ISystemFeaturesSchema,
     ISystemResourcePool,
     ISystemSettingSchema,
     ISystemVersionSchema,
@@ -50,3 +51,8 @@ export async function fetchSystemResourcePool(): Promise<ISystemResourcePool[]>
     const resp = await axios.get('/api/v1/system/resourcePool')
     return resp.data
 }
+
+export async function fetchSystemFeatures(): Promise<ISystemFeaturesSchema> {
+    const resp = await axios.get('/api/v1/system/features')
+    return resp.data
+}

console/src/hooks/global.ts

@@ -10,6 +10,7 @@ import { ITaskDetailSchema } from '@/domain/job/schemas/task'
 import { Role } from '@/api/const'
 import { IRuntimeDetailSchema } from '@/domain/runtime/schemas/runtime'
 import { ThemeType } from '@starwhale/ui/theme'
+import { ISystemFeaturesSchema } from '@/domain/setting/schemas/system'
 
 const initialState = {
     token: undefined as string | undefined,
@@ -38,6 +39,7 @@ const initialState = {
     drawerExpanded: false,
     role: Role.NONE as Role,
     vscodeTheme: 'light' as string,
+    systemFeatures: { disabled: [] } as ISystemFeaturesSchema,
 }
 
 const { useGlobalState } = createGlobalState(initialState)

console/src/pages/Job/JobListCard.tsx

@@ -86,12 +86,14 @@ export default function JobListCard() {
                                             {t('Cancel')}
                                         </Button>
                                         &nbsp;&nbsp;
-                                        <Button
-                                            kind='tertiary'
-                                            onClick={() => handleAction(job.id, JobActionType.PAUSE)}
-                                        >
-                                            {t('Pause')}
-                                        </Button>
+                                        <WithCurrentAuth id='job-pause'>
+                                            <Button
+                                                kind='tertiary'
+                                                onClick={() => handleAction(job.id, JobActionType.PAUSE)}
+                                            >
+                                                {t('Pause')}
+                                            </Button>
+                                        </WithCurrentAuth>
                                     </>
                                 ),
                                 [JobStatusType.RUNNING]: (
@@ -103,12 +105,14 @@ export default function JobListCard() {
                                             {t('Cancel')}
                                         </Button>
                                         &nbsp;&nbsp;
-                                        <Button
-                                            kind='tertiary'
-                                            onClick={() => handleAction(job.id, JobActionType.PAUSE)}
-                                        >
-                                            {t('Pause')}
-                                        </Button>
+                                        <WithCurrentAuth id='job-pause'>
+                                            <Button
+                                                kind='tertiary'
+                                                onClick={() => handleAction(job.id, JobActionType.PAUSE)}
+                                            >
+                                                {t('Pause')}
+                                            </Button>
+                                        </WithCurrentAuth>
                                     </>
                                 ),
                                 [JobStatusType.PAUSED]: (
@@ -120,22 +124,26 @@ export default function JobListCard() {
                                             {t('Cancel')}
                                         </Button>
                                         &nbsp;&nbsp;
-                                        <Button
-                                            kind='tertiary'
-                                            onClick={() => handleAction(job.id, JobActionType.RESUME)}
-                                        >
-                                            {t('Resume')}
-                                        </Button>
+                                        <WithCurrentAuth id='job-resume'>
+                                            <Button
+                                                kind='tertiary'
+                                                onClick={() => handleAction(job.id, JobActionType.RESUME)}
+                                            >
+                                                {t('Resume')}
+                                            </Button>
+                                        </WithCurrentAuth>
                                     </>
                                 ),
                                 [JobStatusType.FAIL]: (
                                     <>
-                                        <Button
-                                            kind='tertiary'
-                                            onClick={() => handleAction(job.id, JobActionType.RESUME)}
-                                        >
-                                            {t('Resume')}
-                                        </Button>
+                                        <WithCurrentAuth id='job-resume'>
+                                            <Button
+                                                kind='tertiary'
+                                                onClick={() => handleAction(job.id, JobActionType.RESUME)}
+                                            >
+                                                {t('Resume')}
+                                            </Button>
+                                        </WithCurrentAuth>
                                     </>
                                 ),
                                 [JobStatusType.SUCCESS]: (

console/src/pages/Model/ModelListCard.tsx

@@ -13,6 +13,7 @@ import { useHistory, useParams } from 'react-router-dom'
 import { useFetchModels } from '@model/hooks/useFetchModels'
 import { TextLink } from '@/components/Link'
 import { Button } from '@starwhale/ui'
+import { WithCurrentAuth } from '@/api/WithAuth'
 
 export default function ModelListCard() {
     const [page] = usePage()
@@ -52,12 +53,14 @@ export default function ModelListCard() {
                                     {t('Version History')}
                                 </Button>
                                 &nbsp;&nbsp;
-                                <Button
-                                    kind='tertiary'
-                                    onClick={() => history.push(`/projects/${projectId}/online_eval/${model.id}`)}
-                                >
-                                    {t('online eval')}
-                                </Button>
+                                <WithCurrentAuth id='online-eval'>
+                                    <Button
+                                        kind='tertiary'
+                                        onClick={() => history.push(`/projects/${projectId}/online_eval/${model.id}`)}
+                                    >
+                                        {t('online eval')}
+                                    </Button>
+                                </WithCurrentAuth>
                             </>,
                         ]
                     }) ?? []

console/src/pages/Model/ModelVersionListCard.tsx

@@ -67,14 +67,16 @@ export default function ModelVersionListCard() {
                                     content={`${window.location.protocol}//${window.location.host}/projects/${projectId}/models/${modelId}/versions/${model.id}/`}
                                 />
                                   
-                                <Button
-                                    kind='tertiary'
-                                    onClick={() =>
-                                        history.push(`/projects/${projectId}/online_eval/${modelId}/${model.id}`)
-                                    }
-                                >
-                                    {t('online eval')}
-                                </Button>
+                                <WithCurrentAuth id='online-eval'>
+                                    <Button
+                                        kind='tertiary'
+                                        onClick={() =>
+                                            history.push(`/projects/${projectId}/online_eval/${modelId}/${model.id}`)
+                                        }
+                                    >
+                                        {t('online eval')}
+                                    </Button>
+                                </WithCurrentAuth>
                                 &nbsp;&nbsp;
                                 {i ? (
                                     <WithCurrentAuth id='model.version.revert'>

console/src/pages/Project/ProjectLayout.tsx

@@ -11,7 +11,7 @@ export interface IProjectLayoutProps {
     children: React.ReactNode
 }
 
-export default function ProjectLayout({ children }: IProjectLayoutProps) {
+function ProjectLayout({ children }: IProjectLayoutProps) {
     const { projectId } = useParams<{ projectId: string }>()
     const projectInfo = useQuery(`fetchProject:${projectId}`, () => fetchProject(projectId))
     const { project, setProject } = useProject()
@@ -38,3 +38,6 @@ export default function ProjectLayout({ children }: IProjectLayoutProps) {
 
     return <BaseSubLayout>{children}</BaseSubLayout>
 }
+
+ProjectLayout.displayName = 'ProjectLayout'
+export default ProjectLayout

console/src/wdyr.ts

@@ -1,14 +1,15 @@
-import * as React from 'react'
+/// <reference types="@welldone-software/why-did-you-render" />
 
-if (import.meta.env.DEV) {
-    import('@welldone-software/why-did-you-render').then((m) => {
-        if (window.location.search.indexOf('why-render') === -1) return
+import React from 'react'
 
-        m.default(React, {
+if (import.meta.env.DEV) {
+    if (window.location.search.indexOf('why-render') !== -1) {
+        const whyDidYouRender = await import('@welldone-software/why-did-you-render')
+        whyDidYouRender.default(React, {
             include: [/.*/],
-            exclude: [/^BrowserRouter/, /^Link/, /^Route/],
+            exclude: [/^BrowserRouter/, /^Router/, /^Link/, /^Styled/, /^Unknown/, /^WithTheme/, /^Popover/],
             trackHooks: true,
             trackAllPureComponents: true,
         })
-    })
+    }
 }