support alias src

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>

client/src/pages/collections/Aliases.tsx

@@ -1,13 +1,13 @@
 import { useContext } from 'react';
 import { Chip, IconButton, makeStyles, Theme } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import { rootContext } from '../../context/Root';
+import { rootContext } from '@/context/Root';
 import { AliasesProps } from './Types';
-import icons from '../../components/icons/Icons';
+import icons from '@/components/icons/Icons';
 import DeleteIcon from '@material-ui/icons/Delete';
 import CreateAliasDialog from '../dialogs/CreateAliasDialog';
-import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
-import { CollectionHttp } from '../../http/Collection';
+import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
+import { CollectionHttp } from '@/http/Collection';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/collections/Collection.tsx

@@ -2,13 +2,13 @@ import { useMemo, useContext } from 'react';
 import { useNavigate, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme } from '@material-ui/core';
-import { authContext } from '../../context/Auth';
-import { useNavigationHook } from '../../hooks/Navigation';
-import { ALL_ROUTER_TYPES } from '../../router/Types';
-import CustomTabList from '../../components/customTabList/CustomTabList';
-import { ITab } from '../../components/customTabList/Types';
+import { authContext } from '@/context/Auth';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { ALL_ROUTER_TYPES } from '@/router/Types';
+import CustomTabList from '@/components/customTabList/CustomTabList';
+import { ITab } from '@/components/customTabList/Types';
 import Partitions from '../partitions/Partitions';
-import { parseLocationSearch } from '../../utils/Format';
+import { parseLocationSearch } from '@/utils/Format';
 import Schema from '../schema/Schema';
 import Query from '../query/Query';
 import Preview from '../preview/Preview';

client/src/pages/collections/Collections.tsx

@@ -2,23 +2,23 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import { makeStyles, Theme } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import { authContext } from '../../context/Auth';
-import { useNavigationHook } from '../../hooks/Navigation';
-import { ALL_ROUTER_TYPES } from '../../router/Types';
-import AttuGrid from '../../components/grid/Grid';
-import CustomToolBar from '../../components/grid/ToolBar';
+import { authContext } from '@/context/Auth';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { ALL_ROUTER_TYPES } from '@/router/Types';
+import AttuGrid from '@/components/grid/Grid';
+import CustomToolBar from '@/components/grid/ToolBar';
 import { CollectionView, InsertDataParam } from './Types';
-import { ColDefinitionsType, ToolBarConfig } from '../../components/grid/Types';
-import { usePaginationHook } from '../../hooks/Pagination';
-import icons from '../../components/icons/Icons';
-import EmptyCard from '../../components/cards/EmptyCard';
-import Status from '../../components/status/Status';
-import { ChildrenStatusType } from '../../components/status/Types';
-import StatusIcon from '../../components/status/StatusIcon';
-import CustomToolTip from '../../components/customToolTip/CustomToolTip';
-import { rootContext } from '../../context/Root';
+import { ColDefinitionsType, ToolBarConfig } from '@/components/grid/Types';
+import { usePaginationHook } from '@/hooks/Pagination';
+import icons from '@/components/icons/Icons';
+import EmptyCard from '@/components/cards/EmptyCard';
+import Status from '@/components/status/Status';
+import { ChildrenStatusType } from '@/components/status/Types';
+import StatusIcon from '@/components/status/StatusIcon';
+import CustomToolTip from '@/components/customToolTip/CustomToolTip';
+import { rootContext } from '@/context/Root';
 import CreateCollectionDialog from '../dialogs/CreateCollectionDialog';
-import { CollectionHttp } from '../../http/Collection';
+import { CollectionHttp } from '@/http/Collection';
 import LoadCollectionDialog from '../dialogs/LoadCollectionDialog';
 import ReleaseCollectionDialog from '../dialogs/ReleaseCollectionDialog';
 import DropCollectionDialog from '../dialogs/DropCollectionDialog';
@@ -26,11 +26,11 @@ import RenameCollectionDialog from '../dialogs/RenameCollectionDialog';
 import Highlighter from 'react-highlight-words';
 import InsertDialog from '../dialogs/insert/Dialog';
 import ImportSampleDialog from '../dialogs/ImportSampleDialog';
-import { MilvusHttp } from '../../http/Milvus';
+import { MilvusHttp } from '@/http/Milvus';
 import { LOADING_STATE } from '../../consts/Milvus';
-import { webSokcetContext } from '../../context/WebSocket';
+import { webSokcetContext } from '@/context/WebSocket';
 import { WS_EVENTS, WS_EVENTS_TYPE } from '../../consts/Http';
-import { checkIndexBuilding, checkLoading } from '../../utils/Validation';
+import { checkIndexBuilding, checkLoading } from '@/utils/Validation';
 import Aliases from './Aliases';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/pages/collections/CreateFields.tsx

