宕机中心优化：

1. 调整宕机详情页面部分组件位置；
2. 优化相似调用栈列表显示；
3. 修改宕机分析名称为宕机中心

sysom_web/src/locales/zh-CN/menu.js

@@ -7,7 +7,7 @@ export default {
   'menu.monitor.': '监控中心',
   'menu.monitor.dashboard': '系统监控',
   'menu.monitor.netinfo': 'NetInfo',
-  'menu.vmcore': '宕机分析',
+  'menu.vmcore': '宕机中心',
   'menu.vmcore.list': '宕机列表',
   'menu.vmcore.search': '宕机查询',
   'menu.vmcore.match': '宕机匹配',

sysom_web/src/pages/Welcome.jsx

@@ -8,7 +8,7 @@ const { Header, Content } = Layout;
 
 const imgBanner = [
   {key:1,banner:"#1a2933",title:"主机管理",urls:'/host',des:""},
-  {key:2,banner:"#1a2933",title:"宕机分析",urls:'/vmcore',des:""},
+  {key:2,banner:"#1a2933",title:"宕机中心",urls:'/vmcore',des:""},
   {key:4,banner:"#1a2933",title:"监控中心",urls:'/monitor',des:""},
   {key:3,banner:"#1a2933",title:"诊断中心",urls:'/diagnose',des:""},
   {key:5,banner:"#1a2933",title:"安全中心",urls:'/security',des:""},
@@ -28,7 +28,7 @@ const Welcome = () => {
           <SubMenu key="monitor" title="监控中心">
             <Menu.Item key="dashboard"><a href="/monitor/dashboard">系统监控</a></Menu.Item>
           </SubMenu>
-          <SubMenu key="vmcore" title="宕机分析">
+          <SubMenu key="vmcore" title="宕机中心">
             <Menu.Item key="vmlist"><a href="/vmcore/list">宕机列表</a></Menu.Item>
             <Menu.Item key="vmmatch"><a href="/vmcore/match">宕机匹配</a></Menu.Item>
           </SubMenu>

sysom_web/src/pages/vmcore/Detail/index.jsx

@@ -1,13 +1,18 @@
 import React, { useState, useRef } from "react";
-import { Button, message, Descriptions } from "antd";
+import { Button, message, Descriptions, Popover } from "antd";
-import { Link, useIntl, useRequest } from "umi";
+import { Link, useIntl, useRequest, request } from "umi";
-import moment from "moment";
 import ProCard from "@ant-design/pro-card";
 import ProDescriptions from "@ant-design/pro-descriptions";
 import { PageContainer } from "@ant-design/pro-layout";
 import { ModalForm, ProFormTextArea } from "@ant-design/pro-form";
 import VmcoreTableList from "../components/VmcoreTableList";
-import { getSolution, addIssue, getSimilarPanic, getVmcoreDetail } from "../service";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import {
+  getSolution,
+  addIssue,
+  getSimilarPanic,
+  getVmcoreDetail,
+} from "../service";
 
 const { Divider } = ProCard;
 
@@ -30,9 +35,91 @@ const VmcoreDetail = (props) => {
   const [createModalIssue, handleModalIssue] = useState(false);
   const actionRef = useRef();
   const intl = useIntl();
+  const [similarPanicData, setSimilarPanicData] = useState(0);
   const { data, error, loading } = useRequest(() => {
-    return getVmcoreDetail({vmcore_id: props.match.params.id})
+    return getVmcoreDetail({ vmcore_id: props.match.params.id });
-  })
+  });
+
+  const { datalist } = useRequest(() => {
+    return getVMcoreDetailList();
+  });
+
+  const getVMcoreDetailList = async () => {
+    const msg = await request("/api/v1/vmcore/", {
+      params: { vmcore_id: props.match.params.id, similar: 1 },
+    });
+    setSimilarPanicData({ rawData: msg.data });
+  };
+
+  const firstStackTips = (
+    <div>
+      <div>一层调用栈相似宕机列表，显示只匹配到一层调用栈相似的宕机，</div>
+      <div>如果匹配到有二或三层调用栈相似，将不在此表格显示</div>
+      <div>如无数据，将不显示此表格</div>
+    </div>
+  );
+  const secondStackTips = (
+    <div>
+      <div>二层调用栈相似宕机列表，显示只匹配到二层调用栈相似的宕机，</div>
+      <div>如果匹配到有三层调用栈相似，将不在此表格显示</div>
+      <div>如无数据，将不显示此表格</div>
+    </div>
+  );
+  const thirdStackTips = (
+    <div>
+      <div>三层调用栈相似宕机列表，显示只匹配到三层调用栈相似的宕机，</div>
+      <div>如无数据，将不显示此表格</div>
+    </div>
+  );
+  const issueTips = (
+    <div>
+      <div>如果发现解决此宕机的网址、分析过程或者补丁方案可直接录入，</div>
+      <div>后续一样的宕机问题将会关联到同一个解决方案。</div>
+    </div>
+  );
+
+  const HeaderTitleCommon = (props) => {
+    return (
+      <>
+        {props.title}
+        <Popover content={props.data}>
+          <QuestionCircleOutlined />
+        </Popover>
+      </>
+    );
+  };
+
+  const SimilarPanicTable = (props) => {
+    if (props.calltraceLength > 0) {
+      return (
+        <VmcoreTableList
+          headerTitle={[
+            <HeaderTitleCommon
+              title={props.title}
+              data={props.tips}
+              key={props.childKey}
+            />,
+          ]}
+          pagination={{ pageSize: 5 }}
+          params={props.params}
+          request={props.request}
+          postData={props.postData}
+          search={false}
+        />
+      );
+    } else {
+      return (
+        <ProCard>
+          无
+          <HeaderTitleCommon
+            title={props.title}
+            data={props.tips}
+            key={props.childKey}
+          />
+        </ProCard>
+      );
+    }
+  };
 
   return (
     <PageContainer>
@@ -59,7 +146,13 @@ const VmcoreDetail = (props) => {
         </ModalForm>
         <ProDescriptions
           actionRef={actionRef}
+          title={[
+            <HeaderTitleCommon
               title="解决方案"
+              data={issueTips}
+              key="issueTips"
+            />,
+          ]}
           params={{ vmcore_id: props.match.params.id }}
           request={getSolution}
         >
@@ -80,9 +173,10 @@ const VmcoreDetail = (props) => {
               <Link
                 target="_blank"
                 to={{
-              pathname: '/vmcore/analyse',
+                  pathname: "/vmcore/analyse",
                   search: `kernel_version=${data?.ver}&vmcore_file=${data?.vmcore_file}`,
-            }}>
+                }}
+              >
                 在线分析Vmcore
               </Link>
             </Button>
@@ -90,50 +184,59 @@ const VmcoreDetail = (props) => {
         </ProDescriptions>
       </ProCard>
       <Divider />
-      <VmcoreTableList
+      <ProCard>
-        headerTitle="一层调用栈相似宕机列表"
+        <Descriptions column={2} title="宕机详情">
-        pagination={{ pageSize: 5 }}
+          <Descriptions.Item label="hostname">
+            {data?.hostname}
+          </Descriptions.Item>
+          <Descriptions.Item label="IP">{data?.ip}</Descriptions.Item>
+          <Descriptions.Item label="RIP">{data?.func_name}</Descriptions.Item>
+          <Descriptions.Item label="当前进程">{data?.comm}</Descriptions.Item>
+          <Descriptions.Item label="内核版本">{data?.ver}</Descriptions.Item>
+          <Descriptions.Item label="宕机时间">
+            {data?.core_time}{" "}
+          </Descriptions.Item>
+          <Descriptions.Item label="dmesg">
+            <pre>{data?.dmesg}</pre>
+          </Descriptions.Item>
+        </Descriptions>
+      </ProCard>
+      <Divider />
+      <SimilarPanicTable
+        title="一层相似调用栈"
+        childKey="similarCalltrace1"
+        tips={firstStackTips}
         params={{ vmcore_id: props.match.params.id, similar: 1 }}
         request={getSimilarPanic}
         postData={(data) => {
           return data?.calltrace_1;
         }}
-        search={false}
+        calltraceLength={similarPanicData.rawData?.calltrace_1?.length}
       />
       <Divider />
-      <VmcoreTableList
+      <SimilarPanicTable
-        headerTitle="二层调用栈相似宕机列表"
+        title="二层相似调用栈"
-        pagination={{ pageSize: 5 }}
+        childKey="similarCalltrace2"
+        tips={secondStackTips}
         params={{ vmcore_id: props.match.params.id, similar: 1 }}
         request={getSimilarPanic}
         postData={(data) => {
           return data?.calltrace_2;
         }}
-        search={false}
+        calltraceLength={similarPanicData.rawData?.calltrace_2?.length}
       />
       <Divider />
-      <VmcoreTableList
+      <SimilarPanicTable
-        headerTitle="三层调用栈相似宕机列表"
+        title="三层相似调用栈"
-        pagination={{ pageSize: 5 }}
+        childKey="similarCalltrace3"
+        tips={thirdStackTips}
         params={{ vmcore_id: props.match.params.id, similar: 1 }}
         request={getSimilarPanic}
         postData={(data) => {
           return data?.calltrace_3;
         }}
-        search={false}
+        calltraceLength={similarPanicData.rawData?.calltrace_3?.length}
       />
-      <Divider />
-      <ProCard>
-        <Descriptions column={2} title="宕机详情" >
-          <Descriptions.Item label="hostname">{data?.hostname}</Descriptions.Item>
-          <Descriptions.Item label="IP" >{data?.ip}</Descriptions.Item>
-          <Descriptions.Item label="RIP" >{data?.func_name}</Descriptions.Item>
-          <Descriptions.Item label="当前进程" >{data?.comm}</Descriptions.Item>
-          <Descriptions.Item label="内核版本" >{data?.ver}</Descriptions.Item>
-          <Descriptions.Item label="宕机时间" >{data?.core_time} </Descriptions.Item>
-          <Descriptions.Item label="dmesg"  ><pre>{data?.dmesg}</pre></Descriptions.Item>
-        </Descriptions>
-      </ProCard>
     </PageContainer>
   );
 };