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

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

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.
This commit is contained in:
tristanliu
2024-02-04 15:12:57 +08:00
committed by GitHub
parent 0c4c6d83ef
commit 2546d1c0e1
35 changed files with 949 additions and 1253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,220 @@
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import type { ForwardRefRenderFunction } from 'react';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import { Form, Input, Select, InputNumber } from 'antd';
import { wrapperTransTypeAndId } from '../../utils';
import { ISemantic } from '../../data';
import { ChatConfigType, TransType, SemanticNodeType } from '../../enum';
import TransTypeTag from '../../components/TransTypeTag';
type Props = {
// entityData: any;
// chatConfigKey: string;
chatConfigType: ChatConfigType.TAG | ChatConfigType.METRIC;
metricList?: ISemantic.IMetricItem[];
dimensionList?: ISemantic.IDimensionItem[];
form: any;
// domainId: number;
// onSubmit: (params?: any) => void;
};
const FormItem = Form.Item;
const Option = Select.Option;
const formDefaultValue = {
unit: 7,
period: 'DAY',
timeMode: 'LAST',
};
const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
{ metricList, dimensionList, chatConfigType, form },
ref,
) => {
const [dataItemListOptions, setDataItemListOptions] = useState<any>([]);
const initData = () => {
form.setFieldsValue({
queryConfig: {
[defaultConfigKeyMap[chatConfigType]]: {
timeDefaultConfig: {
...formDefaultValue,
},
},
},
});
};
useEffect(() => {
if (form && !form.getFieldValue('id')) {
initData();
}
}, []);
const defaultConfigKeyMap = {
[ChatConfigType.TAG]: 'tagTypeDefaultConfig',
[ChatConfigType.METRIC]: 'metricTypeDefaultConfig',
};
useEffect(() => {
if (Array.isArray(dimensionList) && Array.isArray(metricList)) {
const dimensionEnum = dimensionList.map((item: ISemantic.IDimensionItem) => {
const { name, id, bizName } = item;
return {
name,
label: (
<>
<TransTypeTag type={SemanticNodeType.DIMENSION} />
{name}
</>
),
value: wrapperTransTypeAndId(TransType.DIMENSION, id),
bizName,
id,
transType: TransType.DIMENSION,
};
});
const metricEnum = metricList.map((item: ISemantic.IMetricItem) => {
const { name, id, bizName } = item;
return {
name,
label: (
<>
<TransTypeTag type={SemanticNodeType.METRIC} />
{name}
</>
),
value: wrapperTransTypeAndId(TransType.METRIC, id),
bizName,
id,
transType: TransType.METRIC,
};
});
setDataItemListOptions([...dimensionEnum, ...metricEnum]);
}
}, [dimensionList, metricList]);
return (
<>
{chatConfigType === ChatConfigType.TAG && (
<FormItem
name={['queryConfig', defaultConfigKeyMap[ChatConfigType.TAG], 'defaultDisplayInfo']}
label="圈选结果展示字段"
getValueFromEvent={(value, items) => {
const result: { dimensionIds: number[]; metricIds: number[] } = {
dimensionIds: [],
metricIds: [],
};
items.forEach((item: any) => {
if (item.transType === TransType.DIMENSION) {
result.dimensionIds.push(item.id);
}
if (item.transType === TransType.METRIC) {
result.metricIds.push(item.id);
}
});
return result;
}}
getValueProps={(value) => {
const { dimensionIds, metricIds } = value || {};
const dimensionValues = Array.isArray(dimensionIds)
? dimensionIds.map((id: number) => {
return wrapperTransTypeAndId(TransType.DIMENSION, id);
})
: [];
const metricValues = Array.isArray(metricIds)
? metricIds.map((id: number) => {
return wrapperTransTypeAndId(TransType.METRIC, id);
})
: [];
return {
value: [...dimensionValues, ...metricValues],
};
}}
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
optionLabelProp="name"
filterOption={(inputValue: string, item: any) => {
const { name } = item;
if (name.includes(inputValue)) {
return true;
}
return false;
}}
placeholder="请选择圈选结果展示字段"
options={dataItemListOptions}
/>
</FormItem>
)}
<FormItem
label={
<FormItemTitle
title={'时间范围'}
subTitle={'问答搜索结果选择中，如果没有指定时间范围，将会采用默认时间范围'}
/>
}
>
<Input.Group compact>
{chatConfigType === ChatConfigType.TAG ? (
<span
style={{
display: 'inline-block',
lineHeight: '32px',
marginRight: '8px',
}}
>
前
</span>
) : (
<>
<FormItem
name={[
'queryConfig',
defaultConfigKeyMap[chatConfigType],
'timeDefaultConfig',
'timeMode',
]}
noStyle
>
<Select style={{ width: '90px' }}>
<Option value="LAST">前</Option>
<Option value="RECENT">最近</Option>
</Select>
</FormItem>
</>
)}
<FormItem
name={['queryConfig', defaultConfigKeyMap[chatConfigType], 'timeDefaultConfig', 'unit']}
noStyle
>
<InputNumber style={{ width: '120px' }} />
</FormItem>
<FormItem
name={[
'queryConfig',
defaultConfigKeyMap[chatConfigType],
'timeDefaultConfig',
'period',
]}
noStyle
>
<Select style={{ width: '90px' }}>
<Option value="DAY">天</Option>
<Option value="WEEK">周</Option>
<Option value="MONTH">月</Option>
<Option value="YEAR">年</Option>
</Select>
</FormItem>
</Input.Group>
</FormItem>
</>
);
};
export default forwardRef(DefaultSettingForm);

