topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2026-04-21 14:14:19 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[improvement][headless-fe] Migrating scaffold version to @umi/max (#1030)

Browse Source 
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.

* [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not.

* [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas.

* [improvement][semantic-fe] Updating the datePicker component to use dayjs instead.

* [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market.

* [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model.

* [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market.

* [improvement][semantic-fe] Adding the ability to download and transpose data.

* [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.

* [improvement][semantic-fe] Fixing the logic error in the dimension value setting.

* [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information.

* [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience.

* [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas.

* [improvement][semantic-fe] Changing the line type for canvas connections.

* [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless".

* [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model.

* [improvement][semantic-fe] Updating the logic for the fieldName.

* [improvement][semantic-fe] Adjusting the position of the metrics tab.

* [improvement][semantic-fe] Changing the 字段名称 to 英文名称.

* [improvement][semantic-fe] Fix metric measurement deletion.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI adjustment for metric details page.

* [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty.

* [improvement][semantic-fe] Added field type and metric type to the metric creation options.

* [improvement][semantic-fe] The organization structure selection feature has been added to the permission management.

* [improvement][semantic-fe] Improved user experience for the metric list.

* [improvement][semantic-fe] fix update the metric list.

* [improvement][headless-fe] Added view management functionality.

* [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system.

* [improvement][headless-fe] Added model editing side effect detection.

* [improvement][headless-fe] Fixed the logic error in view editing.

* [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings.

* [improvement][headless-fe] Added the ability to hide the Q&A settings entry point.

* [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation.

* [improvement][headless-fe] Added search functionality to the field list in model editing.

* [improvement][headless-fe] fix the field list in model editing

* [improvement][headless-fe] Restructured the data for the dimension value settings interface.

* [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts.

* [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function.

* [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process.

* [improvement][headless-fe] Replaced the term "view" with "dataset"

* [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target.

* [improvement][headless-fe] Enhanced dataset creation to support the tag mode.

* [improvement][headless-fe] Added tag value setting.

* [improvement][headless-fe] Optimized the tag setting system.

* [improvement][headless-fe] Optimized the tag setting system.

* [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead.

* [improvement][headless-fe] Added search functionality to model management.

* [improvement][headless-fe] Removed field null validation during model editing.

* [improvement][headless-fe] Updated the batch operation button component.

* [improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings.

* [improvement][headless-fe] Adjusted the length of the input field for model editing names.

* [improvement][headless-fe]  Lock the version of the @ant-design/pro-table component and replace it with @ant-design/pro-components.

* [improvement][headless-fe] Optimized the style of the metrics market and tags market.

* [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling.

* [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling

* [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling.

* [improvement][headless-fe] Fixed the issue where the conditions for metric measurement creation were not being saved correctly.

* [improvement][headless-fe] Default value setting for hiding dimensions.

* [improvement][headless-fe] Updated the file imports in the project.

* [improvement][headless-fe] Adjusted the logic for displaying the tab in the theme domain.

* [improvement][headless-fe] Added term management functionality.

* [improvement][headless-fe] When creating a model, the current metric operator now allows for clearance.

* [improvement][headless-fe] Term management interface transformation

* [improvement][headless-fe] Migrating scaffold version to @umi/max
This commit is contained in:
tristanliu
2024-05-24 17:08:10 +08:00
committed by GitHub
parent 67b69768df
commit 5a332f6abf
133 changed files with 21767 additions and 31559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,7 @@
import { message, Tabs, Button, Space } from 'antd';
import React, { useState, useEffect } from 'react';
import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
import { connect, useParams, history } from 'umi';
import type { StateType } from '../model';
import { useParams, history } from '@umijs/max';
import styles from './style.less';
import { ArrowLeftOutlined } from '@ant-design/icons';
import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
@@ -159,6 +158,4 @@ const MetricDetail: React.FC<Props> = () => {
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(MetricDetail);
export default MetricDetail;

127
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit.tsx Normal file
View File

@@ -0,0 +1,127 @@
import { message, Tabs, Button, Space } from 'antd';
import React, { useState, useEffect } from 'react';
import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
import { connect, useParams, history } from 'umi';
import type { StateType } from '../model';
import styles from './style.less';
import { ArrowLeftOutlined } from '@ant-design/icons';
import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
import { ISemantic } from '../data';
import MetricBasicInfo from './components/MetricBasicInfo';
import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
import MetricInfoEditSider from './MetricInfoEditSider';
import MetricInfoCreateForm from './components/MetricInfoCreateForm';
import { MetricSettingKey, MetricSettingWording } from './constants';
type Props = Record<string, any>;
const MetricDetail: React.FC<Props> = () => {
const params: any = useParams();
const metricId = params.metricId;
const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
const [drillDownDimension, setDrillDownDimension] = useState<ISemantic.IDrillDownDimensionItem[]>(
[],
);
const [relationDimensionOptions, setRelationDimensionOptions] = useState<
{ value: string; label: string; modelId: number }[]
>([]);
const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
useEffect(() => {
if (!metricId) {
return;
}
queryMetricData(metricId);
queryDrillDownDimension(metricId);
}, [metricId]);
const queryMetricData = async (metricId: string) => {
const { code, data, msg } = await getMetricData(metricId);
if (code === 200) {
setMetircData({ ...data });
return;
}
message.error(msg);
};
const queryDrillDownDimension = async (metricId: number) => {
const { code, data, msg } = await getDrillDownDimension(metricId);
if (code === 200 && Array.isArray(data)) {
setDrillDownDimension(data);
const ids = data.map((item) => item.dimensionId);
queryDimensionList(ids);
return data;
} else {
setDimensionList([]);
setRelationDimensionOptions([]);
}
if (code !== 200) {
message.error(msg);
}
return [];
};
const queryDimensionList = async (ids: number[]) => {
if (!(Array.isArray(ids) && ids.length > 0)) {
setRelationDimensionOptions([]);
return;
}
const { code, data, msg } = await getDimensionList({ ids });
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
setRelationDimensionOptions(
data.list.map((item: ISemantic.IMetricItem) => {
return { label: item.name, value: item.bizName, modelId: item.modelId };
}),
);
return data.list;
}
message.error(msg);
return [];
};
return (
<>
<div className={styles.metricEditWrapper}>
<div className={styles.metricDetail}>
<div className={styles.siderContainer}>
<MetricInfoEditSider
onSettingKeyChange={(key: string) => {
setSettingKey(key);
}}
metircData={metircData}
/>
</div>
<div className={styles.tabContainer}>
{/* {metircData && ( */}
<MetricInfoCreateForm
settingKey={settingKey}
// domainId={metircData?.domainId}
// modelId={metircData?.modelId}
metricItem={metircData}
/>
{/* )} */}
</div>
</div>
<DimensionAndMetricRelationModal
metricItem={metircData}
relationsInitialValue={drillDownDimension}
open={metricRelationModalOpenState}
onCancel={() => {
setMetricRelationModalOpenState(false);
}}
onSubmit={(relations) => {
queryMetricData(metricId);
queryDrillDownDimension(metricId);
setMetricRelationModalOpenState(false);
}}
/>
</div>
</>
);
};
export default MetricDetail;

96
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
View File

@@ -1,11 +1,9 @@
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { message, Space, Popconfirm, Tag, Spin, Tooltip } from 'antd';
import { message, Space, Popconfirm, Spin } from 'antd';
import MetricAddClass from './components/MetricAddClass';
import React, { useRef, useState, useEffect } from 'react';
import type { Dispatch } from 'umi';
import { connect, history, useModel } from 'umi';
import type { StateType } from '../model';
import { history, useModel } from '@umijs/max';
import { SENSITIVE_LEVEL_ENUM } from '../constant';
import {
queryMetric,
@@ -18,8 +16,7 @@ import {
import MetricFilter from './components/MetricFilter';
import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
import MetricCardList from './components/MetricCardList';
import NodeInfoDrawer from '../SemanticGraph/components/NodeInfoDrawer';
import { SemanticNodeType, StatusEnum } from '../enum';
import { StatusEnum } from '../enum';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
@@ -27,8 +24,7 @@ import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
import { ColumnsConfig } from '../components/TableColumnRender';
type Props = {
dispatch: Dispatch;
domainManger: StateType;
};
type QueryMetricListParams = {
@@ -40,11 +36,9 @@ type QueryMetricListParams = {
[key: string]: any;
};
const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const ClassMetricTable: React.FC<Props> = ({ }) => {
const { initialState = {} } = useModel('@@initialState');
const { currentUser = {} } = initialState as any;
const { selectDomainId, selectModelId: modelId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const defaultPagination = {
current: 1,
@@ -59,7 +53,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const [filterParams, setFilterParams] = useState<Record<string, any>>({
showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
});
const [infoDrawerVisible, setInfoDrawerVisible] = useState<boolean>(false);
const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
@@ -193,55 +186,16 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
{
dataIndex: 'name',
title: '指标',
// width: '20%',
width: 280,
fixed: 'left',
render: columnsConfig.indicatorInfo.render,
},
// {
// dataIndex: 'modelName',
// title: '所属模型',
// render: (_, record: any) => {
// if (record.hasAdminRes) {
// return (
// <a
// target="blank"
// href={`/webapp/model/${record.domainId}/${record.modelId}/metric`}
// // onClick={() => {
// // history.push(`/model/${record.domainId}/${record.modelId}/metric`);
// // }}
// >
// {record.modelName}
// </a>
// );
// }
// return <> {record.modelName}</>;
// },
// },
{
dataIndex: 'sensitiveLevel',
title: '敏感度',
// width: 150,
valueEnum: SENSITIVE_LEVEL_ENUM,
render: columnsConfig.sensitiveLevel.render,
},
// {
// dataIndex: 'isPublish',
// title: '是否发布',
// width: 100,
// search: false,
// render: (isPublish) => {
// switch (isPublish) {
// case 0:
// return '否';
// case 1:
// return <span style={{ color: '#1677ff' }}>是</span>;
// default:
// return <Tag color="default">未知</Tag>;
// }
// },
// },
{
dataIndex: 'description',
title: '描述',
@@ -259,7 +213,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
{
dataIndex: 'createdBy',
title: '创建人',
// width: 150,
search: false,
},
{
@@ -477,45 +430,18 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
{createModalVisible && (
<MetricInfoCreateForm
domainId={Number(selectDomainId)}
createModalVisible={createModalVisible}
modelId={modelId}
metricItem={metricItem}
onSubmit={() => {
setCreateModalVisible(false);
queryMetricList(filterParams);
dispatch({
type: 'domainManger/queryMetricList',
payload: {
domainId: selectDomainId,
},
});
}}
onCancel={() => {
setCreateModalVisible(false);
}}
/>
)}
{infoDrawerVisible && (
<NodeInfoDrawer
nodeData={{ ...metricItem, nodeType: SemanticNodeType.METRIC }}
placement="right"
onClose={() => {
setInfoDrawerVisible(false);
}}
width="100%"
open={infoDrawerVisible}
mask={true}
getContainer={false}
onEditBtnClick={(nodeData: any) => {
handleMetricEdit(nodeData);
}}
maskClosable={true}
onNodeChange={({ eventName }: { eventName: string }) => {
setInfoDrawerVisible(false);
}}
/>
)}
{addClassVisible && (
<MetricAddClass
ids={selectedRowKeys as number[]}
@@ -526,18 +452,10 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
onSuccess={() => {
setAddClassVisible(false);
queryMetricList(filterParams);
dispatch({
type: 'domainManger/queryMetricList',
payload: {
domainId: selectDomainId,
},
});
}}
/>
)}
</>
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(ClassMetricTable);
export default ClassMetricTable

161
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoEditSider.tsx Normal file
View File

@@ -0,0 +1,161 @@
import { Tag, Space, Tooltip } from 'antd';
import React, { useState } from 'react';
import dayjs from 'dayjs';
import { MetricSettingKey, MetricSettingWording } from './constants';
import {
ExportOutlined,
SolutionOutlined,
PartitionOutlined,
ProjectOutlined,
ConsoleSqlOutlined,
SettingOutlined,
} from '@ant-design/icons';
import styles from './style.less';
import { ISemantic } from '../data';
import IndicatorStar from '../components/IndicatorStar';
type Props = {
metircData: ISemantic.IMetricItem;
onSettingKeyChange?: (key: MetricSettingKey) => void;
};
const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }) => {
const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
const settingList = [
{
icon: <ProjectOutlined />,
key: MetricSettingKey.BASIC,
text: MetricSettingWording[MetricSettingKey.BASIC],
},
{
icon: <ConsoleSqlOutlined />,
key: MetricSettingKey.SQL_CONFIG,
text: MetricSettingWording[MetricSettingKey.SQL_CONFIG],
},
// {
// icon: <DashboardOutlined />,
// key: MetricSettingKey.DIMENSION_CONFIG,
// text: MetricSettingWording[MetricSettingKey.DIMENSION_CONFIG],
// },
];
return (
<div className={styles.metricInfoSider}>
<div className={styles.sectionContainer}>
{metircData?.id ? (
<div className={styles.title}>
<div className={styles.name}>
<Space>
<IndicatorStar indicatorId={metircData?.id} initState={metircData?.isCollect} />
{metircData?.name}
{metircData?.hasAdminRes && (
<span
className={styles.gotoMetricListIcon}
onClick={() => {
window.open(`/webapp/model/${metircData.domainId}/${metircData.modelId}/`);
}}
>
<Tooltip title="前往所属模型指标列表">
<ExportOutlined />
</Tooltip>
</span>
)}
</Space>
</div>
{metircData?.bizName && <div className={styles.bizName}>{metircData.bizName}</div>}
</div>
) : (
<div className={styles.createTitle}>
<Space>
<SettingOutlined />
新建指标
</Space>
</div>
)}
<hr className={styles.hr} />
<div className={styles.section} style={{ padding: '16px 0' }}>
<ul className={styles.settingList}>
{settingList.map((item) => {
return (
<li
className={item.key === settingKey ? styles.active : ''}
key={item.key}
onClick={() => {
onSettingKeyChange?.(item.key);
setSettingKey(item.key);
}}
>
<div className={styles.icon}>{item.icon}</div>
<div className={styles.content}>
<span className={styles.text}> {item.text}</span>
</div>
</li>
);
})}
</ul>
</div>
{/* <hr className={styles.hr} /> */}
{metircData?.id && (
<div className={styles.section} style={{ marginTop: 'auto' }}>
<div className={styles.sectionTitleBox}>
<span className={styles.sectionTitle}>
<Space>
<SolutionOutlined />
创建信息
</Space>
</span>
</div>
<div className={styles.item}>
<span className={styles.itemLable}>所属模型: </span>
<span className={styles.itemValue}>
<Space>
<Tag icon={<PartitionOutlined />} color="#3b5999">
{metircData?.modelName || '模型名为空'}
</Tag>
{metircData?.hasAdminRes && (
<span
className={styles.gotoMetricListIcon}
onClick={() => {
window.open(`/webapp/model/${metircData.domainId}/0/overview`);
}}
>
<Tooltip title="前往模型设置页">
<ExportOutlined />
</Tooltip>
</span>
)}
</Space>
</span>
</div>
<div className={styles.item}>
<span className={styles.itemLable}>创建人: </span>
<span className={styles.itemValue}>{metircData?.createdBy}</span>
</div>
<div className={styles.item}>
<span className={styles.itemLable}>创建时间: </span>
<span className={styles.itemValue}>
{metircData?.createdAt
? dayjs(metircData?.createdAt).format('YYYY-MM-DD HH:mm:ss')
: ''}
</span>
</div>
<div className={styles.item}>
<span className={styles.itemLable}>更新时间: </span>
<span className={styles.itemValue}>
{metircData?.createdAt
? dayjs(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')
: ''}
</span>
</div>
</div>
)}
{/* <hr className={styles.hr} /> */}
</div>
</div>
);
};
export default MetricInfoEditSider;

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

@@ -1,7 +1,5 @@
import { Tag, Space, Tooltip, Typography } from 'antd';
import React from 'react';
import { connect } from 'umi';
import type { StateType } from '../model';
import { isArrayOfValues } from '@/utils/utils';
import dayjs from 'dayjs';
import {
@@ -22,7 +20,6 @@ const { Text } = Typography;
type Props = {
metircData: ISemantic.IMetricItem;
domainManger: StateType;
relationDimensionOptions: { value: string; label: string; modelId: number }[];
onNodeChange: (params?: { eventName?: string }) => void;
onEditBtnClick?: (metircData: any) => void;
@@ -256,6 +253,4 @@ const MetricInfoSider: React.FC<Props> = ({
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(MetricInfoSider);
export default MetricInfoSider;

10
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricCardList.tsx
View File

@@ -3,10 +3,7 @@ import React, { useState } from 'react';
import { Dropdown, Popconfirm, Typography } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import { ISemantic } from '../../data';
import { connect } from 'umi';
import icon from '../../../../assets/icon/sourceState.svg';
import type { Dispatch } from 'umi';
import type { StateType } from '../../model';
import { SemanticNodeType } from '../../enum';
import styles from '../style.less';
@@ -17,8 +14,6 @@ type Props = {
onMetricChange?: (metricItem: ISemantic.IMetricItem) => void;
onEditBtnClick?: (metricItem: ISemantic.IMetricItem) => void;
onDeleteBtnClick?: (metricItem: ISemantic.IMetricItem) => void;
domainManger: StateType;
dispatch: Dispatch;
};
const MetricCardList: React.FC<Props> = ({
@@ -27,7 +22,6 @@ const MetricCardList: React.FC<Props> = ({
onMetricChange,
onEditBtnClick,
onDeleteBtnClick,
domainManger,
}) => {
const [currentNodeData, setCurrentNodeData] = useState<any>({});
@@ -129,6 +123,4 @@ const MetricCardList: React.FC<Props> = ({
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(MetricCardList);
export default MetricCardList;

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

@@ -0,0 +1,944 @@
import React, { useEffect, useRef, useState } from 'react';
import {
Form,
Button,
Input,
Select,
Radio,
Switch,
InputNumber,
message,
Result,
Row,
Col,
Space,
Divider,
Tooltip,
Tag,
} from 'antd';
import MetricMeasuresFormTable from '../../components/MetricMeasuresFormTable';
import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE, TAG_DEFINE_TYPE } from '../../constant';
import { formLayout } from '@/components/FormHelper/utils';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import styles from '../../components/style.less';
import {
getMetricsToCreateNewMetric,
getModelDetail,
getDrillDownDimension,
batchCreateTag,
batchDeleteTag,
} from '../../service';
import { ArrowLeftOutlined } from '@ant-design/icons';
import MetricMetricFormTable from '../../components/MetricMetricFormTable';
import MetricFieldFormTable from '../../components/MetricFieldFormTable';
import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
import TableTitleTooltips from '../../components/TableTitleTooltips';
import { createMetric, updateMetric, mockMetricAlias, getMetricTags } from '../../service';
import { MetricSettingKey, MetricSettingWording } from '../constants';
import { ISemantic } from '../../data';
import { history } from '@umijs/max';
export type CreateFormProps = {
datasourceId?: number;
metricItem: any;
settingKey: MetricSettingKey;
onCancel?: () => void;
onSubmit?: (values: any) => void;
};
const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const queryParamsTypeParamsKey = {
[METRIC_DEFINE_TYPE.MEASURE]: 'metricDefineByMeasureParams',
[METRIC_DEFINE_TYPE.METRIC]: 'metricDefineByMetricParams',
[METRIC_DEFINE_TYPE.FIELD]: 'metricDefineByFieldParams',
};
const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
datasourceId,
onCancel,
settingKey,
metricItem,
onSubmit,
}) => {
const isEdit = !!metricItem?.id;
const domainId = metricItem?.domainId;
const modelId = metricItem?.modelId;
const [currentStep, setCurrentStep] = useState(0);
const formValRef = useRef({} as any);
const [form] = Form.useForm();
const updateFormVal = (val: any) => {
const formVal = {
...formValRef.current,
...val,
};
formValRef.current = formVal;
};
const [classMeasureList, setClassMeasureList] = useState<ISemantic.IMeasure[]>([]);
const [exprTypeParamsState, setExprTypeParamsState] = useState<{
[METRIC_DEFINE_TYPE.MEASURE]: ISemantic.IMeasureTypeParams;
[METRIC_DEFINE_TYPE.METRIC]: ISemantic.IMetricTypeParams;
[METRIC_DEFINE_TYPE.FIELD]: ISemantic.IFieldTypeParams;
}>({
[METRIC_DEFINE_TYPE.MEASURE]: {
measures: [],
expr: '',
},
[METRIC_DEFINE_TYPE.METRIC]: {
metrics: [],
expr: '',
},
[METRIC_DEFINE_TYPE.FIELD]: {
fields: [],
expr: '',
},
} as any);
// const [exprTypeParamsState, setExprTypeParamsState] = useState<ISemantic.IMeasure[]>([]);
const [defineType, setDefineType] = useState(METRIC_DEFINE_TYPE.MEASURE);
const [createNewMetricList, setCreateNewMetricList] = useState<ISemantic.IMetricItem[]>([]);
const [fieldList, setFieldList] = useState<ISemantic.IFieldTypeParamsItem[]>([]);
const [isPercentState, setIsPercentState] = useState<boolean>(false);
const [isDecimalState, setIsDecimalState] = useState<boolean>(false);
const [hasMeasuresState, setHasMeasuresState] = useState<boolean>(true);
const [llmLoading, setLlmLoading] = useState<boolean>(false);
const [tagOptions, setTagOptions] = useState<{ label: string; value: string }[]>([]);
const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
const [drillDownDimensions, setDrillDownDimensions] = useState<
ISemantic.IDrillDownDimensionItem[]
>([]);
const [drillDownDimensionsConfig, setDrillDownDimensionsConfig] = useState<
ISemantic.IDrillDownDimensionItem[]
>([]);
const forward = () => setCurrentStep(currentStep + 1);
const backward = () => setCurrentStep(currentStep - 1);
const queryModelDetail = async () => {
const { code, data } = await getModelDetail({ modelId: modelId || metricItem?.modelId });
if (code === 200) {
if (Array.isArray(data?.modelDetail?.fields)) {
if (Array.isArray(metricItem?.metricDefineByFieldParams?.fields)) {
const fieldList = data.modelDetail.fields.map((item: ISemantic.IFieldTypeParamsItem) => {
const { fieldName } = item;
if (
metricItem?.metricDefineByFieldParams?.fields.find(
(measureParamsItem: ISemantic.IFieldTypeParamsItem) =>
measureParamsItem.fieldName === fieldName,
)
) {
return {
...item,
orderNumber: 9999,
};
}
return {
...item,
orderNumber: 0,
};
});
const sortList = fieldList.sort(
(
a: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
b: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
) => b.orderNumber - a.orderNumber,
);
setFieldList(sortList);
} else {
setFieldList(data.modelDetail.fields);
}
}
if (Array.isArray(data?.modelDetail?.measures)) {
if (Array.isArray(metricItem?.metricDefineByMeasureParams?.measures)) {
const measureList = data.modelDetail.measures.map((item: ISemantic.IMeasure) => {
const { bizName } = item;
if (
metricItem?.metricDefineByMeasureParams?.measures.find(
(measureParamsItem: ISemantic.IMeasure) => measureParamsItem.bizName === bizName,
)
) {
return {
...item,
orderNumber: 9999,
};
}
return {
...item,
orderNumber: 0,
};
});
const sortMeasureList = measureList.sort(
(
a: ISemantic.IMeasure & { orderNumber: number },
b: ISemantic.IMeasure & { orderNumber: number },
) => b.orderNumber - a.orderNumber,
);
setClassMeasureList(sortMeasureList);
} else {
setClassMeasureList(data.modelDetail.measures);
}
if (datasourceId) {
const hasMeasures = data.some(
(item: ISemantic.IMeasure) => item.datasourceId === datasourceId,
);
setHasMeasuresState(hasMeasures);
}
return;
}
}
setClassMeasureList([]);
};
const queryDrillDownDimension = async (metricId: number) => {
const { code, data, msg } = await getDrillDownDimension(metricId);
if (code === 200 && Array.isArray(data)) {
setDrillDownDimensionsConfig(data);
}
if (code !== 200) {
message.error(msg);
}
return [];
};
useEffect(() => {
queryModelDetail();
queryMetricsToCreateNewMetric();
queryMetricTags();
}, []);
const handleSave = async () => {
const fieldsValue = await form.validateFields();
const submitForm = {
...formValRef.current,
...fieldsValue,
metricDefineType: defineType,
[queryParamsTypeParamsKey[defineType]]: exprTypeParamsState[defineType],
};
updateFormVal(submitForm);
await saveMetric(submitForm);
};
const initData = () => {
const {
id,
name,
bizName,
description,
sensitiveLevel,
typeParams,
isTag,
dataFormat,
dataFormatType,
alias,
classifications,
metricDefineType,
metricDefineByMeasureParams,
metricDefineByMetricParams,
metricDefineByFieldParams,
} = metricItem;
const isPercent = dataFormatType === 'percent';
const isDecimal = dataFormatType === 'decimal';
const initValue = {
id,
name,
bizName,
sensitiveLevel,
description,
classifications,
isTag,
// isPercent,
dataFormatType: dataFormatType || '',
alias: alias && alias.trim() ? alias.split(',') : [],
dataFormat: dataFormat || {
decimalPlaces: 2,
needMultiply100: false,
},
};
const editInitFormVal = {
...formValRef.current,
...initValue,
};
if (metricDefineType === METRIC_DEFINE_TYPE.MEASURE) {
const { measures, expr } = metricDefineByMeasureParams || {};
setExprTypeParamsState({
...exprTypeParamsState,
[METRIC_DEFINE_TYPE.MEASURE]: {
measures: measures || [],
expr: expr || '',
},
});
}
if (metricDefineType === METRIC_DEFINE_TYPE.METRIC) {
const { metrics, expr } = metricDefineByMetricParams || {};
setExprTypeParamsState({
...exprTypeParamsState,
[METRIC_DEFINE_TYPE.METRIC]: {
metrics: metrics || [],
expr: expr || '',
},
});
}
if (metricDefineType === METRIC_DEFINE_TYPE.FIELD) {
const { fields, expr } = metricDefineByFieldParams || {};
setExprTypeParamsState({
...exprTypeParamsState,
[METRIC_DEFINE_TYPE.FIELD]: {
fields: fields || [],
expr: expr || '',
},
});
}
updateFormVal(editInitFormVal);
form.setFieldsValue(initValue);
setDefineType(metricDefineType);
setIsPercentState(isPercent);
setIsDecimalState(isDecimal);
queryDrillDownDimension(metricItem?.id);
};
useEffect(() => {
if (isEdit) {
initData();
}
}, [metricItem]);
const isEmptyConditions = (
metricDefineType: METRIC_DEFINE_TYPE,
metricDefineParams:
| ISemantic.IMeasureTypeParams
| ISemantic.IMetricTypeParams
| ISemantic.IFieldTypeParams,
) => {
if (metricDefineType === METRIC_DEFINE_TYPE.MEASURE) {
const { measures } = (metricDefineParams as ISemantic.IMeasureTypeParams) || {};
if (!(Array.isArray(measures) && measures.length > 0)) {
message.error('请添加一个度量');
return true;
}
}
if (metricDefineType === METRIC_DEFINE_TYPE.METRIC) {
const { metrics } = (metricDefineParams as ISemantic.IMetricTypeParams) || {};
if (!(Array.isArray(metrics) && metrics.length > 0)) {
message.error('请添加一个指标');
return true;
}
}
if (metricDefineType === METRIC_DEFINE_TYPE.FIELD) {
const { fields } = (metricDefineParams as ISemantic.IFieldTypeParams) || {};
if (!(Array.isArray(fields) && fields.length > 0)) {
message.error('请添加一个字段');
return true;
}
}
return false;
};
const saveMetric = async (fieldsValue: any) => {
const queryParams = {
modelId: isEdit ? metricItem.modelId : modelId,
relateDimension: {
...(metricItem?.relateDimension || {}),
drillDownDimensions,
},
...fieldsValue,
};
const { alias, dataFormatType } = queryParams;
queryParams.alias = Array.isArray(alias) ? alias.join(',') : '';
if (!queryParams[queryParamsTypeParamsKey[defineType]]?.expr) {
message.error('请输入度量表达式');
return;
}
if (!dataFormatType) {
delete queryParams.dataFormat;
}
if (isEmptyConditions(defineType, queryParams[queryParamsTypeParamsKey[defineType]])) {
return;
}
let saveMetricQuery = createMetric;
if (queryParams.id) {
saveMetricQuery = updateMetric;
}
const { code, msg, data } = await saveMetricQuery(queryParams);
if (code === 200) {
if (queryParams.isTag) {
queryBatchExportTag(data.id || metricItem?.id);
}
if (metricItem?.id && !queryParams.isTag) {
queryBatchDelete(metricItem);
}
message.success('编辑指标成功');
onSubmit?.(queryParams);
return;
}
message.error(msg);
};
const queryBatchDelete = async (metricItem: ISemantic.IMetricItem) => {
const { code, msg } = await batchDeleteTag([
{
itemIds: [metricItem.id],
tagDefineType: TAG_DEFINE_TYPE.METRIC,
},
]);
if (code === 200) {
return;
}
message.error(msg);
};
const queryBatchExportTag = async (id: number) => {
const { code, msg } = await batchCreateTag([
{ itemId: id, tagDefineType: TAG_DEFINE_TYPE.METRIC },
]);
if (code === 200) {
return;
}
message.error(msg);
};
const generatorMetricAlias = async () => {
setLlmLoading(true);
const { code, data } = await mockMetricAlias({ ...metricItem });
const formAlias = form.getFieldValue('alias');
setLlmLoading(false);
if (code === 200) {
form.setFieldValue('alias', Array.from(new Set([...formAlias, ...data])));
} else {
message.error('大语言模型解析异常');
}
};
const queryMetricTags = async () => {
const { code, data } = await getMetricTags();
if (code === 200) {
setTagOptions(
Array.isArray(data)
? data.map((tag: string) => {
return { label: tag, value: tag };
})
: [],
);
} else {
message.error('获取指标标签失败');
}
};
const queryMetricsToCreateNewMetric = async () => {
if (!metricItem?.id) {
return;
}
const { code, data } = await getMetricsToCreateNewMetric({
modelId: modelId || metricItem?.modelId,
});
if (code === 200) {
if (Array.isArray(metricItem?.metricDefineByMetricParams?.metrics)) {
const fieldList = data.map((item: ISemantic.IMetricTypeParamsItem) => {
const { bizName } = item;
if (
metricItem?.metricDefineByMetricParams?.metrics.find(
(measureParamsItem: ISemantic.IMetricTypeParamsItem) =>
measureParamsItem.bizName === bizName,
)
) {
return {
...item,
orderNumber: 9999,
};
}
return {
...item,
orderNumber: 0,
};
});
const sortList = fieldList.sort(
(
a: ISemantic.IMetricTypeParamsItem & { orderNumber: number },
b: ISemantic.IMetricTypeParamsItem & { orderNumber: number },
) => b.orderNumber - a.orderNumber,
);
setCreateNewMetricList(sortList);
} else {
setCreateNewMetricList(data);
}
} else {
message.error('获取指标标签失败');
}
};
const renderContent = () => {
if (settingKey === MetricSettingKey.SQL_CONFIG) {
return (
<div
style={{
marginLeft: '-24px',
}}
>
<div
style={{
padding: '0 0 0px 24px',
}}
>
<Space size={20}>
<Radio.Group
buttonStyle="solid"
value={defineType}
onChange={(e) => {
setDefineType(e.target.value);
}}
>
<Radio.Button value={METRIC_DEFINE_TYPE.MEASURE}>按度量</Radio.Button>
<Radio.Button value={METRIC_DEFINE_TYPE.METRIC}>按指标</Radio.Button>
<Radio.Button value={METRIC_DEFINE_TYPE.FIELD}>按字段</Radio.Button>
</Radio.Group>
{defineType === METRIC_DEFINE_TYPE.METRIC && (
<p className={styles.desc}>
基于
<Tag color="#2499ef14" className={styles.markerTag}>
已有
</Tag>
指标来衍生新的指标
</p>
)}
</Space>
</div>
{defineType === METRIC_DEFINE_TYPE.MEASURE && (
<>
<MetricMeasuresFormTable
datasourceId={datasourceId}
typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.MEASURE]}
measuresList={classMeasureList}
onFieldChange={(measures: ISemantic.IMeasure[]) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.MEASURE]: {
...prevState[METRIC_DEFINE_TYPE.MEASURE],
measures,
},
};
});
}}
onSqlChange={(expr: string) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.MEASURE]: {
...prevState[METRIC_DEFINE_TYPE.MEASURE],
expr,
},
};
});
}}
/>
</>
)}
{defineType === METRIC_DEFINE_TYPE.METRIC && (
<>
<MetricMetricFormTable
typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.METRIC]}
metricList={createNewMetricList}
onFieldChange={(metrics: ISemantic.IMetricTypeParamsItem[]) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.METRIC]: {
...prevState[METRIC_DEFINE_TYPE.METRIC],
metrics,
},
};
});
}}
onSqlChange={(expr: string) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.METRIC]: {
...prevState[METRIC_DEFINE_TYPE.METRIC],
expr,
},
};
});
}}
/>
</>
)}
{defineType === METRIC_DEFINE_TYPE.FIELD && (
<>
<MetricFieldFormTable
typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.FIELD]}
fieldList={fieldList}
onFieldChange={(fields: ISemantic.IFieldTypeParamsItem[]) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.FIELD]: {
...prevState[METRIC_DEFINE_TYPE.FIELD],
fields,
},
};
});
}}
onSqlChange={(expr: string) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.FIELD]: {
...prevState[METRIC_DEFINE_TYPE.FIELD],
expr,
},
};
});
}}
/>
</>
)}
</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="别名">
<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"
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>
</FormItem>
<Divider />
<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={'小数位数'}
subTitle={`对小数位数进行设置，如保留两位，0.021252 -> 0.02${
isPercentState ? '%' : ''
}`}
/>
}
name={['dataFormat', 'decimalPlaces']}
>
<InputNumber placeholder="请输入需要保留小数位数" style={{ width: '300px' }} />
</FormItem>
)}
{isPercentState && (
<>
<FormItem
label={
<FormItemTitle
title={'原始值是否乘以100'}
subTitle={'如 原始值0.001 ->展示值0.1% '}
/>
}
name={['dataFormat', 'needMultiply100']}
valuePropName="checked"
>
<Switch />
</FormItem>
</>
)}
</>
);
};
const renderFooter = () => {
if (!hasMeasuresState) {
return <Button onClick={onCancel}>取消</Button>;
}
if (currentStep === 1) {
return (
<>
<Button style={{ float: 'left' }} onClick={backward}>
上一步
</Button>
<Button onClick={onCancel}>取消</Button>
<Button type="primary" onClick={handleSave}>
完成
</Button>
</>
);
}
return (
<>
<Button onClick={onCancel}>取消</Button>
<Button type="primary" onClick={handleSave}>
下一步
</Button>
</>
);
};
return (
<>
{hasMeasuresState ? (
<>
<div className={styles.infoCard}>
<div className={styles.infoCardTitle}>
<span style={{ flex: 'auto' }}>{MetricSettingWording[settingKey]}</span>
<span style={{ flex: 'none' }}>
<Button
size="middle"
type="link"
key="backListBtn"
onClick={() => {
history.back();
}}
>
<Space>
<ArrowLeftOutlined />
返回列表页
</Space>
</Button>
</span>
</div>
<div className={styles.infoCardContainer}>
<Form
className={styles.supersonicForm}
{...formLayout}
form={form}
initialValues={{
...formValRef.current,
dataFormatType: '',
}}
onValuesChange={(value, values: any) => {
const { dataFormatType } = values;
if (dataFormatType === 'percent') {
setIsPercentState(true);
setIsDecimalState(false);
}
if (dataFormatType === 'decimal') {
setIsPercentState(false);
setIsDecimalState(true);
}
if (!dataFormatType) {
setIsPercentState(false);
setIsDecimalState(false);
}
}}
>
{renderContent()}
</Form>
</div>
<div className={styles.infoCardFooter}>
<div className={styles.infoCardFooterContainer}>
<Button type="primary" onClick={handleSave}>
保 存
</Button>
</div>
</div>
</div>
<DimensionAndMetricRelationModal
metricItem={metricItem}
relationsInitialValue={drillDownDimensionsConfig}
open={metricRelationModalOpenState}
onCancel={() => {
setMetricRelationModalOpenState(false);
}}
onSubmit={(relations) => {
setDrillDownDimensions(relations);
setMetricRelationModalOpenState(false);
}}
onRefreshRelationData={() => {
queryDrillDownDimension(metricItem?.id);
}}
/>
</>
) : (
<Result
style={{ background: '#fff' }}
status="warning"
subTitle="当前数据源缺少度量，无法创建指标。请前往数据源配置中，将字段设置为度量"
extra={
<Button
type="primary"
key="console"
onClick={() => {
history.replace(`/model/${domainId}/${modelId || metricItem?.modelId}/dataSource`);
onCancel?.();
}}
>
去创建
</Button>
}
/>
)}
</>
);
};
export default MetricInfoCreateForm;

