topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-10 19:51:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[improvement][headless-fe] Revised the interaction for semantic modeling routing and implemented the initial version of metric management switching.

Browse Source
This commit is contained in:
tristanliu
2024-11-26 20:28:24 +08:00
parent 0edadd01eb
commit 2eca2d1c14
23 changed files with 571 additions and 895 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
webapp/packages/supersonic-fe/config/routes.ts
View File

@@ -62,27 +62,85 @@ const ROUTES = [
envEnableList: [ENV_KEY.SEMANTIC],
routes: [
{
path: '/model/:domainId',
component: './SemanticModel/DomainManager',
envEnableList: [ENV_KEY.SEMANTIC],
path: '/model/',
redirect: '/model/domain',
},
{
path: '/model/domain/',
component: './SemanticModel/OverviewContainer',
routes: [
{
path: '/model/:domainId/:menuKey',
path: '/model/domain/:domainId',
component: './SemanticModel/DomainManager',
routes: [
{
path: '/model/domain/:domainId/:menuKey',
component: './SemanticModel/DomainManager',
},
],
},
{
path: '/model/domain/manager/:domainId/:modelId',
component: './SemanticModel/ModelManager',
routes: [
{
path: '/model/domain/manager/:domainId/:modelId/:menuKey',
component: './SemanticModel/ModelManager',
},
],
},
],
},
{
path: '/model/manager/:domainId/:modelId',
component: './SemanticModel/ModelManager',
path: '/model/metric/:domainId/:modelId/:metricId',
component: './SemanticModel/Metric/Edit',
envEnableList: [ENV_KEY.SEMANTIC],
routes: [
{
path: '/model/manager/:domainId/:modelId/:menuKey',
component: './SemanticModel/ModelManager',
},
],
// routes: [
// {
// path: '/model/manager/:domainId/:modelId/:menuKey',
// component: './SemanticModel/ModelManager',
// },
// ],
},
// {
// path: '/model/manager/',
// component: './SemanticModel/OverviewContainer',
// routes: [
// {
// path: '/model/manager/:domainId/:modelId',
// component: './SemanticModel/ModelManager',
// routes: [
// {
// path: '/model/manager/:domainId/:modelId/:menuKey',
// component: './SemanticModel/ModelManager',
// },
// ],
// },
// ],
// },
// {
// path: '/model/:domainId',
// component: './SemanticModel/DomainManager',
// envEnableList: [ENV_KEY.SEMANTIC],
// routes: [
// {
// path: '/model/:domainId/:menuKey',
// component: './SemanticModel/DomainManager',
// },
// ],
// },
// {
// path: '/model/manager/:domainId/:modelId',
// component: './SemanticModel/ModelManager',
// envEnableList: [ENV_KEY.SEMANTIC],
// routes: [
// {
// path: '/model/manager/:domainId/:modelId/:menuKey',
// component: './SemanticModel/ModelManager',
// },
// ],
// },
// {
// path: '/model/:domainId/:modelId/:menuKey',
// component: './SemanticModel/DomainManager',

87
webapp/packages/supersonic-fe/src/pages/SemanticModel/DomainManager.tsx
View File

@@ -1,103 +1,26 @@
import { message } from 'antd';
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import { history, useParams, useModel } from '@umijs/max';
import { ISemantic } from './data';
import { getDomainList, getDataSetList } from './service';
import DomainManagerTab from './components/DomainManagerTab';
import { isArrayOfValues } from '@/utils/utils';
type Props = {};
const DomainManager: React.FC<Props> = ({}) => {
const defaultTabKey = 'overview';
const params: any = useParams();
const domainId = params.domainId;
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const databaseModel = useModel('SemanticModel.databaseData');
const { selectDomainId, domainList, setSelectDomain, setDomainList } = domainModel;
const { selectModelId } = modelModel;
const { MrefreshDatabaseList } = databaseModel;
const { selectDomainId } = domainModel;
const menuKey = params.menuKey ? params.menuKey : defaultTabKey;
const [collapsedState, setCollapsedState] = useState(true);
const [activeKey, setActiveKey] = useState<string>(menuKey);
const [dataSetList, setDataSetList] = useState<ISemantic.IDatasetItem[]>([]);
// const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
// const targetNode = domainList.filter((item: any) => {
// return `${item.id}` === domainId;
// })[0];
// if (!targetNode) {
// const firstRootNode = domainList.filter((item: any) => {
// return item.parentId === 0;
// })[0];
// if (firstRootNode) {
// const { id } = firstRootNode;
// setSelectDomain(firstRootNode);
// setActiveKey(menuKey);
// pushUrlMenu(id, 0, menuKey);
// }
// } else {
// setSelectDomain(targetNode);
// }
// };
// const initProjectTree = async () => {
// const { code, data, msg } = await getDomainList();
// if (code === 200) {
// initSelectedDomain(data);
// setDomainList(data);
// } else {
// message.error(msg);
// }
// };
// useEffect(() => {
// initProjectTree();
// MrefreshDatabaseList();
// }, []);
// useEffect(() => {
// if (!selectDomainId) {
// return;
// }
// // queryModelList();
// queryDataSetList();
// }, [selectDomainId]);
// const queryDataSetList = async () => {
// const { code, data, msg } = await getDataSetList(selectDomainId);
// if (code === 200) {
// setDataSetList(data);
// if (!isArrayOfValues(data)) {
// setActiveKey(defaultTabKey);
// }
// } else {
// message.error(msg);
// }
// };
const pushUrlMenu = (domainId: number, menuKey: string) => {
history.push(`/model/${domainId}/${menuKey}`);
history.push(`/model/domain/${domainId}/${menuKey}`);
};
const cleanModelInfo = (domainId) => {
setActiveKey(defaultTabKey);
pushUrlMenu(domainId, defaultTabKey);
// setSelectModel(undefined);
};
// const handleCollapsedBtn = () => {
// setCollapsedState(!collapsedState);
// };
return (
<DomainManagerTab
activeKey={activeKey}
dataSetList={dataSetList}
onBackDomainBtnClick={() => {
cleanModelInfo(selectDomainId);
}}
onMenuChange={(menuKey) => {
setActiveKey(menuKey);
pushUrlMenu(selectDomainId, menuKey);

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Market.tsx
View File

@@ -155,7 +155,7 @@ const ClassMetricTable: React.FC<Props> = ({}) => {
const columnsConfig = ColumnsConfig({
indicatorInfo: {
url: '/tag/detail/',
url: '/tag/detail/:indicatorId',
starType: 'tag',
},
});

12
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit.tsx
View File

@@ -1,7 +1,7 @@
import { message } from 'antd';
import React, { useState, useEffect } from 'react';
import { getMetricData } from '../service';
import { useParams } from '@umijs/max';
import { useParams, useModel } from '@umijs/max';
import styles from './style.less';
import { ISemantic } from '../data';
import MetricInfoEditSider from './MetricInfoEditSider';
@@ -14,7 +14,8 @@ const MetricDetail: React.FC<Props> = () => {
const params: any = useParams();
const metricId = params.metricId;
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
const metricModel = useModel('SemanticModel.metricData');
const { selectMetric, setSelectMetric } = metricModel;
const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
useEffect(() => {
@@ -24,10 +25,17 @@ const MetricDetail: React.FC<Props> = () => {
queryMetricData(metricId);
}, [metricId]);
useEffect(() => {
return () => {
setSelectMetric(undefined);
};
}, []);
const queryMetricData = async (metricId: string) => {
const { code, data, msg } = await getMetricData(metricId);
if (code === 200) {
setMetircData({ ...data });
setSelectMetric({ ...data });
return;
}
message.error(msg);

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx
View File

@@ -905,7 +905,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
key="console"
onClick={() => {
history.replace(
`/model/manager/${domainId}/${modelId || metricItem?.modelId}/dataSource`,
`/model/domain/manager/${domainId}/${modelId || metricItem?.modelId}/dataSource`,
);
onCancel?.();
}}

30
webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx
View File

@@ -4,27 +4,18 @@ import ModelManagerTab from './components/ModelManagerTab';
type Props = {};
const OverviewContainer: React.FC<Props> = ({}) => {
const ModelManager: React.FC<Props> = ({}) => {
const defaultTabKey = 'overview';
const params: any = useParams();
const domainId = params.domainId;
const modelId = params.modelId;
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const dimensionModel = useModel('SemanticModel.dimensionData');
const metricModel = useModel('SemanticModel.metricData');
const databaseModel = useModel('SemanticModel.databaseData');
const { selectDomainId, domainList, setSelectDomain, setDomainList } = domainModel;
const {
selectModelId,
modelList,
MrefreshModelList,
setSelectModel,
setModelTableHistoryParams,
} = modelModel;
const { selectDomainId } = domainModel;
const { selectModelId, modelList } = modelModel;
const { MrefreshDimensionList } = dimensionModel;
const { MrefreshMetricList } = metricModel;
const { MrefreshDatabaseList } = databaseModel;
const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? defaultTabKey : '';
const [activeKey, setActiveKey] = useState<string>(menuKey);
@@ -35,7 +26,7 @@ const OverviewContainer: React.FC<Props> = ({}) => {
};
useEffect(() => {
if (!selectModelId) {
if (!selectModelId || `${selectModelId}` === `${modelId}`) {
return;
}
initModelConfig();
@@ -44,22 +35,13 @@ const OverviewContainer: React.FC<Props> = ({}) => {
}, [selectModelId]);
const pushUrlMenu = (domainId: number, modelId: number, menuKey: string) => {
history.push(`/model/manager/${domainId}/${modelId}/${menuKey}`);
};
const cleanModelInfo = (domainId) => {
setActiveKey(defaultTabKey);
pushUrlMenu(domainId, 0, defaultTabKey);
setSelectModel(undefined);
history.push(`/model/domain/manager/${domainId}/${modelId}/${menuKey}`);
};
return (
<ModelManagerTab
activeKey={activeKey}
modelList={modelList}
onBackDomainBtnClick={() => {
cleanModelInfo(selectDomainId);
}}
onMenuChange={(menuKey) => {
setActiveKey(menuKey);
pushUrlMenu(selectDomainId, selectModelId, menuKey);
@@ -68,4 +50,4 @@ const OverviewContainer: React.FC<Props> = ({}) => {
);
};
export default OverviewContainer;
export default ModelManager;

128
webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx Normal file
View File

@@ -0,0 +1,128 @@
import React, { useEffect, useState } from 'react';
import { history, useParams, useModel, Outlet } from '@umijs/max';
import DomainListTree from './components/DomainList';
import styles from './components/style.less';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { ISemantic } from './data';
type Props = {};
const OverviewContainer: React.FC<Props> = ({}) => {
const defaultTabKey = 'overview';
const params: any = useParams();
const domainId = params.domainId;
const modelId = params.modelId;
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const databaseModel = useModel('SemanticModel.databaseData');
const { setSelectDomain, setDomainList, selectDomainId } = domainModel;
const { setSelectModel, setModelTableHistoryParams, MrefreshModelList } = modelModel;
const { MrefreshDatabaseList } = databaseModel;
const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? defaultTabKey : '';
const [collapsedState, setCollapsedState] = useState(true);
useEffect(() => {
if (!selectDomainId || `${domainId}` === `${selectDomainId}`) {
return;
}
pushUrlMenu(selectDomainId, menuKey);
}, [selectDomainId]);
// const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
// const targetNode = domainList.filter((item: any) => {
// return `${item.id}` === domainId;
// })[0];
// if (!targetNode) {
// const firstRootNode = domainList.filter((item: any) => {
// return item.parentId === 0;
// })[0];
// if (firstRootNode) {
// const { id } = firstRootNode;
// setSelectDomain(firstRootNode);
// pushUrlMenu(id, menuKey);
// }
// } else {
// setSelectDomain(targetNode);
// }
// };
// const initProjectTree = async () => {
// const { code, data, msg } = await getDomainList();
// if (code === 200) {
// initSelectedDomain(data);
// setDomainList(data);
// } else {
// message.error(msg);
// }
// };
// useEffect(() => {
// initProjectTree();
// MrefreshDatabaseList();
// return () => {
// setSelectDomain(undefined);
// };
// }, []);
const pushUrlMenu = (domainId: number, menuKey: string) => {
history.push(`/model/domain/${domainId}/${menuKey}`);
};
const cleanModelInfo = (domainId) => {
pushUrlMenu(domainId, defaultTabKey);
setSelectModel(undefined);
};
const handleCollapsedBtn = () => {
setCollapsedState(!collapsedState);
};
useEffect(() => {
if (!selectDomainId) {
return;
}
queryModelList();
}, [selectDomainId]);
const queryModelList = async () => {
await MrefreshModelList(selectDomainId);
};
return (
<div className={styles.projectBody}>
<div className={styles.projectManger}>
<div className={`${styles.sider} ${!collapsedState ? styles.siderCollapsed : ''}`}>
<div className={styles.treeContainer}>
<DomainListTree
onTreeSelected={(domainData: ISemantic.IDomainItem) => {
const { id } = domainData;
cleanModelInfo(id);
setSelectDomain(domainData);
setModelTableHistoryParams({
[id]: {},
});
}}
// onTreeDataUpdate={() => {
// // initProjectTree();
// }}
/>
</div>
<div
className={styles.siderCollapsedButton}
onClick={() => {
handleCollapsedBtn();
}}
>
{collapsedState ? <LeftOutlined /> : <RightOutlined />}
</div>
</div>
<div className={styles.content}>
<Outlet />
</div>
</div>
</div>
);
};
export default OverviewContainer;

215
webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer1.tsx
View File

@@ -1,215 +0,0 @@
import { message } from 'antd';
import React, { useEffect, useState } from 'react';
import { history, useParams, useModel } from '@umijs/max';
import DomainListTree from './components/DomainList';
import styles from './components/style.less';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { ISemantic } from './data';
import { getDomainList, getDataSetList } from './service';
import DomainManagerTab from './components/DomainManagerTab';
import { isArrayOfValues } from '@/utils/utils';
import OverviewContainerRight from './components/OverviewContainerRight';
type Props = {
mode: 'domain';
};
const OverviewContainer: React.FC<Props> = ({ mode = 'domain' }) => {
const defaultTabKey = 'overview';
const params: any = useParams();
const domainId = params.domainId;
const modelId = params.modelId;
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const dimensionModel = useModel('SemanticModel.dimensionData');
const metricModel = useModel('SemanticModel.metricData');
const databaseModel = useModel('SemanticModel.databaseData');
const { selectDomainId, domainList, setSelectDomain, setDomainList } = domainModel;
const {
selectModelId,
modelList,
MrefreshModelList,
setSelectModel,
setModelTableHistoryParams,
} = modelModel;
const { MrefreshDimensionList } = dimensionModel;
const { MrefreshMetricList } = metricModel;
const { MrefreshDatabaseList } = databaseModel;
const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? defaultTabKey : '';
const [isModel, setIsModel] = useState<boolean>(false);
const [collapsedState, setCollapsedState] = useState(true);
const [activeKey, setActiveKey] = useState<string>(menuKey);
const [dataSetList, setDataSetList] = useState<ISemantic.IDatasetItem[]>([]);
const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
const targetNode = domainList.filter((item: any) => {
return `${item.id}` === domainId;
})[0];
if (!targetNode) {
const firstRootNode = domainList.filter((item: any) => {
return item.parentId === 0;
})[0];
if (firstRootNode) {
const { id } = firstRootNode;
setSelectDomain(firstRootNode);
setActiveKey(menuKey);
pushUrlMenu(id, 0, menuKey);
}
} else {
setSelectDomain(targetNode);
}
};
const initProjectTree = async () => {
const { code, data, msg } = await getDomainList();
if (code === 200) {
initSelectedDomain(data);
setDomainList(data);
} else {
message.error(msg);
}
};
useEffect(() => {
initProjectTree();
MrefreshDatabaseList();
return () => {
setSelectDomain(undefined);
setSelectModel(undefined);
};
}, []);
useEffect(() => {
if (!selectDomainId) {
return;
}
queryModelList();
queryDataSetList();
}, [selectDomainId]);
const queryDataSetList = async () => {
const { code, data, msg } = await getDataSetList(selectDomainId);
if (code === 200) {
setDataSetList(data);
if (!isArrayOfValues(data)) {
setActiveKey(defaultTabKey);
}
} else {
message.error(msg);
}
};
const queryModelList = async () => {
await MrefreshModelList(selectDomainId);
};
useEffect(() => {
if (!selectDomainId) {
return;
}
setIsModel(false);
}, [domainList, selectDomainId]);
const initModelConfig = () => {
setIsModel(true);
const currentMenuKey = menuKey === defaultTabKey ? '' : menuKey;
pushUrlMenu(selectDomainId, selectModelId, currentMenuKey);
setActiveKey(currentMenuKey);
};
useEffect(() => {
if (!selectModelId) {
return;
}
initModelConfig();
MrefreshDimensionList({ modelId: selectModelId });
MrefreshMetricList({ modelId: selectModelId });
}, [selectModelId]);
const pushUrlMenu = (domainId: number, modelId: number, menuKey: string) => {
history.push(`/model/${domainId}/${modelId || 0}/${menuKey}`);
};
const handleModelChange = (model?: ISemantic.IModelItem) => {
if (!model) {
return;
}
if (`${model.id}` === `${selectModelId}`) {
initModelConfig();
}
setSelectModel(model);
};
const cleanModelInfo = (domainId) => {
setIsModel(false);
setActiveKey(defaultTabKey);
pushUrlMenu(domainId, 0, defaultTabKey);
setSelectModel(undefined);
};
const handleCollapsedBtn = () => {
setCollapsedState(!collapsedState);
};
return (
<div className={styles.projectBody}>
<div className={styles.projectManger}>
<div className={`${styles.sider} ${!collapsedState ? styles.siderCollapsed : ''}`}>
<div className={styles.treeContainer}>
<DomainListTree
createDomainBtnVisible={mode === 'domain' ? true : false}
onTreeSelected={(domainData: ISemantic.IDomainItem) => {
const { id } = domainData;
cleanModelInfo(id);
setSelectDomain(domainData);
setModelTableHistoryParams({
[id]: {},
});
}}
onTreeDataUpdate={() => {
initProjectTree();
}}
/>
</div>
<div
className={styles.siderCollapsedButton}
onClick={() => {
handleCollapsedBtn();
}}
>
{collapsedState ? <LeftOutlined /> : <RightOutlined />}
</div>
</div>
<div className={styles.content}>
{selectDomainId ? (
<>
<OverviewContainerRight />
<DomainManagerTab
isModel={isModel}
activeKey={activeKey}
modelList={modelList}
dataSetList={dataSetList}
handleModelChange={(model) => {
handleModelChange(model);
MrefreshModelList(selectDomainId);
}}
onBackDomainBtnClick={() => {
cleanModelInfo(selectDomainId);
}}
onMenuChange={(menuKey) => {
setActiveKey(menuKey);
pushUrlMenu(selectDomainId, selectModelId, menuKey);
}}
/>
</>
) : (
<h2 className={styles.mainTip}>请选择项目</h2>
)}
</div>
</div>
</div>
);
};
export default OverviewContainer;

62
webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainerRight.tsx
View File

@@ -1,62 +0,0 @@
import { Outlet } from '@umijs/max';
import { Tabs, Breadcrumb, Space, Radio } from 'antd';
import React, { useRef, useEffect, useState } from 'react';
import { history, useModel } from '@umijs/max';
import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
import styles from './components/style.less';
const OverviewContainerRight: React.FC = () => {
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const { selectDomainId, selectDomainName, selectDomain: domainData } = domainModel;
const { selectModelId, selectModelName, setSelectModel } = modelModel;
return (
<>
<Breadcrumb
className={styles.breadcrumb}
separator=""
items={[
{
title: (
<Space
onClick={() => {
// onBackDomainBtnClick?.();
setSelectModel(undefined);
history.push(`/model/${selectDomainId}/overview`);
}}
style={
selectModelName ? { cursor: 'pointer' } : { color: '#296df3', fontWeight: 'bold' }
}
>
<HomeOutlined />
<span>{selectDomainName}</span>
</Space>
),
},
{
type: 'separator',
separator: selectModelName ? '/' : '',
},
{
title: selectModelName ? (
<Space
onClick={() => {
history.push(`/model/manager/${selectDomainId}/${selectModelId}/`);
}}
style={{ color: '#296df3' }}
>
<FundViewOutlined style={{ position: 'relative', top: '2px' }} />
<span>{selectModelName}</span>
</Space>
) : undefined,
},
]}
/>
<Outlet />
</>
);
};
export default OverviewContainerRight;

78
webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx Normal file
View File

@@ -0,0 +1,78 @@
import { Outlet } from '@umijs/max';
import { Tabs, Breadcrumb, Space, Radio } from 'antd';
import React, { useRef, useEffect, useState } from 'react';
import { history, useModel } from '@umijs/max';
import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
import styles from './components/style.less';
const PageBreadcrumb: React.FC = () => {
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const metricModel = useModel('SemanticModel.metricData');
const { selectDomainId, selectDomainName, selectDomain: domainData } = domainModel;
const { selectModelId, selectModelName, setSelectModel } = modelModel;
const { selectMetric, setSelectMetric } = metricModel;
const items = [
{
title: (
<Space
onClick={() => {
setSelectModel(undefined);
history.push(`/model/domain/${selectDomainId}/overview`);
}}
>
<HomeOutlined />
<span>{selectDomainName}</span>
</Space>
),
},
];
if (selectModelName) {
items.push(
{
type: 'separator',
separator: '/',
},
{
title: (
<Space
onClick={() => {
setSelectMetric(undefined);
history.push(`/model/domain/manager/${selectDomainId}/${selectModelId}/`);
}}
>
<FundViewOutlined style={{ position: 'relative', top: '2px' }} />
<span>{selectModelName}</span>
</Space>
),
},
);
}
if (selectMetric?.name) {
items.push(
{
type: 'separator',
separator: '/',
},
{
title: selectMetric?.name ? (
<Space>
<FundViewOutlined style={{ position: 'relative', top: '2px' }} />
<span>{selectMetric.name}</span>
</Space>
) : undefined,
},
);
}
return (
<>
<Breadcrumb className={styles.breadcrumb} separator="" items={items} />
</>
);
};
export default PageBreadcrumb;

7
webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx
View File

@@ -45,11 +45,10 @@ const DataSetTable: React.FC<Props> = ({ disabledEdit = false }) => {
const [viewList, setViewList] = useState<ISemantic.IDatasetItem[]>();
// useEffect(() => {
// setViewList(dataSetList);
// }, [dataSetList]);
useEffect(() => {
if (!selectDomainId) {
return;
}
queryDataSetList();
queryDomainAllModel();
}, [selectDomainId]);

14
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
View File

@@ -3,7 +3,7 @@ import { ProTable } from '@ant-design/pro-components';
import { message, Button, Space, Popconfirm, Input, Select, Tag } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import { StatusEnum, SemanticNodeType } from '../enum';
import { useModel } from '@umijs/max';
import { useModel, history } from '@umijs/max';
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
import {
queryMetric,
@@ -32,7 +32,7 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
const metricModel = useModel('SemanticModel.metricData');
const { selectDomainId } = domainModel;
const { selectModelId: modelId } = modelModel;
const { MrefreshMetricList } = metricModel;
const { MrefreshMetricList, selectMetric, setSelectMetric } = metricModel;
const [batchSensitiveLevelOpenState, setBatchSensitiveLevelOpenState] = useState<boolean>(false);
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
@@ -144,7 +144,10 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
const columnsConfig = ColumnsConfig({
indicatorInfo: {
url: '/model/metric/edit/',
url: '/model/metric/:domainId/:modelId/:indicatorId',
onNameClick: (record: ISemantic.IMetricItem) => {
setSelectMetric(record);
},
},
});
@@ -240,8 +243,9 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
type="link"
key="metricEditBtn"
onClick={() => {
setMetricItem(record);
setCreateModalVisible(true);
history.push(`/model/metric/${record.domainId}/${record.modelId}/${record.id}`);
// setMetricItem(record);
// setCreateModalVisible(true);
}}
>
编辑

111
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx
View File

@@ -1,14 +1,11 @@
import { DownOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { Input, message, Tree, Popconfirm, Tooltip, Row, Col, Button, Menu } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { Input, message, Popconfirm, Tooltip, Row, Col, Button, Menu } from 'antd';
import type { DataNode } from 'antd/lib/tree';
import { useEffect, useState } from 'react';
import type { FC, Key } from 'react';
import type { FC } from 'react';
import { useModel } from '@umijs/max';
import { createDomain, updateDomain, deleteDomain } from '../service';
import { treeParentKeyLists } from '../utils';
import DomainInfoForm from './DomainInfoForm';
import { constructorClassTreeFromList, addPathInTreeData } from '../utils';
import { AppstoreOutlined } from '@ant-design/icons';
import styles from './style.less';
import { ISemantic } from '../data';
@@ -42,20 +39,15 @@ const DomainListTree: FC<DomainListProps> = ({
onTreeSelected,
onTreeDataUpdate,
}) => {
const [projectTree, setProjectTree] = useState<DataNode[]>([]);
const [projectInfoModalVisible, setProjectInfoModalVisible] = useState<boolean>(false);
const [domainInfoParams, setDomainInfoParams] = useState<any>({});
const [filterValue, setFliterValue] = useState<string>('');
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
const [classList, setClassList] = useState<ISemantic.IDomainItem[]>([]);
const domainModel = useModel('SemanticModel.domainData');
const { selectDomainId, domainList } = domainModel;
useEffect(() => {
const treeData = addPathInTreeData(constructorClassTreeFromList(domainList));
setProjectTree(treeData);
setClassList(domainList);
setExpandedKeys(treeParentKeyLists(treeData));
}, [domainList]);
const onSearch = (value: any) => {
@@ -67,7 +59,7 @@ const DomainListTree: FC<DomainListProps> = ({
return;
}
const targetNodeData = classList.filter((item: any) => {
return item.id === selectedKeys;
return `${item.id}` === `${selectedKeys}`;
})[0];
onTreeSelected?.(targetNodeData);
};
@@ -84,20 +76,6 @@ const DomainListTree: FC<DomainListProps> = ({
}
};
// const createDefaultModelSet = async (domainId: number) => {
// const { code, msg } = await createDomain({
// modelType: 'add',
// type: 'normal',
// parentId: domainId,
// name: '默认模型集',
// bizName: `defaultModelSet_${(Math.random() * 1000000).toFixed(0)}`,
// isUnique: 1,
// });
// if (code !== 200) {
// message.error(msg);
// }
// };
const domainSubmit = async (values: any) => {
if (values.modelType === 'add') {
const { code, data } = await createDomain(values);
@@ -126,21 +104,19 @@ const DomainListTree: FC<DomainListProps> = ({
const { id, name, path, hasEditPermission, parentId, hasModel } = node as any;
const type = parentId === 0 ? 'top' : 'normal';
return (
<div className={styles.projectItem}>
<span
className={styles.projectItemTitle}
onClick={() => {
handleSelect(id);
}}
>
{name}
</span>
<div
className={styles.projectItem}
// onClick={() => {
// handleSelect(id);
// }}
>
<span className={styles.projectItemTitle}>{name}</span>
{createDomainBtnVisible && hasEditPermission && (
<span className={`${styles.operation} ${styles.rowHover} `}>
{Array.isArray(path) && path.length < 2 && !hasModel && (
<PlusOutlined
className={styles.icon}
onClick={() => {
onClick={(e) => {
setDomainInfoParams({
modelType: 'add',
type: 'normal',
@@ -148,19 +124,21 @@ const DomainListTree: FC<DomainListProps> = ({
parentName: name,
});
setProjectInfoModalVisible(true);
e.stopPropagation();
}}
/>
)}
<EditOutlined
className={styles.icon}
onClick={() => {
onClick={(e) => {
setDomainInfoParams({
modelType: 'edit',
type,
...node,
});
setProjectInfoModalVisible(true);
e.stopPropagation();
}}
/>
<Popconfirm
@@ -172,7 +150,12 @@ const DomainListTree: FC<DomainListProps> = ({
okText="是"
cancelText="否"
>
<DeleteOutlined className={styles.icon} />
<DeleteOutlined
className={styles.icon}
onClick={(e) => {
e.stopPropagation();
}}
/>
</Popconfirm>
</span>
)}
@@ -180,14 +163,14 @@ const DomainListTree: FC<DomainListProps> = ({
);
};
const projectRenderTree = filterValue ? projectTreeFlat(projectTree, filterValue) : projectTree;
const handleExpand = (_expandedKeys: Key[]) => {
setExpandedKeys(_expandedKeys as string[]);
};
const items = domainList
.filter((domain) => domain.parentId === 0)
.filter((domain) => {
if (filterValue) {
return domain.parentId === 0 && domain.name.includes(filterValue);
} else {
return domain.parentId === 0;
}
})
.map((domain: ISemantic.IDomainItem) => {
return {
key: domain.id,
@@ -245,6 +228,12 @@ const DomainListTree: FC<DomainListProps> = ({
className={styles.search}
placeholder="请输入名称搜索"
onSearch={onSearch}
onChange={(e) => {
const value = e.target.value;
if (!value) {
setFliterValue(value);
}
}}
/>
</Col>
{createDomainBtnVisible && (
@@ -265,25 +254,19 @@ const DomainListTree: FC<DomainListProps> = ({
)}
</Row>
</div>
<Menu
mode="inline"
defaultSelectedKeys={['231']}
openKeys={stateOpenKeys}
onOpenChange={onOpenChange}
style={{ width: 256 }}
items={items}
/>
{/* <Tree
expandedKeys={expandedKeys}
onExpand={handleExpand}
className={styles.tree}
selectedKeys={[selectDomainId]}
blockNode={true}
switcherIcon={<DownOutlined />}
defaultExpandAll={true}
treeData={projectRenderTree}
titleRender={titleRender}
/> */}
{selectDomainId && (
<Menu
mode="inline"
defaultSelectedKeys={[`${selectDomainId}`]}
openKeys={stateOpenKeys}
onOpenChange={onOpenChange}
style={{ width: 256 }}
items={items}
onClick={(info) => {
handleSelect(info.key);
}}
/>
)}
{projectInfoModalVisible && (
<DomainInfoForm
basicInfo={domainInfoParams}

28
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
View File

@@ -1,45 +1,27 @@
import { Tabs, Breadcrumb, Space, Radio } from 'antd';
import { Tabs, Radio } from 'antd';
import React, { useRef, useEffect, useState } from 'react';
import { history, useModel } from '@umijs/max';
import ClassDimensionTable from './ClassDimensionTable';
import ClassMetricTable from './ClassMetricTable';
import { useModel } from '@umijs/max';
import PermissionSection from './Permission/PermissionSection';
import TagObjectTable from '../Insights/components/TagObjectTable';
import TermTable from '../components/Term/TermTable';
import OverView from './OverView';
import styles from './style.less';
import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
import { ISemantic } from '../data';
import SemanticGraphCanvas from '../SemanticGraphCanvas';
import Dimension from '../Dimension';
import ModelMetric from '../components/ModelMetric';
import View from '../View';
type Props = {
// isModel: boolean;
activeKey: string;
// modelList: ISemantic.IModelItem[];
dataSetList: ISemantic.IDatasetItem[];
// handleModelChange: (model?: ISemantic.IModelItem) => void;
onBackDomainBtnClick?: () => void;
onMenuChange?: (menuKey: string) => void;
};
const DomainManagerTab: React.FC<Props> = ({
activeKey,
// modelList,
dataSetList,
// handleModelChange,
onBackDomainBtnClick,
onMenuChange,
}) => {
const DomainManagerTab: React.FC<Props> = ({ activeKey, onMenuChange }) => {
const initState = useRef<boolean>(false);
const defaultTabKey = 'metric';
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const { selectDomainId, selectDomainName, selectDomain: domainData } = domainModel;
const { selectModelId, modelList, selectModelName } = modelModel;
const { selectDomainId, selectDomain: domainData } = domainModel;
const { selectModelId, modelList } = modelModel;
useEffect(() => {
initState.current = false;

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
View File

@@ -901,7 +901,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
key="console"
onClick={() => {
history.replace(
`/model/manager/${domainId}/${modelId || metricItem?.modelId}/dataSource`,
`/model/domain/manager/${domainId}/${modelId || metricItem?.modelId}/dataSource`,
);
onCancel?.();
}}

18
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelManagerTab.tsx
View File

@@ -18,28 +18,14 @@ import View from '../View';
type Props = {
activeKey: string;
modelList: ISemantic.IModelItem[];
handleModelChange: (model?: ISemantic.IModelItem) => void;
onBackDomainBtnClick?: () => void;
onMenuChange?: (menuKey: string) => void;
};
const ModelManagerTab: React.FC<Props> = ({
activeKey,
modelList,
handleModelChange,
onBackDomainBtnClick,
onMenuChange,
}) => {
const ModelManagerTab: React.FC<Props> = ({ activeKey, onMenuChange }) => {
const initState = useRef<boolean>(false);
const defaultTabKey = 'metric';
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const { selectDomainId, selectDomainName, selectDomain: domainData } = domainModel;
const { selectModelId, selectModelName } = modelModel;
useEffect(() => {
console.log(modelList, 'modelList');
}, [modelList]);
const { selectModelId } = modelModel;
useEffect(() => {
initState.current = false;

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
View File

@@ -106,7 +106,7 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
onClick={() => {
setSelectModel(record);
history.push(`/model/manager/${domainId}/${id}`);
history.push(`/model/domain/manager/${domainId}/${id}`);
// onModelChange?.(record);
}}
>

393
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/TableColumnRender.tsx
View File

@@ -6,32 +6,113 @@ import { history } from '@umijs/max';
import { ISemantic } from '../data';
import { isString } from 'lodash';
import dayjs from 'dayjs';
import { isArrayOfValues } from '@/utils/utils';
import { isArrayOfValues, replaceRouteParams } from '@/utils/utils';
import styles from './style.less';
import IndicatorStar, { StarType } from '../components/IndicatorStar';
interface IndicatorInfo {
url?: string;
starType?: StarType;
onNameClick?: (record: ISemantic.IMetricItem) => void | boolean;
}
interface ColumnsConfigParams {
indicatorInfo?: IndicatorInfo;
}
const { Text, Paragraph } = Typography;
export const ColumnsConfig: any = (params?: {
indicatorInfo?: {
url?: string;
starType?: StarType;
onNameClick?: (record: ISemantic.IMetricItem) => void;
};
}) => {
export const ColumnsConfig = (params?: ColumnsConfigParams) => {
const renderAliasAndClassifications = (
alias: string | undefined,
classifications: string[] | undefined,
) => (
<div style={{ marginTop: 8 }}>
<Space direction="vertical" size={4}>
{alias && (
<Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
<ReadOutlined />
<div style={{ width: 'max-content' }}>别名:</div>
<span style={{ marginLeft: 2 }}>
<Space size={[0, 8]} wrap>
{isString(alias) &&
alias.split(',').map((aliasName: string) => (
<Tag
color="#eee"
key={aliasName}
style={{
borderRadius: 44,
maxWidth: 90,
minWidth: 40,
backgroundColor: 'rgba(18, 31, 67, 0.04)',
}}
>
<Text
style={{
maxWidth: 80,
color: 'rgb(95, 116, 141)',
textAlign: 'center',
fontSize: 12,
}}
ellipsis={{ tooltip: aliasName }}
>
{aliasName}
</Text>
</Tag>
))}
</Space>
</span>
</Space>
)}
{isArrayOfValues(classifications) && (
<Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
<TagsOutlined />
<div style={{ width: 'max-content' }}>分类:</div>
<span style={{ marginLeft: 2 }}>
<Space size={[0, 8]} wrap>
{classifications.map((tag: string) => (
<Tag
color="#eee"
key={tag}
style={{
borderRadius: 44,
maxWidth: 90,
minWidth: 40,
backgroundColor: 'rgba(18, 31, 67, 0.04)',
}}
>
<Text
style={{
maxWidth: 80,
color: 'rgb(95, 116, 141)',
textAlign: 'center',
fontSize: 12,
}}
ellipsis={{ tooltip: tag }}
>
{tag}
</Text>
</Tag>
))}
</Space>
</span>
</Space>
)}
</Space>
</div>
);
return {
description: {
render: (_, record: ISemantic.IMetricItem) => {
const { description } = record;
return (
<Paragraph
ellipsis={{ tooltip: description, rows: 3 }}
style={{ width: 250, marginBottom: 0 }}
>
{description}
</Paragraph>
);
},
render: (_, record: ISemantic.IMetricItem) => (
<Paragraph
ellipsis={{ tooltip: record.description, rows: 3 }}
style={{ width: 250, marginBottom: 0 }}
>
{record.description}
</Paragraph>
),
},
dimensionInfo: {
render: (_, record: ISemantic.IDimensionItem) => {
@@ -46,70 +127,26 @@ export const ColumnsConfig: any = (params?: {
<div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
{bizName}
</div>
{alias && (
<div style={{ marginTop: 8 }}>
<Space direction="vertical" size={4}>
{alias && (
<Space
size={4}
style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
>
<ReadOutlined />
<div style={{ width: 'max-content' }}>别名:</div>
<span style={{ marginLeft: 2 }}>
<Space size={[0, 8]} wrap>
{isString(alias) &&
alias.split(',').map((aliasName: string) => {
return (
<Tag
color="#eee"
key={aliasName}
style={{
borderRadius: 44,
maxWidth: 90,
minWidth: 40,
backgroundColor: 'rgba(18, 31, 67, 0.04)',
}}
>
<Text
style={{
maxWidth: 80,
color: 'rgb(95, 116, 141)',
textAlign: 'center',
fontSize: 12,
}}
ellipsis={{ tooltip: aliasName }}
>
{aliasName}
</Text>
</Tag>
);
})}
</Space>
</span>
</Space>
)}
</Space>
</div>
)}
{renderAliasAndClassifications(alias, undefined)}
</>
);
},
},
indicatorInfo: {
render: (_, record: ISemantic.IMetricItem) => {
const { name, alias, bizName, classifications, id, isCollect } = record;
const { name, alias, bizName, classifications, id, isCollect, domainId, modelId } = record;
let url = `/metric/detail/`;
let starType: StarType = 'metric';
if (params) {
if (params?.indicatorInfo?.url) {
url = params.indicatorInfo.url;
}
if (params?.indicatorInfo?.starType) {
starType = params.indicatorInfo.starType;
}
if (params?.indicatorInfo) {
url = replaceRouteParams(params.indicatorInfo.url || '', {
domainId: `${domainId}`,
modelId: `${modelId}`,
indicatorId: `${id}`,
});
starType = params.indicatorInfo.starType || 'metric';
}
return (
<>
<div>
@@ -119,205 +156,71 @@ export const ColumnsConfig: any = (params?: {
style={{ fontWeight: 500 }}
onClick={(event: any) => {
if (params?.indicatorInfo?.onNameClick) {
params?.indicatorInfo?.onNameClick(record);
} else {
history.push(`${url}${id}`);
const state = params.indicatorInfo.onNameClick(record);
if (state === false) {
return;
}
}
history.push(url);
event.preventDefault();
event.stopPropagation();
}}
// href={`/webapp${url}${id}`}
>
{name}
</a>
<IndicatorStar indicatorId={id} type={starType} initState={isCollect} />
{/* <Tag
color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
style={{ lineHeight: '16px', position: 'relative', top: '-1px' }}
>
{SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
</Tag> */}
</Space>
</div>
<div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
{bizName}
</div>
{(alias || isArrayOfValues(classifications)) && (
<div style={{ marginTop: 8 }}>
<Space direction="vertical" size={4}>
{alias && (
<Space
size={4}
style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
>
<ReadOutlined />
<div style={{ width: 'max-content' }}>别名:</div>
<span style={{ marginLeft: 2 }}>
<Space size={[0, 8]} wrap>
{isString(alias) &&
alias.split(',').map((aliasName: string) => {
return (
<Tag
color="#eee"
key={aliasName}
style={{
borderRadius: 44,
maxWidth: 90,
minWidth: 40,
backgroundColor: 'rgba(18, 31, 67, 0.04)',
}}
>
<Text
style={{
maxWidth: 80,
color: 'rgb(95, 116, 141)',
textAlign: 'center',
fontSize: 12,
}}
ellipsis={{ tooltip: aliasName }}
>
{aliasName}
</Text>
</Tag>
);
})}
</Space>
</span>
</Space>
)}
{isArrayOfValues(classifications) && (
<Space
size={4}
style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
>
<TagsOutlined />
<div style={{ width: 'max-content' }}>分类:</div>
<span style={{ marginLeft: 2 }}>
<Space size={[0, 8]} wrap>
{classifications.map((tag: string) => {
return (
<Tag
color="#eee"
key={tag}
style={{
borderRadius: 44,
maxWidth: 90,
minWidth: 40,
backgroundColor: 'rgba(18, 31, 67, 0.04)',
}}
>
<Text
style={{
maxWidth: 80,
color: 'rgb(95, 116, 141)',
textAlign: 'center',
fontSize: 12,
}}
ellipsis={{ tooltip: tag }}
>
{tag}
</Text>
</Tag>
);
})}
</Space>
</span>
</Space>
)}
{/* <Space size={10}>
<Space
size={2}
style={{ color: '#5f748d', fontSize: 12, position: 'relative', top: '1px' }}
>
<FieldNumberOutlined style={{ fontSize: 16, position: 'relative', top: '1px' }} />
<span>:</span>
<span style={{ marginLeft: 0 }}>{id}</span>
</Space>
<Space size={2} style={{ color: '#5f748d', fontSize: 12 }}>
<UserOutlined />
<span>:</span>
<span style={{ marginLeft: 0 }}>{createdBy}</span>
</Space>
</Space> */}
</Space>
</div>
)}
{renderAliasAndClassifications(alias, classifications)}
</>
);
},
},
sensitiveLevel: {
render: (_, record: ISemantic.IMetricItem) => {
const { sensitiveLevel } = record;
return SENSITIVE_LEVEL_COLOR[sensitiveLevel] ? (
<Tag
color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
style={{
borderRadius: '40px',
padding: '2px 16px',
fontSize: '13px',
// color: '#8ca3ba',
}}
>
{SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
</Tag>
) : (
<Tag
style={{
borderRadius: '40px',
padding: '2px 16px',
fontSize: '13px',
}}
>
未知
</Tag>
);
},
render: (_, record: ISemantic.IMetricItem) => (
<Tag
color={SENSITIVE_LEVEL_COLOR[record.sensitiveLevel] || 'default'}
style={{
borderRadius: '40px',
padding: '2px 16px',
fontSize: '13px',
}}
>
{SENSITIVE_LEVEL_ENUM[record.sensitiveLevel] || '未知'}
</Tag>
),
},
state: {
render: (status) => {
let tagProps: { color: string; label: string; style?: any } = {
const tagProps = {
color: 'default',
label: '未知',
style: {},
};
switch (status) {
case StatusEnum.ONLINE:
tagProps = {
// color: 'processing',
color: 'geekblue',
label: '已启用',
};
tagProps.color = 'geekblue';
tagProps.label = '已启用';
break;
case StatusEnum.OFFLINE:
tagProps = {
color: 'default',
label: '未启用',
style: {
color: 'rgb(95, 116, 141)',
fontWeight: 400,
},
};
tagProps.color = 'default';
tagProps.label = '未启用';
tagProps.style = { color: 'rgb(95, 116, 141)', fontWeight: 400 };
break;
case StatusEnum.INITIALIZED:
tagProps = {
color: 'processing',
label: '初始化',
};
tagProps.color = 'processing';
tagProps.label = '初始化';
break;
case StatusEnum.DELETED:
tagProps = {
color: 'default',
label: '已删除',
};
tagProps.color = 'default';
tagProps.label = '已删除';
break;
case StatusEnum.UNAVAILABLE:
tagProps = {
color: 'default',
label: '不可用',
};
tagProps.color = 'default';
tagProps.label = '不可用';
break;
default:
break;
@@ -344,14 +247,12 @@ export const ColumnsConfig: any = (params?: {
tooltip: '创建人/更新时间',
width: 180,
search: false,
render: (value: any, record: ISemantic.IMetricItem) => {
return (
<Space direction="vertical">
<span> {record.createdBy}</span>
<span>{value && value !== '-' ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '-'}</span>
</Space>
);
},
render: (value: any, record: ISemantic.IMetricItem) => (
<Space direction="vertical">
<span> {record.createdBy}</span>
<span>{value && value !== '-' ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '-'}</span>
</Space>
),
},
};
};

19
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
View File

@@ -6,6 +6,7 @@
.projectManger {
border-top: 1px solid #eee;
width: 100%;
min-height: calc(100vh - 56px);
background-color: #fff;
@@ -163,8 +164,8 @@
// }
// }
.tab {
border-top: 1px solid #eee;
margin-top: 10px;
// margin-top: 10px;
:global {
.ant-tabs-tab-btn {
font-size: 16px;
@@ -338,12 +339,14 @@
.breadcrumb{
font-size: 18px;
margin: 17px 0 0 20px;
padding-bottom: 3px;
height: 48px;
line-height: 48px;
padding: 0 20px;
:global {
.ant-breadcrumb-link {
height: 28px;
color: #709bf1;
cursor: pointer;
&:hover{
color: #296df3;
}
@@ -351,6 +354,14 @@
.anticon {
font-size: 18px;
}
li {
&:last-child {
.ant-breadcrumb-link {
color: #296df3;
}
}
}
}
}

162
webapp/packages/supersonic-fe/src/pages/SemanticModel/index.tsx
View File

@@ -1,44 +1,28 @@
import { message } from 'antd';
import React, { useEffect, useState } from 'react';
import { history, useParams, useModel } from '@umijs/max';
import { history, useParams, useModel, Outlet } from '@umijs/max';
import DomainListTree from './components/DomainList';
import styles from './components/style.less';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { ISemantic } from './data';
import { getDomainList, getDataSetList } from './service';
import { isArrayOfValues } from '@/utils/utils';
import OverviewContainerRight from './OverviewContainerRight';
import { getDomainList, getDataSetList, getModelDetail } from './service';
import PageBreadcrumb from './PageBreadcrumb';
type Props = {
mode: 'domain';
};
type Props = {};
const OverviewContainer: React.FC<Props> = ({ mode = 'domain' }) => {
const defaultTabKey = 'overview';
const SemanticModel: React.FC<Props> = ({}) => {
const params: any = useParams();
const domainId = params.domainId;
const modelId = params.modelId;
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const dimensionModel = useModel('SemanticModel.dimensionData');
const metricModel = useModel('SemanticModel.metricData');
const databaseModel = useModel('SemanticModel.databaseData');
const { selectDomainId, domainList, setSelectDomain, setDomainList } = domainModel;
const {
selectModelId,
modelList,
MrefreshModelList,
setSelectModel,
setModelTableHistoryParams,
} = modelModel;
const { MrefreshDimensionList } = dimensionModel;
const { MrefreshMetricList } = metricModel;
const metricModel = useModel('SemanticModel.metricData');
const { setSelectDomain, setDomainList, selectDomainId } = domainModel;
const { selectModel, setSelectModel, setModelTableHistoryParams, MrefreshModelList } = modelModel;
const { MrefreshDatabaseList } = databaseModel;
const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? defaultTabKey : '';
const [collapsedState, setCollapsedState] = useState(true);
const [activeKey, setActiveKey] = useState<string>(menuKey);
// const [dataSetList, setDataSetList] = useState<ISemantic.IDatasetItem[]>([]);
const { selectMetric, setSelectMetric } = metricModel;
const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
const targetNode = domainList.filter((item: any) => {
@@ -51,8 +35,7 @@ const OverviewContainer: React.FC<Props> = ({ mode = 'domain' }) => {
if (firstRootNode) {
const { id } = firstRootNode;
setSelectDomain(firstRootNode);
setActiveKey(menuKey);
pushUrlMenu(id, 0, menuKey);
// pushUrlMenu(id, menuKey);
}
} else {
setSelectDomain(targetNode);
@@ -69,121 +52,38 @@ const OverviewContainer: React.FC<Props> = ({ mode = 'domain' }) => {
}
};
const initModelData = async () => {
const { code, data, msg } = await getModelDetail({ modelId });
if (code === 200) {
setSelectModel(data);
} else {
message.error(msg);
}
};
useEffect(() => {
initProjectTree();
MrefreshDatabaseList();
if (modelId && modelId !== selectModel) {
initModelData();
}
return () => {
setSelectDomain(undefined);
// setSelectModel(undefined);
};
}, []);
useEffect(() => {
if (!selectDomainId) {
return;
}
console.log(selectDomainId, 'selectDomainIdselectDomainId');
queryModelList();
// queryDataSetList();
}, [selectDomainId]);
// const queryDataSetList = async () => {
// const { code, data, msg } = await getDataSetList(selectDomainId);
// if (code === 200) {
// setDataSetList(data);
// if (!isArrayOfValues(data)) {
// setActiveKey(defaultTabKey);
// }
// } else {
// message.error(msg);
// }
// };
const queryModelList = async () => {
await MrefreshModelList(selectDomainId);
};
// const initModelConfig = () => {
// const currentMenuKey = menuKey === defaultTabKey ? '' : menuKey;
// pushUrlMenu(selectDomainId, selectModelId, currentMenuKey);
// setActiveKey(currentMenuKey);
// };
// useEffect(() => {
// if (!selectModelId) {
// return;
// }
// // initModelConfig();
// MrefreshDimensionList({ modelId: selectModelId });
// MrefreshMetricList({ modelId: selectModelId });
// }, [selectModelId]);
const pushUrlMenu = (domainId: number, modelId: number, menuKey: string) => {
history.push(`/model/${domainId}/${menuKey}`);
};
// // const handleModelChange = (model?: ISemantic.IModelItem) => {
// // if (!model) {
// // return;
// // }
// // if (`${model.id}` === `${selectModelId}`) {
// // initModelConfig();
// // }
// // setSelectModel(model);
// // };
const cleanModelInfo = (domainId) => {
setActiveKey(defaultTabKey);
pushUrlMenu(domainId, 0, defaultTabKey);
setSelectModel(undefined);
};
const handleCollapsedBtn = () => {
setCollapsedState(!collapsedState);
};
return (
<div className={styles.projectBody}>
<div className={styles.projectManger}>
<div className={`${styles.sider} ${!collapsedState ? styles.siderCollapsed : ''}`}>
<div className={styles.treeContainer}>
<DomainListTree
createDomainBtnVisible={mode === 'domain' ? true : false}
onTreeSelected={(domainData: ISemantic.IDomainItem) => {
const { id } = domainData;
cleanModelInfo(id);
setSelectDomain(domainData);
setModelTableHistoryParams({
[id]: {},
});
}}
onTreeDataUpdate={() => {
initProjectTree();
}}
/>
</div>
<div
className={styles.siderCollapsedButton}
onClick={() => {
handleCollapsedBtn();
}}
>
{collapsedState ? <LeftOutlined /> : <RightOutlined />}
</div>
</div>
<div className={styles.content}>
{selectDomainId ? (
<>
<OverviewContainerRight />
</>
) : (
<h2 className={styles.mainTip}>请选择项目</h2>
)}
</div>
<div>
<div style={{ background: '#fff' }}>
<PageBreadcrumb />
</div>
<div>
<Outlet />
{/* <OverviewContainer /> */}
</div>
</div>
);
};
export default OverviewContainer;
export default SemanticModel;

3
webapp/packages/supersonic-fe/src/pages/SemanticModel/models/metricData.ts
View File

@@ -5,6 +5,7 @@ import { queryMetric } from '../service';
export default function Metric() {
const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>([]);
const [selectMetric, setSelectMetric] = useState<ISemantic.IMetricItem>();
const queryMetricList = async (params: any) => {
const { code, data, msg } = await queryMetric({
@@ -25,6 +26,8 @@ export default function Metric() {
return {
MmetricList: metricList,
setSelectMetric: setSelectMetric,
selectMetric: selectMetric,
MrefreshMetricList: refreshMetricList,
MqueryMetricList: queryMetricList,
};

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
View File

@@ -453,7 +453,7 @@ export function getUnAvailableItem(data: any): Promise<any> {
export function getModelDetail(data: any): Promise<any> {
if (!data.modelId) {
return;
return {};
}
return request.get(`${process.env.API_BASE_URL}model/getModel/${data.modelId}`);
}

7
webapp/packages/supersonic-fe/src/utils/utils.ts
View File

@@ -502,3 +502,10 @@ export function decryptPassword(encryptPassword: string) {
export function uniqueArray(arr: any[]) {
return Array.from(new Set(arr));
}
// 替换以:开头标记的变量
export const replaceRouteParams = (template: string, values: Record<string, string>): string => {
return template.replace(/:([a-zA-Z0-9_]+)/g, (match, key) => {
return values[key] !== undefined ? values[key] : match;
});
};