From e1fa82849984990a9a2b7e05ad23448b7bf4fb97 Mon Sep 17 00:00:00 2001 From: keting lu Date: Wed, 16 Oct 2024 16:13:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E5=85=A8=E9=87=8F?= =?UTF-8?q?=E6=97=A5=E5=BF=97=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/logs.js | 20 ++- frontend/src/index.js | 3 + .../component/LogRouteRuleFormList.jsx | 47 +++++-- .../component/ConfigLogRuleModal/index.jsx | 105 ++++++++++++++-- .../component/LogRouteRuleFormList.jsx | 73 +++++++++++ .../component/ConfigTableModal/index.jsx | 118 ++++++++++++++++++ .../QueryList/LogItem/index.jsx | 2 +- .../component/Sider/DataSourceTree/index.jsx | 95 +++++++++++--- .../component/Sider/LogRuleList/index.jsx | 13 +- 9 files changed, 433 insertions(+), 43 deletions(-) create mode 100644 frontend/src/views/logs/component/FullLogs/component/ConfigTableModal/component/LogRouteRuleFormList.jsx create mode 100644 frontend/src/views/logs/component/FullLogs/component/ConfigTableModal/index.jsx diff --git a/frontend/src/api/logs.js b/frontend/src/api/logs.js index f97ec0c..c636f90 100644 --- a/frontend/src/api/logs.js +++ b/frontend/src/api/logs.js @@ -23,7 +23,7 @@ export const getFullLogChartApi = (params) => { //查询当前日志规则 export const getLogRuleApi = (params) => { - return post(`/api/log/rule/get`, params) + return get(`/api/log/rule/get`, params) } //索引分析(百分比) export const getLogIndexApi = (params) => { @@ -48,3 +48,21 @@ export const updateLogRuleApi = (params) => { export const deleteLogRuleApi = (params) => { return post(`/api/log/rule/delete`, params) } + +//——————全量日志->接入外部表 +// 获取所有外部表 +export const getLogOtherTableListApi = (params) => { + return post(`/api/log/other`, params) +} +//获取外部日志表信息 +export const getLogOtherTableInfoApi = (params) => { + return post(`/api/log/other/table`, params) +} +//新增外部日志表信息 +export const addLogOtherTableApi = (params) => { + return post(`/api/log/other/add`, params) +} +//新增外部日志表信息 +export const deleteLogOtherTableApi = (params) => { + return post(`/api/log/other/delete`, params) +} diff --git a/frontend/src/index.js b/frontend/src/index.js index 70a0e68..80999d8 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -37,6 +37,9 @@ const AppWrapper = () => { bodyBg: '#1d222b', siderBg: '#1d222b', }, + Tree: { + nodeSelectedBg: '#33415580', + }, }, }} > diff --git a/frontend/src/views/logs/component/FullLogs/component/ConfigLogRuleModal/component/LogRouteRuleFormList.jsx b/frontend/src/views/logs/component/FullLogs/component/ConfigLogRuleModal/component/LogRouteRuleFormList.jsx index 4d67a94..8c27d55 100644 --- a/frontend/src/views/logs/component/FullLogs/component/ConfigLogRuleModal/component/LogRouteRuleFormList.jsx +++ b/frontend/src/views/logs/component/FullLogs/component/ConfigLogRuleModal/component/LogRouteRuleFormList.jsx @@ -1,5 +1,6 @@ import { Col, Form, Input, Row, Select } from 'antd' import React from 'react' +import { AiOutlineInfoCircle } from 'react-icons/ai' import { IoIosRemoveCircleOutline, IoMdAddCircleOutline } from 'react-icons/io' const routeKeyList = [ { label: '_container_id_', value: '_container_id_' }, @@ -24,6 +25,7 @@ function isValidKey(str) { return regex.test(str) } export default function LogRouteRuleFormList() { + const form = Form.useFormInstance() return ( {(fields, { add, remove }, { errors }) => ( @@ -32,7 +34,18 @@ export default function LogRouteRuleFormList() { required label={ <> - 路由规则 add()} size={20} className="mx-2" /> + {/*
*/} + 匹配规则{' '} + add()} + size={20} + className="mx-2 cursor-pointer" + /> + {/*
+
*/} + + 解析规则只应用于满足匹配规则的日志 + {/*
*/} } > @@ -40,24 +53,38 @@ export default function LogRouteRuleFormList() {
- - - + remove(field.name)} /> diff --git a/frontend/src/views/logs/component/FullLogs/component/ConfigLogRuleModal/index.jsx b/frontend/src/views/logs/component/FullLogs/component/ConfigLogRuleModal/index.jsx index 1c8ad77..5ca1e0d 100644 --- a/frontend/src/views/logs/component/FullLogs/component/ConfigLogRuleModal/index.jsx +++ b/frontend/src/views/logs/component/FullLogs/component/ConfigLogRuleModal/index.jsx @@ -1,13 +1,43 @@ -import { Form, Input, Modal } from 'antd' -import React, { useEffect } from 'react' +import { Form, Input, Modal, Select, Tooltip } from 'antd' +import React, { useEffect, useState } from 'react' import LogRouteRuleFormList from './component/LogRouteRuleFormList' import { addLogRuleApi, getLogRuleApi, updateLogRuleApi } from 'src/api/logs' import { showToast } from 'src/utils/toast' import { useLogsContext } from 'src/contexts/LogsContext' +import { getServiceListApi } from 'src/api/service' +import TextArea from 'antd/es/input/TextArea' +import { AiOutlineInfoCircle } from 'react-icons/ai' const ConfigLogRuleModal = ({ modalVisible, closeModal, logRuleInfo }) => { const { getLogTableInfo, updateLoading } = useLogsContext() const [form] = Form.useForm() + const [serviceList, setServiceList] = useState([]) + const getServiceListData = () => { + // 获取7天前的开始时间（当天00:00:00） + const startDate = new Date() + startDate.setDate(new Date().getDate() - 7) + startDate.setHours(0, 0, 0, 0) + + // 获取现在 + const endDate = new Date() + + // 转换为微秒级别的时间戳 + const startTime = startDate.getTime() * 1000 + const endTime = endDate.getTime() * 1000 + getServiceListApi({ startTime, endTime }) + .then((res) => { + setServiceList( + (res ?? []).map((service) => ({ + label: service, + value: service, + })), + ) + }) + .catch((error) => { + // console.log(error) + setServiceList([]) + }) + } const getLogRule = () => { getLogRuleApi({ dataBase: logRuleInfo.dataBase, @@ -16,7 +46,11 @@ const ConfigLogRuleModal = ({ modalVisible, closeModal, logRuleInfo }) => { form.setFieldsValue({ parseName: res.parseName, parseRule: res.parseRule, - // routeRule: res.routeRule, + routeRule: Object.entries(res.routeRule).map(([key, value]) => ({ + key: { key: key, value: key }, + value: value, + })), + serviceName: res.serviceName, parseInfo: logRuleInfo.parseInfo, }) }) @@ -27,6 +61,7 @@ const ConfigLogRuleModal = ({ modalVisible, closeModal, logRuleInfo }) => { } else { form.resetFields() } + if (modalVisible) getServiceListData() }, [modalVisible, logRuleInfo]) function addLogRule(logRuleParams) { @@ -59,6 +94,7 @@ const ConfigLogRuleModal = ({ modalVisible, closeModal, logRuleInfo }) => { .validateFields({}) .then(() => { const formState = form.getFieldsValue(true) + // console.log(formState) const logRuleParams = { ...formState, } @@ -71,7 +107,7 @@ const ConfigLogRuleModal = ({ modalVisible, closeModal, logRuleInfo }) => { logRuleParams.routeRule = routeRule if (Object.keys(routeRule).length === 0) { showToast({ - title: '路由规则不可为空', + title: '匹配规则不可为空', color: 'danger', }) return @@ -85,7 +121,6 @@ const ConfigLogRuleModal = ({ modalVisible, closeModal, logRuleInfo }) => { }) .catch((error) => console.log(error)) } - return ( { width={1000} bodyStyle={{ maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden' }} > -
+ { }, ]} > - + { > + + + + 解析规则 + + 用于将日志文本解析为独立的字段，加快检索速度。请使用 + + VRL + + 语言，查看 + .*?)\] \[(?P.*?)\] \[(?P.*?)\(.*?\)\] - (?P.*)') +if err == null { + .content = encode_json(.msg) +} +del(.msg)`} + > + JAVA + + 、 + .*?)\] \[(?P.*?)\] \[(?P.*?)\(.*?\)\] - (?P.*)') +if err == null { + .content = encode_json(.msg) +} +del(.msg)`} + > + Go + + 、 + .*?)\] \[(?P.*?)\] \[(?P.*?)\(.*?\)\] - (?P.*)') +if err == null { + .content = encode_json(.msg) +} +del(.msg)`} + > + Nginx + + 默认规则 + +
+ } name="parseRule" rules={[ { @@ -143,7 +230,7 @@ const ConfigLogRuleModal = ({ modalVisible, closeModal, logRuleInfo }) => { }, ]} > - +