|
|
|
|
@ -1,29 +1,77 @@
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import { Collapse, Space, Tag, Button, Table, TableColumnProps } from '@arco-design/web-react';
|
|
|
|
|
import { Collapse, Space, Tag, Button, Table, TableColumnProps, Modal } from '@arco-design/web-react';
|
|
|
|
|
import styles from './style/collapseList.module.less';
|
|
|
|
|
import ListNode from '@/pages/componentDevelopment/componentDeployment/listNode';
|
|
|
|
|
import AddModal from '@/pages/componentDevelopment/componentDeployment/addModal';
|
|
|
|
|
import { getDeployList } from '@/api/componentDeploy';
|
|
|
|
|
import { componentOnSale, componentOffSale, getDeployList } from '@/api/componentDeploy';
|
|
|
|
|
import { runStatusConstant, runStatusDic } from '@/const/isdp/componentDeploy';
|
|
|
|
|
|
|
|
|
|
const CollapseItem = Collapse.Item;
|
|
|
|
|
|
|
|
|
|
const CollapseList = () => {
|
|
|
|
|
interface CollapseListProps {
|
|
|
|
|
searchKeyword?: string;
|
|
|
|
|
runStatus?: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus }) => {
|
|
|
|
|
const [collapses, setCollapses] = useState([]);
|
|
|
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
|
const [showOffSaleModal, setShowOffSaleModal] = useState(false);
|
|
|
|
|
const [selectedItem, setSelectedItem] = useState(null); // 选中的折叠面板数据
|
|
|
|
|
const [expandedItem, setExpandedItem] = useState(null); // 当前展开的折叠面板数据
|
|
|
|
|
|
|
|
|
|
// 获取组件列表
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
const params = {
|
|
|
|
|
const params: any = {
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 10
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 添加搜索关键词
|
|
|
|
|
if (searchKeyword) {
|
|
|
|
|
params.name = searchKeyword;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 添加运行状态筛选
|
|
|
|
|
if (runStatus) {
|
|
|
|
|
params.runStatus = runStatus;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const res: any = await getDeployList(params);
|
|
|
|
|
if (res.code === 200) setCollapses(res.data.records);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 上架组件
|
|
|
|
|
const componentOnSaleHandler = async (value) => {
|
|
|
|
|
const res: any = await componentOnSale({ identifier: value.identifier });
|
|
|
|
|
if (res.code === 200) getList();
|
|
|
|
|
else {
|
|
|
|
|
Modal.error({
|
|
|
|
|
title: '上架失败',
|
|
|
|
|
content: res.message
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 下架组件
|
|
|
|
|
const componentOffSaleHandler = async (stopInstance: boolean) => {
|
|
|
|
|
const res: any = await componentOffSale({ identifier: selectedItem.identifier, stopInstance });
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
getList();
|
|
|
|
|
setShowOffSaleModal(false);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
Modal.error({
|
|
|
|
|
title: '下架失败',
|
|
|
|
|
content: res.message
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
getList();
|
|
|
|
|
}, []);
|
|
|
|
|
}, [searchKeyword, runStatus]);
|
|
|
|
|
|
|
|
|
|
const headerNode = (item) => {
|
|
|
|
|
const getRunStatus = () => {
|
|
|
|
|
@ -54,26 +102,42 @@ const CollapseList = () => {
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const extraNode = () => {
|
|
|
|
|
const extraNode = (item) => {
|
|
|
|
|
return (
|
|
|
|
|
<div className={styles['extra-node']}>
|
|
|
|
|
<Space size={20}>
|
|
|
|
|
{/*<div className={styles['flex-box']}>*/}
|
|
|
|
|
{/* <img src={'/icons/compileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />*/}
|
|
|
|
|
{/* <span style={{ color: '#A2A2AB' }}>未编译</span>*/}
|
|
|
|
|
{/*</div>*/}
|
|
|
|
|
{/*<div className={styles['flex-box']}>*/}
|
|
|
|
|
{/* <img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />*/}
|
|
|
|
|
{/* <span style={{ color: '#A2A2AB' }}>重新编译</span>*/}
|
|
|
|
|
{/*</div>*/}
|
|
|
|
|
{/*新增实例*/}
|
|
|
|
|
{item.runStatus === 'RUN' && (
|
|
|
|
|
<div className={styles['flex-box']} onClick={() => setVisible(true)}>
|
|
|
|
|
<img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
|
|
|
|
<span style={{ color: '#A2A2AB' }}>新增实例</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles['flex-box']}>
|
|
|
|
|
)}
|
|
|
|
|
{/*环境配置*/}
|
|
|
|
|
<div className={styles['flex-box']} onClick={() => setVisible(true)}>
|
|
|
|
|
<img src={'/icons/envIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
|
|
|
|
<span style={{ color: '#A2A2AB' }}>环境配置</span>
|
|
|
|
|
</div>
|
|
|
|
|
{/*下架组件*/}
|
|
|
|
|
{item.runStatus === 'RUN' && (
|
|
|
|
|
<div className={`${styles['flex-box']} ${styles['custom-red']}`} onClick={() => {
|
|
|
|
|
setSelectedItem(item);
|
|
|
|
|
setShowOffSaleModal(true);
|
|
|
|
|
}}>
|
|
|
|
|
<img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
|
|
|
|
<span style={{ color: '#A2A2AB' }}>下架组件</span>
|
|
|
|
|
<span>下架组件</span>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{/*上架组件*/}
|
|
|
|
|
{item.runStatus === 'STOP' && (
|
|
|
|
|
<div className={`${styles['flex-box']} ${styles['custom-blue']}`}
|
|
|
|
|
onClick={() => componentOnSaleHandler(item)}>
|
|
|
|
|
<img src={'/icons/removedIcon.png'}
|
|
|
|
|
style={{ width: 16, height: 16, marginRight: 5, transform: 'rotate(180deg)' }} />
|
|
|
|
|
<span>上架组件</span>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{/*更多操作*/}
|
|
|
|
|
<div className={styles['flex-box']}>
|
|
|
|
|
<img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
|
|
|
|
<span style={{ color: '#A2A2AB' }}>更多操作</span>
|
|
|
|
|
@ -89,15 +153,29 @@ const CollapseList = () => {
|
|
|
|
|
<Collapse
|
|
|
|
|
expandIconPosition={'right'}
|
|
|
|
|
bordered={false}
|
|
|
|
|
onChange={(key, keys, e) => {
|
|
|
|
|
// 当展开某个折叠面板时，记录当前展开的 item 数据
|
|
|
|
|
if (keys && keys.length > 0) {
|
|
|
|
|
// 获取最后一个展开的 key（当前操作的 key）
|
|
|
|
|
const expandedKey = keys[keys.length - 1];
|
|
|
|
|
const expandedIndex = parseInt(expandedKey, 10);
|
|
|
|
|
const currentItem = collapses[expandedIndex];
|
|
|
|
|
setExpandedItem(currentItem);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
// 所有面板都折叠时，清空 expandedItem
|
|
|
|
|
setExpandedItem(null);
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{collapses.map((item, index) => (
|
|
|
|
|
<CollapseItem
|
|
|
|
|
key={item.identifier}
|
|
|
|
|
header={headerNode(item)}
|
|
|
|
|
name="1"
|
|
|
|
|
extra={extraNode()}
|
|
|
|
|
name={index.toString()}
|
|
|
|
|
extra={extraNode(item)}
|
|
|
|
|
>
|
|
|
|
|
<ListNode />
|
|
|
|
|
<ListNode componentData={item} />
|
|
|
|
|
</CollapseItem>
|
|
|
|
|
))}
|
|
|
|
|
</Collapse>
|
|
|
|
|
@ -107,6 +185,33 @@ const CollapseList = () => {
|
|
|
|
|
visible={visible}
|
|
|
|
|
setVisible={setVisible}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<Modal
|
|
|
|
|
title={'下架组件'}
|
|
|
|
|
visible={showOffSaleModal}
|
|
|
|
|
style={{ width: '45%' }}
|
|
|
|
|
onCancel={() => {
|
|
|
|
|
setSelectedItem(null);
|
|
|
|
|
}}
|
|
|
|
|
footer={[
|
|
|
|
|
<Button key="cancel" onClick={() => setShowOffSaleModal(false)}>
|
|
|
|
|
取消
|
|
|
|
|
</Button>,
|
|
|
|
|
<Button key="offshelf" type="primary" onClick={() => {
|
|
|
|
|
componentOffSaleHandler(false);
|
|
|
|
|
}}>
|
|
|
|
|
仅下架组件
|
|
|
|
|
</Button>,
|
|
|
|
|
<Button key="stopAndOffshelf" type="primary" status="danger" onClick={() => {
|
|
|
|
|
componentOffSaleHandler(true);
|
|
|
|
|
}}>
|
|
|
|
|
停止线上实例并下架组件
|
|
|
|
|
</Button>
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<p>下架后该组件状态为编码中，不可继续新增实例等。</p>
|
|
|
|
|
<p> 该组件存在线上部署的实例，可继续使用原有的代码逻辑继续运行，是否需要同步停止所有线上实例？</p>
|
|
|
|
|
</Modal>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
