Skip to content

Commit 55c46f3

Browse files
authored
Merge pull request #696 from actiontech/feature/sql-insights
Feature/sql insights
2 parents 6e96d0a + 2a68668 commit 55c46f3

File tree

41 files changed

+4214
-134
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+4214
-134
lines changed

packages/shared/lib/api/sqle/service/common.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,8 @@ export interface IAuditPlanMetaV1 {
216216

217217
audit_plan_type_desc?: string;
218218

219+
audit_plan_type_tips?: string;
220+
219221
high_priority_conditions?: IHighPriorityConditionResV1[];
220222

221223
instance_type?: string;

packages/shared/lib/api/sqle/service/instance/index.enum.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,7 @@ export enum getInstanceTipListV2FunctionalModuleEnum {
2323

2424
'create_pipeline' = 'create_pipeline',
2525

26-
'create_version' = 'create_version'
26+
'create_version' = 'create_version',
27+
28+
'view_sql_insight' = 'view_sql_insight'
2729
}

packages/shared/lib/testUtil/mockApi/sqle/instanceAuditPlan/data.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@ export const mockInstanceAuditPlanListData: IInstanceAuditPlanResV1[] = [
5555
audit_plan_id: 3,
5656
type: 'all_app_extract',
5757
desc: '应用程序SQL抓取'
58+
},
59+
{
60+
audit_plan_id: 4,
61+
type: 'performance_collect',
62+
desc: '数据源性能指标'
5863
}
5964
],
6065
active_status: InstanceAuditPlanResV1ActiveStatusEnum.disabled,

