Merge pull request #16 from So1S/release/v0.5.0

Release/v0.5.0

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: <StorageIcon fontSize="large" />,
-        authOnly: true,
-        page: Index,
-        for: ['Owner', 'Admin', 'User'],
-    },
     {
         uri: '/monitoring',
         name: 'Monitoring',
         icon: <MonitorIcon fontSize="large" />,
         authOnly: true,
-        page: Index,
+        page: Monitoring,
         for: ['Owner', 'Admin', 'User'],
     },
     {

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 });

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,
+    });

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);

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 });

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);

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);

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 });

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 & {

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;

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<ICreateUpdateBaseParams> = ({
 
     return (
         <ActionCard
-            title={`${type === 'create' ? 'Create' : 'Update'} New Deployment`}
+            title={`${type === 'create' ? 'Create New' : 'Update'} Deployment`}
             mode={type === 'create' ? 'CREATE' : 'UPDATE'}
             onClick={submit}
         >

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);

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';
 

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';
 

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<ICreateUpdateBaseParams> = ({

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';
 

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';
 

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 <></>;
+};

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();

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();

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<ICreateUpdateBaseParams> = ({
@@ -39,7 +45,7 @@ export const CreateUpdateABTestBase: React.FC<ICreateUpdateBaseParams> = ({
 
     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<ICreateUpdateBaseParams> = ({
             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<ICreateUpdateBaseParams> = ({
 
     return (
         <ActionCard
-            title={`${type === 'create' ? 'Create' : 'Update New'} Model`}
+            title={`${type === 'create' ? 'Create New' : 'Update'} AB Test`}
             mode={type === 'create' ? 'CREATE' : 'UPDATE'}
             onClick={submit}
         >
             <div className="flex flex-col space-y-10 my-10 mx-auto">
                 <TextField
-                    label="AB Test Name"
+                    label={`AB Test Name${
+                        type === 'update' &&
+                        `: ${abTest?.name ?? 'Not Found'} (Disabled)`
+                    }`}
                     disabled={type === 'update'}
                     placeholder="AB Test"
                     inputRef={nameRef}
                 />
-                <Select label="Deployment A" inputRef={aIdRef}>
-                    {deployments.map((dep) => (
-                        <MenuItem key={dep.id} value={dep.id}>
-                            {dep.deploymentName}
-                        </MenuItem>
-                    ))}
-                </Select>
-                <Select label="Deployment A" inputRef={bIdRef}>
-                    {deployments.map((dep) => (
-                        <MenuItem key={dep.id} value={dep.id}>
-                            {dep.deploymentName}
-                        </MenuItem>
-                    ))}
-                </Select>
+                <FormControl fullWidth>
+                    <InputLabel id="deployment-a">Deployment A</InputLabel>
+                    <Select
+                        label="Deployment A"
+                        defaultValue={abTest?.aid}
+                        inputRef={aIdRef}
+                    >
+                        {deployments.map((dep) => (
+                            <MenuItem key={dep.id} value={dep.id}>
+                                {dep.deploymentName}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+                <FormControl fullWidth>
+                    <InputLabel id="deployment-b">Deployment B</InputLabel>
+                    <Select
+                        label="Deployment B"
+                        defaultValue={abTest?.bid}
+                        inputRef={bIdRef}
+                    >
+                        {deployments.map((dep) => (
+                            <MenuItem key={dep.id} value={dep.id}>
+                                {dep.deploymentName}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
                 <TextField
                     label="Domain"
-                    placeholder="https://so1s.io"
+                    defaultValue={abTest?.domain}
+                    placeholder="so1s.io"
                     inputRef={domainRef}
                 />
             </div>