perf(web): 实时告警支持页面表格颜色展示，按钮可控

aide-family · Apr 1, 2024 · f8a4eff · f8a4eff
1 parent 7833c85
commit f8a4eff
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 27 deletions.
diff --git a/web/src/apis/data.tsx b/web/src/apis/data.tsx
@@ -223,7 +223,9 @@ export enum ActionKey {
     /** 测试告警模板 */
     TEST_ALARM_TEMPLATE = '__test_alarm_template__',
     /** 绑定通知模板 */
-    STRATEGY_BIND_NOTIFY_TEMPLATE = '__strategy_bind_notify_template__'
+    STRATEGY_BIND_NOTIFY_TEMPLATE = '__strategy_bind_notify_template__',
+    /** 展示告警行颜色 */
+    ALARM_ROW_COLOR = '__alarm_row_color__'
 }
 
 export {

diff --git a/web/src/context.tsx b/web/src/context.tsx
@@ -32,6 +32,8 @@ export type GlobalContextType = {
     redirectPathName?: string
     setRedirectPathName?: (redirectPathName: string) => void
     ws?: WebSocket
+    reltimeAlarmShowRowColor?: boolean
+    setReltimeAlarmShowRowColor?: (reltimeAlarmShowRowColor: boolean) => void
 }
 
 export const GlobalContext = createContext<GlobalContextType>({

diff --git a/web/src/pages/home/monitor/alarm-realtime/index.tsx b/web/src/pages/home/monitor/alarm-realtime/index.tsx
@@ -29,7 +29,8 @@ const article = '默认展示告警时间前一小时到告警恢复时间段内
 let fetchTimer: NodeJS.Timeout | null = null
 const AlarmRealtime: FC = () => {
     const [queryForm] = Form.useForm()
-    const { size } = useContext(GlobalContext)
+    const { size, reltimeAlarmShowRowColor, setReltimeAlarmShowRowColor } =
+        useContext(GlobalContext)
 
     const [alarmPageList, setAlarmPageList] = useState<DictListItem[]>([])
     const [dataSource, setDataSource] = useState<AlarmRealtimeItem[]>([])
@@ -99,17 +100,14 @@ const AlarmRealtime: FC = () => {
         if (alarmPageIds.length === 0) {
             return
         }
-        const params = queryParams
-        if (!params.alarmPageId) {
-            params.alarmPageId = alarmPageIds[0]
-        }
+
         if (fetchTimer) {
             clearTimeout(fetchTimer)
         }
         fetchTimer = setTimeout(() => {
             setLoading(true)
             alarmRealtimeApi
-                .getAlarmRealtimeList({ ...params })
+                .getAlarmRealtimeList({ ...queryParams })
                 .then((res) => {
                     setDataSource(res.list)
                     setTotal(res.page.total)
@@ -128,9 +126,8 @@ const AlarmRealtime: FC = () => {
         setLoading(true)
         setQueryParams({
             ...queryParams,
-            alarmPageId: +key || 1
+            alarmPageId: +key
         })
-        handleRefresh()
     }
 
     const buildTabsItems = () => {
@@ -169,6 +166,11 @@ const AlarmRealtime: FC = () => {
             case ActionKey.RESET:
                 setQueryParams(defaultAlarmRealtimeListRequest)
                 break
+            case ActionKey.ALARM_ROW_COLOR:
+                setReltimeAlarmShowRowColor?.(!reltimeAlarmShowRowColor)
+                break
+            default:
+                break
         }
     }
 
@@ -228,27 +230,31 @@ const AlarmRealtime: FC = () => {
         }
         delete requestValues.eventAt
         setQueryParams(requestValues)
-        handleRefresh()
     }
 
-    // const onRow = (record?: AlarmRealtimeItem) => {
-    //     if (!record || !record.level) return {}
-    //     const {
-    //         level: { color }
-    //     } = record
-    //     return {
-    //         style: {
-    //             background: color || ''
-    //         }
-    //     }
-    // }
+    const onRow = (record?: AlarmRealtimeItem) => {
+        if (!record || !record.level || !reltimeAlarmShowRowColor) return {}
+        const {
+            level: { color }
+        } = record
+        return {
+            style: {
+                background: color || ''
+            }
+        }
+    }
 
     useEffect(() => {
         handleRefresh()
     }, [queryParams])
 
     useEffect(() => {
         handleCountAlarmByPageIds()
+        const params = queryParams
+        if (!params.alarmPageId) {
+            params.alarmPageId = alarmPageIds[0]
+            setQueryParams(params)
+        }
     }, [alarmPageIds])
 
     useEffect(() => {
@@ -304,7 +310,10 @@ const AlarmRealtime: FC = () => {
             <HeightLine />
             <DataOption
                 queryForm={queryForm}
-                rightOptions={rightOptions(handleGetAlarmPageList)}
+                rightOptions={rightOptions({
+                    refresh: handleGetAlarmPageList,
+                    reltimeAlarmShowRowColor: reltimeAlarmShowRowColor
+                })}
                 action={handleOptionClick}
                 // showAdd={false}
             />
@@ -327,7 +336,7 @@ const AlarmRealtime: FC = () => {
                     loading={loading}
                     operationItems={operationItems}
                     action={handlerTableAction}
-                    // onRow={onRow}
+                    onRow={onRow}
                     pageSize={queryParams?.page?.size}
                     current={queryParams?.page?.curr}
                 />

diff --git a/web/src/pages/home/monitor/alarm-realtime/options.tsx b/web/src/pages/home/monitor/alarm-realtime/options.tsx
@@ -8,7 +8,7 @@ import { DictSelectItem } from '@/apis/home/system/dict/types'
 import { Map } from '@/apis/types'
 import { DataOptionItem } from '@/components/Data/DataOption/DataOption'
 // import { IconFont } from '@/components/IconFont/IconFont'
-import { Badge, Button, MenuProps, Tooltip } from 'antd'
+import { Badge, Button, MenuProps, Space, Switch, Tooltip } from 'antd'
 import { ColumnGroupProps } from 'antd/es/table/ColumnGroup'
 import dayjs from 'dayjs'
 import { SelectAalrmPageModal } from './child/SelectAlarmPageModal'
@@ -146,14 +146,34 @@ export const searchFormItems: SearchFormItem[] = [
     }
 ]
 
-export const rightOptions = (refresh: () => void): DataOptionItem[] => [
+export type refreshHandleFun = () => void
+
+export type rightOptionsType = {
+    refresh: refreshHandleFun
+    reltimeAlarmShowRowColor?: boolean
+}
+
+export const rightOptions = (params: rightOptionsType): DataOptionItem[] => [
+    {
+        label: (
+            <Space>
+                告警行颜色:
+                <Switch
+                    checked={params?.reltimeAlarmShowRowColor}
+                    checkedChildren="开"
+                    unCheckedChildren="关"
+                />
+            </Space>
+        ),
+        key: ActionKey.ALARM_ROW_COLOR
+    },
     {
         key: ActionKey.REFRESH,
         label: <Button type="primary">刷新</Button>
     },
     {
         key: ActionKey.BIND_MY_ALARM_PAGES,
-        label: <SelectAalrmPageModal refresh={refresh} />
+        label: <SelectAalrmPageModal refresh={params.refresh} />
     }
 ]
 

diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
@@ -59,6 +59,10 @@ const Index: React.FC = () => {
         'redirectPathName',
         ''
     )
+    const [reltimeAlarmShowRowColor, setReltimeAlarmShowRowColor] = useStorage(
+        'reltimeAlarmShowRowColor',
+        false
+    )
     const [sysTheme, setSysTheme] = useStorage<ThemeType>('theme', 'light')
     const [intervalId, setIntervalId] = useState<any>()
     const [ws] = useState(createWebSocket(getWsURL()))
@@ -84,7 +88,9 @@ const Index: React.FC = () => {
         setSysTheme: setSysTheme,
         redirectPathName: redirectPathName,
         setRedirectPathName: setRedirectPathName,
-        ws: ws
+        ws: ws,
+        reltimeAlarmShowRowColor: reltimeAlarmShowRowColor,
+        setReltimeAlarmShowRowColor: setReltimeAlarmShowRowColor
     }
 
     return (