feat: 全量日志支持简单上下文

CloudDetail · Oct 18, 2024 · 83f3ccc · 83f3ccc
1 parent f89ac34
commit 83f3ccc
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 21 deletions.
diff --git a/frontend/src/views/logs/component/FullLogs/component/LogQueryResult/ContextModal/index.jsx b/frontend/src/views/logs/component/FullLogs/component/LogQueryResult/ContextModal/index.jsx
@@ -0,0 +1,49 @@
+import { Modal, Skeleton } from 'antd'
+import React, { useEffect, useState } from 'react'
+import { getLogContextApi } from 'src/api/logs'
+import QueryList from '../QueryList'
+
+const ContextModal = ({ modalVisible, closeModal, logParams }) => {
+  const [context, setContext] = useState([])
+  const [loading, setLoading] = useState(false)
+  const getLogContext = () => {
+    setLoading(true)
+    getLogContextApi(logParams)
+      .then((res) => {
+        const back = res?.back ?? []
+        const front = res?.front ?? []
+        setContext(back.concat(front))
+      })
+      .catch(() => {
+        setContext([])
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }
+  useEffect(() => {
+    if (modalVisible && logParams) getLogContext()
+  }, [modalVisible, logParams])
+  return (
+    <Modal
+      title={'上下文'}
+      open={modalVisible}
+      onCancel={closeModal}
+      destroyOnClose
+      centered
+      cancelText="关闭"
+      width={1000}
+      bodyStyle={{ maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden' }}
+      footer={(_, { CancelBtn }) => (
+        <>
+          <CancelBtn />
+        </>
+      )}
+    >
+      <Skeleton loading={loading}>
+        <QueryList logs={context} />
+      </Skeleton>
+    </Modal>
+  )
+}
+export default ContextModal
diff --git a/...omponent/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogTagDropdown.jsx b/...omponent/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogTagDropdown.jsx
@@ -40,7 +40,12 @@ const LogTagDropDown = ({ objKey, value, children }) => {
   ]
   return (
     <>
-      <Dropdown menu={{ items }} trigger={['click']} overlayStyle={{ minWidth: 'auto' }}>
+      <Dropdown
+        menu={{ items }}
+        trigger={['click', 'contextMenu']}
+        overlayStyle={{ minWidth: 'auto' }}
+        getPopupContainer={(triggerNode) => triggerNode.parentNode}
+      >
         <span>{children}</span>
       </Dropdown>
     </>

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
@@ -9,7 +9,7 @@ import { convertTime } from 'src/utils/time'
 // 自配类规则日志默认展开不可收起，tag+铺平（仅content）
 // 接入类数据库规则默认收起可展开，收起展示所有tag，展开展示所有（content + tag）
 const LogItem = (props) => {
-  const { log, foldingChecked } = props
+  const { log, foldingChecked, openContextModal } = props
   const { tableInfo } = useLogsContext()
   // 是否折叠日志，true 为是，false 为否
   const [isFold, setIsFold] = useState(true)
@@ -21,17 +21,29 @@ const LogItem = (props) => {
     <div className="flex overflow-hidden px-2">
       {/* icon 和 时间 */}
       <div className="flex-grow-0 flex-shrink-0  w-[230px]">
-        <div className="flex items-center pl-3">
-          {tableInfo.timeField && (
+        <div className="items-center pl-2 j">
+          <div className="flex-shrink-0 flex-grow-0 flex items-center">
+            {tableInfo.timeField && (
+              <Button
+                color="primary"
+                type="text"
+                onClick={() => setIsFold(!isFold)}
+                icon={isFold ? <AiFillCaretRight /> : <AiFillCaretDown />}
+              ></Button>
+            )}
+            <span>{convertTime(log?.timestamp, 'yyyy-mm-dd hh:mm:ss.SSS')}</span>
+          </div>
+          {openContextModal && !tableInfo.timeField && (
             <Button
               color="primary"
-              type="text"
-              onClick={() => setIsFold(!isFold)}
-              className="mx-2"
-              icon={isFold ? <AiFillCaretRight /> : <AiFillCaretDown />}
-            ></Button>
+              variant="filled"
+              size="small"
+              onClick={() => openContextModal(log)}
+              className="text-xs"
+            >
+              查看上下文
+            </Button>
           )}
-          {convertTime(log?.timestamp, 'yyyy-mm-dd hh:mm:ss')}
         </div>
       </div>
       {/* 具体日志 */}

diff --git a/frontend/src/views/logs/component/FullLogs/component/LogQueryResult/QueryList/index.jsx b/frontend/src/views/logs/component/FullLogs/component/LogQueryResult/QueryList/index.jsx
@@ -1,21 +1,17 @@
-import React, { useEffect, useState } from 'react'
-import { AiFillCaretDown, AiFillCaretRight } from 'react-icons/ai'
-import { useLogsContext } from 'src/contexts/LogsContext'
+import React from 'react'
 import LogItem from './LogItem'
 import { Empty, List } from 'antd'
 
-const QueryList = () => {
-  const { logs } = useLogsContext()
+const QueryList = ({ logs, openContextModal = null }) => {
   return (
     <div className="overflow-y-auto h-full">
       {logs?.length > 0 ? (
         <List
-          // pagination={{ current: 1, pageSize: 10 }}
           dataSource={logs}
           bordered={false}
           renderItem={(item, index) => (
             <List.Item key={index}>
-              <LogItem log={item} />
+              <LogItem log={item} openContextModal={openContextModal} />
             </List.Item>
           )}
         />

diff --git a/frontend/src/views/logs/component/FullLogs/component/LogQueryResult/index.jsx b/frontend/src/views/logs/component/FullLogs/component/LogQueryResult/index.jsx
@@ -1,22 +1,42 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import QueryList from './QueryList'
 import { Pagination } from 'antd'
 import { useLogsContext } from 'src/contexts/LogsContext'
 import Histogram from './Histogram'
+import ContextModal from './ContextModal'
 
 const LogQueryResult = () => {
-  const { pagination, updateLogsPagination } = useLogsContext()
+  const { pagination, updateLogsPagination, logs, tableInfo, query } = useLogsContext()
+
+  const [modalVisible, setModalVisible] = useState(false)
+  const [contextLogParams, setContextLogParams] = useState(null)
+  const openContextModal = (logInfo) => {
+    setModalVisible(true)
+    setContextLogParams({
+      dataBase: tableInfo.dataBase,
+      tableName: tableInfo.tableName,
+      tags: logInfo.tags,
+      timestamp: logInfo.timestamp,
+    })
+  }
+  const closeContextModal = () => {
+    setModalVisible(false)
+    setContextLogParams(null)
+  }
   const changePagination = (page, pageSize) => {
     updateLogsPagination({
       pageSize: pageSize,
       pageIndex: page,
       total: pagination.total,
     })
   }
+  useEffect(() => {
+    if (modalVisible) closeContextModal()
+  }, [query])
   return (
     <div className="overflow-hidden flex flex-col h-full">
       <Histogram />
-      <QueryList />
+      <QueryList logs={logs} openContextModal={openContextModal} />
       <Pagination
         defaultCurrent={1}
         total={pagination.total}
@@ -27,6 +47,11 @@ const LogQueryResult = () => {
         onChange={changePagination}
         showTotal={(total) => `日志总条数: ${total} `}
       />
+      <ContextModal
+        modalVisible={modalVisible}
+        closeModal={closeContextModal}
+        logParams={contextLogParams}
+      />
     </div>
   )
 }

diff --git a/frontend/src/views/logs/component/FullLogs/component/Sider/DataSourceTree/index.jsx b/frontend/src/views/logs/component/FullLogs/component/Sider/DataSourceTree/index.jsx
@@ -108,7 +108,7 @@ const DataSourceTree = () => {
   }, [instances])
 
   const onSelect = (selectedKeys, { selected, selectedNodes }) => {
-    if (selected && selectedNodes[0]?.tableName) {
+    if (selected && selectedNodes?.[0]?.tableName) {
       updateTableInfo({
         dataBase: selectedNodes[0].dataBase,
         tableName: selectedNodes[0].tableName,