397 lines
12 KiB
TypeScript
397 lines
12 KiB
TypeScript
import PageTools from '@/components/page-tools';
|
|
import ProgressBar from '@/components/progress-bar';
|
|
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,
|
|
InfoCircleOutlined,
|
|
SyncOutlined
|
|
} from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
|
|
import _ from 'lodash';
|
|
import { memo, useEffect, useState } from 'react';
|
|
import { deleteWorker, queryWorkersList } from '../apis';
|
|
import { WorkerStatusMapValue, status } from '../config';
|
|
import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
|
|
const { Column } = Table;
|
|
|
|
const Resources: React.FC = () => {
|
|
console.log('resources======workers');
|
|
|
|
const { sortOrder, setSortOrder } = useTableSort({
|
|
defaultSortOrder: 'descend'
|
|
});
|
|
const rowSelection = useTableRowSelection();
|
|
const intl = useIntl();
|
|
const [total, setTotal] = useState(0);
|
|
const [loading, setLoading] = useState(false);
|
|
const [dataSource, setDataSource] = useState<ListItem[]>([]);
|
|
const [queryParams, setQueryParams] = useState({
|
|
page: 1,
|
|
perPage: 10,
|
|
search: ''
|
|
});
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params = {
|
|
..._.pickBy(queryParams, (val: any) => !!val)
|
|
};
|
|
const res = await queryWorkersList(params);
|
|
|
|
setDataSource(res.items);
|
|
setTotal(res.pagination.total);
|
|
} catch (error) {
|
|
setDataSource([]);
|
|
console.log('error', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
const handleShowSizeChange = (current: number, size: number) => {
|
|
setQueryParams({
|
|
...queryParams,
|
|
page: current,
|
|
perPage: size || 10
|
|
});
|
|
};
|
|
|
|
const handlePageChange = (page: number, perPage: number | undefined) => {
|
|
console.log(page, perPage);
|
|
setQueryParams({
|
|
...queryParams,
|
|
page: page,
|
|
perPage: perPage || 10
|
|
});
|
|
};
|
|
|
|
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
|
|
setSortOrder(sorter.order);
|
|
};
|
|
|
|
const handleSearch = (e: any) => {
|
|
fetchData();
|
|
};
|
|
|
|
const handleNameChange = (e: any) => {
|
|
setQueryParams({
|
|
...queryParams,
|
|
search: e.target.value
|
|
});
|
|
};
|
|
|
|
const formateUtilazation = (val1: number, val2: number): number => {
|
|
if (!val2 || !val1) {
|
|
return 0;
|
|
}
|
|
return _.round((val1 / val2) * 100, 0);
|
|
};
|
|
|
|
const calcStorage = (files: Filesystem[]) => {
|
|
const mountRoot = _.find(
|
|
files,
|
|
(item: Filesystem) => item.mount_point === '/'
|
|
);
|
|
return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
|
|
};
|
|
|
|
const handleDelete = (row: ListItem) => {
|
|
Modal.confirm({
|
|
title: '',
|
|
content: intl.formatMessage(
|
|
{ id: 'common.delete.confirm' },
|
|
{ type: ' worker ' }
|
|
),
|
|
async onOk() {
|
|
console.log('OK');
|
|
await deleteWorker(row.id);
|
|
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
|
fetchData();
|
|
},
|
|
onCancel() {
|
|
console.log('Cancel');
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleDeleteBatch = () => {
|
|
Modal.confirm({
|
|
title: '',
|
|
content: intl.formatMessage(
|
|
{ id: 'common.delete.confirm' },
|
|
{ type: ` wokers ` }
|
|
),
|
|
async onOk() {
|
|
await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker);
|
|
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
|
rowSelection.clearSelections();
|
|
fetchData();
|
|
},
|
|
onCancel() {
|
|
console.log('Cancel');
|
|
}
|
|
});
|
|
};
|
|
|
|
const renderStorageTooltip = (files: Filesystem[]) => {
|
|
const mountRoot = _.find(
|
|
files,
|
|
(item: Filesystem) => item.mount_point === '/'
|
|
);
|
|
return mountRoot ? (
|
|
<span className="flex-column">
|
|
<span>
|
|
{intl.formatMessage({ id: 'resources.table.total' })}:{' '}
|
|
{convertFileSize(mountRoot?.total, 0)}
|
|
</span>
|
|
<span>
|
|
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
|
|
{convertFileSize(mountRoot?.used, 0)}
|
|
</span>
|
|
</span>
|
|
) : (
|
|
0
|
|
);
|
|
};
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [queryParams]);
|
|
|
|
return (
|
|
<>
|
|
<PageTools
|
|
marginBottom={10}
|
|
marginTop={10}
|
|
left={
|
|
<Space>
|
|
<Input
|
|
placeholder={intl.formatMessage({
|
|
id: 'common.filter.name'
|
|
})}
|
|
style={{ width: 300 }}
|
|
allowClear
|
|
onChange={handleNameChange}
|
|
></Input>
|
|
<Button
|
|
type="text"
|
|
style={{ color: 'var(--ant-color-text-tertiary)' }}
|
|
onClick={handleSearch}
|
|
icon={<SyncOutlined></SyncOutlined>}
|
|
></Button>
|
|
</Space>
|
|
}
|
|
right={
|
|
<Button
|
|
icon={<DeleteOutlined />}
|
|
danger
|
|
onClick={handleDeleteBatch}
|
|
disabled={!rowSelection.selectedRowKeys.length}
|
|
>
|
|
{intl.formatMessage({ id: 'common.button.delete' })}
|
|
</Button>
|
|
}
|
|
></PageTools>
|
|
<Table
|
|
dataSource={dataSource}
|
|
loading={loading}
|
|
rowKey="id"
|
|
onChange={handleTableChange}
|
|
rowSelection={rowSelection}
|
|
pagination={{
|
|
showSizeChanger: true,
|
|
pageSize: queryParams.perPage,
|
|
current: queryParams.page,
|
|
total: total,
|
|
hideOnSinglePage: queryParams.perPage === 10,
|
|
onChange: handlePageChange
|
|
}}
|
|
>
|
|
<Column
|
|
title={intl.formatMessage({ id: 'common.table.name' })}
|
|
dataIndex="hostname"
|
|
key="hostname"
|
|
/>
|
|
<Column
|
|
title={intl.formatMessage({ id: 'common.table.status' })}
|
|
dataIndex="state"
|
|
key="state"
|
|
render={(text, record: ListItem) => {
|
|
return (
|
|
<StatusTag
|
|
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={
|
|
<span className="flex-column">
|
|
<span>
|
|
{intl.formatMessage({ id: 'resources.table.total' })}:{' '}
|
|
{convertFileSize(record?.status?.memory.total, 0)}
|
|
</span>
|
|
<span>
|
|
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
|
|
{convertFileSize(record?.status?.memory.used, 0)}
|
|
</span>
|
|
</span>
|
|
}
|
|
></ProgressBar>
|
|
);
|
|
}}
|
|
/>
|
|
<Column
|
|
title="GPU"
|
|
dataIndex="GPU"
|
|
key="GPU"
|
|
render={(text, record: ListItem) => {
|
|
return (
|
|
<span className="flex-column flex-gap-2">
|
|
{record?.status?.gpu_devices.map((item, index) => {
|
|
return (
|
|
<span className="flex-center" key={index}>
|
|
<span
|
|
className="m-r-5"
|
|
style={{ display: 'flex', width: 25 }}
|
|
>
|
|
[{index}]
|
|
</span>
|
|
<ProgressBar
|
|
key={index}
|
|
percent={_.round(item.core.utilization_rate, 0)}
|
|
></ProgressBar>
|
|
</span>
|
|
);
|
|
})}
|
|
</span>
|
|
);
|
|
}}
|
|
/>
|
|
|
|
<Column
|
|
title={intl.formatMessage({ id: 'resources.table.vram' })}
|
|
dataIndex="VRAM"
|
|
key="VRAM"
|
|
render={(text, record: ListItem) => {
|
|
return (
|
|
<span className="flex-column">
|
|
{record?.status?.gpu_devices.map(
|
|
(item: GPUDeviceItem, index) => {
|
|
return (
|
|
<span key={index}>
|
|
<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>
|
|
);
|
|
}
|
|
)}
|
|
</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 (
|
|
<Space size={20}>
|
|
<Tooltip
|
|
title={intl.formatMessage({ id: 'common.button.delete' })}
|
|
>
|
|
<Button
|
|
onClick={() => handleDelete(record)}
|
|
size="small"
|
|
danger
|
|
icon={<DeleteOutlined></DeleteOutlined>}
|
|
></Button>
|
|
</Tooltip>
|
|
</Space>
|
|
);
|
|
}}
|
|
/>
|
|
</Table>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default memo(Resources);
|