@@ -8,16 +8,16 @@ import {
 } from '@material-ui/core';
 import { FC, Fragment, ReactElement, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import CustomSelector from '../../components/customSelector/CustomSelector';
-import icons from '../../components/icons/Icons';
-import CustomToolTip from '../../components/customToolTip/CustomToolTip';
-import { generateId } from '../../utils/Common';
-import { getCreateFieldType } from '../../utils/Format';
+import CustomSelector from '@/components/customSelector/CustomSelector';
+import icons from '@/components/icons/Icons';
+import CustomToolTip from '@/components/customToolTip/CustomToolTip';
+import { generateId } from '@/utils/Common';
+import { getCreateFieldType } from '@/utils/Format';
 import {
   checkEmptyValid,
   checkRange,
   getCheckResult,
-} from '../../utils/Validation';
+} from '@/utils/Validation';
 import {
   ALL_OPTIONS,
   PRIMARY_FIELDS_OPTIONS,

client/src/pages/collections/Types.ts

@@ -1,5 +1,5 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
-import { ChildrenStatusType } from '../../components/status/Types';
+import { ChildrenStatusType } from '@/components/status/Types';
 import { LOADING_STATE } from '../../consts/Milvus';
 import { FieldData } from '../schema/Types';
 

client/src/pages/connect/AuthForm.tsx

@@ -1,21 +1,21 @@
 import React, { useContext, useMemo, useState } from 'react';
 
 import { makeStyles, Theme, Typography } from '@material-ui/core';
-import CustomButton from '../../components/customButton/CustomButton';
-import CustomInput from '../../components/customInput/CustomInput';
-import icons from '../../components/icons/Icons';
+import CustomButton from '@/components/customButton/CustomButton';
+import CustomInput from '@/components/customInput/CustomInput';
+import icons from '@/components/icons/Icons';
 import { useTranslation } from 'react-i18next';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
-import { MilvusHttp } from '../../http/Milvus';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
+import { MilvusHttp } from '@/http/Milvus';
 import { useNavigate } from 'react-router-dom';
-import { rootContext } from '../../context/Root';
-import { authContext } from '../../context/Auth';
+import { rootContext } from '@/context/Root';
+import { authContext } from '@/context/Auth';
 import { MILVUS_ADDRESS, LAST_TIME_ADDRESS } from '../../consts/Localstorage';
 import { MILVUS_URL } from '../../consts/Milvus';
-import { CustomRadio } from '../../components/customRadio/CustomRadio';
-import { prometheusContext } from '../../context/Prometheus';
+import { CustomRadio } from '@/components/customRadio/CustomRadio';
+import { prometheusContext } from '@/context/Prometheus';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/connect/Connect.tsx

@@ -2,8 +2,8 @@ import { useContext } from 'react';
 import { Navigate } from 'react-router-dom';
 import ConnectContainer from './ConnectContainer';
 import { AuthForm } from './AuthForm';
-import { authContext } from '../../context/Auth';
-import GlobalEffect from '../../components/layout/GlobalEffect';
+import { authContext } from '@/context/Auth';
+import GlobalEffect from '@/components/layout/GlobalEffect';
 
 const Connect = () => {
   const { isAuth } = useContext(authContext);

client/src/pages/database/Create.tsx

@@ -1,11 +1,11 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomInput from '../../components/customInput/CustomInput';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomInput from '@/components/customInput/CustomInput';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
 import { CreateDatabaseProps, CreateDatabaseParams } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/pages/database/Database.tsx

@@ -1,17 +1,17 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { DatabaseHttp } from '../../http/Database';
-import AttuGrid from '../../components/grid/Grid';
-import { ColDefinitionsType, ToolBarConfig } from '../../components/grid/Types';
+import { DatabaseHttp } from '@/http/Database';
+import AttuGrid from '@/components/grid/Grid';
+import { ColDefinitionsType, ToolBarConfig } from '@/components/grid/Types';
 import {
   CreateDatabaseParams,
   DropDatabaseParams,
   DatabaseData,
 } from './Types';
-import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
-import { rootContext } from '../../context/Root';
-import { useNavigationHook } from '../../hooks/Navigation';
-import { ALL_ROUTER_TYPES } from '../../router/Types';
+import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
+import { rootContext } from '@/context/Root';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { ALL_ROUTER_TYPES } from '@/router/Types';
 import CreateUser from './Create';
 
 const Database = () => {

client/src/pages/database/Update.tsx

@@ -1,11 +1,11 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomInput from '../../components/customInput/CustomInput';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomInput from '@/components/customInput/CustomInput';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
 import { UpdateUserParams, UpdateUserProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/pages/dialogs/CreateAliasDialog.tsx

@@ -1,13 +1,13 @@
 import { FC, useContext, useMemo, useState } from 'react';
 import { Typography, makeStyles, Theme } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import { rootContext } from '../../context/Root';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomInput from '../../components/customInput/CustomInput';
-import { formatForm } from '../../utils/Form';
-import { useFormValidation } from '../../hooks/Form';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { CollectionHttp } from '../../http/Collection';
+import { rootContext } from '@/context/Root';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomInput from '@/components/customInput/CustomInput';
+import { formatForm } from '@/utils/Form';
+import { useFormValidation } from '@/hooks/Form';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { CollectionHttp } from '@/http/Collection';
 import { CreateAliasProps } from '../collections/Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/pages/dialogs/CreateCollectionDialog.tsx

@@ -1,16 +1,16 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomInput from '../../components/customInput/CustomInput';
-import CustomSelector from '../../components/customSelector/CustomSelector';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { rootContext } from '../../context/Root';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
-import { TypeEnum } from '../../utils/Validation';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomInput from '@/components/customInput/CustomInput';
+import CustomSelector from '@/components/customSelector/CustomSelector';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { rootContext } from '@/context/Root';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
+import { TypeEnum } from '@/utils/Validation';
 import CreateFields from '../collections/CreateFields';
-import { CollectionHttp } from '../../http/Collection';
+import { CollectionHttp } from '@/http/Collection';
 import {
   CollectionCreateParam,
   CollectionCreateProps,

client/src/pages/dialogs/CreatePartitionDialog.tsx

@@ -1,16 +1,16 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useMemo, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { rootContext } from '../../context/Root';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomInput from '../../components/customInput/CustomInput';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
+import { rootContext } from '@/context/Root';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomInput from '@/components/customInput/CustomInput';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
 import { PartitionCreateProps } from './Types';
 import { PartitionManageParam } from '../partitions/Types';
 import { ManageRequestMethods } from '../../types/Common';
-import { PartitionHttp } from '../../http/Partition';
+import { PartitionHttp } from '@/http/Partition';
 
 const useStyles = makeStyles((theme: Theme) => ({
   input: {

client/src/pages/dialogs/DropCollectionDialog.tsx

@@ -1,8 +1,8 @@
 import { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { rootContext } from '../../context/Root';
-import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
-import { CollectionHttp } from '../../http/Collection';
+import { rootContext } from '@/context/Root';
+import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
+import { CollectionHttp } from '@/http/Collection';
 import { DropCollectionProps } from './Types';
 
 const DropCollectionDialog: FC<DropCollectionProps> = props => {

client/src/pages/dialogs/DropPartitionDialog.tsx

@@ -1,9 +1,9 @@
 import { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { rootContext } from '../../context/Root';
-import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
+import { rootContext } from '@/context/Root';
+import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import { DropPartitionProps } from './Types';
-import { PartitionHttp } from '../../http/Partition';
+import { PartitionHttp } from '@/http/Partition';
 import { PartitionManageParam } from '../partitions/Types';
 import { ManageRequestMethods } from '../../types/Common';
 

client/src/pages/dialogs/ImportSampleDialog.tsx

@@ -1,12 +1,12 @@
 import { makeStyles, Theme, Typography } from '@material-ui/core';
 import { FC, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomSelector from '../../components/customSelector/CustomSelector';
-import { rootContext } from '../../context/Root';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomSelector from '@/components/customSelector/CustomSelector';
+import { rootContext } from '@/context/Root';
 import { InsertStatusEnum } from './insert/Types';
-import { CollectionHttp } from '../../http/Collection';
-import { MilvusHttp } from '../../http/Milvus';
+import { CollectionHttp } from '@/http/Collection';
+import { MilvusHttp } from '@/http/Milvus';
 import { LoadSampleParam } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => {

client/src/pages/dialogs/LoadCollectionDialog.tsx

@@ -7,19 +7,19 @@ import {
   FormControlLabel,
 } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import { authContext } from '../../context/Auth';
-import { CollectionHttp } from '../../http/Collection';
-import { rootContext } from '../../context/Root';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
-import { parseJson, getNode } from '../../utils/Metric';
-import CustomInput from '../../components/customInput/CustomInput';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import { MilvusHttp } from '../../http/Milvus';
-import CustomToolTip from '../../components/customToolTip/CustomToolTip';
+import { authContext } from '@/context/Auth';
+import { CollectionHttp } from '@/http/Collection';
+import { rootContext } from '@/context/Root';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
+import { parseJson, getNode } from '@/utils/Metric';
+import CustomInput from '@/components/customInput/CustomInput';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import { MilvusHttp } from '@/http/Milvus';
+import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import { MILVUS_NODE_TYPE, MILVUS_DEPLOY_MODE } from '../../consts/Milvus';
-import icons from '../../components/icons/Icons';
+import icons from '@/components/icons/Icons';
 
 const useStyles = makeStyles((theme: Theme) => ({
   desc: {

client/src/pages/dialogs/ReleaseCollectionDialog.tsx

@@ -1,9 +1,9 @@
 import { useContext, useState } from 'react';
 import { Typography, makeStyles, Theme } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import { CollectionHttp } from '../../http/Collection';
-import { rootContext } from '../../context/Root';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
+import { CollectionHttp } from '@/http/Collection';
+import { rootContext } from '@/context/Root';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
 
 const useStyles = makeStyles((theme: Theme) => ({
   desc: {

client/src/pages/dialogs/RenameCollectionDialog.tsx

@@ -1,13 +1,13 @@
 import { FC, useContext, useMemo, useState } from 'react';
 import { Typography, makeStyles, Theme } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import { rootContext } from '../../context/Root';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomInput from '../../components/customInput/CustomInput';
-import { formatForm } from '../../utils/Form';
-import { useFormValidation } from '../../hooks/Form';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { CollectionHttp } from '../../http/Collection';
+import { rootContext } from '@/context/Root';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomInput from '@/components/customInput/CustomInput';
+import { formatForm } from '@/utils/Form';
+import { useFormValidation } from '@/hooks/Form';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { CollectionHttp } from '@/http/Collection';
 import { RenameCollectionProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/pages/dialogs/insert/Dialog.tsx

@@ -9,9 +9,9 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import DialogTemplate from '../../../components/customDialog/DialogTemplate';
-import icons from '../../../components/icons/Icons';
-import { rootContext } from '../../../context/Root';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import icons from '@/components/icons/Icons';
+import { rootContext } from '@/context/Root';
 import InsertImport from './Import';
 import InsertPreview from './Preview';
 import InsertStatus from './Status';
@@ -20,10 +20,10 @@ import {
   InsertStatusEnum,
   InsertStepperEnum,
 } from './Types';
-import { Option } from '../../../components/customSelector/Types';
+import { Option } from '@/components/customSelector/Types';
 import { parse } from 'papaparse';
-import { PartitionHttp } from '../../../http/Partition';
-import { combineHeadsAndData } from '../../../utils/Insert';
+import { PartitionHttp } from '@/http/Partition';
+import { combineHeadsAndData } from '@/utils/Insert';
 
 const getStyles = makeStyles((theme: Theme) => ({
   icon: {

client/src/pages/dialogs/insert/Import.tsx

@@ -1,11 +1,11 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme, Divider, Typography } from '@material-ui/core';
-import CustomSelector from '../../../components/customSelector/CustomSelector';
+import CustomSelector from '@/components/customSelector/CustomSelector';
 import { InsertImportProps } from './Types';
-import Uploader from '../../../components/uploader/Uploader';
+import Uploader from '@/components/uploader/Uploader';
 import { INSERT_CSV_SAMPLE, INSERT_MAX_SIZE } from '../../../consts/Insert';
-import { parseByte } from '../../../utils/Format';
+import { parseByte } from '../@/utils/Format';
 
 const getStyles = makeStyles((theme: Theme) => ({
   tip: {

client/src/pages/dialogs/insert/Preview.tsx

@@ -2,13 +2,13 @@ import { FC, useCallback, useMemo } from 'react';
 import { makeStyles, Theme, Typography } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { InsertPreviewProps } from './Types';
-import { Option } from '../../../components/customSelector/Types';
-import CustomSelector from '../../../components/customSelector/CustomSelector';
-import AttuGrid from '../../../components/grid/Grid';
-import { transferCsvArrayToTableData } from '../../../utils/Insert';
-import { ColDefinitionsType } from '../../../components/grid/Types';
-import SimpleMenu from '../../../components/menu/SimpleMenu';
-import icons from '../../../components/icons/Icons';
+import { Option } from '@/components/customSelector/Types';
+import CustomSelector from '@/components/customSelector/CustomSelector';
+import AttuGrid from '@/components/grid/Grid';
+import { transferCsvArrayToTableData } from '@/utils/Insert';
+import { ColDefinitionsType } from '@/components/grid/Types';
+import SimpleMenu from '@/components/menu/SimpleMenu';
+import icons from '@/components/icons/Icons';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/dialogs/insert/Types.ts

@@ -1,7 +1,7 @@
 import { CollectionData } from '../../collections/Types';
 import { PartitionView } from '../../partitions/Types';
 import { FieldData } from '../../schema/Types';
-import { Option } from '../../../components/customSelector/Types';
+import { Option } from '@/components/customSelector/Types';
 
 export interface InsertContentProps {
   // optional on partition page since its collection is fixed

client/src/pages/overview/Overview.tsx

@@ -1,18 +1,18 @@
 import { makeStyles, Theme, Typography, useTheme } from '@material-ui/core';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import EmptyCard from '../../components/cards/EmptyCard';
-import icons from '../../components/icons/Icons';
+import EmptyCard from '@/components/cards/EmptyCard';
+import icons from '@/components/icons/Icons';
 import { WS_EVENTS, WS_EVENTS_TYPE } from '../../consts/Http';
 import { LOADING_STATE } from '../../consts/Milvus';
-import { rootContext } from '../../context/Root';
-import { webSokcetContext } from '../../context/WebSocket';
-import { useNavigationHook } from '../../hooks/Navigation';
-import { CollectionHttp } from '../../http/Collection';
-import { MilvusHttp } from '../../http/Milvus';
-import { ALL_ROUTER_TYPES } from '../../router/Types';
-import { formatNumber } from '../../utils/Common';
-import { checkLoading, checkIndexBuilding } from '../../utils/Validation';
+import { rootContext } from '@/context/Root';
+import { webSokcetContext } from '@/context/WebSocket';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { CollectionHttp } from '@/http/Collection';
+import { MilvusHttp } from '@/http/Milvus';
+import { ALL_ROUTER_TYPES } from '@/router/Types';
+import { formatNumber } from '@/utils/Common';
+import { checkLoading, checkIndexBuilding } from '@/utils/Validation';
 import { CollectionData } from '../collections/Types';
 import CollectionCard from './collectionCard/CollectionCard';
 import StatisticsCard from './statisticsCard/StatisticsCard';

client/src/pages/overview/collectionCard/CollectionCard.tsx

@@ -1,15 +1,15 @@
 import { makeStyles, Theme, Typography, Divider } from '@material-ui/core';
 import { FC, useContext } from 'react';
-import CustomButton from '../../../components/customButton/CustomButton';
-import icons from '../../../components/icons/Icons';
-import Status from '../../../components/status/Status';
+import CustomButton from '@/components/customButton/CustomButton';
+import icons from '@/components/icons/Icons';
+import Status from '@/components/status/Status';
 import { CollectionCardProps } from './Types';
 import { useTranslation } from 'react-i18next';
-import CustomIconButton from '../../../components/customButton/CustomIconButton';
+import CustomIconButton from '@/components/customButton/CustomIconButton';
 import { useNavigate, Link } from 'react-router-dom';
-import { LOADING_STATE } from '../../../consts/Milvus';
+import { LOADING_STATE } from '@/consts/Milvus';
 import ReleaseCollectionDialog from '../../dialogs/ReleaseCollectionDialog';
-import { rootContext } from '../../../context/Root';
+import { rootContext } from '@/context/Root';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/partitions/Partitions.tsx

@@ -2,22 +2,22 @@ import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useContext, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { PartitionView } from './Types';
-import AttuGrid from '../../components/grid/Grid';
-import { ColDefinitionsType, ToolBarConfig } from '../../components/grid/Types';
+import AttuGrid from '@/components/grid/Grid';
+import { ColDefinitionsType, ToolBarConfig } from '@/components/grid/Types';
 import { useTranslation } from 'react-i18next';
-import { usePaginationHook } from '../../hooks/Pagination';
-import icons from '../../components/icons/Icons';
-import CustomToolTip from '../../components/customToolTip/CustomToolTip';
-import { rootContext } from '../../context/Root';
-import { PartitionHttp } from '../../http/Partition';
+import { usePaginationHook } from '@/hooks/Pagination';
+import icons from '@/components/icons/Icons';
+import CustomToolTip from '@/components/customToolTip/CustomToolTip';
+import { rootContext } from '@/context/Root';
+import { PartitionHttp } from '@/http/Partition';
 import Highlighter from 'react-highlight-words';
-import { useInsertDialogHook } from '../../hooks/Dialog';
+import { useInsertDialogHook } from '@/hooks/Dialog';
 import InsertContainer from '../dialogs/insert/Dialog';
-import { CollectionHttp } from '../../http/Collection';
-import { FieldHttp } from '../../http/Field';
+import { CollectionHttp } from '@/http/Collection';
+import { FieldHttp } from '@/http/Field';
 import { Field } from '../schema/Types';
 import { InsertDataParam } from '../collections/Types';
-import { MilvusHttp } from '../../http/Milvus';
+import { MilvusHttp } from '@/http/Milvus';
 import CreatePartitionDialog from '../dialogs/CreatePartitionDialog';
 import DropPartitionDialog from '../dialogs/DropPartitionDialog';
 

client/src/pages/preview/Preview.tsx

@@ -1,15 +1,15 @@
 import { FC, useEffect, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import AttuGrid from '../../components/grid/Grid';
+import AttuGrid from '@/components/grid/Grid';
 import { getQueryStyles } from '../query/Styles';
-import { CollectionHttp } from '../../http/Collection';
-import { FieldHttp } from '../../http/Field';
-import { IndexHttp } from '../../http/Index';
-import { usePaginationHook } from '../../hooks/Pagination';
-import CopyButton from '../../components/advancedSearch/CopyButton';
-import { ToolBarConfig } from '../../components/grid/Types';
-import CustomToolBar from '../../components/grid/ToolBar';
-import { generateVector } from '../../utils/Common';
+import { CollectionHttp } from '@/http/Collection';
+import { FieldHttp } from '@/http/Field';
+import { IndexHttp } from '@/http/Index';
+import { usePaginationHook } from '@/hooks/Pagination';
+import CopyButton from '@/components/advancedSearch/CopyButton';
+import { ToolBarConfig } from '@/components/grid/Types';
+import CustomToolBar from '@/components/grid/ToolBar';
+import { generateVector } from '@/utils/Common';
 import { DataTypeEnum } from '../../pages/collections/Types';
 
 import {

client/src/pages/query/Query.tsx

@@ -2,22 +2,22 @@ import { FC, useEffect, useState, useRef, useMemo, useContext } from 'react';
 import { TextField } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { Parser } from '@json2csv/plainjs';
-import { rootContext } from '../../context/Root';
-import EmptyCard from '../../components/cards/EmptyCard';
-import icons from '../../components/icons/Icons';
-import CustomButton from '../../components/customButton/CustomButton';
-import AttuGrid from '../../components/grid/Grid';
-import { ToolBarConfig } from '../../components/grid/Types';
+import { rootContext } from '@/context/Root';
+import EmptyCard from '@/components/cards/EmptyCard';
+import icons from '@/components/icons/Icons';
+import CustomButton from '@/components/customButton/CustomButton';
+import AttuGrid from '@/components/grid/Grid';
+import { ToolBarConfig } from '@/components/grid/Types';
 import { getQueryStyles } from './Styles';
-import Filter from '../../components/advancedSearch';
-import { CollectionHttp } from '../../http/Collection';
-import { FieldHttp } from '../../http/Field';
-import { usePaginationHook } from '../../hooks/Pagination';
-// import { useTimeTravelHook } from '../../hooks/TimeTravel';
-import CopyButton from '../../components/advancedSearch/CopyButton';
-import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
-import CustomToolBar from '../../components/grid/ToolBar';
-// import { CustomDatePicker } from '../../components/customDatePicker/CustomDatePicker';
+import Filter from '@/components/advancedSearch';
+import { CollectionHttp } from '@/http/Collection';
+import { FieldHttp } from '@/http/Field';
+import { usePaginationHook } from '@/hooks/Pagination';
+// import { useTimeTravelHook } from '@/hooks/TimeTravel';
+import CopyButton from '@/components/advancedSearch/CopyButton';
+import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
+import CustomToolBar from '@/components/grid/ToolBar';
+// import { CustomDatePicker } from '@/components/customDatePicker/CustomDatePicker';
 import { saveAs } from 'file-saver';
 import { DataTypeStringEnum } from '../collections/Types';
 import { getLabelDisplayedRows } from '../search/Utils';

client/src/pages/schema/Create.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CodeLanguageEnum, CodeViewData } from '../../components/code/Types';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomSwitch from '../../components/customSwitch/CustomSwitch';
+import { CodeLanguageEnum, CodeViewData } from '@/components/code/Types';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomSwitch from '@/components/customSwitch/CustomSwitch';
 import {
   DEFAULT_SEFMENT_FILE_SIZE,
   DEFAULT_VECTORS,
@@ -10,12 +10,12 @@ import {
   INDEX_OPTIONS_MAP,
   METRIC_TYPES_VALUES,
 } from '../../consts/Milvus';
-import { useFormValidation } from '../../hooks/Form';
-import { getCreateIndexJSCode } from '../../utils/code/Js';
-import { getCreateIndexPYCode } from '../../utils/code/Py';
-import { getCreateIndexJavaCode } from '../../utils/code/Java';
-import { formatForm, getMetricOptions } from '../../utils/Form';
-import { computMilvusRecommonds, formatSize } from '../../utils/SizingTool';
+import { useFormValidation } from '@/hooks/Form';
+import { getCreateIndexJSCode } from '@/utils/code/Js';
+import { getCreateIndexPYCode } from '@/utils/code/Py';
+import { getCreateIndexJavaCode } from '@/utils/code/Java';
+import { formatForm, getMetricOptions } from '@/utils/Form';
+import { computMilvusRecommonds, formatSize } from '@/utils/SizingTool';
 import { DataTypeEnum, DataTypeStringEnum } from '../collections/Types';
 import CreateForm from './CreateForm';
 import SizingInfo from './SizingInfo';

client/src/pages/schema/CreateForm.tsx

@@ -1,12 +1,12 @@
 import { makeStyles, Theme, Typography } from '@material-ui/core';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import CustomInput from '../../components/customInput/CustomInput';
-import CustomSelector from '../../components/customSelector/CustomSelector';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import CustomInput from '@/components/customInput/CustomInput';
+import CustomSelector from '@/components/customSelector/CustomSelector';
 import { m_OPTIONS } from '../../consts/Milvus';
 import { FormHelperType } from '../../types/Common';
-import { Option } from '../../components/customSelector/Types';
+import { Option } from '@/components/customSelector/Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/schema/IndexTypeElement.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext, useEffect, useMemo, useState } from 'react';
 import Chip from '@material-ui/core/Chip';
-import { IndexHttp } from '../../http/Index';
+import { IndexHttp } from '@/http/Index';
 import { IndexState } from '../../types/Milvus';
 import {
   FieldView,
@@ -10,13 +10,13 @@ import {
 } from './Types';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme } from '@material-ui/core';
-import icons from '../../components/icons/Icons';
-import { rootContext } from '../../context/Root';
+import icons from '@/components/icons/Icons';
+import { rootContext } from '@/context/Root';
 import CreateIndex from './Create';
-import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
-import StatusIcon from '../../components/status/StatusIcon';
-import { ChildrenStatusType } from '../../components/status/Types';
-import { sleep } from '../../utils/Common';
+import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
+import StatusIcon from '@/components/status/StatusIcon';
+import { ChildrenStatusType } from '@/components/status/Types';
+import { sleep } from '@/utils/Common';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/schema/Schema.tsx

@@ -1,14 +1,14 @@
 import { makeStyles, Theme, Typography, Chip } from '@material-ui/core';
 import { FC, useCallback, useEffect, useState } from 'react';
-import AttuGrid from '../../components/grid/Grid';
-import { ColDefinitionsType } from '../../components/grid/Types';
+import AttuGrid from '@/components/grid/Grid';
+import { ColDefinitionsType } from '@/components/grid/Types';
 import { useTranslation } from 'react-i18next';
-import { usePaginationHook } from '../../hooks/Pagination';
-import icons from '../../components/icons/Icons';
-import { FieldHttp } from '../../http/Field';
+import { usePaginationHook } from '@/hooks/Pagination';
+import icons from '@/components/icons/Icons';
+import { FieldHttp } from '@/http/Field';
 import { FieldView } from './Types';
 import IndexTypeElement from './IndexTypeElement';
-import { IndexHttp } from '../../http/Index';
+import { IndexHttp } from '@/http/Index';
 import { DataTypeStringEnum } from '../collections/Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/pages/schema/SizingInfo.tsx

@@ -1,8 +1,8 @@
 import { makeStyles, Theme, Typography } from '@material-ui/core';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import CustomToolTip from '../../components/customToolTip/CustomToolTip';
-import icons from '../../components/icons/Icons';
+import CustomToolTip from '@/components/customToolTip/CustomToolTip';
+import icons from '@/components/icons/Icons';
 import { SizingInfoParam } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/pages/search/SearchParams.tsx

@@ -1,10 +1,10 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useCallback, useContext, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import CustomInput from '../../components/customInput/CustomInput';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import CustomSelector from '../../components/customSelector/CustomSelector';
-import { Option } from '../../components/customSelector/Types';
+import CustomInput from '@/components/customInput/CustomInput';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import CustomSelector from '@/components/customSelector/CustomSelector';
+import { Option } from '@/components/customSelector/Types';
 import {
   DEFAULT_NLIST_VALUE,
   DEFAULT_SEARCH_PARAM_VALUE_MAP,
@@ -12,9 +12,9 @@ import {
   METRIC_OPTIONS_MAP,
   searchKeywordsType,
 } from '../../consts/Milvus';
-import { rootContext } from '../../context/Root';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
+import { rootContext } from '@/context/Root';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
 import { SearchParamInputConfig, SearchParamsProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/pages/search/Types.ts

@@ -1,4 +1,4 @@
-import { Option } from '../../components/customSelector/Types';
+import { Option } from '@/components/customSelector/Types';
 import { searchKeywordsType } from '../../consts/Milvus';
 import {
   DataTypeEnum,

client/src/pages/search/VectorSearch.tsx

@@ -1,25 +1,25 @@
 import { TextField, Typography, Button } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import { useNavigationHook } from '../../hooks/Navigation';
-import { ALL_ROUTER_TYPES } from '../../router/Types';
-import CustomSelector from '../../components/customSelector/CustomSelector';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { ALL_ROUTER_TYPES } from '@/router/Types';
+import CustomSelector from '@/components/customSelector/CustomSelector';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import SearchParams from './SearchParams';
 import { DEFAULT_METRIC_VALUE_MAP } from '../../consts/Milvus';
 import { FieldOption, SearchResultView, VectorSearchParam } from './Types';
-import AttuGrid from '../../components/grid/Grid';
-import EmptyCard from '../../components/cards/EmptyCard';
-import icons from '../../components/icons/Icons';
-import { usePaginationHook } from '../../hooks/Pagination';
-import CustomButton from '../../components/customButton/CustomButton';
-import SimpleMenu from '../../components/menu/SimpleMenu';
+import AttuGrid from '@/components/grid/Grid';
+import EmptyCard from '@/components/cards/EmptyCard';
+import icons from '@/components/icons/Icons';
+import { usePaginationHook } from '@/hooks/Pagination';
+import CustomButton from '@/components/customButton/CustomButton';
+import SimpleMenu from '@/components/menu/SimpleMenu';
 import { TOP_K_OPTIONS } from './Constants';
-import { Option } from '../../components/customSelector/Types';
-import { CollectionHttp } from '../../http/Collection';
+import { Option } from '@/components/customSelector/Types';
+import { CollectionHttp } from '@/http/Collection';
 import { CollectionData, DataTypeEnum } from '../collections/Types';
-import { IndexHttp } from '../../http/Index';
+import { IndexHttp } from '@/http/Index';
 import { getVectorSearchStyles } from './Styles';
-import { parseValue } from '../../utils/Insert';
+import { parseValue } from '@/utils/Insert';
 import {
   classifyFields,
   getDefaultIndexType,
@@ -27,15 +27,15 @@ import {
   getNonVectorFieldsForFilter,
   getVectorFieldOptions,
   transferSearchResult,
-} from '../../utils/search';
-import { ColDefinitionsType } from '../../components/grid/Types';
-import Filter from '../../components/advancedSearch';
-import { Field } from '../../components/advancedSearch/Types';
+} from '@/utils/search';
+import { ColDefinitionsType } from '@/components/grid/Types';
+import Filter from '@/components/advancedSearch';
+import { Field } from '@/components/advancedSearch/Types';
 import { useLocation } from 'react-router-dom';
-import { parseLocationSearch } from '../../utils/Format';
-import { cloneObj, generateVector } from '../../utils/Common';
-import { CustomDatePicker } from '../../components/customDatePicker/CustomDatePicker';
-import { useTimeTravelHook } from '../../hooks/TimeTravel';
+import { parseLocationSearch } from '@/utils/Format';
+import { cloneObj, generateVector } from '@/utils/Common';
+import { CustomDatePicker } from '@/components/customDatePicker/CustomDatePicker';
+import { useTimeTravelHook } from '@/hooks/TimeTravel';
 import { LOADING_STATE } from '../../consts/Milvus';
 import { getLabelDisplayedRows } from './Utils';
 

client/src/pages/system/DataCard.tsx

@@ -6,7 +6,7 @@ import {
   formatByteSize,
   formatSystemTime,
   getByteString,
-} from '../../utils/Format';
+} from '@/utils/Format';
 import { DataProgressProps, DataSectionProps, DataCardProps } from './Types';
 
 const getStyles = makeStyles(theme => ({

client/src/pages/system/NodeListView.tsx

@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme } from '@material-ui/core';
 import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
 import { DataGrid } from '@mui/x-data-grid';
-import { useNavigationHook } from '../../hooks/Navigation';
-import { ALL_ROUTER_TYPES } from '../../router/Types';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { ALL_ROUTER_TYPES } from '@/router/Types';
 import MiniTopo from './MiniTopology';
-import { getByteString, formatByteSize } from '../../utils/Format';
+import { getByteString, formatByteSize } from '@/utils/Format';
 import DataCard from './DataCard';
 import { NodeListViewProps, Node } from './Types';
 

client/src/pages/system/ProgressCard.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseCard from './BaseCard';
 import Progress from './Progress';
-import { getByteString } from '../../utils/Format';
+import { getByteString } from '@/utils/Format';
 import { ProgressCardProps } from './Types';
 
 const color1 = '#06F3AF';

client/src/pages/system/SystemView.tsx

@@ -2,16 +2,16 @@ import { useState, useEffect, useRef } from 'react';
 // import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme } from '@material-ui/core';
 import clsx from 'clsx';
-import { useNavigationHook } from '../../hooks/Navigation';
-import { ALL_ROUTER_TYPES } from '../../router/Types';
-import { MilvusHttp } from '../../http/Milvus';
-import { useInterval } from '../../hooks/SystemView';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { ALL_ROUTER_TYPES } from '@/router/Types';
+import { MilvusHttp } from '@/http/Milvus';
+import { useInterval } from '@/hooks/SystemView';
 import Topo from './Topology';
 import NodeListView from './NodeListView';
 // import LineChartCard from './LineChartCard';
 // import ProgressCard from './ProgressCard';
 import DataCard from './DataCard';
-import { parseJson } from '../../utils/Metric';
+import { parseJson } from '@/utils/Metric';
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/pages/systemHealthy/SystemHealthyView.tsx

@@ -1,9 +1,9 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { useEffect, useMemo, useState } from 'react';
-import { useNavigationHook } from '../../hooks/Navigation';
-import { useInterval } from '../../hooks/SystemView';
-import { PrometheusHttp } from '../../http/Prometheus';
-import { ALL_ROUTER_TYPES } from '../../router/Types';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { useInterval } from '@/hooks/SystemView';
+import { PrometheusHttp } from '@/http/Prometheus';
+import { ALL_ROUTER_TYPES } from '@/router/Types';
 import {
   ENodeService,
   ILineChartData,

client/src/pages/systemHealthy/ThresholdSetting.tsx

@@ -10,14 +10,14 @@ import {
   Typography,
 } from '@material-ui/core';
 import { Dispatch, SetStateAction, useMemo, useState } from 'react';
-import CustomInput from '../../components/customInput/CustomInput';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
+import CustomInput from '@/components/customInput/CustomInput';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
 import { HEALTHY_STATUS_COLORS } from './consts';
 import { EHealthyStatus, IThreshold } from './Types';
 import SettingsOutlinedIcon from '@material-ui/icons/SettingsOutlined';
-import CustomButton from '../../components/customButton/CustomButton';
+import CustomButton from '@/components/customButton/CustomButton';
 export interface SimpleDialogProps {
   open: boolean;
   selectedValue: string;

client/src/pages/systemHealthy/Topology.tsx

@@ -9,8 +9,8 @@ import {
 import { getIcon } from './getIcon';
 import { ENodeService, ENodeType, INodeTreeStructure } from './Types';
 import clsx from 'clsx';
-import { formatPrometheusAddress } from '../../utils/Format';
-import { prometheusContext } from '../../context/Prometheus';
+import { formatPrometheusAddress } from '@/utils/Format';
+import { prometheusContext } from '@/context/Prometheus';
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/pages/user/Create.tsx

@@ -1,11 +1,11 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomInput from '../../components/customInput/CustomInput';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomInput from '@/components/customInput/CustomInput';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
 import { CreateUserProps, CreateUserParams } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/pages/user/Update.tsx

@@ -1,11 +1,11 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import DialogTemplate from '../../components/customDialog/DialogTemplate';
-import CustomInput from '../../components/customInput/CustomInput';
-import { ITextfieldConfig } from '../../components/customInput/Types';
-import { useFormValidation } from '../../hooks/Form';
-import { formatForm } from '../../utils/Form';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import CustomInput from '@/components/customInput/CustomInput';
+import { ITextfieldConfig } from '@/components/customInput/Types';
+import { useFormValidation } from '@/hooks/Form';
+import { formatForm } from '@/utils/Form';
 import { UpdateUserParams, UpdateUserProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/pages/user/User.tsx

@@ -1,18 +1,18 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { UserHttp } from '../../http/User';
-import AttuGrid from '../../components/grid/Grid';
-import { ColDefinitionsType, ToolBarConfig } from '../../components/grid/Types';
+import { UserHttp } from '@/http/User';
+import AttuGrid from '@/components/grid/Grid';
+import { ColDefinitionsType, ToolBarConfig } from '@/components/grid/Types';
 import {
   CreateUserParams,
   DeleteUserParams,
   UpdateUserParams,
   UserData,
 } from './Types';
-import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
-import { rootContext } from '../../context/Root';
-import { useNavigationHook } from '../../hooks/Navigation';
-import { ALL_ROUTER_TYPES } from '../../router/Types';
+import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
+import { rootContext } from '@/context/Root';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { ALL_ROUTER_TYPES } from '@/router/Types';
 import CreateUser from './Create';
 import UpdateUser from './Update';
 

client/tsconfig.json

@@ -8,7 +8,10 @@
       "jest",
       "@testing-library/jest-dom"
     ],
-
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    },
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,

client/vite.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import * as path from 'path';
 import reactRefresh from '@vitejs/plugin-react';
 const svgrPlugin = require('vite-plugin-svgr');
 
@@ -22,4 +23,10 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    // extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 });