feat: 新增日志规则列表和接入数据库列表

CloudDetail · Oct 15, 2024 · 6863af5 · 6863af5
1 parent 159f0c9
commit 6863af5
Show file tree

Hide file tree

Showing 14 changed files with 361 additions and 58 deletions.
diff --git a/frontend/src/contexts/LogsContext.js b/frontend/src/contexts/LogsContext.js
@@ -3,6 +3,7 @@ import {
   getFullLogApi,
   getFullLogChartApi,
   getLogIndexApi,
+  // @ts-ignore
   getLogRuleApi,
   getLogTableInfoAPi,
 } from 'src/api/logs'
@@ -15,6 +16,7 @@ export const useLogsContext = () => useContext(LogsContext)
 export const LogsProvider = ({ children }) => {
   const [state, dispatch] = useReducer(logsReducer, logsInitialState)
   const fetchData = async ({ startTime, endTime }) => {
+    // @ts-ignore
     dispatch({ type: 'updateLoading', payload: true })
 
     try {
@@ -25,6 +27,7 @@ export const LogsProvider = ({ children }) => {
         pageSize: state.pagination.pageSize,
         tableName: state.tableInfo?.tableName,
         dataBase: state.tableInfo?.dataBase,
+        timeField: state.tableInfo?.timeField,
         query: state.query,
       }
 
@@ -33,16 +36,22 @@ export const LogsProvider = ({ children }) => {
         getFullLogChartApi(params),
         // getLogRuleApi({ tableName: 'test_logs', dataBase: 'default' }),
       ])
+      // @ts-ignore
       let defaultFields = (res1?.defaultFields ?? []).sort()
+      // @ts-ignore
       let hiddenFields = (res1?.hiddenFields ?? []).sort()
+      // @ts-ignore
       dispatch({
         type: 'setLogState',
         payload: {
+          // @ts-ignore
           logs: res1?.logs ?? [],
           defaultFields: defaultFields,
           hiddenFields: hiddenFields,
+          // @ts-ignore
           logsChartData: res2?.histograms ?? [],
           pagination: {
+            // @ts-ignore
             total: res2?.count ?? 0,
             pageIndex: state.pagination.pageIndex,
             pageSize: state.pagination.pageSize,
@@ -52,6 +61,7 @@ export const LogsProvider = ({ children }) => {
       })
     } catch (error) {
       console.error('请求出错:', error)
+      // @ts-ignore
       dispatch({
         type: 'setLogState',
         payload: {
@@ -68,6 +78,7 @@ export const LogsProvider = ({ children }) => {
         },
       })
     } finally {
+      // @ts-ignore
       dispatch({ type: 'updateLoading', payload: false })
     }
   }
@@ -83,9 +94,11 @@ export const LogsProvider = ({ children }) => {
         query: state.query,
       })
 
+      // @ts-ignore
       dispatch({
         type: 'updateFieldIndexMap',
         payload: {
+          // @ts-ignore
           [column]: res.indexs,
         },
       })
@@ -99,16 +112,22 @@ export const LogsProvider = ({ children }) => {
 
   const getLogTableInfo = () => {
     getLogTableInfoAPi().then((res) => {
-      const dataBase = Object.keys(res.logTables)[0]
-      const tableList = res.logTables[dataBase][0]
-      dispatch({
-        type: 'updateTableInfo',
-        payload: {
-          dataBase: dataBase,
-          tableName: tableList?.tableName,
-          cluster: tableList?.cluster,
-        },
-      })
+      // @ts-ignore
+      dispatch({ type: 'setLogRules', payload: res.parses ?? [] })
+      // @ts-ignore
+
+      dispatch({ type: 'setInstances', payload: res.instances ?? [] })
+      if (res?.parses?.length > 0) {
+        // @ts-ignore
+        dispatch({
+          type: 'updateTableInfo',
+          payload: {
+            dataBase: res.parses[0].dataBase,
+            tableName: res.parses[0].tableName,
+            parseName: res.parses[0]?.parseName,
+          },
+        })
+      }
     })
   }
   useEffect(() => {
@@ -126,16 +145,30 @@ export const LogsProvider = ({ children }) => {
       loading: state.loading,
       fieldIndexMap: state.fieldIndexMap,
       tableInfo: state.tableInfo,
+      logRules: state.logRules,
+      instances: state.instances,
       fetchData,
       getFieldIndexData,
+      // @ts-ignore
       updateLogs: (logs) => dispatch({ type: 'setLogs', payload: logs }),
       updateLogsPagination: (pagination) =>
+        // @ts-ignore
         dispatch({ type: 'setPagination', payload: { ...state.pagination, ...pagination } }),
+      // @ts-ignore
       updateLogsChartData: (data) => dispatch({ type: 'setLogsChartData', payload: data }),
+      // @ts-ignore
       updateDefaultFields: (data) => dispatch({ type: 'updateDefaultFields', payload: data }),
+      // @ts-ignore
       updateHiddenFields: (data) => dispatch({ type: 'updateHiddenFields', payload: data }),
+      // @ts-ignore
       updateQuery: (data) => dispatch({ type: 'updateQuery', payload: data }),
-      updateTableName: (data) => dispatch({ type: 'updateTableName', payload: data }),
+      // @ts-ignore
+      updateTableInfo: (data) => dispatch({ type: 'updateTableInfo', payload: data }),
+      // @ts-ignore
+      setLogRules: (data) => dispatch({ type: 'setLogRules', payload: data }),
+      // @ts-ignore
+      setInstances: (data) => dispatch({ type: 'setInstances', payload: data }),
+      // @ts-ignore
       clearFieldIndexMap: () => dispatch({ type: 'clearFieldIndexMap' }),
     }),
     [
@@ -148,8 +181,11 @@ export const LogsProvider = ({ children }) => {
       state.loading,
       state.fieldIndexMap,
       state.tableInfo,
+      state.logRules,
+      state.instances,
     ],
   )
 
+  // @ts-ignore
   return <LogsContext.Provider value={memoizedValue}>{children}</LogsContext.Provider>
 }
diff --git a/frontend/src/store/reducers/logsReducer.js b/frontend/src/store/reducers/logsReducer.js
@@ -2,9 +2,14 @@ export const logsInitialState = {
   tableInfo: {
     dataBase: '',
     tableName: '',
+    parseName: '',
+
     cluster: '',
+    instanceName: '',
+    timeField: '',
   },
-  logRule: {},
+  logRules: [],
+  instances: [],
   logs: [],
   pagination: {
     pageIndex: 1,
@@ -48,6 +53,10 @@ const logsReducer = (state = logsInitialState, action) => {
     case 'updateFieldIndexMap':
       //增量更新
       return { ...state, fieldIndexMap: { ...state.fieldIndexMap, ...action.payload } }
+    case 'setLogRules':
+      return { ...state, logRules: action.payload }
+    case 'setInstances':
+      return { ...state, instances: action.payload }
     case 'clearFieldIndexMap':
       return { ...state, fieldIndexMap: {} }
     default:

diff --git a/frontend/src/views/logs/component/FullLogs/component/IndexList/index.jsx b/frontend/src/views/logs/component/FullLogs/component/IndexList/index.jsx
@@ -28,7 +28,7 @@ const IndexList = () => {
     <>
       <Collapse
         items={items}
-        defaultActiveKey={['base']}
+        defaultActiveKey={['base', 'log']}
         size="small"
         className="indexList h-full overflow-hidden"
       />

diff --git a/...component/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogItemDetail.jsx b/...component/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogItemDetail.jsx
@@ -1,9 +1,10 @@
 import { Tag } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useLogsContext } from 'src/contexts/LogsContext'
-import LogTag from './LogTag'
+import LogKeyTag from './LogKeyTag'
 const LogItemDetail = ({ log }) => {
   const [contentInfo, setContentInfo] = useState({})
+  const { tableInfo } = useLogsContext()
   useEffect(() => {
     try {
       const obj = JSON.parse(log.content)
@@ -23,7 +24,10 @@ const LogItemDetail = ({ log }) => {
   return (
     <div className=" ">
       {Object.entries(contentInfo).map(([key, value]) => (
-        <LogTag key={key} title={key} description={value} />
+        <LogKeyTag key={key} title={key} description={value} />
+      ))}
+      {Object.entries(log.tags).map(([key, value]) => (
+        <LogKeyTag key={key} title={key} description={value} />
       ))}
     </div>
   )

diff --git a/...s/component/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogItemFold.jsx b/...s/component/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogItemFold.jsx
@@ -1,28 +1,25 @@
 import { Tag, Tooltip } from 'antd'
 import React, { useEffect, useState } from 'react'
 import LogTagDropDown from './LogTagDropdown'
-const LogItemFold = ({ log }) => {
+import { useLogsContext } from 'src/contexts/LogsContext'
+import LogValueTag from './LogValueTag'
+const LogItemFold = ({ tags }) => {
+  const { tableInfo } = useLogsContext()
   return (
-    <div className=" overflow-hidden whitespace-nowrap text-ellipsis text-wrap line-clamp-2 flex">
-      {Object.entries(log.tags).map(
-        ([key, value]) =>
-          value &&
-          key !== 'timestamp' && (
-            <div key={key}>
-              <LogTagDropDown
-                objKey={key}
-                value={value}
-                children={
-                  <Tooltip title={key + '= "' + value + '"'} key={key}>
-                    <Tag className="max-w-[200px] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer text-gray-400">
-                      {value}
-                    </Tag>
-                  </Tooltip>
-                }
-              ></LogTagDropDown>
-            </div>
-          ),
-      )}
+    <div
+      className=" overflow-hidden text-ellipsis text-wrap line-clamp-2 flex"
+      style={{ display: '-webkit-box' }}
+    >
+      {Object.entries(tags).map(([key, value]) => {
+        if (
+          value !== '' && // 确保 value 存在且非空
+          key !== (tableInfo?.timeField || 'timestamp') && // 排除与 timeField 相同的键
+          typeof value !== 'object' // 确保 value 不是对象
+        ) {
+          return <LogValueTag key={key} objKey={key} value={value} />
+        }
+        return null // 不符合条件时返回 null
+      })}
     </div>
   )
 }

diff --git a/...lt/QueryList/LogItem/component/LogTag.jsx → ...QueryList/LogItem/component/LogKeyTag.jsx b/...lt/QueryList/LogItem/component/LogTag.jsx → ...QueryList/LogItem/component/LogKeyTag.jsx
@@ -1,8 +1,8 @@
 import { Tag } from 'antd'
 import React from 'react'
 import LogTagDropDown from './LogTagDropdown'
-
-const LogTag = (props) => {
+//Key 作为log内容
+const LogKeyTag = (props) => {
   const { title, description } = props
   return (
     <div className="flex">
@@ -18,4 +18,4 @@ const LogTag = (props) => {
     </div>
   )
 }
-export default LogTag
+export default LogKeyTag
diff --git a/...omponent/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogTagDropdown.jsx b/...omponent/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogTagDropdown.jsx
@@ -41,7 +41,7 @@ const LogTagDropDown = ({ objKey, value, children }) => {
   return (
     <>
       <Dropdown menu={{ items }} trigger={['click']} overlayStyle={{ minWidth: 'auto' }}>
-        <div>{children}</div>
+        <>{children}</>
       </Dropdown>
     </>
   )

diff --git a/...s/component/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogValueTag.jsx b/...s/component/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogValueTag.jsx
@@ -0,0 +1,21 @@
+import { Tag, Tooltip } from 'antd'
+import React from 'react'
+import LogTagDropDown from './LogTagDropdown'
+// value作为tag内容
+const LogValueTag = (props) => {
+  const { objKey, value } = props
+  return (
+    <LogTagDropDown
+      objKey={objKey}
+      value={value}
+      children={
+        <Tooltip title={`${objKey} = "${value}"`} key={objKey}>
+          <Tag className="flex-shrink-0 inline-block max-w-[200px] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer text-gray-400">
+            {value}
+          </Tag>
+        </Tooltip>
+      }
+    />
+  )
+}
+export default LogValueTag
diff --git a/...nd/src/views/logs/component/FullLogs/component/LogQueryResult/QueryList/LogItem/index.jsx b/...nd/src/views/logs/component/FullLogs/component/LogQueryResult/QueryList/LogItem/index.jsx
@@ -3,12 +3,13 @@ import { AiFillCaretDown, AiFillCaretRight } from 'react-icons/ai'
 import LogItemFold from './component/LogItemFold'
 import LogItemDetail from './component/LogItemDetail'
 import { Button } from 'antd'
+import { useLogsContext } from 'src/contexts/LogsContext'
 const LogItem = (props) => {
   const { log, foldingChecked } = props
+  const { tableInfo } = useLogsContext()
   // 是否折叠日志，true 为是，false 为否
   const [isFold, setIsFold] = useState(true)
 
-  const handleFoldClick = () => setIsFold(() => !isFold)
   useEffect(() => {
     setIsFold(foldingChecked ?? true)
   }, [foldingChecked])
@@ -17,21 +18,22 @@ const LogItem = (props) => {
       {/* icon 和 时间 */}
       <div className="flex-grow-0 flex-shrink-0  w-[360px]">
         <div className="flex items-center pl-3">
-          {/* <Button
+          <Button
             color="primary"
             type="text"
             onClick={() => setIsFold(!isFold)}
             className="mx-2"
             icon={isFold ? <AiFillCaretRight /> : <AiFillCaretDown />}
-          ></Button> */}
-          {log?.tags.timestamp}
+          ></Button>
+          {log?.tags?.[tableInfo?.timeField ? tableInfo?.timeField : 'timestamp']}
         </div>
       </div>
       {/* 具体日志 */}
       <div className="flex-1 overflow-hidden">
-        <LogItemFold log={log} />
-        <LogItemDetail log={log} />
-        {/* {isFold ? <LogItemFold log={log} /> : <LogItemDetail log={log} />} */}
+        {/* <LogItemFold log={log} isFold={isFold} />
+        <LogItemDetail log={log} isFold={isFold} /> */}
+        {/* <LogItemFold tags={!tableInfo?.timeField || isFold ? log.tags : []} /> */}
+        {isFold ? <LogItemFold tags={log.tags} /> : <LogItemDetail log={log} />}
       </div>
     </div>
   )