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

style: worker vram value

Browse Source
This commit is contained in:
jialin
2024-07-17 13:40:32 +08:00
parent 67d26f18c3
commit e1153dcd65
11 changed files with 94 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/instance-item.tsx
+2 -2
View File
@@ -95,7 +95,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
<Col span={6}></Col>
<Col span={4}>
<span
style={{ paddingLeft: '56px' }}
style={{ paddingLeft: '68px' }}
className="flex justify-center"
>
{item.state && (
@@ -115,7 +115,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
</span>
</Col>
<Col span={5}>
<span style={{ paddingLeft: 38 }}>
<span style={{ paddingLeft: 45 }}>
{dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss')}
</span>
</Col>
src/pages/llmodels/index.tsx
+6 -5
View File
@@ -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);
});
};
src/pages/playground/components/chat-footer.tsx
+7 -25
View File
@@ -59,20 +59,8 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
return (
<div className="chat-footer">
<Row style={{ width: '100%' }}>
<Col span={hasTokenResult ? 8 : 12}>
<Col lg={hasTokenResult ? 8 : 12} xs={24} sm={24} md={12}>
<Space size={20}>
{/* <Dropdown
menu={{ items: MessageRoles, onClick: onNewMessage }}
placement="topLeft"
>
<Button
disabled={disabled}
icon={<PlusOutlined />}
onClick={onNewMessage}
>
{intl.formatMessage({ id: 'playground.newMessage' })}
</Button>
</Dropdown> */}
<Button
disabled={disabled}
icon={<PlusOutlined />}
@@ -120,18 +108,12 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
</span>
</Button>
) : (
<Button type="primary" onClick={onStop}>
<div className="flex flex-center">
<span>
{intl.formatMessage({ id: 'common.button.stop' })}
</span>
<span className="m-l-5 flex flex-center">
<IconFont
type="icon-stop1"
className="font-size-14"
></IconFont>
</span>
</div>
<Button
type="primary"
onClick={onStop}
icon={<IconFont type="icon-stop1"></IconFont>}
>
<span>{intl.formatMessage({ id: 'common.button.stop' })}</span>
</Button>
)}
</Space>
src/pages/playground/components/params-settings.tsx
+12 -1
View File
@@ -150,9 +150,20 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
</h3>
<Form.Item<ParamsSettingsFormProps>
name="model"
rules={[{ required: false }]}
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'playground.model' }) }
)
}
]}
>
<SealSelect
showSearch
options={ModelList}
label={intl.formatMessage({ id: 'playground.model' })}
></SealSelect>
src/pages/playground/style/play-ground.less
+9 -2
View File
@@ -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 {
src/pages/resources/components/workers.tsx
+41 -32
View File
@@ -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 (
<span key={index}>
{item.memory.is_unified_memory ? (
'Unified Memory'
) : (
<span className="flex-center">
<span
className="m-r-5"
style={{ display: 'flex', width: 25 }}
>
[{index}]
</span>
<ProgressBar
key={index}
percent={_.round(item.memory.utilization_rate, 0)}
label={
<span className="flex-column">
<span>
{intl.formatMessage({
id: 'resources.table.total'
})}
: {convertFileSize(item.memory?.total, 0)}
</span>
<span>
{intl.formatMessage({
id: 'resources.table.used'
})}
: {convertFileSize(item.memory?.used, 0)}
</span>
</span>
}
></ProgressBar>
<span className="flex-center">
<span
className="m-r-5"
style={{ display: 'flex', width: 25 }}
>
[{index}]
</span>
)}
<ProgressBar
key={index}
percent={_.round(item.memory.utilization_rate, 0)}
label={
<span className="flex-column">
<span>
{intl.formatMessage({
id: 'resources.table.total'
})}
: {convertFileSize(item.memory?.total, 0)}
</span>
<span>
{intl.formatMessage({
id: 'resources.table.used'
})}
: {convertFileSize(item.memory?.used, 0)}
</span>
</span>
}
></ProgressBar>
{item.memory.is_unified_memory && (
<Tooltip
title={intl.formatMessage({
id: 'resources.table.unified'
})}
>
<InfoCircleOutlined className="m-l-5" />
</Tooltip>
)}
</span>
</span>
);
}