mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-15 06:27:21 +00:00
[improvement][headless-fe] Added view management functionality. (#701)
* [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.
This commit is contained in:
tristanliu
@@ -0,0 +1,165 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import { ISemantic } from '../../data';
|
||||
|
||||
import { TransType } from '../../enum';
|
||||
import DimensionMetricVisibleTransfer from '../../components/Entity/DimensionMetricVisibleTransfer';
|
||||
import { wrapperTransTypeAndId } from '../../components/Entity/utils';
|
||||
|
||||
export type ModelCreateFormModalProps = {
|
||||
dimensionList: ISemantic.IDimensionItem[];
|
||||
metricList: ISemantic.IMetricItem[];
|
||||
modelId?: number;
|
||||
selectedTransferKeys: React.Key[];
|
||||
onCancel: () => void;
|
||||
onSubmit: (values: any, selectedKeys: React.Key[]) => void;
|
||||
};
|
||||
|
||||
const DimensionMetricTransferModal: React.FC<ModelCreateFormModalProps> = ({
|
||||
modelId,
|
||||
selectedTransferKeys,
|
||||
metricList,
|
||||
dimensionList,
|
||||
onSubmit,
|
||||
}) => {
|
||||
const [sourceList, setSourceList] = useState<any[]>([]);
|
||||
const [selectedItemList, setSelectedItemList] = useState<any[]>([]);
|
||||
|
||||
const addItemKey = (item: any, transType: TransType) => {
|
||||
const { id } = item;
|
||||
const key = wrapperTransTypeAndId(transType, id);
|
||||
return {
|
||||
...item,
|
||||
transType,
|
||||
key,
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const sourceDimensionList = dimensionList.reduce((mergeList: any[], item) => {
|
||||
mergeList.push(addItemKey(item, TransType.DIMENSION));
|
||||
return mergeList;
|
||||
}, []);
|
||||
|
||||
const hasDimensionList = selectedItemList
|
||||
.filter((item) => {
|
||||
return item.typeEnum === TransType.DIMENSION;
|
||||
})
|
||||
.reduce((modelDimensionList: ISemantic.IDimensionItem[], item) => {
|
||||
const hasItem = sourceDimensionList.find((dataListItem: ISemantic.IDimensionItem) => {
|
||||
return dataListItem.id === item.id;
|
||||
});
|
||||
if (!hasItem) {
|
||||
modelDimensionList.push(addItemKey(item, TransType.DIMENSION));
|
||||
}
|
||||
return modelDimensionList;
|
||||
}, []);
|
||||
|
||||
const sourceMetricList = metricList.reduce((mergeList: any[], item) => {
|
||||
mergeList.push(addItemKey(item, TransType.METRIC));
|
||||
return mergeList;
|
||||
}, []);
|
||||
|
||||
const hasMetricList = selectedItemList
|
||||
.filter((item) => {
|
||||
return item.typeEnum === TransType.METRIC;
|
||||
})
|
||||
.reduce((modelMetricList: ISemantic.IMetricItem[], item) => {
|
||||
const hasItem = sourceMetricList.find((dataListItem: ISemantic.IMetricItem) => {
|
||||
return dataListItem.id === item.id;
|
||||
});
|
||||
if (!hasItem) {
|
||||
modelMetricList.push(addItemKey(item, TransType.METRIC));
|
||||
}
|
||||
return modelMetricList;
|
||||
}, []);
|
||||
|
||||
setSourceList([
|
||||
...sourceDimensionList,
|
||||
...sourceMetricList,
|
||||
...hasDimensionList,
|
||||
...hasMetricList,
|
||||
]);
|
||||
}, [dimensionList, metricList]);
|
||||
|
||||
return (
|
||||
<DimensionMetricVisibleTransfer
|
||||
titles={['未关联维度/指标', '已关联维度/指标']}
|
||||
listStyle={{
|
||||
width: 520,
|
||||
height: 600,
|
||||
}}
|
||||
targetList={selectedTransferKeys}
|
||||
sourceList={sourceList}
|
||||
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 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;
|
||||
}, []);
|
||||
|
||||
setSelectedItemList([...dimensionItemChangeList, ...metricItemChangeList]);
|
||||
|
||||
// 如果不是当前选中model中的指标或者维度，则先从本地数据中删除，避免后续请求数据更新时产生视觉上的界面闪烁
|
||||
const preUpdateSourceData = sourceList.filter((item) => {
|
||||
const { typeEnum, id } = item;
|
||||
if (typeEnum === TransType.DIMENSION) {
|
||||
if (modelId !== item.modelId && removeDimensionList.includes(id)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (typeEnum === TransType.METRIC) {
|
||||
if (modelId !== item.modelId && removeMetricList.includes(id)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
setSourceList([...preUpdateSourceData]);
|
||||
|
||||
const viewModelConfigs = [...dimensionItemChangeList, ...metricItemChangeList].reduce(
|
||||
(config, item) => {
|
||||
const { modelId, id, typeEnum } = item;
|
||||
if (config[modelId]) {
|
||||
if (typeEnum === TransType.DIMENSION) {
|
||||
config[modelId].dimensions.push(id);
|
||||
}
|
||||
if (typeEnum === TransType.METRIC) {
|
||||
config[modelId].metrics.push(id);
|
||||
}
|
||||
} else {
|
||||
config[modelId] = {
|
||||
id: modelId,
|
||||
metrics: typeEnum === TransType.METRIC ? [id] : [],
|
||||
dimensions: typeEnum === TransType.DIMENSION ? [id] : [],
|
||||
};
|
||||
}
|
||||
return config;
|
||||
},
|
||||
{},
|
||||
);
|
||||
|
||||
onSubmit?.(viewModelConfigs, newTargetKeys);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default DimensionMetricTransferModal;
|
||||
@@ -0,0 +1,773 @@
|
||||
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;
|
||||
@@ -0,0 +1,236 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Form, Button, Modal, Input, Select, Steps } from 'antd';
|
||||
import styles from '../../components/style.less';
|
||||
import { message } from 'antd';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import { createView, updateView } from '../../service';
|
||||
import { ISemantic } from '../../data';
|
||||
import { isString } from 'lodash';
|
||||
import ViewModelConfigTable from './ViewModelConfigTable';
|
||||
import ViewModelConfigTransfer from './ViewModelConfigTransfer';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
export type ModelCreateFormModalProps = {
|
||||
domainId: number;
|
||||
viewItem: any;
|
||||
modelList: ISemantic.IModelItem[];
|
||||
onCancel: () => void;
|
||||
onSubmit: (values: any) => void;
|
||||
};
|
||||
const { Step } = Steps;
|
||||
const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
|
||||
viewItem,
|
||||
domainId,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
modelList,
|
||||
}) => {
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
|
||||
const [formVals, setFormVals] = useState<ISemantic.IModelItem>({
|
||||
...viewItem,
|
||||
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>(
|
||||
modelList[0],
|
||||
);
|
||||
const [form] = Form.useForm();
|
||||
const configTableRef = useRef<any>();
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
...viewItem,
|
||||
});
|
||||
}, [viewItem]);
|
||||
|
||||
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),
|
||||
},
|
||||
domainId,
|
||||
};
|
||||
setFormVals(queryData);
|
||||
setSaveLoading(true);
|
||||
const { code, msg } = await (!queryData.id ? createView : updateView)(queryData);
|
||||
setSaveLoading(false);
|
||||
if (code === 200) {
|
||||
onSubmit?.(queryData);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const footer = (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" loading={saveLoading} onClick={handleConfirm}>
|
||||
确定
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
const forward = () => {
|
||||
setModalWidth(1200);
|
||||
setCurrentStep(currentStep + 1);
|
||||
};
|
||||
const backward = () => {
|
||||
setModalWidth(800);
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
const renderFooter = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<>
|
||||
<Button style={{ float: 'left' }} onClick={backward}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
{/* <Button type="primary" onClick={handleNext}> */}
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
handleConfirm();
|
||||
}}
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" onClick={handleNext}>
|
||||
下一步
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<div>
|
||||
<FormItem
|
||||
name="currentModel"
|
||||
label="选择模型"
|
||||
rules={[{ required: true, message: '请选择模型！' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择模型，获取当前模型下指标维度信息"
|
||||
onChange={(val) => {
|
||||
const modelItem = modelList.find((item) => item.id === val);
|
||||
setSelectedModelItem(modelItem);
|
||||
}}
|
||||
options={modelList.map((item) => {
|
||||
return { label: item.name, value: item.id };
|
||||
})}
|
||||
/>
|
||||
</FormItem>
|
||||
<ViewModelConfigTransfer
|
||||
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}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="description" label="视图描述">
|
||||
<Input.TextArea placeholder="视图描述" />
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={modalWidth}
|
||||
destroyOnClose
|
||||
title={'视图信息'}
|
||||
open={true}
|
||||
// footer={footer}
|
||||
footer={renderFooter()}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
|
||||
<Step title="基本信息" />
|
||||
<Step title="关联信息" />
|
||||
</Steps>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
initialValues={{
|
||||
...formVals,
|
||||
}}
|
||||
onValuesChange={(value, values) => {}}
|
||||
className={styles.form}
|
||||
>
|
||||
{renderContent()}
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewCreateFormModal;
|
||||
@@ -0,0 +1,188 @@
|
||||
import { message } from 'antd';
|
||||
// import { InfoCircleOutlined } from '@ant-design/icons';
|
||||
import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
|
||||
import type { 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 { ISemantic } from '../../data';
|
||||
import { isArrayOfValues } from '@/utils/utils';
|
||||
|
||||
type Props = {
|
||||
// modelList: ISemantic.IModelItem[];
|
||||
viewItem: ISemantic.IViewItem;
|
||||
modelItem?: ISemantic.IModelItem;
|
||||
[key: string]: any;
|
||||
};
|
||||
const ViewModelConfigTransfer: React.FC<Props> = forwardRef(
|
||||
({ viewItem, modelItem }: Props, ref: Ref<any>) => {
|
||||
// const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||
const [selectedTransferKeys, setSelectedTransferKeys] = useState<React.Key[]>([]);
|
||||
|
||||
const [viewModelConfigsMap, setViewModelConfigsMap] = useState({});
|
||||
|
||||
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
|
||||
const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>([]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getViewModelConfigs: () => {
|
||||
return viewModelConfigsMap;
|
||||
},
|
||||
}));
|
||||
|
||||
const queryDimensionListByIds = async (ids: number[]) => {
|
||||
if (!isArrayOfValues(ids)) {
|
||||
queryDimensionList([]);
|
||||
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(
|
||||
(modelDimensionList: ISemantic.IDimensionItem[], item) => {
|
||||
const hasItem = data.list.find((dataListItem: ISemantic.IDimensionItem) => {
|
||||
return dataListItem.id === item.id;
|
||||
});
|
||||
if (!hasItem) {
|
||||
return [item, ...modelDimensionList];
|
||||
}
|
||||
return modelDimensionList;
|
||||
},
|
||||
data.list,
|
||||
);
|
||||
setDimensionList(mergeList);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const queryMetricList = async (selectedMetricList: ISemantic.IMetricItem[]) => {
|
||||
const { code, data, msg } = await queryMetric({ modelId: modelItem?.id });
|
||||
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,
|
||||
);
|
||||
setMetricList(mergeList);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const viewModelConfigs = viewItem?.viewDetail?.viewModelConfigs;
|
||||
if (Array.isArray(viewModelConfigs)) {
|
||||
const idList: number[] = [];
|
||||
const transferKeys: React.Key[] = [];
|
||||
const viewConfigMap = {};
|
||||
const allMetrics: number[] = [];
|
||||
const allDimensions: number[] = [];
|
||||
viewModelConfigs.forEach((item: ISemantic.IViewModelConfigItem) => {
|
||||
const { id, metrics, dimensions } = item;
|
||||
idList.push(id);
|
||||
allMetrics.push(...metrics);
|
||||
allDimensions.push(...dimensions);
|
||||
viewConfigMap[id] = { ...item };
|
||||
if (Array.isArray(metrics)) {
|
||||
metrics.forEach((metricId: number) => {
|
||||
transferKeys.push(wrapperTransTypeAndId(TransType.METRIC, metricId));
|
||||
});
|
||||
}
|
||||
if (Array.isArray(dimensions)) {
|
||||
dimensions.forEach((dimensionId: number) => {
|
||||
transferKeys.push(wrapperTransTypeAndId(TransType.DIMENSION, dimensionId));
|
||||
});
|
||||
}
|
||||
});
|
||||
setSelectedTransferKeys(transferKeys);
|
||||
// setSelectedRowKeys(idList);
|
||||
setViewModelConfigsMap(viewConfigMap);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const viewModelConfigs = isArrayOfValues(Object.values(viewModelConfigsMap))
|
||||
? (Object.values(viewModelConfigsMap) as ISemantic.IViewModelConfigItem[])
|
||||
: viewItem?.viewDetail?.viewModelConfigs;
|
||||
if (isArrayOfValues(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);
|
||||
} else {
|
||||
queryDimensionList([]);
|
||||
queryMetricList([]);
|
||||
}
|
||||
}, [modelItem]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DimensionMetricTransferModal
|
||||
modelId={modelItem?.id}
|
||||
dimensionList={dimensionList}
|
||||
metricList={metricList}
|
||||
selectedTransferKeys={selectedTransferKeys}
|
||||
onSubmit={(
|
||||
submitData: Record<string, ISemantic.IViewModelConfigItem>,
|
||||
selectedKeys: React.Key[],
|
||||
) => {
|
||||
const viewModelConfigs = Object.values(submitData) as ISemantic.IViewModelConfigItem[];
|
||||
|
||||
if (isArrayOfValues(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);
|
||||
}
|
||||
setViewModelConfigsMap(submitData);
|
||||
setSelectedTransferKeys(selectedKeys);
|
||||
}}
|
||||
onCancel={() => {}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default ViewModelConfigTransfer;
|
||||
@@ -0,0 +1,231 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { message, Button, Space, Popconfirm, Input, Tag } from 'antd';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { StatusEnum } from '../../enum';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import { deleteView, updateView, getViewList } from '../../service';
|
||||
import ViewCreateFormModal from './ViewCreateFormModal';
|
||||
import moment from 'moment';
|
||||
import styles from '../../components/style.less';
|
||||
import { ISemantic } from '../../data';
|
||||
import { ColumnsConfig } from '../../components/MetricTableColumnRender';
|
||||
|
||||
type Props = {
|
||||
disabledEdit?: boolean;
|
||||
modelList: ISemantic.IModelItem[];
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainManger }) => {
|
||||
const { selectDomainId } = domainManger;
|
||||
const [viewItem, setViewItem] = useState<ISemantic.IViewItem>();
|
||||
const [saveLoading, setSaveLoading] = useState<boolean>(false);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const updateViewStatus = async (modelData: ISemantic.IViewItem) => {
|
||||
setSaveLoading(true);
|
||||
const { code, msg } = await updateView({
|
||||
...modelData,
|
||||
});
|
||||
setSaveLoading(false);
|
||||
if (code === 200) {
|
||||
queryViewList();
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const [viewList, setViewList] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
queryViewList();
|
||||
}, []);
|
||||
|
||||
const queryViewList = async () => {
|
||||
setLoading(true);
|
||||
const { code, data, msg } = await getViewList(selectDomainId);
|
||||
setLoading(false);
|
||||
if (code === 200) {
|
||||
setViewList(data);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
title: 'ID',
|
||||
width: 80,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '视图名称',
|
||||
search: false,
|
||||
// render: (_, record) => {
|
||||
// return <a>{_}</a>;
|
||||
// },
|
||||
},
|
||||
{
|
||||
dataIndex: 'alias',
|
||||
title: '别名',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'bizName',
|
||||
title: '英文名称',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'status',
|
||||
title: '状态',
|
||||
search: false,
|
||||
render: ColumnsConfig.state.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
title: '创建人',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'updatedAt',
|
||||
title: '更新时间',
|
||||
search: false,
|
||||
render: (value: any) => {
|
||||
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
if (!disabledEdit) {
|
||||
columns.push({
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
width: 150,
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<Space className={styles.ctrlBtnContainer}>
|
||||
<a
|
||||
key="metricEditBtn"
|
||||
onClick={() => {
|
||||
setViewItem(record);
|
||||
setCreateDataSourceModalOpen(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
{record.status === StatusEnum.ONLINE ? (
|
||||
<Button
|
||||
type="link"
|
||||
key="editStatusOfflineBtn"
|
||||
onClick={() => {
|
||||
updateViewStatus({
|
||||
...record,
|
||||
status: StatusEnum.OFFLINE,
|
||||
});
|
||||
}}
|
||||
>
|
||||
停用
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="link"
|
||||
key="editStatusOnlineBtn"
|
||||
onClick={() => {
|
||||
updateViewStatus({
|
||||
...record,
|
||||
status: StatusEnum.ONLINE,
|
||||
});
|
||||
}}
|
||||
>
|
||||
启用
|
||||
</Button>
|
||||
)}
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={async () => {
|
||||
const { code, msg } = await deleteView(record.id);
|
||||
if (code === 200) {
|
||||
queryViewList();
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<a key="modelDeleteBtn">删除</a>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable
|
||||
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
dataSource={viewList}
|
||||
tableAlertRender={() => {
|
||||
return false;
|
||||
}}
|
||||
size="small"
|
||||
options={{ reload: false, density: false, fullScreen: false }}
|
||||
toolBarRender={() =>
|
||||
disabledEdit
|
||||
? [<></>]
|
||||
: [
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setViewItem(undefined);
|
||||
setCreateDataSourceModalOpen(true);
|
||||
}}
|
||||
>
|
||||
创建视图
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
/>
|
||||
{createDataSourceModalOpen && (
|
||||
<ViewCreateFormModal
|
||||
domainId={selectDomainId}
|
||||
viewItem={viewItem}
|
||||
modelList={modelList}
|
||||
onSubmit={() => {
|
||||
queryViewList();
|
||||
setCreateDataSourceModalOpen(false);
|
||||
}}
|
||||
onCancel={() => {
|
||||
setCreateDataSourceModalOpen(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(ViewTable);
|
||||
Reference in New Issue
Block a user