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

[improvement][headless-fe] Revamped the interaction for semantic modeling routing and successfully implemented the switching between dimension and dataset management.

Browse Source
This commit is contained in:
tristanliu
2024-11-30 17:55:50 +08:00
parent b4669cf110
commit 66ed711416
24 changed files with 1106 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -95,6 +95,12 @@ const ROUTES = [
path: '/model/dataset/:domainId/:datasetId',
component: './SemanticModel/View/components/Detail',
envEnableList: [ENV_KEY.SEMANTIC],
routes: [
{
path: '/model/dataset/:domainId/:datasetId/:menuKey',
component: './SemanticModel/View/components/Detail',
},
],
},
{
path: '/model/metric/:domainId/:modelId/:metricId',
@@ -107,6 +113,17 @@ const ROUTES = [
// },
// ],
},
{
path: '/model/dimension/:domainId/:modelId/:dimensionId',
component: './SemanticModel/Dimension/Detail',
envEnableList: [ENV_KEY.SEMANTIC],
// routes: [
// {
// path: '/model/manager/:domainId/:modelId/:menuKey',
// component: './SemanticModel/ModelManager',
// },
// ],
},
],
},

101
webapp/packages/supersonic-fe/src/pages/SemanticModel/Dimension/Detail.tsx Normal file
View File

