Skip to content

Commit

Permalink
finish part1
Browse files Browse the repository at this point in the history 
Signed-off-by: shanghaikid <[email protected]>
  • Loading branch information
@shanghaikid
shanghaikid committed Jul 27, 2024
1 parent 325b398 commit 4df7951
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 21 deletions.
2 changes: 1 addition & 1 deletion client/src/consts/Milvus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 2,7 @@ export const MILVUS_URL =
((window as any)._env_ && (window as any)._env_.MILVUS_URL) || '';

export const MILVUS_DATABASE =
((window as any)._env_ && (window as any)._env_.DATABASE) || '';
((window as any)._env_ && (window as any)._env_.DATABASE) || 'default';

export const DYNAMIC_FIELD = `$meta`;

Expand Down
5 changes: 3 additions & 2 deletions client/src/context/Auth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 35,12 @@ export const AuthProvider = (props: { children: React.ReactNode }) => {
JSON.stringify({
username: '',
password: '',
address: '' || MILVUS_URL,
address: MILVUS_URL,
token: '',
database: '' || MILVUS_DATABASE,
database: MILVUS_DATABASE,
})
);

// state
const [authReq, setAuthReq] = useState<AuthReq>(localAuthReq);
const [clientId, setClientId] = useState<string>(
Expand Down
54 changes: 37 additions & 17 deletions client/src/pages/connect/AuthForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 7,17 @@ import { useFormValidation } from '@/hooks';
import { formatForm } from '@/utils';
import { useNavigate } from 'react-router-dom';
import { rootContext, authContext, dataContext } from '@/context';
import { MILVUS_CLIENT_ID, ATTU_AUTH_HISTORY } from '@/consts';
import { MILVUS_CLIENT_ID, ATTU_AUTH_HISTORY, MILVUS_DATABASE } from '@/consts';
import { CustomRadio } from '@/components/customRadio/CustomRadio';
import Icons from '@/components/icons/Icons';
import CustomToolTip from '@/components/customToolTip/CustomToolTip';
import CustomIconButton from '@/components/customButton/CustomIconButton';
import { useStyles } from './style';
import { AuthReq } from '@server/types';

type Connection = AuthReq & {
time: string;
};

export const AuthForm = (props: any) => {
// styles
Expand All @@ -36,7 41,7 @@ export const AuthForm = (props: any) => {
// UI states
const [withPass, setWithPass] = useState(authReq.username.length > 0);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [connections, setConnections] = useState<any[]>([]);
const [connections, setConnections] = useState<Connection[]>([]);

// form validation
const checkedForm = useMemo(() => {
Expand All @@ -50,6 55,10 @@ export const AuthForm = (props: any) => {
key: 'address' | 'username' | 'password' | 'database' | 'token',
value: string | boolean
) => {
// set database to default if empty
if (key === 'database' && value === '') {
value = MILVUS_DATABASE;
}
setAuthReq(v => ({ ...v, [key]: value }));
};
// handle menu clicked
Expand Down Expand Up @@ -81,7 90,7 @@ export const AuthForm = (props: any) => {
openSnackBar(successTrans('connect'));
// save clientId to local storage
window.localStorage.setItem(MILVUS_CLIENT_ID, result.clientId);
// save connection to local storage
// get connection history
const history = JSON.parse(
window.localStorage.getItem(ATTU_AUTH_HISTORY) || '[]'
);
Expand All @@ -90,12 99,14 @@ export const AuthForm = (props: any) => {
const newHistory = [
...history.filter(
(item: any) =>
item.url !== authReq.address || item.database !== authReq.database
item.address !== authReq.address ||
item.database !== authReq.database
),
{
url: authReq.address,
address: authReq.address,
database: authReq.database,
time: new Date().toLocaleString(),
username: authReq.username,
time: Date.now(),
},
];

Expand All @@ -118,6 129,7 @@ export const AuthForm = (props: any) => {
// connect history clicked
const onConnectHistoryClicked = (connection: any) => {
console.log('connection', connection);
setAuthReq(connection);
handleMenuClose();
};

Expand All @@ -126,12 138,18 @@ export const AuthForm = (props: any) => {
return authReq.address.trim().length === 0;
}, [authReq.address]);

// load connection from localstorage
// load connection from local storage
useEffect(() => {
const connections = JSON.parse(
const connections: Connection[] = JSON.parse(
window.localStorage.getItem(ATTU_AUTH_HISTORY) ||
'[{"url":"http://127.0.0.1:19530","database":"default","time":"--"}]'
'[{"address":"http://127.0.0.1:19530","database":"default","username":"","time":"--"}]'
);

// sort by time
connections.sort((a, b) => {
return new Date(b.time).getTime() - new Date(a.time).getTime();
});

setConnections(connections);
}, []);

Expand Down Expand Up @@ -173,7 191,7 @@ export const AuthForm = (props: any) => {
}),
},
],
defaultValue: authReq.address,
value: authReq.address,
}}
checkValid={checkIsValid}
validInfo={validation}
Expand All @@ -191,7 209,7 @@ export const AuthForm = (props: any) => {
className: classes.input,
placeholder: dbTrans('database'),
fullWidth: true,
defaultValue: authReq.database,
value: authReq.database,
}}
checkValid={checkIsValid}
validInfo={validation}
Expand Down Expand Up @@ -220,7 238,7 @@ export const AuthForm = (props: any) => {
className: classes.input,
placeholder: attuTrans.token,
fullWidth: true,
defaultValue: authReq.token,
value: authReq.token,
}}
checkValid={checkIsValid}
validInfo={validation}
Expand All @@ -239,7 257,7 @@ export const AuthForm = (props: any) => {
className: classes.input,
placeholder: attuTrans.username,
fullWidth: true,
defaultValue: authReq.username,
value: authReq.username,
}}
checkValid={checkIsValid}
validInfo={validation}
Expand All @@ -259,7 277,7 @@ export const AuthForm = (props: any) => {
placeholder: attuTrans.password,
fullWidth: true,
type: 'password',
defaultValue: authReq.password,
value: authReq.password,
}}
checkValid={checkIsValid}
validInfo={validation}
Expand Down Expand Up @@ -297,13 315,15 @@ export const AuthForm = (props: any) => {
onConnectHistoryClicked(connection);
}}
>
<div className="url">
<div className="address">
<Icons.link className="icon"></Icons.link>
<div className="text">
{connection.url}/{connection.database}
{connection.address}/{connection.database}
</div>
</div>
<div className="time">{connection.time}</div>
<div className="time">
{new Date(connection.time).toLocaleString()}
</div>
</li>
))}
</Menu>
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/connect/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 67,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
},
cursor: 'pointer',

'& .url': {
'& .address': {
display: 'grid',
gridTemplateColumns: '20px 1fr',
gap: 4,
Expand Down

0 comments on commit 4df7951

Please sign in to comment.