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

fix: model list duplicate

Browse Source
This commit is contained in:
jialin
2024-07-09 16:59:35 +08:00
parent 734368dd49
commit fe14edbb4e
22 changed files with 247 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/instance-item.tsx
+20 -5
View File
@@ -12,18 +12,24 @@ import { ModelInstanceListItem } from '../config/types';
interface InstanceItemProps {
list: ModelInstanceListItem[];
handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
handleChildSelect: (
val: string,
item: ModelInstanceListItem,
list: ModelInstanceListItem[]
) => void;
}
const InstanceItem: React.FC<InstanceItemProps> = ({
list,
handleChildSelect
}) => {
console.log('instance item====');
const intl = useIntl();
const childActionList = [
{
label: intl.formatMessage({ id: 'common.button.viewlog' }),
key: 'viewlog',
status: [InstanceStatusMap.Running, InstanceStatusMap.Error],
icon: <FieldTimeOutlined />
},
{
@@ -33,9 +39,16 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
icon: <DeleteOutlined />
}
];
const testStatus = {
state: InstanceStatusMap.Scheduled
const setChildActionList = (item: ModelInstanceListItem) => {
return _.filter(childActionList, (action: any) => {
if (action.key === 'viewlog') {
return InstanceStatusMap.Running.includes(item.state);
}
return true;
});
};
const getWorkerIp = (item: ModelInstanceListItem) => {
if (item.worker_ip) {
return item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
@@ -90,8 +103,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
<Col span={5}>
<div style={{ paddingLeft: 39 }}>
<DropdownButtons
items={childActionList}
onSelect={(val: string) => handleChildSelect(val, item)}
items={setChildActionList(item)}
onSelect={(val: string) =>
handleChildSelect(val, item, list)
}
></DropdownButtons>
</div>
</Col>
src/pages/llmodels/components/table-list.tsx
+15 -11
View File
@@ -4,6 +4,7 @@ import SealTable from '@/components/seal-table';
import SealColumn from '@/components/seal-table/components/seal-column';
import { PageAction } from '@/config';
import type { PageActionType } from '@/config/types';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import { handleBatchRequest } from '@/utils';
@@ -18,7 +19,7 @@ import { PageContainer } from '@ant-design/pro-components';
import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
import { Button, Input, Modal, Space, message } from 'antd';
import dayjs from 'dayjs';
import { memo, useCallback, useEffect, useState } from 'react';
import { memo, useCallback, useState } from 'react';
import {
MODELS_API,
MODEL_INSTANCE_API,
@@ -57,11 +58,9 @@ const Models: React.FC<ModelsProps> = ({
handleSearch,
handleShowSizeChange,
handlePageChange,
createModelsChunkRequest,
queryParams,
loading,
total,
fetchData
total
}) => {
// const { modal } = App.useApp();
console.log('model list====2');
@@ -69,6 +68,8 @@ const Models: React.FC<ModelsProps> = ({
const intl = useIntl();
const navigate = useNavigate();
const rowSelection = useTableRowSelection();
const { handleExpandChange, updateExpandedRowKeys, expandedRowKeys } =
useExpandedRowKeys();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
@@ -145,6 +146,7 @@ const Models: React.FC<ModelsProps> = ({
async onOk() {
await deleteModel(row.id);
message.success(intl.formatMessage({ id: 'common.message.success' }));
updateExpandedRowKeys([row.id]);
},
onCancel() {
console.log('Cancel');
@@ -162,6 +164,7 @@ const Models: React.FC<ModelsProps> = ({
await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
message.success(intl.formatMessage({ id: 'common.message.success' }));
rowSelection.clearSelections();
updateExpandedRowKeys(rowSelection.selectedRowKeys);
},
onCancel() {
console.log('Cancel');
@@ -181,7 +184,7 @@ const Models: React.FC<ModelsProps> = ({
console.log('error:', error);
}
};
const handleDeleteInstace = (row: any) => {
const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
Modal.confirm({
title: '',
content: intl.formatMessage(
@@ -191,6 +194,9 @@ const Models: React.FC<ModelsProps> = ({
async onOk() {
await deleteModelInstance(row.id);
message.success(intl.formatMessage({ id: 'common.message.success' }));
if (list.length === 1) {
updateExpandedRowKeys([row.model_id]);
}
},
onCancel() {
console.log('Cancel');
@@ -232,9 +238,9 @@ const Models: React.FC<ModelsProps> = ({
}, []);
const handleChildSelect = useCallback(
(val: any, row: ModelInstanceListItem) => {
(val: any, row: ModelInstanceListItem, list: ModelInstanceListItem[]) => {
if (val === 'delete') {
handleDeleteInstace(row);
handleDeleteInstace(row, list);
}
if (val === 'viewlog') {
handleViewLogs(row);
@@ -252,10 +258,6 @@ const Models: React.FC<ModelsProps> = ({
);
};
useEffect(() => {
createModelsChunkRequest();
}, []);
return (
<>
<PageContainer
@@ -309,6 +311,8 @@ const Models: React.FC<ModelsProps> = ({
<SealTable
dataSource={dataSource}
rowSelection={rowSelection}
expandedRowKeys={expandedRowKeys}
onExpand={handleExpandChange}
loading={loading}
rowKey="id"
expandable={true}
src/pages/llmodels/components/view-logs-modal.tsx
+31 -8
View File
@@ -1,7 +1,8 @@
import LogsViewer from '@/components/logs-viewer';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Modal } from 'antd';
import React from 'react';
import { Button, Modal } from 'antd';
import React, { useState } from 'react';
type ViewModalProps = {
open: boolean;
@@ -12,14 +13,36 @@ type ViewModalProps = {
const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
console.log('viewlogs======');
const { open, url, onCancel } = props || {};
const [modalSize, setModalSize] = useState<any>({
width: 600,
height: 450
});
const isFullScreenRef = React.useRef(false);
const intl = useIntl();
if (!open) {
return null;
}
const handleFullscreenToggle = () => {
isFullScreenRef.current = !isFullScreenRef.current;
setModalSize((size: any) => {
return {
width: size.width === 600 ? '100%' : 600,
height: size.height === 450 ? 'calc(100vh - 100px)' : 450
};
});
};
return (
<Modal
title={intl.formatMessage({ id: 'common.button.viewlog' })}
title={
<span className="flex flex-center">
<span> {intl.formatMessage({ id: 'common.button.viewlog' })}</span>
<Button size="middle" type="text" onClick={handleFullscreenToggle}>
{isFullScreenRef.current ? (
<FullscreenExitOutlined />
) : (
<FullscreenOutlined />
)}
</Button>
</span>
}
open={open}
centered={true}
onCancel={onCancel}
@@ -27,11 +50,11 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
width={modalSize.width}
footer={null}
>
<LogsViewer
height={500}
height={modalSize.height}
url={url}
params={{
follow: true
src/pages/llmodels/config/index.ts
+4 -2
View File
@@ -25,7 +25,8 @@ export const InstanceStatusMap = {
Scheduled: 'Scheduled',
Error: 'Error',
Downloading: 'Downloading',
Unknown: 'Unknown'
Unknown: 'Unknown',
Analyzing: 'Analyzing'
};
export const status: any = {
@@ -35,7 +36,8 @@ export const status: any = {
[InstanceStatusMap.Scheduled]: StatusMaps.success,
[InstanceStatusMap.Error]: StatusMaps.error,
[InstanceStatusMap.Downloading]: StatusMaps.transitioning,
[InstanceStatusMap.Unknown]: StatusMaps.inactive
[InstanceStatusMap.Unknown]: StatusMaps.inactive,
[InstanceStatusMap.Analyzing]: StatusMaps.transitioning
};
export const ActionList = [
src/pages/llmodels/index.tsx
+18 -3
View File
@@ -17,7 +17,9 @@ const Models: React.FC = () => {
const [total, setTotal] = useState(100);
const [loading, setLoading] = useState(false);
const [dataSource, setDataSource] = useState<ListItem[]>([]);
const [firstLoad, setFirstLoad] = useState(true);
const chunkRequedtRef = useRef<any>();
const dataSourceRef = useRef<any>();
let axiosToken = createAxiosToken();
const [queryParams, setQueryParams] = useState({
page: 1,
@@ -26,10 +28,14 @@ const Models: React.FC = () => {
});
// request data
const { updateChunkedList } = useUpdateChunkedList(dataSource, {
const { updateChunkedList } = useUpdateChunkedList({
setDataList: setDataSource
});
useEffect(() => {
dataSourceRef.current = dataSource;
}, [dataSource]);
const fetchData = useCallback(async () => {
axiosToken?.cancel?.();
axiosToken = createAxiosToken();
@@ -49,6 +55,7 @@ const Models: React.FC = () => {
console.log('error', error);
} finally {
setLoading(false);
setFirstLoad(false);
}
}, [queryParams]);
@@ -76,7 +83,7 @@ const Models: React.FC = () => {
const updateHandler = (list: any) => {
_.each(list, (data: any) => {
updateChunkedList(data);
updateChunkedList(data, dataSourceRef.current);
});
};
@@ -110,9 +117,17 @@ const Models: React.FC = () => {
);
useEffect(() => {
fetchData();
if (!firstLoad) {
createModelsChunkRequest();
}
return () => {
chunkRequedtRef.current?.current?.cancel?.();
};
}, [firstLoad]);
useEffect(() => {
fetchData();
return () => {
axiosToken?.cancel?.();
};
}, [queryParams]);
src/pages/login/components/styles.less
+4
View File
@@ -17,4 +17,8 @@
:local(.box) {
padding-top: 10%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
src/pages/login/index.tsx
+3
View File
@@ -21,6 +21,9 @@ const Login = () => {
useEffect(() => {
gotoDefaultPage(userInfo);
}, [userInfo]);
useEffect(() => {
document.title = 'GPUStack';
}, []);
return (
<>
src/pages/playground/components/chat-footer.tsx
+37 -6
View File
@@ -13,6 +13,7 @@ import '../style/chat-footer.less';
interface ChatFooterProps {
onSubmit: () => void;
onStop: () => void;
onClear: () => void;
onNewMessage: () => void;
onView: () => void;
@@ -26,6 +27,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
const {
onSubmit,
onClear,
onStop,
onNewMessage,
onView,
feedback,
@@ -40,6 +42,26 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
{ enabled: !disabled }
);
const renderSubmitButton = () => {
if (disabled) {
return (
<>
{intl.formatMessage({ id: 'common.button.stop' })}
<span className="m-l-5">
<IconFont type="icon-stop"></IconFont>
</span>
</>
);
}
return (
<>
{intl.formatMessage({ id: 'common.button.submit' })}
<span className="m-l-5 opct-7">
<IconFont type="icon-command"></IconFont> + <EnterOutlined />
</span>
</>
);
};
return (
<div className="chat-footer">
<Row style={{ width: '100%' }}>
@@ -71,12 +93,21 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button disabled={disabled} type="primary" onClick={onSubmit}>
{intl.formatMessage({ id: 'common.button.submit' })}
<span className="m-l-5 opct-7">
<IconFont type="icon-command"></IconFont> + <EnterOutlined />
</span>
</Button>
{!disabled ? (
<Button type="primary" disabled={disabled} onClick={onSubmit}>
{intl.formatMessage({ id: 'common.button.submit' })}
<span className="m-l-5 opct-7">
<IconFont type="icon-command"></IconFont> + <EnterOutlined />
</span>
</Button>
) : (
<Button type="primary" onClick={onStop}>
{intl.formatMessage({ id: 'common.button.stop' })}
<span className="m-l-5">
<IconFont type="icon-stop"></IconFont>
</span>
</Button>
)}
</Space>
</Col>
</Row>
src/pages/playground/components/ground-left.tsx
+14 -1
View File
@@ -47,6 +47,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
const [currentIsFocus, setCurrentIsFocus] = useState(false);
const systemRef = useRef<any>(null);
const contentRef = useRef<any>('');
const controllerRef = useRef<any>(null);
const handleSystemMessageChange = (e: any) => {
setSystemMessage(e.target.value);
@@ -88,11 +89,21 @@ const MessageList: React.FC<MessageProps> = (props) => {
console.log('messageList=====', messageList, messageId.current, chunk);
return false;
};
const handleStopConversation = () => {
controllerRef.current?.abort?.();
setLoading(false);
};
const submitMessage = async () => {
try {
setLoading(true);
setMessageId();
setTokenResult(null);
controllerRef.current?.abort?.();
controllerRef.current = new AbortController();
const signal = controllerRef.current.signal;
contentRef.current = '';
const chatParams = {
messages: systemMessage
@@ -109,7 +120,8 @@ const MessageList: React.FC<MessageProps> = (props) => {
};
const result = await fetchChunkedData({
data: chatParams,
url: CHAT_API
url: CHAT_API,
signal
});
if (!result) {
@@ -246,6 +258,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
onNewMessage={handleNewMessage}
onSubmit={handleSubmit}
onView={handleView}
onStop={handleStopConversation}
disabled={loading}
hasTokenResult={!!tokenResult}
feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}
src/pages/playground/components/reference-params.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
<span>
{intl.formatMessage({ id: 'playground.tokenoutput' })}:{' '}
{usage.tokens_per_second * 1000} Tokens/s
{usage.tokens_per_second} Tokens/s
</span>
</div>
);
src/pages/playground/components/view-code-modal.tsx
+2 -2
View File
@@ -137,7 +137,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
closeIcon={true}
maskClosable={false}
keyboard={false}
width={660}
width={600}
footer={null}
>
<div style={{ marginBottom: '10px' }}>
@@ -152,7 +152,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
onChangeLang={handleOnChangeLang}
>
<Editor
height="min(500px, 90vh)"
height="min(450px, 90vh)"
theme="vs-dark"
className="monaco-editor"
defaultLanguage="shell"