![](\"./doc/contact-us.png\")
\n"
},
{
"path": "UpdateLog.md",
"content": "# 更新日志\n\n------\n\n\n\n\n\n## v0.1.0 (2021.11.30)\n- 【仪表盘】\n - 全局状态概览\n - 当前异常信息展示\n - 各模块状态展示\n- 【主机管理】\n - 主机纳管（添加、导入、编辑、维护、删除）\n - 主机自动监控、告警\n- 【应用商店】\n - 组件、应用WEB发布、服务端自动发现\n - 组件、应用部署，自动编排解决依赖\n- 【服务管理】\n - 服务管理（启动、停止、重启、删除）\n - 服务监控（监控、日志、告警、自愈）\n- 【应用监控】\n - 实时展示处于异常的主机、服务信息，呼应仪表盘的异常清单\n - 告警历史记录查看，未读提醒，按添加检索\n - 支持监控组件地址自定义，便于对接现有监控平台\n- 【状态巡检】\n - 支持主机巡检、组件巡检、深度分析，且支持导出\n - 支持定时自动执行巡检任务\n- 【系统管理】\n - 用户账户管理\n - 支持全局维护模式，避免人为操作时误报\n\n\n\n## v0.5.0 (2022.04.11)\n\n- 【应用商店】\n - 组件、应用服务的升级及回滚\n - 应用服务的增量安装\n- 【部署模板】\n - 支持通过部署模版实现批量部署\n- 【应用监控】\n - 支持告警邮件配置，将告警信息发送至指定邮箱\n- 【故障自愈】\n - 展示故障自愈记录\n - 支持监控到服务状态异常后自动进行重启\n - 支持设置服务自愈尝试次数\n- 【指标中心】\n - 支持添加自定义告警指标规则\n - 添加自定义扩展采集指标\n- 【数据备份】\n - 支持mysql、arangodb、postgreSql数据备份\n - 备份记录展示、下载、删除\n - 支持自定义保存路径、定时备份策略及邮件推送备份内容\n- 【实用工具】\n - 内置部分运维实用小工具\n - 展示小工具执行过程、输出展示及生成文件下载\n- 【系统管理】\n - 增加邮件管理，支持设置smtp邮件服务器作为全局邮件发件箱\n\n- 【平台优化】\n - 优化主机纳管逻辑，增加纳管成功率，支持删除主机\n - 优化应用安装服务逻辑代码\n - 优化巡检逻辑\n - 优化部分前端页面显示及交互效果\n- 【其他】\n - 修复已知bug\n\n\n\n\n## v0.6.0 (2022.11.29)\n- 升级内置基础组件和环境\n - alertmanager 升级至 v0.24.0\n - tengine 升级至 v1.22.0\n - 扩充内置环境中部分第三方库\n - 升级主机 Agent & 监控 Agent\n- 优化小工具异步任务执行逻辑\n- 更新 prometheus 和 loki 的配置\n- 修复 grafana 面板中 mysql 显示异常问题\n- 补充应用商店基础组件包：mysq、elasticsearch\n- 组件包从代码库抽离，减少源码 & 包体量\n\n\n## v0.7.0 (2022.12.30)\n- 完善 OMP 管理脚本功能\n - 支持升级、回滚，支持断点重试\n - 支持命令行卸载应用商店已发布服务\n- 内置 Redis 5.0.37 升级至 6.2.7\n- 验证码登陆\n- 修改密码长度异常问题\n\n\n## v0.8.0 (2023.01.30)\n- 新增监控功能\n - 产品http请求 5XX 错误\n - jvm 文件句柄使用率过高\n - 修复部分服务无法获取 cpu、内存问题\n- 增加只读用户功能\n- 修复添加主机提示已经存在问题\n- 银河麒麟V10 ARM ，鲲鹏920 （ARM架构）2023.03.30\n\n## v0.9.0 (2023.05.31)\n\n- 内置Grafana版本升级至 9.3.8\n- 主机/服务详情页面布局调整\n- 主机/服务/安装/升级/回滚页面中文本溢出处理\n- 支持通过前端界面方式卸载应用商店中已经发布的应用\n- 更新readme文档\n\n## v1.0.0 (2023.07.30)\n\n- 新增功能【服务纳管】模块\n- 重构【服务自愈】模块\n- 新增 OOM 告警\n- 更新部分 Grafana 面板\n - 服务面板： redis、victoriametrics、rocketmq\n - 集群面板： redis、clickhouse、mysql、tengine\n- 修复 Grafana 无法登陆问题\n\n## v1.1.0 (2023.09.30)\n\n- 重构「数据备份」模块\n- 支持多端口服务监控 & 更新文档\n- 前端优化，步骤类交互型界面，刷新自动跳转\n- 前端优化，消除部分冗余导入\n- 修复bug：仪表盘异常清单类型缺失，环形统计图跳转增加类型过滤，nodeExporter、loki启动失败问题"
},
{
"path": "component/.gitkeep",
"content": ""
},
{
"path": "component/alertmanager/.gitkeep",
"content": ""
},
{
"path": "component/grafana/.gitkeep",
"content": ""
},
{
"path": "component/loki/.gitkeep",
"content": ""
},
{
"path": "component/prometheus/.gitkeep",
"content": ""
},
{
"path": "config/omp.yaml",
"content": "# 全局用户, 自动解析当前操作用户\nglobal_user: common\n# 初始化时由用户输入本机的ip地址\nlocal_ip: 10.0.1.160\n# SSH执行命令超时时间，单位秒\nssh_cmd_timeout: 60\n# SSH连通性校验超时时间，单位秒\nssh_check_timeout: 10\n# 线程池最大workers\nthread_pool_max_workers: 10\n# redis相关配置\nredis:\n host: 127.0.0.1\n port: 19034\n password: common123\n# mysql相关配置\nmysql:\n host: 127.0.0.1\n port: 19033\n username: common\n password: Common@123\n# salt相关配置\nsalt_master:\n publish_port: 19004\n ret_port: 19005\n timeout: 30\n# uwsgi的配置\nuwsgi:\n socket: 127.0.0.1:19003\n processes: 4\n threads: 2\n# tengine相关的配置\ntengine:\n access_port: 19001\n runserver_port: 19002\n# 登录token过期时间，天\ntoken_expiration: 1\n#grafana认证字段，无需修改\ngrafana_api_key: test\n#grafana_auth\ngrafana_auth:\n # grafana admin auth\n grafana_admin_auth:\n username: admin\n plaintext_password: Yunweiguanli@OMP_123\n # grafana viewer auth\n grafana_viewer_auth:\n username: omp\n plaintext_password: Common@123\n# 关联邮件设置,谨慎修改\nalert_manager:\n # 是否开启发送邮件配置，默认不开启\n send_email: false\n # 发件人邮箱配置\n EMAIL_SEND: <发件人邮箱>\n # smtp服务器地址端口配置\n SMTP_SMARTHOST: */}\n {extraBreadcrumbItems()} \n {/*
*/}\n {isMaintenance ? (\n \n 确定退出全局维护模式 ？
\n \n \n );\n});\nexport default React.memo(CustomBreadcrumb);\n/*eslint-disable*/\n"
},
{
"path": "omp_web/src/components/CustomBreadcrumb/index.module.less",
"content": ".customNav {\n transition: all 0.2s ease-in-out;\n margin-top: 60px;\n position:fixed;\n z-Index:1000;\n //margin-left:200px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n width: 100%;\n background-color: white;\n height: 45px;\n padding-left: 20px;\n padding-right: 20px;\n margin-bottom: 15px;\n font-size: 14px;\n //background-color: #fff;\n margin-left: 10px;\n border-left: 1px solid #e7e7e7;\n // /font-size: 16px;\n color: black;\n //padding-left: 20px;\n // fontWeight: 400,\n // color: \"black\",\n // paddingLeft: 20,\n //height: 52px;\n padding-top: 5px;\n padding-bottom: 5px;\n // display: \"flex\",\n // alignItems: \"center\",\n // borderBottom: \"1px solid #dcdee5\",\n & > div:last-child {\n margin-left: auto;\n }\n}\n\n.timeStampContainer {\n font-size: 13px;\n color: #8b8b8b;\n padding-right: 220px;\n // position: relative;\n // left: -100px;\n}"
},
{
"path": "omp_web/src/components/CustomBreadcrumb/store/actionsCreators.js",
"content": "import * as actionTypes from \"./constants\";\n\nexport const getMaintenanceChangeAction = (value) => ({\n type: actionTypes.CHANGE_MAINTENANCE,\n payload: {\n isMaintenance:value\n }\n});\n\nexport const getRefreshTimeChangeAction = (value) => ({\n type: actionTypes.CHANGE_REFRESHTIME,\n payload: {\n time:value\n }\n});"
},
{
"path": "omp_web/src/components/CustomBreadcrumb/store/constants.js",
"content": "export const CHANGE_MAINTENANCE = \"CHANGE_MAINTENANCE\";\n\nexport const CHANGE_REFRESHTIME = \"CHANGE_REFRESHTIME\";"
},
{
"path": "omp_web/src/components/CustomBreadcrumb/store/index.js",
"content": "import reducer from \"./reduer\";\n\n export {\n reducer\n };"
},
{
"path": "omp_web/src/components/CustomBreadcrumb/store/reduer.js",
"content": "import * as actionTypes from \"./constants\";\n\nconst defaultState = {\n isMaintenance:false\n};\n\nfunction reducer(state = defaultState,action){\n switch(action.type){\n case actionTypes.CHANGE_MAINTENANCE:\n return {...state, isMaintenance: action.payload.isMaintenance};\n case actionTypes.CHANGE_REFRESHTIME:\n return {...state, time: action.payload.time};\n default:\n return state;\n }\n}\n\nexport default reducer;"
},
{
"path": "omp_web/src/components/OmpButton/index.js",
"content": "import { Button } from \"antd\";\n\nconst OmpButton = (props) => {\n return (\n \n \n \n {\n setSearchTags({});\n formInstance.resetFields();\n onReset && onReset();\n setVisible(false);\n }}\n >\n 重置\n \n \n
\n );\n };\n\n useEffect(() => {\n console.log(searchTags);\n }, [searchTags]);\n\n return (\n \n \n {\n let formData = formInstance.getFieldValue();\n console.log(formData);\n onFinish();\n }}\n >\n \n \n \n {\n setVisible(true);\n }}\n style={{\n margin: 10,\n marginLeft: 0,\n marginRight: 15,\n paddingLeft: 10,\n paddingRight: 10,\n }}\n >\n
\n {Object.keys(searchTags).length > 0 && (\n {operation}
\n\n \n {item.props.label}}\n key={item.props.label}\n name={item.props.label && item.props.name}\n labelAlign=\"right\"\n style={{ width: `242px`, marginBottom: 15 }}\n >\n {item}\n \n
\n );\n })}\n {renderButtonGroup()}\n \n \n \n );\n};\n\nexport default OmpCollapseWrapper;\n"
},
{
"path": "omp_web/src/components/OmpCollapseWrapper/index.module.less",
"content": ".OmpCollapseWrapper {\n width: 100%;\n padding-top: 5px;\n // background-color: #fff;\n // border: 1px solid rgb(220, 222, 229);\n // margin-top: 10px;\n // margin-bottom: 10px;\n\n .OmpCollapseFormWrapper {\n display: flex;\n position: relative;\n //left: -20px;\n left: 15px;\n //padding-left: 10px;\n > div {\n display: flex;\n flex-wrap: wrap;\n padding-bottom: 10px;\n >div {\n //width: 0px;\n padding-top: 10px;\n }\n }\n }\n}\n:global {\n .ant-picker-input {\n input {\n text-align: center;\n }\n }\n}"
},
{
"path": "omp_web/src/components/OmpCollapseWrapper/indexOld.js",
"content": "import { useState, useEffect, useLayoutEffect } from \"react\";\nimport styles from \"./index.module.less\";\nimport { Form, Input, Button } from \"antd\";\nimport {\n DownOutlined,\n} from \"@ant-design/icons\";\nimport { useSelector } from \"react-redux\";\n\nconst OmpCollapseWrapper = ({ children, onFinish, form, onReset, initialValues={} }) => {\n const [isExpand, setIsExpand] = useState(false)\n const [ defaultForm ] = Form.useForm();\n const formInstance = form?form:defaultForm\n let childrenArr = Array.isArray(children) ? children : [children];\n // 视口宽度\n const viewWidth = useSelector(state => state.layouts.viewSize.width);\n //每个formitem 的初始值定为255\n const [itemWidth, setItemWidth] = useState(255)\n // 计算当前组件的宽度 = 窗口宽度 - 左侧asideMenu宽度 - content区域的padding*2\n let width = viewWidth - 240 - 20*2\n // 计算在当前窗口宽度下，一行能放置几个formItem\n let num = (width - 240)/itemWidth\n let widthSurplus = (width - 240)%itemWidth/num\n\n //console.log(width,num,widthSurplus)\n\n useLayoutEffect(()=>{\n // 根据剩余宽度重新计算每个foritem的宽度（目的是当剩余宽度过多，增加formitem宽度）\n setItemWidth((w)=>w + Number(widthSurplus) - 28)\n },[])\n\n let result = childrenArr.slice(0,num)\n\n const renderButtonGroup = ()=>{\n return (\n \n \n \n
\n )\n }\n\n return (\n \n \n 查询\n \n \n {\n childrenArr.length > num && setIsExpand(!isExpand)}>\n \n {isExpand?\" 收起\":\" 展开\"}\n \n }\n
\n console.log(height)} \n className={styles.OmpCollapseWrapper} \n // / style={{height:60,overflow:\"hidden\"}}\n >\n \n {(isExpand?childrenArr:result).map((item) => {\n return (\n
\n );\n};\n\nexport default OmpCollapseWrapper;\n"
},
{
"path": "omp_web/src/components/OmpContentNav/index.js",
"content": "import styles from \"./index.module.less\";\n\n// 用于面包屑导航组件下部的 切换页面content的导航\nconst OmpContentNav = ({ data, currentFocus }) => {\n const focusedStyle = {\n color: \"#4986f7\",\n borderBottom: \"2px solid #4986f7\",\n //paddingBottom:10\n height: \"35px\",\n marginRight: 15,\n zIndex: 2,\n };\n\n return (\n <>\n \n {item.props.label}}\n key={item.props.label}\n name={item.props.label && item.props.name}\n labelAlign=\"right\"\n style={{width:item.props.width || `${itemWidth}px`}}\n >\n {item}\n \n
\n );\n })}\n \n {renderButtonGroup()}\n \n
\n {data.map((item, index) => {\n return (\n item.handler()}\n >\n {item.text}\n
\n );\n })}\n \n \n \n );\n};\nexport default OmpContentNav;\n"
},
{
"path": "omp_web/src/components/OmpContentNav/index.module.less",
"content": ".warningListHeader {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n //border-bottom: 1px solid rgb(220, 222, 229);\n font-weight: 500;\n padding-top: 20px;\n //color: #333;\n //padding-bottom: 10px;\n //padding-right:35px;\n padding-left: 10px;\n & > div {\n height: 28px;\n padding: 0 10px;\n margin: 0 5px -1.5px;\n cursor: pointer;\n }\n}\n"
},
{
"path": "omp_web/src/components/OmpContentWrapper/index.js",
"content": "import styles from \"./index.module.less\";\n\nfunction OmpContentWrapper({ children, wrapperStyle }) {\n\n return (\n \n {children}\n
\n );\n}\n\nexport default OmpContentWrapper;\n"
},
{
"path": "omp_web/src/components/OmpContentWrapper/index.module.less",
"content": ".contentWrapper {\n background-color: white;\n padding: 10px;\n padding-bottom: 30px;\n //height: 100%;\n // color: rgba(0,0,0,0.65);\n}\n"
},
{
"path": "omp_web/src/components/OmpDatePicker/index.js",
"content": "import { DatePicker } from \"antd\";\nimport moment from \"moment\";\n\nconst OmpDatePicker = ({...props}) => {\n return (\n omp
\n // \n {props.children}\n
\n )\n}\n\nexport default OmpOperationWrapper"
},
{
"path": "omp_web/src/components/OmpOperationWrapper/index.module.less",
"content": ".OmpOperationWrapper {\n //background-color: red;\n height: 54px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}"
},
{
"path": "omp_web/src/components/OmpProgress/index.js",
"content": "import ReactEcharts from \"echarts-for-react\";\n\nconst OmpProgress = ({ trafficWay, percent }) => {\n // 判断trafficWay的每一项是否都是0\n let isAllNull = trafficWay.filter((i) => i.value !== 0);\n //console.log(isAllNull);\n if (isAllNull.length == 0) {\n trafficWay[2].value = 1;\n }\n\n var data = [];\n var color = [\n \"#ee686e\",\n \"#ffbe40\",\n \"rgb(84, 187, 166)\",\n \"#df7153\",\n \"#fad83a\",\n \"#c490bf\",\n \"#1fe15f\",\n \"#3087d6\",\n \"#4be1ff\",\n ];\n for (var i = 0; i < trafficWay.length; i++) {\n data.push(\n {\n value: trafficWay[i].value,\n name: trafficWay[i].name,\n itemStyle: {\n normal: {\n borderWidth: 4,\n //shadowBlur: 2,\n borderColor: color[i],\n //shadowColor: color[i],\n },\n },\n },\n {\n value: 0,\n name: \"\",\n itemStyle: {\n normal: {\n label: {\n show: false,\n },\n labelLine: {\n show: false,\n },\n color: percent == 0 ? \"#f45966\":\"rgba(0, 0, 0, 0)\",\n borderColor: percent == 0 ? \"#f45966\":\"rgba(0, 0, 0, 0)\",\n borderWidth: 4,\n },\n },\n }\n );\n }\n var seriesOption = [\n {\n name: \"\",\n type: \"pie\",\n clockWise: false,\n radius: [\"75%\", \"77%\"],\n center: [\"50%\", \"50%\"],\n hoverAnimation: false,\n itemStyle: {\n normal: {\n label: {\n show: false,\n position: \"outside\",\n color: \"#ddd\",\n // formatter: function (params) {\n // var percent = 0;\n // var total = 0;\n // for (var i = 0; i < trafficWay.length; i++) {\n // total += trafficWay[i].value;\n // }\n // percent = ((params.value / total) * 100).toFixed(0);\n // if (params.name !== \"\") {\n // return (\n // \"交通方式：\" +\n // params.name +\n // \"\\n\" +\n // \"\\n\" +\n // \"占百分比：\" +\n // percent +\n // \"%\"\n // );\n // } else {\n // return \"\";\n // }\n // },\n },\n labelLine: {\n length: 30,\n length2: 100,\n show: false,\n color: \"#00ffff\",\n },\n },\n },\n data: data,\n },\n ];\n const option = {\n // backgroundColor: '#0A2E5D',\n color: color,\n title: {\n text: `${percent == Infinity ? 100 : isNaN(percent) ? 0 : percent}%`,\n top: \"37%\",\n left: \"47%\",\n textAlign: \"center\",\n textStyle: {\n color:\n `${percent == Infinity ? 100 : isNaN(percent) ? 0 : percent}%` ==\n \"100%\"\n ? \"rgb(84, 187, 166)\"\n : \"rgba(0, 0, 0, 0.65)\",\n fontSize: 18,\n fontWeight: \"400\",\n },\n },\n graphic: {\n elements: [\n {\n type: \"image\",\n z: 3,\n style: {\n // image: img,\n width: 178,\n height: 178,\n },\n left: \"center\",\n top: \"center\",\n position: [100, 100],\n },\n ],\n },\n tooltip: {\n show: false,\n },\n // legend: {\n // icon: \"circle\",\n // orient: \"vertical\",\n // // x: 'left',\n // data: [\n // \"物理机\",\n // \"宿主机\",\n // \"云主机\",\n // \"网络设备\",\n // \"安全设备\",\n // \"应用系统\",\n // \"存储设备\",\n // \"网络服务\",\n // \"终端PC\",\n // ],\n // right: \"5%\",\n // top: \"center\",\n // align: \"left\",\n // textStyle: {\n // color: \"black\",\n // },\n // itemGap: 20,\n // // formatter: function(name) {\n // // let target,percent;\n // // for (let i = 0; i < dataPie.length; i++) {\n // // if (dataPie[i].name === name) {\n // // target = dataPie[i].value;\n // // percent = ((target/total)*100).toFixed(2);\n // // }\n // // }\n // // let arr = [ percent+'% '+' {yellow|' + target + '}', ' {blue|' + name + '}' ];\n // // return arr.join(\"\\n\")\n\n // // }\n // },\n toolbox: {\n show: false,\n },\n series: seriesOption,\n };\n return (\n \n \n {currentData.map((item, idx) => {\n return (\n {\n item.frontendStatus == \"abnormal\"\n ? props.criticalLink(item)\n : props.link(item);\n }}\n >\n \n \n \n
\n );\n })}\n \n ) : (\n \n {title}\n
\n {currentData.length > 0 ? (\n \n {\n if (e.target.checked) {\n setCurrentData(\n sortData(\n currentData.concat(\n allData.filter(\n (i) =>\n i.frontendStatus == \"abnormal\" ||\n i.frontendStatus == \"warning\"\n )\n )\n )\n );\n } else {\n setCurrentData(\n sortData(\n currentData.filter(\n (i) =>\n i.frontendStatus !== \"abnormal\" ||\n i.frontendStatus == \"warning\"\n )\n )\n );\n }\n }}\n >\n 异常\n \n {\n if (e.target.checked) {\n setCurrentData(\n sortData(\n currentData.concat(\n allData.filter((i) => i.frontendStatus == \"normal\")\n )\n )\n );\n } else {\n setCurrentData(\n sortData(\n currentData.filter((i) => i.frontendStatus !== \"normal\")\n )\n );\n }\n }}\n >\n 正常\n \n\n {\n if (e.target.checked) {\n setCurrentData(\n sortData(\n currentData.concat(\n allData.filter((i) => i.frontendStatus == \"noMonitored\")\n )\n )\n );\n } else {\n setCurrentData(\n sortData(\n currentData.filter(\n (i) => i.frontendStatus !== \"noMonitored\"\n )\n )\n );\n }\n }}\n >\n 未监控\n \n\n setIsShowAll(!isShowAll)}\n >\n {isShowAll ? \"收起\" : \"展开\"}\n \n
\n {item.instance_name || item.ip}
\n \n 暂无数据
\n )}\n \n );\n}\n\nexport default OmpStateBlock;\n\nfunction popContent(item) {\n return (\n \n {item.info.map((i) => (\n
\n );\n}\n"
},
{
"path": "omp_web/src/components/OmpStateBlock/index.module.less",
"content": ".homepageWrapper {\n padding: 15px;\n\n .pageBlock {\n .blockTitle {\n font-weight: 500;\n //color: #333;\n margin-bottom: 10px;\n }\n }\n}\n\n.blockContent {\n //border: 1px solid #DCDEE5;\n background-color: #fff;\n border-radius: 5px;\n padding: 10px;\n margin-bottom: 15px;\n}\n\n.blockOverviewItem {\n flex: 1;\n display: flex;\n justify-content: center;\n flex-flow: row nowrap;\n padding: 10px;\n margin-right: 20px;\n border-radius: 5px;\n\n & > div:nth-child(1) {\n margin-right: 15px;\n align-self: center;\n & > div:nth-child(1) {\n width: 80px !important;\n height: 80px !important;\n font-size: 16px !important;\n }\n }\n\n .progressInfo {\n color: #333;\n & > div:nth-child(1) {\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 15px;\n }\n & > div:nth-child(2) {\n margin-bottom: 10px;\n }\n }\n}\n\n.checkboxGroup {\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-bottom: 10px;\n .blockTitle {\n font-weight: 500;\n }\n div {\n display: flex;\n }\n}\n\n.blockItemWrapper {\n display: flex;\n flex-flow: row wrap;\n padding-top: 5px;\n //justify-content: space-between;\n}\n\n// .blockItemWrapper>div:last-child {\n// flex:1\n// }\n\n.stateButton:hover {\n top: -2px;\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);\n color: black !important;\n // color: white;\n // /* 设置字体阴影 */\n // text-shadow: 1px 1px 2px #35cac2;\n // /* 改变按钮边界 */\n // border: 1px solid #35cac2;\n /* 设置按钮阴影 */\n //box-shadow: 5px 5px 50px rgba(255, 255, 255, 0.4) inset;\n}\n\n.stateButton {\n position: relative;\n top: 0px;\n color: rgba(0, 0, 0, 0.65);\n transition: all 0.2s ease-in-out;\n width: 174px;\n margin-right: 10px;\n margin-bottom: 10px;\n font-size: 13px;\n & > div {\n max-width: 145px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n.popContent {\n & > span {\n font-size: 13px;\n margin-right: 15px;\n }\n\n .ip {\n //display: inline-flex;\n // todo 这个地方最大宽度不确定，此处为ip地址最大长度，但会导致ip地址较短时页面空一大块\n // /min-width: 60px;\n }\n}\n\n.dropBtn {\n height: 24px;\n font-size: 12px;\n // position: relative;\n // top: -2px;\n}\n\n.emptyTable {\n background-color: #fff;\n border-radius: 5px;\n padding: 10px;\n margin-bottom: 15px;\n height: 20px;\n font-size: 12px;\n color: rgba(0, 0, 0, 0.25);\n line-height: 0px;\n text-align: center;\n //overflow-y: scroll\n}\n"
},
{
"path": "omp_web/src/components/OmpTable/components/OmpTableFilter.js",
"content": "import { Dropdown, Menu } from \"antd\";\nimport { FilterFilled } from \"@ant-design/icons\";\nimport { useState } from \"react\";\n\nconst OmpTableFilter = ({ dataIndex, filterMenuList, queryRequest, initfilter }) => {\n // 表格的筛选控制器\n const [filterControl, setFilterControl] = useState(initfilter);\n\n // 展开菜单是否\n const [dropDownIsOpen, setDropDownIsOpen] = useState(false);\n\n return (\n \n {i.ip && (\n \n {i.ip}\n \n )}\n \n {i.date ? (\n {i.date}\n ) : (\n \n {item.frontendStatus === \"noMonitored\" ? \"未监控\" : \"正常\"}\n \n )}\n \n {i.describe && (\n \n {i.describe.length > 100\n ? i.describe.slice(0, 100) + \"...\"\n : i.describe.slice(0, 100)}\n \n )}\n
\n ))}\n \n
\n ),\n };\n }\n\n // 筛选功能\n if (item.usefilter) {\n return {\n ...item,\n filterIcon: () => {\n return (\n \n 
\n
\n {!collapsed && (\n \n {headerLink.map((item, idx) => {\n return (\n {\n if (!disabled || item.title === \"快速部署\") {\n if (item.title === \"监控平台\") {\n window.open(\n \"/proxy/v1/grafana/d/XrwAXz_Mz/mian-ban-lie-biao\"\n );\n } else {\n history.push(item.path);\n }\n }\n }}\n >\n {item.title}\n
\n );\n })}\n \n \n \n
\n {!collapsed && (\n \n \n \n {userInfo?.username}{\" \"}\n
\n \n \n
\n );\n },\n },\n ];\n};\n\nexport default getColumnsConfig;\n"
},
{
"path": "omp_web/src/pages/AlarmLog/index.js",
"content": "import {\n OmpContentWrapper,\n OmpTable,\n OmpSelect,\n OmpDatePicker,\n OmpDrawer,\n} from \"@/components\";\nimport { Button, Select, message, Input } from \"antd\";\nimport { useState, useEffect } from \"react\";\nimport { handleResponse, _idxInit } from \"@/utils/utils\";\nimport { fetchGet, fetchPost } from \"@/utils/request\";\nimport { apiRequest } from \"@/config/requestApi\";\nimport getColumnsConfig from \"./config/columns\";\nimport { SearchOutlined } from \"@ant-design/icons\";\nimport moment from \"moment\";\nimport { useHistory, useLocation } from \"react-router-dom\";\n\nconst AlarmLog = () => {\n const history = useHistory();\n\n const location = useLocation();\n\n const initTime = location.state?.time;\n\n const [time, setTime] = useState([]);\n\n const initIp = location.state?.ip;\n\n const [loading, setLoading] = useState(false);\n\n const [searchLoading, setSearchLoading] = useState(false);\n\n //选中的数据\n const [checkedList, setCheckedList] = useState([]);\n\n //table表格数据\n const [dataSource, setDataSource] = useState([]);\n const [ipListSource, setIpListSource] = useState([]);\n\n const [selectValue, setSelectValue] = useState(initIp);\n\n const [instanceSelectValue, setInstanceSelectValue] = useState(\n location.state?.alert_instance_name\n );\n\n const [pagination, setPagination] = useState({\n current: 1,\n pageSize: 10,\n total: 0,\n ordering: \"\",\n searchParams: {},\n });\n\n // 筛选label\n const [labelControl, setLabelControl] = useState(\n initIp ? \"ip\" : \"instance_name\"\n );\n\n const [showIframe, setShowIframe] = useState({});\n\n function fetchData(\n pageParams = { current: 1, pageSize: 10 },\n searchParams = {},\n ordering\n ) {\n setLoading(true);\n fetchGet(apiRequest.Alert.listAlert, {\n params: {\n page: pageParams.current,\n size: pageParams.pageSize,\n ordering: ordering ? ordering : null,\n ...searchParams,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n setDataSource(res.data.results);\n setPagination({\n ...pagination,\n total: res.data.count,\n pageSize: pageParams.pageSize,\n current: pageParams.current,\n ordering: ordering,\n searchParams: searchParams,\n });\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n location.state = {};\n setLoading(false);\n fetchIPlist();\n //fetchNameList();\n });\n }\n\n const fetchIPlist = () => {\n setSearchLoading(true);\n fetchGet(apiRequest.machineManagement.ipList)\n .then((res) => {\n handleResponse(res, (res) => {\n setIpListSource(res.data);\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setSearchLoading(false);\n });\n };\n\n const updateAlertRead = (ids = []) => {\n setLoading(true);\n fetchPost(apiRequest.Alert.updateAlert, {\n body: {\n ids: ids,\n is_read: 1,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n message.success(\"已读成功\");\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setCheckedList([]);\n setLoading(false);\n fetchData(\n { current: pagination.current, pageSize: pagination.pageSize },\n { ...pagination.searchParams },\n pagination.ordering\n );\n });\n };\n\n useEffect(() => {\n if (initTime) {\n setTime([moment(initTime), moment(initTime)]);\n fetchData(pagination, {\n alert_host_ip: location.state?.ip,\n alert_instance_name: location.state?.alert_instance_name,\n start_alert_time: moment(initTime).format(\"YYYY-MM-DD HH:mm:ss\"),\n end_alert_time: moment(initTime).format(\"YYYY-MM-DD HH:mm:ss\"),\n });\n } else {\n let currentTime = moment();\n let aMonthAgoTime = moment().subtract(1, \"months\");\n console.log(currentTime, aMonthAgoTime);\n setTime([aMonthAgoTime, currentTime]);\n fetchData(pagination, {\n alert_host_ip: location.state?.ip,\n alert_instance_name: location.state?.alert_instance_name,\n start_alert_time: aMonthAgoTime.format(\"YYYY-MM-DD HH:mm:ss\"),\n end_alert_time: currentTime.format(\"YYYY-MM-DD HH:mm:ss\"),\n });\n }\n }, []);\n\n return (\n \n {record.monitor_path ? (\n {\n record.is_read == 0 && updateAlertRead([record.id]);\n setShowIframe({\n isOpen: true,\n src: record.monitor_path,\n record: {\n ...record,\n ip: record.alert_host_ip,\n },\n isLog: false,\n });\n }}\n >\n 监控\n \n ) : (\n 监控\n )}\n\n {record.alert_type == \"host\" ? (\n \n history.push({\n pathname: \"/status-patrol/patrol-inspection-record\",\n })\n }\n >\n 分析\n \n ) : record.monitor_log ? (\n {\n record.is_read == 0 && updateAlertRead([record.id]);\n setShowIframe({\n isOpen: true,\n src: record.monitor_log,\n record: {\n ...record,\n ip: record.alert_host_ip,\n },\n isLog: true,\n });\n }}\n >\n 日志\n \n ) : (\n \n 日志\n \n )}\n
\n \n {\n let ids = checkedList.map((item) => item.id);\n updateAlertRead(ids);\n }}\n >\n 批量已读\n \n
\n \n {\n if (!e) {\n setTime([]);\n fetchData(\n {\n current: 1,\n pageSize: pagination.pageSize,\n },\n {\n ...pagination.searchParams,\n start_alert_time: null,\n end_alert_time: null,\n },\n pagination.ordering\n );\n } else {\n let result = e.filter((item) => item);\n if (result.length == 2) {\n setTime([moment(e[0]), moment(e[1])]);\n fetchData(\n {\n current: 1,\n pageSize: pagination.pageSize,\n },\n {\n ...pagination.searchParams,\n start_alert_time: moment(e[0]).format(\n \"YYYY-MM-DD HH:mm:ss\"\n ),\n end_alert_time: moment(e[1]).format(\n \"YYYY-MM-DD HH:mm:ss\"\n ),\n },\n pagination.ordering\n );\n }\n }\n }}\n value={time}\n />\n
\n \n \n {\n setLabelControl(e);\n fetchData(\n {\n current: 1,\n pageSize: pagination.pageSize,\n },\n {\n ...pagination.searchParams,\n alert_host_ip: null,\n alert_instance_name: null,\n },\n pagination.ordering\n );\n setInstanceSelectValue();\n setSelectValue();\n }}\n >\n IP地址 \n 实例名称 \n \n {labelControl === \"ip\" && (\n {\n fetchData(\n {\n current: 1,\n pageSize: pagination.pageSize,\n },\n { ...pagination.searchParams, alert_host_ip: value },\n pagination.ordering\n );\n }}\n pagination={pagination}\n />\n )}\n {labelControl === \"instance_name\" && (\n {\n setInstanceSelectValue(e.target.value);\n if (!e.target.value) {\n fetchData(\n {\n current: 1,\n pageSize: pagination.pageSize,\n },\n {\n ...pagination.searchParams,\n alert_instance_name: null,\n },\n pagination.ordering\n );\n }\n }}\n onBlur={() => {\n if (instanceSelectValue) {\n fetchData(\n {\n current: 1,\n pageSize: pagination.pageSize,\n },\n {\n ...pagination.searchParams,\n alert_instance_name: instanceSelectValue,\n },\n pagination.ordering\n );\n }\n }}\n onPressEnter={() => {\n fetchData(\n {\n current: 1,\n pageSize: pagination.pageSize,\n },\n {\n ...pagination.searchParams,\n alert_instance_name: instanceSelectValue,\n },\n pagination.ordering\n );\n }}\n suffix={\n !instanceSelectValue && (\n \n\n {\n // dispatch(refreshTime());\n fetchData(\n {\n current: pagination.current,\n pageSize: pagination.pageSize,\n },\n { ...pagination.searchParams },\n pagination.ordering\n );\n }}\n >\n 刷新\n \n
\n 已选中 {checkedList.length} 条
\n\n 共计{\" \"}\n \n {pagination.total}\n {\" \"}\n 条\n
\n \n ),\n ...pagination,\n }}\n rowKey={(record) => record.id}\n checkedState={[checkedList, setCheckedList]}\n />\n \n\n \n
\n\n {/* 第一步 */}\n {stepNum == 0 && (\n <>\n \n {\n dispatch(getTabKeyChangeAction(\"service\"));\n history?.goBack();\n // history?.push({\n // pathname: `/application_management/app_store`,\n // });\n }}\n />\n {name}\n
\n \n \n \n
\n \n \n \n
\n \n\n {/* 服务信息 */}\n 无
\n ) : (\n currentproDependenceData?.pro_services?.map((item) => {\n return (\n 无
\n ) : (\n currentproDependenceData?.dependence_services_info?.map(\n (item) => (\n \n \n \n {currentproDependenceData?.pro_services[0]?.app_install_args?.map(\n (item) => {\n return (\n {item.name}}\n name={`install|${\n currentproDependenceData?.pro_services[0]?.name\n }|${JSON.stringify({\n name: item.name,\n key: item.key,\n dir_key: item.dir_key,\n })}`}\n rules={[\n {\n required: true,\n message: `请填写${item.name}`,\n },\n ]}\n >\n \n {item.name}}\n name={`port|${\n currentproDependenceData?.pro_services[0]?.name\n }|${JSON.stringify({\n name: item.name,\n key: item.key,\n //dir_key: item.dir_key,\n })}`}\n rules={[\n {\n required: true,\n message: `请填写${item.name}`,\n },\n ]}\n >\n \n
\n \n \n\n {/* 展示jdk */}\n {showJdk ? (\n <>\n \n \n \n {\n const IpArr = e.split(\".\");\n jdkHandleInitData(\n currentproDependenceData?.dependence_services_info[0],\n e\n );\n form.setFieldsValue({\n instanceName: `${\n currentproDependenceData?.pro_services[0]?.name\n }-${IpArr[IpArr.length - 2]}-${\n IpArr[IpArr.length - 1]\n }`,\n });\n }}\n >\n {ipListSource?.map((item) => (\n \n {item}\n \n ))}\n \n \n \n \n \n \n {\n setIsOpen({\n ...isOpen,\n [currentproDependenceData?.pro_services[0]?.name]:\n !isOpen[\n currentproDependenceData?.pro_services[0]?.name\n ],\n });\n // setIsDetailOpen({\n // ...isDetailOpen,\n // [item.ip]: !isDetailOpen[item.ip],\n // });\n }}\n >\n
\n {currentproDependenceData?.dependence_services_info[0]?.name} 服务的安装包不存在 ！
\n )} */}\n\n 分布主机数量: 1台\n
\n \n {\n setStepNum(0);\n }}\n >\n 上一步\n \n {\n // 先出发表单校验\n form\n .validateFields()\n .then((values) => {\n setLoading(true);\n setStep2Data(form.getFieldsValue());\n let st2 = form.getFieldsValue();\n //setStepNum(2);\n\n let parameterCreate = (\n step2Data,\n type,\n length = 3,\n type2\n ) => {\n console.log(step2Data, type, (length = 3), type2);\n let arr = [];\n Object.keys(step2Data).map((key) => {\n if (\n key.split(\"|\")[0] == type &&\n key.split(\"|\").length == length &&\n key.split(\"|\")[1] == type2\n ) {\n let data = JSON.parse(key.split(\"|\")[length - 1]);\n arr.push({\n ...data,\n default: step2Data[key],\n });\n }\n });\n return arr;\n };\n\n const analysisJdk = (st2, type, length = 3, type2) => {\n let result = {};\n for (const key in st2) {\n let keyArr = key.split(\"|\");\n if (keyArr.length == length) {\n if (keyArr[0] == type && keyArr[1] == type2) {\n result[keyArr[2]] = st2[key];\n }\n }\n }\n return result;\n };\n\n let installArr = install_servicesRef.current;\n let app_install_args = install_servicesRef.current[0]\n ? analysisJdk(\n st2,\n \"install\",\n 3,\n install_servicesRef.current[0]?.name\n )\n : {};\n\n let ipAndInstanceName = {};\n Object.keys(st2).map((o) => {\n let arr = o.split(\"|\");\n if (arr.length == 2 && arr[0] == installArr[0]?.name) {\n ipAndInstanceName[arr[1]] = st2[o];\n }\n });\n\n if (installArr.length > 0) {\n install_servicesRef.current[0].ip =\n ipAndInstanceName.ip;\n install_servicesRef.current[0].service_instance_name =\n ipAndInstanceName.instanceName;\n install_servicesRef.current[0].app_install_args =\n install_servicesRef.current[0]?.app_install_args?.map(\n (item) => {\n let key = JSON.stringify({\n name: item.name,\n key: item.key,\n dir_key: item.dir_key,\n });\n return {\n ...item,\n default: app_install_args[key],\n };\n }\n );\n install_servicesRef.current[0].app_port = [];\n }\n\n use_exist_servicesRef.current =\n use_exist_servicesRef.current.map((item) => {\n return {\n ...item,\n type: \"single\",\n };\n });\n\n let data = {\n install_type: 0,\n use_exist_services: use_exist_servicesRef.current,\n install_services: [\n {\n name: currentproDependenceData?.pro_services[0]\n ?.name,\n version: versionCurrent,\n ip: st2.ip,\n app_install_args: parameterCreate(\n st2,\n \"install\",\n 3,\n currentproDependenceData?.pro_services[0]?.name\n ),\n app_port: parameterCreate(\n st2,\n \"port\",\n 3,\n currentproDependenceData?.pro_services[0]?.name\n ),\n service_instance_name: st2.instanceName,\n //deploy_mode: JSON.parse(step1Data.clusterMode),\n },\n ...install_servicesRef.current,\n ],\n };\n console.log(data);\n //return;\n fetchPost(apiRequest.appStore.executeInstall, {\n body: {\n ...data,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n if (res.data && res.data.install_services) {\n if (!res.data.is_valid_flag) {\n // 打开全部的展开栏\n let isOpenCopy = JSON.parse(\n JSON.stringify(isOpen)\n );\n for (const key in isOpenCopy) {\n isOpenCopy[key] = true;\n }\n setIsOpen({\n ...isOpenCopy,\n [currentproDependenceData\n ?.dependence_services_info[0]?.name]: true,\n });\n\n res.data.install_services?.map((item, idx) => {\n if (\n item.check_flag == false &&\n item.check_msg\n ) {\n if (idx == 0) {\n form.setFields([\n {\n name: \"instanceName\",\n errors: [\n res.data.install_services[0]\n .check_msg,\n ],\n },\n ]);\n } else {\n form.setFields([\n {\n name: `${item.name}|instanceName`,\n errors: [item.check_msg],\n },\n ]);\n }\n }\n item.app_port?.map((i) => {\n if (i.check_flag == false) {\n form.setFields([\n {\n name: `port|${\n item.name\n }|${JSON.stringify({\n name: i.name,\n key: i.key,\n })}`,\n errors: [i.check_msg],\n },\n ]);\n }\n });\n item.app_install_args?.map((i) => {\n if (i.check_flag == false) {\n form.setFields([\n {\n name: `install|${\n item.name\n }|${JSON.stringify({\n name: i.name,\n key: i.key,\n dir_key: i.dir_key,\n })}`,\n errors: [i.check_msg],\n },\n ]);\n }\n });\n });\n } else {\n // 后端校验通过\n setVPassedresData(res.data);\n queryInstallationInfo(res.data.operation_uuid);\n setStepNum(2);\n }\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n })\n .catch((errorInfo) => {\n console.log(errorInfo);\n let isOpenCopy = JSON.parse(JSON.stringify(isOpen));\n for (const key in isOpenCopy) {\n isOpenCopy[key] = true;\n }\n setIsOpen({\n ...isOpenCopy,\n });\n });\n }}\n >\n 开始安装\n \n
\n \n \n )}\n {stepNum == 2 && (\n <>\n {step3Data?.detail_lst?.map((item) => {\n return (\n \n {step3Data.install_status_msg}{\" \"}\n {(step3Data.install_status == 0 ||\n step3Data.install_status == 1) && (\n
\n \n {\n history.push(\"/application_management/service_management\");\n }}\n >\n 完成\n \n
\n \n \n )}\n \n );\n};\n\nexport default ApplicationInstallation;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/BatchInstallationModal.js",
"content": "import { Button, Modal, Select, Switch } from \"antd\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { CopyOutlined } from \"@ant-design/icons\";\n//import BMF from \"browser-md5-file\";\nimport { fetchPost } from \"@/utils/request\";\nimport { apiRequest } from \"@/config/requestApi\";\nimport { handleResponse } from \"@/utils/utils\";\nimport { OmpTable } from \"@/components\";\nimport { useHistory } from \"react-router-dom\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport { getStep1ChangeAction } from \"./Installation/store/actionsCreators\";\nimport { getUniqueKeyChangeAction } from \"../store/actionsCreators\";\n\nconst BatchInstallationModal = ({\n bIModalVisibility,\n setBIModalVisibility,\n dataSource,\n installTitle,\n initLoading,\n}) => {\n const uniqueKey = useSelector((state) => state.appStore.uniqueKey);\n\n const reduxDispatch = useDispatch();\n\n const [loading, setLoading] = useState(false);\n\n const history = useHistory();\n\n //选中的数据\n const [checkedList, setCheckedList] = useState([]);\n // console.log(checkedList)\n //应用服务选择的版本号\n const versionInfo = useRef({});\n\n const columns = [\n {\n title: \"名称\",\n key: \"name\",\n dataIndex: \"name\",\n align: \"center\",\n ellipsis: true,\n width: 80,\n render: (text, record) => {\n return text;\n },\n },\n {\n title: \"版本\",\n key: \"version\",\n dataIndex: \"version\",\n align: \"center\",\n ellipsis: true,\n width: 120,\n render: (text, record) => {\n return (\n \n \n
\n \n {\n return record.name;\n }}\n checkedState={[checkedList, setCheckedList]}\n pagination={false}\n notSelectable={(record) => ({\n // is_continue的不能选中\n disabled: !record.is_continue,\n })}\n rowSelection={{\n selectedRowKeys: checkedList?.map((item) => item?.name),\n }}\n />\n
\n \n 高可用\n {\n setHighAvailabilityCheck(e);\n }}\n />\n
\n \n
\n \n 已选择 {checkedList.length} 个\n
\n 共 {dataSource.length} 个
\n \n \n
\n\n {/* 第一步 */}\n {stepNum == 0 && (\n <>\n \n {\n history?.goBack();\n // history?.push({\n // pathname: `/application_management/app_store`,\n // });\n }}\n />\n {name}\n
\n \n \n \n
\n \n \n \n
\n \n\n 无
\n ) : (\n currentAppDependenceData?.app_dependence?.map((item) => (\n \n \n \n {currentAppDependenceData?.app_install_args?.map((item) => {\n return (\n {item.name}}\n name={`install|${\n currentAppDependenceData?.app_name\n }|${JSON.stringify({\n name: item.name,\n key: item.key,\n dir_key: item.dir_key,\n })}`}\n rules={[\n {\n required: true,\n message: `请填写${item.name}`,\n },\n ]}\n >\n \n {item.name}}\n name={`port|${\n currentAppDependenceData?.app_name\n }|${JSON.stringify({\n name: item.name,\n key: item.key,\n //dir_key: item.dir_key,\n })}`}\n rules={[\n {\n required: true,\n message: `请填写${item.name}`,\n },\n ]}\n >\n \n
\n \n \n {/* 渲染jdk */}\n {showJdk ? (\n <>\n {currentAppDependenceData?.app_dependence?.map((item) => {\n return (\n \n \n \n {\n const IpArr = e.split(\".\");\n jdkHandleInitData(\n currentAppDependenceData?.app_dependence,\n e\n );\n form.setFieldsValue({\n instanceName: `${name}-${IpArr[IpArr.length - 2]}-${\n IpArr[IpArr.length - 1]\n }`,\n });\n }}\n >\n {ipListSource?.map((item) => (\n \n {item}\n \n ))}\n \n \n \n \n \n \n {\n setIsOpen({\n ...isOpen,\n [name]: !isOpen[name],\n });\n // setIsDetailOpen({\n // ...isDetailOpen,\n // [item.ip]: !isDetailOpen[item.ip],\n // });\n }}\n >\n
\n\n \n {item.name} 服务的安装包不存在 ！\n
\n )} */}\n\n 分布主机数量: 1台\n
\n \n {\n setStepNum(0);\n }}\n >\n 上一步\n \n {\n // 先出发表单校验\n form\n .validateFields()\n .then((values) => {\n setLoading(true);\n setStep2Data(form.getFieldsValue());\n let st2 = form.getFieldsValue();\n //setStepNum(2);\n\n let parameterCreate = (\n step2Data,\n type,\n length = 3,\n type2\n ) => {\n let arr = [];\n Object.keys(step2Data)?.map((key) => {\n if (\n key.split(\"|\")[0] == type &&\n key.split(\"|\").length == length &&\n key.split(\"|\")[1] == type2\n ) {\n let data = JSON.parse(key.split(\"|\")[length - 1]);\n arr.push({\n ...data,\n default: step2Data[key],\n });\n }\n });\n return arr;\n };\n\n const analysisJdk = (st2, type, length = 3, type2) => {\n let result = {};\n for (const key in st2) {\n let keyArr = key.split(\"|\");\n if (keyArr.length == length) {\n if (keyArr[0] == type && keyArr[1] == type2) {\n result[keyArr[2]] = st2[key];\n }\n }\n }\n return result;\n };\n\n let installArr = install_servicesRef.current;\n let app_install_args = install_servicesRef.current[0]\n ? analysisJdk(\n st2,\n \"install\",\n 3,\n install_servicesRef.current[0].name\n )\n : {};\n\n let ipAndInstanceName = {};\n Object.keys(st2)?.map((o) => {\n let arr = o.split(\"|\");\n if (arr.length == 2 && arr[0] == installArr[0]?.name) {\n ipAndInstanceName[arr[1]] = st2[o];\n }\n });\n\n if (installArr.length > 0) {\n install_servicesRef.current[0].ip =\n ipAndInstanceName.ip;\n install_servicesRef.current[0].service_instance_name =\n ipAndInstanceName.instanceName;\n install_servicesRef.current[0].app_install_args =\n install_servicesRef.current[0]?.app_install_args?.map(\n (item) => {\n let key = JSON.stringify({\n name: item.name,\n key: item.key,\n dir_key: item.dir_key,\n });\n return {\n ...item,\n default: app_install_args[key],\n };\n }\n );\n install_servicesRef.current[0].app_port = [];\n }\n\n use_exist_servicesRef.current =\n use_exist_servicesRef.current?.map((item) => {\n return {\n ...item,\n type: \"single\",\n };\n });\n\n let data = {\n install_type: 0,\n use_exist_services: use_exist_servicesRef.current,\n install_services: [\n {\n name: name,\n version: versionCurrent,\n ip: st2.ip,\n app_install_args: parameterCreate(\n st2,\n \"install\",\n 3,\n currentAppDependenceData?.app_name\n ),\n app_port: parameterCreate(\n st2,\n \"port\",\n 3,\n currentAppDependenceData?.app_name\n ),\n service_instance_name: st2.instanceName,\n deploy_mode: JSON.parse(step1Data.clusterMode),\n },\n ...install_servicesRef.current,\n ],\n };\n //return;\n fetchPost(apiRequest.appStore.executeInstall, {\n body: {\n ...data,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n if (res.data && res.data.install_services) {\n if (!res.data.is_valid_flag) {\n // 打开全部的展开栏\n let isOpenCopy = JSON.parse(\n JSON.stringify(isOpen)\n );\n console.log(isOpenCopy);\n for (const key in isOpenCopy) {\n isOpenCopy[key] = true;\n }\n console.log(isOpenCopy);\n setIsOpen({\n ...isOpenCopy,\n [currentAppDependenceData?.app_dependence[0]\n ?.name]: true,\n });\n\n if (\n res.data.use_exist_services &&\n res.data.use_exist_services.length > 0\n ) {\n if (\n res.data.use_exist_services[0].check_flag ==\n false\n ) {\n message.warn(\n res.data.use_exist_services[0].check_msg\n );\n //setProcessContinue(false)\n }\n }\n\n res.data.install_services?.map((item, idx) => {\n if (\n item.check_flag == false &&\n item.check_msg\n ) {\n if (idx == 0) {\n form.setFields([\n {\n name: \"instanceName\",\n errors: [\n res.data.install_services[0]\n .check_msg,\n ],\n },\n ]);\n } else {\n form.setFields([\n {\n name: `${item.name}|instanceName`,\n errors: [item.check_msg],\n },\n ]);\n }\n }\n item.app_port?.map((i) => {\n if (i.check_flag == false) {\n form.setFields([\n {\n name: `port|${\n item.name\n }|${JSON.stringify({\n name: i.name,\n key: i.key,\n })}`,\n errors: [i.check_msg],\n },\n ]);\n }\n });\n item.app_install_args?.map((i) => {\n if (i.check_flag == false) {\n form.setFields([\n {\n name: `install|${\n item.name\n }|${JSON.stringify({\n name: i.name,\n key: i.key,\n dir_key: i.dir_key,\n })}`,\n errors: [i.check_msg],\n },\n ]);\n }\n });\n });\n } else {\n // 后端校验通过\n setVPassedresData(res.data);\n queryInstallationInfo(res.data.operation_uuid);\n setStepNum(2);\n }\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n })\n .catch((errorInfo) => {\n let isOpenCopy = JSON.parse(JSON.stringify(isOpen));\n for (const key in isOpenCopy) {\n isOpenCopy[key] = true;\n }\n setIsOpen({\n ...isOpenCopy,\n });\n });\n }}\n >\n 开始安装\n \n
\n \n \n )}\n {stepNum == 2 && (\n <>\n {step3Data?.detail_lst?.map((item) => {\n return (\n \n {step3Data.install_status_msg}{\" \"}\n {(step3Data.install_status == 0 ||\n step3Data.install_status == 1) && (\n
\n \n {\n history.push(\"/application_management/service_management\");\n }}\n >\n 完成\n \n
\n \n \n )}\n \n );\n};\n\nexport default ComponentInstallation;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/DeleteServerModal.js",
"content": "import { Modal, Cascader, message } from \"antd\";\nimport { useEffect, useState } from \"react\";\n//import BMF from \"browser-md5-file\";\nimport { fetchPost, fetchGet } from \"@/utils/request\";\nimport { apiRequest } from \"@/config/requestApi\";\nimport { handleResponse } from \"@/utils/utils\";\n\nconst DeleteServerModal = ({\n deleteServerVisibility,\n setDeleteServerVisibility,\n tabKey,\n refresh,\n}) => {\n const [loading, setLoading] = useState(false);\n\n const [options, setOptions] = useState([]);\n\n const [resApp, setResApp] = useState([]);\n\n const [initData, setInitData] = useState([]);\n\n // 获取可删除选项\n const queryData = () => {\n setLoading(true);\n fetchGet(apiRequest.appStore.deleteServer, {\n params: {\n type: tabKey === \"component\" ? \"component\" : \"product\",\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n setInitData(res.data.data);\n setOptions(\n res.data.data.map((e) => {\n return {\n label: (\n <>\n {e.name.includes(\"|\") ? (\n <>\n {e.name.split(\"|\")[0]}\n \n {e.name.split(\"|\")[1]}\n \n \n ) : (\n e.name\n )}\n \n ),\n value: e.name,\n children: e.versions.map((i) => {\n return {\n label: (\n <>\n {i.includes(\"|\") ? (\n <>\n {i.split(\"|\")[0]}\n \n {i.split(\"|\")[1]}\n \n \n ) : (\n i\n )}\n \n ),\n value: i,\n };\n }),\n };\n })\n );\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n };\n\n // 删除操作\n const doDelete = () => {\n if (resApp.length === 0) {\n message.info(\"请先选择要删除的服务\");\n return;\n }\n const allList = [];\n const someList = {};\n const resData = [];\n for (let i = 0; i < resApp.length; i++) {\n const e = resApp[i];\n if (e.length === 1) {\n allList.push(e[0]);\n } else {\n if (someList.hasOwnProperty(e[0])) {\n someList[e[0]].push(e[1]);\n } else {\n someList[e[0]] = [e[1]];\n }\n }\n }\n for (let i = 0; i < initData.length; i++) {\n const e = initData[i];\n if (allList.includes(e.name)) {\n resData.push(e);\n } else if (someList.hasOwnProperty(e.name)) {\n resData.push({\n name: e.name,\n versions: someList[e.name],\n });\n }\n }\n setLoading(true);\n fetchPost(apiRequest.appStore.deleteServer, {\n body: {\n type: tabKey === \"component\" ? \"component\" : \"product\",\n data: resData,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n if (res.code === 0) {\n message.success(\"删除成功\");\n setDeleteServerVisibility(false);\n queryData();\n } else {\n message.warning(res.message);\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n };\n\n useEffect(() => {\n queryData();\n }, [tabKey]);\n\n return (\n \n (\n \n {productName ? (\n {`[ ${productName} ]`}\n ) : (\n \"\"\n )}\n {itemData.name}\n {errInfo && (\n {errInfo}\n )}\n \n }\n extra={version}\n key=\"1\"\n className={\"panelItem\"}\n style={{ backgroundColor: \"#f6f6f6\" }}\n >\n \n / 数据分区}\n placeholder=\"请输入安装目录\"\n suffix={\n \n \n }\n />\n \n \n / 数据分区}\n placeholder=\"请输入数据目录\"\n suffix={\n \n \n }\n />\n \n \n / 数据分区}\n placeholder=\"请输入数据目录\"\n suffix={\n \n \n }\n />\n \n \n \n \n \n \n \n \n \n
\n );\n};\n\n// 第一步\nconst Step1 = ({\n setStepNum,\n getServiceData,\n setCheckServiceData,\n setServiceConnectionData,\n}) => {\n const ipArr = Object.keys(getServiceData?.ips || []);\n\n const viewHeight = useSelector((state) => state.layouts.viewSize.height);\n\n // 选中ip数据\n const [getServiceIpArr, setGetServiceIpArr] = useState([]);\n\n // 选中所有ip\n const [selectAllIp, setSelectAllIp] = useState(false);\n\n // 服务数据表单\n const [serviceForm] = Form.useForm();\n\n // 扫描中对话框\n const [ingVisible, setIngVisible] = useState(false);\n\n // 加载\n const [loading, setLoading] = useState(false);\n\n const getPathValue = (name, dirType) => {\n const value = serviceForm.getFieldValue(name + \"-\" + dirType);\n return value !== \"\" ? \"{data_path}\" + value : \"\";\n };\n\n // 服务纳管\n const startGetService = () => {\n setLoading(true);\n setIngVisible(true);\n const serviceData = [...getServiceData.service];\n const resArr = [];\n // 处理服务信息\n for (let i = 0; i < serviceData.length; i++) {\n const element = serviceData[i];\n if (element.hasOwnProperty(\"child\")) {\n const childInfo = {};\n childInfo[element.version[0]] = element.child[element.version[0]].map(\n (i) => {\n return {\n name: i.name,\n version: i.version,\n base_dir: getPathValue(i.name, \"base_dir\"),\n data_dir: getPathValue(i.name, \"data_dir\"),\n log_dir: getPathValue(i.name, \"log_dir\"),\n run_user: serviceForm.getFieldValue(`${i.name}-run_user`),\n service_port: serviceForm.getFieldValue(`${i.name}-service_port`),\n };\n }\n );\n resArr.push({\n name: element.name,\n version: element.version,\n child: childInfo,\n });\n } else {\n resArr.push({\n name: element.name,\n version: element.version,\n base_dir: getPathValue(element.name, \"base_dir\"),\n data_dir: getPathValue(element.name, \"data_dir\"),\n log_dir: getPathValue(element.name, \"log_dir\"),\n run_user: serviceForm.getFieldValue(`${element.name}-run_user`),\n service_port: serviceForm.getFieldValue(\n `${element.name}-service_port`\n ),\n });\n }\n }\n // 处理ip信息\n const ipsRes = {};\n for (const key in getServiceData.ips) {\n if (Object.hasOwnProperty.call(getServiceData.ips, key)) {\n const element = getServiceData.ips[key];\n if (getServiceIpArr.indexOf(key) !== -1) {\n ipsRes[key] = element;\n }\n }\n }\n fetchPost(apiRequest.appStore.appConfCheck, {\n body: {\n data: {\n service: resArr,\n ips: ipsRes,\n is_continue: getServiceData.is_continue,\n },\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n setCheckServiceData(res.data);\n let connectData = {};\n const targetData = res.data.ser_info;\n for (let index = 0; index < targetData.length; index++) {\n const element = targetData[index];\n connectData[element.name] = {\n is_use_exist: element.is_use_exist,\n exist_instance:\n element.exist_instance.length === 0\n ? []\n : [element.exist_instance[0]],\n };\n }\n setServiceConnectionData(connectData);\n setStepNum(1);\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n setIngVisible(false);\n });\n };\n\n return (\n \n \n
\n \n 选择主机 :\n
\n 分布主机: {getServiceIpArr.length} 台\n
\n \n {\n startGetService();\n }}\n >\n 扫描服务\n \n
\n \n\n \n
\n \n \n );\n};\n\n// 第二步\nconst Step2 = ({\n setStepNum,\n getServiceData,\n checkServiceData,\n serviceConnectionData,\n setServiceConnectionData,\n}) => {\n const tableData = checkServiceData?.ser_info;\n\n // 加载\n const [loading, setLoading] = useState(false);\n\n const addService = () => {\n const resSerInfo = [];\n const sourceData = checkServiceData.ser_info;\n for (let index = 0; index < sourceData.length; index++) {\n const element = sourceData[index];\n resSerInfo.push({\n name: element.name,\n error: element.error,\n ip: element.ip,\n is_use_exist: serviceConnectionData[element.name].is_use_exist,\n exist_instance: serviceConnectionData[element.name].exist_instance,\n });\n }\n setLoading(true);\n fetchPost(apiRequest.appStore.appConfCheck, {\n body: {\n data: {\n ser_info: resSerInfo,\n uuid: checkServiceData.uuid,\n },\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n if (res.data.is_error) {\n message.warning(res.data.message);\n } else {\n setStepNum(2);\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => setLoading(false));\n };\n\n const tableColumn = [\n {\n title: \"服务名称\",\n dataIndex: \"name\",\n key: \"name\",\n align: \"center\",\n width: 200,\n },\n {\n title: \"扫描到该服务的IP\",\n dataIndex: \"ip\",\n key: \"ip\",\n align: \"center\",\n width: 300,\n filters: Object.keys(getServiceData?.ips || []).map((i) => {\n return {\n value: i,\n text: i,\n };\n }),\n onFilter: (value, record) => record.ip.indexOf(value) !== -1,\n render: (text) => {\n if (typeof text === \"string\") {\n return text;\n } else if (text.length === 0) {\n return \"-\";\n } else {\n return (\n <>\n {text.map((i) => (\n \n \n
\n\n \n {\n setStepNum(0);\n }}\n >\n 上一步\n \n {\n addService();\n }}\n >\n 纳管\n \n
\n \n \n );\n};\n\nconst GetService = () => {\n const history = useHistory();\n const location = useLocation();\n\n // 服务纳管初始数据\n const getServiceData = location.state?.getServiceData;\n // 服务扫描信息\n const [checkServiceData, setCheckServiceData] = useState(null);\n // 服务关联信息\n const [serviceConnectionData, setServiceConnectionData] = useState({});\n // 步骤\n const [stepNum, setStepNum] = useState(0);\n\n return (\n \n {\n history?.goBack();\n }}\n />\n 服务纳管\n
\n \n \n \n
\n \n \n {stepNum == 0 && (\n \n
\n \n 已选择{\" \"}\n {checkedList.filter((i) => typeof i.version !== \"string\").length}{\" \"}\n 个\n
\n \n \n \n \n \n \n \n {\n checkServiceData();\n }}\n >\n 确认选择\n \n
\n \n \n \n );\n};\n\nexport default GetServiceModal;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/component/BasicInfoItem/index.js",
"content": "import styles from \"../index.module.less\";\nimport { Form, Input, InputNumber } from \"antd\";\nimport { useEffect, useState, useRef } from \"react\";\nimport { randomNumber } from \"@/utils/utils\";\nimport { DownOutlined } from \"@ant-design/icons\";\n\nconst BasicInfoItem = ({ data, form }) => {\n // step3的安装详情是否是展开状态 因为多个所以为对象\n const [isOpen, setIsOpen] = useState(false);\n\n const numRef = useRef({});\n\n const step2Open = (num) => ({\n marginTop: 10,\n minHeight: 30,\n height: num * 55,\n transition: \"all .2s ease-in\",\n overflow: \"hidden\",\n backgroundColor: \"#f9f9f9\",\n display: \"flex\",\n padding: 10,\n flexWrap: \"wrap\",\n });\n\n const step2NotOpen = () => ({\n height: 0,\n minHeight: 0,\n transition: \"all .2s ease-in\",\n overflow: \"hidden\",\n backgroundColor: \"#f9f9f9\",\n display: \"flex\",\n });\n\n useEffect(() => {\n form.setFieldsValue({\n [`${data.name}`]: `${data.name}-${randomNumber()}`,\n });\n data.services_list.map((item) => {\n numRef.current[\n `${data.name}=${item.name}`\n ] = `${item.deploy_mode.default}`;\n form.setFieldsValue({\n [`${data.name}=${item.name}`]: `${item.deploy_mode.default}`,\n });\n });\n }, []);\n\n return (\n <>\n \n {\n return record.name;\n }}\n checkedState={[checkedList, setCheckedList]}\n pagination={false}\n rowSelection={{\n selectedRowKeys: checkedList?.map((item) => item?.name),\n onSelect: (record, selected, selectedRows, nativeEvent) => {\n if (selected) {\n // 如果有子项则全部选中\n let childArr = [];\n if (record.hasOwnProperty(\"child\")) {\n const version =\n versionInfo.current[record.name] || record.version[0];\n childArr = record.child[version];\n }\n // 如果有父则选中\n let fatherArr = [];\n if (typeof record.version === \"string\") {\n for (let i = 0; i < dataSource.length; i++) {\n const element = dataSource[i];\n if (element.hasOwnProperty(\"child\")) {\n const version =\n versionInfo.current[element.name] ||\n element.version[0];\n if (element.child[version].indexOf(record) !== -1) {\n fatherArr.push(element);\n break;\n }\n }\n }\n }\n setCheckedList(\n Array.from(\n new Set([\n ...checkedList,\n ...childArr,\n ...fatherArr,\n record,\n ])\n )\n );\n } else {\n let arr = [record.name];\n if (record.hasOwnProperty(\"child\")) {\n const version =\n versionInfo.current[record.name] || record.version[0];\n arr = [...arr, ...record.child[version].map((i) => i.name)];\n }\n setCheckedList(\n checkedList.filter((i) => arr.indexOf(i.name) === -1)\n );\n }\n },\n onSelectAll: (selected, selectedRows, changeRows) => {\n if (selected) {\n let resArr = [];\n if (\n !(changeRows.length === 1 && changeRows[0] === undefined)\n ) {\n for (let i = 0; i < dataSource.length; i++) {\n const element = dataSource[i];\n resArr.push(element);\n const version =\n versionInfo.current[element.name] || element.version[0];\n\n if (element.hasOwnProperty(\"child\")) {\n resArr = [...resArr, ...element.child[version]];\n }\n }\n }\n setCheckedList(Array.from(new Set(resArr)));\n } else {\n setCheckedList([]);\n }\n },\n }}\n />\n
\n \n \n \n
\n \n {data.name}
\n {data.version}
\n \n \n \n \n
\n \n {\n setIsOpen(!isOpen);\n }}\n >\n
\n \n {item.name}}\n name={`${data.name}=${item.name}`}\n style={{ marginBottom: 0 }}\n >\n {\n if (\n e &&\n (e - item.deploy_mode.step ==\n numRef.current[`${data.name}=${item.name}`] ||\n e + item.deploy_mode.step ==\n numRef.current[`${data.name}=${item.name}`])\n ) {\n numRef.current[`${data.name}=${item.name}`] = e;\n } else {\n form.setFieldsValue({\n [`${data.name}=${item.name}`]:\n numRef.current[`${data.name}=${item.name}`],\n });\n }\n }}\n keyboard={false}\n disabled={item.deploy_mode.step == 0}\n step={item.deploy_mode.step}\n />\n \n
\n );\n })}\n \n \n {data.error_msg}\n
\n \n );\n};\n\nexport default BasicInfoItem;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/component/DependentinfoItem/component/DeployInstanceRow.js",
"content": "import { Select, Form, Checkbox } from \"antd\";\nimport { useEffect, useState } from \"react\";\nimport RenderArr from \"./RenderArr\";\nimport RenderNum from \"./RenderNum\";\n\nconst DeployInstanceRow = ({ data, form }) => {\n const [check, setCheck] = useState(true);\n\n useEffect(() => {\n if (check) {\n form.setFieldsValue({\n [`${data.name}`]: JSON.stringify({\n name: data.exist_instance[0]?.name,\n id: data.exist_instance[0]?.id,\n type: data.exist_instance[0]?.type,\n }),\n });\n }\n }, [check]);\n\n return (\n <>\n {data.name}
\n {data.version}
\n {check ? (\n <>\n \n \n \n \n
\n {data.name}
\n {data.version}
\n {Array.isArray(data.deploy_mode) ? (\n {data.name}
\n {data.version}
\n \n \n \n {\n setDeployValue(e);\n }}\n >\n {data.deploy_mode.map((item) => {\n return (\n \n {item.name}\n \n );\n })}\n \n \n
\n \n \n {\n if (e) {\n if (\n e - data.deploy_mode.step == numRef.current ||\n e + data.deploy_mode.step == numRef.current\n ) {\n numRef.current = e;\n setNum(e);\n } else {\n form.setFieldsValue({\n [`${data.name}=num`]: numRef.current,\n });\n }\n }\n\n if (e > 1) {\n form.setFieldsValue({\n [`${data.name}=name`]: `${data.name}-cluster-${randomNumber(\n 7\n )}`,\n });\n }\n }}\n keyboard={false}\n disabled={data.deploy_mode.step == 0}\n step={data.deploy_mode.step}\n min={1}\n max={32}\n style={{\n width: 100,\n }}\n />\n \n
\n \n {data.is_base_env ? (\n
\n {ip}
\n {renderStatus[status]}
\n \n {\n if (openName == `${title}=${ip}`) {\n setOpenName(\"\");\n } else {\n setOpenName(`${title}=${ip}`);\n }\n }}\n >\n 查看详细安装信息\n
\n \n \n {log || \"暂无数据\"}\n
\n \n );\n};\n\nexport default InstallDetail;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/component/InstallInfoItem/index.js",
"content": "import InstallDetail from \"./component/InstallDetail\";\n\nconst InstallInfoItem = ({\n id,\n data,\n title,\n openName,\n setOpenName,\n log,\n idx,\n}) => {\n return (\n \n \n (\n \n {renderData.map((item) => {\n return (\n \n {\n // //console.log(e.target.value);\n // dispatch(\n // getStep3ServiceChangeAction(\n // ip,\n // data.name,\n // item.key,\n // e.target.value\n // )\n // );\n // }}\n addonBefore={\n item.dir_key ? (\n / 数据分区\n ) : null\n }\n //style={{ width: 420 }}\n placeholder={`请输入${item.name}`}\n suffix={\n item.dir_key ? (\n \n \n ) : null\n }\n />\n \n );\n })}\n \n \n \n
\n );\n};\n\nexport default ServiceConfigItem;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/component/ServiceDistributionItem/component/HasInstallService.js",
"content": "import { Tooltip, Spin } from \"antd\";\n\nconst HasInstallService = ({ children, ip, installService }) => {\n \n return (\n \n
\n \n {\n // form.setFieldsValue({\n // [`${info.ip}`]: value,\n // });\n // }}\n >\n 选择服务数:{\" \"}\n {value.length == 0 ? (\n 0个\n ) : (\n \n \n 已选服务\n
\n \n 已安装服务数:{\" \"}\n {info.num == 0 ? (\n 0个\n ) : (\n \n {info.num}个\n \n )}\n
\n \n \n \n \n );\n};\n\nexport default ServiceDistributionItem;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/component/index.module.less",
"content": ".basicInfoItem {\n display: flex;\n margin-top: 25px;\n align-items: center;\n}\n\n.dependentinfoItem {\n display: flex;\n margin-top: 35px;\n align-items: center;\n}\n\n:global{\n .ant-form-vertical .ant-form-item-label, .ant-col-24.ant-form-item-label, .ant-col-xl-24.ant-form-item-label {\n padding:0\n }\n}"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/index.js",
"content": "import { useHistory, useLocation } from \"react-router-dom\";\nimport { useDispatch } from \"react-redux\";\nimport { Steps } from \"antd\";\nimport { useState } from \"react\";\nimport styles from \"./index.module.less\";\nimport Step1 from \"./steps/Step1\";\nimport Step2 from \"./steps/Step2\";\nimport Step3 from \"./steps/Step3\";\nimport Step4 from \"./steps/Step4\";\n\nimport { LeftOutlined } from \"@ant-design/icons\";\n// 安装页面\nconst Installation = () => {\n\n const dispatch = useDispatch();\n const history = useHistory();\n const location = useLocation()\n\n const defaultStep = location.state?.step\n //console.log(location, defaultStep)\n\n const [stepNum, setStepNum] = useState(defaultStep || 0);\n\n return (\n \n \n
\n {stepNum == 0 && \n {\n // dispatch(getTabKeyChangeAction(\"service\"));\n history?.goBack();\n // history?.push({\n // pathname: `/application_management/app_store`,\n // });\n }}\n />\n 安装\n
\n \n \n \n
\n \n \n {\n Promise.all([\n dependentForm.validateFields(),\n // basicForm.validateFields(),\n ])\n .then((result) => {\n checkInstallInfo(dataProcessing());\n })\n .catch((e) => {\n message.warn(\"校验未通过\");\n });\n }}\n >\n 下一步\n \n
\n \n \n );\n } else {\n return (\n <>\n \n {\n // console.log(data, dependentForm.getFieldValue(), basicForm.getFieldValue())\n // console.log(dataProcessing())\n // console.log(reduxDataProcessing())\n // reduxDispatch(getStep1ChangeAction(reduxDataProcessing()))\n // return\n Promise.all([\n dependentForm.validateFields(),\n basicForm.validateFields(),\n ])\n .then((result) => {\n checkInstallInfo(dataProcessing());\n })\n .catch((e) => {\n message.warn(\"校验未通过\");\n });\n }}\n >\n 下一步\n \n
\n \n \n );\n }\n};\n\nexport default Step1;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/steps/Step2.js",
"content": "import { Button, Form, Spin, message } from \"antd\";\nimport { useEffect, useState } from \"react\";\nimport ServiceDistributionItem from \"../component/ServiceDistributionItem/index.js\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport {\n getDataSourceChangeAction,\n getStep2ErrorLstChangeAction,\n getIpListChangeAction,\n} from \"../store/actionsCreators\";\nimport { fetchPost, fetchGet } from \"@/utils/request\";\nimport { apiRequest } from \"@/config/requestApi\";\nimport { handleResponse } from \"@/utils/utils\";\n\nconst Step2 = ({ setStepNum }) => {\n const reduxDispatch = useDispatch();\n\n const uniqueKey = useSelector((state) => state.appStore.uniqueKey);\n\n // 基本信息的form实例\n const [form] = Form.useForm();\n\n const [loading, setLoading] = useState(false);\n\n const [installService, setInstallService] = useState({});\n\n const allDataPool = useSelector((state) => state.installation.dataSource);\n const ipList = useSelector((state) => state.installation.ipList);\n\n const [data, setData] = useState({\n host: [],\n product: [],\n });\n\n // 未分配服务个数\n const unassignedServices = Object.keys(allDataPool).reduce((prev, cur) => {\n return prev + allDataPool[cur].num;\n }, 0);\n\n const queryCreateServiceDistribution = () => {\n // checkInstallInfo 基本信息提交操作，决定是否跳转服务分布以及数据校验回显\n setLoading(true);\n fetchPost(apiRequest.appStore.createServiceDistribution, {\n body: {\n unique_key: uniqueKey,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n if (res.data && res.data.data) {\n reduxDispatch(getDataSourceChangeAction(res.data.data.all));\n setData((data) => {\n return {\n ...data,\n host: res.data.data.host,\n product: res.data.data.product,\n };\n });\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n };\n\n // 已安装服务列表查询\n const queryInstallServiceData = () => {\n fetchGet(apiRequest.appStore.queryListServiceByIp)\n .then((res) => {\n handleResponse(res, (res) => {\n setInstallService(res.data);\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {});\n };\n\n // 提交前对数据进行处理\n const dataProcessing = () => {\n let data = form.getFieldValue();\n console.log(data);\n let result = {};\n for (const key in data) {\n if (data[key].length > 0) {\n result[key] = data[key].map((item) => {\n return item[1];\n });\n }\n }\n\n console.log(result);\n return result;\n };\n\n // 最后的提交操作\n // checkServiceDistribution 服务分布提交操作，决定是否跳转修改配置以及数据校验回显\n const checkServiceDistribution = (queryData) => {\n setLoading(true);\n fetchPost(apiRequest.appStore.checkServiceDistribution, {\n body: {\n unique_key: uniqueKey,\n data: queryData,\n },\n })\n .then((res) => {\n //console.log(operateObj[operateAciton])\n handleResponse(res, (res) => {\n if (res.data && res.data.data) {\n if (res.data.is_continue) {\n // 校验通过，跳转，请求服务分布数据并跳转\n setStepNum(2);\n } else {\n message.warn(\"校验未通过\");\n reduxDispatch(getStep2ErrorLstChangeAction(res.data.error_lst));\n }\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n };\n\n useEffect(() => {\n queryCreateServiceDistribution();\n queryInstallServiceData();\n return () => {\n // 销毁时去除error信息\n reduxDispatch(getStep2ErrorLstChangeAction([]));\n reduxDispatch(getDataSourceChangeAction([]));\n reduxDispatch(getIpListChangeAction([]));\n };\n }, []);\n\n return (\n <>\n \n \n 主机总数: {data.host.length}台\n
\n \n 已分配主机数量: {ipList?.length}台\n
\n \n {\n setStepNum(0);\n }}\n >\n 上一步\n \n {\n //setStepNum(2);\n checkServiceDistribution(dataProcessing());\n }}\n >\n 下一步\n \n
\n \n \n );\n};\n\nexport default Step2;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/steps/Step3.js",
"content": "import { Button, Form, Checkbox, Input, Spin, message } from \"antd\";\nimport { useEffect, useState } from \"react\";\nimport { SearchOutlined, ExclamationOutlined } from \"@ant-design/icons\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport ServiceConfigItem from \"../component/ServiceConfigItem\";\nimport { fetchGet, fetchPost } from \"@/utils/request\";\nimport { apiRequest } from \"@/config/requestApi\";\nimport { handleResponse } from \"@/utils/utils\";\nimport {\n getStep3IpDataChangeAction,\n getStep3ErrorInfoChangeAction,\n getStep3ServiceChangeAction,\n} from \"../store/actionsCreators\";\nimport * as R from \"ramda\";\n\nconst Step3 = ({ setStepNum }) => {\n const dispatch = useDispatch();\n // unique_key: \"21e041a9-c9a5-4734-9673-7ed932625d21\"\n // 服务的loading\n const [loading, setLoading] = useState(false);\n\n const [loadingIp, setLoadingIp] = useState(false);\n\n const uniqueKey = useSelector((state) => state.appStore.uniqueKey);\n\n // redux中取数据\n const reduxData = useSelector((state) => state.installation.step3Data);\n\n const errInfo = useSelector((state) => state.installation.step3ErrorData);\n //console.log(errInfo[\"10.0.12.250\"]);\n\n const [checked, setChecked] = useState(false);\n\n const [serviceConfigform] = Form.useForm();\n\n const viewHeight = useSelector((state) => state.layouts.viewSize.height);\n\n // 指定本次安装服务运行用户\n const [runUser, setRunUser] = useState(\"\");\n\n // 筛选后的ip列表\n const [currentIpList, setCurrentIpList] = useState([]);\n\n // ip列表中的选中项\n const [checkIp, setCheckIp] = useState(\"\");\n\n // ip 筛选value\n const [searchIp, setSearchIp] = useState(\"\");\n\n // ip列表的数据源\n const [ipList, setIpList] = useState([]);\n\n function queryIpList() {\n setLoadingIp(true);\n fetchGet(apiRequest.appStore.getInstallHostRange, {\n params: {\n unique_key: uniqueKey,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n setIpList(res.data.data);\n setCurrentIpList(res.data.data);\n setCheckIp(res.data.data[0]);\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoadingIp(false);\n });\n }\n\n const queryInstallArgsByIp = (ip) => {\n // 如果redux中已经存了当前ip的数据就不再请求直接使用redux中的\n if (reduxData[ip]) {\n return;\n }\n setLoading(true);\n fetchGet(apiRequest.appStore.getInstallArgsByIp, {\n params: {\n unique_key: uniqueKey,\n ip: ip,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n //setDataSource(res.data.data);\n dispatch(\n getStep3IpDataChangeAction({\n [ip]: res.data.data,\n })\n );\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n };\n\n // 提交前对数据进行处理\n const dataProcessing = (data) => {\n let obj = {};\n ipList.map((ip) => {\n obj[ip] = [];\n });\n //console.log(data);\n return {\n ...obj,\n ...data,\n };\n };\n\n // 有校验失败的信息生成errlist\n const getErrorInfo = (data) => {\n let result = {};\n for (const ip in data) {\n data[ip].map((service) => {\n [...service.install_args, ...service.ports].map((serv) => {\n if (serv.check_flag == false) {\n if (!result[ip]) {\n result[ip] = {};\n }\n if (result[ip][service.name]) {\n result[ip][service.name][serv.key] = serv.error_msg;\n } else {\n result[ip][service.name] = {};\n result[ip][service.name][serv.key] = serv.error_msg;\n }\n }\n });\n });\n }\n // console.log(result, \"result\");\n return result;\n };\n\n // 非空校验\n const nonNullCheck = (queryData) => {\n let result = {};\n //console.log(queryData);\n let data = R.clone(queryData);\n // 这一步校验是为了解决非当前页面form的必填校验不到的问题\n // 当key == vip 跳过校验（非必填）\n // 首先去除当前页面ip的相关数据校验\n data[checkIp] = [];\n // console.log(data)\n for (const ip in data) {\n data[ip].map((service) => {\n [...service.install_args, ...service.ports].map((serv) => {\n // console.log(serv);\n // 特殊处理，去除vip非空校验\n if (!serv.default && serv.key !== \"vip\") {\n if (!result[ip]) {\n result[ip] = {};\n }\n if (result[ip][service.name]) {\n result[ip][service.name][serv.key] = `请输入${serv.name}`;\n } else {\n result[ip][service.name] = {};\n result[ip][service.name][serv.key] = `请输入${serv.name}`;\n }\n }\n });\n });\n }\n\n return result;\n };\n\n const getCurrentData = (queryData) => {\n let formData = serviceConfigform.getFieldValue();\n for (const keyStr in formData) {\n let keyArr = keyStr.split(\"=\");\n queryData[checkIp] = queryData[checkIp].map((item) => {\n if (item.name == keyArr[0]) {\n let obj = { ...item };\n obj.install_args = obj.install_args.map((i) => {\n if (i.key == keyArr[1]) {\n i.default = formData[keyStr];\n }\n return i;\n });\n obj.ports = obj.ports.map((i) => {\n if (i.key == keyArr[1]) {\n i.default = formData[keyStr];\n }\n return i;\n });\n return obj;\n }\n return item;\n });\n }\n return queryData;\n };\n\n // 开始安装操作命令下发\n const createInstallPlan = (queryData) => {\n // 这个queryData数据是用redux中来的，当前页面的数据是在页面销毁时才同步redux的\n console.log(getCurrentData(queryData));\n //return\n setLoading(true);\n fetchPost(apiRequest.appStore.createInstallPlan, {\n body: {\n unique_key: uniqueKey,\n run_user: runUser,\n data: getCurrentData(queryData),\n },\n })\n .then((res) => {\n //console.log(operateObj[operateAciton])\n handleResponse(res, (res) => {\n if (res.data && res.data.data) {\n if (res.data.is_continue) {\n // 校验通过，跳转，请求服务分布数据并跳转\n setStepNum(3);\n } else {\n res.data && res.data.error_msg\n ? message.warn(res.data.error_msg)\n : message.warn(\"校验未通过，请检查\");\n dispatch(\n getStep3ErrorInfoChangeAction(getErrorInfo(res.data.data))\n );\n\n //reduxDispatch(getStep2ErrorLstChangeAction(res.data.error_lst));\n }\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n };\n\n useEffect(() => {\n if (checkIp) {\n queryInstallArgsByIp(checkIp);\n }\n }, [checkIp]);\n\n useEffect(() => {\n // 请求ip数据\n // currentIpList\n queryIpList();\n return () => {\n dispatch(getStep3ErrorInfoChangeAction({}));\n dispatch(getStep3IpDataChangeAction());\n };\n }, []);\n\n return (\n \n \n {\n setRunUser(e.target.value);\n }}\n />\n
\n\n \n {\n if (!e.target.checked) {\n setRunUser(\"\");\n }\n setChecked(e.target.checked);\n }}\n >\n 指定本次安装服务运行用户\n \n
\n\n \n \n {\n if (searchIp) {\n let result = ipList.filter((i) => {\n return i.includes(searchIp);\n });\n setCurrentIpList(result);\n result.length > 0 && setCheckIp(result[0]);\n } else {\n setCurrentIpList(ipList);\n setCheckIp(ipList[0]);\n }\n }}\n value={searchIp}\n onChange={(e) => {\n setSearchIp(e.target.value);\n if (!e.target.value) {\n setCurrentIpList(ipList);\n setCheckIp(ipList[0]);\n }\n }}\n onPressEnter={() => {\n if (searchIp) {\n let result = ipList.filter((i) => {\n return i.includes(searchIp);\n });\n setCurrentIpList(result);\n result.length > 0 && setCheckIp(result[0]);\n } else {\n setCurrentIpList(ipList);\n setCheckIp(ipList[0]);\n }\n }}\n placeholder=\"搜索IP地址\"\n suffix={\n !searchIp &&
\n 分布主机数量: {ipList?.length}台
\n \n {\n setStepNum(1);\n }}\n >\n 上一步\n \n {\n serviceConfigform.validateFields().then(\n (e) => {\n let errData = nonNullCheck(reduxData);\n if (Object.keys(errData).length > 0) {\n message.warn(\"校验未通过，请检查\");\n dispatch(getStep3ErrorInfoChangeAction(errData));\n } else {\n createInstallPlan(dataProcessing(reduxData));\n }\n },\n (e) => {\n message.warn(\"校验未通过，请检查\");\n }\n );\n }}\n >\n 开始安装\n \n
\n \n \n );\n};\n\nexport default Step3;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/steps/Step4.js",
"content": "import { Button, Anchor, Spin, Progress } from \"antd\";\nimport { useSelector } from \"react-redux\";\nimport InstallInfoItem from \"../component/InstallInfoItem\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { LoadingOutlined } from \"@ant-design/icons\";\nimport { apiRequest } from \"@/config/requestApi\";\nimport { fetchGet } from \"@/utils/request\";\nimport { handleResponse } from \"@/utils/utils\";\nimport { useHistory, useLocation } from \"react-router-dom\";\nimport { fetchPost } from \"src/utils/request\";\n\nconst { Link } = Anchor;\n// 状态渲染规则\nconst renderStatus = {\n 0: \"等待安装\",\n 1: \"正在安装\",\n 2: \"安装成功\",\n 3: \"安装失败\",\n 4: \"正在注册\",\n};\n\nconst Step4 = () => {\n const history = useHistory();\n const viewHeight = useSelector((state) => state.layouts.viewSize.height);\n const [openName, setOpenName] = useState(\"\");\n // 在轮训时使用ref存值\n const openNameRef = useRef(null);\n const location = useLocation();\n const defaultUniqueKey = location.state?.uniqueKey;\n const uniqueKey = useSelector((state) => state.appStore.uniqueKey);\n\n const [loading, setLoading] = useState(true);\n\n const [retryLoading, setRetryLoading] = useState(false);\n\n // 主机 agent 状态标识\n const [hostAgentFlag, setHostAgentFlag] = useState(false);\n // 轮训控制器\n const hostAgentTimer = useRef(null);\n // start 按钮加载\n const [startLoading, setStartLoading] = useState(false);\n\n const [data, setData] = useState({\n detail: {},\n status: 0,\n });\n\n const [log, setLog] = useState(\"\");\n\n // 轮训的timer控制器\n const timer = useRef(null);\n\n const queryInstallProcess = () => {\n !timer.current && setLoading(true);\n fetchGet(apiRequest.appStore.queryInstallProcess, {\n params: {\n unique_key: defaultUniqueKey || uniqueKey,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n setData(res.data);\n if (\n res.data.status == 0 ||\n res.data.status == 1 ||\n res.data.status == 4\n ) {\n // 状态为未安装或者安装中\n if (openNameRef.current) {\n let arr = openNameRef.current.split(\"=\");\n queryDetailInfo(defaultUniqueKey || uniqueKey, arr[1], arr[0]);\n }\n\n timer.current = setTimeout(() => {\n queryInstallProcess();\n }, 5000);\n } else {\n if (openNameRef.current) {\n let arr = openNameRef.current.split(\"=\");\n queryDetailInfo(defaultUniqueKey || uniqueKey, arr[1], arr[0]);\n }\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n };\n\n // 请求详细信息\n const queryDetailInfo = (uniqueKey, ip, app_name) => {\n fetchGet(apiRequest.appStore.showSingleServiceInstallLog, {\n params: {\n unique_key: uniqueKey,\n app_name: app_name,\n ip: ip,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n setLog(res.data.log);\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n //setLoading(false);\n });\n };\n\n const retryInstall = () => {\n setRetryLoading(true);\n setOpenName(\"\");\n openNameRef.current = \"\";\n fetchPost(apiRequest.appStore.retryInstall, {\n body: {\n unique_key: defaultUniqueKey || uniqueKey,\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n if (res.code == 0) {\n queryInstallProcess();\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setRetryLoading(false);\n });\n };\n\n // 查询主机 agent 状态\n const queryHostAgent = () => {\n // 构造 ip 集合\n let ipSet = new Set();\n Object.keys(data.detail).map((key, idx) => {\n data.detail[key].forEach((e) => {\n if (e.ip !== \"postAction\") {\n ipSet.add(e.ip);\n }\n });\n });\n fetchPost(apiRequest.machineManagement.hostsAgentStatus, {\n body: {\n ip_list: Array.from(ipSet),\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {\n if (res.code === 0 && res.data) {\n // 调用安装\n retryInstall();\n // 清除定时器\n clearInterval(hostAgentTimer.current);\n setStartLoading(false);\n }\n });\n })\n .catch((e) => console.log(e))\n .finally(() => {});\n };\n\n // 开始安装\n const startInstall = () => {\n setStartLoading(true);\n hostAgentTimer.current = setInterval(() => {\n queryHostAgent();\n }, 1000);\n };\n\n useEffect(() => {\n queryInstallProcess();\n return () => {\n // 页面销毁时清除延时器\n clearTimeout(timer.current);\n clearInterval(hostAgentTimer.current);\n };\n }, []);\n\n return (\n \n \n \n \n
\n \n\n \n {Object.keys(data.detail).map((key, idx) => {\n return (\n {\n setLog(\"\");\n if (n) {\n let arr = n.split(\"=\");\n queryDetailInfo(\n defaultUniqueKey || uniqueKey,\n arr[1],\n arr[0]\n );\n }\n // console.log(n);\n // queryDetailInfo(uniqueKey, arr[1], arr[0]);\n setOpenName(n);\n openNameRef.current = n;\n }}\n id={`a${key}`}\n key={key}\n title={key}\n data={data.detail[key]}\n log={log}\n idx={idx}\n />\n );\n })}\n
\n \n {\n let con = document.getElementById(\"Step4Wrapper\");\n return con;\n }}\n style={{\n height: viewHeight - 270,\n overflowY: \"auto\",\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n >\n {Object.keys(data.detail).map((key) => {\n // console.log(data.detail[key]);\n let hasError =\n data.detail[key].filter((a) => a.status == 3).length !== 0;\n return (\n
\n \n \n \n \n {key}\n \n }\n />\n
\n );\n })}\n \n \n
\n \n {renderStatus[data.status]}\n {(data.status == 0 || data.status == 1 || data.status == 4) && (\n
\n \n
\n \n {data.status == 0 && (\n {\n startInstall();\n }}\n >\n 开始\n \n )}\n {data.status == 3 && (\n {\n retryInstall();\n }}\n >\n 重试\n \n )}\n\n {\n history?.push(\"/application_management/install-record\");\n }}\n >\n 完成\n \n
\n \n \n );\n};\n\nexport default Step4;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/store/actionsCreators.js",
"content": "import * as actionTypes from \"./constants\";\nimport * as R from \"ramda\";\n\nexport const getDataSourceChangeAction = (value) => {\n const dataSource = R.clone(value);\n return {\n type: actionTypes.CHANGE_DATASOURCE,\n payload: {\n dataSource: dataSource,\n },\n };\n};\n\nexport const getIpListChangeAction = (value) => {\n const list = R.clone(value);\n return {\n type: actionTypes.CHANGE_IPLIST,\n payload: {\n ipList: list,\n },\n };\n};\n\nexport const getStep1ChangeAction = (value) => {\n const data = R.clone(value);\n return {\n type: actionTypes.CHANGE_STEP1DATA,\n payload: {\n step1Data: data,\n },\n };\n};\n\nexport const getStep2ChangeAction = (value) => {\n const data = R.clone(value);\n return {\n type: actionTypes.CHANGE_STEP2DATA,\n payload: {\n step2Data: data,\n },\n };\n};\n\nexport const getStep2ErrorLstChangeAction = (value) => {\n const data = R.clone(value);\n return {\n type: actionTypes.CHANGE_STEP2ERRORLISTDATA,\n payload: {\n errorList: data,\n },\n };\n};\n\nexport const getStep3IpDataChangeAction = (value) => {\n const data = R.clone(value);\n return {\n type: actionTypes.CHANGE_STEP3DATA,\n payload: {\n ipData: data,\n },\n };\n};\n\nexport const getStep3ServiceChangeAction = (ip, name, key, value) => {\n return {\n type: actionTypes.CHANGE_STEP3SERVERDATA,\n payload: {\n ip,\n name,\n key,\n value,\n },\n };\n};\n\nexport const getStep3ErrorInfoChangeAction = (value) => {\n console.log(value)\n return {\n type: actionTypes.CHANGE_STEP3ERRORDATA,\n payload: {\n err: value,\n },\n };\n};"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/store/constants.js",
"content": "export const CHANGE_DATASOURCE = \"CHANGE_DATASOURCE\";\n\nexport const CHANGE_IPLIST = \"CHANGE_IPLIST\";\n\nexport const CHANGE_STEP1DATA = \"CHANGE_STEP1DATA\";\n\nexport const CHANGE_STEP2DATA = \"CHANGE_STEP2DATA\";\nexport const CHANGE_STEP2ERRORLISTDATA = \"CHANGE_STEP2ERRORLISTDATA\";\n\nexport const CHANGE_STEP3DATA = \"CHANGE_STEP3DATA\";\nexport const CHANGE_STEP3SERVERDATA = \"CHANGE_STEP3SERVERDATA\";\nexport const CHANGE_STEP3ERRORDATA = \"CHANGE_STEP3ERRORDATA\";\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/store/index.js",
"content": "import reducer from \"./reduer\";\n\n export {\n reducer\n };"
},
{
"path": "omp_web/src/pages/AppStore/config/Installation/store/reduer.js",
"content": "import * as actionTypes from \"./constants\";\nimport * as R from \"ramda\";\n\nconst defaultState = {\n dataSource: {},\n ipList: [],\n step1Data: {\n basic: [],\n dependence: [],\n },\n step2Data: {},\n errorList: [],\n\n step3Data: {},\n // step3Data数据结构\n // {\n // ip10.012.1:[{\n // name:doucZabbixApi\n // log_dir:/abc/d,\n // ...\n // },\n // ...]\n // }\n step3ErrorData: {},\n};\n\nfunction reducer(state = defaultState, action) {\n const stateCopy = R.clone(state);\n switch (action.type) {\n case actionTypes.CHANGE_DATASOURCE:\n return { ...state, dataSource: action.payload.dataSource };\n case actionTypes.CHANGE_IPLIST:\n return { ...state, ipList: action.payload.ipList };\n case actionTypes.CHANGE_STEP1DATA:\n return { ...state, step1Data: action.payload.step1Data };\n case actionTypes.CHANGE_STEP2DATA:\n return { ...state, step2Data: action.payload.step2Data };\n case actionTypes.CHANGE_STEP2ERRORLISTDATA:\n return { ...state, errorList: action.payload.errorList };\n case actionTypes.CHANGE_STEP3DATA:\n if(!action.payload.ipData){\n return {\n ...state,\n step3Data:{}\n }\n }\n return {\n ...state,\n step3Data: {\n ...state.step3Data,\n ...action.payload.ipData,\n },\n };\n case actionTypes.CHANGE_STEP3SERVERDATA:\n let { ip, name, key, value } = action.payload;\n let serviceData = stateCopy.step3Data[ip];\n serviceData = serviceData.map((item) => {\n if (item.name == name) {\n let obj = { ...item };\n obj.install_args = obj.install_args.map((i) => {\n if (i.key == key) {\n return {\n ...i,\n default: value,\n };\n }\n return i;\n });\n obj.ports = obj.ports.map((i) => {\n if (i.key == key) {\n return {\n ...i,\n default: value,\n };\n }\n return i;\n });\n return {\n ...obj,\n };\n }\n return item;\n });\n return {\n ...stateCopy,\n step3Data: {\n ...stateCopy.step3Data,\n [ip]: serviceData,\n },\n };\n\n case actionTypes.CHANGE_STEP3ERRORDATA:\n return {\n ...stateCopy,\n step3ErrorData: action.payload.err,\n };\n\n default:\n return state;\n }\n}\n\nexport default reducer;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/ReleaseModal.js",
"content": "import { Button, Modal, Upload, message, Steps, Tooltip } from \"antd\";\nimport { useEffect, useRef, useState } from \"react\";\nimport {\n CloudUploadOutlined,\n ExclamationCircleOutlined,\n CloseCircleFilled,\n CheckCircleFilled,\n SyncOutlined,\n ClockCircleFilled,\n SendOutlined,\n} from \"@ant-design/icons\";\n//import BMF from \"browser-md5-file\";\nimport { fetchPost, fetchGet } from \"@/utils/request\";\nimport { apiRequest } from \"@/config/requestApi\";\nimport { handleResponse } from \"@/utils/utils\";\nimport { OmpMessageModal } from \"@/components\";\n\n//let bmf = new BMF();\n\nconst ReleaseModal = ({\n setReleaseModalVisibility,\n releaseModalVisibility,\n timeUnix,\n refresh,\n}) => {\n const [loading, setLoading] = useState(false);\n\n const [filesList, setFilesList] = useState([]);\n\n const [deleteModal, setDeleteModal] = useState(false);\n\n const [dataSource, setDataSource] = useState([]);\n\n const [stepNum, setStepNum] = useState(0);\n\n const isRun = useRef(null);\n\n const timer = useRef(null);\n\n // 失败时的轮训次数标识\n const trainingInRotationNum = useRef(0);\n\n function checkData() {\n // 防止在弹窗关闭后还继续轮训\n if (!isRun.current) {\n return;\n }\n fetchGet(apiRequest.appStore.pack_verification_results, {\n params: {\n operation_uuid: timeUnix,\n },\n })\n .then((res) => {\n if (res)\n handleResponse(res, (res) => {\n setDataSource(res.data);\n if (res.data) {\n let checkRunningArr = res.data.filter((item) => {\n return item.package_status == 2;\n });\n let publishRunningArr = res.data.filter((item) => {\n return item.package_status == 5;\n });\n if (checkRunningArr.length > 0 || publishRunningArr.length > 0) {\n timer.current = setTimeout(() => {\n checkData();\n }, 2000);\n }\n }\n });\n })\n .catch((e) => {\n console.log(e);\n trainingInRotationNum.current++;\n if (trainingInRotationNum.current < 3) {\n setTimeout(() => {\n checkData();\n }, 5000);\n } else {\n setDataSource((data) => {\n console.log(data);\n return data.map((item) => {\n return {\n ...item,\n package_status: 9,\n };\n });\n });\n }\n })\n .finally((e) => {});\n }\n\n // 发布的查询\n function publishCheckData() {\n // 防止在弹窗关闭后还继续轮训\n if (!isRun.current) {\n return;\n }\n fetchGet(apiRequest.appStore.publish, {\n params: {\n operation_uuid: timeUnix,\n },\n })\n .then((res) => {\n if (res)\n handleResponse(res, (res) => {\n setDataSource(res.data);\n if (res.data) {\n let checkRunningArr = res.data.filter((item) => {\n return item.package_status == 2;\n });\n let publishRunningArr = res.data.filter((item) => {\n return item.package_status == 5;\n });\n if (checkRunningArr.length > 0 || publishRunningArr.length > 0) {\n setTimeout(() => {\n publishCheckData();\n }, 2000);\n }\n }\n });\n })\n .catch((e) => {\n console.log(e);\n trainingInRotationNum.current++;\n if (trainingInRotationNum.current < 3) {\n setTimeout(() => {\n publishCheckData();\n }, 5000);\n } else {\n setDataSource((data) => {\n //console.log(data);\n return data.map((item) => {\n return {\n ...item,\n package_status: 9,\n };\n });\n });\n }\n })\n .finally((e) => {});\n }\n\n // 发布\n const publishApp = () => {\n setLoading(true);\n fetchPost(apiRequest.appStore.publish, {\n body: {\n uuid: timeUnix,\n },\n })\n .then((res) => {\n if (res && res.data) {\n if (res.data.code == 0) {\n setStepNum(2);\n publishCheckData();\n }\n }\n })\n .catch((e) => console.log(e))\n .finally(() => {\n setLoading(false);\n });\n };\n\n useEffect(() => {\n isRun.current = releaseModalVisibility;\n }, [releaseModalVisibility]);\n\n return (\n <>\n \n \n
\n\n \n {\n //console.log(arg,file)\n return {\n uuid: timeUnix,\n operation_user: localStorage.getItem(\"username\"),\n md5: file.uid,\n };\n }}\n maxCount={5}\n beforeUpload={(file, fileList) => {\n const fileSize = file.size / 1024 / 1024 / 1024; //单位是G\n if (Math.ceil(fileSize) > 4) {\n message.error(\"仅支持传入4G以内文件\");\n return Upload.LIST_IGNORE;\n }\n\n if (fileList.length > 5) {\n if (file == fileList[0]) {\n message.error(\"单次发布操作，最多支持上传5个文件\");\n }\n return Upload.LIST_IGNORE;\n }\n\n if (filesList.length + fileList.length > 5) {\n if (file == fileList[0]) {\n message.error(\"单次发布操作，最多支持上传5个文件\");\n }\n return Upload.LIST_IGNORE;\n }\n\n if (filesList.length >= 5) {\n if (file == fileList[0]) {\n message.error(\"单次发布操作，最多支持上传5个文件\");\n }\n return Upload.LIST_IGNORE;\n }\n\n var reg = /[^a-zA-Z0-9\\_\\-\\.]/g;\n if (reg.test(file.name)) {\n message.error(`文件名仅支持字母、数字、\"_\"、\"-\"和\".\"`);\n return Upload.LIST_IGNORE;\n }\n\n let fileNameArr =\n fileList.length == 1\n ? [...filesList, file].map((i) => i.name)\n : [...filesList, ...fileList].map((i) => i.name);\n let uniqueArr = [...new Set(fileNameArr)];\n if (fileNameArr.length !== uniqueArr.length) {\n if (fileList[0].uid == file.uid) {\n message.error(\"上传文件存在同名\");\n }\n return Upload.LIST_IGNORE;\n }\n }}\n onChange={(e) => {\n setFilesList(e.fileList);\n }}\n onRemove={(e) => {\n if (e && e.response && e.response.code == 0) {\n fetchPost(apiRequest.appStore.remove, {\n body: {\n uuid: timeUnix,\n package_names: [e.name],\n },\n })\n .then((res) => {\n handleResponse(res, (res) => {});\n })\n .catch((e) => console.log(e))\n .finally(() => {});\n }\n }}\n >\n
\n \n \n 支持扩展名: .tar 或 .tar.gz 文件大小不超过4G\n \n \n 最多上传5个文件\n \n
\n \n \n
\n 点击或将文件拖拽到这里上传\n
\n\n \n \n \n {item.error_msg}\n
\n \n \n );\n })}\n \n 校验失败的安装包不会在应用商店创建，如相同名称应用已存在，发布后会替换原有安装包\n
\n {dataSource.map((item, idx) => {\n return (\n{item.package_name}
\n \n {item.package_status == 0 && (\n \n 校验通过\n
\n \n {dataSource.filter((item) => item.package_status == 5).length >\n 0 ? (\n \n
\n ) : (\n \n
\n
\n 本次成功发布{\" \"}\n {dataSource.filter((item) => item.package_status == 3).length}\n 个 服务\n
\n\n 发布完成的安装包存放路径:{\" \"}\n \n omp/package_hub/verified/\n {\" \"}\n
\n \n )}\n\n {dataSource.map((item, idx) => {\n return (\n{item.package_name}
\n \n {item.package_status == 3 && (\n \n 发布成功\n
\n \n
\n \n \n );\n};\n\nexport default ReleaseModal;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Rollback/content/component/RollbackDetail.js",
"content": "import { DownOutlined } from \"@ant-design/icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { OmpToolTip } from \"@/components\";\n\nconst stepOpen = {\n marginTop: 10,\n minHeight: 30,\n height: 300,\n transition: \"all .2s ease-in\",\n //overflow: \"hidden\",\n backgroundColor: \"#000\",\n color: \"#fff\",\n padding: 10,\n overflowY: \"auto\",\n whiteSpace: \"pre-line\",\n};\nconst stepNotOpen = {\n height: 0,\n minHeight: 0,\n transition: \"all .2s ease-in\",\n overflow: \"hidden\",\n backgroundColor: \"#f9f9f9\",\n};\n\n// 状态渲染规则\nconst renderStatus = {\n 0: 等待回滚,\n 1: 正在回滚,\n 2: 回滚成功,\n 3: 回滚失败,\n};\n\nconst RollbackDetail = ({ title, ip, status, log, instance_name }) => {\n const containerRef = useRef(null);\n\n const [openName, setOpenName] = useState(\"\");\n\n useEffect(() => {\n containerRef.current.scrollTop = containerRef.current.scrollHeight;\n }, [log]);\n\n return (\n 确认要中断发布操作吗 ？
\n\n 正在进行发布操作，关闭窗口将会中断，此操作不可逆。\n
\n\n {instance_name} \n
\n {renderStatus[status]}
\n \n {\n if (openName == `${title}=${ip}`) {\n setOpenName(\"\");\n } else {\n setOpenName(`${title}=${ip}`);\n }\n }}\n >\n 查看详细回滚信息\n
\n \n \n \n \n \n
\n \n\n \n {data?.rollback_detail?.map((item, idx) => {\n return (\n
\n \n {\n let con = document.getElementById(\"Step4Wrapper\");\n return con;\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n >\n {data?.rollback_detail?.map((item, idx) => {\n let hasError =\n item.rollback_details.filter((a) => a.rollback_state == 3)\n .length !== 0;\n return (\n
\n \n \n \n \n {item.service_name}\n \n }\n />\n
\n );\n })}\n \n \n
\n \n {renderStatus[data.rollback_state]}\n {(data.rollback_state == 0 ||\n data.rollback_state == 1 ||\n data.rollback_state == 4) && (\n
\n \n
\n \n {data.rollback_state == 3 && (\n {\n retryRollback();\n }}\n >\n 重试\n \n )}\n\n {\n history.push({\n pathname: \"/application_management/install-record\",\n state: {\n tabKey: \"backoff\",\n },\n });\n }}\n >\n 完成\n \n
\n \n \n );\n};\n\nexport default Content;\n"
},
{
"path": "omp_web/src/pages/AppStore/config/Rollback/index.js",
"content": "// 服务的升级和回滚\nimport { useHistory } from \"react-router-dom\";\n// import { getTabKeyChangeAction } from \"../../store/actionsCreators\";\nimport styles from \"./index.module.less\";\n\nimport { LeftOutlined } from \"@ant-design/icons\";\nimport Content from \"./content/index.js\";\n// 安装页面\nconst Rollback = () => {\n // const dispatch = useDispatch();\n const history = useHistory();\n\n return (\n \n \n
\n \n {\n history.push({\n pathname: \"/application_management/install-record\",\n state: {\n tabKey: \"backoff\",\n },\n });\n }}\n />\n 服务回滚\n
\n \n \n \n {loading ? (\n
\n \n )}\n {stepNum == 1 && (\n 正在扫描服务端...
\n ) : (\n\n
扫描结束，服务端暂无安装包！
\n\n 请将安装包上传至{\" \"}\n \n omp/package_hub/back_end_verified/\n {\" \"}\n 目录后重新扫描\n
\n \n )}\n\n \n
\n {dataSource?.message}
\n\n \n {dataSource?.stage_status == \"published\" && (\n
\n \n
{dataSource?.message}
\n\n 发布完成的安装包存放路径:{\" \"}\n \n omp/package_hub/verified/\n {\" \"}\n
\n{text}
\n {v}
\n {v}
\n \n \n \n
\n \n \n 服务名称:\n \n {\n setSelectValue(e.target.value);\n if (!e.target.value) {\n queryDataList();\n }\n }}\n onBlur={() => {\n queryDataList(selectValue);\n }}\n onPressEnter={() => {\n queryDataList(selectValue);\n }}\n suffix={\n !selectValue && (\n
\n \n ({\n // // is_continue的不能选中\n // disabled: !record.is_continue,\n // })}\n rowSelection={{\n onChange: (selectedRowKeys, selectedRows, select, lll) => {\n // 全选动作交给onchange事件\n if (lock.current) {\n setRows(selectedRowKeys);\n setCheckedList(formatCheckedListData(selectedRows));\n // 关闭锁，下次事件触发时优先使用onselect处理rowkey变更\n lock.current = false;\n }\n },\n selectedRowKeys: rows,\n onSelect: (record, selected, selectedRows) => {\n if (record.isChildren) {\n if (selected) {\n for (const item of dataSource) {\n if (item.instance_name == record.isChildren) {\n let results = item.children.filter(\n (i) => i.ip == record.ip\n );\n // results是当前点击要变动的\n // row中原本的数据不应该改变\n // row原本数据不改变,考虑到每次都是直接选中全部ip的项，也不会出现选中已经选中项的情况\n setRows((r) => {\n return [...r, ...results.map((k) => k.instance_name)];\n });\n setCheckedList((checks) => {\n return formatCheckedListData([...checks, ...results]);\n });\n break;\n }\n }\n } else {\n // 删除掉和record 父级和ip一样的项\n let checkedListCopy = JSON.parse(\n JSON.stringify(checkedList)\n );\n let results = formatCheckedListData(\n checkedListCopy.filter(\n (i) =>\n i.ip !== record.ip ||\n i.isChildren !== record.isChildren\n )\n );\n\n setRows(results.map((i) => i.instance_name));\n setCheckedList(results);\n }\n } else {\n // 打开锁，使用onchange事件处理rowkey变更\n lock.current = true;\n }\n },\n onSelectAll: (selected, selectedRows, changeRows) => {\n // 打开锁，使用onchange事件处理rowkey变更\n lock.current = true;\n },\n checkStrictly: false,\n }}\n />\n
\n \n
\n \n 已选择 {checkedList.length} 个\n
\n 共 {allLength} 个
\n {text}
\n {v}
\n {v}
\n \n \n \n
\n \n \n 服务名称:\n \n {\n setSelectValue(e.target.value);\n if (!e.target.value) {\n queryDataList();\n }\n }}\n onBlur={() => {\n queryDataList(selectValue);\n }}\n onPressEnter={() => {\n queryDataList(selectValue);\n }}\n suffix={\n !selectValue && (\n
\n \n ({\n // // is_continue的不能选中\n // disabled: !record.is_continue,\n // })}\n rowSelection={{\n onChange: (selectedRowKeys, selectedRows, select, lll) => {\n // 全选动作交给onchange事件\n if (lock.current) {\n setRows(selectedRowKeys);\n setCheckedList(formatCheckedListData(selectedRows));\n // 关闭锁，下次事件触发时优先使用onselect处理rowkey变更\n lock.current = false;\n }\n },\n selectedRowKeys: rows,\n onSelect: (record, selected, selectedRows) => {\n if (record.isChildren) {\n if (selected) {\n for (const item of dataSource) {\n if (item.instance_name == record.isChildren) {\n let results = item.children.filter(\n (i) => i.ip == record.ip\n );\n // results是当前点击要变动的\n // row中原本的数据不应该改变\n // row原本数据不改变,考虑到每次都是直接选中全部ip的项，也不会出现选中已经选中项的情况\n setRows((r) => {\n return [...r, ...results.map((k) => k.instance_name)];\n });\n setCheckedList((checks) => {\n return formatCheckedListData([...checks, ...results]);\n });\n break;\n }\n }\n } else {\n // 删除掉和record 父级和ip一样的项\n let checkedListCopy = JSON.parse(\n JSON.stringify(checkedList)\n );\n let results = formatCheckedListData(\n checkedListCopy.filter(\n (i) =>\n i.ip !== record.ip ||\n i.isChildren !== record.isChildren\n )\n );\n\n setRows(results.map((i) => i.instance_name));\n setCheckedList(results);\n }\n } else {\n // 打开锁，使用onchange事件处理rowkey变更\n lock.current = true;\n }\n },\n onSelectAll: (selected, selectedRows, changeRows) => {\n // 打开锁，使用onchange事件处理rowkey变更\n lock.current = true;\n },\n checkStrictly: false,\n }}\n />\n
\n \n
\n \n 已选择 {checkedList.length} 个\n
\n 共 {allLength} 个
\n \n {instance_name} \n
\n\n {renderStatus[status]}
\n \n {\n if (openName == `${title}=${ip}`) {\n setOpenName(\"\");\n } else {\n setOpenName(`${title}=${ip}`);\n }\n }}\n >\n 查看详细升级信息\n
\n \n \n \n \n \n
\n \n\n \n {data?.upgrade_detail?.map((item, idx) => {\n return (\n
\n \n {\n let con = document.getElementById(\"Step4Wrapper\");\n return con;\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n >\n {data?.upgrade_detail?.map((item, idx) => {\n let hasError =\n item.upgrade_details.filter((a) => a.upgrade_state == 3)\n .length !== 0;\n return (\n
\n \n \n \n \n {item.service_name}\n \n }\n />\n
\n );\n })}\n \n \n
\n \n {renderStatus[data.upgrade_state]}\n {(data.upgrade_state == 0 ||\n data.upgrade_state == 1 ||\n data.upgrade_state == 4) && (\n
\n \n
\n \n {data.upgrade_state == 3 && (\n <>\n {\n setRowId(location?.state?.history);\n // retryUpgrade();\n setVfModalVisibility(true)\n }}\n >\n 回滚\n \n {\n retryUpgrade();\n }}\n >\n 重试\n \n \n )}\n\n {\n history.push({\n pathname: \"/application_management/install-record\",\n state: {\n tabKey: \"upgrade\",\n },\n });\n }}\n >\n 完成\n \n
\n \n \n \n
\n \n {\n history.push({\n pathname: \"/application_management/install-record\",\n state: {\n tabKey: \"upgrade\",\n },\n });\n }}\n />\n 服务升级\n
\n \n \n \n
\n )}\n \n \n {info[nameObj[tabKey].logo] ? (\n
\n ) : (\n \n {info[nameObj[tabKey].name] &&\n info[nameObj[tabKey].name][0].toLocaleUpperCase()}\n
\n \n {info[nameObj[tabKey].name]}\n
\n \n {/*