540
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateSqlConfig.tsx Normal file
View File

@@ -0,0 +1,540 @@
import React, { useEffect, useRef, useState } from 'react';
import {
Form,
Button,
Input,
Select,
Radio,
Switch,
InputNumber,
message,
Result,
Row,
Col,
Space,
Divider,
Tooltip,
Tag,
} from 'antd';
import MetricMeasuresFormTable from '../../components/MetricMeasuresFormTable';
import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE, TAG_DEFINE_TYPE } from '../../constant';
import { formLayout } from '@/components/FormHelper/utils';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import styles from '../../components/style.less';
import {
getMetricsToCreateNewMetric,
getModelDetail,
getDrillDownDimension,
batchCreateTag,
batchDeleteTag,
} from '../../service';
import MetricMetricFormTable from '../../components/MetricMetricFormTable';
import MetricFieldFormTable from '../../components/MetricFieldFormTable';
import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
import TableTitleTooltips from '../../components/TableTitleTooltips';
import { createMetric, updateMetric, mockMetricAlias, getMetricTags } from '../../service';
import { MetricSettingKey, MetricSettingWording } from '../constants';
import { ISemantic } from '../../data';
import { history } from 'umi';
export type CreateFormProps = {
datasourceId?: number;
domainId: number;
modelId: number;
metricItem: any;
settingKey: MetricSettingKey;
onCancel?: () => void;
onSubmit?: (values: any) => void;
};
const queryParamsTypeParamsKey = {
[METRIC_DEFINE_TYPE.MEASURE]: 'metricDefineByMeasureParams',
[METRIC_DEFINE_TYPE.METRIC]: 'metricDefineByMetricParams',
[METRIC_DEFINE_TYPE.FIELD]: 'metricDefineByFieldParams',
};
const MetricInfoCreateSqlConfig: React.FC<CreateFormProps> = ({
datasourceId,
modelId,
metricItem,
onSubmit,
}) => {
const isEdit = !!metricItem?.id;
const [currentStep, setCurrentStep] = useState(0);
const formValRef = useRef({} as any);
const [form] = Form.useForm();
const updateFormVal = (val: any) => {
const formVal = {
...formValRef.current,
...val,
};
formValRef.current = formVal;
};
const [classMeasureList, setClassMeasureList] = useState<ISemantic.IMeasure[]>([]);
const [exprTypeParamsState, setExprTypeParamsState] = useState<{
[METRIC_DEFINE_TYPE.MEASURE]: ISemantic.IMeasureTypeParams;
[METRIC_DEFINE_TYPE.METRIC]: ISemantic.IMetricTypeParams;
[METRIC_DEFINE_TYPE.FIELD]: ISemantic.IFieldTypeParams;
}>({
[METRIC_DEFINE_TYPE.MEASURE]: {
measures: [],
expr: '',
},
[METRIC_DEFINE_TYPE.METRIC]: {
metrics: [],
expr: '',
},
[METRIC_DEFINE_TYPE.FIELD]: {
fields: [],
expr: '',
},
} as any);
// const [exprTypeParamsState, setExprTypeParamsState] = useState<ISemantic.IMeasure[]>([]);
const [defineType, setDefineType] = useState(METRIC_DEFINE_TYPE.MEASURE);
const [createNewMetricList, setCreateNewMetricList] = useState<ISemantic.IMetricItem[]>([]);
const [fieldList, setFieldList] = useState<ISemantic.IFieldTypeParamsItem[]>([]);
const [drillDownDimensions, setDrillDownDimensions] = useState<
ISemantic.IDrillDownDimensionItem[]
>([]);
const [drillDownDimensionsConfig, setDrillDownDimensionsConfig] = useState<
ISemantic.IDrillDownDimensionItem[]
>([]);
const queryModelDetail = async () => {
const { code, data } = await getModelDetail({ modelId: modelId || metricItem?.modelId });
if (code === 200) {
if (Array.isArray(data?.modelDetail?.fields)) {
if (Array.isArray(metricItem?.metricDefineByFieldParams?.fields)) {
const fieldList = data.modelDetail.fields.map((item: ISemantic.IFieldTypeParamsItem) => {
const { fieldName } = item;
if (
metricItem?.metricDefineByFieldParams?.fields.find(
(measureParamsItem: ISemantic.IFieldTypeParamsItem) =>
measureParamsItem.fieldName === fieldName,
)
) {
return {
...item,
orderNumber: 9999,
};
}
return {
...item,
orderNumber: 0,
};
});
const sortList = fieldList.sort(
(
a: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
b: ISemantic.IFieldTypeParamsItem & { orderNumber: number },
) => b.orderNumber - a.orderNumber,
);
setFieldList(sortList);
} else {
setFieldList(data.modelDetail.fields);
}
}
if (Array.isArray(data?.modelDetail?.measures)) {
if (Array.isArray(metricItem?.metricDefineByMeasureParams?.measures)) {
const measureList = data.modelDetail.measures.map((item: ISemantic.IMeasure) => {
const { bizName } = item;
if (
metricItem?.metricDefineByMeasureParams?.measures.find(
(measureParamsItem: ISemantic.IMeasure) => measureParamsItem.bizName === bizName,
)
) {
return {
...item,
orderNumber: 9999,
};
}
return {
...item,
orderNumber: 0,
};
});
const sortMeasureList = measureList.sort(
(
a: ISemantic.IMeasure & { orderNumber: number },
b: ISemantic.IMeasure & { orderNumber: number },
) => b.orderNumber - a.orderNumber,
);
setClassMeasureList(sortMeasureList);
} else {
setClassMeasureList(data.modelDetail.measures);
}
return;
}
}
setClassMeasureList([]);
};
const queryDrillDownDimension = async (metricId: number) => {
const { code, data, msg } = await getDrillDownDimension(metricId);
if (code === 200 && Array.isArray(data)) {
setDrillDownDimensionsConfig(data);
}
if (code !== 200) {
message.error(msg);
}
return [];
};
useEffect(() => {
queryModelDetail();
queryMetricsToCreateNewMetric();
}, []);
const initData = () => {
const {
id,
name,
bizName,
description,
sensitiveLevel,
typeParams,
isTag,
dataFormat,
dataFormatType,
alias,
classifications,
metricDefineType,
metricDefineByMeasureParams,
metricDefineByMetricParams,
metricDefineByFieldParams,
} = metricItem;
const initValue = {
id,
name,
bizName,
sensitiveLevel,
description,
classifications,
isTag,
// isPercent,
dataFormatType: dataFormatType || '',
alias: alias && alias.trim() ? alias.split(',') : [],
dataFormat: dataFormat || {
decimalPlaces: 2,
needMultiply100: false,
},
};
const editInitFormVal = {
...formValRef.current,
...initValue,
};
if (metricDefineType === METRIC_DEFINE_TYPE.MEASURE) {
const { measures, expr } = metricDefineByMeasureParams || {};
setExprTypeParamsState({
...exprTypeParamsState,
[METRIC_DEFINE_TYPE.MEASURE]: {
measures: measures || [],
expr: expr || '',
},
});
}
if (metricDefineType === METRIC_DEFINE_TYPE.METRIC) {
const { metrics, expr } = metricDefineByMetricParams || {};
setExprTypeParamsState({
...exprTypeParamsState,
[METRIC_DEFINE_TYPE.METRIC]: {
metrics: metrics || [],
expr: expr || '',
},
});
}
if (metricDefineType === METRIC_DEFINE_TYPE.FIELD) {
const { fields, expr } = metricDefineByFieldParams || {};
setExprTypeParamsState({
...exprTypeParamsState,
[METRIC_DEFINE_TYPE.FIELD]: {
fields: fields || [],
expr: expr || '',
},
});
}
updateFormVal(editInitFormVal);
form.setFieldsValue(initValue);
setDefineType(metricDefineType);
queryDrillDownDimension(metricItem?.id);
};
useEffect(() => {
if (isEdit) {
initData();
}
}, [metricItem]);
const isEmptyConditions = (
metricDefineType: METRIC_DEFINE_TYPE,
metricDefineParams:
| ISemantic.IMeasureTypeParams
| ISemantic.IMetricTypeParams
| ISemantic.IFieldTypeParams,
) => {
if (metricDefineType === METRIC_DEFINE_TYPE.MEASURE) {
const { measures } = (metricDefineParams as ISemantic.IMeasureTypeParams) || {};
if (!(Array.isArray(measures) && measures.length > 0)) {
message.error('请添加一个度量');
return true;
}
}
if (metricDefineType === METRIC_DEFINE_TYPE.METRIC) {
const { metrics } = (metricDefineParams as ISemantic.IMetricTypeParams) || {};
if (!(Array.isArray(metrics) && metrics.length > 0)) {
message.error('请添加一个指标');
return true;
}
}
if (metricDefineType === METRIC_DEFINE_TYPE.FIELD) {
const { fields } = (metricDefineParams as ISemantic.IFieldTypeParams) || {};
if (!(Array.isArray(fields) && fields.length > 0)) {
message.error('请添加一个字段');
return true;
}
}
return false;
};
const saveMetric = async (fieldsValue: any) => {
const queryParams = {
modelId: isEdit ? metricItem.modelId : modelId,
relateDimension: {
...(metricItem?.relateDimension || {}),
drillDownDimensions,
},
...fieldsValue,
};
const { alias, dataFormatType } = queryParams;
queryParams.alias = Array.isArray(alias) ? alias.join(',') : '';
if (!queryParams[queryParamsTypeParamsKey[defineType]]?.expr) {
message.error('请输入度量表达式');
return;
}
if (!dataFormatType) {
delete queryParams.dataFormat;
}
if (isEmptyConditions(defineType, queryParams[queryParamsTypeParamsKey[defineType]])) {
return;
}
let saveMetricQuery = createMetric;
if (queryParams.id) {
saveMetricQuery = updateMetric;
}
const { code, msg, data } = await saveMetricQuery(queryParams);
if (code === 200) {
if (queryParams.isTag) {
queryBatchExportTag(data.id || metricItem?.id);
}
if (metricItem?.id && !queryParams.isTag) {
queryBatchDelete(metricItem);
}
message.success('编辑指标成功');
onSubmit?.(queryParams);
return;
}
message.error(msg);
};
const queryBatchDelete = async (metricItem: ISemantic.IMetricItem) => {
const { code, msg } = await batchDeleteTag([
{
itemIds: [metricItem.id],
tagDefineType: TAG_DEFINE_TYPE.METRIC,
},
]);
if (code === 200) {
return;
}
message.error(msg);
};
const queryBatchExportTag = async (id: number) => {
const { code, msg } = await batchCreateTag([
{ itemId: id, tagDefineType: TAG_DEFINE_TYPE.METRIC },
]);
if (code === 200) {
return;
}
message.error(msg);
};
const queryMetricsToCreateNewMetric = async () => {
const { code, data } = await getMetricsToCreateNewMetric({
modelId: modelId || metricItem?.modelId,
});
if (code === 200) {
if (Array.isArray(metricItem?.metricDefineByMetricParams?.metrics)) {
const fieldList = data.map((item: ISemantic.IMetricTypeParamsItem) => {
const { bizName } = item;
if (
metricItem?.metricDefineByMetricParams?.metrics.find(
(measureParamsItem: ISemantic.IMetricTypeParamsItem) =>
measureParamsItem.bizName === bizName,
)
) {
return {
...item,
orderNumber: 9999,
};
}
return {
...item,
orderNumber: 0,
};
});
const sortList = fieldList.sort(
(
a: ISemantic.IMetricTypeParamsItem & { orderNumber: number },
b: ISemantic.IMetricTypeParamsItem & { orderNumber: number },
) => b.orderNumber - a.orderNumber,
);
setCreateNewMetricList(sortList);
} else {
setCreateNewMetricList(data);
}
} else {
message.error('获取指标标签失败');
}
};
return (
<div>
<div
style={{
padding: '0 0 20px 24px',
// borderBottom: '1px solid #eee',
}}
>
<Radio.Group
buttonStyle="solid"
value={defineType}
onChange={(e) => {
setDefineType(e.target.value);
}}
>
<Radio.Button value={METRIC_DEFINE_TYPE.MEASURE}>按度量</Radio.Button>
<Radio.Button value={METRIC_DEFINE_TYPE.METRIC}>按指标</Radio.Button>
<Radio.Button value={METRIC_DEFINE_TYPE.FIELD}>按字段</Radio.Button>
</Radio.Group>
</div>
{defineType === METRIC_DEFINE_TYPE.MEASURE && (
<>
<MetricMeasuresFormTable
datasourceId={datasourceId}
typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.MEASURE]}
measuresList={classMeasureList}
onFieldChange={(measures: ISemantic.IMeasure[]) => {
// setClassMeasureList(measures);
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.MEASURE]: {
...prevState[METRIC_DEFINE_TYPE.MEASURE],
measures,
},
};
});
}}
onSqlChange={(expr: string) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.MEASURE]: {
...prevState[METRIC_DEFINE_TYPE.MEASURE],
expr,
},
};
});
}}
/>
</>
)}
{defineType === METRIC_DEFINE_TYPE.METRIC && (
<>
<p className={styles.desc}>
基于
<Tag color="#2499ef14" className={styles.markerTag}>
已有
</Tag>
指标来衍生新的指标
</p>
<MetricMetricFormTable
typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.METRIC]}
metricList={createNewMetricList}
onFieldChange={(metrics: ISemantic.IMetricTypeParamsItem[]) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.METRIC]: {
...prevState[METRIC_DEFINE_TYPE.METRIC],
metrics,
},
};
});
}}
onSqlChange={(expr: string) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.METRIC]: {
...prevState[METRIC_DEFINE_TYPE.METRIC],
expr,
},
};
});
}}
/>
</>
)}
{defineType === METRIC_DEFINE_TYPE.FIELD && (
<>
<MetricFieldFormTable
typeParams={exprTypeParamsState[METRIC_DEFINE_TYPE.FIELD]}
fieldList={fieldList}
onFieldChange={(fields: ISemantic.IFieldTypeParamsItem[]) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.FIELD]: {
...prevState[METRIC_DEFINE_TYPE.FIELD],
fields,
},
};
});
}}
onSqlChange={(expr: string) => {
setExprTypeParamsState((prevState) => {
return {
...prevState,
[METRIC_DEFINE_TYPE.FIELD]: {
...prevState[METRIC_DEFINE_TYPE.FIELD],
expr,
},
};
});
}}
/>
</>
)}
</div>
);
};
export default MetricInfoCreateSqlConfig;