52
webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DimensionMetricTransferModal.tsx
View File

@@ -4,19 +4,21 @@ import { ISemantic } from '../../data';
import { TransType } from '../../enum';
import DimensionMetricVisibleTransfer from '../../components/Entity/DimensionMetricVisibleTransfer';
import { wrapperTransTypeAndId } from '../../components/Entity/utils';
import { wrapperTransTypeAndId } from '../../utils';
export type ModelCreateFormModalProps = {
dimensionList: ISemantic.IDimensionItem[];
metricList: ISemantic.IMetricItem[];
dimensionList?: ISemantic.IDimensionItem[];
metricList?: ISemantic.IMetricItem[];
modelId?: number;
selectedTransferKeys: React.Key[];
toolbarSolt?: ReactNode;
onCancel: () => void;
onSubmit: (values: any, selectedKeys: React.Key[]) => void;
};
const DimensionMetricTransferModal: React.FC<ModelCreateFormModalProps> = ({
modelId,
toolbarSolt,
selectedTransferKeys,
metricList,
dimensionList,
@@ -36,6 +38,9 @@ const DimensionMetricTransferModal: React.FC<ModelCreateFormModalProps> = ({
};
useEffect(() => {
if (!dimensionList || !metricList) {
return;
}
const sourceDimensionList = dimensionList.reduce((mergeList: any[], item) => {
mergeList.push(addItemKey(item, TransType.DIMENSION));
return mergeList;
@@ -84,7 +89,7 @@ const DimensionMetricTransferModal: React.FC<ModelCreateFormModalProps> = ({
return (
<DimensionMetricVisibleTransfer
titles={['未关联维度/指标', '已关联维度/指标']}
titles={[<>{toolbarSolt}</>, '已加入维度/指标']}
listStyle={{
width: 520,
height: 600,
@@ -94,26 +99,27 @@ const DimensionMetricTransferModal: React.FC<ModelCreateFormModalProps> = ({
onChange={(newTargetKeys: string[]) => {
const removeDimensionList: ISemantic.IDimensionItem[] = [];
const removeMetricList: ISemantic.IMetricItem[] = [];
const dimensionItemChangeList = dimensionList.reduce(
(dimensionChangeList: any[], item: any) => {
if (newTargetKeys.includes(wrapperTransTypeAndId(TransType.DIMENSION, item.id))) {
dimensionChangeList.push(item);
} else {
removeDimensionList.push(item.id);
}
return dimensionChangeList;
},
[],
);
const dimensionItemChangeList = Array.isArray(dimensionList)
? dimensionList.reduce((dimensionChangeList: any[], item: any) => {
if (newTargetKeys.includes(wrapperTransTypeAndId(TransType.DIMENSION, item.id))) {
dimensionChangeList.push(item);
} else {
removeDimensionList.push(item.id);
}
return dimensionChangeList;
}, [])
: [];
const metricItemChangeList = metricList.reduce((metricChangeList: any[], item: any) => {
if (newTargetKeys.includes(wrapperTransTypeAndId(TransType.METRIC, item.id))) {
metricChangeList.push(item);
} else {
removeMetricList.push(item.id);
}
return metricChangeList;
}, []);
const metricItemChangeList = Array.isArray(metricList)
? metricList.reduce((metricChangeList: any[], item: any) => {
if (newTargetKeys.includes(wrapperTransTypeAndId(TransType.METRIC, item.id))) {
metricChangeList.push(item);
} else {
removeMetricList.push(item.id);
}
return metricChangeList;
}, [])
: [];
setSelectedItemList([...dimensionItemChangeList, ...metricItemChangeList]);

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

@@ -1,773 +0,0 @@
import React, { useEffect, useRef, useState } from 'react';
import {
Form,
Button,
Modal,
Steps,
Input,
Select,
Radio,
Switch,
InputNumber,
message,
Result,
Row,
Col,
Space,
Tooltip,
Tag,
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import MetricMeasuresFormTable from './MetricMeasuresFormTable';
import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE } from '../constant';
import { formLayout } from '@/components/FormHelper/utils';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import styles from './style.less';
import { getMetricsToCreateNewMetric, getModelDetail, getDrillDownDimension } from '../service';
import MetricMetricFormTable from './MetricMetricFormTable';
import MetricFieldFormTable from './MetricFieldFormTable';
import DimensionAndMetricRelationModal from './DimensionAndMetricRelationModal';
import TableTitleTooltips from '../components/TableTitleTooltips';
import { createMetric, updateMetric, mockMetricAlias, getMetricTags } from '../service';
import { ISemantic } from '../data';
import { history } from 'umi';
export type CreateFormProps = {
datasourceId?: number;
domainId: number;
modelId: number;
createModalVisible: boolean;
metricItem: any;
onCancel?: () => void;
onSubmit?: (values: any) => void;
};
const { Step } = Steps;
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,
domainId,
modelId,
onCancel,
createModalVisible,
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<string[]>([]);
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 getMeasureListByModelId(modelId);
const { code, data } = await getModelDetail({ modelId: modelId || metricItem?.modelId });
if (code === 200) {
if (Array.isArray(data?.modelDetail?.fields)) {
setFieldList(data.modelDetail.fields);
}
if (Array.isArray(data?.modelDetail?.measures)) {
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 handleNext = async () => {
const fieldsValue = await form.validateFields();
const submitForm = {
...formValRef.current,
...fieldsValue,
metricDefineType: defineType,
[queryParamsTypeParamsKey[defineType]]: exprTypeParamsState[defineType],
};
updateFormVal(submitForm);
if (currentStep < 1) {
forward();
} else {
await saveMetric(submitForm);
}
};
const initData = () => {
const {
id,
name,
bizName,
description,
sensitiveLevel,
typeParams,
dataFormat,
dataFormatType,
alias,
tags,
metricDefineType,
metricDefineByMeasureParams,
metricDefineByMetricParams,
metricDefineByFieldParams,
} = metricItem;
const isPercent = dataFormatType === 'percent';
const isDecimal = dataFormatType === 'decimal';
const initValue = {
id,
name,
bizName,
sensitiveLevel,
description,
tags,
// 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 } = await saveMetricQuery(queryParams);
if (code === 200) {
message.success('编辑指标成功');
onSubmit?.(queryParams);
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) {
// form.setFieldValue('alias', Array.from(new Set([...formAlias, ...data])));
setTagOptions(
Array.isArray(data)
? data.map((tag: string) => {
return { label: tag, value: tag };
})
: [],
);
} else {
message.error('获取指标标签失败');
}
};
const queryMetricsToCreateNewMetric = async () => {
const { code, data } = await getMetricsToCreateNewMetric({
modelId: modelId || metricItem?.modelId,
});
if (code === 200) {
setCreateNewMetricList(data);
} else {
message.error('获取指标标签失败');
}
};
const renderContent = () => {
if (currentStep === 1) {
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[]) => {
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>
和
<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>
);
}
return (
<>
<FormItem hidden={true} name="id" label="ID">
<Input placeholder="id" />
</FormItem>
<FormItem
name="name"
label="指标名称"
rules={[{ required: true, message: '请输入指标名称' }]}
>
<Input placeholder="名称不可重复" />
</FormItem>
<FormItem
name="bizName"
label="英文名称"
rules={[{ required: true, message: '请输入英文名称' }]}
>
<Input placeholder="名称不可重复" disabled={isEdit} />
</FormItem>
<FormItem label="别名">
<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"
loading={llmLoading}
size="small"
style={{ top: '2px' }}
onClick={() => {
generatorMetricAlias();
}}
>
<Space>
智能填充
<Tooltip title="智能填充将根据指标相关信息，使用大语言模型获取指标别名">
<InfoCircleOutlined />
</Tooltip>
</Space>
</Button>
</Col>
)}
</Row>
</FormItem>
<FormItem name="tags" label="标签">
<Select
mode="tags"
placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
tokenSeparators={[',']}
maxTagCount={9}
options={tagOptions}
/>
</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="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="请输入业务口径" />
</FormItem>
<FormItem
label={
<FormItemTitle
title={'下钻维度配置'}
subTitle={'配置下钻维度后，将可以在指标卡中进行下钻'}
/>
}
>
<Button
type="primary"
onClick={() => {
setMetricRelationModalOpenState(true);
}}
>
设 置
</Button>
</FormItem>
<FormItem
label={
<FormItemTitle
title={'数据格式化'}
// subTitle={'开启后，指标数据展示时会根据配置进行格式化，如0.02 -> 2%'}
/>
}
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={handleNext}>
完成
</Button>
</>
);
}
return (
<>
<Button onClick={onCancel}>取消</Button>
<Button type="primary" onClick={handleNext}>
下一步
</Button>
</>
);
};
return (
<Modal
forceRender
width={800}
style={{ top: 48 }}
// styles={{ padding: '32px 40px 48px' }}
destroyOnClose
title={`${isEdit ? '编辑' : '新建'}指标`}
maskClosable={false}
open={createModalVisible}
footer={renderFooter()}
onCancel={onCancel}
>
{hasMeasuresState ? (
<>
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
<Step title="基本信息" />
<Step title="度量信息" />
</Steps>
<Form
{...formLayout}
form={form}
initialValues={{
...formValRef.current,
dataFormatType: '',
}}
onValuesChange={(value, values: any) => {
const { isPercent, dataFormatType } = values;
// if (isPercent !== undefined) {
// setIsPercentState(isPercent);
// }
if (dataFormatType === 'percent') {
setIsPercentState(true);
setIsDecimalState(false);
}
if (dataFormatType === 'decimal') {
setIsPercentState(false);
setIsDecimalState(true);
}
if (!dataFormatType) {
setIsPercentState(false);
setIsDecimalState(false);
}
}}
className={styles.form}
>
{renderContent()}
</Form>
<DimensionAndMetricRelationModal
metricItem={metricItem}
relationsInitialValue={drillDownDimensionsConfig}
open={metricRelationModalOpenState}
onCancel={() => {
setMetricRelationModalOpenState(false);
}}
onSubmit={(relations) => {
setDrillDownDimensions(relations);
setMetricRelationModalOpenState(false);
}}
onRefreshRelationData={() => {
queryDrillDownDimension(metricItem?.id);
}}
/>
</>
) : (
<Result
status="warning"
subTitle="当前数据源缺少度量，无法创建指标。请前往数据源配置中，将字段设置为度量"
extra={
<Button
type="primary"
key="console"
onClick={() => {
history.replace(`/model/${domainId}/${modelId || metricItem?.modelId}/dataSource`);
onCancel?.();
}}
>
去创建
</Button>
}
/>
)}
</Modal>
);
};
export default MetricInfoCreateForm;

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

@@ -1,13 +1,19 @@
import React, { useState, useEffect, useRef } from 'react';
import { Form, Button, Modal, Input, Select, Steps } from 'antd';
import { Form, Button, Modal, Input, Select, Steps, Tabs, Space } from 'antd';
import styles from '../../components/style.less';
import { message } from 'antd';
import { formLayout } from '@/components/FormHelper/utils';
import { createView, updateView } from '../../service';
import { createView, updateView, getDimensionList, queryMetric } from '../../service';
import { ISemantic } from '../../data';
import { isString } from 'lodash';
import ViewModelConfigTable from './ViewModelConfigTable';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import SelectPartner from '@/components/SelectPartner';
import SelectTMEPerson from '@/components/SelectTMEPerson';
import ViewModelConfigTransfer from './ViewModelConfigTransfer';
import DefaultSettingForm from './DefaultSettingForm';
import SqlEditor from '@/components/SqlEditor';
import ProCard from '@ant-design/pro-card';
import { ChatConfigType } from '../../enum';
const FormItem = Form.Item;
@@ -33,7 +39,6 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
currentModel: modelList[0]?.id,
});
const [submitData, setSubmitData] = useState({});
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [modalWidth, setModalWidth] = useState<number>(800);
const [selectedModelItem, setSelectedModelItem] = useState<ISemantic.IModelItem | undefined>(
@@ -48,13 +53,41 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
});
}, [viewItem]);
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) => {
const { code, data, msg } = await getDimensionList({ modelId });
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
} else {
message.error(msg);
}
};
const queryMetricList = async (modelId) => {
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,
...submitData,
viewDetail: {
viewModelConfigs: Object.values(viewModelConfigsMap),
},
@@ -71,36 +104,24 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
}
};
const footer = (
<>
<Button onClick={onCancel}>取消</Button>
<Button type="primary" loading={saveLoading} onClick={handleConfirm}>
确定
</Button>
</>
);
const stepWidth = {
'0': 800,
'1': 1200,
'2': 800,
};
const forward = () => {
setModalWidth(1200);
setModalWidth(stepWidth[`${currentStep + 1}`]);
setCurrentStep(currentStep + 1);
};
const backward = () => {
setModalWidth(800);
setModalWidth(stepWidth[`${currentStep - 1}`]);
setCurrentStep(currentStep - 1);
};
const handleNext = async () => {
const fieldsValue = await form.validateFields();
const submitForm = {
...submitData,
...fieldsValue,
};
setSubmitData(submitForm);
if (currentStep < 1) {
forward();
} else {
// await saveMetric(submitForm);
}
await form.validateFields();
forward();
};
const renderFooter = () => {
@@ -110,34 +131,60 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
<Button style={{ float: 'left' }} onClick={backward}>
上一步
</Button>
<Button onClick={onCancel}>取消</Button>
{/* <Button type="primary" onClick={handleNext}> */}
<Button type="primary" onClick={handleNext}>
下一步
</Button>
<Button
type="primary"
onClick={() => {
handleConfirm();
}}
>
完成
保 存
</Button>
</>
);
}
// if (currentStep === 2) {
// return (
// <>
// <Button style={{ float: 'left' }} onClick={backward}>
// 上一步
// </Button>
// <Button
// type="primary"
// onClick={() => {
// handleConfirm();
// }}
// >
// 保 存
// </Button>
// </>
// );
// }
return (
<>
<Button onClick={onCancel}>取消</Button>
<Button type="primary" onClick={handleNext}>
下一步
</Button>
<Button
type="primary"
onClick={() => {
handleConfirm();
}}
>
保 存
</Button>
</>
);
};
const renderContent = () => {
if (currentStep === 1) {
return (
<div>
<FormItem
return (
<>
<div style={{ display: currentStep === 1 ? 'block' : 'none' }}>
{/* <FormItem
name="currentModel"
label="选择模型"
rules={[{ required: true, message: '请选择模型！' }]}
@@ -152,54 +199,156 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
return { label: item.name, value: item.id };
})}
/>
</FormItem>
</FormItem> */}
<ViewModelConfigTransfer
toolbarSolt={
<Space>
<span>切换模型: </span>
<Select
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={viewItem}
ref={configTableRef}
/>
</div>
);
}
return (
<>
<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) => {
return Array.isArray(value) ? value.join(',') : '';
}}
getValueProps={(value) => {
return {
value: isString(value) ? value.split(',') : [],
};
}}
>
<Select
mode="tags"
placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
tokenSeparators={[',']}
maxTagCount={9}
<div style={{ display: currentStep === 2 ? 'block' : 'none' }}>
<Tabs
items={[
// {
// label: 'SQL过滤',
// key: 'sqlFilter',
// children: (
// <>
// <FormItem
// name="filterSql"
// label={<span style={{ fontSize: 14 }}>SQL</span>}
// tooltip="主要用于词典导入场景, 对维度值进行过滤 格式: field1 = 'xxx' and field2 = 'yyy'"
// >
// <SqlEditor height={'150px'} />
// </FormItem>
// </>
// ),
// },
{
label: '权限设置',
key: 'permissionSetting',
children: (
<>
<FormItem
name="admins"
label={
<FormItemTitle
title={'管理员'}
subTitle={'管理员将拥有主题域下所有编辑及访问权限'}
/>
}
>
<SelectTMEPerson placeholder="请邀请团队成员" />
</FormItem>
<FormItem name="adminOrgs" label="按组织">
<SelectPartner
type="selectedDepartment"
treeSelectProps={{
placeholder: '请选择需要授权的部门',
}}
/>
</FormItem>
{/* <FormItem
style={{ marginTop: 40, marginBottom: 60 }}
name="filterSql"
label={<span style={{ fontSize: 14 }}>过滤SQL</span>}
tooltip="主要用于词典导入场景, 对维度值进行过滤 格式: field1 = 'xxx' and field2 = 'yyy'"
>
<SqlEditor height={'150px'} />
</FormItem> */}
</>
),
},
{
label: '问答设置',
key: 'chatSetting',
children: (
<>
<ProCard bordered title="指标模式" style={{ marginBottom: 20 }}>
<DefaultSettingForm
form={form}
dimensionList={dimensionList}
metricList={metricList}
chatConfigType={ChatConfigType.METRIC}
/>
</ProCard>
<ProCard bordered title="标签模式" style={{ marginBottom: 20 }}>
<DefaultSettingForm
form={form}
dimensionList={dimensionList}
metricList={metricList}
chatConfigType={ChatConfigType.TAG}
/>
</ProCard>
</>
),
},
]}
/>
</FormItem>
<FormItem name="description" label="视图描述">
<Input.TextArea placeholder="视图描述" />
</FormItem>
</div>
<div style={{ display: currentStep === 0 ? '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) => {
return Array.isArray(value) ? value.join(',') : '';
}}
getValueProps={(value) => {
return {
value: isString(value) ? value.split(',') : [],
};
}}
>
<Select
mode="tags"
placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
tokenSeparators={[',']}
maxTagCount={9}
/>
</FormItem>
<FormItem name="admins" label={<FormItemTitle title={'责任人'} />}>
<SelectTMEPerson placeholder="请邀请团队成员" />
</FormItem>
<FormItem name="description" label="视图描述">
<Input.TextArea placeholder="视图描述" />
</FormItem>
</div>
</>
);
};
@@ -210,13 +359,14 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
destroyOnClose
title={'视图信息'}
open={true}
// footer={footer}
maskClosable={false}
footer={renderFooter()}
onCancel={onCancel}
>
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
<Step title="基本信息" />
<Step title="关联信息" />
{/* <Step title="进阶设置" /> */}
</Steps>
<Form
{...formLayout}

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

@@ -1,30 +1,28 @@
import { message } from 'antd';
// import { InfoCircleOutlined } from '@ant-design/icons';
import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import type { Ref } from 'react';
import type { ReactNode, Ref } from 'react';
import DimensionMetricTransferModal from './DimensionMetricTransferModal';
// import styles from '../../components/style.less';
import { TransType } from '../../enum';
import { getDimensionList, queryMetric } from '../../service';
import { wrapperTransTypeAndId } from '../../components/Entity/utils';
import { wrapperTransTypeAndId } from '../../utils';
import { ISemantic } from '../../data';
import { isArrayOfValues } from '@/utils/utils';
type Props = {
// modelList: ISemantic.IModelItem[];
viewItem: ISemantic.IViewItem;
modelItem?: ISemantic.IModelItem;
[key: string]: any;
dimensionList?: ISemantic.IDimensionItem[];
metricList?: ISemantic.IMetricItem[];
toolbarSolt?: ReactNode;
};
const ViewModelConfigTransfer: React.FC<Props> = forwardRef(
({ viewItem, modelItem }: Props, ref: Ref<any>) => {
// const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
({ viewItem, modelItem, dimensionList, metricList, toolbarSolt }: Props, ref: Ref<any>) => {
const [selectedTransferKeys, setSelectedTransferKeys] = useState<React.Key[]>([]);
const [viewModelConfigsMap, setViewModelConfigsMap] = useState({});
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>([]);
const [mergeDimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>();
const [mergeMetricList, setMetricList] = useState<ISemantic.IMetricItem[]>();
useImperativeHandle(ref, () => ({
getViewModelConfigs: () => {
@@ -34,44 +32,24 @@ const ViewModelConfigTransfer: React.FC<Props> = forwardRef(
const queryDimensionListByIds = async (ids: number[]) => {
if (!isArrayOfValues(ids)) {
queryDimensionList([]);
setDimensionList(dimensionList);
return;
}
const { code, data, msg } = await getDimensionList({ ids });
if (code === 200 && Array.isArray(data?.list)) {
queryDimensionList(data.list);
} else {
message.error(msg);
}
};
const queryMetricListByIds = async (ids: number[]) => {
if (!isArrayOfValues(ids)) {
queryMetricList([]);
return;
}
const { code, data, msg } = await queryMetric({ ids });
if (code === 200 && Array.isArray(data?.list)) {
queryMetricList(data.list);
} else {
message.error(msg);
}
};
const queryDimensionList = async (selectedDimensionList: ISemantic.IDimensionItem[]) => {
const { code, data, msg } = await getDimensionList({ modelId: modelItem?.id });
if (code === 200 && Array.isArray(data?.list)) {
const mergeList = selectedDimensionList.reduce(
const mergeList = data?.list.reduce(
(modelDimensionList: ISemantic.IDimensionItem[], item) => {
const hasItem = data.list.find((dataListItem: ISemantic.IDimensionItem) => {
return dataListItem.id === item.id;
});
const hasItem = Array.isArray(dimensionList)
? dimensionList.find((dataListItem: ISemantic.IDimensionItem) => {
return dataListItem.id === item.id;
})
: [];
if (!hasItem) {
return [item, ...modelDimensionList];
}
return modelDimensionList;
},
data.list,
dimensionList,
);
setDimensionList(mergeList);
} else {
@@ -79,21 +57,24 @@ const ViewModelConfigTransfer: React.FC<Props> = forwardRef(
}
};
const queryMetricList = async (selectedMetricList: ISemantic.IMetricItem[]) => {
const { code, data, msg } = await queryMetric({ modelId: modelItem?.id });
const queryMetricListByIds = async (ids: number[]) => {
if (!isArrayOfValues(ids)) {
setMetricList(metricList);
return;
}
const { code, data, msg } = await queryMetric({ ids });
if (code === 200 && Array.isArray(data?.list)) {
const mergeList = selectedMetricList.reduce(
(modelMetricList: ISemantic.IMetricItem[], item) => {
const hasItem = data.list.find((dataListItem: ISemantic.IMetricItem) => {
return dataListItem.id === item.id;
});
if (!hasItem) {
return [item, ...modelMetricList];
}
return modelMetricList;
},
data.list,
);
const mergeList = data.list.reduce((modelMetricList: ISemantic.IMetricItem[], item) => {
const hasItem = Array.isArray(metricList)
? metricList.find((dataListItem: ISemantic.IMetricItem) => {
return dataListItem.id === item.id;
})
: [];
if (!hasItem) {
return [item, ...modelMetricList];
}
return modelMetricList;
}, metricList);
setMetricList(mergeList);
} else {
message.error(msg);
@@ -126,12 +107,14 @@ const ViewModelConfigTransfer: React.FC<Props> = forwardRef(
}
});
setSelectedTransferKeys(transferKeys);
// setSelectedRowKeys(idList);
setViewModelConfigsMap(viewConfigMap);
}
}, []);
useEffect(() => {
if (!dimensionList || !metricList) {
return;
}
const viewModelConfigs = isArrayOfValues(Object.values(viewModelConfigsMap))
? (Object.values(viewModelConfigsMap) as ISemantic.IViewModelConfigItem[])
: viewItem?.viewDetail?.viewModelConfigs;
@@ -146,17 +129,18 @@ const ViewModelConfigTransfer: React.FC<Props> = forwardRef(
queryDimensionListByIds(allDimensions);
queryMetricListByIds(allMetrics);
} else {
queryDimensionList([]);
queryMetricList([]);
setDimensionList(dimensionList);
setMetricList(metricList);
}
}, [modelItem]);
}, [modelItem, dimensionList, metricList]);
return (
<>
<DimensionMetricTransferModal
toolbarSolt={toolbarSolt}
modelId={modelItem?.id}
dimensionList={dimensionList}
metricList={metricList}
dimensionList={mergeDimensionList}
metricList={mergeMetricList}
selectedTransferKeys={selectedTransferKeys}
onSubmit={(
submitData: Record<string, ISemantic.IViewModelConfigItem>,

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

@@ -0,0 +1,161 @@
import React, { useState, useEffect, useRef } from 'react';
import { Form, Button, Modal, Input } from 'antd';
import styles from '../style.less';
import { message } from 'antd';
import { formLayout } from '@/components/FormHelper/utils';
import { createView, updateView, getDimensionList, queryMetric } from '../../service';
import { ISemantic } from '../../data';
import DefaultSettingForm from './DefaultSettingForm';
import { isArrayOfValues } from '@/utils/utils';
import ProCard from '@ant-design/pro-card';
import { ChatConfigType } from '../../enum';
export type ModelCreateFormModalProps = {
domainId: number;
viewItem: any;
modelList: ISemantic.IModelItem[];
onCancel: () => void;
onSubmit: (values: any) => void;
};
const ViewSearchFormModal: React.FC<ModelCreateFormModalProps> = ({
viewItem,
domainId,
onCancel,
onSubmit,
}) => {
const FormItem = Form.Item;
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [form] = Form.useForm();
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>();
const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>();
useEffect(() => {
const viewModelConfigs = viewItem?.viewDetail?.viewModelConfigs;
if (Array.isArray(viewModelConfigs)) {
const allMetrics: number[] = [];
const allDimensions: number[] = [];
viewModelConfigs.forEach((item: ISemantic.IViewModelConfigItem) => {
const { metrics, dimensions } = item;
allMetrics.push(...metrics);
allDimensions.push(...dimensions);
});
queryDimensionListByIds(allDimensions);
queryMetricListByIds(allMetrics);
}
}, [viewItem]);
const queryDimensionListByIds = async (ids: number[]) => {
if (!isArrayOfValues(ids)) {
setDimensionList([]);
return;
}
const { code, data, msg } = await getDimensionList({ ids });
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
} else {
message.error(msg);
}
};
const queryMetricListByIds = async (ids: number[]) => {
if (!isArrayOfValues(ids)) {
setMetricList([]);
return;
}
const { code, data, msg } = await queryMetric({ ids });
if (code === 200 && Array.isArray(data?.list)) {
setMetricList(data.list);
} else {
message.error(msg);
}
};
const handleConfirm = async () => {
const fieldsValue = await form.validateFields();
const queryData: ISemantic.IModelItem = {
...viewItem,
...fieldsValue,
domainId,
};
setSaveLoading(true);
const { code, msg } = await (!queryData.id ? createView : updateView)(queryData);
setSaveLoading(false);
if (code === 200) {
onSubmit?.(queryData);
} else {
message.error(msg);
}
};
const renderFooter = () => {
return (
<>
<Button onClick={onCancel}>取消</Button>
<Button
type="primary"
onClick={() => {
handleConfirm();
}}
>
保 存
</Button>
</>
);
};
const renderContent = () => {
return (
<div className={styles.viewSearchFormContainer}>
<ProCard title="指标模式" style={{ marginBottom: 10, borderBottom: '1px solid #eee' }}>
<DefaultSettingForm
form={form}
dimensionList={dimensionList}
metricList={metricList}
chatConfigType={ChatConfigType.METRIC}
/>
</ProCard>
<ProCard title="标签模式">
<DefaultSettingForm
form={form}
dimensionList={dimensionList}
metricList={metricList}
chatConfigType={ChatConfigType.TAG}
/>
</ProCard>
</div>
);
};
return (
<Modal
width={800}
destroyOnClose
title={'视图信息'}
open={true}
maskClosable={false}
footer={renderFooter()}
onCancel={onCancel}
>
<Form
{...formLayout}
form={form}
initialValues={{
...viewItem,
}}
onValuesChange={(value, values) => {}}
>
<FormItem hidden={true} name="id" label="ID">
<Input placeholder="id" />
</FormItem>
{renderContent()}
</Form>
</Modal>
);
};
export default ViewSearchFormModal;

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

@@ -12,6 +12,7 @@ import moment from 'moment';
import styles from '../../components/style.less';
import { ISemantic } from '../../data';
import { ColumnsConfig } from '../../components/MetricTableColumnRender';
import ViewSearchFormModal from './ViewSearchFormModal';
type Props = {
disabledEdit?: boolean;
@@ -26,6 +27,7 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);
const [searchModalOpen, setSearchModalOpen] = useState(false);
const actionRef = useRef<ActionType>();
const updateViewStatus = async (modelData: ISemantic.IViewItem) => {
@@ -69,9 +71,6 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
dataIndex: 'name',
title: '视图名称',
search: false,
// render: (_, record) => {
// return <a>{_}</a>;
// },
},
{
dataIndex: 'alias',
@@ -116,7 +115,7 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
title: '操作',
dataIndex: 'x',
valueType: 'option',
width: 150,
width: 250,
render: (_, record) => {
return (
<Space className={styles.ctrlBtnContainer}>
@@ -129,6 +128,15 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
>
编辑
</a>
<a
key="searchEditBtn"
onClick={() => {
setViewItem(record);
setSearchModalOpen(true);
}}
>
查询设置
</a>
{record.status === StatusEnum.ONLINE ? (
<Button
type="link"
@@ -223,6 +231,21 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
}}
/>
)}
{searchModalOpen && (
<ViewSearchFormModal
domainId={selectDomainId}
viewItem={viewItem}
modelList={modelList}
onSubmit={() => {
queryViewList();
setSearchModalOpen(false);
}}
onCancel={() => {
setSearchModalOpen(false);
}}
/>
)}
</>
);
};

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

@@ -0,0 +1,5 @@
.viewSearchFormContainer {
:global {
}
}