@@ -0,0 +1,101 @@
import { message } from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import { useParams, useModel, Helmet } from '@umijs/max';
import { BASE_TITLE } from '@/common/constants';
import { ISemantic } from '../data';
import { getDimensionList } from '../service';
import DetailContainer from '@/pages/SemanticModel/components/DetailContainer';
import DetailSider from '@/pages/SemanticModel/components/DetailContainer/DetailSider';
import { ProjectOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
import DimensionInfoForm from '../components/DimensionInfoForm';
import DetailFormWrapper from '@/pages/SemanticModel/components/DetailContainer/DetailFormWrapper';
type Props = Record<string, any>;
const DataSetDetail: React.FC<Props> = () => {
const settingList = [
{
icon: <ProjectOutlined />,
key: 'basic',
text: '基本信息',
},
];
const params: any = useParams();
const detailId = params.dimensionId;
const modelId = params.modelId;
const domainId = params.domainId;
const menuKey = params.menuKey;
const [detailData, setDetailData] = useState<ISemantic.IDimensionItem>();
const dimensionModel = useModel('SemanticModel.dimensionData');
const { setSelectDimension } = dimensionModel;
const [activeMenu, setActiveMenu] = useState<any>(() => {
if (menuKey) {
const target = settingList.find((item) => item.key === menuKey);
if (target) {
return target;
}
}
return settingList[0];
});
const detailFormRef = useRef<any>();
useEffect(() => {
return () => {
setSelectDimension(undefined);
};
}, []);
useEffect(() => {
if (!detailId) {
return;
}
queryDetailData(detailId);
}, [detailId]);
const queryDetailData = async (id: number) => {
const { code, data, msg } = await getDimensionList({ ids: [id] });
if (code === 200) {
const target = data?.list?.[0];
setDetailData(target);
setSelectDimension(target);
return;
}
message.error(msg);
};
return (
<>
<Helmet title={`[数据集]${detailData?.name}-${BASE_TITLE}`} />
<DetailContainer
siderNode={
<DetailSider
menuKey={activeMenu.key}
menuList={settingList}
detailData={detailData}
onMenuKeyChange={(key: string, menu) => {
setActiveMenu(menu);
}}
/>
}
containerNode={
<DetailFormWrapper
currentMenu={activeMenu}
onSave={() => {
detailFormRef.current.onSave();
}}
>
<DimensionInfoForm
ref={detailFormRef}
modelId={modelId}
domainId={domainId}
dimensionItem={detailData}
/>
</DetailFormWrapper>
}
/>
</>
);
};
export default DataSetDetail;

7
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
View File

@@ -33,6 +33,9 @@ const MetricDetail: React.FC<Props> = () => {
}, [metricId]);
const queryMetricData = async (metricId: string) => {
if (!metricId) {
return;
}
const { code, data, msg } = await getMetricData(metricId);
if (code === 200) {
setMetircData({ ...data });
@@ -104,7 +107,9 @@ const MetricDetail: React.FC<Props> = () => {
return (
<>
<Helmet title={`[指标]${metircData?.name}-${BASE_TITLE}`} />
<Helmet
title={`${metircData?.id ? `[指标]${metircData?.name}-${BASE_TITLE}` : '新建指标'}`}
/>
<div className={styles.metricDetailWrapper}>
<div className={styles.metricDetail}>
<div className={styles.siderContainer}>

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

@@ -14,7 +14,9 @@ type Props = Record<string, any>;
const MetricDetail: React.FC<Props> = () => {
const params: any = useParams();
const metricId = params.metricId;
const metricId = +params.metricId;
const modelId = +params.modelId;
const domainId = +params.domainId;
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
const metricModel = useModel('SemanticModel.metricData');
const { setSelectMetric } = metricModel;
@@ -33,7 +35,10 @@ const MetricDetail: React.FC<Props> = () => {
};
}, []);
const queryMetricData = async (metricId: string) => {
const queryMetricData = async (metricId: number) => {
if (!metricId) {
return;
}
const { code, data, msg } = await getMetricData(metricId);
if (code === 200) {
setMetircData({ ...data });
@@ -58,7 +63,11 @@ const MetricDetail: React.FC<Props> = () => {
return (
<>
<Helmet title={`[指标]${metircData?.name}-${BASE_TITLE}`} />
<Helmet
title={`${
metircData?.id ? `[指标]${metircData?.name}-${BASE_TITLE}` : `新建指标-${BASE_TITLE}`
}`}
/>
<DetailContainer
siderNode={
<DetailSider
@@ -70,7 +79,14 @@ const MetricDetail: React.FC<Props> = () => {
}}
/>
}
containerNode={<MetricInfoCreateForm settingKey={settingKey} metricItem={metircData} />}
containerNode={
<MetricInfoCreateForm
settingKey={settingKey}
metricItem={metircData}
modelId={metircData?.modelId || modelId}
domainId={metircData?.domainId || domainId}
/>
}
/>
</>
);

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

@@ -37,9 +37,12 @@ import { createMetric, updateMetric, mockMetricAlias, getMetricTags } from '../.
import { MetricSettingKey, MetricSettingWording } from '../constants';
import { ISemantic } from '../../data';
import { history } from '@umijs/max';
import { toDomainList, toModelList } from '@/pages/SemanticModel/utils';
import globalStyles from '@/global.less';
export type CreateFormProps = {
modelId: number;
domainId: number;
datasourceId?: number;
metricItem: any;
settingKey: MetricSettingKey;
@@ -58,6 +61,8 @@ const queryParamsTypeParamsKey = {
};
const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
modelId,
domainId,
datasourceId,
onCancel,
settingKey,
@@ -65,8 +70,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
onSubmit,
}) => {
const isEdit = !!metricItem?.id;
const domainId = metricItem?.domainId;
const modelId = metricItem?.modelId;
const formValRef = useRef({} as any);
const [form] = Form.useForm();
const updateFormVal = (val: any) => {
@@ -381,6 +384,9 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
}
message.success('编辑指标成功');
onSubmit?.(queryParams);
if (!isEdit) {
toModelList(domainId, modelId!, 'metric');
}
return;
}
message.error(msg);
@@ -480,10 +486,11 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
};
const renderContent = () => {
if (settingKey === MetricSettingKey.SQL_CONFIG) {
return (
return (
<>
<div
style={{
display: settingKey === MetricSettingKey.SQL_CONFIG ? 'block' : 'none',
marginLeft: '-24px',
}}
>
@@ -607,211 +614,211 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
</>
)}
</div>
);
}
return (
<>
<FormItem hidden={true} name="id" label="ID">
<Input placeholder="id" />
</FormItem>
<Row gutter={20}>
<Col span={12}>
<FormItem
name="name"
label="指标名称"
rules={[{ required: true, message: '请输入指标名称' }]}
>
<Input placeholder="名称不可重复" />
</FormItem>
</Col>
<Col span={12}>
<FormItem
name="bizName"
label="英文名称"
rules={[{ required: true, message: '请输入英文名称' }]}
>
<Input placeholder="名称不可重复" disabled={isEdit} />
</FormItem>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<FormItem
name="sensitiveLevel"
label="敏感度"
rules={[{ required: true, message: '请选择敏感度' }]}
>
<Select placeholder="请选择敏感度">
{SENSITIVE_LEVEL_OPTIONS.map((item) => (
<Option key={item.value} value={item.value}>
{item.label}
</Option>
))}
</Select>
</FormItem>
</Col>
<Col span={12}>
<FormItem name="classifications" label="分类">
<Select
mode="tags"
placeholder="支持手动输入及选择"
tokenSeparators={[',']}
maxTagCount={9}
options={tagOptions}
/>
</FormItem>
</Col>
</Row>
<FormItem
name="description"
label={
<TableTitleTooltips
title="业务口径"
overlayInnerStyle={{ width: 600 }}
tooltips={
<>
<p>
在录入指标时，请务必详细填写指标口径。口径描述对于理解指标的含义、计算方法和使用场景至关重要。一个清晰、准确的口径描述可以帮助其他用户更好地理解和使用该指标，避免因为误解而导致错误的数据分析和决策。在填写口径时，建议包括以下信息：
</p>
<p>1. 指标的计算方法：详细说明指标是如何计算的，包括涉及的公式、计算步骤等。</p>
<p>2. 数据来源：描述指标所依赖的数据来源，包括数据表、字段等信息。</p>
<p>3. 使用场景：说明该指标适用于哪些业务场景，以及如何在这些场景中使用该指标。</p>
<p>4. 任何其他相关信息：例如数据更新频率、数据质量要求等。</p>
<p>
请确保口径描述清晰、简洁且易于理解，以便其他用户能够快速掌握指标的核心要点。
</p>
</>
}
/>
}
rules={[{ required: true, message: '请输入业务口径' }]}
>
<TextArea placeholder="请输入业务口径" style={{ minHeight: 173 }} />
</FormItem>
<FormItem label="别名">
<div style={{ display: settingKey === MetricSettingKey.BASIC ? 'block' : 'none' }}>
<FormItem hidden={true} name="id" label="ID">
<Input placeholder="id" />
</FormItem>
<Row gutter={20}>
<Col flex="1 1 200px">
<FormItem name="alias" noStyle>
<Col span={12}>
<FormItem
name="name"
label="指标名称"
rules={[{ required: true, message: '请输入指标名称' }]}
>
<Input placeholder="名称不可重复" />
</FormItem>
</Col>
<Col span={12}>
<FormItem
name="bizName"
label="英文名称"
rules={[{ required: true, message: '请输入英文名称' }]}
>
<Input placeholder="名称不可重复" disabled={isEdit} />
</FormItem>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<FormItem
name="sensitiveLevel"
label="敏感度"
rules={[{ required: true, message: '请选择敏感度' }]}
>
<Select placeholder="请选择敏感度">
{SENSITIVE_LEVEL_OPTIONS.map((item) => (
<Option key={item.value} value={item.value}>
{item.label}
</Option>
))}
</Select>
</FormItem>
</Col>
<Col span={12}>
<FormItem name="classifications" label="分类">
<Select
style={{ maxWidth: 500 }}
mode="tags"
placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
placeholder="支持手动输入及选择"
tokenSeparators={[',']}
maxTagCount={9}
options={tagOptions}
/>
</FormItem>
</Col>
{isEdit && (
<Col flex="0 1 75px">
<Tooltip title="智能填充将根据指标相关信息，使用大语言模型获取指标别名">
<Button
type="primary"
loading={llmLoading}
style={{ top: '5px' }}
onClick={() => {
generatorMetricAlias();
}}
>
智能填充
</Button>
</Tooltip>
</Col>
)}
</Row>
</FormItem>
<Divider />
<FormItem
name="isTag"
valuePropName="checked"
hidden={!!!process.env.SHOW_TAG}
getValueFromEvent={(value) => {
return value === true ? 1 : 0;
}}
getValueProps={(value) => {
return {
checked: value === 1,
};
}}
>
<Row gutter={20}>
<Col flex="1 1 200px">
<FormItemTitle
title={`设为标签`}
subTitle={`如果勾选，代表取值都是一种'标签'，可用作对实体的圈选`}
/>
</Col>
<Col flex="0 1 75px">
<Switch />
</Col>
</Row>
<Divider />
</FormItem>
<FormItem>
<Row gutter={20}>
<Col flex="1 1 200px">
<FormItemTitle
title={'下钻维度配置'}
subTitle={'配置下钻维度后，将可以在指标卡中进行下钻'}
/>
</Col>
<Col flex="0 1 75px">
<Button
type="primary"
onClick={() => {
setMetricRelationModalOpenState(true);
}}
>
设 置
</Button>
</Col>
</Row>
</FormItem>
<Divider />
<FormItem label={<FormItemTitle title={'数据格式化'} />} name="dataFormatType">
<Radio.Group buttonStyle="solid" size="middle">
<Radio.Button value="">默认</Radio.Button>
<Radio.Button value="decimal">小数</Radio.Button>
<Radio.Button value="percent">百分比</Radio.Button>
</Radio.Group>
</FormItem>
{(isPercentState || isDecimalState) && (
<FormItem
name="description"
label={
<FormItemTitle
title={'小数位数'}
subTitle={`对小数位数进行设置，如保留两位，0.021252 -> 0.02${
isPercentState ? '%' : ''
}`}
<TableTitleTooltips
title="业务口径"
overlayInnerStyle={{ width: 600 }}
tooltips={
<>
<p>
在录入指标时，请务必详细填写指标口径。口径描述对于理解指标的含义、计算方法和使用场景至关重要。一个清晰、准确的口径描述可以帮助其他用户更好地理解和使用该指标，避免因为误解而导致错误的数据分析和决策。在填写口径时，建议包括以下信息：
</p>
<p>1. 指标的计算方法：详细说明指标是如何计算的，包括涉及的公式、计算步骤等。</p>
<p>2. 数据来源：描述指标所依赖的数据来源，包括数据表、字段等信息。</p>
<p>
3. 使用场景：说明该指标适用于哪些业务场景，以及如何在这些场景中使用该指标。
</p>
<p>4. 任何其他相关信息：例如数据更新频率、数据质量要求等。</p>
<p>
请确保口径描述清晰、简洁且易于理解，以便其他用户能够快速掌握指标的核心要点。
</p>
</>
}
/>
}
name={['dataFormat', 'decimalPlaces']}
rules={[{ required: true, message: '请输入业务口径' }]}
>
<InputNumber placeholder="请输入需要保留小数位数" style={{ width: '300px' }} />
<TextArea placeholder="请输入业务口径" style={{ minHeight: 173 }} />
</FormItem>
)}
{isPercentState && (
<>
<FormItem label="别名">
<Row gutter={20}>
<Col flex="1 1 200px">
<FormItem name="alias" noStyle>
<Select
style={{ maxWidth: 500 }}
mode="tags"
placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
tokenSeparators={[',']}
maxTagCount={9}
/>
</FormItem>
</Col>
{isEdit && (
<Col flex="0 1 75px">
<Tooltip title="智能填充将根据指标相关信息，使用大语言模型获取指标别名">
<Button
type="primary"
loading={llmLoading}
style={{ top: '5px' }}
onClick={() => {
generatorMetricAlias();
}}
>
智能填充
</Button>
</Tooltip>
</Col>
)}
</Row>
</FormItem>
<Divider />
<FormItem
name="isTag"
valuePropName="checked"
hidden={!!!process.env.SHOW_TAG}
getValueFromEvent={(value) => {
return value === true ? 1 : 0;
}}
getValueProps={(value) => {
return {
checked: value === 1,
};
}}
>
<Row gutter={20}>
<Col flex="1 1 200px">
<FormItemTitle
title={`设为标签`}
subTitle={`如果勾选，代表取值都是一种'标签'，可用作对实体的圈选`}
/>
</Col>
<Col flex="0 1 75px">
<Switch />
</Col>
</Row>
<Divider />
</FormItem>
<FormItem>
<Row gutter={20}>
<Col flex="1 1 200px">
<FormItemTitle
title={'下钻维度配置'}
subTitle={'配置下钻维度后，将可以在指标卡中进行下钻'}
/>
</Col>
<Col flex="0 1 75px">
<Button
type="primary"
onClick={() => {
setMetricRelationModalOpenState(true);
}}
>
设 置
</Button>
</Col>
</Row>
</FormItem>
<Divider />
<FormItem label={<FormItemTitle title={'数据格式化'} />} name="dataFormatType">
<Radio.Group buttonStyle="solid" size="middle">
<Radio.Button value="">默认</Radio.Button>
<Radio.Button value="decimal">小数</Radio.Button>
<Radio.Button value="percent">百分比</Radio.Button>
</Radio.Group>
</FormItem>
{(isPercentState || isDecimalState) && (
<FormItem
label={
<FormItemTitle
title={'原始值是否乘以100'}
subTitle={'如 原始值0.001 ->展示值0.1% '}
title={'小数位数'}
subTitle={`对小数位数进行设置，如保留两位，0.021252 -> 0.02${
isPercentState ? '%' : ''
}`}
/>
}
name={['dataFormat', 'needMultiply100']}
valuePropName="checked"
name={['dataFormat', 'decimalPlaces']}
>
<Switch />
<InputNumber placeholder="请输入需要保留小数位数" style={{ width: '300px' }} />
</FormItem>
</>
)}
)}
{isPercentState && (
<>
<FormItem
label={
<FormItemTitle
title={'原始值是否乘以100'}
subTitle={'如 原始值0.001 ->展示值0.1% '}
/>
}
name={['dataFormat', 'needMultiply100']}
valuePropName="checked"
>
<Switch />
</FormItem>
</>
)}
</div>
</>
);
};
@@ -892,15 +899,13 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
<Result
style={{ background: '#fff' }}
status="warning"
subTitle="当前数据源缺少度量，无法创建指标。请前往数据源配置中，将字段设置为度量"
subTitle="当前数据模型缺少度量，无法创建指标。请前往模型配置中，将字段设置为度量"
extra={
<Button
type="primary"
key="console"
onClick={() => {
history.replace(
`/model/domain/manager/${domainId}/${modelId || metricItem?.modelId}/dataSource`,
);
toDomainList(domainId, 'menuKey');
onCancel?.();
}}
>

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

@@ -22,7 +22,7 @@ const ModelManager: React.FC<Props> = ({}) => {
const initModelConfig = () => {
const currentMenuKey = menuKey === defaultTabKey ? '' : menuKey;
toModelList(selectDomainId, selectModelId, currentMenuKey);
toModelList(selectDomainId, selectModelId!, currentMenuKey);
setActiveKey(currentMenuKey);
};
@@ -41,7 +41,7 @@ const ModelManager: React.FC<Props> = ({}) => {
modelList={modelList}
onMenuChange={(menuKey) => {
setActiveKey(menuKey);
toModelList(selectDomainId, selectModelId, menuKey);
toModelList(selectDomainId, selectModelId!, menuKey);
}}
/>
);

57
webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx
View File

@@ -1,7 +1,12 @@
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 {
HomeOutlined,
FundViewOutlined,
BarChartOutlined,
LineChartOutlined,
} from '@ant-design/icons';
import styles from './components/style.less';
import { toDomainList, toModelList } from '@/pages/SemanticModel/utils';
@@ -9,8 +14,10 @@ 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 dimensionModel = useModel('SemanticModel.dimensionData');
const { selectDomainId, selectDomainName, selectDataSet, setSelectDataSet } = domainModel;
const { selectModelId, selectModelName, setSelectModel } = modelModel;
const { selectDimension, setSelectDimension } = dimensionModel;
const { selectMetric, setSelectMetric } = metricModel;
@@ -20,6 +27,9 @@ const PageBreadcrumb: React.FC = () => {
<Space
onClick={() => {
setSelectModel(undefined);
setSelectDimension(undefined);
setSelectMetric(undefined);
setSelectDataSet(undefined);
toDomainList(selectDomainId, 'overview');
}}
>
@@ -30,6 +40,23 @@ const PageBreadcrumb: React.FC = () => {
},
];
if (selectDataSet) {
items.push(
{
type: 'separator',
separator: '/',
},
{
title: (
<Space onClick={() => {}}>
<FundViewOutlined style={{ position: 'relative', top: '2px' }} />
<span>{selectDataSet.name}</span>
</Space>
),
},
);
}
if (selectModelName) {
items.push(
{
@@ -40,8 +67,13 @@ const PageBreadcrumb: React.FC = () => {
title: (
<Space
onClick={() => {
setSelectDimension(undefined);
setSelectMetric(undefined);
toModelList(selectDomainId, selectModelId);
if (selectDimension) {
toModelList(selectDomainId, selectModelId!, 'dimension');
return;
}
toModelList(selectDomainId, selectModelId!, 'metric');
}}
>
<FundViewOutlined style={{ position: 'relative', top: '2px' }} />
@@ -52,6 +84,23 @@ const PageBreadcrumb: React.FC = () => {
);
}
if (selectDimension) {
items.push(
{
type: 'separator',
separator: '/',
},
{
title: (
<Space onClick={() => {}}>
<BarChartOutlined style={{ position: 'relative', top: '2px' }} />
<span>{selectDimension.name}</span>
</Space>
),
},
);
}
if (selectMetric?.name) {
items.push(
{
@@ -61,7 +110,7 @@ const PageBreadcrumb: React.FC = () => {
{
title: selectMetric?.name ? (
<Space>
<FundViewOutlined style={{ position: 'relative', top: '2px' }} />
<LineChartOutlined style={{ position: 'relative', top: '2px' }} />
<span>{selectMetric.name}</span>
</Space>
) : undefined,

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

@@ -91,7 +91,7 @@ const DataSetTable: React.FC<Props> = ({ disabledEdit = false }) => {
return (
<a
onClick={() => {
toDatasetEditPage(record.domainId, record.id);
toDatasetEditPage(record.domainId, record.id, 'relation');
// setEditFormStep(1);
// setViewItem(record);
// setCreateDataSourceModalOpen(true);
@@ -145,9 +145,10 @@ const DataSetTable: React.FC<Props> = ({ disabledEdit = false }) => {
<a
key="metricEditBtn"
onClick={() => {
setEditFormStep(0);
setViewItem(record);
setCreateDataSourceModalOpen(true);
toDatasetEditPage(record.domainId, record.id);
// setEditFormStep(0);
// setViewItem(record);
// setCreateDataSourceModalOpen(true);
}}
>
编辑

397
webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { Form, Button, Modal, Input, Select, Steps, Spin, Space } from 'antd';
import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { Form, Input, Select, Spin, Space } from 'antd';
import type { Ref } from 'react';
import styles from '../../components/style.less';
import { message } from 'antd';
import { formLayout } from '@/components/FormHelper/utils';
@@ -8,224 +9,153 @@ import { ISemantic } from '../../data';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import SelectTMEPerson from '@/components/SelectTMEPerson';
import ViewModelConfigTransfer from './ViewModelConfigTransfer';
import type { FormInstance } from 'antd';
const FormItem = Form.Item;
export type ModelCreateFormModalProps = {
// step: number;
form: FormInstance;
activeKey: string;
domainId: number;
viewItem: any;
datasetItem: any;
modelList: ISemantic.IModelItem[];
onCancel: () => void;
onSubmit: (values: any) => void;
};
const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
form,
activeKey,
viewItem,
domainId,
onCancel,
onSubmit,
modelList,
}) => {
const stepWidth: Record<string, number> = {
'0': 800,
'1': 1200,
'2': 800,
};
// const [currentStep, setCurrentStep] = useState();
const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = forwardRef(
(
{ activeKey, datasetItem, domainId, onCancel, onSubmit, modelList }: ModelCreateFormModalProps,
ref: Ref<any>,
) => {
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [dimensionLoading, setDimensionLoading] = useState<boolean>(false);
const [selectedModelItem, setSelectedModelItem] = useState<ISemantic.IModelItem | undefined>(
modelList[0],
);
const [form] = Form.useForm();
const configTableRef = useRef<any>();
const [formVals, setFormVals] = useState<ISemantic.IModelItem>({
...viewItem,
currentModel: modelList[0]?.id,
});
const [queryType, setQueryType] = useState<string>('METRIC');
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [dimensionLoading, setDimensionLoading] = useState<boolean>(false);
// const [modalWidth, setModalWidth] = useState<number>(stepWidth[`${currentStep}`]);
const [selectedModelItem, setSelectedModelItem] = useState<ISemantic.IModelItem | undefined>(
modelList[0],
);
// const [form] = Form.useForm();
const configTableRef = useRef<any>();
useEffect(() => {
form.setFieldsValue({
...viewItem,
});
// setQueryType(viewItem?.queryType);
}, [viewItem]);
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>();
const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>();
// const [tagList, setTagList] = useState<ISemantic.ITagItem[]>();
useEffect(() => {
console.log(selectedModelItem, 'selectedModelItemselectedModelItem');
if (selectedModelItem?.id) {
queryDimensionList(selectedModelItem.id);
queryMetricList(selectedModelItem.id);
// queryTagList(selectedModelItem.id);
}
}, [selectedModelItem]);
const queryDimensionList = async (modelId: number) => {
setDimensionLoading(true);
const { code, data, msg } = await getDimensionList({ modelId });
setDimensionLoading(false);
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
} else {
message.error(msg);
}
};
const queryMetricList = async (modelId: number) => {
const { code, data, msg } = await queryMetric({ modelId });
if (code === 200 && Array.isArray(data?.list)) {
setMetricList(data.list);
} else {
message.error(msg);
}
};
const handleConfirm = async () => {
const fieldsValue = await form.validateFields();
const viewModelConfigsMap = configTableRef?.current.getViewModelConfigs() || {};
const queryData: ISemantic.IModelItem = {
...formVals,
...fieldsValue,
queryType,
dataSetDetail: {
dataSetModelConfigs: Object.values(viewModelConfigsMap),
useImperativeHandle(ref, () => ({
onSave: () => {
return handleConfirm();
},
domainId,
}));
useEffect(() => {
if (Array.isArray(modelList) || !selectedModelItem) {
setSelectedModelItem(modelList[0]);
}
}, [modelList]);
useEffect(() => {
form.setFieldsValue({
...datasetItem,
});
}, [datasetItem]);
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>();
const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>();
useEffect(() => {
if (selectedModelItem?.id) {
queryDimensionList(selectedModelItem.id);
queryMetricList(selectedModelItem.id);
}
}, [selectedModelItem]);
const queryDimensionList = async (modelId: number) => {
setDimensionLoading(true);
const { code, data, msg } = await getDimensionList({ modelId });
setDimensionLoading(false);
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
} else {
message.error(msg);
}
};
setFormVals(queryData);
setSaveLoading(true);
const { code, msg } = await (!queryData.id ? createView : updateView)(queryData);
setSaveLoading(false);
if (code === 200) {
onSubmit?.(queryData);
} else {
message.error(msg);
}
};
// const forward = () => {
// setModalWidth(stepWidth[`${currentStep + 1}`]);
// setCurrentStep(currentStep + 1);
// };
// const backward = () => {
// setModalWidth(stepWidth[`${currentStep - 1}`]);
// setCurrentStep(currentStep - 1);
// };
const queryMetricList = async (modelId: number) => {
const { code, data, msg } = await queryMetric({ modelId });
if (code === 200 && Array.isArray(data?.list)) {
setMetricList(data.list);
} else {
message.error(msg);
}
};
// const handleNext = async () => {
// await form.validateFields();
// forward();
// };
const handleConfirm = async () => {
const fieldsValue = await form.validateFields();
const viewModelConfigsMap = configTableRef?.current.getViewModelConfigs() || {};
// const renderFooter = () => {
// if (currentStep === 1) {
// return (
// <>
// <Button style={{ float: 'left' }} onClick={backward}>
// 上一步
// </Button>
// <Button
// type="primary"
// loading={saveLoading}
// onClick={() => {
// handleConfirm();
// }}
// >
// 保 存
// </Button>
// </>
// );
// }
// return (
// <>
// <Button onClick={onCancel}>取消</Button>
// <Button type="primary" onClick={handleNext}>
// 下一步
// </Button>
// <Button
// type="primary"
// loading={saveLoading}
// onClick={() => {
// handleConfirm();
// }}
// >
// 保 存
// </Button>
// </>
// );
// };
const queryData: ISemantic.IModelItem = {
...datasetItem,
...fieldsValue,
dataSetDetail: {
dataSetModelConfigs: Object.values(viewModelConfigsMap),
},
domainId,
};
setSaveLoading(true);
const { code, msg } = await (!queryData.id ? createView : updateView)(queryData);
setSaveLoading(false);
if (code === 200) {
onSubmit?.(queryData);
} else {
message.error(msg);
}
};
const renderContent = () => {
return (
<>
<div style={{ display: activeKey === 'relation' ? 'block' : 'none' }}>
<Spin spinning={dimensionLoading}>
<ViewModelConfigTransfer
key={queryType}
queryType={queryType}
toolbarSolt={
<Space>
<span>切换模型: </span>
<Select
style={{
minWidth: 150,
textAlign: 'left',
}}
value={selectedModelItem?.id}
placeholder="请选择模型，获取当前模型下指标维度信息"
onChange={(val) => {
console.log(val, 211111111);
setDimensionList(undefined);
setMetricList(undefined);
const modelItem = modelList.find((item) => item.id === val);
setSelectedModelItem(modelItem);
}}
options={modelList.map((item) => {
return { label: item.name, value: item.id };
})}
/>
</Space>
}
dimensionList={dimensionList}
metricList={metricList}
modelItem={selectedModelItem}
viewItem={viewItem}
ref={configTableRef}
/>
</Spin>
</div>
<div style={{ display: activeKey === 'basic' ? 'block' : 'none' }}>
<FormItem
name="name"
label="数据集名称"
rules={[{ required: true, message: '请输入数据集名称！' }]}
>
<Input placeholder="数据集名称不可重复" />
</FormItem>
<FormItem
name="bizName"
label="数据集英文名称"
rules={[{ required: true, message: '请输入数据集英文名称！' }]}
>
<Input placeholder="请输入数据集英文名称" />
</FormItem>
{/* <FormItem
const renderContent = () => {
return (
<>
<div style={{ display: activeKey === 'relation' ? 'block' : 'none' }}>
<Spin spinning={dimensionLoading}>
<ViewModelConfigTransfer
toolbarSolt={
<Space>
<span>切换模型: </span>
<Select
style={{
minWidth: 150,
textAlign: 'left',
}}
value={selectedModelItem?.id}
placeholder="请选择模型，获取当前模型下指标维度信息"
onChange={(val) => {
setDimensionList(undefined);
setMetricList(undefined);
const modelItem = modelList.find((item) => item.id === val);
setSelectedModelItem(modelItem);
}}
options={modelList.map((item) => {
return { label: item.name, value: item.id };
})}
/>
</Space>
}
dimensionList={dimensionList}
metricList={metricList}
modelItem={selectedModelItem}
viewItem={datasetItem}
ref={configTableRef}
/>
</Spin>
</div>
<div style={{ display: activeKey === 'basic' ? 'block' : 'none' }}>
<FormItem
name="name"
label="数据集名称"
rules={[{ required: true, message: '请输入数据集名称！' }]}
>
<Input placeholder="数据集名称不可重复" />
</FormItem>
<FormItem
name="bizName"
label="数据集英文名称"
rules={[{ required: true, message: '请输入数据集英文名称！' }]}
>
<Input placeholder="请输入数据集英文名称" />
</FormItem>
{/* <FormItem
name="alias"
label="别名"
getValueFromEvent={(value) => {
@@ -244,46 +174,29 @@ const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
maxTagCount={9}
/>
</FormItem> */}
<FormItem name="admins" label={<FormItemTitle title={'责任人'} />}>
<SelectTMEPerson placeholder="请邀请团队成员" />
</FormItem>
<FormItem name="description" label="数据集描述">
<Input.TextArea placeholder="数据集描述" />
</FormItem>
</div>
<FormItem name="admins" label={<FormItemTitle title={'责任人'} />}>
<SelectTMEPerson placeholder="请邀请团队成员" />
</FormItem>
<FormItem name="description" label="数据集描述">
<Input.TextArea placeholder="数据集描述" />
</FormItem>
</div>
</>
);
};
return (
<>
<Form
{...formLayout}
form={form}
onValuesChange={(value, values) => {}}
className={styles.form}
>
{renderContent()}
</Form>
</>
);
};
return (
// <Modal
// width={modalWidth}
// destroyOnClose
// title={'数据集信息'}
// open={true}
// maskClosable={false}
// footer={renderFooter()}
// onCancel={onCancel}
// >
<>
{/* <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
<Step title="基本信息" />
<Step title="关联信息" />
</Steps> */}
<Form
{...formLayout}
form={form}
initialValues={{
...formVals,
}}
onValuesChange={(value, values) => {}}
className={styles.form}
>
{renderContent()}
</Form>
</>
// </Modal>
);
};
},
);
export default DatasetCreateForm;

82
webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/Detail.tsx
View File

@@ -1,16 +1,14 @@
import { message, Form } from 'antd';
import React, { useState, useEffect } from 'react';
import { getMetricData } from '../../service';
import React, { useState, useEffect, useRef } from 'react';
import { useParams, useModel, Helmet } from '@umijs/max';
import { BASE_TITLE } from '@/common/constants';
import { ISemantic } from '../../data';
import { createView, updateView, getAllModelByDomainId, getDataSetDetail } from '../../service';
import { getAllModelByDomainId, getDataSetDetail } from '../../service';
import DetailContainer from '@/pages/SemanticModel/components/DetailContainer';
import DetailSider from '@/pages/SemanticModel/components/DetailContainer/DetailSider';
import { ProjectOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
import DatasetCreateForm from './DatasetCreateForm';
import DetailFormWrapper from '@/pages/SemanticModel/components/DetailContainer/DetailFormWrapper';
// import { MetricSettingKey, MetricSettingWording } from './constants';
type Props = Record<string, any>;
@@ -29,16 +27,28 @@ const DataSetDetail: React.FC<Props> = () => {
];
const params: any = useParams();
const detailId = params.datasetId;
const [detailData, setDetailData] = useState<ISemantic.IMetricItem>();
const menuKey = params.menuKey;
const [detailData, setDetailData] = useState<ISemantic.IDatasetItem>();
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const { modelList } = modelModel;
const { selectDomainId } = domainModel;
const [settingKey, setSettingKey] = useState<string>();
// const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
const [activeMenu, setActiveMenu] = useState<any>(settingList[0]);
const { selectDomainId, setSelectDataSet } = domainModel;
const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
const [activeMenu, setActiveMenu] = useState<any>(() => {
if (menuKey) {
const target = settingList.find((item) => item.key === menuKey);
if (target) {
return target;
}
}
const [form] = Form.useForm();
return settingList[0];
});
const detailFormRef = useRef<any>();
useEffect(() => {
return () => {
setSelectDataSet(undefined);
};
}, []);
useEffect(() => {
if (!detailId) {
@@ -47,26 +57,27 @@ const DataSetDetail: React.FC<Props> = () => {
queryDetailData(detailId);
}, [detailId]);
// useEffect(() => {
// if (!selectDomainId) {
// return;
// }
// queryDomainAllModel();
// }, [selectDomainId]);
useEffect(() => {
if (!selectDomainId) {
return;
}
queryDomainAllModel();
}, [selectDomainId]);
// const queryDomainAllModel = async () => {
// const { code, data, msg } = await getAllModelByDomainId(selectDomainId);
// if (code === 200) {
// setModelList(data);
// } else {
// message.error(msg);
// }
// };
const queryDomainAllModel = async () => {
const { code, data, msg } = await getAllModelByDomainId(selectDomainId);
if (code === 200) {
setModelList(data);
} else {
message.error(msg);
}
};
const queryDetailData = async (id: number) => {
const { code, data, msg } = await getDataSetDetail(id);
if (code === 200) {
setDetailData({ ...data });
setDetailData(data);
setSelectDataSet(data);
return;
}
message.error(msg);
@@ -78,11 +89,11 @@ const DataSetDetail: React.FC<Props> = () => {
<DetailContainer
siderNode={
<DetailSider
menuKey={'basic'}
menuKey={activeMenu.key}
menuList={settingList}
detailData={detailData}
onMenuKeyChange={(key: string, menu) => {
setSettingKey(key);
// setSettingKey(key);
setActiveMenu(menu);
}}
/>
@@ -91,22 +102,15 @@ const DataSetDetail: React.FC<Props> = () => {
<DetailFormWrapper
currentMenu={activeMenu}
onSave={() => {
console.log(form.getFieldsValue());
detailFormRef.current.onSave();
}}
>
<DatasetCreateForm
form={form}
ref={detailFormRef}
activeKey={activeMenu.key}
domainId={selectDomainId}
viewItem={detailData}
datasetItem={detailData}
modelList={modelList}
onSubmit={() => {
// queryDataSetList();
// setCreateDataSourceModalOpen(false);
}}
onCancel={() => {
// setCreateDataSourceModalOpen(false);
}}
/>
</DetailFormWrapper>
}

1
webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/ViewCreateFormModal.tsx
View File

@@ -165,7 +165,6 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
</>
);
};
const renderContent = () => {
return (
<>

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

@@ -161,7 +161,7 @@ const ViewModelConfigTransfer: React.FC<Props> = forwardRef(
setSelectedTransferKeys(transferKeys);
setViewModelConfigsMap(viewConfigMap);
}
}, [queryType]);
}, [queryType, viewItem]);
useEffect(() => {
if (queryType !== TransType.METRIC) {

31
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
View File

@@ -2,7 +2,7 @@ import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { message, Button, Space, Popconfirm, Input, Tag, Select } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import { useModel } from '@umijs/max';
import { useModel, history } from '@umijs/max';
import { StatusEnum, SemanticNodeType } from '../enum';
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
import {
@@ -19,6 +19,7 @@ import TableHeaderFilter from '@/components/TableHeaderFilter';
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
import { ColumnsConfig } from './TableColumnRender';
import BatchSensitiveLevelModal from '@/components/BatchCtrlDropDownButton/BatchSensitiveLevelModal';
import { toDimensionEditPage } from '@/pages/SemanticModel/utils';
import styles from './style.less';
type Props = {};
@@ -80,6 +81,9 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {
};
const queryDataSourceList = async () => {
if (!domainId) {
return;
}
const { code, data, msg } = await getModelList(domainId);
if (code === 200) {
setDataSourceList(data);
@@ -94,7 +98,7 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {
useEffect(() => {
queryDataSourceList();
}, [modelId]);
}, [domainId]);
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
@@ -137,7 +141,17 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {
message.error(msg);
};
const columnsConfig = ColumnsConfig();
// const columnsConfig = ColumnsConfig();
const columnsConfig = ColumnsConfig({
indicatorInfo: {
url: '/model/dimension/:domainId/:modelId/:indicatorId',
onNameClick: (record) => {
const { id } = record;
toDimensionEditPage(domainId, modelId!, id);
return false;
},
},
});
const columns: ProColumns[] = [
{
@@ -216,8 +230,10 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {
key="dimensionEditBtn"
type="link"
onClick={() => {
setDimensionItem(record);
setCreateModalVisible(true);
// setDimensionItem(record);
// setCreateModalVisible(true);
const { id } = record;
toDimensionEditPage(domainId, modelId!, id);
}}
>
编辑
@@ -423,8 +439,9 @@ const ClassDimensionTable: React.FC<Props> = ({}) => {
key="create"
type="primary"
onClick={() => {
setDimensionItem(undefined);
setCreateModalVisible(true);
toDimensionEditPage(domainId, modelId!, 0);
// setDimensionItem(undefined);
// setCreateModalVisible(true);
}}
>
创建维度

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

@@ -146,8 +146,8 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
const columnsConfig = ColumnsConfig({
indicatorInfo: {
url: '/model/metric/:domainId/:modelId/:indicatorId',
onNameClick: (record: ISemantic.IMetricItem) => {
setSelectMetric(record);
onNameClick: (record) => {
setSelectMetric(record as ISemantic.IMetricItem);
},
},
});
@@ -460,8 +460,9 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
key="create"
type="primary"
onClick={() => {
setMetricItem(undefined);
setCreateModalVisible(true);
toMetricEditPage(selectDomainId, modelId!, 0);
// setMetricItem(undefined);
// setCreateModalVisible(true);
}}
>
创建指标

54
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/DetailSider.tsx
View File

@@ -35,7 +35,12 @@ const DetailSider: React.FC<Props> = ({ detailData, menuList, menuKey, onMenuKey
<div className={styles.title}>
<div className={styles.name}>
<Space>
<IndicatorStar indicatorId={detailData?.id} initState={detailData?.isCollect} />
{detailData?.isCollect !== undefined ? (
<IndicatorStar indicatorId={detailData?.id} initState={detailData?.isCollect} />
) : (
<div style={{ width: 15 }}></div>
)}
{detailData?.name}
{detailData?.hasAdminRes && (
<span
@@ -94,28 +99,31 @@ const DetailSider: React.FC<Props> = ({ detailData, menuList, menuKey, onMenuKey
</Space>
</span>
</div>
<div className={styles.item}>
<span className={styles.itemLable}>所属模型: </span>
<span className={styles.itemValue}>
<Space>
<Tag icon={<PartitionOutlined />} color="#3b5999">
{detailData?.modelName || '模型名为空'}
</Tag>
{detailData?.hasAdminRes && (
<span
className={styles.gotoMetricListIcon}
onClick={() => {
toDomainList(detailData.domainId, 'overview');
}}
>
<Tooltip title="前往模型设置页">
<ExportOutlined />
</Tooltip>
</span>
)}
</Space>
</span>
</div>
{detailData?.modelName && (
<div className={styles.item}>
<span className={styles.itemLable}>所属模型: </span>
<span className={styles.itemValue}>
<Space>
<Tag icon={<PartitionOutlined />} color="#3b5999">
{detailData?.modelName || '模型名为空'}
</Tag>
{detailData?.hasAdminRes && (
<span
className={styles.gotoMetricListIcon}
onClick={() => {
toDomainList(detailData.domainId, 'overview');
}}
>
<Tooltip title="前往模型设置页">
<ExportOutlined />
</Tooltip>
</span>
)}
</Space>
</span>
</div>
)}
<div className={styles.item}>
<span className={styles.itemLable}>创建人: </span>
<span className={styles.itemValue}>{detailData?.createdBy}</span>

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

@@ -9,13 +9,13 @@
height: 100%;
.tabContainer {
padding: 12px;
min-height: calc(100vh - 78px);
min-height: calc(100vh - 105px);
width: calc(100vw - 350px);
background-color: #fafafb;
}
.siderContainer {
width: 350px;
min-height: calc(100vh - 78px);
width: 320px;
min-height: calc(100vh - 105px);
border-radius: 6px;
padding: 12px 0 12px 12px;
}
@@ -27,13 +27,16 @@
.DetailInfoSider {
padding: 20px;
padding: 10px;
color: #344767;
background-color: #fff;
height: 100%;
border: 1px solid #e6ebf1;
border-radius: 6px;
.createTitle {
display: flex;
margin-left: 10px;
min-height: 47px;
margin-bottom: 10px;
color:#344767;
font-weight: 500;
@@ -48,7 +51,8 @@
}
}
.title {
margin-bottom: 20px;
margin: 10px 0;
min-height: 47px;
.name {
font-weight: 600;
font-size: 18px;

343
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionInfoForm.tsx Normal file
View File

@@ -0,0 +1,343 @@
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import type { Ref } from 'react';
import { Button, Form, Input, Select, Row, Col, Space, Tooltip, Switch } from 'antd';
import { SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
import { formLayout } from '@/components/FormHelper/utils';
import SqlEditor from '@/components/SqlEditor';
import { ISemantic } from '../data';
import {
DIM_OPTIONS,
EnumDataSourceType,
PARTITION_TIME_FORMATTER,
DATE_FORMATTER,
} from '@/pages/SemanticModel/Datasource/constants';
import { InfoCircleOutlined } from '@ant-design/icons';
import {
createDimension,
updateDimension,
mockDimensionAlias,
batchCreateTag,
batchDeleteTag,
} from '../service';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import { message } from 'antd';
import { toModelList } from '@/pages/SemanticModel/utils';
export type CreateFormProps = {
modelId: number;
domainId: number;
dimensionItem?: ISemantic.IDimensionItem;
onCancel: () => void;
onSubmit?: (values?: any) => void;
};
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
const DimensionInfoForm: React.FC<CreateFormProps> = forwardRef(
(
{ modelId, domainId, dimensionItem, onSubmit: handleUpdate }: CreateFormProps,
ref: Ref<any>,
) => {
const isEdit = !!dimensionItem?.id;
const [dimensionValueSettingList, setDimensionValueSettingList] = useState<
ISemantic.IDimensionValueSettingItem[]
>([]);
const [form] = Form.useForm();
const { setFieldsValue, resetFields } = form;
const [llmLoading, setLlmLoading] = useState<boolean>(false);
const [formData, setFormData] = useState<ISemantic.IDimensionItem>();
useImperativeHandle(ref, () => ({
onSave: () => {
return handleSubmit();
},
}));
const handleSubmit = async (dimValueMaps?: ISemantic.IDimensionValueSettingItem[]) => {
const fieldsValue = await form.validateFields();
await saveDimension({
...fieldsValue,
dimValueMaps: dimValueMaps || dimensionValueSettingList,
alias: Array.isArray(fieldsValue.alias) ? fieldsValue.alias.join(',') : '',
});
};
const saveDimension = async (fieldsValue: any) => {
const queryParams = {
modelId: isEdit ? dimensionItem.modelId : modelId,
type: 'categorical',
...fieldsValue,
};
let saveDimensionQuery = createDimension;
if (queryParams.id) {
saveDimensionQuery = updateDimension;
}
const { code, msg, data } = await saveDimensionQuery(queryParams);
if (code === 200) {
if (queryParams.isTag) {
queryBatchExportTag(data.id || dimensionItem?.id);
}
if (dimensionItem?.id && !queryParams.isTag) {
queryBatchDeleteTag(dimensionItem);
}
if (!isEdit) {
toModelList(domainId, modelId, 'dimension');
}
message.success('保存维度成功');
return;
}
message.error(msg);
};
const queryBatchDeleteTag = async (dimensionItem: ISemantic.IDimensionItem) => {
const { code, msg } = await batchDeleteTag([
{
itemIds: [dimensionItem.id],
tagDefineType: TAG_DEFINE_TYPE.DIMENSION,
},
]);
if (code === 200) {
return;
}
message.error(msg);
};
const queryBatchExportTag = async (id: number) => {
const { code, msg } = await batchCreateTag([
{ itemId: id, tagDefineType: TAG_DEFINE_TYPE.DIMENSION },
]);
if (code === 200) {
return;
}
message.error(msg);
};
const setFormVal = () => {
if (dimensionItem) {
const { alias } = dimensionItem;
const dimensionData = {
...dimensionItem,
alias: alias && alias.trim() ? alias.split(',') : [],
};
setFieldsValue(dimensionData);
setFormData(dimensionData);
}
};
useEffect(() => {
if (dimensionItem) {
setFormVal();
if (Array.isArray(dimensionItem.dimValueMaps)) {
setDimensionValueSettingList(dimensionItem.dimValueMaps);
} else {
setDimensionValueSettingList([]);
}
} else {
resetFields();
}
}, [dimensionItem]);
const generatorDimensionAlias = async () => {
const fieldsValue = await form.validateFields();
setLlmLoading(true);
const { code, data } = await mockDimensionAlias({
...dimensionItem,
...fieldsValue,
alias: fieldsValue.alias?.join(','),
});
setLlmLoading(false);
const formAlias = form.getFieldValue('alias');
setLlmLoading(false);
if (code === 200) {
form.setFieldValue('alias', Array.from(new Set([...formAlias, ...data])));
} else {
message.error('大语言模型解析异常');
}
};
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
hidden={isEdit}
name="bizName"
label="英文名称"
rules={[{ required: true, message: '请输入英文名称' }]}
>
<Input placeholder="名称不可重复" disabled={isEdit} />
</FormItem>
<FormItem label="别名">
<Row>
<Col flex="1 1 200px">
<FormItem name="alias" noStyle>
<Select
mode="tags"
placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
tokenSeparators={[',']}
maxTagCount={9}
/>
</FormItem>
</Col>
{isEdit && (
<Col flex="0 1 75px">
<Button
type="link"
size="small"
loading={llmLoading}
style={{ top: '2px' }}
onClick={() => {
generatorDimensionAlias();
}}
>
<Space>
智能填充
<Tooltip title="智能填充将根据维度相关信息，使用大语言模型获取维度别名">
<InfoCircleOutlined />
</Tooltip>
</Space>
</Button>
</Col>
)}
</Row>
</FormItem>
<FormItem
name="type"
label="类型"
rules={[{ required: true, message: '请选择维度类型' }]}
>
<Select placeholder="请选择维度类型">
{DIM_OPTIONS.map((item) => (
<Option key={item.value} value={item.value}>
{item.label}
</Option>
))}
</Select>
</FormItem>
{formData?.type &&
[EnumDataSourceType.PARTITION_TIME, EnumDataSourceType.TIME].includes(
formData.type as EnumDataSourceType,
) && (
<FormItem
name={['ext', 'time_format']}
label="时间格式"
rules={[{ required: true, message: '请选择时间格式' }]}
tooltip="请选择数据库中时间字段对应格式"
>
<Select placeholder="请选择维度类型">
{(formData?.type === EnumDataSourceType.TIME
? DATE_FORMATTER
: PARTITION_TIME_FORMATTER
).map((item) => (
<Option key={item} value={item}>
{item}
</Option>
))}
</Select>
</FormItem>
)}
<FormItem
name="semanticType"
label="类型"
hidden={true}
// rules={[{ required: true, message: '请选择维度类型' }]}
>
<Select placeholder="请选择维度类型">
{['CATEGORY', 'ID', 'DATE'].map((item) => (
<Option key={item} value={item}>
{item}
</Option>
))}
</Select>
</FormItem>
<FormItem
name="sensitiveLevel"
label="敏感度"
rules={[{ required: true, message: '请选择敏感度' }]}
>
<Select placeholder="请选择敏感度">
{SENSITIVE_LEVEL_OPTIONS.map((item) => (
<Option key={item.value} value={item.value}>
{item.label}
</Option>
))}
</Select>
</FormItem>
{/* <FormItem name="commonDimensionId" label="公共维度">
<Select placeholder="请绑定公共维度" allowClear options={commonDimensionOptions} />
</FormItem> */}
{/* <FormItem name="defaultValues" label="默认值">
<InfoTagList />
</FormItem> */}
<Form.Item
hidden={!!!process.env.SHOW_TAG}
label={
<FormItemTitle
title={`设为标签`}
subTitle={`如果勾选，代表维度的取值都是一种'标签'，可用作对实体的圈选`}
/>
}
name="isTag"
valuePropName="checked"
getValueFromEvent={(value) => {
return value === true ? 1 : 0;
}}
getValueProps={(value) => {
return {
checked: value === 1,
};
}}
>
<Switch />
</Form.Item>
<FormItem
name="description"
label="维度描述"
rules={[{ required: true, message: '请输入维度描述' }]}
>
<TextArea placeholder="请输入维度描述" />
</FormItem>
<FormItem
name="expr"
label="表达式"
tooltip="表达式中的字段必须在创建模型的时候被标记为日期或者维度"
rules={[{ required: true, message: '请输入表达式' }]}
>
<SqlEditor height={'150px'} />
</FormItem>
</>
);
};
return (
<>
<Form
{...formLayout}
form={form}
onValuesChange={(value, values) => {
setFormData(values);
}}
>
{renderContent()}
</Form>
</>
);
},
);
export default DimensionInfoForm;

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

@@ -13,7 +13,7 @@ import IndicatorStar, { StarType } from '../components/IndicatorStar';
interface IndicatorInfo {
url?: string;
starType?: StarType;
onNameClick?: (record: ISemantic.IMetricItem) => void | boolean;
onNameClick?: (record: ISemantic.IMetricItem | ISemantic.IDimensionItem) => void | boolean;
}
interface ColumnsConfigParams {
@@ -116,18 +116,43 @@ export const ColumnsConfig = (params?: ColumnsConfigParams) => {
},
dimensionInfo: {
render: (_, record: ISemantic.IDimensionItem) => {
const { name, alias, bizName } = record;
const { name, alias, bizName, id, domainId, modelId } = record;
let url = `/demension/detail/${id}`;
if (params?.indicatorInfo) {
url = replaceRouteParams(params.indicatorInfo.url || '', {
domainId: `${domainId}`,
modelId: `${modelId}`,
indicatorId: `${id}`,
});
}
return (
<>
<div>
<Space>
<span style={{ fontWeight: 500 }}>{name}</span>
<a
className={styles.textLink}
style={{ fontWeight: 500 }}
onClick={(event: any) => {
if (params?.indicatorInfo?.onNameClick) {
const state = params.indicatorInfo.onNameClick(record);
if (state === false) {
return;
}
}
history.push(url);
event.preventDefault();
event.stopPropagation();
}}
>
{name}
</a>
{/* <span style={{ fontWeight: 500 }}>{name}</span> */}
</Space>
</div>
<div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
{bizName}
</div>
{renderAliasAndClassifications(alias, undefined)}
{alias && renderAliasAndClassifications(alias, undefined)}
</>
);
},
@@ -174,7 +199,7 @@ export const ColumnsConfig = (params?: ColumnsConfigParams) => {
<div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
{bizName}
</div>
{renderAliasAndClassifications(alias, classifications)}
{alias && renderAliasAndClassifications(alias, classifications)}
</>
);
},

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

@@ -24,6 +24,13 @@ const SemanticModel: React.FC<Props> = ({}) => {
const { selectMetric, setSelectMetric } = metricModel;
// useEffect(() => {
// return () => {
// setSelectMetric(undefined);
// }
// }, [])
const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
const targetNode = domainList.filter((item: any) => {
return `${item.id}` === domainId;

8
webapp/packages/supersonic-fe/src/pages/SemanticModel/models/dimensionData.ts
View File

@@ -5,6 +5,7 @@ import { getDimensionList } from '../service';
export default function Dimension() {
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
const [selectDimension, setSelectDimension] = useState<ISemantic.IDimensionItem>();
const queryDimensionList = async (params: any) => {
const { code, data, msg } = await getDimensionList({
@@ -23,5 +24,10 @@ export default function Dimension() {
return await queryDimensionList(params);
};
return { MdimensionList: dimensionList, MrefreshDimensionList: refreshDimensionList };
return {
MdimensionList: dimensionList,
MrefreshDimensionList: refreshDimensionList,
selectDimension,
setSelectDimension,
};
}

21
webapp/packages/supersonic-fe/src/pages/SemanticModel/models/domainData.ts
View File

@@ -1,18 +1,37 @@
import { ISemantic } from '../data';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { useModel } from '@umijs/max';
export default function Domain() {
const [selectDomain, setSelectDomain] = useState<ISemantic.IDomainItem>(
{} as ISemantic.IDomainItem,
);
const [selectDataSet, setSelectDataSet] = useState<ISemantic.IDatasetItem>();
const [domainList, setDomainList] = useState<ISemantic.IDomainItem[]>([]);
const modelModel = useModel('SemanticModel.modelData');
const metricModel = useModel('SemanticModel.metricData');
const dimensionModel = useModel('SemanticModel.dimensionData');
const { setSelectModel } = modelModel;
const { setSelectDimension } = dimensionModel;
const { setSelectMetric } = metricModel;
useEffect(() => {
setSelectModel(undefined);
setSelectDimension(undefined);
setSelectMetric(undefined);
setSelectDataSet(undefined);
}, [selectDomain]);
return {
selectDomain,
selectDataSet,
selectDomainId: selectDomain?.id,
selectDomainName: selectDomain?.name,
domainList,
setSelectDomain,
setSelectDataSet,
setDomainList,
};
}

14
webapp/packages/supersonic-fe/src/pages/SemanticModel/models/modelData.ts
View File

@@ -1,6 +1,7 @@
import { ISemantic } from '../data';
import { message } from 'antd';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { useModel } from '@umijs/max';
import { getModelList } from '../service';
export default function Model() {
@@ -8,6 +9,17 @@ export default function Model() {
const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
const [modelTableHistoryParams, setModelTableHistoryParams] = useState<Record<string, any>>({});
const metricModel = useModel('SemanticModel.metricData');
const dimensionModel = useModel('SemanticModel.dimensionData');
const { setSelectDimension } = dimensionModel;
const { setSelectMetric } = metricModel;
useEffect(() => {
setSelectDimension(undefined);
setSelectMetric(undefined);
}, [selectModel]);
const mergeParams = (params: Record<string, any>) => {
setModelTableHistoryParams({
...modelTableHistoryParams,

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

@@ -50,9 +50,6 @@ export function getDimensionList(data: any): Promise<any> {
...(modelId ? { modelIds: [modelId] } : {}),
},
};
if (getRunningEnv() === 'chat') {
return request.post(`${process.env.CHAT_API_BASE_URL}conf/dimension/page`, queryParams);
}
return request.post(`${process.env.API_BASE_URL}dimension/queryDimension`, queryParams);
}

24
webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
View File

@@ -253,10 +253,26 @@ export const toModelList = (domainId: number, modelId: number, menuKey?: string)
history.push(`/model/domain/manager/${domainId}/${modelId}${menuKey ? `/${menuKey}` : ''}`);
};
export const toMetricEditPage = (domainId: number, modelId: number, metircId: number) => {
history.push(`/model/metric/${domainId}/${modelId}/${metircId}`);
export const toMetricEditPage = (
domainId: number,
modelId: number,
metircId: number,
menuKey?: string,
) => {
history.push(`/model/metric/${domainId}/${modelId}/${metircId}${menuKey ? `/${menuKey}` : ''}`);
};
export const toDatasetEditPage = (domainId: number, datasetId: number) => {
history.push(`/model/dataset/${domainId}/${datasetId}`);
export const toDatasetEditPage = (domainId: number, datasetId: number, menuKey?: string) => {
history.push(`/model/dataset/${domainId}/${datasetId}${menuKey ? `/${menuKey}` : ''}`);
};
export const toDimensionEditPage = (
domainId: number,
modelId: number,
dimensionId: number,
menuKey?: string,
) => {
history.push(
`/model/dimension/${domainId}/${modelId}/${dimensionId}${menuKey ? `/${menuKey}` : ''}`,
);
};