mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-11 12:07:42 +00:00
[improvement][semantic-fe] Fixing the logic error in the dimension value setting. (#499)
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. * [improvement][semantic-fe] Fixing the logic error in the dimension value setting.
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
export const ROUTE_AUTH_CODES = {};
|
export const ROUTE_AUTH_CODES = { SYSTEM_ADMIN: 'SYSTEM_ADMIN' };
|
||||||
|
|
||||||
const ENV_KEY = {
|
const ENV_KEY = {
|
||||||
CHAT: 'chat',
|
CHAT: 'chat',
|
||||||
@@ -88,8 +88,8 @@ const ROUTES = [
|
|||||||
{
|
{
|
||||||
path: '/system',
|
path: '/system',
|
||||||
name: 'system',
|
name: 'system',
|
||||||
hideInMenu: true,
|
|
||||||
component: './System',
|
component: './System',
|
||||||
|
access: ROUTE_AUTH_CODES.SYSTEM_ADMIN,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
|
|||||||
@@ -11,7 +11,9 @@ import { queryCurrentUser } from './services/user';
|
|||||||
import { traverseRoutes, isMobile, getToken } from './utils/utils';
|
import { traverseRoutes, isMobile, getToken } from './utils/utils';
|
||||||
import { publicPath } from '../config/defaultSettings';
|
import { publicPath } from '../config/defaultSettings';
|
||||||
import { Copilot } from 'supersonic-chat-sdk';
|
import { Copilot } from 'supersonic-chat-sdk';
|
||||||
|
import { getSystemConfig } from '@/services/user';
|
||||||
export { request } from './services/request';
|
export { request } from './services/request';
|
||||||
|
import { ROUTE_AUTH_CODES } from '../config/routes';
|
||||||
|
|
||||||
const replaceRoute = '/';
|
const replaceRoute = '/';
|
||||||
|
|
||||||
@@ -37,8 +39,13 @@ export const initialStateConfig = {
|
|||||||
),
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
const getAuthCodes = () => {
|
const getAuthCodes = (params: any) => {
|
||||||
return [];
|
const { currentUser, systemConfigAdmins } = params;
|
||||||
|
const codes = [];
|
||||||
|
if (Array.isArray(systemConfigAdmins) && systemConfigAdmins.includes(currentUser?.staffName)) {
|
||||||
|
codes.push(ROUTE_AUTH_CODES.SYSTEM_ADMIN);
|
||||||
|
}
|
||||||
|
return codes;
|
||||||
};
|
};
|
||||||
|
|
||||||
export async function getInitialState(): Promise<{
|
export async function getInitialState(): Promise<{
|
||||||
@@ -58,6 +65,16 @@ export async function getInitialState(): Promise<{
|
|||||||
return undefined;
|
return undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const fetchSystemConfigPermission = async () => {
|
||||||
|
try {
|
||||||
|
const { code, data } = await getSystemConfig();
|
||||||
|
if (code === 200) {
|
||||||
|
const { admins } = data;
|
||||||
|
return [...admins];
|
||||||
|
}
|
||||||
|
} catch (error) {}
|
||||||
|
return [];
|
||||||
|
};
|
||||||
let currentUser: any;
|
let currentUser: any;
|
||||||
if (!window.location.pathname.includes('login')) {
|
if (!window.location.pathname.includes('login')) {
|
||||||
currentUser = await fetchUserInfo();
|
currentUser = await fetchUserInfo();
|
||||||
@@ -70,7 +87,12 @@ export async function getInitialState(): Promise<{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const authCodes = getAuthCodes();
|
const systemConfigAdmins = await fetchSystemConfigPermission();
|
||||||
|
|
||||||
|
const authCodes = getAuthCodes({
|
||||||
|
currentUser,
|
||||||
|
systemConfigAdmins,
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
fetchUserInfo,
|
fetchUserInfo,
|
||||||
|
|||||||
@@ -1,51 +1,17 @@
|
|||||||
import { Space } from 'antd';
|
import { Space } from 'antd';
|
||||||
import React, { useEffect, useState } from 'react';
|
import React from 'react';
|
||||||
import { useModel, history } from 'umi';
|
|
||||||
import Avatar from './AvatarDropdown';
|
import Avatar from './AvatarDropdown';
|
||||||
import { SettingOutlined } from '@ant-design/icons';
|
|
||||||
import { getSystemConfig } from '@/services/user';
|
|
||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
|
|
||||||
export type SiderTheme = 'light' | 'dark';
|
export type SiderTheme = 'light' | 'dark';
|
||||||
|
|
||||||
const GlobalHeaderRight: React.FC = () => {
|
const GlobalHeaderRight: React.FC = () => {
|
||||||
const { initialState } = useModel('@@initialState');
|
|
||||||
const [hasSettingPermisson, setHasSettingPermisson] = useState<boolean>(false);
|
|
||||||
useEffect(() => {
|
|
||||||
querySystemConfig();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!initialState || !initialState.settings) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const { currentUser = {} } = initialState as any;
|
|
||||||
|
|
||||||
const querySystemConfig = async () => {
|
|
||||||
const { code, data } = await getSystemConfig();
|
|
||||||
if (code === 200) {
|
|
||||||
const { admins } = data;
|
|
||||||
if (Array.isArray(admins) && admins.includes(currentUser?.staffName)) {
|
|
||||||
setHasSettingPermisson(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function handleLogin() {}
|
function handleLogin() {}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Space className={styles.right}>
|
<Space className={styles.right}>
|
||||||
<Avatar onClickLogin={handleLogin} />
|
<Avatar onClickLogin={handleLogin} />
|
||||||
{hasSettingPermisson && (
|
|
||||||
<span
|
|
||||||
className={styles.action}
|
|
||||||
style={{ padding: 20 }}
|
|
||||||
onClick={() => {
|
|
||||||
history.push(`/system`);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SettingOutlined />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Space>
|
</Space>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -190,9 +190,11 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
|||||||
if (record.hasAdminRes) {
|
if (record.hasAdminRes) {
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
onClick={() => {
|
target="blank"
|
||||||
history.replace(`/model/${record.domainId}/${record.modelId}/metric`);
|
href={`/webapp/model/${record.domainId}/${record.modelId}/metric`}
|
||||||
}}
|
// onClick={() => {
|
||||||
|
// history.push(`/model/${record.domainId}/${record.modelId}/metric`);
|
||||||
|
// }}
|
||||||
>
|
>
|
||||||
{record.modelName}
|
{record.modelName}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ import MetricTable from './Table';
|
|||||||
import { ColumnConfig } from '../data';
|
import { ColumnConfig } from '../data';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { ISemantic } from '../../data';
|
import { ISemantic } from '../../data';
|
||||||
|
import { DateFieldMap } from '@/pages/SemanticModel/constant';
|
||||||
|
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
const { Option } = Select;
|
const { Option } = Select;
|
||||||
@@ -32,11 +33,6 @@ type Props = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
|
const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
|
||||||
const dateFieldMap = {
|
|
||||||
[DateRangeType.DAY]: 'sys_imp_date',
|
|
||||||
[DateRangeType.WEEK]: 'sys_imp_week',
|
|
||||||
[DateRangeType.MONTH]: 'sys_imp_month',
|
|
||||||
};
|
|
||||||
const indicatorFields = useRef<{ name: string; column: string }[]>([]);
|
const indicatorFields = useRef<{ name: string; column: string }[]>([]);
|
||||||
const [metricTrendData, setMetricTrendData] = useState<ISemantic.IMetricTrendItem[]>([]);
|
const [metricTrendData, setMetricTrendData] = useState<ISemantic.IMetricTrendItem[]>([]);
|
||||||
const [metricTrendLoading, setMetricTrendLoading] = useState<boolean>(false);
|
const [metricTrendLoading, setMetricTrendLoading] = useState<boolean>(false);
|
||||||
@@ -61,7 +57,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
|
|||||||
}>({
|
}>({
|
||||||
startDate: dayjs().subtract(6, 'days').format('YYYY-MM-DD'),
|
startDate: dayjs().subtract(6, 'days').format('YYYY-MM-DD'),
|
||||||
endDate: dayjs().format('YYYY-MM-DD'),
|
endDate: dayjs().format('YYYY-MM-DD'),
|
||||||
dateField: dateFieldMap[DateRangeType.DAY],
|
dateField: DateFieldMap[DateRangeType.DAY],
|
||||||
});
|
});
|
||||||
const [rowNumber, setRowNumber] = useState<number>(5);
|
const [rowNumber, setRowNumber] = useState<number>(5);
|
||||||
const [chartType, setChartType] = useState<'chart' | 'table'>('chart');
|
const [chartType, setChartType] = useState<'chart' | 'table'>('chart');
|
||||||
@@ -227,12 +223,12 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
|
|||||||
onDateRangeChange={(value, config) => {
|
onDateRangeChange={(value, config) => {
|
||||||
const [startDate, endDate] = value;
|
const [startDate, endDate] = value;
|
||||||
const { dateSettingType, dynamicParams, staticParams } = config;
|
const { dateSettingType, dynamicParams, staticParams } = config;
|
||||||
let dateField = dateFieldMap[DateRangeType.DAY];
|
let dateField = DateFieldMap[DateRangeType.DAY];
|
||||||
if (DateSettingType.DYNAMIC === dateSettingType) {
|
if (DateSettingType.DYNAMIC === dateSettingType) {
|
||||||
dateField = dateFieldMap[dynamicParams.dateRangeType];
|
dateField = DateFieldMap[dynamicParams.dateRangeType];
|
||||||
}
|
}
|
||||||
if (DateSettingType.STATIC === dateSettingType) {
|
if (DateSettingType.STATIC === dateSettingType) {
|
||||||
dateField = dateFieldMap[staticParams.dateRangeType];
|
dateField = DateFieldMap[staticParams.dateRangeType];
|
||||||
}
|
}
|
||||||
setPeriodDate({ startDate, endDate, dateField });
|
setPeriodDate({ startDate, endDate, dateField });
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -1029,6 +1029,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
|
|||||||
{createDimensionModalVisible && (
|
{createDimensionModalVisible && (
|
||||||
<DimensionInfoModal
|
<DimensionInfoModal
|
||||||
modelId={modelId}
|
modelId={modelId}
|
||||||
|
domainId={selectDomainId}
|
||||||
bindModalVisible={createDimensionModalVisible}
|
bindModalVisible={createDimensionModalVisible}
|
||||||
dimensionItem={dimensionItem}
|
dimensionItem={dimensionItem}
|
||||||
dataSourceList={nodeDataSource ? [nodeDataSource] : dataSourceInfoList}
|
dataSourceList={nodeDataSource ? [nodeDataSource] : dataSourceInfoList}
|
||||||
|
|||||||
@@ -1,817 +0,0 @@
|
|||||||
import React, { useEffect, useState, useRef } from 'react';
|
|
||||||
import { connect } from 'umi';
|
|
||||||
import type { StateType } from '../model';
|
|
||||||
// import { IGroup } from '@antv/g-base';
|
|
||||||
import type { Dispatch } from 'umi';
|
|
||||||
import {
|
|
||||||
typeConfigs,
|
|
||||||
formatterRelationData,
|
|
||||||
loopNodeFindDataSource,
|
|
||||||
getNodeConfigByType,
|
|
||||||
flatGraphDataNode,
|
|
||||||
} from './utils';
|
|
||||||
import { message } from 'antd';
|
|
||||||
import { getDomainSchemaRela } from '../service';
|
|
||||||
import { Item, TreeGraphData, NodeConfig, IItemBaseConfig } from '@antv/g6-core';
|
|
||||||
import initToolBar from './components/ToolBar';
|
|
||||||
import initTooltips from './components/ToolTips';
|
|
||||||
import initContextMenu from './components/ContextMenu';
|
|
||||||
// import initLegend from './components/Legend';
|
|
||||||
import { SemanticNodeType } from '../enum';
|
|
||||||
import G6 from '@antv/g6';
|
|
||||||
import { ISemantic, IDataSource } from '../data';
|
|
||||||
import NodeInfoDrawer from './components/NodeInfoDrawer';
|
|
||||||
import DimensionInfoModal from '../components/DimensionInfoModal';
|
|
||||||
import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
|
|
||||||
import DeleteConfirmModal from './components/DeleteConfirmModal';
|
|
||||||
import ClassDataSourceTypeModal from '../components/ClassDataSourceTypeModal';
|
|
||||||
import GraphToolBar from './components/GraphToolBar';
|
|
||||||
import GraphLegend from './components/GraphLegend';
|
|
||||||
import GraphLegendVisibleModeItem from './components/GraphLegendVisibleModeItem';
|
|
||||||
import { flowRectNodeRegister, cardNodeRegister } from './CustomNodeRegister';
|
|
||||||
|
|
||||||
// import { cloneDeep } from 'lodash';
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
// graphShowType?: SemanticNodeType;
|
|
||||||
domainManger: StateType;
|
|
||||||
dispatch: Dispatch;
|
|
||||||
};
|
|
||||||
|
|
||||||
flowRectNodeRegister();
|
|
||||||
|
|
||||||
const DomainManger: React.FC<Props> = ({
|
|
||||||
domainManger,
|
|
||||||
// graphShowType = SemanticNodeType.DIMENSION,
|
|
||||||
// graphShowType,
|
|
||||||
dispatch,
|
|
||||||
}) => {
|
|
||||||
const ref = useRef(null);
|
|
||||||
const dataSourceRef = useRef<ISemantic.IDomainSchemaRelaList>([]);
|
|
||||||
const [graphData, setGraphData] = useState<TreeGraphData>();
|
|
||||||
const [createDimensionModalVisible, setCreateDimensionModalVisible] = useState<boolean>(false);
|
|
||||||
const [createMetricModalVisible, setCreateMetricModalVisible] = useState<boolean>(false);
|
|
||||||
const [infoDrawerVisible, setInfoDrawerVisible] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const [currentNodeData, setCurrentNodeData] = useState<any>();
|
|
||||||
|
|
||||||
const legendDataRef = useRef<any[]>([]);
|
|
||||||
const graphRef = useRef<any>(null);
|
|
||||||
// const legendDataFilterFunctions = useRef<any>({});
|
|
||||||
const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
|
|
||||||
|
|
||||||
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
|
|
||||||
|
|
||||||
const [nodeDataSource, setNodeDataSource] = useState<any>();
|
|
||||||
|
|
||||||
const [dataSourceInfoList, setDataSourceInfoList] = useState<IDataSource.IDataSourceItem[]>([]);
|
|
||||||
|
|
||||||
const { dimensionList, metricList, selectModelId: modelId, selectDomainId } = domainManger;
|
|
||||||
|
|
||||||
const dimensionListRef = useRef<ISemantic.IDimensionItem[]>([]);
|
|
||||||
const metricListRef = useRef<ISemantic.IMetricItem[]>([]);
|
|
||||||
|
|
||||||
const [confirmModalOpenState, setConfirmModalOpenState] = useState<boolean>(false);
|
|
||||||
const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);
|
|
||||||
|
|
||||||
const visibleModeOpenRef = useRef<boolean>(false);
|
|
||||||
const [visibleModeOpen, setVisibleModeOpen] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const graphShowTypeRef = useRef<SemanticNodeType>();
|
|
||||||
const [graphShowTypeState, setGraphShowTypeState] = useState<SemanticNodeType>();
|
|
||||||
|
|
||||||
const graphLegendDataSourceIds = useRef<string[]>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
dimensionListRef.current = dimensionList;
|
|
||||||
metricListRef.current = metricList;
|
|
||||||
}, [dimensionList, metricList]);
|
|
||||||
|
|
||||||
const handleSeachNode = (text: string) => {
|
|
||||||
const filterData = dataSourceRef.current.reduce(
|
|
||||||
(data: ISemantic.IDomainSchemaRelaList, item: ISemantic.IDomainSchemaRelaItem) => {
|
|
||||||
const { dimensions, metrics } = item;
|
|
||||||
const dimensionsList = dimensions.filter((dimension) => {
|
|
||||||
return dimension.name.includes(text);
|
|
||||||
});
|
|
||||||
const metricsList = metrics.filter((metric) => {
|
|
||||||
return metric.name.includes(text);
|
|
||||||
});
|
|
||||||
data.push({
|
|
||||||
...item,
|
|
||||||
dimensions: dimensionsList,
|
|
||||||
metrics: metricsList,
|
|
||||||
});
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
const rootGraphData = changeGraphData(filterData);
|
|
||||||
refreshGraphData(rootGraphData);
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeGraphData = (dataSourceList: ISemantic.IDomainSchemaRelaList): TreeGraphData => {
|
|
||||||
const relationData = formatterRelationData({
|
|
||||||
dataSourceList,
|
|
||||||
type: graphShowTypeRef.current,
|
|
||||||
limit: 20,
|
|
||||||
showDataSourceId: graphLegendDataSourceIds.current,
|
|
||||||
});
|
|
||||||
|
|
||||||
const graphRootData = {
|
|
||||||
id: 'root',
|
|
||||||
name: domainManger.selectDomainName,
|
|
||||||
children: relationData,
|
|
||||||
};
|
|
||||||
return graphRootData;
|
|
||||||
};
|
|
||||||
|
|
||||||
const initLegendData = (graphRootData: TreeGraphData) => {
|
|
||||||
const legendList = graphRootData?.children?.map((item: any) => {
|
|
||||||
const { id, name } = item;
|
|
||||||
return {
|
|
||||||
id,
|
|
||||||
label: name,
|
|
||||||
order: 4,
|
|
||||||
...typeConfigs.datasource,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
legendDataRef.current = legendList as any;
|
|
||||||
};
|
|
||||||
|
|
||||||
const queryDataSourceList = async (params: {
|
|
||||||
domainId: number;
|
|
||||||
graphShowType?: SemanticNodeType;
|
|
||||||
}) => {
|
|
||||||
const { code, data } = await getDomainSchemaRela(params.domainId);
|
|
||||||
if (code === 200) {
|
|
||||||
if (data) {
|
|
||||||
setDataSourceInfoList(
|
|
||||||
data.map((item: ISemantic.IDomainSchemaRelaItem) => {
|
|
||||||
return item.model;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const graphRootData = changeGraphData(data);
|
|
||||||
dataSourceRef.current = data;
|
|
||||||
initLegendData(graphRootData);
|
|
||||||
setGraphData(graphRootData);
|
|
||||||
return graphRootData;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
graphLegendDataSourceIds.current = undefined;
|
|
||||||
graphRef.current = null;
|
|
||||||
queryDataSourceList({ domainId: selectDomainId });
|
|
||||||
}, [selectDomainId]);
|
|
||||||
|
|
||||||
// const getLegendDataFilterFunctions = () => {
|
|
||||||
// legendDataRef.current.map((item: any) => {
|
|
||||||
// const { id } = item;
|
|
||||||
// legendDataFilterFunctions.current = {
|
|
||||||
// ...legendDataFilterFunctions.current,
|
|
||||||
// [id]: (d: any) => {
|
|
||||||
// if (d.legendType === id) {
|
|
||||||
// return true;
|
|
||||||
// }
|
|
||||||
// return false;
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
// });
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const setAllActiveLegend = (legend: any) => {
|
|
||||||
// const legendCanvas = legend._cfgs.legendCanvas;
|
|
||||||
// if (!legendCanvas) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// // 从图例中找出node-group节点;
|
|
||||||
// const group = legendCanvas.find((e: any) => e.get('name') === 'node-group');
|
|
||||||
// // 数据源的图例节点在node-group中的children中;
|
|
||||||
// const groups = group.get('children');
|
|
||||||
// groups.forEach((itemGroup: any) => {
|
|
||||||
// const labelText = itemGroup.find((e: any) => e.get('name') === 'circle-node-text');
|
|
||||||
// // legend中activateLegend事件触发在图例节点的Text上,方法中存在向上溯源的逻辑:const shapeGroup = shape.get('parent');
|
|
||||||
// // 因此复用实例方法时,在这里不能直接将图例节点传入,需要在节点的children中找任意一个元素作为入参;
|
|
||||||
// legend.activateLegend(labelText);
|
|
||||||
// });
|
|
||||||
// };
|
|
||||||
|
|
||||||
const handleContextMenuClickEdit = (item: IItemBaseConfig) => {
|
|
||||||
const targetData = item.model;
|
|
||||||
if (!targetData) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const datasource = loopNodeFindDataSource(item);
|
|
||||||
if (datasource) {
|
|
||||||
setNodeDataSource({
|
|
||||||
...datasource,
|
|
||||||
id: datasource.uid,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (targetData.nodeType === SemanticNodeType.DATASOURCE) {
|
|
||||||
setCreateDataSourceModalOpen(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (targetData.nodeType === SemanticNodeType.DIMENSION) {
|
|
||||||
const targetItem = dimensionListRef.current.find((item) => item.id === targetData.uid);
|
|
||||||
if (targetItem) {
|
|
||||||
setDimensionItem({ ...targetItem });
|
|
||||||
setCreateDimensionModalVisible(true);
|
|
||||||
} else {
|
|
||||||
message.error('获取维度初始化数据失败');
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (targetData.nodeType === SemanticNodeType.METRIC) {
|
|
||||||
const targetItem = metricListRef.current.find((item) => item.id === targetData.uid);
|
|
||||||
if (targetItem) {
|
|
||||||
setMetricItem({ ...targetItem });
|
|
||||||
setCreateMetricModalVisible(true);
|
|
||||||
} else {
|
|
||||||
message.error('获取指标初始化数据失败');
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleContextMenuClickCreate = (item: IItemBaseConfig, key: string) => {
|
|
||||||
const datasource = item.model;
|
|
||||||
if (!datasource) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setNodeDataSource({
|
|
||||||
...datasource,
|
|
||||||
id: datasource.uid,
|
|
||||||
});
|
|
||||||
if (key === 'createDimension') {
|
|
||||||
setCreateDimensionModalVisible(true);
|
|
||||||
}
|
|
||||||
if (key === 'createMetric') {
|
|
||||||
setCreateMetricModalVisible(true);
|
|
||||||
}
|
|
||||||
setDimensionItem(undefined);
|
|
||||||
setMetricItem(undefined);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleContextMenuClickDelete = (item: IItemBaseConfig) => {
|
|
||||||
const targetData = item.model;
|
|
||||||
if (!targetData) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (targetData.nodeType === SemanticNodeType.DATASOURCE) {
|
|
||||||
setCurrentNodeData({
|
|
||||||
...targetData,
|
|
||||||
id: targetData.uid,
|
|
||||||
});
|
|
||||||
setConfirmModalOpenState(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (targetData.nodeType === SemanticNodeType.DIMENSION) {
|
|
||||||
const targetItem = dimensionListRef.current.find((item) => item.id === targetData.uid);
|
|
||||||
if (targetItem) {
|
|
||||||
setCurrentNodeData({ ...targetData, ...targetItem });
|
|
||||||
setConfirmModalOpenState(true);
|
|
||||||
} else {
|
|
||||||
message.error('获取维度初始化数据失败');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (targetData.nodeType === SemanticNodeType.METRIC) {
|
|
||||||
const targetItem = metricListRef.current.find((item) => item.id === targetData.uid);
|
|
||||||
if (targetItem) {
|
|
||||||
setCurrentNodeData({ ...targetData, ...targetItem });
|
|
||||||
setConfirmModalOpenState(true);
|
|
||||||
} else {
|
|
||||||
message.error('获取指标初始化数据失败');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleContextMenuClick = (key: string, item: Item) => {
|
|
||||||
if (!item?._cfg) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
switch (key) {
|
|
||||||
case 'edit':
|
|
||||||
case 'editDatasource':
|
|
||||||
handleContextMenuClickEdit(item._cfg);
|
|
||||||
break;
|
|
||||||
case 'delete':
|
|
||||||
case 'deleteDatasource':
|
|
||||||
handleContextMenuClickDelete(item._cfg);
|
|
||||||
break;
|
|
||||||
case 'createDimension':
|
|
||||||
case 'createMetric':
|
|
||||||
handleContextMenuClickCreate(item._cfg, key);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNodeTypeClick = (nodeData: any) => {
|
|
||||||
setCurrentNodeData(nodeData);
|
|
||||||
setInfoDrawerVisible(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const graphConfigMap = {
|
|
||||||
dendrogram: {
|
|
||||||
defaultEdge: {
|
|
||||||
type: 'cubic-horizontal',
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
type: 'dendrogram',
|
|
||||||
direction: 'LR',
|
|
||||||
animate: false,
|
|
||||||
nodeSep: 200,
|
|
||||||
rankSep: 300,
|
|
||||||
radial: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mindmap: {
|
|
||||||
defaultEdge: {
|
|
||||||
type: 'polyline',
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
type: 'mindmap',
|
|
||||||
animate: false,
|
|
||||||
direction: 'H',
|
|
||||||
getHeight: () => {
|
|
||||||
return 50;
|
|
||||||
},
|
|
||||||
getWidth: () => {
|
|
||||||
return 50;
|
|
||||||
},
|
|
||||||
getVGap: () => {
|
|
||||||
return 10;
|
|
||||||
},
|
|
||||||
getHGap: () => {
|
|
||||||
return 50;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
function handleToolBarClick(code: string) {
|
|
||||||
if (code === 'visibleMode') {
|
|
||||||
visibleModeOpenRef.current = !visibleModeOpenRef.current;
|
|
||||||
setVisibleModeOpen(visibleModeOpenRef.current);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
visibleModeOpenRef.current = false;
|
|
||||||
setVisibleModeOpen(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
const lessNodeZoomRealAndMoveCenter = () => {
|
|
||||||
const bbox = graphRef.current.get('group').getBBox();
|
|
||||||
|
|
||||||
// 计算图形的中心点
|
|
||||||
const centerX = (bbox.minX + bbox.maxX) / 2;
|
|
||||||
const centerY = (bbox.minY + bbox.maxY) / 2;
|
|
||||||
|
|
||||||
// 获取画布的中心点
|
|
||||||
const canvasWidth = graphRef.current.get('width');
|
|
||||||
const canvasHeight = graphRef.current.get('height');
|
|
||||||
const canvasCenterX = canvasWidth / 2;
|
|
||||||
const canvasCenterY = canvasHeight / 2;
|
|
||||||
|
|
||||||
// 计算画布需要移动的距离
|
|
||||||
const dx = canvasCenterX - centerX;
|
|
||||||
const dy = canvasCenterY - centerY;
|
|
||||||
|
|
||||||
// 将画布移动到中心点
|
|
||||||
graphRef.current.translate(dx, dy);
|
|
||||||
|
|
||||||
// 将缩放比例设置为 1,以画布中心点为中心进行缩放
|
|
||||||
graphRef.current.zoomTo(1, { x: canvasCenterX, y: canvasCenterY });
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!Array.isArray(graphData?.children)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const container = document.getElementById('semanticGraph');
|
|
||||||
const width = container!.scrollWidth;
|
|
||||||
const height = container!.scrollHeight || 500;
|
|
||||||
|
|
||||||
const graph = graphRef.current;
|
|
||||||
|
|
||||||
if (!graph && graphData) {
|
|
||||||
const graphNodeList = flatGraphDataNode(graphData.children);
|
|
||||||
const graphConfigKey = graphNodeList.length > 20 ? 'dendrogram' : 'mindmap';
|
|
||||||
|
|
||||||
// getLegendDataFilterFunctions();
|
|
||||||
const toolbar = initToolBar({ onSearch: handleSeachNode, onClick: handleToolBarClick });
|
|
||||||
const tooltip = initTooltips();
|
|
||||||
const contextMenu = initContextMenu({
|
|
||||||
onMenuClick: handleContextMenuClick,
|
|
||||||
});
|
|
||||||
// const legend = initLegend({
|
|
||||||
// nodeData: legendDataRef.current,
|
|
||||||
// filterFunctions: { ...legendDataFilterFunctions.current },
|
|
||||||
// });
|
|
||||||
|
|
||||||
graphRef.current = new G6.Graph({
|
|
||||||
container: 'semanticGraph',
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
// translate the graph to align the canvas's center, support by v3.5.1
|
|
||||||
fitCenter: true,
|
|
||||||
modes: {
|
|
||||||
default: [
|
|
||||||
// {
|
|
||||||
// type: 'collapse-expand',
|
|
||||||
// onChange: function onChange(item, collapsed) {
|
|
||||||
// const data = item!.get('model');
|
|
||||||
// data.collapsed = collapsed;
|
|
||||||
// return true;
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
'drag-node',
|
|
||||||
'drag-canvas',
|
|
||||||
// 'activate-relations',
|
|
||||||
{
|
|
||||||
type: 'zoom-canvas',
|
|
||||||
sensitivity: 0.3, // 设置缩放灵敏度,值越小,缩放越不敏感,默认值为 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'activate-relations',
|
|
||||||
trigger: 'mouseenter', // 触发方式,可以是 'mouseenter' 或 'click'
|
|
||||||
resetSelected: true, // 点击空白处时,是否取消高亮
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
defaultNode: {
|
|
||||||
type: 'card-node',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// graphRef.current = new G6.TreeGraph({
|
|
||||||
// container: 'semanticGraph',
|
|
||||||
// width,
|
|
||||||
// height,
|
|
||||||
// modes: {
|
|
||||||
// default: [
|
|
||||||
// // {
|
|
||||||
// // type: 'collapse-expand',
|
|
||||||
// // onChange: function onChange(item, collapsed) {
|
|
||||||
// // const data = item!.get('model');
|
|
||||||
// // data.collapsed = collapsed;
|
|
||||||
// // return true;
|
|
||||||
// // },
|
|
||||||
// // },
|
|
||||||
// 'drag-node',
|
|
||||||
// 'drag-canvas',
|
|
||||||
// // 'activate-relations',
|
|
||||||
// {
|
|
||||||
// type: 'zoom-canvas',
|
|
||||||
// sensitivity: 0.3, // 设置缩放灵敏度,值越小,缩放越不敏感,默认值为 1
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// type: 'activate-relations',
|
|
||||||
// trigger: 'mouseenter', // 触发方式,可以是 'mouseenter' 或 'click'
|
|
||||||
// resetSelected: true, // 点击空白处时,是否取消高亮
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// defaultNode: {
|
|
||||||
// type: 'card-node',
|
|
||||||
// },
|
|
||||||
// defaultEdge: {
|
|
||||||
// type: 'cubic-horizontal',
|
|
||||||
// style: {
|
|
||||||
// stroke: '#CED4D9',
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// // defaultNode: {
|
|
||||||
// // size: 26,
|
|
||||||
// // anchorPoints: [
|
|
||||||
// // [0, 0.5],
|
|
||||||
// // [1, 0.5],
|
|
||||||
// // ],
|
|
||||||
// // labelCfg: {
|
|
||||||
// // position: 'right',
|
|
||||||
// // offset: 5,
|
|
||||||
// // style: {
|
|
||||||
// // stroke: '#fff',
|
|
||||||
// // lineWidth: 4,
|
|
||||||
// // },
|
|
||||||
// // },
|
|
||||||
// // },
|
|
||||||
// // defaultEdge: {
|
|
||||||
// // type: graphConfigMap[graphConfigKey].defaultEdge.type,
|
|
||||||
// // },
|
|
||||||
// layout: {
|
|
||||||
// ...graphConfigMap[graphConfigKey].layout,
|
|
||||||
// },
|
|
||||||
// plugins: [tooltip, toolbar, contextMenu],
|
|
||||||
// // plugins: [legend, tooltip, toolbar, contextMenu],
|
|
||||||
// });
|
|
||||||
|
|
||||||
cardNodeRegister(graphRef.current);
|
|
||||||
|
|
||||||
graphRef.current.set('initGraphData', graphData);
|
|
||||||
graphRef.current.set('initDataSource', dataSourceRef.current);
|
|
||||||
|
|
||||||
// const legendCanvas = legend._cfgs.legendCanvas;
|
|
||||||
|
|
||||||
// legend模式事件方法bindEvents会有点击图例空白清空选中的逻辑,在注册click事件前,先将click事件队列清空;
|
|
||||||
// legend._cfgs.legendCanvas._events.click = [];
|
|
||||||
// legendCanvas.on('click', () => {
|
|
||||||
// // @ts-ignore findLegendItemsByState为Legend的 private方法,忽略ts校验
|
|
||||||
// const activedNodeList = legend.findLegendItemsByState('active');
|
|
||||||
// // 获取当前所有激活节点后进行数据遍历筛选;
|
|
||||||
// const activedNodeIds = activedNodeList.map((item: IGroup) => {
|
|
||||||
// return item.cfg.id;
|
|
||||||
// });
|
|
||||||
// const graphDataClone = cloneDeep(graphData);
|
|
||||||
// const filterGraphDataChildren = Array.isArray(graphDataClone?.children)
|
|
||||||
// ? graphDataClone.children.reduce((children: TreeGraphData[], item: TreeGraphData) => {
|
|
||||||
// if (activedNodeIds.includes(item.id)) {
|
|
||||||
// children.push(item);
|
|
||||||
// }
|
|
||||||
// return children;
|
|
||||||
// }, [])
|
|
||||||
// : [];
|
|
||||||
// graphDataClone.children = filterGraphDataChildren;
|
|
||||||
// refreshGraphData(graphDataClone);
|
|
||||||
// });
|
|
||||||
|
|
||||||
graphRef.current.node(function (node: NodeConfig) {
|
|
||||||
return getNodeConfigByType(node, {
|
|
||||||
label: node.name,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = {
|
|
||||||
nodes: [
|
|
||||||
{
|
|
||||||
name: 'cardNodeApp',
|
|
||||||
ip: '127.0.0.1',
|
|
||||||
nodeError: true,
|
|
||||||
dataType: 'root',
|
|
||||||
keyInfo: 'this is a card node info',
|
|
||||||
x: 100,
|
|
||||||
y: 50,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'cardNodeApp',
|
|
||||||
ip: '127.0.0.1',
|
|
||||||
nodeError: false,
|
|
||||||
dataType: 'subRoot',
|
|
||||||
keyInfo: 'this is sub root',
|
|
||||||
x: 100,
|
|
||||||
y: 150,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'cardNodeApp',
|
|
||||||
ip: '127.0.0.1',
|
|
||||||
nodeError: false,
|
|
||||||
dataType: 'subRoot',
|
|
||||||
keyInfo: 'this is sub root',
|
|
||||||
x: 100,
|
|
||||||
y: 250,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'sub',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
edges: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
graphRef.current.data(data);
|
|
||||||
// graphRef.current.data(graphData);
|
|
||||||
graphRef.current.render();
|
|
||||||
|
|
||||||
const nodeCount = graphRef.current.getNodes().length;
|
|
||||||
if (nodeCount < 10) {
|
|
||||||
lessNodeZoomRealAndMoveCenter();
|
|
||||||
} else {
|
|
||||||
graphRef.current.fitView([80, 80]);
|
|
||||||
}
|
|
||||||
|
|
||||||
graphRef.current.on('node:click', (evt: any) => {
|
|
||||||
const item = evt.item; // 被操作的节点 item
|
|
||||||
const itemData = item?._cfg?.model;
|
|
||||||
if (itemData) {
|
|
||||||
const { nodeType } = itemData;
|
|
||||||
if (
|
|
||||||
[
|
|
||||||
SemanticNodeType.DIMENSION,
|
|
||||||
SemanticNodeType.METRIC,
|
|
||||||
SemanticNodeType.DATASOURCE,
|
|
||||||
].includes(nodeType)
|
|
||||||
) {
|
|
||||||
handleNodeTypeClick(itemData);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
graphRef.current.on('canvas:click', () => {
|
|
||||||
setInfoDrawerVisible(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
const rootNode = graphRef.current.findById('root');
|
|
||||||
graphRef.current.hideItem(rootNode);
|
|
||||||
if (typeof window !== 'undefined')
|
|
||||||
window.onresize = () => {
|
|
||||||
if (!graphRef.current || graphRef.current.get('destroyed')) return;
|
|
||||||
if (!container || !container.scrollWidth || !container.scrollHeight) return;
|
|
||||||
graphRef.current.changeSize(container.scrollWidth, container.scrollHeight);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, [graphData]);
|
|
||||||
|
|
||||||
const updateGraphData = async (params?: { graphShowType?: SemanticNodeType }) => {
|
|
||||||
const graphRootData = await queryDataSourceList({
|
|
||||||
modelId,
|
|
||||||
graphShowType: params?.graphShowType,
|
|
||||||
});
|
|
||||||
if (graphRootData) {
|
|
||||||
refreshGraphData(graphRootData);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const refreshGraphData = (graphRootData: TreeGraphData) => {
|
|
||||||
graphRef.current.changeData(graphRootData);
|
|
||||||
const rootNode = graphRef.current.findById('root');
|
|
||||||
graphRef.current.hideItem(rootNode);
|
|
||||||
graphRef.current.fitView();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<GraphLegend
|
|
||||||
legendOptions={legendDataRef.current}
|
|
||||||
defaultCheckAll={true}
|
|
||||||
onChange={(nodeIds: string[]) => {
|
|
||||||
graphLegendDataSourceIds.current = nodeIds;
|
|
||||||
const rootGraphData = changeGraphData(dataSourceRef.current);
|
|
||||||
refreshGraphData(rootGraphData);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{visibleModeOpen && (
|
|
||||||
<GraphLegendVisibleModeItem
|
|
||||||
value={graphShowTypeState}
|
|
||||||
onChange={(showType) => {
|
|
||||||
graphShowTypeRef.current = showType;
|
|
||||||
setGraphShowTypeState(showType);
|
|
||||||
const rootGraphData = changeGraphData(dataSourceRef.current);
|
|
||||||
refreshGraphData(rootGraphData);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<GraphToolBar
|
|
||||||
onClick={({ eventName }: { eventName: string }) => {
|
|
||||||
setNodeDataSource(undefined);
|
|
||||||
if (eventName === 'createDatabase') {
|
|
||||||
setCreateDataSourceModalOpen(true);
|
|
||||||
}
|
|
||||||
if (eventName === 'createDimension') {
|
|
||||||
setCreateDimensionModalVisible(true);
|
|
||||||
setDimensionItem(undefined);
|
|
||||||
}
|
|
||||||
if (eventName === 'createMetric') {
|
|
||||||
setCreateMetricModalVisible(true);
|
|
||||||
setMetricItem(undefined);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
key={`${modelId}`}
|
|
||||||
id="semanticGraph"
|
|
||||||
style={{ width: '100%', height: 'calc(100vh - 175px)', position: 'relative' }}
|
|
||||||
/>
|
|
||||||
<NodeInfoDrawer
|
|
||||||
nodeData={currentNodeData}
|
|
||||||
placement="right"
|
|
||||||
onClose={() => {
|
|
||||||
setInfoDrawerVisible(false);
|
|
||||||
}}
|
|
||||||
open={infoDrawerVisible}
|
|
||||||
mask={false}
|
|
||||||
getContainer={false}
|
|
||||||
onEditBtnClick={(nodeData: any) => {
|
|
||||||
handleContextMenuClickEdit({ model: nodeData });
|
|
||||||
setInfoDrawerVisible(false);
|
|
||||||
}}
|
|
||||||
onNodeChange={({ eventName }: { eventName: string }) => {
|
|
||||||
updateGraphData();
|
|
||||||
setInfoDrawerVisible(false);
|
|
||||||
if (eventName === SemanticNodeType.METRIC) {
|
|
||||||
dispatch({
|
|
||||||
type: 'domainManger/queryMetricList',
|
|
||||||
payload: {
|
|
||||||
modelId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (eventName === SemanticNodeType.DIMENSION) {
|
|
||||||
dispatch({
|
|
||||||
type: 'domainManger/queryDimensionList',
|
|
||||||
payload: {
|
|
||||||
modelId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{createDimensionModalVisible && (
|
|
||||||
<DimensionInfoModal
|
|
||||||
modelId={modelId}
|
|
||||||
bindModalVisible={createDimensionModalVisible}
|
|
||||||
dimensionItem={dimensionItem}
|
|
||||||
dataSourceList={nodeDataSource ? [nodeDataSource] : dataSourceInfoList}
|
|
||||||
onSubmit={() => {
|
|
||||||
setCreateDimensionModalVisible(false);
|
|
||||||
updateGraphData();
|
|
||||||
dispatch({
|
|
||||||
type: 'domainManger/queryDimensionList',
|
|
||||||
payload: {
|
|
||||||
modelId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onCancel={() => {
|
|
||||||
setCreateDimensionModalVisible(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{createMetricModalVisible && (
|
|
||||||
<MetricInfoCreateForm
|
|
||||||
domainId={selectDomainId}
|
|
||||||
modelId={modelId}
|
|
||||||
key={metricItem?.id}
|
|
||||||
datasourceId={nodeDataSource?.id}
|
|
||||||
createModalVisible={createMetricModalVisible}
|
|
||||||
metricItem={metricItem}
|
|
||||||
onSubmit={() => {
|
|
||||||
setCreateMetricModalVisible(false);
|
|
||||||
updateGraphData();
|
|
||||||
dispatch({
|
|
||||||
type: 'domainManger/queryMetricList',
|
|
||||||
payload: {
|
|
||||||
modelId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onCancel={() => {
|
|
||||||
setCreateMetricModalVisible(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{
|
|
||||||
<ClassDataSourceTypeModal
|
|
||||||
open={createDataSourceModalOpen}
|
|
||||||
onCancel={() => {
|
|
||||||
setNodeDataSource(undefined);
|
|
||||||
setCreateDataSourceModalOpen(false);
|
|
||||||
}}
|
|
||||||
dataSourceItem={nodeDataSource}
|
|
||||||
onSubmit={() => {
|
|
||||||
updateGraphData();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
{
|
|
||||||
<DeleteConfirmModal
|
|
||||||
open={confirmModalOpenState}
|
|
||||||
onOkClick={() => {
|
|
||||||
setConfirmModalOpenState(false);
|
|
||||||
updateGraphData();
|
|
||||||
graphShowTypeState === SemanticNodeType.DIMENSION
|
|
||||||
? dispatch({
|
|
||||||
type: 'domainManger/queryDimensionList',
|
|
||||||
payload: {
|
|
||||||
modelId,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
: dispatch({
|
|
||||||
type: 'domainManger/queryMetricList',
|
|
||||||
payload: {
|
|
||||||
modelId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onCancelClick={() => {
|
|
||||||
setConfirmModalOpenState(false);
|
|
||||||
}}
|
|
||||||
nodeData={currentNodeData}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
|
||||||
domainManger,
|
|
||||||
}))(DomainManger);
|
|
||||||
@@ -423,6 +423,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
|||||||
{createModalVisible && (
|
{createModalVisible && (
|
||||||
<DimensionInfoModal
|
<DimensionInfoModal
|
||||||
modelId={modelId}
|
modelId={modelId}
|
||||||
|
domainId={domainId}
|
||||||
bindModalVisible={createModalVisible}
|
bindModalVisible={createModalVisible}
|
||||||
dimensionItem={dimensionItem}
|
dimensionItem={dimensionItem}
|
||||||
dataSourceList={dataSourceList}
|
dataSourceList={dataSourceList}
|
||||||
|
|||||||
@@ -0,0 +1,206 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Button, Form, Input, Modal, Select } from 'antd';
|
||||||
|
|
||||||
|
import { formLayout } from '@/components/FormHelper/utils';
|
||||||
|
import { ISemantic } from '../../data';
|
||||||
|
import { saveCommonDimension, getDimensionList } from '../../service';
|
||||||
|
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
||||||
|
import { message } from 'antd';
|
||||||
|
|
||||||
|
export type CreateFormProps = {
|
||||||
|
domainId: number;
|
||||||
|
dimensionItem?: ISemantic.IDimensionItem;
|
||||||
|
onCancel: () => void;
|
||||||
|
bindModalVisible: boolean;
|
||||||
|
dimensionList: ISemantic.IDimensionItem[];
|
||||||
|
onSubmit: (values?: any) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
const CommonDimensionInfoModal: React.FC<CreateFormProps> = ({
|
||||||
|
domainId,
|
||||||
|
onCancel,
|
||||||
|
bindModalVisible,
|
||||||
|
dimensionItem,
|
||||||
|
onSubmit: handleUpdate,
|
||||||
|
}) => {
|
||||||
|
const isEdit = !!dimensionItem?.id;
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const { setFieldsValue, resetFields } = form;
|
||||||
|
const [saveLoading, setSaveLoading] = useState<boolean>(false);
|
||||||
|
const [dimensionOptions, setDimensionOptions] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
queryDimensionList();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const queryDimensionList = async () => {
|
||||||
|
setSaveLoading(true);
|
||||||
|
const { code, data, msg } = await getDimensionList({ domainId });
|
||||||
|
setSaveLoading(false);
|
||||||
|
const dimensionList = data?.list;
|
||||||
|
if (code === 200 && Array.isArray(dimensionList)) {
|
||||||
|
const dimensionMap = dimensionList.reduce(
|
||||||
|
(
|
||||||
|
dataMap: Record<
|
||||||
|
string,
|
||||||
|
{ label: string; options: { label: string; value: number; disabled?: boolean }[] }
|
||||||
|
>,
|
||||||
|
item: ISemantic.IDimensionItem,
|
||||||
|
) => {
|
||||||
|
const { modelId, modelName, name, id, commonDimensionId } = item;
|
||||||
|
const target = dataMap[modelId];
|
||||||
|
if (target) {
|
||||||
|
target.options.push({
|
||||||
|
label: name,
|
||||||
|
value: id,
|
||||||
|
disabled: !!commonDimensionId,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
dataMap[modelId] = {
|
||||||
|
label: modelName || `${modelId}`,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: name,
|
||||||
|
value: id,
|
||||||
|
disabled: !!commonDimensionId,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return dataMap;
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
);
|
||||||
|
setDimensionOptions(Object.values(dimensionMap));
|
||||||
|
} else {
|
||||||
|
message.error(msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (isSilenceSubmit = false) => {
|
||||||
|
const fieldsValue = await form.validateFields();
|
||||||
|
await saveDimension(
|
||||||
|
{
|
||||||
|
...fieldsValue,
|
||||||
|
},
|
||||||
|
isSilenceSubmit,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveDimension = async (fieldsValue: any, isSilenceSubmit = false) => {
|
||||||
|
const queryParams = {
|
||||||
|
domainId: isEdit ? dimensionItem.domainId : domainId,
|
||||||
|
type: 'categorical',
|
||||||
|
...fieldsValue,
|
||||||
|
};
|
||||||
|
|
||||||
|
const { code, msg } = await saveCommonDimension(queryParams);
|
||||||
|
if (code === 200) {
|
||||||
|
if (!isSilenceSubmit) {
|
||||||
|
message.success('编辑公共维度成功');
|
||||||
|
handleUpdate(fieldsValue);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
message.error(msg);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (dimensionItem) {
|
||||||
|
setFieldsValue({ ...dimensionItem });
|
||||||
|
} else {
|
||||||
|
resetFields();
|
||||||
|
}
|
||||||
|
}, [dimensionItem]);
|
||||||
|
|
||||||
|
const renderFooter = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button onClick={onCancel}>取消</Button>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
loading={saveLoading}
|
||||||
|
onClick={() => {
|
||||||
|
handleSubmit();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
完成
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderContent = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FormItem hidden={true} name="id" label="ID">
|
||||||
|
<Input placeholder="id" />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
name="name"
|
||||||
|
label="公共维度名称"
|
||||||
|
rules={[{ required: true, message: '请输入公共维度名称' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="名称不可重复" />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
name="bizName"
|
||||||
|
label="字段名称"
|
||||||
|
rules={[{ required: true, message: '请输入字段名称' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="名称不可重复" disabled={isEdit} />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
// label="关联维度"
|
||||||
|
label={
|
||||||
|
<FormItemTitle
|
||||||
|
title={`关联维度`}
|
||||||
|
subTitle={`维度不能关联多个公共维度,已关联的维度会被禁用`}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
name="dimensionIds"
|
||||||
|
// rules={[{ required: true, message: '请选择所要关联的维度' }]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
showSearch
|
||||||
|
mode="multiple"
|
||||||
|
allowClear
|
||||||
|
placeholder="选择所要关联的维度"
|
||||||
|
options={dimensionOptions}
|
||||||
|
filterOption={(input, option: any) =>
|
||||||
|
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem name="description" label="维度描述">
|
||||||
|
<TextArea placeholder="请输入维度描述" />
|
||||||
|
</FormItem>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
width={800}
|
||||||
|
destroyOnClose
|
||||||
|
title="公共维度信息"
|
||||||
|
style={{ top: 48 }}
|
||||||
|
maskClosable={false}
|
||||||
|
open={bindModalVisible}
|
||||||
|
footer={renderFooter()}
|
||||||
|
onCancel={onCancel}
|
||||||
|
>
|
||||||
|
<Form {...formLayout} form={form}>
|
||||||
|
{renderContent()}
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CommonDimensionInfoModal;
|
||||||
@@ -0,0 +1,196 @@
|
|||||||
|
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||||
|
import ProTable from '@ant-design/pro-table';
|
||||||
|
import { message, Button, Space, Popconfirm, Input } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import type { Dispatch } from 'umi';
|
||||||
|
import { connect } from 'umi';
|
||||||
|
import type { StateType } from '../../model';
|
||||||
|
import { getCommonDimensionList, deleteCommonDimension } from '../../service';
|
||||||
|
import CommonDimensionInfoModal from './CommonDimensionInfoModal';
|
||||||
|
import { ISemantic } from '../../data';
|
||||||
|
import moment from 'moment';
|
||||||
|
import styles from '../style.less';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
dispatch: Dispatch;
|
||||||
|
domainManger: StateType;
|
||||||
|
};
|
||||||
|
|
||||||
|
const CommonDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||||
|
const { selectDomainId: domainId, dimensionList } = domainManger;
|
||||||
|
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
|
||||||
|
const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
|
||||||
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
|
||||||
|
const queryDimensionList = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const { code, data, msg } = await getCommonDimensionList(domainId);
|
||||||
|
setLoading(false);
|
||||||
|
let resData: any = {};
|
||||||
|
if (code === 200) {
|
||||||
|
resData = {
|
||||||
|
data: data || [],
|
||||||
|
success: true,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
message.error(msg);
|
||||||
|
resData = {
|
||||||
|
data: [],
|
||||||
|
total: 0,
|
||||||
|
success: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return resData;
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns: ProColumns[] = [
|
||||||
|
{
|
||||||
|
dataIndex: 'id',
|
||||||
|
title: 'ID',
|
||||||
|
width: 80,
|
||||||
|
order: 100,
|
||||||
|
search: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'key',
|
||||||
|
title: '维度搜索',
|
||||||
|
hideInTable: true,
|
||||||
|
renderFormItem: () => <Input placeholder="请输入ID/维度名称/字段名称" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'name',
|
||||||
|
title: '维度名称',
|
||||||
|
search: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'bizName',
|
||||||
|
title: '字段名称',
|
||||||
|
search: false,
|
||||||
|
// order: 9,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'createdBy',
|
||||||
|
title: '创建人',
|
||||||
|
width: 100,
|
||||||
|
search: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
dataIndex: 'description',
|
||||||
|
title: '描述',
|
||||||
|
search: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
dataIndex: 'updatedAt',
|
||||||
|
title: '更新时间',
|
||||||
|
width: 180,
|
||||||
|
search: false,
|
||||||
|
render: (value: any) => {
|
||||||
|
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'x',
|
||||||
|
valueType: 'option',
|
||||||
|
width: 200,
|
||||||
|
render: (_, record) => {
|
||||||
|
return (
|
||||||
|
<Space className={styles.ctrlBtnContainer}>
|
||||||
|
<Button
|
||||||
|
key="dimensionEditBtn"
|
||||||
|
type="link"
|
||||||
|
onClick={() => {
|
||||||
|
setDimensionItem(record);
|
||||||
|
setCreateModalVisible(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
|
<Popconfirm
|
||||||
|
title="删除会自动解除所关联的维度,是否确认?"
|
||||||
|
okText="是"
|
||||||
|
cancelText="否"
|
||||||
|
placement="left"
|
||||||
|
onConfirm={async () => {
|
||||||
|
const { code, msg } = await deleteCommonDimension(record.id);
|
||||||
|
if (code === 200) {
|
||||||
|
setDimensionItem(undefined);
|
||||||
|
actionRef.current?.reload();
|
||||||
|
} else {
|
||||||
|
message.error(msg);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
key="dimensionDeleteEditBtn"
|
||||||
|
onClick={() => {
|
||||||
|
setDimensionItem(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
</Popconfirm>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable
|
||||||
|
style={{ marginTop: 15 }}
|
||||||
|
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
columns={columns}
|
||||||
|
request={queryDimensionList}
|
||||||
|
loading={loading}
|
||||||
|
search={false}
|
||||||
|
tableAlertRender={() => {
|
||||||
|
return false;
|
||||||
|
}}
|
||||||
|
size="small"
|
||||||
|
options={{ reload: false, density: false, fullScreen: false }}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="create"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setDimensionItem(undefined);
|
||||||
|
setCreateModalVisible(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
创建公共维度
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{createModalVisible && (
|
||||||
|
<CommonDimensionInfoModal
|
||||||
|
domainId={domainId}
|
||||||
|
bindModalVisible={createModalVisible}
|
||||||
|
dimensionItem={dimensionItem}
|
||||||
|
dimensionList={dimensionList}
|
||||||
|
onSubmit={() => {
|
||||||
|
setCreateModalVisible(false);
|
||||||
|
actionRef?.current?.reload();
|
||||||
|
return;
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
setCreateModalVisible(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||||
|
domainManger,
|
||||||
|
}))(CommonDimensionTable);
|
||||||
@@ -6,13 +6,19 @@ import SqlEditor from '@/components/SqlEditor';
|
|||||||
import InfoTagList from './InfoTagList';
|
import InfoTagList from './InfoTagList';
|
||||||
import { ISemantic } from '../data';
|
import { ISemantic } from '../data';
|
||||||
import { InfoCircleOutlined } from '@ant-design/icons';
|
import { InfoCircleOutlined } from '@ant-design/icons';
|
||||||
import { createDimension, updateDimension, mockDimensionAlias } from '../service';
|
import {
|
||||||
|
createDimension,
|
||||||
|
updateDimension,
|
||||||
|
mockDimensionAlias,
|
||||||
|
getCommonDimensionList,
|
||||||
|
} from '../service';
|
||||||
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
||||||
|
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
|
|
||||||
export type CreateFormProps = {
|
export type CreateFormProps = {
|
||||||
modelId: number;
|
modelId: number;
|
||||||
|
domainId: number;
|
||||||
dimensionItem?: ISemantic.IDimensionItem;
|
dimensionItem?: ISemantic.IDimensionItem;
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
bindModalVisible: boolean;
|
bindModalVisible: boolean;
|
||||||
@@ -26,6 +32,7 @@ const { Option } = Select;
|
|||||||
const { TextArea } = Input;
|
const { TextArea } = Input;
|
||||||
|
|
||||||
const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
||||||
|
domainId,
|
||||||
modelId,
|
modelId,
|
||||||
onCancel,
|
onCancel,
|
||||||
bindModalVisible,
|
bindModalVisible,
|
||||||
@@ -40,6 +47,7 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
|||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
const { setFieldsValue, resetFields } = form;
|
const { setFieldsValue, resetFields } = form;
|
||||||
const [llmLoading, setLlmLoading] = useState<boolean>(false);
|
const [llmLoading, setLlmLoading] = useState<boolean>(false);
|
||||||
|
const [commonDimensionOptions, setCommonDimensionOptions] = useState([]);
|
||||||
|
|
||||||
const handleSubmit = async (
|
const handleSubmit = async (
|
||||||
isSilenceSubmit = false,
|
isSilenceSubmit = false,
|
||||||
@@ -56,6 +64,26 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
queryCommonDimensionList();
|
||||||
|
}, [domainId]);
|
||||||
|
|
||||||
|
const queryCommonDimensionList = async () => {
|
||||||
|
const { code, data, msg } = await getCommonDimensionList(domainId);
|
||||||
|
// const { list, pageSize, pageNum, total } = data || {};
|
||||||
|
if (code === 200) {
|
||||||
|
const options = data.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.id,
|
||||||
|
label: item.name,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setCommonDimensionOptions(options);
|
||||||
|
} else {
|
||||||
|
message.error(msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const saveDimension = async (fieldsValue: any, isSilenceSubmit = false) => {
|
const saveDimension = async (fieldsValue: any, isSilenceSubmit = false) => {
|
||||||
const queryParams = {
|
const queryParams = {
|
||||||
modelId: isEdit ? dimensionItem.modelId : modelId,
|
modelId: isEdit ? dimensionItem.modelId : modelId,
|
||||||
@@ -215,6 +243,9 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
|||||||
))}
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
<FormItem name="commonDimensionId" label="公共维度">
|
||||||
|
<Select placeholder="请绑定公共维度" allowClear options={commonDimensionOptions} />
|
||||||
|
</FormItem>
|
||||||
<FormItem name="defaultValues" label="默认值">
|
<FormItem name="defaultValues" label="默认值">
|
||||||
<InfoTagList />
|
<InfoTagList />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
|
|||||||
import { ISemantic } from '../data';
|
import { ISemantic } from '../data';
|
||||||
import SemanticGraphCanvas from '../SemanticGraphCanvas';
|
import SemanticGraphCanvas from '../SemanticGraphCanvas';
|
||||||
import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
|
import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
|
||||||
|
import CommonDimensionTable from './CommonDimension/CommonDimensionTable';
|
||||||
import DatabaseTable from '../components/Database/DatabaseTable';
|
import DatabaseTable from '../components/Database/DatabaseTable';
|
||||||
|
|
||||||
import type { Dispatch } from 'umi';
|
import type { Dispatch } from 'umi';
|
||||||
@@ -72,6 +73,11 @@ const DomainManagerTab: React.FC<Props> = ({
|
|||||||
key: 'database',
|
key: 'database',
|
||||||
children: <DatabaseTable />,
|
children: <DatabaseTable />,
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// label: '公共维度',
|
||||||
|
// key: 'commonDimension',
|
||||||
|
// children: <CommonDimensionTable />,
|
||||||
|
// },
|
||||||
].filter((item) => {
|
].filter((item) => {
|
||||||
const target = domainList.find((domain) => domain.id === selectDomainId);
|
const target = domainList.find((domain) => domain.id === selectDomainId);
|
||||||
if (target?.hasEditPermission) {
|
if (target?.hasEditPermission) {
|
||||||
|
|||||||
@@ -146,10 +146,14 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
|
|||||||
const saveEntity = async (searchEnable = dimensionVisible) => {
|
const saveEntity = async (searchEnable = dimensionVisible) => {
|
||||||
setSaveLoading(true);
|
setSaveLoading(true);
|
||||||
const globalKnowledgeConfigFormFields: any = await getFormValidateFields();
|
const globalKnowledgeConfigFormFields: any = await getFormValidateFields();
|
||||||
|
|
||||||
const tempData = { ...modelRichConfigData };
|
const tempData = { ...modelRichConfigData };
|
||||||
const targetKnowledgeInfos = modelRichConfigData?.chatAggRichConfig?.knowledgeInfos;
|
const targetKnowledgeInfos = modelRichConfigData?.chatAggRichConfig?.knowledgeInfos || [];
|
||||||
let knowledgeInfos: IChatConfig.IKnowledgeInfosItem[] = [];
|
|
||||||
if (Array.isArray(targetKnowledgeInfos)) {
|
const hasHistoryConfig = targetKnowledgeInfos.find((item) => item.itemId === dimensionItem.id);
|
||||||
|
let knowledgeInfos: IChatConfig.IKnowledgeInfosItem[] = targetKnowledgeInfos;
|
||||||
|
|
||||||
|
if (hasHistoryConfig) {
|
||||||
knowledgeInfos = targetKnowledgeInfos.reduce(
|
knowledgeInfos = targetKnowledgeInfos.reduce(
|
||||||
(
|
(
|
||||||
knowledgeInfosList: IChatConfig.IKnowledgeInfosItem[],
|
knowledgeInfosList: IChatConfig.IKnowledgeInfosItem[],
|
||||||
@@ -173,6 +177,15 @@ const DimensionValueSettingForm: ForwardRefRenderFunction<any, Props> = (
|
|||||||
},
|
},
|
||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
knowledgeInfos.push({
|
||||||
|
itemId: dimensionItem.id,
|
||||||
|
bizName: dimensionItem.bizName,
|
||||||
|
knowledgeAdvancedConfig: {
|
||||||
|
...globalKnowledgeConfigFormFields,
|
||||||
|
},
|
||||||
|
searchEnable,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const { id, modelId, chatAggRichConfig } = tempData;
|
const { id, modelId, chatAggRichConfig } = tempData;
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { SemanticNodeType } from './enum';
|
import { SemanticNodeType } from './enum';
|
||||||
|
import { DateRangeType } from '@/components/MDatePicker/type';
|
||||||
|
|
||||||
export enum SENSITIVE_LEVEL {
|
export enum SENSITIVE_LEVEL {
|
||||||
LOW = 0,
|
LOW = 0,
|
||||||
@@ -58,3 +59,15 @@ export const SEMANTIC_NODE_TYPE_CONFIG = {
|
|||||||
color: 'orange',
|
color: 'orange',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const DateFieldMap = {
|
||||||
|
[DateRangeType.DAY]: 'sys_imp_date',
|
||||||
|
[DateRangeType.WEEK]: 'sys_imp_week',
|
||||||
|
[DateRangeType.MONTH]: 'sys_imp_month',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DatePeridMap = {
|
||||||
|
sys_imp_date: DateRangeType.DAY,
|
||||||
|
sys_imp_week: DateRangeType.WEEK,
|
||||||
|
sys_imp_month: DateRangeType.MONTH,
|
||||||
|
};
|
||||||
|
|||||||
@@ -140,8 +140,10 @@ export declare namespace ISemantic {
|
|||||||
fullPath: string;
|
fullPath: string;
|
||||||
datasourceId: number;
|
datasourceId: number;
|
||||||
modelId: number;
|
modelId: number;
|
||||||
|
modelName: string;
|
||||||
datasourceName: string;
|
datasourceName: string;
|
||||||
datasourceBizName: string;
|
datasourceBizName: string;
|
||||||
|
commonDimensionId: number;
|
||||||
semanticType: string;
|
semanticType: string;
|
||||||
alias: string;
|
alias: string;
|
||||||
useCnt: number;
|
useCnt: number;
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import request from 'umi-request';
|
import request from 'umi-request';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { DatePeridMap } from '@/pages/SemanticModel/constant';
|
||||||
|
|
||||||
const getRunningEnv = () => {
|
const getRunningEnv = () => {
|
||||||
return window.location.pathname.includes('/chatSetting/') ? 'chat' : 'semantic';
|
return window.location.pathname.includes('/chatSetting/') ? 'chat' : 'semantic';
|
||||||
@@ -57,6 +58,28 @@ export function getDimensionList(data: any): Promise<any> {
|
|||||||
return request.post(`${process.env.API_BASE_URL}dimension/queryDimension`, queryParams);
|
return request.post(`${process.env.API_BASE_URL}dimension/queryDimension`, queryParams);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getCommonDimensionList(domainId: number): Promise<any> {
|
||||||
|
return request.get(`${process.env.API_BASE_URL}commonDimension/getList?domainId=${domainId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function saveCommonDimension(data: any): Promise<any> {
|
||||||
|
if (data.id) {
|
||||||
|
return request(`${process.env.API_BASE_URL}commonDimension`, {
|
||||||
|
method: 'PUT',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return request.post(`${process.env.API_BASE_URL}commonDimension`, {
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteCommonDimension(id: any): Promise<any> {
|
||||||
|
return request(`${process.env.API_BASE_URL}commonDimension/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
export function getDimensionInModelCluster(modelId: number): Promise<any> {
|
export function getDimensionInModelCluster(modelId: number): Promise<any> {
|
||||||
return request.get(`${process.env.API_BASE_URL}dimension/getDimensionInModelCluster/${modelId}`);
|
return request.get(`${process.env.API_BASE_URL}dimension/getDimensionInModelCluster/${modelId}`);
|
||||||
}
|
}
|
||||||
@@ -494,7 +517,8 @@ export async function queryStruct({
|
|||||||
endDate,
|
endDate,
|
||||||
dateList: [],
|
dateList: [],
|
||||||
unit: 7,
|
unit: 7,
|
||||||
period: 'DAY',
|
// period: 'DAY',
|
||||||
|
period: DatePeridMap[dateField],
|
||||||
text: 'null',
|
text: 'null',
|
||||||
},
|
},
|
||||||
limit: 2000,
|
limit: 2000,
|
||||||
|
|||||||
Reference in New Issue
Block a user