packages/sqle/src/locale/zh-CN/managementConf.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,12 @@ export default {
6969
scanTypeTips: '选择您需要扫描的SQL对象',
7070
emptyScanTypeTips: '选择数据源类型后获取对应的扫描任务类型',
7171

72+
performanceInsights: {
73+
title: '性能监控',
74+
lable: '开启性能指标采集',
75+
tips: '性能指标采集将产生较大性能开销,请谨慎开启,开启后,系统将持续采集该数据源的性能数据(如QPS、连接数等),并生成性能趋势图表。'
76+
},
77+
7278
scanTypeParams: {
7379
title: '编辑扫描详情·{{typeName}}',
7480
hightPriorityConditions: {
@@ -114,6 +120,8 @@ export default {
114120
title: '概览',
115121
column: {
116122
auditPlanType: '智能扫描类型',
123+
performanceCollectTips:
124+
'性能指标采集将产生较大性能开销,请谨慎开启。开启后,系统将持续采集该数据源的性能数据(如QPS、连接数等),并生成性能趋势图表,体现在性能洞察页面。',
117125
auditRuleTemplate: '审核规则模板',
118126
status: '任务状态',
119127
scanType: '采集方式',

packages/sqle/src/locale/zh-CN/sqlInsights.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export default {
1919
},
2020

2121
taskEnabledTips: {
22-
currentControlTypeNotEnabled: '当前管控类型未开启',
23-
goToEnable: '去开启'
22+
currentControlTypeNotEnabled: '当前管控类型未开启',
23+
goToEnable: '[去开启]'
2424
},
2525

2626
performanceTrend: {

packages/sqle/src/page/SqlInsights/SqlInsights.tsx

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,13 @@ import {
66
import { useTranslation } from 'react-i18next';
77
import { Space, Spin } from 'antd';
88
import { TableRefreshButton } from '@actiontech/shared/lib/components/ActiontechTable';
9-
import { useCallback, useEffect, useState, useMemo } from 'react';
9+
import { useCallback, useEffect, useMemo, useState } from 'react';
1010
import { useCurrentProject } from '@actiontech/shared/lib/features';
11-
import useInstance from '../../hooks/useInstance';
1211
import {
1312
BasicSelect,
1413
BasicRangePicker,
1514
BasicSegmented,
16-
EmptyBox,
17-
useTypedNavigate
15+
EmptyBox
1816
} from '@actiontech/shared';
1917
import dayjs, { Dayjs } from 'dayjs';
2018
import DataSourcePerformanceTrend from './components/DataSourcePerformanceTrend';
@@ -34,13 +32,16 @@ import { eventEmitter } from '@actiontech/shared/lib/utils/EventEmitter';
3432
import EmitterKey from '@actiontech/shared/lib/data/EmitterKey';
3533
import { range } from 'lodash';
3634
import { SegmentedStyleWrapper, SqlInsightsStyleWrapper } from './style';
37-
import { ROUTE_PATHS } from '@actiontech/shared/lib/data/routePaths';
3835
import useDateRange from './hooks/useDateRange';
36+
import useInstance from '../../hooks/useInstance';
37+
import useOpenScanTask from './hooks/useOpenScanTask';
38+
import { IInstanceTipResV2 } from '@actiontech/shared/lib/api/sqle/service/common';
39+
import { getInstanceTipListV2FunctionalModuleEnum } from '@actiontech/shared/lib/api/sqle/service/instance/index.enum';
3940

4041
const SqlInsights: React.FC = () => {
4142
const { t } = useTranslation();
42-
const { projectName, projectID } = useCurrentProject();
43-
const navigate = useTypedNavigate();
43+
const { projectName } = useCurrentProject();
44+
4445
const [selectedInstance, setSelectedInstance] = useState<string>();
4546

4647
const {
@@ -60,26 +61,23 @@ const SqlInsights: React.FC = () => {
6061
instanceList
6162
} = useInstance();
6263

63-
const instanceInfo = useMemo(() => {
64-
return instanceList.find((item) => item.instance_id === selectedInstance);
64+
const instanceEnvironmentTag = useMemo(() => {
65+
return instanceList.find(
66+
(item: IInstanceTipResV2) => item.instance_id === selectedInstance
67+
)?.environment_tag_name;
6568
}, [selectedInstance, instanceList]);
6669

67-
const onCreateSqlManagementConf = () => {
68-
navigate(ROUTE_PATHS.SQLE.SQL_MANAGEMENT_CONF.create, {
69-
params: {
70-
projectID
71-
},
72-
queries: {
73-
instance_id: selectedInstance,
74-
environment_tag: instanceInfo?.environment_tag_name
75-
}
76-
});
77-
};
70+
const { getAuditPlanDataLoading, onCreateSqlManagementConf } =
71+
useOpenScanTask(selectedInstance, instanceEnvironmentTag);
7872

7973
useEffect(() => {
8074
if (projectName) {
8175
updateInstanceList(
82-
{ project_name: projectName },
76+
{
77+
project_name: projectName,
78+
functional_module:
79+
getInstanceTipListV2FunctionalModuleEnum.view_sql_insight
80+
},
8381
{
8482
onSuccess: (data) => {
8583
if (data.length > 0) {
@@ -89,11 +87,14 @@ const SqlInsights: React.FC = () => {
8987
}
9088
);
9189
}
92-
}, [projectName, updateInstanceList]);
90+
}, [projectName, updateInstanceList, setSelectedInstance]);
9391

94-
const handleInstanceChange = useCallback((value: string) => {
95-
setSelectedInstance(value);
96-
}, []);
92+
const handleInstanceChange = useCallback(
93+
(value: string) => {
94+
setSelectedInstance(value);
95+
},
96+
[setSelectedInstance]
97+
);
9798

9899
const handleDateRangeChange = useCallback<
99100
Required<BasicRangePickerProps>['onChange']
@@ -172,7 +173,7 @@ const SqlInsights: React.FC = () => {
172173
</Space>
173174
}
174175
/>
175-
<Spin spinning={getInstanceListLoading}>
176+
<Spin spinning={getInstanceListLoading || getAuditPlanDataLoading}>
176177
<SegmentedStyleWrapper size={12}>
177178
<Space>
178179
<BasicSegmented
@@ -218,6 +219,7 @@ const SqlInsights: React.FC = () => {
218219
instanceId={selectedInstance}
219220
dateRange={dateRange}
220221
pollingInterval={autoRefreshInterval}
222+
onCreateSqlManagementConf={onCreateSqlManagementConf}
221223
timePeriod={timePeriod}
222224
/>
223225
<SlowSqlTrend

packages/sqle/src/page/SqlInsights/__tests__/__snapshots__/index.test.tsx.snap

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,32 @@ exports[`SqlInsights should disable future time in date picker 1`] = `
8989
<div
9090
class="ant-spin-nested-loading"
9191
>
92+
<div>
93+
<div
94+
aria-busy="true"
95+
aria-live="polite"
96+
class="ant-spin ant-spin-spinning"
97+
>
98+
<span
99+
class="ant-spin-dot ant-spin-dot-spin"
100+
>
101+
<i
102+
class="ant-spin-dot-item"
103+
/>
104+
<i
105+
class="ant-spin-dot-item"
106+
/>
107+
<i
108+
class="ant-spin-dot-item"
109+
/>
110+
<i
111+
class="ant-spin-dot-item"
112+
/>
113+
</span>
114+
</div>
115+
</div>
92116
<div
93-
class="ant-spin-container"
117+
class="ant-spin-container ant-spin-blur"
94118
>
95119
<div
96120
class="ant-space ant-space-horizontal ant-space-align-center css-1pqgs1i"

packages/sqle/src/page/SqlInsights/__tests__/index.test.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ describe('SqlInsights', () => {
3434
let getSqlPerformanceInsightsSpy: jest.SpyInstance;
3535
let getSqlPerformanceInsightsRelatedSQLSpy: jest.SpyInstance;
3636
let getInstanceTipListSpy: jest.SpyInstance;
37-
37+
let getInstanceAuditPlansSpy: jest.SpyInstance;
3838
beforeEach(() => {
3939
MockDate.set(dayjs('2025-07-23 12:00:00').valueOf());
4040
jest.useFakeTimers({ legacyFakeTimers: true });
@@ -46,6 +46,8 @@ describe('SqlInsights', () => {
4646
getSqlPerformanceInsightsRelatedSQLSpy =
4747
sqleMockApi.sqlInsight.getSqlPerformanceInsightsRelatedSQL();
4848
getInstanceTipListSpy = sqleMockApi.instance.getInstanceTipList();
49+
getInstanceAuditPlansSpy =
50+
sqleMockApi.instanceAuditPlan.getInstanceAuditPlans();
4951
(useDispatch as jest.Mock).mockImplementation(() => dispatchSpy);
5052
(useSelector as jest.Mock).mockImplementation((e) =>
5153
e({
@@ -77,6 +79,7 @@ describe('SqlInsights', () => {
7779
expect(getInstanceTipListSpy).toHaveBeenCalledTimes(1);
7880

7981
await act(async () => jest.advanceTimersByTime(3000));
82+
expect(getInstanceAuditPlansSpy).toHaveBeenCalledTimes(1);
8083

8184
expect(getSqlPerformanceInsightsSpy).toHaveBeenCalledTimes(4);
8285
expect(screen.getByText('数据源综合性能趋势')).toBeInTheDocument();

packages/sqle/src/page/SqlInsights/components/ActiveSessionTrend/index.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,13 @@ const ActiveSessionTrend: React.FC<SqlInsightsChartProps> = ({
5959
updateRelateSqlListDateRange(selectedDateRange);
6060
}}
6161
errorInfo={errorMessage}
62-
onGoToEnable={onCreateSqlManagementConf}
62+
onGoToEnable={() =>
63+
onCreateSqlManagementConf(
64+
GetSqlPerformanceInsightsMetricNameEnum.active_session_trend
65+
)
66+
}
6367
isTaskEnabled={isTaskEnabled}
68+
instanceId={instanceId}
6469
/>
6570
</ActiveSessionTrendStyleWrapper>
6671
) : null;

packages/sqle/src/page/SqlInsights/components/DataSourcePerformanceTrend/index.tsx

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,25 @@ const DataSourcePerformanceTrend: React.FC<SqlInsightsChartProps> = ({
1313
instanceId,
1414
dateRange,
1515
pollingInterval,
16-
timePeriod
16+
timePeriod,
17+
onCreateSqlManagementConf
1718
}) => {
1819
const { t } = useTranslation();
1920
const { updateRelateSqlListDateRange } = useRelatedSqlRedux();
20-
const { loading, chartData, getChartData, errorMessage } =
21-
useSqlInsightsMetric({
22-
instanceId,
23-
dateRange,
24-
metricName: GetSqlPerformanceInsightsMetricNameEnum.comprehensive_trend,
25-
pollingInterval,
26-
timePeriod
27-
});
21+
const {
22+
loading,
23+
chartData,
24+
getChartData,
25+
errorMessage,
26+
isTaskEnabled,
27+
isTaskSupported
28+
} = useSqlInsightsMetric({
29+
instanceId,
30+
dateRange,
31+
metricName: GetSqlPerformanceInsightsMetricNameEnum.comprehensive_trend,
32+
pollingInterval,
33+
timePeriod
34+
});
2835

2936
useEffect(() => {
3037
const { unsubscribe } = eventEmitter.subscribe(
@@ -34,7 +41,7 @@ const DataSourcePerformanceTrend: React.FC<SqlInsightsChartProps> = ({
3441
return unsubscribe;
3542
}, [getChartData]);
3643

37-
return (
44+
return isTaskSupported ? (
3845
<DataSourcePerformanceTrendStyleWrapper>
3946
<SqlInsightsLineChart
4047
loading={loading}
@@ -48,10 +55,16 @@ const DataSourcePerformanceTrend: React.FC<SqlInsightsChartProps> = ({
4855
updateRelateSqlListDateRange(selectedDateRange);
4956
}}
5057
errorInfo={errorMessage}
51-
isTaskEnabled
58+
isTaskEnabled={isTaskEnabled}
59+
onGoToEnable={() =>
60+
onCreateSqlManagementConf(
61+
GetSqlPerformanceInsightsMetricNameEnum.comprehensive_trend
62+
)
63+
}
64+
instanceId={instanceId}
5265
/>
5366
</DataSourcePerformanceTrendStyleWrapper>
54-
);
67+
) : null;
5568
};
5669

5770
export default DataSourcePerformanceTrend;

0 commit comments

Comments
 (0)