11
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/constants.ts
View File

@@ -0,0 +1,11 @@
export enum MetricSettingKey {
BASIC = 'BASIC',
SQL_CONFIG = 'SQLCONFIG',
DIMENSION_CONFIG = 'DIMENSION_CONFIG',
}
export const MetricSettingWording = {
[MetricSettingKey.BASIC]: '基本信息',
[MetricSettingKey.SQL_CONFIG]: '表达式',
[MetricSettingKey.DIMENSION_CONFIG]: '下钻维度配置',
};

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

@@ -1,7 +1,12 @@
import React from 'react';
import { Outlet } from 'umi';
const market: React.FC = ({ children }) => {
return <>{children}</>;
const market: React.FC = () => {
return (
<>
<Outlet />
</>
);
};
export default market;

167
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
View File

@@ -168,6 +168,76 @@
}
}
.metricEditWrapper {
// height: calc(100vh - 56px);
// overflow: scroll;
.metricDetailTab {
:global {
.ant-tabs-nav {
margin: 10px 20px 0 20px;
padding: 0 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.ant-tabs-tab {
padding: 12px 0;
color: #344767;
font-weight: 500;
}
}
}
.metricDetail {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
padding: 0px;
background-color: transparent;
height: 100%;
.tabContainer {
padding: 24px;
// height: 100%;
min-height: calc(100vh - 78px);
width: calc(100vw - 350px);
background-color: #fafafb;
}
.metricInfoContent {
padding: 25px;
.title {
position: relative;
margin-bottom: 12px;
color: #0e73ff;
font-weight: bold;
font-size: 16px;
&::before {
position: absolute;
top: 10px;
left: -10px;
display: block;
width: 3px;
height: 14px;
font-size: 0;
background: #0e73ff;
border: 1px solid #0e73ff;
border-radius: 2px;
content: '';
}
}
}
.siderContainer {
width: 350px;
min-height: calc(100vh - 78px);
// margin: 10px 20px 20px 0;
// background-color: rgb(255, 255, 255);
border-radius: 6px;
padding: 24px 0 24px 24px;
// box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px,
// rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
}
}
}
.metricDetailWrapper {
height: calc(100vh - 56px);
overflow: scroll;
@@ -194,9 +264,12 @@
width: 100%;
padding: 0px;
background-color: transparent;
height: 100%;
.tabContainer {
height: 100%;
min-height: calc(100vh - 78px);
width: calc(100vw - 450px);
background-color: rgb(240, 242, 245);
background-color: #fafafb;
}
.metricInfoContent {
padding: 25px;
@@ -246,8 +319,19 @@
}
.metricInfoSider {
padding: 24px;
padding: 20px;
color: #344767;
background-color: #fff;
height: 100%;
border: 1px solid #e6ebf1;
border-radius: 6px;
.createTitle {
margin-bottom: 10px;
color:#344767;
font-weight: 500;
font-size: 16px;
font-family: var(--tencent-font-family);
}
.gotoMetricListIcon {
color: #3182ce;
cursor: pointer;
@@ -256,6 +340,7 @@
}
}
.title {
margin-bottom: 20px;
.name {
font-weight: 600;
font-size: 18px;
@@ -287,11 +372,16 @@
opacity: 1;
}
.sectionContainer {
margin-top: 20px;
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: scroll;
overflow: hidden;
// box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
background-image: none;
// transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border-radius: 6px;
.section {
padding: 16px;
@@ -420,3 +510,70 @@
}
}
}
.settingList {
list-style: none;
margin: 0px;
position: relative;
padding: 0px;
li {
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0px;
border: 0px;
margin: 0px;
border-radius: 0px;
cursor: pointer;
user-select: none;
vertical-align: middle;
appearance: none;
display: flex;
flex-grow: 1;
justify-content: flex-start;
align-items: center;
position: relative;
text-decoration: none;
min-width: 0px;
box-sizing: border-box;
text-align: left;
padding: 8px 16px;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
&.active {
background-color: rgba(22, 119, 255, 0.08);
.icon {
color: rgb(22, 119, 255);
}
.content {
.text {
color: rgb(22, 119, 255);
}
}
}
.icon {
min-width: 32px;
color: #344767;
flex-shrink: 0;
display: inline-flex;
}
.content {
flex: 1 1 auto;
min-width: 0px;
margin-top: 4px;
margin-bottom: 4px;
.text {
margin: 0px;
color: #344767;
font-size: 16px;
// line-height: 1.57;
// font-family: var(--tencent-font-family);
font-weight: 600;
display: block;
}
}
&:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.04);
}
}
}