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/components/seal-table/index.tsx
+7 -5
View File
@@ -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<SealTableProps & { pagination: PaginationProps }> = (
);
};
const renderContent = () => {
const renderContent = useCallback(() => {
if (!props.dataSource.length) {
return (
<div className="empty-wrapper">
@@ -186,18 +186,20 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
})}
</div>
);
};
}, [props.dataSource, expandedRowKeys, rowSelection, children]);
return (
<>
<div className="seal-table-container">
{renderHeader()}
{loading ? (
{/* {loading ? (
<div className="spin">
<Spin></Spin>
</div>
) : (
renderContent()
)}
)} */}
<Spin spinning={loading}>{renderContent()}</Spin>
</div>
{pagination && (
<div className="pagination-wrapper">
src/components/seal-table/styles/row-children.less
-1
View File
@@ -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;
src/global.less
+6 -1
View File
@@ -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;
src/locales/en-US/resources.ts
+2 -1
View File
@@ -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'
};
src/locales/zh-CN/resources.ts
+2 -1
View File
@@ -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': '统一内存'
};
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>
);
}