diff --git a/src/constants/routes.tsx b/src/constants/routes.tsx index 57f5157..52e2716 100644 --- a/src/constants/routes.tsx +++ b/src/constants/routes.tsx @@ -1,6 +1,5 @@ import HomeIcon from '@mui/icons-material/Home'; import MonitorIcon from '@mui/icons-material/Monitor'; -import StorageIcon from '@mui/icons-material/Storage'; import ModelTrainingIcon from '@mui/icons-material/ModelTraining'; import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'; import SpeedIcon from '@mui/icons-material/Speed'; @@ -28,6 +27,7 @@ import { Resources } from '../pages/resources'; import { CreateResource } from '../pages/resources/create'; import { ResourceDetail } from '../pages/resources/detail'; import { CreateModelMetadata } from '../pages/model-metadata/create'; +import { Monitoring } from '../pages/monitoring'; const routes: IRouterDatum[] = [ { @@ -131,20 +131,12 @@ const routes: IRouterDatum[] = [ page: UpdateDeployment, for: ['Owner', 'Admin', 'User'], }, - { - uri: '/volumes', - name: 'Volumes', - icon: , - authOnly: true, - page: Index, - for: ['Owner', 'Admin', 'User'], - }, { uri: '/monitoring', name: 'Monitoring', icon: , authOnly: true, - page: Index, + page: Monitoring, for: ['Owner', 'Admin', 'User'], }, { diff --git a/src/hooks/data/useABTestsData.ts b/src/hooks/data/useABTestsData.ts new file mode 100644 index 0000000..49a5e0e --- /dev/null +++ b/src/hooks/data/useABTestsData.ts @@ -0,0 +1,6 @@ +import getABTests from '../../api/tests'; +import { abTestsAtom } from '../../atoms/tests'; +import { useData } from '../useData'; + +export const useABTestsData = () => + useData(abTestsAtom, getABTests, { useRawType: true }); diff --git a/src/hooks/data/useDeploymentStrategiesData.ts b/src/hooks/data/useDeploymentStrategiesData.ts new file mode 100644 index 0000000..c996725 --- /dev/null +++ b/src/hooks/data/useDeploymentStrategiesData.ts @@ -0,0 +1,8 @@ +import { getDeploymentStrategies } from '../../api/deployment-strategies'; +import { deploymentStrategiesAtom } from '../../atoms/deployment-strategies'; +import { useData } from '../useData'; + +export const useDeploymentStrategiesData = () => + useData(deploymentStrategiesAtom, getDeploymentStrategies, { + useRawType: true, + }); diff --git a/src/hooks/data/useDeploymentsData.ts b/src/hooks/data/useDeploymentsData.ts new file mode 100644 index 0000000..e33dd8e --- /dev/null +++ b/src/hooks/data/useDeploymentsData.ts @@ -0,0 +1,6 @@ +import getDeployments from '../../api/deployments'; +import { deploymentsAtom } from '../../atoms/deployments'; +import { useData } from '../useData'; + +export const useDeploymentsData = () => + useData(deploymentsAtom, getDeployments); diff --git a/src/hooks/data/useLibrariesData.ts b/src/hooks/data/useLibrariesData.ts new file mode 100644 index 0000000..7295510 --- /dev/null +++ b/src/hooks/data/useLibrariesData.ts @@ -0,0 +1,6 @@ +import { getLibraries } from '../../api/library'; +import { librariesAtom } from '../../atoms/library'; +import { useData } from '../useData'; + +export const useLibrariesData = () => + useData(librariesAtom, getLibraries, { useRawType: true }); diff --git a/src/hooks/data/useModelMetadata.ts b/src/hooks/data/useModelMetadata.ts new file mode 100644 index 0000000..32d0f8b --- /dev/null +++ b/src/hooks/data/useModelMetadata.ts @@ -0,0 +1,6 @@ +import { getModelMetadataById } from '../../api/models'; +import { modelMetadataAtom } from '../../atoms/model-metadata'; +import { useData } from '../useData'; + +export const useModelMetadata = () => + useData(modelMetadataAtom, getModelMetadataById); diff --git a/src/hooks/data/useModelsData.ts b/src/hooks/data/useModelsData.ts new file mode 100644 index 0000000..9e10bf8 --- /dev/null +++ b/src/hooks/data/useModelsData.ts @@ -0,0 +1,5 @@ +import getModels from '../../api/models'; +import { modelsAtom } from '../../atoms/models'; +import { useData } from '../useData'; + +export const useModelsData = () => useData(modelsAtom, getModels); diff --git a/src/hooks/data/useResourcesData.ts b/src/hooks/data/useResourcesData.ts new file mode 100644 index 0000000..5e07eaa --- /dev/null +++ b/src/hooks/data/useResourcesData.ts @@ -0,0 +1,6 @@ +import { getResources } from '../../api/resources'; +import { resourcesAtom } from '../../atoms/resources'; +import { useData } from '../useData'; + +export const useResourcesData = () => + useData(resourcesAtom, getResources, { useRawType: true }); diff --git a/src/hooks/useABTestsData.ts b/src/hooks/useABTestsData.ts deleted file mode 100644 index 70bb213..0000000 --- a/src/hooks/useABTestsData.ts +++ /dev/null @@ -1,5 +0,0 @@ -import getABTests from '../api/tests'; -import { abTestsAtom } from '../atoms/tests'; -import { useData } from './useData'; - -export const useABTestsData = () => useData(abTestsAtom, getABTests, true); diff --git a/src/hooks/useData.ts b/src/hooks/useData.ts index b7e81d2..30e6b7b 100644 --- a/src/hooks/useData.ts +++ b/src/hooks/useData.ts @@ -16,7 +16,9 @@ export const useData = < ) => Promise< (UseRawType extends true ? IBase : IBase & { status: Status })[] >, - useRawType?: UseRawType + params?: { + useRawType?: UseRawType; + } ) => { type IDatum = UseRawType extends true ? IBase @@ -35,7 +37,7 @@ export const useData = < const getData = async () => { try { const data = (await getApi(...args)).map((datum) => { - if (useRawType) { + if (params?.useRawType) { return datum as IBase; } const narrowedDatum = datum as IBase & { diff --git a/src/hooks/useDeploymentStrategiesData.ts b/src/hooks/useDeploymentStrategiesData.ts deleted file mode 100644 index ce327d5..0000000 --- a/src/hooks/useDeploymentStrategiesData.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { getDeploymentStrategies } from '../api/deployment-strategies'; -import { deploymentStrategiesAtom } from '../atoms/deployment-strategies'; -import { useData } from './useData'; - -export const useDeploymentStrategiesData = () => - useData(deploymentStrategiesAtom, getDeploymentStrategies, true); diff --git a/src/hooks/useDeploymentsData.ts b/src/hooks/useDeploymentsData.ts deleted file mode 100644 index b3565a1..0000000 --- a/src/hooks/useDeploymentsData.ts +++ /dev/null @@ -1,6 +0,0 @@ -import getDeployments from '../api/deployments'; -import { deploymentsAtom } from '../atoms/deployments'; -import { useData } from './useData'; - -export const useDeploymentsData = () => - useData(deploymentsAtom, getDeployments); diff --git a/src/hooks/useLibrariesData.ts b/src/hooks/useLibrariesData.ts deleted file mode 100644 index 7f11388..0000000 --- a/src/hooks/useLibrariesData.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { getLibraries } from '../api/library'; -import { librariesAtom } from '../atoms/library'; -import { useData } from './useData'; - -export const useLibrariesData = () => - useData(librariesAtom, getLibraries, true); diff --git a/src/hooks/useModelMetadata.ts b/src/hooks/useModelMetadata.ts deleted file mode 100644 index dfc33b4..0000000 --- a/src/hooks/useModelMetadata.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { getModelMetadataById } from '../api/models'; -import { modelMetadataAtom } from '../atoms/model-metadata'; -import { useData } from './useData'; - -export const useModelMetadata = () => - useData(modelMetadataAtom, getModelMetadataById); diff --git a/src/hooks/useModelsData.ts b/src/hooks/useModelsData.ts deleted file mode 100644 index a1131b8..0000000 --- a/src/hooks/useModelsData.ts +++ /dev/null @@ -1,5 +0,0 @@ -import getModels from '../api/models'; -import { modelsAtom } from '../atoms/models'; -import { useData } from './useData'; - -export const useModelsData = () => useData(modelsAtom, getModels); diff --git a/src/hooks/useResourcesData.ts b/src/hooks/useResourcesData.ts deleted file mode 100644 index 76df86d..0000000 --- a/src/hooks/useResourcesData.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { getResources } from '../api/resources'; -import { resourcesAtom } from '../atoms/resources'; -import { useData } from './useData'; - -export const useResourcesData = () => - useData(resourcesAtom, getResources, true); diff --git a/src/interfaces/pages/tests/index.ts b/src/interfaces/pages/tests/index.ts index 41913b8..98b4d60 100644 --- a/src/interfaces/pages/tests/index.ts +++ b/src/interfaces/pages/tests/index.ts @@ -8,8 +8,8 @@ export interface IABTestBaseResponse { export type IABTestReadResponse = { id: number; - aId: number; - bId: number; + aid: number; + bid: number; } & IABTestBaseResponse; export type IABTestCreateRequest = { @@ -23,6 +23,11 @@ export type IABTestCreateResponse = { } & IBaseResponse; export type IABTestView = { + a: string; + b: string; +} & IABTestBaseResponse; + +export type IABTestJoined = { id: number; a?: IDeploymentDatum; b?: IDeploymentDatum; diff --git a/src/pages/deployments/create-update-base.tsx b/src/pages/deployments/create-update-base.tsx index 0e15a1b..88139f7 100644 --- a/src/pages/deployments/create-update-base.tsx +++ b/src/pages/deployments/create-update-base.tsx @@ -25,11 +25,11 @@ import { resourcesAtom } from '../../atoms/resources'; import { snackbarAtom } from '../../atoms/snackbar'; import ActionCard from '../../components/action-card'; import OverViewTab from '../../components/detail/overview-tab'; -import { useDeploymentsData } from '../../hooks/useDeploymentsData'; -import { useDeploymentStrategiesData } from '../../hooks/useDeploymentStrategiesData'; -import { useModelMetadata } from '../../hooks/useModelMetadata'; -import { useModelsData } from '../../hooks/useModelsData'; -import { useResourcesData } from '../../hooks/useResourcesData'; +import { useDeploymentsData } from '../../hooks/data/useDeploymentsData'; +import { useDeploymentStrategiesData } from '../../hooks/data/useDeploymentStrategiesData'; +import { useModelMetadata } from '../../hooks/data/useModelMetadata'; +import { useModelsData } from '../../hooks/data/useModelsData'; +import { useResourcesData } from '../../hooks/data/useResourcesData'; import { ICreateUpdateBaseParams } from '../../interfaces'; import { IResourceFind } from '../../interfaces/pages/resources'; import { IScalingBase } from '../../interfaces/pages/deployments'; @@ -217,7 +217,7 @@ const CreateUpdateDeploymentBase: React.FC = ({ return ( diff --git a/src/pages/deployments/detail.tsx b/src/pages/deployments/detail.tsx index c74570f..e50a3a7 100644 --- a/src/pages/deployments/detail.tsx +++ b/src/pages/deployments/detail.tsx @@ -9,7 +9,7 @@ import OverViewTab from '../../components/detail/overview-tab'; import YamlTab from '../../components/detail/yaml-tab'; import { UNIT } from '../../constants'; import { useDelete } from '../../hooks/useDelete'; -import { useDeploymentsData } from '../../hooks/useDeploymentsData'; +import { useDeploymentsData } from '../../hooks/data/useDeploymentsData'; export const DeploymentDetail: React.FC = () => { const [deployments] = useAtom(deploymentsAtom); diff --git a/src/pages/deployments/index.tsx b/src/pages/deployments/index.tsx index 90fd1f2..43e6cc7 100644 --- a/src/pages/deployments/index.tsx +++ b/src/pages/deployments/index.tsx @@ -4,7 +4,7 @@ import { deleteDeployment } from '../../api/deployments'; import { deploymentsAtom } from '../../atoms/deployments'; import ListTable from '../../components/table'; import { useDelete } from '../../hooks/useDelete'; -import { useDeploymentsData } from '../../hooks/useDeploymentsData'; +import { useDeploymentsData } from '../../hooks/data/useDeploymentsData'; import { IDeploymentView } from '../../interfaces/pages/deployments'; import { filterColumns } from '../../utils'; diff --git a/src/pages/model-metadata/detail.tsx b/src/pages/model-metadata/detail.tsx index 23cbbab..89a7ed4 100644 --- a/src/pages/model-metadata/detail.tsx +++ b/src/pages/model-metadata/detail.tsx @@ -12,7 +12,7 @@ import { DetailCard } from '../../components/detail/card'; import OverViewTab from '../../components/detail/overview-tab'; import YamlTab from '../../components/detail/yaml-tab'; import { useDelete } from '../../hooks/useDelete'; -import { useModelsData } from '../../hooks/useModelsData'; +import { useModelsData } from '../../hooks/data/useModelsData'; import { IModelMetadataDetail } from '../../interfaces/pages/model-metadata'; import { convertStatusToIcon } from '../../utils/pages/models'; diff --git a/src/pages/models/create-update-base.tsx b/src/pages/models/create-update-base.tsx index 7039a85..338c7ac 100644 --- a/src/pages/models/create-update-base.tsx +++ b/src/pages/models/create-update-base.tsx @@ -15,7 +15,7 @@ import { librariesAtom } from '../../atoms/library'; import { modelsAtom } from '../../atoms/models'; import { snackbarAtom } from '../../atoms/snackbar'; import ActionCard from '../../components/action-card'; -import { useLibrariesData } from '../../hooks/useLibrariesData'; +import { useLibrariesData } from '../../hooks/data/useLibrariesData'; import { ICreateUpdateBaseParams } from '../../interfaces'; const CreateUpdateModelBase: React.FC = ({ diff --git a/src/pages/models/detail.tsx b/src/pages/models/detail.tsx index 37b5851..71a981b 100644 --- a/src/pages/models/detail.tsx +++ b/src/pages/models/detail.tsx @@ -7,8 +7,8 @@ import { modelMetadataAtom } from '../../atoms/model-metadata'; import { modelsAtom } from '../../atoms/models'; import ListTable from '../../components/table'; import { useDelete } from '../../hooks/useDelete'; -import { useModelMetadata } from '../../hooks/useModelMetadata'; -import { useModelsData } from '../../hooks/useModelsData'; +import { useModelMetadata } from '../../hooks/data/useModelMetadata'; +import { useModelsData } from '../../hooks/data/useModelsData'; import { IModelMetadataView } from '../../interfaces/pages/models'; import { filterColumns } from '../../utils'; diff --git a/src/pages/models/index.tsx b/src/pages/models/index.tsx index 9581dcb..e7071f9 100644 --- a/src/pages/models/index.tsx +++ b/src/pages/models/index.tsx @@ -4,7 +4,7 @@ import { deleteModel } from '../../api/models'; import { modelsAtom } from '../../atoms/models'; import ListTable from '../../components/table'; import { useDelete } from '../../hooks/useDelete'; -import { useModelsData } from '../../hooks/useModelsData'; +import { useModelsData } from '../../hooks/data/useModelsData'; import { IModelView } from '../../interfaces/pages/models'; import { filterColumns } from '../../utils'; diff --git a/src/pages/monitoring/index.tsx b/src/pages/monitoring/index.tsx new file mode 100644 index 0000000..52b26f7 --- /dev/null +++ b/src/pages/monitoring/index.tsx @@ -0,0 +1,9 @@ +import { useEffect } from 'react'; + +export const Monitoring = () => { + useEffect(() => { + window.location.replace('https://dashboard.so1s.io'); + }, []); + + return <>; +}; diff --git a/src/pages/resources/detail.tsx b/src/pages/resources/detail.tsx index 15d4c22..c1b0bfd 100644 --- a/src/pages/resources/detail.tsx +++ b/src/pages/resources/detail.tsx @@ -7,7 +7,7 @@ import { snackbarAtom } from '../../atoms/snackbar'; import { DetailCard } from '../../components/detail/card'; import OverViewTab from '../../components/detail/overview-tab'; import { useDelete } from '../../hooks/useDelete'; -import { useResourcesData } from '../../hooks/useResourcesData'; +import { useResourcesData } from '../../hooks/data/useResourcesData'; export const ResourceDetail = () => { const refreshData = useResourcesData(); diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx index 93bc605..7a853fd 100644 --- a/src/pages/resources/index.tsx +++ b/src/pages/resources/index.tsx @@ -3,7 +3,7 @@ import { deleteResource } from '../../api/resources'; import { resourcesAtom } from '../../atoms/resources'; import ListTable from '../../components/table'; import { useDelete } from '../../hooks/useDelete'; -import { useResourcesData } from '../../hooks/useResourcesData'; +import { useResourcesData } from '../../hooks/data/useResourcesData'; export const Resources = () => { const refreshData = useResourcesData(); diff --git a/src/pages/tests/ab/create-update-base.tsx b/src/pages/tests/ab/create-update-base.tsx index 96b4f2d..a5406a3 100644 --- a/src/pages/tests/ab/create-update-base.tsx +++ b/src/pages/tests/ab/create-update-base.tsx @@ -1,4 +1,10 @@ -import { MenuItem, Select, TextField } from '@mui/material'; +import { + FormControl, + InputLabel, + MenuItem, + Select, + TextField, +} from '@mui/material'; import { pipe } from 'fp-ts/lib/function'; import { useAtom } from 'jotai'; import { useRef } from 'react'; @@ -8,8 +14,8 @@ import { deploymentsAtom } from '../../../atoms/deployments'; import { snackbarAtom } from '../../../atoms/snackbar'; import { abTestsAtom } from '../../../atoms/tests'; import ActionCard from '../../../components/action-card'; -import { useABTestsData } from '../../../hooks/useABTestsData'; -import { useDeploymentsData } from '../../../hooks/useDeploymentsData'; +import { useABTestsData } from '../../../hooks/data/useABTestsData'; +import { useDeploymentsData } from '../../../hooks/data/useDeploymentsData'; import { ICreateUpdateBaseParams } from '../../../interfaces'; export const CreateUpdateABTestBase: React.FC = ({ @@ -39,7 +45,7 @@ export const CreateUpdateABTestBase: React.FC = ({ const { abTestName } = useParams(); - if (!abTestName) { + if (type === 'update' && !abTestName) { setError(`AB Test Name이 주어지지 않았습니다.`); navigate('/tests/ab', { replace: true }); return <>; @@ -67,6 +73,10 @@ export const CreateUpdateABTestBase: React.FC = ({ Object.fromEntries ) as { [k in keyof typeof items]: string | number }; + if (type === 'update') { + itemsWithValues.name = abTest?.name ?? ''; + } + const isCorrect = pipe( itemsWithValues, Object.entries, @@ -109,34 +119,52 @@ export const CreateUpdateABTestBase: React.FC = ({ return (
- - + + Deployment A + + + + Deployment B + +
diff --git a/src/pages/tests/ab/detail.tsx b/src/pages/tests/ab/detail.tsx index 866464c..f3ac485 100644 --- a/src/pages/tests/ab/detail.tsx +++ b/src/pages/tests/ab/detail.tsx @@ -6,11 +6,11 @@ import { snackbarAtom } from '../../../atoms/snackbar'; import { abTestsAtom } from '../../../atoms/tests'; import { DetailCard } from '../../../components/detail/card'; import OverViewTab from '../../../components/detail/overview-tab'; -import { useABTestsData } from '../../../hooks/useABTestsData'; +import { useABTestsData } from '../../../hooks/data/useABTestsData'; import { useDelete } from '../../../hooks/useDelete'; -import { useDeploymentsData } from '../../../hooks/useDeploymentsData'; -import { IABTestView } from '../../../interfaces/pages/tests'; -import { convertABTestToView } from '../../../utils/pages/tests/ab'; +import { useDeploymentsData } from '../../../hooks/data/useDeploymentsData'; +import { IABTestJoined } from '../../../interfaces/pages/tests'; +import { joinABTest } from '../../../utils/pages/tests/ab'; export const ABTestDetail = () => { useABTestsData(); @@ -46,7 +46,7 @@ export const ABTestDetail = () => { return <>; } - const abTestView: IABTestView = convertABTestToView(abTest, deployments); + const abTestJoined: IABTestJoined = joinABTest(abTest, deployments); const performDelete = useDelete(deleteABTest); @@ -84,21 +84,21 @@ export const ABTestDetail = () => { 'Deployment B Deployment Strategy', ]} > -
{abTestView.id}
-
{abTestView.name}
-
{abTestView.domain}
- -
{abTestView.a?.deploymentName}
-
{abTestView.a?.status}
-
{abTestView.a?.modelName}
-
{abTestView.a?.modelVersion}
-
{abTestView.a?.strategy}
- -
{abTestView.b?.deploymentName}
-
{abTestView.b?.status}
-
{abTestView.b?.modelName}
-
{abTestView.b?.modelVersion}
-
{abTestView.b?.strategy}
+
{abTestJoined.id}
+
{abTestJoined.name}
+
{abTestJoined.domain}
+ +
{abTestJoined.a?.deploymentName}
+
{abTestJoined.a?.status}
+
{abTestJoined.a?.modelName}
+
{abTestJoined.a?.modelVersion}
+
{abTestJoined.a?.strategy}
+ +
{abTestJoined.b?.deploymentName}
+
{abTestJoined.b?.status}
+
{abTestJoined.b?.modelName}
+
{abTestJoined.b?.modelVersion}
+
{abTestJoined.b?.strategy}
Not Implemented
diff --git a/src/pages/tests/ab/index.tsx b/src/pages/tests/ab/index.tsx index 4e33085..56d7cf2 100644 --- a/src/pages/tests/ab/index.tsx +++ b/src/pages/tests/ab/index.tsx @@ -3,9 +3,9 @@ import { deleteABTest } from '../../../api/tests'; import { deploymentsAtom } from '../../../atoms/deployments'; import { abTestsAtom } from '../../../atoms/tests'; import ListTable from '../../../components/table'; -import { useABTestsData } from '../../../hooks/useABTestsData'; +import { useABTestsData } from '../../../hooks/data/useABTestsData'; import { useDelete } from '../../../hooks/useDelete'; -import { useDeploymentsData } from '../../../hooks/useDeploymentsData'; +import { useDeploymentsData } from '../../../hooks/data/useDeploymentsData'; import { IABTestView } from '../../../interfaces/pages/tests'; import { convertABTestToView } from '../../../utils/pages/tests/ab'; diff --git a/src/utils/pages/tests/ab/index.ts b/src/utils/pages/tests/ab/index.ts index b7655fe..324a98a 100644 --- a/src/utils/pages/tests/ab/index.ts +++ b/src/utils/pages/tests/ab/index.ts @@ -1,18 +1,32 @@ import { IDeploymentDatum } from '../../../../interfaces/pages/deployments'; import { + IABTestJoined, IABTestReadResponse, IABTestView, } from '../../../../interfaces/pages/tests'; -export const convertABTestToView = ( +export const joinABTest = ( abTest: IABTestReadResponse, deployments: IDeploymentDatum[] -): IABTestView => { +): IABTestJoined => { return { id: abTest.id, name: abTest.name, - a: deployments.find((dep) => dep.id === abTest.aId), - b: deployments.find((dep) => dep.id === abTest.bId), + a: deployments.find((dep) => dep.id === abTest.aid), + b: deployments.find((dep) => dep.id === abTest.bid), domain: abTest.domain, }; }; + +export const convertABTestToView = ( + abTest: IABTestReadResponse, + deployments: IDeploymentDatum[] +): IABTestView => { + const joined = joinABTest(abTest, deployments); + return { + name: joined.name, + a: joined.a?.deploymentName ?? '', + b: joined.b?.deploymentName ?? '', + domain: joined.domain, + }; +};