feact: 任务列表、服务器状态
JINGYJ
1 year ago
parent
e3307046be
commit
b7bae347c6
@ -0,0 +1,54 @@
|
|||||||
|
/**
|
||||||
|
* 停止按钮
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { DeleteOutlined } from '@ant-design/icons';
|
||||||
|
import { useIntl } from '@umijs/max';
|
||||||
|
import { Button, Popconfirm } from 'antd';
|
||||||
|
import { proIconForTableActionStyle } from '../../../config/defaultIcon';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
|
type StopBtnProps = {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||||
|
buttonType?: 'defalut' | 'deleteIcon';
|
||||||
|
deleteApi: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const StopBtn: React.FC<StopBtnProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popconfirm
|
||||||
|
key="destroy"
|
||||||
|
placement="topLeft"
|
||||||
|
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
|
||||||
|
description={intl.formatMessage({
|
||||||
|
id: 'common.modal.table.stop.content',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
|
||||||
|
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
|
||||||
|
onConfirm={() => {
|
||||||
|
props.deleteApi();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* {props.buttonType === 'deleteIcon' ? (
|
||||||
|
<>
|
||||||
|
<DeleteOutlined style={{
|
||||||
|
color: "rgba(232, 13, 13, 1)",
|
||||||
|
...proIconForTableActionStyle
|
||||||
|
}} />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Button type="link" size="small" danger>
|
||||||
|
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
|
||||||
|
</Button>
|
||||||
|
)} */}
|
||||||
|
<Button type="link" size="small" danger>
|
||||||
|
<FormattedMessage id="pages.searchTable.stop" defaultMessage="Destroy" />
|
||||||
|
</Button>
|
||||||
|
</Popconfirm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StopBtn;
|
||||||
@ -0,0 +1,185 @@
|
|||||||
|
/**
|
||||||
|
* 服务器状态新建弹框
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { postBusinessImageCreateBusinessImage } from '@/services/resource/BusinessImage';
|
||||||
|
import { ModalForm, ProForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Button, Form, message } from 'antd';
|
||||||
|
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
||||||
|
import React from 'react';
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.BusinessImage>;
|
||||||
|
|
||||||
|
export type CreateFormProps = {
|
||||||
|
createModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.BusinessImage>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [form] = Form.useForm<API.BusinessImage>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.BusinessImage>
|
||||||
|
width={proFormModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.add',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
open={props.createModalOpen}
|
||||||
|
form={form}
|
||||||
|
autoFocusFirstInput
|
||||||
|
modalProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
onCancel: () => props.handleModal(),
|
||||||
|
}}
|
||||||
|
submitTimeout={2000}
|
||||||
|
onFinish={async (values) => {
|
||||||
|
postBusinessImageCreateBusinessImage(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
props.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
props.handleModal();
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.parameter" defaultMessage="$$$" />
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="name"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.name" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="userName"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.userName"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.userName',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.userName"
|
||||||
|
defaultMessage="version is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="ip"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.ip" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.ip',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="password"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.password"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.password',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="defaultPort"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.defaultPort"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.defaultPort',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormTextArea
|
||||||
|
width={proFormItemStyleProps.width}
|
||||||
|
name="publicKeyString"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.publicKeyString" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.publicKeyString',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<Button type="primary" ghost><FormattedMessage id="resource.server_status.table.list.connectivityTesting" defaultMessage="$$$" /></Button>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default CreateForm;
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhoux zhouxia@supervision.ltd
|
||||||
|
* @Date: 2023-11-06 16:12:17
|
||||||
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||||
|
* @LastEditTime: 2023-12-11 16:12:17
|
||||||
|
* @FilePath: \general-ai-platform-web\src\pages\Setting\components\ProjectCardList.tsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { Progress } from 'antd';
|
||||||
|
// import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion';
|
||||||
|
|
||||||
|
// const [tabs, setTabs] = useState([]);
|
||||||
|
// const [projectData, setProjectData] = useState<any>({});
|
||||||
|
// const [tab, setTab] = useState('');
|
||||||
|
// const [modelVersionData, setModelVersionData] = useState<any[]>([]);
|
||||||
|
|
||||||
|
/**styles */
|
||||||
|
const listItemStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#333333',
|
||||||
|
width: '100%',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: '8px 0 0',
|
||||||
|
};
|
||||||
|
|
||||||
|
const listItemLabelStyle = {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#666666',
|
||||||
|
minWidth: 40,
|
||||||
|
};
|
||||||
|
|
||||||
|
const listItemTextStyle = {
|
||||||
|
fontSize: 14,
|
||||||
|
margin: 0,
|
||||||
|
};
|
||||||
|
// 卡片
|
||||||
|
export type UpdateProjectProps = {
|
||||||
|
info: Record<string, any>;
|
||||||
|
// reload: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
type DeviceItemProgress = {
|
||||||
|
label: string;
|
||||||
|
percent: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 进度条
|
||||||
|
// TODO 进度条的边框圆角调整为矩形
|
||||||
|
const DeviceItemProgress: React.FC<DeviceItemProgress> = (props) => {
|
||||||
|
let strokeColor = 'rgb(243,48,5)';
|
||||||
|
switch (props.label) {
|
||||||
|
case 'CPU':
|
||||||
|
strokeColor = 'rgb(243,48,5)';
|
||||||
|
break;
|
||||||
|
case '内存':
|
||||||
|
strokeColor = 'rgb(33,169,122)';
|
||||||
|
break;
|
||||||
|
case '存储':
|
||||||
|
strokeColor = 'rgb(33,169,122)';
|
||||||
|
break;
|
||||||
|
case 'GPU':
|
||||||
|
strokeColor = 'rgb(250,173,20)';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ width: '100%', display: 'flex' }} className='rectProgress_box'>
|
||||||
|
<span style={listItemLabelStyle}>{props.label}</span>
|
||||||
|
<Progress style={{padding:0, margin: 0, borderRadius: 0}} size={['100%', 10]} height={46} percent={props.percent * 100} strokeColor={strokeColor} showInfo={false} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const DeviceStatusCard: React.FC<UpdateProjectProps> = ({
|
||||||
|
info,
|
||||||
|
}: {
|
||||||
|
info: Record<string, any>;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'left',
|
||||||
|
paddingLeft: 15,
|
||||||
|
paddingRight: 15,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* <div style={{ display: 'flex', alignItems: 'center', paddingBottom: 10 }}>
|
||||||
|
<span style={{ fontWeight: 700, fontSize: 14, paddingRight: 10 }}>苏胜天算法模型</span>
|
||||||
|
<Tag color="#44AEF5">经典算法</Tag>
|
||||||
|
</div> */}
|
||||||
|
<ul style={{width: '100%'}}>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="CPU" percent={0.79}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="内存" percent={0.18}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="存储" percent={0.16}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="GPU" percent={0.58}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DeviceStatusCard;
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
/**
|
||||||
|
* 服务器状态编辑弹框
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { putBusinessImageUpdateBusinessImage } from '@/services/resource/BusinessImage';
|
||||||
|
import {
|
||||||
|
ModalForm,
|
||||||
|
ProForm,
|
||||||
|
ProFormText,
|
||||||
|
ProFormTextArea,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Button, Form, message } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.BusinessImage>;
|
||||||
|
|
||||||
|
export type UpdateFormProps = {
|
||||||
|
updateModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.BusinessImage>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [form] = Form.useForm<API.BusinessImage>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.BusinessImage>
|
||||||
|
width={proFormModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'resource.business_image.table.list.update',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
open={props.updateModalOpen}
|
||||||
|
form={form}
|
||||||
|
autoFocusFirstInput
|
||||||
|
modalProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
onCancel: () => props.handleModal(),
|
||||||
|
}}
|
||||||
|
submitTimeout={2000}
|
||||||
|
onFinish={async (values) => {
|
||||||
|
putBusinessImageUpdateBusinessImage(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
props.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
|
||||||
|
props.handleModal();
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.parameter" defaultMessage="$$$" />
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="name"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.name" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="userName"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.userName"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.userName',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.userName"
|
||||||
|
defaultMessage="version is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="ip"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.ip" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.ip',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="password"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.password"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.password',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="defaultPort"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="resource.server_status.table.list.defaultPort"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.defaultPort',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormTextArea
|
||||||
|
width={proFormItemStyleProps.width}
|
||||||
|
name="publicKeyString"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="resource.server_status.table.list.publicKeyString" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'resource.server_status.table.list.publicKeyString',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<Button type="primary" ghost><FormattedMessage id="resource.server_status.table.list.connectivityTesting" defaultMessage="$$$" /></Button>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default UpdateForm;
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
import { putProjectUpdateProject } from '@/services/project/Project';
|
||||||
|
import {
|
||||||
|
ModalForm,
|
||||||
|
ProForm,
|
||||||
|
ProFormText,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Form, message } from 'antd';
|
||||||
|
import { proFormSmallItemStyleProps, proFormSmallModelWidth } from '../../../../../config/defaultForm';
|
||||||
|
import React from 'react';
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.Project>;
|
||||||
|
|
||||||
|
export type UpdateFormProps = {
|
||||||
|
updateModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.Project>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const UpdateParameterForm: React.FC<UpdateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [form] = Form.useForm<API.Project>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.Project>
|
||||||
|
width={proFormSmallModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.editor',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
open={props.updateModalOpen}
|
||||||
|
form={form}
|
||||||
|
autoFocusFirstInput
|
||||||
|
modalProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
onCancel: () => props.handleModal(),
|
||||||
|
}}
|
||||||
|
submitTimeout={2000}
|
||||||
|
onFinish={async (values) => {
|
||||||
|
putProjectUpdateProject(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
props.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
|
||||||
|
props.handleModal();
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormSmallItemStyleProps.width}
|
||||||
|
name="name"
|
||||||
|
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.label',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.name}
|
||||||
|
disabled={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="system.parameter.table.rule.required.label"
|
||||||
|
defaultMessage="account is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default UpdateParameterForm;
|
||||||
@ -0,0 +1,244 @@
|
|||||||
|
import { PageContainer, ProCard, ProForm } from '@ant-design/pro-components';
|
||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
import { EditOutlined } from '@ant-design/icons';
|
||||||
|
import { Button, Input, message, } from 'antd';
|
||||||
|
import type { ActionType } from '@ant-design/pro-components';
|
||||||
|
import styles from "./parameterSetting.less";
|
||||||
|
import UpdateParameterForm from './components/UpdateParameterForm';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @参数设置
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
const ParameterSetting: React.FC = () => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [updateParameterModalOpen, setUpdateParameterModalOpen] = useState<boolean>(false);
|
||||||
|
const [currentRow, setCurrentRow] = useState<API.Project>();
|
||||||
|
|
||||||
|
const handleUpdateParameterModal = () => {
|
||||||
|
if (updateParameterModalOpen) {
|
||||||
|
setUpdateParameterModalOpen(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setUpdateParameterModalOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const [stateValue, setStateValue] = useState({});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer>
|
||||||
|
<ProCard
|
||||||
|
style={{ background: 'white' }}
|
||||||
|
bodyStyle={{
|
||||||
|
padding: 40,
|
||||||
|
margin: 0,
|
||||||
|
}}
|
||||||
|
gutter={24}
|
||||||
|
wrap
|
||||||
|
ghost
|
||||||
|
>
|
||||||
|
<ProForm
|
||||||
|
layout='vertical'
|
||||||
|
grid={true}
|
||||||
|
rowProps={{
|
||||||
|
gutter: 24
|
||||||
|
}}
|
||||||
|
submitter={false}
|
||||||
|
>
|
||||||
|
|
||||||
|
<ProForm.Item
|
||||||
|
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||||
|
style={{
|
||||||
|
width: '50%'
|
||||||
|
}}>
|
||||||
|
<Input placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.label',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`} disabled style={{
|
||||||
|
width: '92%'
|
||||||
|
}} />
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateParameterModalOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ProForm.Item>
|
||||||
|
<ProForm.Item
|
||||||
|
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||||
|
style={{
|
||||||
|
width: '50%'
|
||||||
|
}}>
|
||||||
|
<Input placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.label',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`} disabled style={{
|
||||||
|
width: '92%'
|
||||||
|
}} />
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateParameterModalOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ProForm.Item>
|
||||||
|
<ProForm.Item
|
||||||
|
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||||
|
style={{
|
||||||
|
width: '50%'
|
||||||
|
}}>
|
||||||
|
<Input placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.label',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`} disabled style={{
|
||||||
|
width: '92%'
|
||||||
|
}} />
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateParameterModalOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ProForm.Item>
|
||||||
|
<ProForm.Item
|
||||||
|
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||||
|
style={{
|
||||||
|
width: '50%'
|
||||||
|
}}>
|
||||||
|
<Input placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.label',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`} disabled style={{
|
||||||
|
width: '92%'
|
||||||
|
}} />
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateParameterModalOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ProForm.Item>
|
||||||
|
<ProForm.Item
|
||||||
|
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||||
|
style={{
|
||||||
|
width: '50%'
|
||||||
|
}}>
|
||||||
|
<Input placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.label',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`} disabled style={{
|
||||||
|
width: '92%'
|
||||||
|
}} />
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateParameterModalOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ProForm.Item>
|
||||||
|
<ProForm.Item
|
||||||
|
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||||
|
style={{
|
||||||
|
width: '50%'
|
||||||
|
}}>
|
||||||
|
<Input placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.label',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`} disabled style={{
|
||||||
|
width: '92%'
|
||||||
|
}} />
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateParameterModalOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ProForm.Item>
|
||||||
|
<ProForm.Item
|
||||||
|
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||||
|
style={{
|
||||||
|
width: '50%'
|
||||||
|
}}>
|
||||||
|
<Input placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.label',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`} disabled style={{
|
||||||
|
width: '92%'
|
||||||
|
}} />
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateParameterModalOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ProForm.Item>
|
||||||
|
<ProForm.Item
|
||||||
|
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||||
|
style={{
|
||||||
|
width: '50%'
|
||||||
|
}}>
|
||||||
|
<Input placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'system.parameter.table.list.label',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`} disabled style={{
|
||||||
|
width: '92%'
|
||||||
|
}} />
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateParameterModalOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ProForm.Item>
|
||||||
|
</ProForm>
|
||||||
|
</ProCard>
|
||||||
|
<UpdateParameterForm
|
||||||
|
updateModalOpen={updateParameterModalOpen}
|
||||||
|
values={currentRow || {}}
|
||||||
|
handleModal={handleUpdateParameterModal}
|
||||||
|
reload={actionRef.current?.reload}
|
||||||
|
/>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ParameterSetting;
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
.infoBox {
|
||||||
|
margin-left: 78px;
|
||||||
|
padding-top: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 90px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.infoBoxRight {
|
||||||
|
margin-left: 65px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 90px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.spanStyle {
|
||||||
|
display: inline-block;
|
||||||
|
width: 68px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.inputWidth {
|
||||||
|
.ant-form-item-control-input {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue