From e1153dcd6517c600e29005171bef702bdb2d9990 Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 17 Jul 2024 13:39:23 +0800 Subject: [PATCH] style: worker vram value --- src/components/seal-table/index.tsx | 12 +-- .../seal-table/styles/row-children.less | 1 - src/global.less | 7 +- src/locales/en-US/resources.ts | 3 +- src/locales/zh-CN/resources.ts | 3 +- .../llmodels/components/instance-item.tsx | 4 +- src/pages/llmodels/index.tsx | 11 +-- .../playground/components/chat-footer.tsx | 32 ++------ .../playground/components/params-settings.tsx | 13 +++- src/pages/playground/style/play-ground.less | 11 ++- src/pages/resources/components/workers.tsx | 73 +++++++++++-------- 11 files changed, 94 insertions(+), 76 deletions(-) diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index 25a15aa1..70efae4d 100644 --- a/src/components/seal-table/index.tsx +++ b/src/components/seal-table/index.tsx @@ -10,7 +10,7 @@ import { type PaginationProps } from 'antd'; import _ from 'lodash'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import TableHeader from './components/table-header'; import TableRow from './components/table-row'; import './styles/index.less'; @@ -153,7 +153,7 @@ const SealTable: React.FC = ( ); }; - const renderContent = () => { + const renderContent = useCallback(() => { if (!props.dataSource.length) { return (
@@ -186,18 +186,20 @@ const SealTable: React.FC = ( })}
); - }; + }, [props.dataSource, expandedRowKeys, rowSelection, children]); return ( <>
{renderHeader()} - {loading ? ( + {/* {loading ? (
) : ( renderContent() - )} + )} */} + + {renderContent()}
{pagination && (
diff --git a/src/components/seal-table/styles/row-children.less b/src/components/seal-table/styles/row-children.less index 7276c4b0..f4cf2152 100644 --- a/src/components/seal-table/styles/row-children.less +++ b/src/components/seal-table/styles/row-children.less @@ -3,7 +3,6 @@ display: flex; align-items: center; height: 54px; - padding: 0 16px; border-radius: var(--ant-table-header-border-radius); transition: all 0.2s ease; diff --git a/src/global.less b/src/global.less index ef72aee6..fa055b45 100644 --- a/src/global.less +++ b/src/global.less @@ -2,7 +2,13 @@ @import url('src/assets/styles/menu.less'); html { + --ant-color-text-secondary: rgba(0, 0, 0, 65%); + --ant-color-text-tertiary: rgba(0, 0, 0, 45%); + --ant-color-text-quaternary: rgba(0, 0, 0, 25%); + --ant-color-fill: rgba(0, 0, 0, 15%); + --ant-color-fill-secondary: rgba(0, 0, 0, 6%); --ant-color-fill-tertiary: rgba(0, 0, 0, 4%); + --ant-color-fill-quaternary: rgba(0, 0, 0, 2%); --color-fill-1: var(--ant-color-fill-tertiary); // --color-fill-1: #fff; --ant-color-text: #000; @@ -29,7 +35,6 @@ html { --font-size-base: 12px; --font-size-large: 16px; --font-size-middle: 14px; - --ant-color-fill-secondary: rgba(0, 0, 0, 6%); --table-td-radius: 8px; --checkbox-border-radius: 4px; --ant-table-cell-padding-inline: 16px; diff --git a/src/locales/en-US/resources.ts b/src/locales/en-US/resources.ts index 4660f6dd..74740081 100644 --- a/src/locales/en-US/resources.ts +++ b/src/locales/en-US/resources.ts @@ -17,5 +17,6 @@ export default { 'resources.table.vramutilization': 'VRAM Utilization', 'resources.table.total': 'Total', 'resources.table.used': 'Used', - 'resources.table.wokers': 'workers' + 'resources.table.wokers': 'workers', + 'resources.table.unified': 'Unified Memory' }; diff --git a/src/locales/zh-CN/resources.ts b/src/locales/zh-CN/resources.ts index 070a1e5c..c79d5316 100644 --- a/src/locales/zh-CN/resources.ts +++ b/src/locales/zh-CN/resources.ts @@ -17,5 +17,6 @@ export default { 'resources.table.vramutilization': '显存利用率', 'resources.table.total': '总量', 'resources.table.used': '已用', - 'resources.table.wokers': 'workers' + 'resources.table.wokers': 'workers', + 'resources.table.unified': '统一内存' }; diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx index 995c18d6..1b7771bf 100644 --- a/src/pages/llmodels/components/instance-item.tsx +++ b/src/pages/llmodels/components/instance-item.tsx @@ -95,7 +95,7 @@ const InstanceItem: React.FC = ({ {item.state && ( @@ -115,7 +115,7 @@ const InstanceItem: React.FC = ({ - + {dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss')} diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index a00ace3d..03c4d492 100644 --- a/src/pages/llmodels/index.tsx +++ b/src/pages/llmodels/index.tsx @@ -10,7 +10,6 @@ import TableList from './components/table-list'; import { ListItem } from './config/types'; const Models: React.FC = () => { - // const { modal } = App.useApp(); console.log('model list====1'); const { setChunkRequest } = useSetChunkRequest(); @@ -30,9 +29,8 @@ const Models: React.FC = () => { perPage: 10, search: '' }); - // request data - dataSourceRef.current = dataSource; + // dataSourceRef.current = dataSource; const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({ dataList: dataSource, @@ -50,7 +48,10 @@ const Models: React.FC = () => { const res: any = await queryModelsList(params, { cancelToken: axiosToken.token }); - setDataSource(res.items); + if (!firstLoad) { + setDataSource(res.items); + } + // setDataSource(res.items); setTotal(res.pagination.total); } catch (error) { setDataSource([]); @@ -74,7 +75,7 @@ const Models: React.FC = () => { const updateHandler = (list: any) => { _.each(list, (data: any) => { - updateChunkedList(data, dataSourceRef.current); + updateChunkedList(data); }); }; diff --git a/src/pages/playground/components/chat-footer.tsx b/src/pages/playground/components/chat-footer.tsx index ccec36ae..4b995ef6 100644 --- a/src/pages/playground/components/chat-footer.tsx +++ b/src/pages/playground/components/chat-footer.tsx @@ -59,20 +59,8 @@ const ChatFooter: React.FC = (props) => { return (
- + - {/* - - */} ) : ( - )} diff --git a/src/pages/playground/components/params-settings.tsx b/src/pages/playground/components/params-settings.tsx index b4dd1e54..691282c2 100644 --- a/src/pages/playground/components/params-settings.tsx +++ b/src/pages/playground/components/params-settings.tsx @@ -150,9 +150,20 @@ const ParamsSettings: React.FC = ({ name="model" - rules={[{ required: false }]} + rules={[ + { + required: true, + message: intl.formatMessage( + { + id: 'common.form.rule.select' + }, + { name: intl.formatMessage({ id: 'playground.model' }) } + ) + } + ]} > diff --git a/src/pages/playground/style/play-ground.less b/src/pages/playground/style/play-ground.less index fa41e0d5..596f19ec 100644 --- a/src/pages/playground/style/play-ground.less +++ b/src/pages/playground/style/play-ground.less @@ -18,8 +18,9 @@ transition: width 0.3s ease; &.collapse { - width: 0; + width: 33px; padding-left: 32px; + overflow: hidden; transition: width 0.3s ease; } } @@ -43,7 +44,13 @@ .params-box { padding-inline: 32px; height: 100%; + width: 390px; overflow-y: auto; + overflow-x: hidden; + + &.collapse { + padding-inline: 0; + } } .divider-line { @@ -51,7 +58,7 @@ &.collapse { width: 0; - transition: width 0.3s; + transition: width 0.3s ease; } .ant-divider { diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index 9085e2c6..09dbc1bb 100644 --- a/src/pages/resources/components/workers.tsx +++ b/src/pages/resources/components/workers.tsx @@ -4,7 +4,11 @@ import StatusTag from '@/components/status-tag'; import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; import { convertFileSize, handleBatchRequest } from '@/utils'; -import { DeleteOutlined, SyncOutlined } from '@ant-design/icons'; +import { + DeleteOutlined, + InfoCircleOutlined, + SyncOutlined +} from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd'; import _ from 'lodash'; @@ -306,38 +310,43 @@ const Resources: React.FC = () => { (item: GPUDeviceItem, index) => { return ( - {item.memory.is_unified_memory ? ( - 'Unified Memory' - ) : ( - - - [{index}] - - - - {intl.formatMessage({ - id: 'resources.table.total' - })} - : {convertFileSize(item.memory?.total, 0)} - - - {intl.formatMessage({ - id: 'resources.table.used' - })} - : {convertFileSize(item.memory?.used, 0)} - - - } - > + + + [{index}] - )} + + + {intl.formatMessage({ + id: 'resources.table.total' + })} + : {convertFileSize(item.memory?.total, 0)} + + + {intl.formatMessage({ + id: 'resources.table.used' + })} + : {convertFileSize(item.memory?.used, 0)} + + + } + > + {item.memory.is_unified_memory && ( + + + + )} + ); }