style: flatten menu items
This commit is contained in:
jialin
@@ -100,7 +100,8 @@ const APIKeys: React.FC = () => {
|
||||
title: intl.formatMessage({ id: 'apikeys.title' }),
|
||||
style: {
|
||||
paddingInline: 'var(--layout-content-header-inlinepadding)'
|
||||
}
|
||||
},
|
||||
breadcrumb: {}
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
|
||||
@@ -172,7 +172,7 @@ const Catalog: React.FC = () => {
|
||||
});
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
setModelsExpandKeys([modelData.id]);
|
||||
navigate('/models/list');
|
||||
navigate('/models/deployment');
|
||||
} catch (error) {}
|
||||
},
|
||||
[openDeployModal]
|
||||
|
||||
@@ -12,7 +12,7 @@ export const checkDefaultPage = async (userInfo: any, replace: boolean) => {
|
||||
if (isFirstLogin === null && isOnline()) {
|
||||
writeState(IS_FIRST_LOGIN, true);
|
||||
const pathname =
|
||||
userInfo && userInfo?.is_admin ? '/models/list' : '/playground';
|
||||
userInfo && userInfo?.is_admin ? '/models/deployment' : '/playground';
|
||||
history.push(pathname);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ export const rerankerSamples: Record<
|
||||
}
|
||||
> = {
|
||||
'zh-CN': {
|
||||
query: '如何提高睡眠质量?',
|
||||
query: '如何提高睡眠质量？',
|
||||
documents: [
|
||||
'保持规律的作息时间，晚上避免使用电子产品。',
|
||||
'参加更多社交活动有助于提高情绪。',
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import useUserSettings from '@/hooks/use-user-settings';
|
||||
import langConfigMap from '@/locales/lang-config-map';
|
||||
import { MoonOutlined, SunOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { getAllLocales, setLocale, useIntl } from '@umijs/max';
|
||||
import { Select } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
@@ -10,21 +12,19 @@ const Wrapper = styled.div`
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px 0;
|
||||
.theme {
|
||||
`;
|
||||
|
||||
const SettingsItem = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 300px;
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 300px;
|
||||
}
|
||||
.theme-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: var(--font-weight-500);
|
||||
}
|
||||
.tips {
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
`;
|
||||
|
||||
const Appearance: React.FC = () => {
|
||||
@@ -33,6 +33,7 @@ const Appearance: React.FC = () => {
|
||||
console.log('userSettings', userSettings);
|
||||
|
||||
const intl = useIntl();
|
||||
const allLocals = getAllLocales();
|
||||
|
||||
const ThemeOptions = [
|
||||
{
|
||||
@@ -56,10 +57,17 @@ const Appearance: React.FC = () => {
|
||||
setTheme(value);
|
||||
};
|
||||
|
||||
console.log('allLocals', allLocals);
|
||||
|
||||
const languageOptions = allLocals.map((locale) => ({
|
||||
value: locale,
|
||||
label: _.get(langConfigMap, [locale, 'label'])
|
||||
}));
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<div className="theme">
|
||||
<span className="theme-label">
|
||||
<SettingsItem>
|
||||
<span className="label">
|
||||
<span>{intl.formatMessage({ id: 'common.appearance.theme' })}</span>
|
||||
</span>
|
||||
<Select
|
||||
@@ -68,7 +76,20 @@ const Appearance: React.FC = () => {
|
||||
onChange={handleOnChange}
|
||||
style={{ width: 200 }}
|
||||
></Select>
|
||||
</div>
|
||||
</SettingsItem>
|
||||
<SettingsItem>
|
||||
<span className="label">
|
||||
<span>{intl.formatMessage({ id: 'common.settings.language' })}</span>
|
||||
</span>
|
||||
<Select
|
||||
value={intl.locale}
|
||||
options={languageOptions}
|
||||
onChange={(value) => {
|
||||
setLocale(value, false);
|
||||
}}
|
||||
style={{ width: 200 }}
|
||||
></Select>
|
||||
</SettingsItem>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,6 +4,7 @@ import ProgressBar from '@/components/progress-bar';
|
||||
import InfoColumn from '@/components/simple-table/info-column';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { ConfigProvider, Empty, Table } from 'antd';
|
||||
import _ from 'lodash';
|
||||
@@ -69,128 +70,143 @@ const GPUList: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<FilterBar
|
||||
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
|
||||
handleSearch={handleSearch}
|
||||
handleInputChange={handleNameChange}
|
||||
showDeleteButton={false}
|
||||
showPrimaryButton={false}
|
||||
width={{ input: 300 }}
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
width={240}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'GPUs',
|
||||
style: {
|
||||
paddingInline: 'var(--layout-content-header-inlinepadding)'
|
||||
},
|
||||
breadcrumb: {}
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<FilterBar
|
||||
marginBottom={22}
|
||||
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
|
||||
handleSearch={handleSearch}
|
||||
handleInputChange={handleNameChange}
|
||||
showDeleteButton={false}
|
||||
showPrimaryButton={false}
|
||||
width={{ input: 300 }}
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.index' })}
|
||||
dataIndex="index"
|
||||
key="index"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return <span>{record.index}</span>;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.workername' })}
|
||||
dataIndex="worker_name"
|
||||
key="worker_name"
|
||||
width={200}
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<span style={{ display: 'flex', width: '100%' }}>
|
||||
<AutoTooltip ghost maxWidth={340}>
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
width={240}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vender' })}
|
||||
dataIndex="vendor"
|
||||
key="vendor"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.index' })}
|
||||
dataIndex="index"
|
||||
key="index"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return <span>{record.index}</span>;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.workername' })}
|
||||
dataIndex="worker_name"
|
||||
key="worker_name"
|
||||
width={200}
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<span style={{ display: 'flex', width: '100%' }}>
|
||||
<AutoTooltip ghost maxWidth={340}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vender' })}
|
||||
dataIndex="vendor"
|
||||
key="vendor"
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
|
||||
dataIndex="temperature"
|
||||
key="Temperature"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return <span>{text ? _.round(text, 1) : '-'}</span>;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
|
||||
dataIndex="gpuUtil"
|
||||
key="gpuUtil"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<>
|
||||
{record.core ? (
|
||||
<ProgressBar
|
||||
percent={_.round(record.core?.utilization_rate, 2)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
|
||||
dataIndex="temperature"
|
||||
key="Temperature"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return <span>{text ? _.round(text, 1) : '-'}</span>;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({
|
||||
id: 'resources.table.gpuutilization'
|
||||
})}
|
||||
dataIndex="gpuUtil"
|
||||
key="gpuUtil"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<>
|
||||
{record.core ? (
|
||||
<ProgressBar
|
||||
percent={_.round(record.core?.utilization_rate, 2)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={intl.formatMessage({
|
||||
id: 'resources.table.vramutilization'
|
||||
})}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={
|
||||
record.memory?.used
|
||||
? _.round(record.memory?.utilization_rate, 0)
|
||||
: _.round(
|
||||
record.memory?.allocated / record.memory?.total,
|
||||
0
|
||||
) * 100
|
||||
}
|
||||
label={
|
||||
<InfoColumn
|
||||
fieldList={fieldList}
|
||||
data={record.memory}
|
||||
></InfoColumn>
|
||||
}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
<Column
|
||||
title={intl.formatMessage({
|
||||
id: 'resources.table.vramutilization'
|
||||
})}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={
|
||||
record.memory?.used
|
||||
? _.round(record.memory?.utilization_rate, 0)
|
||||
: _.round(
|
||||
record.memory?.allocated / record.memory?.total,
|
||||
0
|
||||
) * 100
|
||||
}
|
||||
label={
|
||||
<InfoColumn
|
||||
fieldList={fieldList}
|
||||
data={record.memory}
|
||||
></InfoColumn>
|
||||
}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
</PageContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -26,6 +26,7 @@ import {
|
||||
CopyOutlined,
|
||||
InfoCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl, useNavigate } from '@umijs/max';
|
||||
import { ConfigProvider, Empty, Table, Tag, Typography, message } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -541,7 +542,7 @@ const ModelFiles = () => {
|
||||
});
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
setModelsExpandKeys([modelData.id]);
|
||||
navigate('/models/list');
|
||||
navigate('/models/deployment');
|
||||
} catch (error) {
|
||||
// console.log('error', error);
|
||||
}
|
||||
@@ -648,66 +649,81 @@ const ModelFiles = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<FilterBar
|
||||
actionType="dropdown"
|
||||
selectHolder="resources.filter.worker"
|
||||
inputHolder="resources.filter.path"
|
||||
buttonText={intl.formatMessage({ id: 'resources.modelfiles.download' })}
|
||||
handleSelectChange={handleWorkerChange}
|
||||
handleDeleteByBatch={handleDeleteByBatch}
|
||||
handleClickPrimary={handleClickDropdown}
|
||||
handleSearch={handleSearch}
|
||||
selectOptions={workersList}
|
||||
handleInputChange={handleNameChange}
|
||||
rowSelection={rowSelection}
|
||||
actionItems={onLineSourceOptions}
|
||||
showSelect={true}
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
rowKey="id"
|
||||
tableLayout="fixed"
|
||||
style={{ width: '100%' }}
|
||||
onChange={handleTableChange}
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: intl.formatMessage({ id: 'resources.modelfiles.modelfile' }),
|
||||
style: {
|
||||
paddingInline: 'var(--layout-content-header-inlinepadding)'
|
||||
},
|
||||
breadcrumb: {}
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<FilterBar
|
||||
marginBottom={22}
|
||||
actionType="dropdown"
|
||||
selectHolder="resources.filter.worker"
|
||||
inputHolder="resources.filter.path"
|
||||
buttonText={intl.formatMessage({
|
||||
id: 'resources.modelfiles.download'
|
||||
})}
|
||||
handleSelectChange={handleWorkerChange}
|
||||
handleDeleteByBatch={handleDeleteByBatch}
|
||||
handleClickPrimary={handleClickDropdown}
|
||||
handleSearch={handleSearch}
|
||||
selectOptions={workersList}
|
||||
handleInputChange={handleNameChange}
|
||||
rowSelection={rowSelection}
|
||||
columns={columns}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
></Table>
|
||||
</ConfigProvider>
|
||||
<DeleteModal ref={modalRef}></DeleteModal>
|
||||
<DownloadModal
|
||||
onCancel={handleDownloadCancel}
|
||||
onOk={handleDownload}
|
||||
title={intl.formatMessage({ id: 'resources.modelfiles.download' })}
|
||||
open={downloadModalStatus.show}
|
||||
source={downloadModalStatus.source}
|
||||
width={downloadModalStatus.width}
|
||||
hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
|
||||
workersList={readyWorkers}
|
||||
></DownloadModal>
|
||||
<DeployModal
|
||||
deploymentType="modelFiles"
|
||||
title={intl.formatMessage({ id: 'models.button.deploy' })}
|
||||
onCancel={handleDeployModalCancel}
|
||||
onOk={handleCreateModel}
|
||||
open={openDeployModal.show}
|
||||
action={PageAction.CREATE}
|
||||
source={openDeployModal.source}
|
||||
width={openDeployModal.width}
|
||||
gpuOptions={openDeployModal.gpuOptions}
|
||||
modelFileOptions={openDeployModal.modelFileOptions || []}
|
||||
initialValues={openDeployModal.initialValues}
|
||||
isGGUF={openDeployModal.isGGUF}
|
||||
></DeployModal>
|
||||
actionItems={onLineSourceOptions}
|
||||
showSelect={true}
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
rowKey="id"
|
||||
tableLayout="fixed"
|
||||
style={{ width: '100%' }}
|
||||
onChange={handleTableChange}
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
rowSelection={rowSelection}
|
||||
columns={columns}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
></Table>
|
||||
</ConfigProvider>
|
||||
<DeleteModal ref={modalRef}></DeleteModal>
|
||||
<DownloadModal
|
||||
onCancel={handleDownloadCancel}
|
||||
onOk={handleDownload}
|
||||
title={intl.formatMessage({ id: 'resources.modelfiles.download' })}
|
||||
open={downloadModalStatus.show}
|
||||
source={downloadModalStatus.source}
|
||||
width={downloadModalStatus.width}
|
||||
hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
|
||||
workersList={readyWorkers}
|
||||
></DownloadModal>
|
||||
<DeployModal
|
||||
deploymentType="modelFiles"
|
||||
title={intl.formatMessage({ id: 'models.button.deploy' })}
|
||||
onCancel={handleDeployModalCancel}
|
||||
onOk={handleCreateModel}
|
||||
open={openDeployModal.show}
|
||||
action={PageAction.CREATE}
|
||||
source={openDeployModal.source}
|
||||
width={openDeployModal.width}
|
||||
gpuOptions={openDeployModal.gpuOptions}
|
||||
modelFileOptions={openDeployModal.modelFileOptions || []}
|
||||
initialValues={openDeployModal.initialValues}
|
||||
isGGUF={openDeployModal.isGGUF}
|
||||
></DeployModal>
|
||||
</PageContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
EditOutlined,
|
||||
InfoCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { ConfigProvider, Empty, Table, Tooltip, message } from 'antd';
|
||||
import _ from 'lodash';
|
||||
@@ -202,263 +203,279 @@ const Workers: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<FilterBar
|
||||
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
|
||||
handleDeleteByBatch={handleDeleteBatch}
|
||||
handleSearch={handleSearch}
|
||||
handleClickPrimary={handleAddWorker}
|
||||
handleInputChange={handleNameChange}
|
||||
rowSelection={rowSelection}
|
||||
width={{ input: 300 }}
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
|
||||
style={{ width: '100%' }}
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'Workers',
|
||||
style: {
|
||||
paddingInline: 'var(--layout-content-header-inlinepadding)'
|
||||
},
|
||||
breadcrumb: {}
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<FilterBar
|
||||
marginBottom={22}
|
||||
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
|
||||
handleDeleteByBatch={handleDeleteBatch}
|
||||
handleSearch={handleSearch}
|
||||
handleClickPrimary={handleAddWorker}
|
||||
handleInputChange={handleNameChange}
|
||||
rowSelection={rowSelection}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
width={100}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
<span>{record.name}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
width={{ input: 300 }}
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
|
||||
style={{ width: '100%' }}
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
rowKey="id"
|
||||
onChange={handleTableChange}
|
||||
rowSelection={rowSelection}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.labels' })}
|
||||
dataIndex="labels"
|
||||
key="labels"
|
||||
width={200}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 6
|
||||
}}
|
||||
>
|
||||
{_.map(record.labels, (value: any, key: string) => {
|
||||
return (
|
||||
<AutoTooltip
|
||||
key={key}
|
||||
className="m-r-0"
|
||||
maxWidth={155}
|
||||
style={{
|
||||
paddingInline: 8,
|
||||
borderRadius: 12
|
||||
}}
|
||||
>
|
||||
<span>{key}</span>
|
||||
<span>:{value}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.status' })}
|
||||
dataIndex="state"
|
||||
key="state"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<StatusTag
|
||||
maxTooltipWidth={400}
|
||||
statusValue={{
|
||||
status: status[record.state] as any,
|
||||
text: WorkerStatusMapValue[record.state],
|
||||
message: record.state_message
|
||||
}}
|
||||
></StatusTag>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column title="IP" dataIndex="ip" key="address" />
|
||||
<Column
|
||||
title="CPU"
|
||||
dataIndex="CPU"
|
||||
key="CPU"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.memory' })}
|
||||
dataIndex="memory"
|
||||
key="Memory"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={formateUtilazation(
|
||||
record?.status?.memory?.used,
|
||||
record?.status?.memory?.total
|
||||
)}
|
||||
label={
|
||||
<InfoColumn
|
||||
fieldList={fieldList}
|
||||
data={record.status.memory}
|
||||
></InfoColumn>
|
||||
}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="GPU"
|
||||
dataIndex="GPU"
|
||||
key="GPU"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(record?.status?.gpu_devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: string) => {
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
width={100}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
<span>{record.name}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.labels' })}
|
||||
dataIndex="labels"
|
||||
key="labels"
|
||||
width={200}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 6
|
||||
}}
|
||||
>
|
||||
{_.map(record.labels, (value: any, key: string) => {
|
||||
return (
|
||||
<span className="flex-center" key={index}>
|
||||
<span
|
||||
className="m-r-5"
|
||||
style={{ display: 'flex', width: 25 }}
|
||||
>
|
||||
[{item.index}]
|
||||
</span>
|
||||
{item.core ? (
|
||||
<ProgressBar
|
||||
key={index}
|
||||
percent={_.round(item.core?.utilization_rate, 0)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</span>
|
||||
<AutoTooltip
|
||||
key={key}
|
||||
className="m-r-0"
|
||||
maxWidth={155}
|
||||
style={{
|
||||
paddingInline: 8,
|
||||
borderRadius: 12
|
||||
}}
|
||||
>
|
||||
<span>{key}</span>
|
||||
<span>:{value}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.status' })}
|
||||
dataIndex="state"
|
||||
key="state"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<StatusTag
|
||||
maxTooltipWidth={400}
|
||||
statusValue={{
|
||||
status: status[record.state] as any,
|
||||
text: WorkerStatusMapValue[record.state],
|
||||
message: record.state_message
|
||||
}}
|
||||
></StatusTag>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column title="IP" dataIndex="ip" key="address" />
|
||||
<Column
|
||||
title="CPU"
|
||||
dataIndex="CPU"
|
||||
key="CPU"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.memory' })}
|
||||
dataIndex="memory"
|
||||
key="Memory"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={formateUtilazation(
|
||||
record?.status?.memory?.used,
|
||||
record?.status?.memory?.total
|
||||
)}
|
||||
label={
|
||||
<InfoColumn
|
||||
fieldList={fieldList}
|
||||
data={record.status.memory}
|
||||
></InfoColumn>
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vram' })}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(record?.status?.gpu_devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: string) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
<span className="flex-center">
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="GPU"
|
||||
dataIndex="GPU"
|
||||
key="GPU"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(record?.status?.gpu_devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: string) => {
|
||||
return (
|
||||
<span className="flex-center" key={index}>
|
||||
<span
|
||||
className="m-r-5"
|
||||
style={{ display: 'flex', width: 25 }}
|
||||
>
|
||||
[{item.index}]
|
||||
</span>
|
||||
<ProgressBar
|
||||
key={index}
|
||||
percent={
|
||||
item.memory?.used
|
||||
? _.round(item.memory?.utilization_rate, 0)
|
||||
: _.round(
|
||||
(item.memory?.allocated /
|
||||
item.memory?.total) *
|
||||
100,
|
||||
0
|
||||
)
|
||||
}
|
||||
label={
|
||||
<InfoColumn
|
||||
fieldList={fieldList}
|
||||
data={item.memory}
|
||||
></InfoColumn>
|
||||
}
|
||||
></ProgressBar>
|
||||
{item.memory.is_unified_memory && (
|
||||
<Tooltip
|
||||
title={intl.formatMessage({
|
||||
id: 'resources.table.unified'
|
||||
})}
|
||||
>
|
||||
<InfoCircleOutlined
|
||||
className="m-l-5"
|
||||
style={{ color: 'var(--ant-blue-5)' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
{item.core ? (
|
||||
<ProgressBar
|
||||
key={index}
|
||||
percent={_.round(
|
||||
item.core?.utilization_rate,
|
||||
0
|
||||
)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.disk' })}
|
||||
dataIndex="storage"
|
||||
key="storage"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={calcStorage(record.status?.filesystem)}
|
||||
label={renderStorageTooltip(record.status.filesystem)}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<DropdownButtons
|
||||
items={ActionList}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
<DeleteModal ref={modalRef}></DeleteModal>
|
||||
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
|
||||
<UpdateLabels
|
||||
open={updateLabelsData.open}
|
||||
onOk={handleUpdateLabelsOk}
|
||||
onCancel={handleCancelUpdateLabels}
|
||||
data={{
|
||||
name: updateLabelsData.data.name,
|
||||
labels: updateLabelsData.data.labels
|
||||
}}
|
||||
></UpdateLabels>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vram' })}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(record?.status?.gpu_devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: string) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
<span className="flex-center">
|
||||
<span
|
||||
className="m-r-5"
|
||||
style={{ display: 'flex', width: 25 }}
|
||||
>
|
||||
[{item.index}]
|
||||
</span>
|
||||
<ProgressBar
|
||||
key={index}
|
||||
percent={
|
||||
item.memory?.used
|
||||
? _.round(item.memory?.utilization_rate, 0)
|
||||
: _.round(
|
||||
(item.memory?.allocated /
|
||||
item.memory?.total) *
|
||||
100,
|
||||
0
|
||||
)
|
||||
}
|
||||
label={
|
||||
<InfoColumn
|
||||
fieldList={fieldList}
|
||||
data={item.memory}
|
||||
></InfoColumn>
|
||||
}
|
||||
></ProgressBar>
|
||||
{item.memory.is_unified_memory && (
|
||||
<Tooltip
|
||||
title={intl.formatMessage({
|
||||
id: 'resources.table.unified'
|
||||
})}
|
||||
>
|
||||
<InfoCircleOutlined
|
||||
className="m-l-5"
|
||||
style={{ color: 'var(--ant-blue-5)' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.disk' })}
|
||||
dataIndex="storage"
|
||||
key="storage"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={calcStorage(record.status?.filesystem)}
|
||||
label={renderStorageTooltip(record.status.filesystem)}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<DropdownButtons
|
||||
items={ActionList}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
<DeleteModal ref={modalRef}></DeleteModal>
|
||||
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
|
||||
<UpdateLabels
|
||||
open={updateLabelsData.open}
|
||||
onOk={handleUpdateLabelsOk}
|
||||
onCancel={handleCancelUpdateLabels}
|
||||
data={{
|
||||
name: updateLabelsData.data.name,
|
||||
labels: updateLabelsData.data.labels
|
||||
}}
|
||||
></UpdateLabels>
|
||||
</PageContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -158,7 +158,8 @@ const Users: React.FC = () => {
|
||||
title: intl.formatMessage({ id: 'users.title' }),
|
||||
style: {
|
||||
paddingInline: 'var(--layout-content-header-inlinepadding)'
|
||||
}
|
||||
},
|
||||
breadcrumb: {}
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user