refactor: resource table columns
This commit is contained in:
jialin
@@ -1,489 +0,0 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DeleteModal from '@/components/delete-modal';
|
||||
import DropDownActions from '@/components/drop-down-actions';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { PageAction } from '@/config';
|
||||
import type { PageActionType } from '@/config/types';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import AddWorker from '@/pages/resources/components/add-worker';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
DownOutlined,
|
||||
EditOutlined,
|
||||
KubernetesOutlined,
|
||||
ProfileOutlined,
|
||||
SyncOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import {
|
||||
Button,
|
||||
ConfigProvider,
|
||||
Empty,
|
||||
Input,
|
||||
Space,
|
||||
Table,
|
||||
message
|
||||
} from 'antd';
|
||||
import { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
createCredential,
|
||||
deleteCredential,
|
||||
queryCredentialList,
|
||||
updateCredential
|
||||
} from './apis';
|
||||
import AddCluster from './components/add-cluster';
|
||||
import AddPool from './components/add-pool';
|
||||
import { ClusterDataList } from './config';
|
||||
import {
|
||||
ClusterFormData as FormData,
|
||||
ClusterListItem as ListItem
|
||||
} from './config/types';
|
||||
const { Column } = Table;
|
||||
|
||||
const addActions = [
|
||||
{
|
||||
label: 'Custom',
|
||||
locale: false,
|
||||
value: 'custom',
|
||||
key: 'custom',
|
||||
icon: <IconFont type="icon-docker" className="size-16" />
|
||||
},
|
||||
{
|
||||
label: 'Kubernetes',
|
||||
locale: false,
|
||||
value: 'kubernetes',
|
||||
key: 'kubernetes',
|
||||
icon: <KubernetesOutlined className="size-16" />
|
||||
},
|
||||
{
|
||||
label: 'Digital Ocean',
|
||||
locale: false,
|
||||
value: 'digitalocean',
|
||||
key: 'digitalocean',
|
||||
icon: <IconFont type="icon-digitalocean" />
|
||||
}
|
||||
];
|
||||
|
||||
const WorkerWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: flex-start;
|
||||
.worker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.value {
|
||||
line-height: 1em;
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
&.ready {
|
||||
background-color: var(--ant-color-success);
|
||||
}
|
||||
&.error {
|
||||
background-color: var(--ant-color-error);
|
||||
}
|
||||
|
||||
&.transition {
|
||||
background-color: var(--ant-blue-5);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ActionList = [
|
||||
{
|
||||
key: 'edit',
|
||||
label: 'common.button.edit',
|
||||
icon: <EditOutlined></EditOutlined>
|
||||
},
|
||||
{
|
||||
key: 'add',
|
||||
label: 'Add Worker',
|
||||
locale: false,
|
||||
icon: <EditOutlined></EditOutlined>
|
||||
},
|
||||
|
||||
{
|
||||
key: 'terminal',
|
||||
label: 'common.button.detail',
|
||||
icon: <ProfileOutlined />
|
||||
},
|
||||
{
|
||||
key: 'addPool',
|
||||
label: 'Add Node Pool',
|
||||
locale: false,
|
||||
icon: <IconFont type="icon-catalog1" />
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
props: {
|
||||
danger: true
|
||||
},
|
||||
label: 'common.button.delete',
|
||||
icon: <DeleteOutlined></DeleteOutlined>
|
||||
}
|
||||
];
|
||||
|
||||
const Credentials: React.FC = () => {
|
||||
const {
|
||||
dataSource,
|
||||
rowSelection,
|
||||
queryParams,
|
||||
sortOrder,
|
||||
modalRef,
|
||||
handleDelete,
|
||||
handleDeleteBatch,
|
||||
fetchData,
|
||||
handlePageChange,
|
||||
handleTableChange,
|
||||
handleSearch,
|
||||
handleNameChange
|
||||
} = useTableFetch<ListItem>({
|
||||
fetchAPI: queryCredentialList,
|
||||
deleteAPI: deleteCredential,
|
||||
contentForDelete: 'users.table.user'
|
||||
});
|
||||
|
||||
const intl = useIntl();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
const [provider, setProvider] = useState<string>('custom');
|
||||
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [addPoolStatus, setAddPoolStatus] = useState<{
|
||||
open: boolean;
|
||||
action: PageActionType;
|
||||
title: string;
|
||||
provider: string;
|
||||
}>({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
title: '',
|
||||
provider: 'digitalocean'
|
||||
});
|
||||
const [currentData, setCurrentData] = useState<ListItem | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
const setActions = (row: ListItem) => {
|
||||
if (row.provider !== 'custom') {
|
||||
return ActionList.filter((item) => item.key !== 'add');
|
||||
}
|
||||
return ActionList;
|
||||
};
|
||||
|
||||
const handleAddCluster = (value: string) => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.CREATE);
|
||||
setProvider(value);
|
||||
const label = addActions.find((item) => item.value === value)?.label;
|
||||
setTitle(`Add ${label} Cluster`);
|
||||
};
|
||||
|
||||
const handleAddPool = (value: string) => {
|
||||
setAddPoolStatus({
|
||||
open: true,
|
||||
action: PageAction.CREATE,
|
||||
title: `Add Node Pool`,
|
||||
provider: value
|
||||
});
|
||||
};
|
||||
|
||||
const handleClickDropdown = (item: any) => {
|
||||
handleAddCluster(item.key);
|
||||
};
|
||||
|
||||
const handleModalOk = async (data: FormData) => {
|
||||
const params = {
|
||||
...data
|
||||
};
|
||||
try {
|
||||
if (action === PageAction.EDIT) {
|
||||
await updateCredential({
|
||||
data: {
|
||||
...params,
|
||||
id: currentData?.id
|
||||
}
|
||||
});
|
||||
} else {
|
||||
await createCredential({ data: params });
|
||||
}
|
||||
fetchData();
|
||||
setOpenAddModal(false);
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {
|
||||
setOpenAddModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalCancel = () => {
|
||||
console.log('handleModalCancel');
|
||||
setOpenAddModal(false);
|
||||
};
|
||||
|
||||
const handleEditUser = (row: ListItem) => {
|
||||
setCurrentData(row);
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.EDIT);
|
||||
setTitle(`Edit ${row.name} Cluster`);
|
||||
};
|
||||
|
||||
const handleSelect = (val: any, row: ListItem) => {
|
||||
if (val === 'edit') {
|
||||
handleEditUser(row);
|
||||
} else if (val === 'delete') {
|
||||
handleDelete({ ...row, name: row.name });
|
||||
} else if (val === 'add') {
|
||||
setOpen(true);
|
||||
setCurrentData(row);
|
||||
} else if (val === 'addPool') {
|
||||
handleAddPool(row.provider);
|
||||
}
|
||||
};
|
||||
|
||||
const renderEmpty = (type?: string) => {
|
||||
if (type !== 'Table') return;
|
||||
if (
|
||||
!dataSource.loading &&
|
||||
dataSource.loadend &&
|
||||
!dataSource.dataList.length
|
||||
) {
|
||||
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
|
||||
}
|
||||
return <div></div>;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: intl.formatMessage({
|
||||
id: 'menu.clusterManagement.clusters'
|
||||
}),
|
||||
style: {
|
||||
paddingInline: 'var(--layout-content-header-inlinepadding)'
|
||||
},
|
||||
breadcrumb: {}
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<PageTools
|
||||
marginBottom={22}
|
||||
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={
|
||||
<Space size={20}>
|
||||
<DropDownActions
|
||||
menu={{
|
||||
items: addActions,
|
||||
onClick: handleClickDropdown
|
||||
}}
|
||||
trigger={['click']}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button
|
||||
icon={<DownOutlined></DownOutlined>}
|
||||
type="primary"
|
||||
iconPosition="end"
|
||||
>
|
||||
Add Cluster
|
||||
</Button>
|
||||
</DropDownActions>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
onClick={handleDeleteBatch}
|
||||
disabled={!rowSelection.selectedRowKeys.length}
|
||||
>
|
||||
<span>
|
||||
{intl?.formatMessage?.({ id: 'common.button.delete' })}
|
||||
{rowSelection.selectedRowKeys.length > 0 && (
|
||||
<span>({rowSelection.selectedRowKeys?.length})</span>
|
||||
)}
|
||||
</span>
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
dataSource={ClusterDataList}
|
||||
rowSelection={rowSelection}
|
||||
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="Name"
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Provider"
|
||||
dataIndex="provider"
|
||||
key="provider"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{addActions.find((item) => item.value === record.provider)
|
||||
?.label || 'N/A'}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Workers"
|
||||
dataIndex="workers"
|
||||
key="workers"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<WorkerWrapper>
|
||||
<span className="worker">
|
||||
<span className="dot ready"></span>
|
||||
<span className="value">3</span>
|
||||
</span>
|
||||
<span className="worker">
|
||||
<span className="dot error"></span>
|
||||
<span className="value">1</span>
|
||||
</span>
|
||||
</WorkerWrapper>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="GPUs"
|
||||
dataIndex="gpus"
|
||||
key="gpus"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title="Deployments"
|
||||
dataIndex="deployments"
|
||||
key="deployments"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
ellipsis={{
|
||||
showTitle: false
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<DropdownButtons
|
||||
items={setActions(record)}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</ConfigProvider>
|
||||
</PageContainer>
|
||||
<AddCluster
|
||||
provider={provider}
|
||||
open={openAddModal}
|
||||
action={action}
|
||||
title={title}
|
||||
data={currentData}
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddCluster>
|
||||
<AddPool
|
||||
provider={addPoolStatus.provider}
|
||||
open={addPoolStatus.open}
|
||||
action={addPoolStatus.action}
|
||||
title={addPoolStatus.title}
|
||||
onCancel={() => {
|
||||
setAddPoolStatus({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
title: '',
|
||||
provider: 'digitalocean'
|
||||
});
|
||||
}}
|
||||
onOk={() => {
|
||||
setAddPoolStatus({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
title: '',
|
||||
provider: 'digitalocean'
|
||||
});
|
||||
}}
|
||||
></AddPool>
|
||||
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
|
||||
<DeleteModal ref={modalRef}></DeleteModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Credentials;
|
||||
@@ -6,6 +6,7 @@ import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import AddWorker from '@/pages/resources/components/add-worker';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { Table, message } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
@@ -23,7 +24,7 @@ import {
|
||||
ClusterFormData as FormData,
|
||||
ClusterListItem as ListItem
|
||||
} from './config/types';
|
||||
import useClusterColumns from './config/use-cluster-columns';
|
||||
import useClusterColumns from './hooks/use-cluster-columns';
|
||||
|
||||
const Credentials: React.FC = () => {
|
||||
const {
|
||||
@@ -112,12 +113,19 @@ const Credentials: React.FC = () => {
|
||||
|
||||
const handleAddCluster = (value: string) => {
|
||||
const label = ProviderLabelMap[value];
|
||||
const clusterLabel =
|
||||
value === ProviderValueMap.Custom
|
||||
? intl.formatMessage({ id: 'clusters.provider.custom' })
|
||||
: label;
|
||||
|
||||
setOpenAddModal({
|
||||
open: true,
|
||||
action: PageAction.CREATE,
|
||||
currentData: undefined,
|
||||
title: `Add ${label} Cluster`,
|
||||
title: intl.formatMessage(
|
||||
{ id: 'clusters.add.cluster' },
|
||||
{ cluster: clusterLabel }
|
||||
),
|
||||
provider: value
|
||||
});
|
||||
};
|
||||
@@ -184,7 +192,10 @@ const Credentials: React.FC = () => {
|
||||
open: true,
|
||||
action: PageAction.EDIT,
|
||||
currentData: row,
|
||||
title: `Edit ${row.name} Cluster`,
|
||||
title: intl.formatMessage(
|
||||
{ id: 'clusters.edit.cluster' },
|
||||
{ cluster: row.name }
|
||||
),
|
||||
provider: row.provider
|
||||
});
|
||||
};
|
||||
@@ -214,7 +225,7 @@ const Credentials: React.FC = () => {
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const handleSelect = (val: any, row: ListItem) => {
|
||||
const handleSelect = useMemoizedFn((val: any, row: ListItem) => {
|
||||
if (val === 'edit') {
|
||||
handleEditCluster(row);
|
||||
} else if (val === 'delete') {
|
||||
@@ -231,7 +242,7 @@ const Credentials: React.FC = () => {
|
||||
} else if (val === 'register_cluster') {
|
||||
handleRegisterCluster(row);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const columns = useClusterColumns(handleSelect);
|
||||
|
||||
@@ -254,11 +265,10 @@ const Credentials: React.FC = () => {
|
||||
showSelect={false}
|
||||
showPrimaryButton={true}
|
||||
showDeleteButton={true}
|
||||
selectHolder="Filter by name"
|
||||
marginBottom={22}
|
||||
marginTop={30}
|
||||
width={{ input: 300 }}
|
||||
buttonText="Add Cluster"
|
||||
buttonText={intl.formatMessage({ id: 'clusters.button.add' })}
|
||||
actionType="dropdown"
|
||||
actionItems={addActions}
|
||||
rowSelection={rowSelection}
|
||||
|
||||
@@ -1,17 +1,47 @@
|
||||
import GaugeChart from '@/components/echarts/gauge';
|
||||
import Card from '@/components/templates/card';
|
||||
import { PageAction } from '@/config';
|
||||
import { Col, Row } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { queryClusterDetail } from '../apis';
|
||||
import { ProviderValueMap } from '../config';
|
||||
import { ClusterListItem, NodePoolListItem } from '../config/types';
|
||||
import AddPool from './add-pool';
|
||||
import TrendChart from './trend-chart';
|
||||
import WorkerPools from './worker-pools';
|
||||
|
||||
const metricsMap = {
|
||||
cpu: {
|
||||
label: 'CPU',
|
||||
type: 'CPU',
|
||||
intl: false,
|
||||
color: 'rgba(250, 173, 20,.8)'
|
||||
},
|
||||
ram: {
|
||||
label: 'Used',
|
||||
type: 'Used',
|
||||
intl: false,
|
||||
color: 'rgba(114, 46, 209,.8)'
|
||||
},
|
||||
gpu: {
|
||||
label: 'GPU',
|
||||
type: 'GPU',
|
||||
intl: false,
|
||||
color: 'rgba(84, 204, 152,.8)'
|
||||
},
|
||||
vram: {
|
||||
label: 'Used',
|
||||
type: 'Used',
|
||||
intl: false,
|
||||
color: 'rgba(255, 107, 179, 80%)'
|
||||
}
|
||||
};
|
||||
|
||||
const SubTitle = styled.div`
|
||||
font-size: var(--font-size-middle);
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
color: var(--ant-color-text);
|
||||
margin-block: 24px 16px;
|
||||
`;
|
||||
@@ -40,6 +70,12 @@ const gaugeConfig = {
|
||||
}
|
||||
};
|
||||
|
||||
const formatValue = (value: number) => {
|
||||
return _.round(value || 0, 1);
|
||||
};
|
||||
|
||||
const CardHeight = 336;
|
||||
|
||||
const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
|
||||
const chartHeight = 160;
|
||||
const [show, setShow] = React.useState(false);
|
||||
@@ -49,7 +85,23 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
|
||||
title: '',
|
||||
provider: ProviderValueMap.DigitalOcean
|
||||
});
|
||||
const [detailContent, setDetailContent] = useState<Record<string, any>>({});
|
||||
const [detailContent, setDetailContent] = useState<{
|
||||
current: {
|
||||
cpu: number;
|
||||
ram: number;
|
||||
gpu: number;
|
||||
vram: number;
|
||||
};
|
||||
history: Record<string, { timestamp: number; value: number }[]>;
|
||||
}>({
|
||||
current: {
|
||||
cpu: 0,
|
||||
ram: 0,
|
||||
gpu: 0,
|
||||
vram: 0
|
||||
},
|
||||
history: {}
|
||||
});
|
||||
|
||||
// pool action handler
|
||||
const handleOnAction = (action: string, record: NodePoolListItem) => {
|
||||
@@ -71,10 +123,21 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
|
||||
const response = await queryClusterDetail({
|
||||
cluster_id: data!.id
|
||||
});
|
||||
setDetailContent(response);
|
||||
setDetailContent({
|
||||
current: response.system_load?.current,
|
||||
history: response.system_load?.history
|
||||
});
|
||||
// handle response
|
||||
} catch (error) {
|
||||
setDetailContent({});
|
||||
setDetailContent({
|
||||
current: {
|
||||
cpu: 0,
|
||||
ram: 0,
|
||||
gpu: 0,
|
||||
vram: 0
|
||||
},
|
||||
history: {}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -91,7 +154,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="GPU Utilization"
|
||||
value={85}
|
||||
value={formatValue(detailContent.current.gpu)}
|
||||
height={chartHeight}
|
||||
gaugeConfig={gaugeConfig}
|
||||
/>
|
||||
@@ -99,7 +162,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="CPU Utilization"
|
||||
value={50}
|
||||
value={formatValue(detailContent.current.cpu)}
|
||||
height={chartHeight}
|
||||
gaugeConfig={gaugeConfig}
|
||||
/>
|
||||
@@ -107,7 +170,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="RAM Utilization"
|
||||
value={70}
|
||||
value={formatValue(detailContent.current.ram)}
|
||||
height={chartHeight}
|
||||
gaugeConfig={gaugeConfig}
|
||||
/>
|
||||
@@ -115,13 +178,44 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="VRAM Utilization"
|
||||
value={60}
|
||||
value={formatValue(detailContent.current.vram)}
|
||||
height={chartHeight}
|
||||
gaugeConfig={gaugeConfig}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<SubTitle>System Load</SubTitle>
|
||||
<Row style={{ marginBottom: 20 }} gutter={20}>
|
||||
<Col span={12}>
|
||||
<Card height={CardHeight} clickable={false} ghost>
|
||||
<TrendChart
|
||||
data={detailContent?.history}
|
||||
metrics={['vram', 'allocated']}
|
||||
metricsMap={metricsMap}
|
||||
title="VRAM"
|
||||
></TrendChart>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card height={CardHeight} clickable={false} ghost>
|
||||
<TrendChart
|
||||
data={detailContent?.history}
|
||||
metrics={['ram', 'allocated']}
|
||||
metricsMap={metricsMap}
|
||||
title="RAM"
|
||||
></TrendChart>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card height={CardHeight} clickable={false} ghost>
|
||||
<TrendChart
|
||||
data={detailContent?.history}
|
||||
metrics={['cpu', 'gpu']}
|
||||
metricsMap={metricsMap}
|
||||
title="CPU & GPU"
|
||||
></TrendChart>
|
||||
</Card>
|
||||
{data?.provider === ProviderValueMap.DigitalOcean && (
|
||||
<>
|
||||
<SubTitle>Worker Pools</SubTitle>
|
||||
@@ -143,7 +237,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
title: '',
|
||||
provider: 'digitalocean'
|
||||
provider: ProviderValueMap.DigitalOcean
|
||||
});
|
||||
}}
|
||||
onOk={() => {
|
||||
@@ -151,7 +245,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
|
||||
open: false,
|
||||
action: addPoolStatus.action,
|
||||
title: '',
|
||||
provider: 'digitalocean'
|
||||
provider: ProviderValueMap.DigitalOcean
|
||||
});
|
||||
}}
|
||||
></AddPool>
|
||||
|
||||
@@ -20,8 +20,8 @@ const ClusterDetailModal: React.FC<ClusterDetailModalProps> = ({
|
||||
|
||||
return (
|
||||
<GSDrawer
|
||||
width={'80vw'}
|
||||
title={`Cluster Detail - ${currentData?.name}`}
|
||||
width={'calc(100vw - 200px)'}
|
||||
title={`${currentData?.name}`}
|
||||
open={open}
|
||||
onClose={handleOnClose}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import LineChart from '@/components/echarts/line-chart';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
interface TrendChartProps {
|
||||
data: any;
|
||||
metrics: string[];
|
||||
metricsMap: Record<string, any>;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const titleOptions = {
|
||||
left: 0
|
||||
};
|
||||
|
||||
const TrendChart: React.FC<TrendChartProps> = ({
|
||||
data,
|
||||
metrics,
|
||||
metricsMap,
|
||||
title
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const tooltipValueFormatter = (value: any) => {
|
||||
return !value ? value : `${value}%`;
|
||||
};
|
||||
|
||||
const generateData = useMemo(() => {
|
||||
const legendData: string[] = [];
|
||||
const xAxisData: string[] = [];
|
||||
let seriesData: { value: number; time: string; type: string }[] = [];
|
||||
seriesData = _.map(metrics, (item: string) => {
|
||||
const itemConfig = _.get(metricsMap, item, {});
|
||||
const name = itemConfig.intl
|
||||
? intl.formatMessage({ id: itemConfig.label })
|
||||
: itemConfig.label;
|
||||
legendData.push(name);
|
||||
const itemDataList = _.get(data, item, []);
|
||||
return {
|
||||
name: name,
|
||||
color: itemConfig.color,
|
||||
data: _.map(itemDataList, (item: any) => {
|
||||
xAxisData.push(dayjs(item.timestamp * 1000).format('HH:mm:ss'));
|
||||
return {
|
||||
time: dayjs(item.timestamp * 1000).format('HH:mm:ss'),
|
||||
value: _.round(_.get(item, 'value', 0), 1)
|
||||
};
|
||||
})
|
||||
};
|
||||
});
|
||||
return {
|
||||
seriesData,
|
||||
legendData,
|
||||
xAxisData: _.uniq(xAxisData)
|
||||
};
|
||||
}, [data, intl]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<LineChart
|
||||
height={320}
|
||||
title={title}
|
||||
seriesData={generateData.seriesData}
|
||||
legendData={generateData.legendData}
|
||||
xAxisData={generateData.xAxisData}
|
||||
tooltipValueFormatter={tooltipValueFormatter}
|
||||
smooth={true}
|
||||
width="100%"
|
||||
yAxisName="(%)"
|
||||
titleOptions={titleOptions}
|
||||
></LineChart>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrendChart;
|
||||
@@ -43,8 +43,8 @@ export const generateRegisterCommand = (params: {
|
||||
|
||||
export const addActions = [
|
||||
{
|
||||
label: 'Custom',
|
||||
locale: false,
|
||||
label: 'clusters.provider.custom',
|
||||
locale: true,
|
||||
value: ProviderValueMap.Custom,
|
||||
key: ProviderValueMap.Custom,
|
||||
icon: icons.Docker
|
||||
@@ -78,23 +78,23 @@ export const clusterActionList = [
|
||||
},
|
||||
{
|
||||
key: 'add_worker',
|
||||
label: 'Add Worker',
|
||||
label: 'resources.button.create',
|
||||
provider: ProviderValueMap.Custom,
|
||||
locale: false,
|
||||
locale: true,
|
||||
icon: icons.Docker
|
||||
},
|
||||
{
|
||||
key: 'register_cluster',
|
||||
label: 'Register Cluster',
|
||||
label: 'clusters.button.register',
|
||||
provider: ProviderValueMap.Kubernetes,
|
||||
locale: false,
|
||||
locale: true,
|
||||
icon: icons.KubernetesOutlined
|
||||
},
|
||||
{
|
||||
key: 'addPool',
|
||||
label: 'Add Node Pool',
|
||||
label: 'clusters.button.addNodePool',
|
||||
provider: ProviderValueMap.DigitalOcean,
|
||||
locale: false,
|
||||
locale: true,
|
||||
icon: icons.Catalog
|
||||
},
|
||||
{
|
||||
|
||||
@@ -103,7 +103,7 @@ const Credentials: React.FC = () => {
|
||||
provider: ProviderValueMap.DigitalOcean,
|
||||
open: true,
|
||||
action: PageAction.CREATE,
|
||||
title: 'Add Cloud Credential',
|
||||
title: intl.formatMessage({ id: 'clusters.button.addCredential' }),
|
||||
currentData: undefined
|
||||
});
|
||||
};
|
||||
@@ -141,7 +141,10 @@ const Credentials: React.FC = () => {
|
||||
provider: row.provider,
|
||||
open: true,
|
||||
action: PageAction.EDIT,
|
||||
title: `Edit ${row.name} Credential`,
|
||||
title: intl.formatMessage(
|
||||
{ id: 'common.buton.edit.item' },
|
||||
{ name: row.name }
|
||||
),
|
||||
currentData: row
|
||||
});
|
||||
};
|
||||
@@ -186,7 +189,9 @@ const Credentials: React.FC = () => {
|
||||
showPrimaryButton={true}
|
||||
marginBottom={22}
|
||||
marginTop={30}
|
||||
buttonText={'Add Cloud Credential'}
|
||||
buttonText={intl.formatMessage({
|
||||
id: 'clusters.button.addCredential'
|
||||
})}
|
||||
handleDeleteByBatch={handleDeleteBatch}
|
||||
handleSearch={handleSearch}
|
||||
handleInputChange={handleNameChange}
|
||||
@@ -212,7 +217,7 @@ const Credentials: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title="Name"
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
ellipsis={{
|
||||
@@ -227,7 +232,7 @@ const Credentials: React.FC = () => {
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Provider"
|
||||
title={intl.formatMessage({ id: 'clusters.table.provider' })}
|
||||
dataIndex="provider"
|
||||
key="provider"
|
||||
ellipsis={{
|
||||
@@ -261,7 +266,7 @@ const Credentials: React.FC = () => {
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Description"
|
||||
title={intl.formatMessage({ id: 'common.table.description' })}
|
||||
dataIndex="description"
|
||||
key="description"
|
||||
ellipsis={{
|
||||
|
||||
+15
-9
@@ -2,6 +2,7 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import StatusTag from '@/components/status-tag';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { ColumnsType } from 'antd/es/table';
|
||||
import dayjs from 'dayjs';
|
||||
import { useMemo } from 'react';
|
||||
@@ -10,12 +11,13 @@ import {
|
||||
ClusterStatusLabelMap,
|
||||
ProviderLabelMap,
|
||||
clusterActionList
|
||||
} from '.';
|
||||
import { ClusterListItem } from './types';
|
||||
} from '../config';
|
||||
import { ClusterListItem } from '../config/types';
|
||||
|
||||
const useClusterColumns = (
|
||||
handleSelect: (val: string, record: ClusterListItem) => void
|
||||
): ColumnsType<ClusterListItem> => {
|
||||
const intl = useIntl();
|
||||
const setActionsItems = (row: ClusterListItem) => {
|
||||
return clusterActionList.filter((item) => {
|
||||
if (item.provider) {
|
||||
@@ -28,17 +30,17 @@ const useClusterColumns = (
|
||||
return useMemo(() => {
|
||||
return [
|
||||
{
|
||||
title: 'Name',
|
||||
title: intl.formatMessage({ id: 'common.table.name' }),
|
||||
dataIndex: 'name',
|
||||
render: (text: string) => <AutoTooltip ghost>{text}</AutoTooltip>
|
||||
},
|
||||
{
|
||||
title: 'Provider',
|
||||
title: intl.formatMessage({ id: 'clusters.table.provider' }),
|
||||
dataIndex: 'provider',
|
||||
render: (value: string) => <span>{ProviderLabelMap[value]}</span>
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
title: intl.formatMessage({ id: 'common.table.status' }),
|
||||
dataIndex: 'state',
|
||||
render: (value: number) => (
|
||||
<StatusTag
|
||||
@@ -52,7 +54,11 @@ const useClusterColumns = (
|
||||
{
|
||||
title: 'Workers',
|
||||
dataIndex: 'workers',
|
||||
render: (value: number) => <span>{value}</span>
|
||||
render: (value: number, record: ClusterListItem) => (
|
||||
<span>
|
||||
{record.ready_workers} / {record.workers}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'GPUs',
|
||||
@@ -60,12 +66,12 @@ const useClusterColumns = (
|
||||
render: (value: number) => <span>{value}</span>
|
||||
},
|
||||
{
|
||||
title: 'Deployments',
|
||||
title: intl.formatMessage({ id: 'clusters.table.deployments' }),
|
||||
dataIndex: 'models',
|
||||
render: (value: number) => <span>{value}</span>
|
||||
},
|
||||
{
|
||||
title: 'Created',
|
||||
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
render: (value: string) => (
|
||||
@@ -73,7 +79,7 @@ const useClusterColumns = (
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Operations',
|
||||
title: intl.formatMessage({ id: 'common.table.operation' }),
|
||||
dataIndex: 'operations',
|
||||
render: (value: string, record: ClusterListItem) => (
|
||||
<DropdownButtons
|
||||
Reference in New Issue
Block a user