diff --git a/frontend/packages/common/src/components/aoplatform/TimeRangeSelector.tsx b/frontend/packages/common/src/components/aoplatform/TimeRangeSelector.tsx index 09047604..b742586b 100644 --- a/frontend/packages/common/src/components/aoplatform/TimeRangeSelector.tsx +++ b/frontend/packages/common/src/components/aoplatform/TimeRangeSelector.tsx @@ -1,5 +1,5 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Radio, DatePicker, GetProps, RadioChangeEvent } from 'antd'; import dayjs, { Dayjs } from 'dayjs'; import customParseFormat from 'dayjs/plugin/customParseFormat'; @@ -12,64 +12,74 @@ export type RangeValue = [Dayjs | null, Dayjs | null] | null; dayjs.extend(customParseFormat); export type TimeRange = { - start:number|null - end:number|null + start: number | null + end: number | null } -export type TimeRangeButton = ''| 'hour' | 'day' | 'threeDays' | 'sevenDays'; +export type TimeRangeButton = '' | 'hour' | 'day' | 'threeDays' | 'sevenDays'; type TimeRangeSelectorProps = { - initialTimeButton?:TimeRangeButton, - initialDatePickerValue?:RangeValue - onTimeRangeChange?:(timeRange:TimeRange) =>void - hideTitle?:boolean - onTimeButtonChange:(time:TimeRangeButton) =>void - labelSize?:'small'|'default' - } -const TimeRangeSelector = (props:TimeRangeSelectorProps) => { - const {initialTimeButton,initialDatePickerValue,onTimeRangeChange,hideTitle,onTimeButtonChange,labelSize='default'} = props + initialTimeButton?: TimeRangeButton, + initialDatePickerValue?: RangeValue + onTimeRangeChange?: (timeRange: TimeRange) => void + hideTitle?: boolean + onTimeButtonChange: (time: TimeRangeButton) => void + labelSize?: 'small' | 'default' + bindRef?: any +} +const TimeRangeSelector = (props: TimeRangeSelectorProps) => { + const { initialTimeButton, initialDatePickerValue, onTimeRangeChange, hideTitle, onTimeButtonChange, labelSize = 'default', bindRef } = props const [timeButton, setTimeButton] = useState(initialTimeButton || ''); - const [datePickerValue, setDatePickerValue] = useState(initialDatePickerValue || [null,null]); - + const [datePickerValue, setDatePickerValue] = useState(initialDatePickerValue || [null, null]); + useEffect(() => { + if (bindRef) { + bindRef({ reset }); + } + }, [bindRef]) // 根据选择的时间范围计算开始和结束时间 - const calculateTimeRange = (curBtn:'hour'|'day'|'threeDays'|'sevenDays') => { + const calculateTimeRange = (curBtn: 'hour' | 'day' | 'threeDays' | 'sevenDays') => { const currentSecond = new Date().getTime() // 当前毫秒数时间戳 const currentMin = currentSecond - (currentSecond % (60 * 1000)) // 当前分钟数时间戳 let startMin = currentMin - 60 * 60 * 1000 switch (curBtn) { - case 'hour': { - startMin = currentMin - 60 * 60 * 1000 - break - } - case 'day': { - startMin = currentMin - 24 * 60 * 60 * 1000 - break - } - case 'threeDays': { - startMin = - new Date(new Date().setHours(0, 0, 0, 0)).getTime() - - 2 * 24 * 60 * 60 * 1000 - break - } - case 'sevenDays': { - startMin = - new Date(new Date().setHours(0, 0, 0, 0)).getTime() - - 6 * 24 * 60 * 60 * 1000 - break - } + case 'hour': { + startMin = currentMin - 60 * 60 * 1000 + break } + case 'day': { + startMin = currentMin - 24 * 60 * 60 * 1000 + break + } + case 'threeDays': { + startMin = + new Date(new Date().setHours(0, 0, 0, 0)).getTime() - + 2 * 24 * 60 * 60 * 1000 + break + } + case 'sevenDays': { + startMin = + new Date(new Date().setHours(0, 0, 0, 0)).getTime() - + 6 * 24 * 60 * 60 * 1000 + break + } + } if (onTimeRangeChange) { - onTimeRangeChange({ start: startMin / 1000, end: currentMin / 1000 }); + onTimeRangeChange({ start: startMin / 1000, end: currentMin / 1000 }); } }; // 处理单选按钮的变化 - const handleRadioChange = (e:RadioChangeEvent) => { + const handleRadioChange = (e: RadioChangeEvent) => { setTimeButton(e.target.value); onTimeButtonChange?.(e.target.value) setDatePickerValue(null) calculateTimeRange(e.target.value); }; + const reset = () => { + setTimeButton('hour') + calculateTimeRange('hour') + setDatePickerValue(null) + } // 处理日期选择器的变化 const handleDatePickerChange = (dates: RangeValue) => { @@ -84,34 +94,37 @@ const TimeRangeSelector = (props:TimeRangeSelectorProps) => { onTimeRangeChange({ start, end }); } } + if (!dates) { + calculateTimeRange('hour') + } }; - - -const disabledDate: RangePickerProps['disabledDate'] = (current) => { -// Can not select days before today and today + + + const disabledDate: RangePickerProps['disabledDate'] = (current) => { + // Can not select days before today and today return current && current.valueOf() > dayjs().startOf('day').valueOf(); -}; + }; return (
- {!hideTitle && } - - {$t('近1小时')} - {$t('近24小时')} - {$t('近3天')} - {$t('近7天')} - + {!hideTitle && } + + {$t('近1小时')} + {$t('近24小时')} + {$t('近3天')} + {$t('近7天')} + { - if(!open && datePickerValue && datePickerValue.length > 2){ - setTimeButton('') - onTimeButtonChange?.('') - } + onOpenChange={(open) => { + if (!open && datePickerValue && datePickerValue.length > 2) { + setTimeButton('') + onTimeButtonChange?.('') + } }} />
diff --git a/frontend/packages/common/src/components/postcat/api/Codebox/index.tsx b/frontend/packages/common/src/components/postcat/api/Codebox/index.tsx index cf0d4b61..5e387c78 100644 --- a/frontend/packages/common/src/components/postcat/api/Codebox/index.tsx +++ b/frontend/packages/common/src/components/postcat/api/Codebox/index.tsx @@ -13,6 +13,7 @@ export interface CodeboxApiRef { formatCode: () => void } +export type codeBoxLanguagesType = 'html' | 'json' | 'xml' | 'javascript' | 'css' | 'plaintext'|'yaml' interface CodeboxProps { options?: MonacoEditor.IStandaloneEditorConstructionOptions value?: string @@ -22,7 +23,7 @@ interface CodeboxProps { height?: string | null readOnly?: boolean apiRef?: RefObject - language?: 'html' | 'json' | 'xml' | 'javascript' | 'css' | 'plaintext'|'yaml' + language?: codeBoxLanguagesType extraContent?:React.ReactNode sx?:Record editorTheme?:'vs' | 'vs-dark' | 'hc-black' diff --git a/frontend/packages/common/src/const/policy/consts.tsx b/frontend/packages/common/src/const/policy/consts.tsx index d9897596..eb898388 100644 --- a/frontend/packages/common/src/const/policy/consts.tsx +++ b/frontend/packages/common/src/const/policy/consts.tsx @@ -1,3 +1,4 @@ +import { codeBoxLanguagesType } from "@common/components/postcat/api/Codebox"; export const MatchRules = [ { value: 'inner', label: '数据格式' }, @@ -54,4 +55,34 @@ export const StrategyStatusEnum = { "offline":'text-status_fail', "delete":'text-status_offline', } + + export const contentTypeToLanguageMap: Record = { + // JSON + "application/json": "json", + + // XML + "application/xml": "xml", + "text/xml": "xml", + + // HTML + "text/html": "html", + + // Plain text + "text/plain": "plaintext", + + // JavaScript + "application/javascript": "javascript", + "text/javascript": "javascript", + + // CSS + "text/css": "css", + + // YAML + "application/x-yaml": "yaml", + "text/yaml": "yaml", + + // Others (fallback) + "*/*": "plaintext", // 任意类型默认处理为普通文本 + }; + \ No newline at end of file diff --git a/frontend/packages/core/src/const/partitions/types.ts b/frontend/packages/core/src/const/partitions/types.ts index 2e7cc222..ffdb6c56 100644 --- a/frontend/packages/core/src/const/partitions/types.ts +++ b/frontend/packages/core/src/const/partitions/types.ts @@ -2,114 +2,133 @@ import { EntityItem } from "@common/const/type"; export type PartitionConfigFieldType = { - name?: string; - id?: string; - description?: string; - prefix?:string - url?:string - managerAddress?:string - canDelete?:boolean + name?: string; + id?: string; + description?: string; + prefix?: string + url?: string + managerAddress?: string + canDelete?: boolean }; export type PartitionCertTableListItem = { - id:string; - name: string; - domains:string[]; - notAfter:string; - notBefore:string; - updater:EntityItem; - updateTime:string; + id: string; + name: string; + domains: string[]; + notAfter: string; + notBefore: string; + updater: EntityItem; + updateTime: string; }; export type PartitionCertConfigFieldType = { - id?:string - key:string - pem:string + id?: string + key: string + pem: string }; export type PartitionCertConfigProps = { - type:'add'|'edit' - entity?:PartitionCertConfigFieldType + type: 'add' | 'edit' + entity?: PartitionCertConfigFieldType } export type PartitionCertConfigHandle = { - save:()=>Promise + save: () => Promise } export type PartitionClusterFieldType = { - name?: string; - id?: string; - description?: string; - address?:string; - protocol?:'http'|'https' + name?: string; + id?: string; + description?: string; + address?: string; + protocol?: 'http' | 'https' }; export type ClusterConfigProps = { - mode:'config' | 'retry' | 'result' | 'edit', - clusterId?:string - initFormValue?:{[k:string]:string|number} + mode: 'config' | 'retry' | 'result' | 'edit', + clusterId?: string + initFormValue?: { [k: string]: string | number } } export type ClusterConfigHandle = { - save:()=>Promise - check:()=>Promise + save: () => Promise + check: () => Promise } export type PartitionClusterTableListItem = { - id:string; - name: string; - status:0|1; - description:string; + id: string; + name: string; + status: 0 | 1; + description: string; }; export type PartitionClusterNodeTableListItem = { - id:string; - name: string; - managerAddress:string[]; - serviceAddress:string[]; - peerAddress:string[]; - status:0|1; + id: string; + name: string; + managerAddress: string[]; + serviceAddress: string[]; + peerAddress: string[]; + status: 0 | 1; }; export type PartitionClusterNodeModalTableListItem = { - id: string, - name: string, - managerAddress: [], - serviceAddress: [], - peerAddress: string, - status: string + id: string, + name: string, + managerAddress: [], + serviceAddress: [], + peerAddress: string, + status: string } export type NodeModalFieldType = { - address:string + address: string } export type NodeModalHandle = { - save:()=>void + save: () => void } export type NodeModalPropsType = { - changeStatus:(status:ClusterPageShowStatus)=>void - getClusterInfo:()=>void - status:ClusterPageShowStatus + changeStatus: (status: ClusterPageShowStatus) => void + getClusterInfo: () => void + status: ClusterPageShowStatus } -export type ClusterPageShowStatus = 'view'|'preview'|'edit' +export type ClusterPageShowStatus = 'view' | 'preview' | 'edit' export type PartitionTableListItem = { - id:string; - name: string; - clusterNum:number; - updater:EntityItem; - updateTime:string; + id: string; + name: string; + clusterNum: number; + updater: EntityItem; + updateTime: string; }; -export type SimplePartition = EntityItem & { clusters: (EntityItem & {description:string})[] } +export type SimplePartition = EntityItem & { clusters: (EntityItem & { description: string })[] } export type PartitionDashboardConfigFieldType = { - driver:string - config:{ - org:string - token:string - addr:string + driver: string + config: { + org: string + token: string + addr: string + } +} +export type PartitionDataLogConfigFieldType = { + create_time: string + id: string + update_time: string + updater: { + id: string + name: string + } + creator: { + id: string + name: string + } + config: { + headers: { + [k: string]: string } + url: string + } } \ No newline at end of file diff --git a/frontend/packages/core/src/pages/partitions/DataLogSettingEdit.tsx b/frontend/packages/core/src/pages/partitions/DataLogSettingEdit.tsx new file mode 100644 index 00000000..0950a105 --- /dev/null +++ b/frontend/packages/core/src/pages/partitions/DataLogSettingEdit.tsx @@ -0,0 +1,18 @@ +import { PartitionDataLogConfigFieldType } from "@core/const/partitions/types" + +export type DashboardPageShowStatus = 'view'|'edit' +export type DashboardSettingEditProps = { + changeStatus:(status:DashboardPageShowStatus)=>void + refreshData:()=>void + data?:PartitionDataLogConfigFieldType +} +const DataLogSettingEdit = (props:DashboardSettingEditProps) => { + const {changeStatus,refreshData,data} = props + return ( +
+ 222 +
+ ); +} + +export default DataLogSettingEdit; \ No newline at end of file diff --git a/frontend/packages/core/src/pages/partitions/PartitionInsideDashboardSetting.tsx b/frontend/packages/core/src/pages/partitions/PartitionInsideDashboardSetting.tsx index 98013d27..59e8e70c 100644 --- a/frontend/packages/core/src/pages/partitions/PartitionInsideDashboardSetting.tsx +++ b/frontend/packages/core/src/pages/partitions/PartitionInsideDashboardSetting.tsx @@ -1,93 +1,177 @@ -import { FC, useEffect, useState} from "react"; -import {useBreadcrumb} from "@common/contexts/BreadcrumbContext.tsx"; -import {App, Button, Card, Col, Row, Spin, Tag} from "antd"; -import {BasicResponse, RESPONSE_TIPS, STATUS_CODE} from "@common/const/const.tsx"; -import {useFetch} from "@common/hooks/http.ts"; +import { FC, useEffect, useState } from "react"; +import { useBreadcrumb } from "@common/contexts/BreadcrumbContext.tsx"; +import { App, Button, Card, Col, Row, Spin, Tag } from "antd"; +import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from "@common/const/const.tsx"; +import { useFetch } from "@common/hooks/http.ts"; import WithPermission from "@common/components/aoplatform/WithPermission.tsx"; import { LoadingOutlined } from "@ant-design/icons"; import InsidePage from "@common/components/aoplatform/InsidePage.tsx"; import { $t } from "@common/locales/index.ts"; import DashboardSettingEdit, { DashboardPageShowStatus } from "./DashboardSettingEdit.tsx"; -import { PartitionDashboardConfigFieldType } from "@core/const/partitions/types.ts"; +import { PartitionDashboardConfigFieldType, PartitionDataLogConfigFieldType } from "@core/const/partitions/types.ts"; +import PageList from "@common/components/aoplatform/PageList.tsx"; +import DataLogSettingEdit from "./DataLogSettingEdit.tsx"; -const PartitionInsideDashboardSetting:FC = ()=> { - const {setBreadcrumb} = useBreadcrumb() - const {message} = App.useApp() - const {fetchData} = useFetch() - const [data, setData] = useState() - const [loading, setLoading] = useState(false) - const [showStatus, setShowStatus] = useState('view') +const PartitionInsideDashboardSetting: FC = () => { + const { setBreadcrumb } = useBreadcrumb() + const { message } = App.useApp() + const { fetchData } = useFetch() + const [data, setData] = useState() + const [dataLogData, setDataLogData] = useState() + const [loading, setLoading] = useState(false) + const [dataLogLoading, setDataLogLoading] = useState(false) + const [showGraphStatus, setShowGraphStatus] = useState('view') + const [showDataLogStatus, setShowDataLogStatus] = useState('view') - const getDashboardSettingInfo = () => { - setLoading(true) - return fetchData>('monitor/config', {method: 'GET',eoTransformKeys:[]}).then(response => { - const {code, data, msg} = response - if (code === STATUS_CODE.SUCCESS) { - data?.info?.driver && setData(data.info) - setShowStatus('view') - } else { - message.error(msg || $t(RESPONSE_TIPS.error)) - } - }).catch(() => { - return {data: [], success: false} - }).finally(()=>{ - setLoading(false) - }) - } + const getDashboardSettingInfo = () => { + setLoading(true) + return fetchData>('monitor/config', { method: 'GET', eoTransformKeys: [] }).then(response => { + const { code, data, msg } = response + if (code === STATUS_CODE.SUCCESS) { + data?.info?.driver && setData(data.info) + setShowGraphStatus('view') + } else { + message.error(msg || $t(RESPONSE_TIPS.error)) + } + }).catch(() => { + return { data: [], success: false } + }).finally(() => { + setLoading(false) + }) + } + const getDataLogSettingInfo = () => { + setDataLogLoading(true) + return fetchData>('log/loki', { method: 'GET', eoTransformKeys: [] }).then(response => { + const { code, data, msg } = response + console.log('data====', data); + if (code === STATUS_CODE.SUCCESS) { + data?.info && setDataLogData(data.info) + setShowDataLogStatus('view') + } else { + message.error(msg || $t(RESPONSE_TIPS.error)) + } + }).catch(() => { + return { data: [], success: false } + }).finally(() => { + setDataLogLoading(false) + }) + } - useEffect(() => { - setBreadcrumb([ - {title: $t('数据源')} - ]) - getDashboardSettingInfo() - }, []); + useEffect(() => { + setBreadcrumb([ + { title: $t('数据源') } + ]) + getDashboardSettingInfo() + getDataLogSettingInfo() + }, []); - const setDashboardSettingBtn = ()=>{ - return (<> - {showStatus === 'view' && - - } - ) - } - - return ( - <> - -
- } spinning={loading}> -
- {$t('统计图表')} - {!loading && !data?.driver && { $t('未配置')} - }
} - - extra={setDashboardSettingBtn()}> - {showStatus === 'view'&& data && data.driver && DashboardConfigPreview(data) } - {showStatus !== 'view' && } - -
- - - - + const setDashboardSettingBtn = (type: string) => { + return (<> + {showGraphStatus === 'view' && + + } ) + } + + return ( + <> + +
+ } spinning={loading}> +
+ {$t('统计图表')} + {!loading && !data?.driver && {$t('未配置')} + }
} + + extra={setDashboardSettingBtn('graph')}> + {showGraphStatus === 'view' && data && data.driver && DashboardConfigPreview(data)} + {showGraphStatus !== 'view' && } + +
+ + } spinning={dataLogLoading}> +
+ {$t('数据日志')} + {!dataLogLoading && !dataLogData && {$t('未配置')} + }
} + + extra={setDashboardSettingBtn('log')}> + {showDataLogStatus === 'view' && dataLogData && DataLogConfigPreview(dataLogData)} + {showDataLogStatus !== 'view' && } + + + + + + + ) } -export function DashboardConfigPreview (x:PartitionDashboardConfigFieldType){ - return
- {$t('数据源')}：{x?.driver} - {$t('地址（IP:端口）')}：{x?.config?.addr} - {$t('组织（Organization）')}：{x?.config?.org} -
} +export function DashboardConfigPreview(x: PartitionDashboardConfigFieldType) { + return
+ {$t('数据源')}：{x?.driver} + {$t('地址（IP:端口）')}：{x?.config?.addr} + {$t('组织（Organization）')}：{x?.config?.org} +
+} +export function DataLogConfigPreview(x: PartitionDataLogConfigFieldType) { + const columns = [ + { + title: '标签', + dataIndex: 'tag', + }, + { + title: '内容', + dataIndex: 'content' + } + ] + const getTableList = () => { + return new Promise((resolve, reject) => { + resolve({ + data: x?.config?.headers ? Object.keys(x?.config?.headers).map((key) => { + return { + tag: key, + content: x?.config?.headers[key] + } + }) : [], + success: true + }) + }) + } + console.log(getTableList()); + + return
+ {$t('请求前缀')}：{x?.config?.url} + {$t('HTTP 头部')}： +
+ getTableList()} + showPagination={false} + noScroll={true} + /> +
+ +
+} export default PartitionInsideDashboardSetting \ No newline at end of file diff --git a/frontend/packages/core/src/pages/policy/dataMasking/DataMasking.tsx b/frontend/packages/core/src/pages/policy/dataMasking/DataMasking.tsx index b1996a17..099b4dcb 100644 --- a/frontend/packages/core/src/pages/policy/dataMasking/DataMasking.tsx +++ b/frontend/packages/core/src/pages/policy/dataMasking/DataMasking.tsx @@ -79,7 +79,7 @@ const DataMasking = (props: any) => { { title: '', key: 'option', - btnNums: rowOperation.length -1, + btnNums: rowOperation.length, fixed: 'right', valueType: 'option', render: (_: React.ReactNode, entity: any) => [ @@ -379,10 +379,11 @@ const DataMasking = (props: any) => {
diff --git a/frontend/packages/core/src/pages/policy/dataMasking/DataMaskingColumn.tsx b/frontend/packages/core/src/pages/policy/dataMasking/DataMaskingColumn.tsx index 0da5ecb0..76865ce1 100644 --- a/frontend/packages/core/src/pages/policy/dataMasking/DataMaskingColumn.tsx +++ b/frontend/packages/core/src/pages/policy/dataMasking/DataMaskingColumn.tsx @@ -86,7 +86,7 @@ export const DATA_MASKING_TABLE_LOG_COLUMNS: PageProColumns[] = [ title: ('消费者IP'), dataIndex: 'remote_ip', ellipsis: true, - width: 150 + width: 100 }, { title: ('消费者'), @@ -96,7 +96,7 @@ export const DATA_MASKING_TABLE_LOG_COLUMNS: PageProColumns[] = [ }, { title: ('鉴权名称'), - dataIndex: 'authorization', + dataIndex: ['authorization', 'name'], ellipsis: true, width: 100 }, diff --git a/frontend/packages/core/src/pages/policy/dataMasking/DataMaskingCompare.tsx b/frontend/packages/core/src/pages/policy/dataMasking/DataMaskingCompare.tsx index c186da8b..62757f29 100644 --- a/frontend/packages/core/src/pages/policy/dataMasking/DataMaskingCompare.tsx +++ b/frontend/packages/core/src/pages/policy/dataMasking/DataMaskingCompare.tsx @@ -1,13 +1,12 @@ -import { Codebox } from "@common/components/postcat/api/Codebox"; +import { Codebox, codeBoxLanguagesType } from "@common/components/postcat/api/Codebox"; import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from "@common/const/const"; -import { RouterParams } from "@common/const/type"; import { $t } from "@common/locales"; -import { App, Button, message, Switch, Modal, Spin } from 'antd' +import { message, Spin } from 'antd' import { useFetch } from "@common/hooks/http"; import { useEffect, useState } from "react"; import { LoadingOutlined } from "@ant-design/icons"; - import { useParams } from "react-router-dom"; +import { contentTypeToLanguageMap } from "@common/const/policy/consts"; type LogItems = { id: string; origin: string; @@ -18,7 +17,15 @@ const DataMaskingCompare = () => { const { fetchData } = useFetch() const [loading, setLoading] = useState(false) const [originValue, setOriginValue] = useState('') - const [targetValue, settTargetValue] = useState('') + const [targetValue, setTargetValue] = useState('') + const [language, setLanguage] = useState('json') + const getMonacoEditorLanguage = (contentType: string): codeBoxLanguagesType => { + // 提取主类型，忽略参数（如 "; charset=utf-8"） + const mainType = contentType.split(";")[0].trim().toLowerCase(); + + // 根据映射表获取语言，默认返回 "plaintext" + return contentTypeToLanguageMap[mainType] || "json"; + }; const getLogData = () => { setLoading(true) return fetchData>(`strategy/${serviceId === undefined ? 'global' : 'service'}/data-masking/log`, @@ -33,8 +40,10 @@ const DataMaskingCompare = () => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { const { log } = data - setOriginValue(log.origin || '') - settTargetValue(log.target || '') + const docLanguage = getMonacoEditorLanguage(log.content_type) + setLanguage(docLanguage) + setOriginValue(docLanguage === 'json' ? JSON.stringify(JSON.parse(log.origin || ''), null, 2) : log.origin || '') + setTargetValue(docLanguage === 'json' ? JSON.stringify(JSON.parse(log.target || ''), null, 2) : log.target || '') setLoading(false) } else { message.error(msg || $t(RESPONSE_TIPS.error)) @@ -42,17 +51,6 @@ const DataMaskingCompare = () => { }).catch(() => { return { data: [], success: false } }).finally(() => { - const aa = `{ - "code": { - "gg": "gg", - "gg1": "gg", - "gg2": "gg", - "gg3": "gg", - "gg4": "gg" - } - }` - setOriginValue(JSON.stringify(JSON.parse(aa), null, 2)) - settTargetValue(JSON.stringify(JSON.parse(aa), null, 2)) setLoading(false) }) } @@ -68,10 +66,12 @@ const DataMaskingCompare = () => {
@@ -81,7 +81,7 @@ const DataMaskingCompare = () => {
{ const { strategy } = props; const { state, accessData } = useGlobalContext() const { serviceId, teamId } = useParams() const [datePickerValue, setDatePickerValue] = useState(); - const [queryData, setQueryData] = useState({}) - + const defaultTime = getTime('hour', datePickerValue) + const [queryData, setQueryData] = useState({ + start: defaultTime.startTime, + end: defaultTime.endTime + }) /** * 请求数据 */ const { fetchData } = useFetch() /** -* 列表ref -*/ + * 列表ref + */ const pageListRef = useRef(null); /** * 搜索关键字 */ const [searchWord, setSearchWord] = useState('') + /** + * 重置时间范围 + */ + let resetTimeRange = () => {} + /** + * 时间按钮 + */ + const [timeButton, setTimeButton] = useState<'' | 'hour' | 'day' | 'threeDays' | 'sevenDays'>('hour'); + /** + * 绑定时间范围组件 + * @param instance + */ + const bindRef = (instance: any) => { + resetTimeRange = instance.reset + }; /** * 操作列 */ @@ -54,7 +71,7 @@ const DataMaskingLogModal = (props: any) => { url += `/${teamId}` } return [ - { window.open(url,'_blank') }} btnTitle="查看" /> + { window.open(url, '_blank') }} btnTitle="查看" /> ] } } @@ -88,7 +105,7 @@ const DataMaskingLogModal = (props: any) => { current: number; }) => { return fetchData>( - `strategy/${serviceId === undefined ? 'global' : 'service'}/data-masking/list`, + `strategy/${serviceId === undefined ? 'global' : 'service'}/data-masking/logs`, { method: 'GET', eoParams: { @@ -106,204 +123,9 @@ const DataMaskingLogModal = (props: any) => { ).then(response => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - const mockData: any = [ - { - id: '12334', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff1', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff2', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff3', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff4', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff5', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff6', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff7', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff8', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff9', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff11', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:12', - }, - { - id: 'fff22', - service: { - id: 'xxx', - name: 'xxx' - }, - url: 'url', - remote_ip: '9234923', - consumer: { - id: 'yyy', - name: 'yyy' - }, - method: 'GET', - authorization: 'authorization', - record_time: '2021-09-09 12:12:11', - } - - ] // 保存数据 return { - data: mockData, + data: data.logs || [], total: data.total, success: true } @@ -320,24 +142,13 @@ const DataMaskingLogModal = (props: any) => { const handleTimeRangeChange = (timeRange: TimeRange) => { setQueryData(pre => ({ ...pre, ...timeRange } as SearchBody)) manualReloadTable() - + }; - const handleDatePickerChange = (dates: any) => { - if (dates && Array.isArray(dates) && dates.length === 2) { - const [startDate, endDate] = dates; - const start = startDate!.startOf('day').unix(); // 开始日期的00:00:00 - const end = endDate!.endOf('day').unix(); // 结束日期的23:59:59 - handleTimeRangeChange({ start, end }); - } else { - handleTimeRangeChange({ start: null, end: null}) - } - } const resetQuery = () => { - setDatePickerValue(null) - handleTimeRangeChange({ start: null, end: null}) - + resetTimeRange() }; + return ( <>
@@ -348,11 +159,15 @@ const DataMaskingLogModal = (props: any) => { columns={[...columns, ...operation]} afterNewBtn={ [
- -
- + +
+
] }