root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: first login modify password

Browse Source
This commit is contained in:
jialin
2024-06-29 20:29:11 +08:00
parent cf0113e8d8
commit d47e53114c
25 changed files with 337 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/system-load.tsx
+13 -25
View File
@@ -1,11 +1,11 @@
import CardWrapper from '@/components/card-wrapper';
import LiquidChart from '@/components/charts/liquid';
import PageTools from '@/components/page-tools';
import breakpoints from '@/config/breakpoints';
import useWindowResize from '@/hooks/use-window-resize';
import { Col, DatePicker, Row } from 'antd';
import _ from 'lodash';
import { useContext, useEffect, useState } from 'react';
import UitilBar from '../../../components/util-bar';
import { DashboardContext } from '../config/dashboard-context';
import ResourceUtilization from './resource-utilization';
@@ -64,40 +64,28 @@ const SystemLoad = () => {
<CardWrapper style={{ height: largeChartHeight, width: '100%' }}>
<Row style={{ height: largeChartHeight, width: '100%' }}>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
<UitilBar
title="GPU Compute Utilization"
percent={_.round(data.gpu?.utilization_rate || 0, 2) / 100}
thresholds={thresholds}
rangColor={colors}
></LiquidChart>
percent={_.round(data.gpu?.utilization_rate || 0, 1)}
></UitilBar>
</Col>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
<UitilBar
title="GPU Memory Utilization"
percent={
_.round(data.gpu_memory?.utilization_rate || 0, 2) / 100
}
thresholds={thresholds}
rangColor={colors}
></LiquidChart>
percent={_.round(data.gpu_memory?.utilization_rate || 0, 1)}
></UitilBar>
</Col>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
<UitilBar
title="CPU Compute Utilization"
percent={_.round(data.cpu?.utilization_rate || 0, 2) / 100}
thresholds={thresholds}
rangColor={colors}
></LiquidChart>
percent={_.round(data.cpu?.utilization_rate || 0, 1)}
></UitilBar>
</Col>
<Col span={12} style={{ height: smallChartHeight }}>
<LiquidChart
<UitilBar
title="CPU Memory Utilization"
percent={
_.round(data.memory?.utilization_rate || 0, 2) / 100
}
thresholds={thresholds}
rangColor={colors}
></LiquidChart>
percent={_.round(data.memory?.utilization_rate || 0, 1)}
></UitilBar>
</Col>
</Row>
</CardWrapper>
src/pages/llmodels/config/index.ts
+6
View File
@@ -11,6 +11,12 @@ export const ollamaModelOptions = [
{ label: 'deepseek-coder', value: 'deepseek-coder' }
];
export const modelSourceMap = {
huggingface: 'huggingface',
ollama_library: 'ollama_library',
s3: 's3'
};
export const status: any = {
Running: StatusMaps.success
};
src/pages/llmodels/index.tsx
+52 -16
View File
@@ -8,10 +8,12 @@ import type { PageActionType } from '@/config/types';
import useSetChunkRequest, {
createAxiosToken
} from '@/hooks/use-chunk-request';
import useEventSource from '@/hooks/use-event-source';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
import { handleBatchRequest } from '@/utils';
import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
import {
DeleteOutlined,
EditOutlined,
@@ -62,6 +64,7 @@ const Models: React.FC = () => {
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const { createEventSourceConnection, eventSourceRef } = useEventSource();
const [logContent, setLogContent] = useState('');
const [openLogModal, setOpenLogModal] = useState(false);
const [hoverChildIndex, setHoverChildIndex] = useState<string | number>(-1);
@@ -157,12 +160,9 @@ const Models: React.FC = () => {
chunkRequedtRef.current?.current?.cancel?.();
try {
chunkRequedtRef.current = setChunkRequest({
url: MODELS_API,
url: `${MODELS_API}`,
params: {
..._.pickBy(
_.omit(queryParams, ['page', 'perPage']),
(val: any) => !!val
)
..._.pickBy(queryParams, (val: any) => !!val)
},
handler: updateHandler
});
@@ -171,6 +171,38 @@ const Models: React.FC = () => {
}
};
const createModelsDataByFetch = async () => {
const result = await fetchChunkedData({
params: {
..._.pickBy(queryParams, (val: any) => !!val),
watch: true
},
method: 'GET',
url: `/v1${MODELS_API}`
});
if (!result) {
return;
}
const { reader, decoder } = result;
await readStreamData(reader, decoder, (data: any) => {
console.log('streamData=========', data);
});
};
const createModelEvent = () => {
createEventSourceConnection({
url: `v1${MODELS_API}`,
params: {
..._.pickBy(queryParams, (val: any) => !!val),
watch: true
},
onmessage: (data: any) => {
console.log('event source message: ', data);
}
});
};
const handleSearch = (e: any) => {
fetchData();
};
@@ -327,6 +359,10 @@ const Models: React.FC = () => {
return data.items || [];
}, []);
const generateChildrenRequestAPI = (params: any) => {
return `${MODELS_API}/${params.id}/instances`;
};
const handleEdit = (row: ListItem) => {
setCurrentData(row);
setOpenAddModal(true);
@@ -336,9 +372,12 @@ const Models: React.FC = () => {
useEffect(() => {
fetchData();
// createModelsDataByFetch();
createModelEvent();
}, [queryParams]);
useEffect(() => {
// watch models list
createModelsChunkRequest();
return () => {
chunkRequedtRef.current?.current?.cancel?.();
@@ -359,7 +398,7 @@ const Models: React.FC = () => {
item.download_progress !== 100 ? 'skeleton-loading' : ''
}
>
<RowChildren>
<RowChildren key={`${item.id}_row`}>
<Row style={{ width: '100%' }} align="middle">
<Col span={6}>
<Tag>{item.gpu_index}</Tag>
@@ -385,7 +424,9 @@ const Models: React.FC = () => {
)}
</Col>
<Col span={5}>
{dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
<span style={{ paddingLeft: 36 }}>
{dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
</span>
</Col>
<Col span={5}>
{hoverChildIndex === `${item.id}-${index}` && (
@@ -483,7 +524,9 @@ const Models: React.FC = () => {
expandable={true}
onChange={handleTableChange}
pollingChildren={false}
watchChildren={true}
loadChildren={getModelInstances}
loadChildrenAPI={generateChildrenRequestAPI}
renderChildren={renderChildren}
pagination={{
showSizeChanger: true,
@@ -497,17 +540,10 @@ const Models: React.FC = () => {
>
<SealColumn
title={intl.formatMessage({ id: 'models.table.name' })}
dataIndex="huggingface_repo_id"
key="huggingface_repo_id"
dataIndex="name"
key="name"
width={400}
span={6}
render={(text, record) => {
return (
<>
<Tooltip>{text}</Tooltip>
</>
);
}}
/>
<SealColumn
title={intl.formatMessage({ id: 'models.form.source' })}
src/pages/login/apis/index.ts
+5 -1
View File
@@ -1,3 +1,5 @@
import { userAtom } from '@/atoms/user';
import { clearAtomStorage } from '@/atoms/utils';
import { request } from '@umijs/max';
import qs from 'query-string';
@@ -17,9 +19,11 @@ export const login = async (
};
export const logout = async (userInfo: any) => {
return request(`${AUTH_API}/logout`, {
await request(`${AUTH_API}/logout`, {
method: 'POST'
});
clearAtomStorage(userAtom);
return;
};
export const accessToken = async () => {
src/pages/login/components/login-form.tsx
+11 -18
View File
@@ -1,9 +1,10 @@
import LogoIcon from '@/assets/images/logo.png';
import { userAtom } from '@/atoms/user';
import SealInput from '@/components/seal-form/seal-input';
import { GlobalOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
import { SelectLang, history, useIntl, useModel } from '@umijs/max';
import { Button, Checkbox, Form } from 'antd';
import { useEffect } from 'react';
import { useAtom } from 'jotai';
import { flushSync } from 'react-dom';
import { login } from '../apis';
@@ -23,22 +24,16 @@ const renderLogo = () => {
</div>
);
};
const LoginForm: React.FC<{
setCurrentUser: (userInfo: any) => void;
}> = ({ setCurrentUser }) => {
const LoginForm = () => {
const [userInfo, setUserInfo] = useAtom(userAtom);
const { initialState, setInitialState } = useModel('@@initialState');
const { globalState, setGlobalState } = useModel('global');
const intl = useIntl();
const [form] = Form.useForm();
useEffect(() => {
console.log('initstate===', {
initialState,
globalState
});
}, []);
const gotoDefaultPage = (userInfo: any) => {
const pathname = userInfo?.is_admin ? '/dashboard' : '/playground';
const pathname =
userInfo && userInfo?.is_admin ? '/dashboard' : '/playground';
history.push(pathname);
};
const fetchUserInfo = async () => {
@@ -66,13 +61,11 @@ const LoginForm: React.FC<{
setGlobalState({
userInfo
});
// if (userInfo?.require_password_change) {
// setCurrentUser(userInfo);
// } else {
// setCurrentUser(null);
// gotoDefaultPage(userInfo);
// }
gotoDefaultPage(userInfo);
setUserInfo(userInfo);
if (!userInfo?.require_password_change) {
gotoDefaultPage(userInfo);
}
// gotoDefaultPage(userInfo);
} catch (error) {
console.log('error====', error);
}
src/pages/login/components/password-form.tsx
+39 -32
View File
@@ -1,23 +1,20 @@
import { userAtom } from '@/atoms/user';
import SealInput from '@/components/seal-form/seal-input';
import { PasswordReg } from '@/config';
import { GlobalOutlined, LockOutlined } from '@ant-design/icons';
import { SelectLang, history, useIntl, useModel } from '@umijs/max';
import { SelectLang, history, useIntl } from '@umijs/max';
import { Button, Form, message } from 'antd';
import { useEffect } from 'react';
import { useAtom } from 'jotai';
import { updatePassword } from '../apis';
const PasswordForm: React.FC = () => {
const { globalState, setGlobalState } = useModel('global');
const [currentUser, setCurrentUser] = useState(null);
const intl = useIntl();
const [form] = Form.useForm();
useEffect(() => {
console.log('initstate===', {
globalState
});
}, []);
const [userInfo, setUserInfo] = useAtom(userAtom);
const gotoDefaultPage = (userInfo: any) => {
const pathname = userInfo?.is_admin ? '/dashboard' : '/playground';
const pathname =
userInfo && userInfo?.is_admin ? '/dashboard' : '/playground';
history.push(pathname);
};
@@ -26,9 +23,14 @@ const PasswordForm: React.FC = () => {
try {
await updatePassword({
new_password: values.new_password,
comfirm_password: values.comfirm_password
current_password: values.current_password
});
gotoDefaultPage(currentUser);
await setUserInfo({
...userInfo,
require_password_change: false
});
gotoDefaultPage(userInfo);
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {
console.log('error====', error);
@@ -45,40 +47,45 @@ const PasswordForm: React.FC = () => {
style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
onFinish={handleSubmit}
>
<div>修改密码</div>
<h2 className="justify-center m-b-20">
{intl.formatMessage({ id: 'users.password.modify.title' })}
</h2>
<Form.Item
name="current_password"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: intl.formatMessage({ id: 'users.form.currentpassword' })
}
)
}
]}
>
<SealInput.Password
prefix={<LockOutlined />}
label={intl.formatMessage({ id: 'users.form.currentpassword' })}
/>
</Form.Item>
<Form.Item
name="new_password"
rules={[
{
required: true,
pattern: PasswordReg,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{ name: intl.formatMessage({ id: 'common.form.password' }) }
{ name: intl.formatMessage({ id: 'users.form.newpassword' }) }
)
}
]}
>
<SealInput.Password
prefix={<LockOutlined />}
label={intl.formatMessage({ id: 'common.form.password' })}
/>
</Form.Item>
<Form.Item
name="comfirm_password"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{ name: intl.formatMessage({ id: 'common.form.password' }) }
)
}
]}
>
<SealInput.Password
prefix={<LockOutlined />}
label={intl.formatMessage({ id: 'common.form.password' })}
label={intl.formatMessage({ id: 'users.form.newpassword' })}
/>
</Form.Item>
src/pages/login/index.tsx
+19 -4
View File
@@ -1,13 +1,28 @@
import { useState } from 'react';
import { userAtom } from '@/atoms/user';
import { history } from '@umijs/max';
import { useAtom } from 'jotai';
import { useEffect } from 'react';
import LoginForm from './components/login-form';
import PasswordForm from './components/password-form';
const Login = () => {
const [currentUser, setCurrentUser] = useState(null);
const [userInfo, setUserInfo] = useAtom(userAtom);
const gotoDefaultPage = (userInfo: any) => {
if (!userInfo || userInfo?.require_password_change) {
return;
}
const pathname = userInfo?.is_admin ? '/dashboard' : '/playground';
history.push(pathname, { replace: true });
};
useEffect(() => {
gotoDefaultPage(userInfo);
}, [userInfo]);
return (
<div>
<LoginForm setCurrentUser={setCurrentUser} />
{/* <PasswordForm /> */}
{userInfo?.require_password_change ? <PasswordForm /> : <LoginForm />}
</div>
);
};