Merge pull request #918 from n9e/refactor-event-0822

Refactor event 0822
n9e · Aug 26, 2024 · 29c54b6 · 29c54b6
2 parents 2c557f4 + 40a3574
commit 29c54b6
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 16 deletions.
diff --git a/src/components/Feedback/index.tsx b/src/components/Feedback/index.tsx
@@ -1,24 +1,78 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { SmileOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import queryString from 'query-string';
+import { useGetState } from 'ahooks';
 import './style.less';
 import './locale';
 
-export default function index() {
+const cacheKey = 'n9e-feedback-position-bottom';
+const getCacheBottom = () => {
+  const bottom = localStorage.getItem(cacheKey);
+  return bottom ? parseInt(bottom, 10) : 24;
+};
+const setCacheBottom = (bottom: number) => {
+  localStorage.setItem(cacheKey, bottom.toString());
+};
+
+export default function Index() {
   const { t } = useTranslation('Feedback');
   const location = useLocation();
   const query = queryString.parse(location.search);
 
+  const [position, setPosition] = useState({ right: -4, bottom: getCacheBottom() });
+  const [isDragging, setIsDragging, getIsDragging] = useGetState(false);
+  const [isMoving, setIsMoving] = useState(false);
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      if (getIsDragging()) {
+        const newBottom = window.innerHeight - event.clientY - 24;
+        setPosition((prevPosition) => ({
+          ...prevPosition,
+          bottom: newBottom,
+        }));
+        setIsMoving(true);
+        setCacheBottom(newBottom);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+
+  const handleMouseDown = () => {
+    setIsDragging(true);
+  };
+
   if (import.meta.env.VITE_IS_ENT !== 'true' && import.meta.env.VITE_IS_PRO !== 'true' && query?.viewMode !== 'fullscreen') {
     return (
-      <a href='https://c9xudyniiq.feishu.cn/share/base/form/shrcnpCTOJ1CCmNhfCx4aEsP8Vf' target='_blank'>
-        <div className='n9e-feedback-container'>
-          <SmileOutlined />
-          <div className='n9e-feedback-text'>{t('feedback')}</div>
-        </div>
-      </a>
+      <div
+        draggable={false}
+        className='n9e-feedback-container'
+        style={{ position: 'absolute', right: position.right, bottom: position.bottom }}
+        onMouseDown={handleMouseDown}
+        onClick={() => {
+          if (!isMoving) {
+            window.open('https://c9xudyniiq.feishu.cn/share/base/form/shrcnpCTOJ1CCmNhfCx4aEsP8Vf');
+          } else {
+            setIsMoving(false);
+          }
+        }}
+      >
+        <SmileOutlined />
+        <div className='n9e-feedback-text'>{t('feedback')}</div>
+      </div>
     );
   }
   return null;

diff --git a/src/components/Feedback/style.less b/src/components/Feedback/style.less
@@ -1,4 +1,6 @@
 .n9e-feedback-container {
+  width: 38px;
+  height: 82px;
   padding: 16px 8px;
   position: fixed;
   right: -4px;
@@ -13,6 +15,8 @@
   border-bottom-left-radius: 8px;
   color: #fff;
   font-size: 14px;
+  user-select: none;
+  cursor: pointer;
 }
 .n9e-feedback-text {
   writing-mode: vertical-rl;

diff --git a/src/pages/alertRules/services.ts b/src/pages/alertRules/services.ts
@@ -21,5 +21,6 @@ import { RequestMethod } from '@/store/common';
 export const getAlertRulePure = (id: number) => {
   return request(`/api/n9e/alert-rule/${id}/pure`, {
     method: RequestMethod.Get,
+    silence: true,
   }).then((res) => res.dat);
 };
diff --git a/src/pages/event/detail.tsx b/src/pages/event/detail.tsx
@@ -147,14 +147,21 @@ const EventDetailPage: React.FC = () => {
     },
     ...(!_.includes(['firemap', 'northstar'], eventDetail?.rule_prod) ? [{ label: t('detail.target_note'), key: 'target_note' }] : [false]),
     {
-      label: t('detail.trigger_time'),
-      key: 'trigger_time',
+      label: t('detail.first_trigger_time'),
+      key: 'first_trigger_time',
       render(time) {
         return moment(time * 1000).format('YYYY-MM-DD HH:mm:ss');
       },
     },
     {
-      label: t('detail.trigger_value'),
+      label: t('detail.last_eval_time'),
+      key: 'last_eval_time',
+      render(time) {
+        return moment(time * 1000).format('YYYY-MM-DD HH:mm:ss');
+      },
+    },
+    {
+      label: eventDetail.is_recovered ? t('detail.trigger_value') : t('detail.trigger_value2'),
       key: 'trigger_value',
       render(val) {
         return (

diff --git a/src/pages/event/locale/en_US.ts b/src/pages/event/locale/en_US.ts
@@ -54,7 +54,10 @@ const en_US = {
     tags: 'Tags',
     target_note: 'Target Note',
     trigger_time: 'Triggered',
-    trigger_value: 'Trigger Value',
+    first_trigger_time: 'First Triggered',
+    last_eval_time: 'Last Evaluated',
+    trigger_value: 'Last Triggered Value',
+    trigger_value2: 'Triggered Value',
     recover_time: 'Recover Time',
     rule_algo: 'Alert Type',
     rule_algo_anomaly: 'Anomaly',

diff --git a/src/pages/event/locale/zh_CN.ts b/src/pages/event/locale/zh_CN.ts
@@ -54,7 +54,10 @@ const zh_CN = {
     tags: '事件标签',
     target_note: '对象备注',
     trigger_time: '触发时间',
-    trigger_value: '触发时值',
+    first_trigger_time: '首次触发时间',
+    last_eval_time: '本次检测时间',
+    trigger_value: '上次异常触发时值',
+    trigger_value2: '触发时值',
     recover_time: '恢复时间',
     rule_algo: '告警方式',
     rule_algo_anomaly: '智能告警',

diff --git a/src/pages/event/locale/zh_HK.ts b/src/pages/event/locale/zh_HK.ts
@@ -52,7 +52,10 @@ const zh_HK = {
     tags: '事件標籤',
     target_note: '機器備註',
     trigger_time: '觸發時間',
-    trigger_value: '觸發時值',
+    first_trigger_time: '首次觸發時間',
+    last_eval_time: '本次檢測時間',
+    trigger_value: '上次異常觸發時值',
+    trigger_value2: '觸發時值',
     recover_time: '恢復時間',
     rule_algo: '告警方式',
     rule_algo_anomaly: '智慧告警',

diff --git a/src/pages/historyEvents/index.tsx b/src/pages/historyEvents/index.tsx
@@ -136,8 +136,8 @@ const Event: React.FC = () => {
       },
     },
     {
-      title: t('trigger_time'),
-      dataIndex: 'trigger_time',
+      title: t('last_eval_time'),
+      dataIndex: 'last_eval_time',
       width: 120,
       render(value) {
         return moment((value ? value : 0) * 1000).format('YYYY-MM-DD HH:mm:ss');

diff --git a/src/pages/historyEvents/locale/en_US.ts b/src/pages/historyEvents/locale/en_US.ts
@@ -4,6 +4,7 @@ const en_US = {
   search_placeholder: 'multiple keywords separated by spaces',
   first_trigger_time: 'First Triggered',
   trigger_time: 'Triggered',
+  last_eval_time: 'Last Evaluated',
   hours: {
     6: 'Last 6 Hours',
     12: 'Last 12 Hours',

diff --git a/src/pages/historyEvents/locale/zh_CN.ts b/src/pages/historyEvents/locale/zh_CN.ts
@@ -4,6 +4,7 @@ const zh_CN = {
   search_placeholder: '模糊搜索规则和标签(多个关键词请用空格分隔)',
   first_trigger_time: '首次触发时间',
   trigger_time: '触发时间',
+  last_eval_time: '检测时间',
   hours: {
     6: '最近 6 小时',
     12: '最近 12 小时',

diff --git a/src/pages/historyEvents/locale/zh_HK.ts b/src/pages/historyEvents/locale/zh_HK.ts
@@ -4,6 +4,7 @@ const zh_HK = {
   search_placeholder: '模糊搜尋規則和標籤 (多個關鍵詞請用空格分隔)',
   first_trigger_time: '首次觸發時間',
   trigger_time: '觸發時間',
+  last_eval_time: '檢測時間',
   hours: {
     '6': '最近 6 小時',
     '12': '最近 12 小時',

diff --git a/src/services/dashboardV2.ts b/src/services/dashboardV2.ts
@@ -157,6 +157,7 @@ export const getBuiltinDashboard = function (data) {
 export const getDashboardPure = function (id: string) {
   return request(`/api/n9e/board/${id}/pure`, {
     method: RequestMethod.Get,
+    silence: true,
   }).then((res) => {
     return res.dat;
   });