This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong.git
The following commit(s) were added to refs/heads/master by this push:
new a4f0ff7e82 [INLONG-11972][Dashboard] Occasional audit queries based on
group queries have query conditions including streamid (#11973)
a4f0ff7e82 is described below
commit a4f0ff7e823d4ba1d710767187b5502c7de06ac8
Author: kamianlaida <[email protected]>
AuthorDate: Mon Aug 25 16:06:06 2025 +0800
[INLONG-11972][Dashboard] Occasional audit queries based on group queries
have query conditions including streamid (#11973)
---
.../src/ui/pages/GroupDetail/Audit/index.tsx | 58 ++++++++++++++++------
1 file changed, 44 insertions(+), 14 deletions(-)
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/Audit/index.tsx
b/inlong-dashboard/src/ui/pages/GroupDetail/Audit/index.tsx
index 1dfaa2ed59..041e4ca920 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/Audit/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/Audit/index.tsx
@@ -31,10 +31,9 @@ import {
getTableColumns,
timeStaticsDimList,
} from './config';
-import { Table, Radio, Tabs, TabsProps } from 'antd';
+import { Table, Radio, Spin } from 'antd';
import i18n from '@/i18n';
import './index.less';
-import { startCase } from 'lodash';
type Props = CommonInterface;
const initialQuery = {
inlongStreamId: null,
@@ -43,6 +42,7 @@ const initialQuery = {
timeStaticsDim: timeStaticsDimList[0].value,
sinkId: null,
sinkType: null,
+ auditIds: [],
};
const Comp: React.FC<Props> = ({ inlongGroupId }) => {
const [form] = useForm();
@@ -81,7 +81,11 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
},
);
- const { data: sourceData = [], run } = useRequest(
+ const {
+ data: sourceData = [],
+ loading,
+ run,
+ } = useRequest(
{
url: '/audit/list',
method: 'POST',
@@ -90,7 +94,7 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
startDate: timestampFormat(query.startDate, 'yyyy-MM-dd'),
endDate: timestampFormat(query.endDate, 'yyyy-MM-dd'),
inlongGroupId,
- inlongStreamId: inlongStreamID,
+ ...(subTab === 'stream' && { inlongStreamId: inlongStreamID }),
},
},
{
@@ -101,7 +105,9 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
query.endDate,
query.startDate,
query.timeStaticsDim,
+ query.auditIds,
inlongStreamID,
+ subTab,
],
formatResult: result => result.sort((a, b) => (a.auditId - b.auditId > 0
? 1 : -1)),
},
@@ -149,12 +155,16 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
}, {});
}
return output;
- }, [sourceData, query.timeStaticsDim, type]);
+ }, [sourceData, type]);
const onSearch = async () => {
let values = await form.validateFields();
if (values.timeStaticsDim == 'MINUTE') {
- setQuery(prev => ({ ...prev, endDate: prev.startDate }));
+ if (subTab === 'group') {
+ setQuery(prev => ({ ...prev, endDate: prev.startDate, inlongStreamId:
null }));
+ } else {
+ setQuery(prev => ({ ...prev, endDate: prev.startDate }));
+ }
} else {
setQuery(values);
}
@@ -202,20 +212,21 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
}, [inlongGroupId, inlongStreamID]);
const onChange = e => {
+ const newTab = e.target.value;
const tmp = { ...query };
- if (e.target.value === 'group') {
+ if (newTab === 'group') {
tmp.inlongStreamId = null;
tmp.sinkId = null;
- setInlongStreamID(undefined);
+ tmp.sinkType = null;
+ setInlongStreamID(null);
} else {
tmp.sinkType = null;
tmp.inlongStreamId = streamList?.[0]?.value;
setInlongStreamID(streamList?.[0]?.value);
}
setQuery(tmp);
- setSubTab(e.target.value);
+ setSubTab(newTab);
};
-
return (
<>
<div style={{ marginBottom: 20 }}>
@@ -241,13 +252,14 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
subTab,
)}
style={{ marginBottom: 30, gap: 10 }}
- onFilter={allValues =>
+ onFilter={allValues => {
+ console.log('onFilter:', allValues);
setQuery({
...allValues,
startDate: +allValues.startDate.$d,
endDate: +allValues.endDate.$d,
- })
- }
+ });
+ }}
/>
</div>
<div className="audit-container">
@@ -262,7 +274,24 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
</Radio.Group>
</div>
<div className="chart-container">
- <Charts height={400} option={toChartData(sourceData, sourceDataMap)}
forceUpdate={true} />
+ {loading ? (
+ <div
+ style={{
+ height: 400,
+ display: 'flex',
+ alignContent: 'center',
+ justifyContent: 'center',
+ }}
+ >
+ <Spin />
+ </div>
+ ) : (
+ <Charts
+ height={400}
+ option={toChartData(sourceData, sourceDataMap)}
+ forceUpdate={true}
+ />
+ )}
</div>
<div className="table-container">
<HighTable
@@ -273,6 +302,7 @@ const Comp: React.FC<Props> = ({ inlongGroupId }) => {
pagination: {
pageSizeOptions: ['10', '20', '50', '60', '100', '120'],
},
+ loading,
summary: () => (
<Table.Summary fixed>
<Table.Summary.Row>
