增加容器健康检查

src/pages/error/index.less

@@ -9,4 +9,44 @@
     height: calc(100vh - 80px);
     overflow-y: auto;
   }
+
+  .code-box {
+    position: relative;
+    display: inline-block;
+    width: 80%;
+    margin: 16px;
+    background-color: #ffffff;
+    border: 1px solid rgba(5, 5, 5, 0.06);
+    border-radius: 6px;
+    -webkit-transition: all 0.2s;
+    transition: all 0.2s;
+    border-radius: 6px 6px 0 0;
+    color: rgba(0, 0, 0, 0.88);
+    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+
+    .browser-markup {
+      position: relative;
+      border-top: 2em solid rgba(230, 230, 230, 0.7);
+      border-radius: 3px 3px 0 0;
+
+      &::before {
+        position: absolute;
+        top: -1.25em;
+        left: 1em;
+        display: block;
+        width: 0.5em;
+        height: 0.5em;
+        background-color: #f44;
+        border-radius: 50%;
+        box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
+        content: '';
+      }
+    }
+
+    .log {
+      height: calc(100vh - 150px);
+      overflow-y: auto;
+      padding: 12px;
+    }
+  }
 }

src/pages/error/index.tsx

@@ -1,43 +1,37 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import config from '@/utils/config';
 import { request } from '@/utils/http';
-import Terminal, { ColorMode, LineType } from '../../components/terminal';
 import { PageLoading } from '@ant-design/pro-layout';
 import { history, useOutletContext } from '@umijs/max';
-import Ansi from 'ansi-to-react';
 import './index.less';
 import { SharedContext } from '@/layouts';
+import { Alert, Typography } from 'antd';
 
 const Error = () => {
   const { user, theme, reloadUser } = useOutletContext<SharedContext>();
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState('暂无日志');
+  const retryTimes = useRef(1);
 
-  const getTimes = () => {
-    return parseInt(localStorage.getItem('error_retry_times') || '0', 10);
-  };
-
-  let times = getTimes();
+  console.log(retryTimes.current);
 
   const getLog = (needLoading: boolean = true) => {
     needLoading && setLoading(true);
     request
-      .get(`${config.apiPrefix}public/panel/log`)
-      .then(({ code, data }) => {
-        if (code === 200) {
-          setData(data);
-          if (!data) {
-            times = getTimes();
-            if (times > 5) {
-              return;
-            }
-            localStorage.setItem('error_retry_times', `${times + 1}`);
-            setTimeout(() => {
-              reloadUser();
-              getLog(false);
-            }, 3000);
-          }
+      .get(`${config.apiPrefix}public/health`)
+      .then(({ status, error }) => {
+        if (status === 1) {
+          return reloadUser();
         }
+        if (retryTimes.current > 3) {
+          return;
+        }
+        setData(error.details);
+        retryTimes.current += 1;
+        setTimeout(() => {
+          reloadUser();
+          getLog(false);
+        }, 3000);
       })
       .finally(() => needLoading && setLoading(false));
   };
@@ -56,24 +50,16 @@ const Error = () => {
     <div className="error-wrapper">
       {loading ? (
         <PageLoading />
-      ) : data ? (
-        <Terminal
-          name="服务错误"
-          colorMode={theme === 'vs-dark' ? ColorMode.Dark : ColorMode.Light}
-          lineData={[
-            { type: LineType.Input, value: 'pm2 logs panel' },
-            {
-              type: LineType.Output,
-              value: (
-                <pre>
-                  <Ansi>{data}</Ansi>
-                </pre>
-              ),
-            },
-          ]}
-        />
-      ) : times > 5 ? (
-        <>服务启动超时，请手动进入容器执行 ql -l check 后刷新再试</>
+      ) : retryTimes.current < 3 ? (
+        <div className="code-box">
+          <div className="browser-markup"></div>
+          <Alert
+            type="error"
+            message="服务启动超时，请检查如下日志或者进入容器执行 ql -l check 后刷新再试"
+            banner
+          />
+          <Typography.Paragraph className="log">{data}</Typography.Paragraph>
+        </div>
       ) : (
         <PageLoading tip="启动中，请稍后..." />
       )}