refactor: 告警详情页增加恢复时间

n9e · Dec 8, 2021 · a05325b · a05325b
1 parent df1f8ab
commit a05325b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "n9e-fe",
-  "version": "5.0.0-ga-01",
+  "version": "5.0.0-ga-02",
   "scripts": {
     "dev": "vite --port 8765 --host",
     "preinstall": "sh beforeinstall.sh",

diff --git a/src/pages/event/detail.tsx b/src/pages/event/detail.tsx
@@ -68,6 +68,13 @@ const EventDetailPage: React.FC = () => {
       },
     },
     { label: '触发时值', key: 'trigger_value' },
+    {
+      label: '恢复时间',
+      key: 'recover_time',
+      render(time) {
+        return moment((time || 0) * 1000).format('YYYY-MM-DD HH:mm:ss');
+      },
+    },
     {
       label: 'PromQL',
       key: 'prom_ql',
@@ -150,17 +157,6 @@ const EventDetailPage: React.FC = () => {
     const requestPromise = isHistory ? getHistoryEventsById(busiId, eventId) : getAlertEventsById(busiId, eventId);
     requestPromise.then((res) => {
       setEventDetail(res.dat);
-      if (res.dat.is_recovered) {
-        const originDescriptionInfo = descriptionInfo;
-        originDescriptionInfo.splice(8, 0, {
-          label: '恢复时间',
-          key: 'recover_time',
-          render(time) {
-            return moment((time || 0) * 1000).format('YYYY-MM-DD HH:mm:ss');
-          },
-        });
-        setDescriptionInfo(originDescriptionInfo);
-      }
     });
   }, [busiId, eventId]);
 
@@ -208,14 +204,16 @@ const EventDetailPage: React.FC = () => {
             ]}
           >
             {eventDetail &&
-              descriptionInfo.map(({ label, key, render }) => {
-                return (
-                  <div className='desc-row'>
-                    <div className='desc-label'>{label}：</div>
-                    <div className='desc-content'>{render ? render(eventDetail[key], eventDetail) : eventDetail[key]}</div>
-                  </div>
-                );
-              })}
+              descriptionInfo
+                .filter((item) => (eventDetail.is_recovered ? true : item.key !== 'recover_time'))
+                .map(({ label, key, render }) => {
+                  return (
+                    <div className='desc-row'>
+                      <div className='desc-label'>{label}：</div>
+                      <div className='desc-content'>{render ? render(eventDetail[key], eventDetail) : eventDetail[key]}</div>
+                    </div>
+                  );
+                })}
           </Card>
         </Spin>
       </div>