From 76116dded0ca5e5dbe5cedfd3fe4ebb065466724 Mon Sep 17 00:00:00 2001 From: fengfuqiu Date: Wed, 9 Mar 2022 17:42:26 +0800 Subject: [PATCH] commit the oscheck front end --- sysom_web/config/proxy.js | 22 +++- .../src/pages/diagnose/oscheck/index.jsx | 82 ++++++++++++++ .../pages/diagnose/oscheck/osCheckList.jsx | 102 ++++++++++++++++++ .../pages/diagnose/oscheck/osCheckResult.jsx | 67 ++++++++++++ .../diagnose/oscheck/osCheckTaskForm.jsx | 54 ++++++++++ 5 files changed, 326 insertions(+), 1 deletion(-) create mode 100644 sysom_web/src/pages/diagnose/oscheck/index.jsx create mode 100644 sysom_web/src/pages/diagnose/oscheck/osCheckList.jsx create mode 100644 sysom_web/src/pages/diagnose/oscheck/osCheckResult.jsx create mode 100644 sysom_web/src/pages/diagnose/oscheck/osCheckTaskForm.jsx diff --git a/sysom_web/config/proxy.js b/sysom_web/config/proxy.js index 51abb491..46d8c47f 100644 --- a/sysom_web/config/proxy.js +++ b/sysom_web/config/proxy.js @@ -8,11 +8,31 @@ */ export default { dev: { + //'/api/v1/tasks/': { + // 要代理的地址 + //target: 'http://sysom.openanolis.cn', + // 配置了这个可以从 http 代理到 https + // 依赖 origin 的功能可能需要这个，比如 cookie + // changeOrigin: true, + // }, + // localhost:8000/api/** -> https://preview.pro.ant.design/api/** '/api/v1/': { // 要代理的地址 //target: 'https://preview.pro.ant.design', - target: 'http://127.0.0.1:8001', +// target: 'http://127.0.0.1:8001', + target: 'http://sysom.pro', + // 配置了这个可以从 http 代理到 https + // 依赖 origin 的功能可能需要这个，比如 cookie + changeOrigin: true, + }, + + //http://sysom.openanolis.cn/grafana/d/sysom-dashboard/sysom-dashboard?orgId=1&refresh=1m&var-node=127.0.0.1:9100&kiosk=tv + '/grafana/': { + // 要代理的地址 + //target: 'https://preview.pro.ant.design', +// target: 'http://127.0.0.1:8001', + target: 'http://sysom.pro', // 配置了这个可以从 http 代理到 https // 依赖 origin 的功能可能需要这个，比如 cookie changeOrigin: true, diff --git a/sysom_web/src/pages/diagnose/oscheck/index.jsx b/sysom_web/src/pages/diagnose/oscheck/index.jsx new file mode 100644 index 00000000..43a896eb --- /dev/null +++ b/sysom_web/src/pages/diagnose/oscheck/index.jsx @@ -0,0 +1,82 @@ +import { PageContainer } from '@ant-design/pro-layout'; +import { useState, useRef } from 'react'; +import ProCard from '@ant-design/pro-card'; +import OSCheckTaskForm from './osCheckTaskForm'; +import OSCheckTaskResult from './osCheckResult' +import OSCheckList from './osCheckList'; +import { _getTask } from '../service' + +const { Divider } = ProCard; + +const NetList = () => { + + const refOSCheckList = useRef(); + const [osCheckResult, setOsCheckResult] = useState(); + + const onPostTask = () => { + refOSCheckList.current.reload(); + } + + + const onListClick = async (record) => { + let map = { + CONFIG: "配置检查", + HW: "硬件检查", + ISSUE: "已知问题检查", + LOG: "日志检查", + SLI: "SLI检查", + CPU: "CPU", + MEM: "内存", + NET: "网络", + IO: "IO", + SCHED: "调度", + HOTFIX: "热补丁", + MISC: "其他", + DMESG: "dmesg", + CRIT: "Critical", + ERR: "Error", + WARN: "Warnning", + CRASH: "宕机" + } + + const msg = await _getTask(record.id); + + const statusLevelList = ["none", "info", "warning", "error", "critical", "fatal"] + const statusLevelMap = { none: 0, info: 1, warning: 2, error: 3, critical: 4, fatal: 5 } + + //格式转换， 转换为Antd Table格式 + delete msg.result.check_success + let osCheckResult = [] + for (let type in msg.result) { + let children = [] + let maxStatusLevel = 0; + for (let item in msg.result[type]) { + msg.result[type][item].summary = "fefef
" + msg.result[type][item].summary + children.push({ ...msg.result[type][item], item: map[item], key: type + item }) + maxStatusLevel = maxStatusLevel < statusLevelMap[msg.result[type][item].level] ? + statusLevelMap[msg.result[type][item].level] : maxStatusLevel + } + osCheckResult.push({ + children: children, item: map[type], summary: "", + level: statusLevelList[maxStatusLevel], key: type + }) + } + + setOsCheckResult(osCheckResult); + } + + return ( + + + + + + { + osCheckResult ? : <> + } + + ); +}; + +export default NetList; diff --git a/sysom_web/src/pages/diagnose/oscheck/osCheckList.jsx b/sysom_web/src/pages/diagnose/oscheck/osCheckList.jsx new file mode 100644 index 00000000..64ad396a --- /dev/null +++ b/sysom_web/src/pages/diagnose/oscheck/osCheckList.jsx @@ -0,0 +1,102 @@ +import React, { useRef } from "react"; +import ProTable from "@ant-design/pro-table"; +import { getTaskList } from "../service"; + +import { Button } from "antd"; + +function parseJsonString(str) { + try { + return JSON.parse(str.replace(/\'/g, "\"")); + } + catch (e) { + return {} + } +} + +const getOsCheckList = async () => { + try { + let msg = await getTaskList({ service_name: "ossre" }); + msg.data = msg.data.map((item) => ({ ...item, ...parseJsonString(item.params) })) + return { + data: msg.data.reverse(), + success: true, + total: msg.total, + }; + } catch (e) { + return { success: false } + } +} + + +const DiagnoTableList = React.forwardRef((props, ref) => { + + + const columns = [ + { + title: "实例IP", + dataIndex: "实例IP", + valueType: "textarea" + }, + { + title: "创建时间", + sortOrder: "descend", + dataIndex: "created_at", + valueType: "dateTime", + }, + { + title: "OSCheckTaskId", + dataIndex: "task_id", + valueType: "textarea", + }, + { + title: '状态', + dataIndex: 'status', + valueEnum: { + Ready: { text: '运行中', status: 'Processing' }, + Success: { text: '诊断完毕', status: 'Success' }, + Fail: { text: '异常', status: 'Error' }, + }, + }, + { + title: "操作", + dataIndex: "option", + valueType: "option", + render: (_, record) => { + if (record.status == "Success") { + return ( + { + props?.onClick?.(record) + }}>查看诊断结果 + ) + } + else if (record.status == "Fail") { + return ( + { + props?.onError?.(record) + }}>查看出错信息 + ) + } + else { + return (暂无可用操作); + } + }, + } + ]; + +// pagination={{ pageSize: 5 }} + return ( + + ); +}); + +export default DiagnoTableList; diff --git a/sysom_web/src/pages/diagnose/oscheck/osCheckResult.jsx b/sysom_web/src/pages/diagnose/oscheck/osCheckResult.jsx new file mode 100644 index 00000000..f957e65d --- /dev/null +++ b/sysom_web/src/pages/diagnose/oscheck/osCheckResult.jsx @@ -0,0 +1,67 @@ +import React from "react"; +import ProTable from "@ant-design/pro-table"; + + +const DiagnoTableList = React.forwardRef((props, ref) => { + + const columns = [ + { + title: "检查项目", + dataIndex: "item", + valueType: "textarea", + width: 200, + }, + { + title: '状态', + dataIndex: 'level', + width: 100, + valueEnum: { + none: { text: '正常', status: 'Success' }, + info: { text: '提示', status: 'Warning' }, + warning: { text: '告警', status: 'Warning' }, + error: { text: '一般错误', status: 'Error' }, + critical: { text: '严重错误', status: 'Error' }, + fatal: { text: '致命错误', status: 'Error' }, + }, + }, + { + title: "检查结果", + dataIndex: "summary", + valueType: "textarea", + ellipsis: true, + }, + { + title: "操作", + dataIndex: "option", + valueType: "option", + width: 200, + render: (_, record) => { + if (record.level != "none") { + return ( + { + props?.onRepair?.(record) + }}>自动修复 + ) + } + else { + return (); + } + }, + } + ]; + + // defaultExpandAllRows={true} + return ( + + ); +}); + +export default DiagnoTableList; diff --git a/sysom_web/src/pages/diagnose/oscheck/osCheckTaskForm.jsx b/sysom_web/src/pages/diagnose/oscheck/osCheckTaskForm.jsx new file mode 100644 index 00000000..bb0dc0ac --- /dev/null +++ b/sysom_web/src/pages/diagnose/oscheck/osCheckTaskForm.jsx @@ -0,0 +1,54 @@ +import ProForm, { ProFormText, } from '@ant-design/pro-form'; +import { Button } from 'antd'; +import { useRequest } from 'umi'; +import ProCard from '@ant-design/pro-card'; +import { postTask } from '../service' + +export default (props) => { + const { loading, error, run } = useRequest(postTask, { + manual: true, + onSuccess: (result, params) => { + console.log(result); + props?.onSuccess?.(result, params); + }, + }); + + return ( + + + { + run(values) + }} + submitter={{ + submitButtonProps: { + style: { + display: 'none', + }, + }, + resetButtonProps: { + style: { + display: 'none', + }, + }, + }} + layout={"horizontal"} + autoFocusFirstInput + > + + + ) +} \ No newline at end of file -- Gitee