From fe14edbb4e168855defabc794b494892e9360558 Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 9 Jul 2024 16:58:50 +0800 Subject: [PATCH] fix: model list duplicate --- config/config.ts | 6 +++ src/components/drop-down-buttons/index.tsx | 13 +++--- src/components/footer/index.less | 1 - src/components/icon-font/index.tsx | 2 +- .../seal-table/components/table-row.tsx | 29 ++++++++++--- src/components/seal-table/index.tsx | 2 + src/components/seal-table/types.ts | 3 +- src/hooks/use-expanded-row-keys.ts | 35 +++++++++++++++ src/hooks/use-update-chunk-list.ts | 33 +++++++------- src/layouts/rightRender.tsx | 2 +- .../llmodels/components/instance-item.tsx | 25 ++++++++--- src/pages/llmodels/components/table-list.tsx | 26 ++++++----- .../llmodels/components/view-logs-modal.tsx | 39 +++++++++++++---- src/pages/llmodels/config/index.ts | 6 ++- src/pages/llmodels/index.tsx | 21 +++++++-- src/pages/login/components/styles.less | 4 ++ src/pages/login/index.tsx | 3 ++ .../playground/components/chat-footer.tsx | 43 ++++++++++++++++--- .../playground/components/ground-left.tsx | 15 ++++++- .../components/reference-params.tsx | 2 +- .../playground/components/view-code-modal.tsx | 4 +- src/utils/fetch-chunk-data.ts | 2 + 22 files changed, 247 insertions(+), 69 deletions(-) create mode 100644 src/hooks/use-expanded-row-keys.ts diff --git a/config/config.ts b/config/config.ts index b2b4d00c..d0a82b8e 100644 --- a/config/config.ts +++ b/config/config.ts @@ -18,6 +18,12 @@ export default defineConfig({ base: process.env.npm_config_base || '/', ...(isProduction ? { + jsMinifierOptions: { + compress: { + drop_console: true, + drop_debugger: true + } + }, scripts: [ { src: `/js/umi.${t}.js` diff --git a/src/components/drop-down-buttons/index.tsx b/src/components/drop-down-buttons/index.tsx index d07e0bb9..18a3bbee 100644 --- a/src/components/drop-down-buttons/index.tsx +++ b/src/components/drop-down-buttons/index.tsx @@ -31,11 +31,14 @@ const DropdownButtons: React.FC = ({ return ( <> {items?.length === 1 ? ( - + + + ) : ( ([]); const [loading, setLoading] = useState(false); + const [firstLoad, setFirstLoad] = useState(true); const pollTimer = useRef(null); const chunkRequestRef = useRef(null); console.log('table row===='); const { updateChunkedList } = useUpdateChunkedList(childrenData, { - setDataList: setChildrenData + setDataList: setChildrenData, + callback: (list) => renderChildren?.(list) }); useEffect(() => { @@ -50,6 +53,14 @@ const TableRow: React.FC< } }, [rowSelection]); + useEffect(() => { + if (expandedRowKeys?.includes(record[rowKey])) { + setExpanded(true); + } else { + setExpanded(false); + } + }, [expandedRowKeys]); + useEffect(() => { return () => { if (pollTimer.current) { @@ -75,6 +86,7 @@ const TableRow: React.FC< }; const handleLoadChildren = async () => { + console.log('first load=====', firstLoad); try { setLoading(true); const data = await loadChildren?.(record); @@ -83,6 +95,8 @@ const TableRow: React.FC< } catch (error) { setChildrenData([]); setLoading(false); + } finally { + setFirstLoad(false); } }; @@ -113,9 +127,9 @@ const TableRow: React.FC< const handleRowExpand = async () => { setExpanded(!expanded); - onExpand?.(!expanded, record); + onExpand?.(!expanded, record, record[rowKey]); + console.log('expanded=====', record); - chunkRequestRef.current?.current?.cancel?.(); if (pollTimer.current) { clearInterval(pollTimer.current); } @@ -149,10 +163,15 @@ const TableRow: React.FC< }; useEffect(() => { - if (childrenData.length) { + if (!firstLoad && expanded) { createChunkRequest(); + } else { + chunkRequestRef.current?.current?.cancel?.(); } - }, [childrenData]); + return () => { + chunkRequestRef.current?.current?.cancel?.(); + }; + }, [firstLoad, expanded]); const renderRowPrefix = () => { if (expandable && rowSelection) { diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index f707d80c..5b61fb0c 100644 --- a/src/components/seal-table/index.tsx +++ b/src/components/seal-table/index.tsx @@ -12,6 +12,7 @@ const SealTable: React.FC = (props) => { children, rowKey, onExpand, + expandedRowKeys, loading, expandable, pollingChildren, @@ -144,6 +145,7 @@ const SealTable: React.FC = (props) => { loadChildren={loadChildren} loadChildrenAPI={loadChildrenAPI} onExpand={onExpand} + expandedRowKeys={expandedRowKeys} > ); })} diff --git a/src/components/seal-table/types.ts b/src/components/seal-table/types.ts index 1bab135e..64e0d334 100644 --- a/src/components/seal-table/types.ts +++ b/src/components/seal-table/types.ts @@ -24,6 +24,7 @@ export interface RowSelectionProps { onChange: (selectedRowKeys: React.Key[]) => void; } export interface SealTableProps { + expandedRowKeys?: React.Key[]; rowSelection?: RowSelectionProps; children: React.ReactNode[]; empty?: React.ReactNode; @@ -32,7 +33,7 @@ export interface SealTableProps { pollingChildren?: boolean; watchChildren?: boolean; loading?: boolean; - onExpand?: (expanded: boolean, record: any) => void; + onExpand?: (expanded: boolean, record: any, rowKey: any) => void; renderChildren?: (data: any) => React.ReactNode; loadChildren?: (record: any) => Promise; loadChildrenAPI?: (record: any) => string; diff --git a/src/hooks/use-expanded-row-keys.ts b/src/hooks/use-expanded-row-keys.ts new file mode 100644 index 00000000..88a2e1b5 --- /dev/null +++ b/src/hooks/use-expanded-row-keys.ts @@ -0,0 +1,35 @@ +import { useCallback, useState } from 'react'; + +export default function useExpandedRowKeys() { + const [expandedRowKeys, setExpandedRowKeys] = useState([]); + + const handleExpandChange = useCallback( + (expanded: boolean, record: any, rowKey: any) => { + if (expanded) { + setExpandedRowKeys((keys) => [...keys, rowKey]); + } else { + setExpandedRowKeys((keys) => keys.filter((key) => key !== rowKey)); + } + }, + [] + ); + + const updateExpandedRowKeys = (keys: React.Key[]) => { + // remove expanded row keys that are in the deleted keys + const newExpandedRowKeys = expandedRowKeys.filter( + (key) => !keys.includes(key) + ); + setExpandedRowKeys(newExpandedRowKeys); + }; + + const clearExpandedRowKeys = () => { + setExpandedRowKeys([]); + }; + + return { + expandedRowKeys, + clearExpandedRowKeys, + updateExpandedRowKeys, + handleExpandChange + }; +} diff --git a/src/hooks/use-update-chunk-list.ts b/src/hooks/use-update-chunk-list.ts index 1afeb095..e2225cad 100644 --- a/src/hooks/use-update-chunk-list.ts +++ b/src/hooks/use-update-chunk-list.ts @@ -8,17 +8,17 @@ interface ChunkedCollection { type: string | number; } // Only used to update lists without nested state -export function useUpdateChunkedList( - dataList: { id: string | number }[], - options: { - setDataList: (args: any) => void; - callback?: (args: any) => void; - filterFun?: (args: any) => boolean; - mapFun?: (args: any) => any; - computedID?: (d: object) => string; - } -) { - const updateChunkedList = (data: ChunkedCollection) => { +export function useUpdateChunkedList(options: { + setDataList: (args: any) => void; + callback?: (args: any) => void; + filterFun?: (args: any) => boolean; + mapFun?: (args: any) => any; + computedID?: (d: object) => string; +}) { + const updateChunkedList = ( + data: ChunkedCollection, + dataList: { id: string | number }[] + ) => { let collections = data?.collection || []; if (options?.computedID) { collections = _.map(collections, (item: any) => { @@ -42,16 +42,17 @@ export function useUpdateChunkedList( ); if (updateIndex === -1) { const updateItem = _.cloneDeep(item); - options.setDataList((preDataList: any) => { + options.setDataList?.((preDataList: any) => { return _.concat(updateItem, preDataList); }); } + console.log('create=========', updateIndex, dataList, collections); }); } // DELETE if (data?.type === WatchEventType.DELETE) { - options.setDataList((prevDataList: any) => { - const updatedList = _.filter(prevDataList, (item: any) => { + options.setDataList?.(() => { + const updatedList = _.filter(dataList, (item: any) => { return !_.find(ids, (id: any) => id === item.id); }); return updatedList; @@ -59,8 +60,8 @@ export function useUpdateChunkedList( } // UPDATE if (data?.type === WatchEventType.UPDATE) { - options.setDataList((prevDataList: any[]) => { - const updatedDataList = _.cloneDeep(prevDataList); + options.setDataList?.(() => { + const updatedDataList = _.cloneDeep(dataList); _.each(collections, (item: any) => { const updateIndex = _.findIndex( diff --git a/src/layouts/rightRender.tsx b/src/layouts/rightRender.tsx index 9a2faf7d..850355c2 100644 --- a/src/layouts/rightRender.tsx +++ b/src/layouts/rightRender.tsx @@ -70,7 +70,7 @@ export function getRightRenderContent(opts: { mode: 'vertical', expandIcon: false, inlineCollapsed: collapsed, - triggerSubMenuAction: 'hover', + triggerSubMenuAction: 'click', items: [ { key: 'lang', diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx index 43ebdf7a..04e495cb 100644 --- a/src/pages/llmodels/components/instance-item.tsx +++ b/src/pages/llmodels/components/instance-item.tsx @@ -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 = ({ 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: }, { @@ -33,9 +39,16 @@ const InstanceItem: React.FC = ({ icon: } ]; - 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 = ({
handleChildSelect(val, item)} + items={setChildActionList(item)} + onSelect={(val: string) => + handleChildSelect(val, item, list) + } >
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index f3d906eb..265e2723 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ }, []); 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 = ({ ); }; - useEffect(() => { - createModelsChunkRequest(); - }, []); - return ( <> = ({ = (props) => { console.log('viewlogs======'); const { open, url, onCancel } = props || {}; + const [modalSize, setModalSize] = useState({ + 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 ( + {intl.formatMessage({ id: 'common.button.viewlog' })} + + + } open={open} centered={true} onCancel={onCancel} @@ -27,11 +50,11 @@ const ViewCodeModal: React.FC = (props) => { closeIcon={true} maskClosable={false} keyboard={false} - width={600} + width={modalSize.width} footer={null} > { const [total, setTotal] = useState(100); const [loading, setLoading] = useState(false); const [dataSource, setDataSource] = useState([]); + const [firstLoad, setFirstLoad] = useState(true); const chunkRequedtRef = useRef(); + const dataSourceRef = useRef(); 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]); diff --git a/src/pages/login/components/styles.less b/src/pages/login/components/styles.less index 339b449f..ed807667 100644 --- a/src/pages/login/components/styles.less +++ b/src/pages/login/components/styles.less @@ -17,4 +17,8 @@ :local(.box) { padding-top: 10%; + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100vh; } diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 42f55ee5..418d53e8 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -21,6 +21,9 @@ const Login = () => { useEffect(() => { gotoDefaultPage(userInfo); }, [userInfo]); + useEffect(() => { + document.title = 'GPUStack'; + }, []); return ( <> diff --git a/src/pages/playground/components/chat-footer.tsx b/src/pages/playground/components/chat-footer.tsx index 5b3bb9ed..2b6b4f6c 100644 --- a/src/pages/playground/components/chat-footer.tsx +++ b/src/pages/playground/components/chat-footer.tsx @@ -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 = (props) => { const { onSubmit, onClear, + onStop, onNewMessage, onView, feedback, @@ -40,6 +42,26 @@ const ChatFooter: React.FC = (props) => { { enabled: !disabled } ); + const renderSubmitButton = () => { + if (disabled) { + return ( + <> + {intl.formatMessage({ id: 'common.button.stop' })} + + + + + ); + } + return ( + <> + {intl.formatMessage({ id: 'common.button.submit' })} + + + + + + ); + }; return (
@@ -71,12 +93,21 @@ const ChatFooter: React.FC = (props) => { > {intl.formatMessage({ id: 'playground.viewcode' })} - + {!disabled ? ( + + ) : ( + + )} diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx index 4c8f60dd..48300e4e 100644 --- a/src/pages/playground/components/ground-left.tsx +++ b/src/pages/playground/components/ground-left.tsx @@ -47,6 +47,7 @@ const MessageList: React.FC = (props) => { const [currentIsFocus, setCurrentIsFocus] = useState(false); const systemRef = useRef(null); const contentRef = useRef(''); + const controllerRef = useRef(null); const handleSystemMessageChange = (e: any) => { setSystemMessage(e.target.value); @@ -88,11 +89,21 @@ const MessageList: React.FC = (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 = (props) => { }; const result = await fetchChunkedData({ data: chatParams, - url: CHAT_API + url: CHAT_API, + signal }); if (!result) { @@ -246,6 +258,7 @@ const MessageList: React.FC = (props) => { onNewMessage={handleNewMessage} onSubmit={handleSubmit} onView={handleView} + onStop={handleStopConversation} disabled={loading} hasTokenResult={!!tokenResult} feedback={} diff --git a/src/pages/playground/components/reference-params.tsx b/src/pages/playground/components/reference-params.tsx index 88cfee30..0f76e47d 100644 --- a/src/pages/playground/components/reference-params.tsx +++ b/src/pages/playground/components/reference-params.tsx @@ -43,7 +43,7 @@ const ReferenceParams = (props: ReferenceParamsProps) => { {intl.formatMessage({ id: 'playground.tokenoutput' })}:{' '} - {usage.tokens_per_second * 1000} Tokens/s + {usage.tokens_per_second} Tokens/s
); diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx index 5a5f7082..6df9d379 100644 --- a/src/pages/playground/components/view-code-modal.tsx +++ b/src/pages/playground/components/view-code-modal.tsx @@ -137,7 +137,7 @@ const ViewCodeModal: React.FC = (props) => { closeIcon={true} maskClosable={false} keyboard={false} - width={660} + width={600} footer={null} >
@@ -152,7 +152,7 @@ const ViewCodeModal: React.FC = (props) => { onChangeLang={handleOnChangeLang} > { const method = params.method || 'POST'; @@ -40,6 +41,7 @@ export const fetchChunkedData = async (params: { const response = await fetch(url, { method, body: method === 'POST' ? JSON.stringify(params.data) : null, + signal: params.signal, headers: { 'Content-Type': 'application/json' }