mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-20 06:34:55 +00:00
[improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target. (#801)
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. * [improvement][semantic-fe] Fixing the logic error in the dimension value setting. * [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information. * [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience. * [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas. * [improvement][semantic-fe] Changing the line type for canvas connections. * [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless". * [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model. * [improvement][semantic-fe] Updating the logic for the fieldName. * [improvement][semantic-fe] Adjusting the position of the metrics tab. * [improvement][semantic-fe] Changing the 字段名称 to 英文名称. * [improvement][semantic-fe] Fix metric measurement deletion. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI adjustment for metric details page. * [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty. * [improvement][semantic-fe] Added field type and metric type to the metric creation options. * [improvement][semantic-fe] The organization structure selection feature has been added to the permission management. * [improvement][semantic-fe] Improved user experience for the metric list. * [improvement][semantic-fe] fix update the metric list. * [improvement][headless-fe] Added view management functionality. * [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system. * [improvement][headless-fe] Added model editing side effect detection. * [improvement][headless-fe] Fixed the logic error in view editing. * [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings. * [improvement][headless-fe] Added the ability to hide the Q&A settings entry point. * [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation. * [improvement][headless-fe] Added search functionality to the field list in model editing. * [improvement][headless-fe] fix the field list in model editing * [improvement][headless-fe] Restructured the data for the dimension value settings interface. * [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts. * [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function. * [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process. * [improvement][headless-fe] Replaced the term "view" with "dataset" * [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target.
This commit is contained in:
tristanliu
@@ -200,7 +200,6 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
|
||||
<DataSource
|
||||
initialValues={dataSourceItem}
|
||||
onSubmitSuccess={(dataSourceInfo) => {
|
||||
console.log('onSubmitSuccess', dataSourceInfo);
|
||||
const { columns, sql, databaseId, sqlParams } = dataSourceInfo;
|
||||
setSql(sql);
|
||||
setScriptColumns(columns);
|
||||
|
||||
@@ -6,12 +6,13 @@ import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import { StatusEnum } from '../enum';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../constant';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
|
||||
import {
|
||||
getModelList,
|
||||
getDimensionList,
|
||||
deleteDimension,
|
||||
batchUpdateDimensionStatus,
|
||||
batchCreateTag,
|
||||
} from '../service';
|
||||
import DimensionInfoModal from './DimensionInfoModal';
|
||||
import DimensionValueSettingModal from './DimensionValueSettingModal';
|
||||
@@ -19,7 +20,7 @@ import { ISemantic, IDataSource } from '../data';
|
||||
import TableHeaderFilter from './TableHeaderFilter';
|
||||
import moment from 'moment';
|
||||
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
|
||||
import { ColumnsConfig } from './MetricTableColumnRender';
|
||||
import { ColumnsConfig } from './TableColumnRender';
|
||||
import styles from './style.less';
|
||||
|
||||
type Props = {
|
||||
@@ -114,6 +115,32 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const queryBatchExportTag = async (ids: React.Key[]) => {
|
||||
if (Array.isArray(ids) && ids.length === 0) {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const { code, msg } = await batchCreateTag({
|
||||
itemIds: ids,
|
||||
type: TAG_DEFINE_TYPE.DIMENSION,
|
||||
modelId,
|
||||
});
|
||||
setLoading(false);
|
||||
if (code === 200) {
|
||||
queryDimensionList({ ...filterParams, ...defaultPagination });
|
||||
dispatch({
|
||||
type: 'domainManger/queryDimensionList',
|
||||
payload: {
|
||||
modelId,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const columnsConfig = ColumnsConfig();
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
@@ -133,7 +160,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
title: '维度',
|
||||
fixed: 'left',
|
||||
width: 280,
|
||||
render: ColumnsConfig.dimensionInfo.render,
|
||||
render: columnsConfig.dimensionInfo.render,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
@@ -141,7 +168,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
title: '敏感度',
|
||||
width: 150,
|
||||
valueEnum: SENSITIVE_LEVEL_ENUM,
|
||||
render: ColumnsConfig.sensitiveLevel.render,
|
||||
render: columnsConfig.sensitiveLevel.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'isTag',
|
||||
@@ -163,7 +190,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
title: '状态',
|
||||
width: 150,
|
||||
search: false,
|
||||
render: ColumnsConfig.state.render,
|
||||
render: columnsConfig.state.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
@@ -176,7 +203,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
search: false,
|
||||
render: ColumnsConfig.description.render,
|
||||
render: columnsConfig.description.render,
|
||||
},
|
||||
|
||||
{
|
||||
@@ -288,6 +315,9 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
case 'batchStop':
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
|
||||
break;
|
||||
case 'exportTagButton':
|
||||
queryBatchExportTag(selectedRowKeys);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@@ -405,6 +435,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
</Button>,
|
||||
<BatchCtrlDropDownButton
|
||||
key="ctrlBtnList"
|
||||
extenderEnable={true}
|
||||
onDeleteConfirm={() => {
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
|
||||
}}
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { message, Button, Space, Popconfirm, Input, Select } from 'antd';
|
||||
import { message, Button, Space, Popconfirm, Input, Select, Tag } from 'antd';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { StatusEnum } from '../enum';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../constant';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
|
||||
import {
|
||||
queryMetric,
|
||||
deleteMetric,
|
||||
batchUpdateMetricStatus,
|
||||
batchDownloadMetric,
|
||||
batchCreateTag,
|
||||
} from '../service';
|
||||
import MetricInfoCreateForm from './MetricInfoCreateForm';
|
||||
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
|
||||
@@ -19,7 +20,7 @@ import TableHeaderFilter from './TableHeaderFilter';
|
||||
import moment from 'moment';
|
||||
import styles from './style.less';
|
||||
import { ISemantic } from '../data';
|
||||
import { ColumnsConfig } from './MetricTableColumnRender';
|
||||
import { ColumnsConfig } from './TableColumnRender';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
@@ -67,6 +68,30 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const queryBatchExportTag = async (ids: React.Key[]) => {
|
||||
if (Array.isArray(ids) && ids.length === 0) {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const { code, msg } = await batchCreateTag({
|
||||
itemIds: ids,
|
||||
type: TAG_DEFINE_TYPE.METRIC,
|
||||
modelId,
|
||||
});
|
||||
setLoading(false);
|
||||
if (code === 200) {
|
||||
queryMetricList({ ...filterParams, ...defaultPagination });
|
||||
dispatch({
|
||||
type: 'domainManger/queryMetricList',
|
||||
payload: {
|
||||
modelId,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
queryMetricList({ ...filterParams, ...defaultPagination });
|
||||
}, [filterParams]);
|
||||
@@ -94,6 +119,8 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const columnsConfig = ColumnsConfig();
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
@@ -109,7 +136,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
fixed: 'left',
|
||||
// width: '30%',
|
||||
search: false,
|
||||
render: ColumnsConfig.metricInfo.render,
|
||||
render: columnsConfig.indicatorInfo.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'key',
|
||||
@@ -121,7 +148,23 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
title: '敏感度',
|
||||
width: 160,
|
||||
valueEnum: SENSITIVE_LEVEL_ENUM,
|
||||
render: ColumnsConfig.sensitiveLevel.render,
|
||||
render: columnsConfig.sensitiveLevel.render,
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'isTag',
|
||||
title: '是否为标签',
|
||||
width: 120,
|
||||
render: (isTag) => {
|
||||
switch (isTag) {
|
||||
case 0:
|
||||
return '否';
|
||||
case 1:
|
||||
return <span style={{ color: '#1677ff' }}>是</span>;
|
||||
default:
|
||||
return <Tag color="default">未知</Tag>;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
@@ -129,14 +172,14 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
title: '描述',
|
||||
width: 300,
|
||||
search: false,
|
||||
render: ColumnsConfig.description.render,
|
||||
render: columnsConfig.description.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'status',
|
||||
title: '状态',
|
||||
width: 160,
|
||||
search: false,
|
||||
render: ColumnsConfig.state.render,
|
||||
render: columnsConfig.state.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
@@ -236,6 +279,9 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
case 'batchStop':
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
|
||||
break;
|
||||
case 'exportTagButton':
|
||||
queryBatchExportTag(selectedRowKeys);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@@ -351,6 +397,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
<BatchCtrlDropDownButton
|
||||
key="ctrlBtnList"
|
||||
downloadLoading={downloadLoading}
|
||||
extenderEnable={true}
|
||||
onDeleteConfirm={() => {
|
||||
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
|
||||
}}
|
||||
|
||||
@@ -1,206 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Form, Input, Modal, Select } from 'antd';
|
||||
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import { ISemantic } from '../../data';
|
||||
import { saveCommonDimension, getDimensionList } from '../../service';
|
||||
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
||||
import { message } from 'antd';
|
||||
|
||||
export type CreateFormProps = {
|
||||
domainId: number;
|
||||
dimensionItem?: ISemantic.IDimensionItem;
|
||||
onCancel: () => void;
|
||||
bindModalVisible: boolean;
|
||||
dimensionList: ISemantic.IDimensionItem[];
|
||||
onSubmit: (values?: any) => void;
|
||||
};
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
const CommonDimensionInfoModal: React.FC<CreateFormProps> = ({
|
||||
domainId,
|
||||
onCancel,
|
||||
bindModalVisible,
|
||||
dimensionItem,
|
||||
onSubmit: handleUpdate,
|
||||
}) => {
|
||||
const isEdit = !!dimensionItem?.id;
|
||||
const [form] = Form.useForm();
|
||||
const { setFieldsValue, resetFields } = form;
|
||||
const [saveLoading, setSaveLoading] = useState<boolean>(false);
|
||||
const [dimensionOptions, setDimensionOptions] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
queryDimensionList();
|
||||
}, []);
|
||||
|
||||
const queryDimensionList = async () => {
|
||||
setSaveLoading(true);
|
||||
const { code, data, msg } = await getDimensionList({ domainId });
|
||||
setSaveLoading(false);
|
||||
const dimensionList = data?.list;
|
||||
if (code === 200 && Array.isArray(dimensionList)) {
|
||||
const dimensionMap = dimensionList.reduce(
|
||||
(
|
||||
dataMap: Record<
|
||||
string,
|
||||
{ label: string; options: { label: string; value: number; disabled?: boolean }[] }
|
||||
>,
|
||||
item: ISemantic.IDimensionItem,
|
||||
) => {
|
||||
const { modelId, modelName, name, id, commonDimensionId } = item;
|
||||
const target = dataMap[modelId];
|
||||
if (target) {
|
||||
target.options.push({
|
||||
label: name,
|
||||
value: id,
|
||||
disabled: !!commonDimensionId,
|
||||
});
|
||||
} else {
|
||||
dataMap[modelId] = {
|
||||
label: modelName || `${modelId}`,
|
||||
options: [
|
||||
{
|
||||
label: name,
|
||||
value: id,
|
||||
disabled: !!commonDimensionId,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
return dataMap;
|
||||
},
|
||||
{},
|
||||
);
|
||||
setDimensionOptions(Object.values(dimensionMap));
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (isSilenceSubmit = false) => {
|
||||
const fieldsValue = await form.validateFields();
|
||||
await saveDimension(
|
||||
{
|
||||
...fieldsValue,
|
||||
},
|
||||
isSilenceSubmit,
|
||||
);
|
||||
};
|
||||
|
||||
const saveDimension = async (fieldsValue: any, isSilenceSubmit = false) => {
|
||||
const queryParams = {
|
||||
domainId: isEdit ? dimensionItem.domainId : domainId,
|
||||
type: 'categorical',
|
||||
...fieldsValue,
|
||||
};
|
||||
|
||||
const { code, msg } = await saveCommonDimension(queryParams);
|
||||
if (code === 200) {
|
||||
if (!isSilenceSubmit) {
|
||||
message.success('编辑公共维度成功');
|
||||
handleUpdate(fieldsValue);
|
||||
}
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (dimensionItem) {
|
||||
setFieldsValue({ ...dimensionItem });
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}, [dimensionItem]);
|
||||
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={saveLoading}
|
||||
onClick={() => {
|
||||
handleSubmit();
|
||||
}}
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
return (
|
||||
<>
|
||||
<FormItem hidden={true} name="id" label="ID">
|
||||
<Input placeholder="id" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="name"
|
||||
label="公共维度名称"
|
||||
rules={[{ required: true, message: '请输入公共维度名称' }]}
|
||||
>
|
||||
<Input placeholder="名称不可重复" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="bizName"
|
||||
label="英文名称"
|
||||
rules={[{ required: true, message: '请输入字段名称' }]}
|
||||
>
|
||||
<Input placeholder="名称不可重复" disabled={isEdit} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
// label="关联维度"
|
||||
label={
|
||||
<FormItemTitle
|
||||
title={`关联维度`}
|
||||
subTitle={`维度不能关联多个公共维度，已关联的维度会被禁用`}
|
||||
/>
|
||||
}
|
||||
name="dimensionIds"
|
||||
// rules={[{ required: true, message: '请选择所要关联的维度' }]}
|
||||
>
|
||||
<Select
|
||||
showSearch
|
||||
mode="multiple"
|
||||
allowClear
|
||||
placeholder="选择所要关联的维度"
|
||||
options={dimensionOptions}
|
||||
filterOption={(input, option: any) =>
|
||||
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="description" label="维度描述">
|
||||
<TextArea placeholder="请输入维度描述" />
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
width={800}
|
||||
destroyOnClose
|
||||
title="公共维度信息"
|
||||
style={{ top: 48 }}
|
||||
maskClosable={false}
|
||||
open={bindModalVisible}
|
||||
footer={renderFooter()}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<Form {...formLayout} form={form}>
|
||||
{renderContent()}
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommonDimensionInfoModal;
|
||||
@@ -1,196 +0,0 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { message, Button, Space, Popconfirm, Input } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import { getCommonDimensionList, deleteCommonDimension } from '../../service';
|
||||
import CommonDimensionInfoModal from './CommonDimensionInfoModal';
|
||||
import { ISemantic } from '../../data';
|
||||
import moment from 'moment';
|
||||
import styles from '../style.less';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const CommonDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
const { selectDomainId: domainId, dimensionList } = domainManger;
|
||||
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
|
||||
const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const queryDimensionList = async () => {
|
||||
setLoading(true);
|
||||
const { code, data, msg } = await getCommonDimensionList(domainId);
|
||||
setLoading(false);
|
||||
let resData: any = {};
|
||||
if (code === 200) {
|
||||
resData = {
|
||||
data: data || [],
|
||||
success: true,
|
||||
};
|
||||
} else {
|
||||
message.error(msg);
|
||||
resData = {
|
||||
data: [],
|
||||
total: 0,
|
||||
success: false,
|
||||
};
|
||||
}
|
||||
return resData;
|
||||
};
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
title: 'ID',
|
||||
width: 80,
|
||||
order: 100,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'key',
|
||||
title: '维度搜索',
|
||||
hideInTable: true,
|
||||
renderFormItem: () => <Input placeholder="请输入ID/维度名称/英文名称" />,
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '维度名称',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'bizName',
|
||||
title: '英文名称',
|
||||
search: false,
|
||||
// order: 9,
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
title: '创建人',
|
||||
width: 100,
|
||||
search: false,
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
search: false,
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'updatedAt',
|
||||
title: '更新时间',
|
||||
width: 180,
|
||||
search: false,
|
||||
render: (value: any) => {
|
||||
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
width: 200,
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<Space className={styles.ctrlBtnContainer}>
|
||||
<Button
|
||||
key="dimensionEditBtn"
|
||||
type="link"
|
||||
onClick={() => {
|
||||
setDimensionItem(record);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="删除会自动解除所关联的维度，是否确认？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
placement="left"
|
||||
onConfirm={async () => {
|
||||
const { code, msg } = await deleteCommonDimension(record.id);
|
||||
if (code === 200) {
|
||||
setDimensionItem(undefined);
|
||||
actionRef.current?.reload();
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
key="dimensionDeleteEditBtn"
|
||||
onClick={() => {
|
||||
setDimensionItem(record);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable
|
||||
style={{ marginTop: 15 }}
|
||||
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
request={queryDimensionList}
|
||||
loading={loading}
|
||||
search={false}
|
||||
tableAlertRender={() => {
|
||||
return false;
|
||||
}}
|
||||
size="small"
|
||||
options={{ reload: false, density: false, fullScreen: false }}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setDimensionItem(undefined);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
创建公共维度
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
|
||||
{createModalVisible && (
|
||||
<CommonDimensionInfoModal
|
||||
domainId={domainId}
|
||||
bindModalVisible={createModalVisible}
|
||||
dimensionItem={dimensionItem}
|
||||
dimensionList={dimensionList}
|
||||
onSubmit={() => {
|
||||
setCreateModalVisible(false);
|
||||
actionRef?.current?.reload();
|
||||
return;
|
||||
}}
|
||||
onCancel={() => {
|
||||
setCreateModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(CommonDimensionTable);
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Form, Input, Modal, Select, Row, Col, Space, Tooltip, Switch } from 'antd';
|
||||
import { SENSITIVE_LEVEL_OPTIONS } from '../constant';
|
||||
import { SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
|
||||
import { StatusEnum } from '../enum';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import SqlEditor from '@/components/SqlEditor';
|
||||
import InfoTagList from './InfoTagList';
|
||||
@@ -10,7 +11,8 @@ import {
|
||||
createDimension,
|
||||
updateDimension,
|
||||
mockDimensionAlias,
|
||||
getCommonDimensionList,
|
||||
batchCreateTag,
|
||||
batchUpdateTagStatus,
|
||||
} from '../service';
|
||||
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
||||
|
||||
@@ -47,7 +49,6 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
||||
const [form] = Form.useForm();
|
||||
const { setFieldsValue, resetFields } = form;
|
||||
const [llmLoading, setLlmLoading] = useState<boolean>(false);
|
||||
const [commonDimensionOptions, setCommonDimensionOptions] = useState([]);
|
||||
|
||||
const handleSubmit = async (
|
||||
isSilenceSubmit = false,
|
||||
@@ -64,26 +65,6 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
queryCommonDimensionList();
|
||||
}, [domainId]);
|
||||
|
||||
const queryCommonDimensionList = async () => {
|
||||
const { code, data, msg } = await getCommonDimensionList(domainId);
|
||||
// const { list, pageSize, pageNum, total } = data || {};
|
||||
if (code === 200) {
|
||||
const options = data.map((item) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
};
|
||||
});
|
||||
setCommonDimensionOptions(options);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const saveDimension = async (fieldsValue: any, isSilenceSubmit = false) => {
|
||||
const queryParams = {
|
||||
modelId: isEdit ? dimensionItem.modelId : modelId,
|
||||
@@ -94,8 +75,14 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
||||
if (queryParams.id) {
|
||||
saveDimensionQuery = updateDimension;
|
||||
}
|
||||
const { code, msg } = await saveDimensionQuery(queryParams);
|
||||
const { code, msg, data } = await saveDimensionQuery(queryParams);
|
||||
if (code === 200) {
|
||||
if (!queryParams.id && queryParams.isTag) {
|
||||
queryBatchExportTag(data.id);
|
||||
}
|
||||
if (dimensionItem?.id && !queryParams.isTag) {
|
||||
queryBatchUpdateStatus(dimensionItem.bizName, StatusEnum.DELETED);
|
||||
}
|
||||
if (!isSilenceSubmit) {
|
||||
message.success('编辑维度成功');
|
||||
handleUpdate(fieldsValue);
|
||||
@@ -105,6 +92,31 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const queryBatchUpdateStatus = async (bizName: string, status: StatusEnum) => {
|
||||
const { code, msg } = await batchUpdateTagStatus({
|
||||
bizNames: [bizName],
|
||||
modelId: [modelId],
|
||||
status,
|
||||
});
|
||||
if (code === 200) {
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const queryBatchExportTag = async (id: number) => {
|
||||
const { code, msg } = await batchCreateTag({
|
||||
itemIds: [id],
|
||||
type: TAG_DEFINE_TYPE.DIMENSION,
|
||||
modelId,
|
||||
});
|
||||
|
||||
if (code === 200) {
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const setFormVal = () => {
|
||||
if (dimensionItem) {
|
||||
const { alias } = dimensionItem;
|
||||
|
||||
@@ -5,7 +5,7 @@ import { connect, history } from 'umi';
|
||||
import ClassDimensionTable from './ClassDimensionTable';
|
||||
import ClassMetricTable from './ClassMetricTable';
|
||||
import PermissionSection from './Permission/PermissionSection';
|
||||
import ChatSettingSection from '../ChatSetting/ChatSettingSection';
|
||||
import ClassTagTable from '../Insights/components/ClassTagTable';
|
||||
import OverView from './OverView';
|
||||
import styles from './style.less';
|
||||
import type { StateType } from '../model';
|
||||
@@ -14,7 +14,6 @@ import { ISemantic } from '../data';
|
||||
import SemanticGraphCanvas from '../SemanticGraphCanvas';
|
||||
import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
|
||||
import View from '../View';
|
||||
// import CommonDimensionTable from './CommonDimension/CommonDimensionTable';
|
||||
// import DatabaseTable from '../components/Database/DatabaseTable';
|
||||
|
||||
import type { Dispatch } from 'umi';
|
||||
@@ -86,11 +85,6 @@ const DomainManagerTab: React.FC<Props> = ({
|
||||
// key: 'database',
|
||||
// children: <DatabaseTable />,
|
||||
// },
|
||||
// {
|
||||
// label: '公共维度',
|
||||
// key: 'commonDimension',
|
||||
// children: <CommonDimensionTable />,
|
||||
// },
|
||||
].filter((item) => {
|
||||
const target = domainList.find((domain) => domain.id === selectDomainId);
|
||||
if (target?.hasEditPermission) {
|
||||
@@ -110,6 +104,11 @@ const DomainManagerTab: React.FC<Props> = ({
|
||||
key: 'dimenstion',
|
||||
children: <ClassDimensionTable />,
|
||||
},
|
||||
{
|
||||
label: '标签管理',
|
||||
key: 'tag',
|
||||
children: <ClassTagTable />,
|
||||
},
|
||||
|
||||
{
|
||||
label: '权限管理',
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Tooltip, message } from 'antd';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { indicatorStarState } from '../service';
|
||||
import MStar from '@/components/MStar';
|
||||
|
||||
export type StarType = 'tag' | 'metric' | 'dimension';
|
||||
|
||||
type Props = {
|
||||
indicatorId: number;
|
||||
initState?: boolean;
|
||||
type?: StarType;
|
||||
onChange?: (state: boolean) => void;
|
||||
};
|
||||
|
||||
const IndicatorStar: React.FC<Props> = ({ indicatorId, type = 'metric', initState = false }) => {
|
||||
const [star, setStar] = useState<boolean>(initState);
|
||||
useEffect(() => {
|
||||
setStar(initState);
|
||||
}, [initState]);
|
||||
|
||||
const starStateChange = async (id: number, state: boolean) => {
|
||||
const { code, msg } = await indicatorStarState({ id, type, state });
|
||||
if (code === 200) {
|
||||
setStar(state);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip title={`${star ? '取消' : '加入'}收藏`}>
|
||||
<div>
|
||||
<MStar
|
||||
star={star}
|
||||
onToggleCollect={(star: boolean) => {
|
||||
starStateChange(indicatorId, star);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndicatorStar;
|
||||
@@ -25,7 +25,7 @@ const MetricFieldFormTable: React.FC<Props> = ({
|
||||
const [defineTypeParams, setDefineTypeParams] = useState(
|
||||
typeParams || {
|
||||
expr: '',
|
||||
metrics: [],
|
||||
fields: [],
|
||||
},
|
||||
);
|
||||
|
||||
@@ -44,16 +44,19 @@ const MetricFieldFormTable: React.FC<Props> = ({
|
||||
const [exprString, setExprString] = useState(typeParams?.expr || '');
|
||||
|
||||
const [selectedKeys, setSelectedKeys] = useState<string[]>(() => {
|
||||
return defineTypeParams.fields.map((item: any) => {
|
||||
return defineTypeParams.fields.map((item: ISemantic.IFieldTypeParamsItem) => {
|
||||
return item.fieldName;
|
||||
});
|
||||
});
|
||||
|
||||
const [selectedKeysMap, setSelectedKeysMap] = useState<Record<string, boolean>>(() => {
|
||||
return defineTypeParams.fields.reduce((keyMap, item: any) => {
|
||||
keyMap[item.fieldName] = true;
|
||||
return keyMap;
|
||||
}, {});
|
||||
return defineTypeParams.fields.reduce(
|
||||
(keyMap: Record<string, boolean>, item: ISemantic.IFieldTypeParamsItem) => {
|
||||
keyMap[item.fieldName] = true;
|
||||
return keyMap;
|
||||
},
|
||||
{},
|
||||
);
|
||||
});
|
||||
|
||||
const columns = [
|
||||
@@ -141,7 +144,7 @@ const MetricFieldFormTable: React.FC<Props> = ({
|
||||
rowSelection={rowSelection}
|
||||
/>
|
||||
<ProCard
|
||||
title={<FormLabelRequire title="字段表达式" />}
|
||||
title={<FormLabelRequire title="表达式" />}
|
||||
// tooltip="度量表达式由上面选择的度量组成，如选择了度量A和B，则可将表达式写成A+B"
|
||||
>
|
||||
<div>
|
||||
|
||||
@@ -17,13 +17,20 @@ import {
|
||||
Tooltip,
|
||||
Tag,
|
||||
} from 'antd';
|
||||
import { StatusEnum } from '../enum';
|
||||
import { InfoCircleOutlined } from '@ant-design/icons';
|
||||
import MetricMeasuresFormTable from './MetricMeasuresFormTable';
|
||||
import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE } from '../constant';
|
||||
import { SENSITIVE_LEVEL_OPTIONS, METRIC_DEFINE_TYPE, TAG_DEFINE_TYPE } from '../constant';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
||||
import styles from './style.less';
|
||||
import { getMetricsToCreateNewMetric, getModelDetail, getDrillDownDimension } from '../service';
|
||||
import {
|
||||
getMetricsToCreateNewMetric,
|
||||
getModelDetail,
|
||||
getDrillDownDimension,
|
||||
batchCreateTag,
|
||||
batchUpdateTagStatus,
|
||||
} from '../service';
|
||||
import MetricMetricFormTable from './MetricMetricFormTable';
|
||||
import MetricFieldFormTable from './MetricFieldFormTable';
|
||||
import DimensionAndMetricRelationModal from './DimensionAndMetricRelationModal';
|
||||
@@ -239,6 +246,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
|
||||
description,
|
||||
sensitiveLevel,
|
||||
typeParams,
|
||||
isTag,
|
||||
dataFormat,
|
||||
dataFormatType,
|
||||
alias,
|
||||
@@ -257,6 +265,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
|
||||
sensitiveLevel,
|
||||
description,
|
||||
tags,
|
||||
isTag,
|
||||
// isPercent,
|
||||
dataFormatType: dataFormatType || '',
|
||||
alias: alias && alias.trim() ? alias.split(',') : [],
|
||||
@@ -370,8 +379,14 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
|
||||
if (queryParams.id) {
|
||||
saveMetricQuery = updateMetric;
|
||||
}
|
||||
const { code, msg } = await saveMetricQuery(queryParams);
|
||||
const { code, msg, data } = await saveMetricQuery(queryParams);
|
||||
if (code === 200) {
|
||||
if (!queryParams.id && queryParams.isTag) {
|
||||
queryBatchExportTag(data.id);
|
||||
}
|
||||
if (metricItem?.id && !queryParams.isTag) {
|
||||
queryBatchUpdateStatus(metricItem.bizName, StatusEnum.DELETED);
|
||||
}
|
||||
message.success('编辑指标成功');
|
||||
onSubmit?.(queryParams);
|
||||
return;
|
||||
@@ -379,6 +394,31 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const queryBatchUpdateStatus = async (bizName: string, status: StatusEnum) => {
|
||||
const { code, msg } = await batchUpdateTagStatus({
|
||||
bizNames: [bizName],
|
||||
modelId: [modelId],
|
||||
status,
|
||||
});
|
||||
if (code === 200) {
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const queryBatchExportTag = async (id: number) => {
|
||||
const { code, msg } = await batchCreateTag({
|
||||
itemIds: [id],
|
||||
type: TAG_DEFINE_TYPE.METRIC,
|
||||
modelId,
|
||||
});
|
||||
|
||||
if (code === 200) {
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const generatorMetricAlias = async () => {
|
||||
setLlmLoading(true);
|
||||
const { code, data } = await mockMetricAlias({ ...metricItem });
|
||||
@@ -440,7 +480,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
|
||||
} else {
|
||||
setCreateNewMetricList(data);
|
||||
}
|
||||
// setCreateNewMetricList(data);
|
||||
} else {
|
||||
message.error('获取指标标签失败');
|
||||
}
|
||||
@@ -672,6 +711,28 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
|
||||
>
|
||||
<TextArea placeholder="请输入业务口径" />
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label={
|
||||
<FormItemTitle
|
||||
title={`设为标签`}
|
||||
subTitle={`如果勾选，代表取值都是一种'标签'，可用作对实体的圈选`}
|
||||
/>
|
||||
}
|
||||
name="isTag"
|
||||
valuePropName="checked"
|
||||
getValueFromEvent={(value) => {
|
||||
return value === true ? 1 : 0;
|
||||
}}
|
||||
getValueProps={(value) => {
|
||||
return {
|
||||
checked: value === 1,
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
label={
|
||||
<FormItemTitle
|
||||
|
||||
@@ -196,7 +196,7 @@ const MetricMeasuresFormTable: React.FC<Props> = ({
|
||||
rowSelection={rowSelection}
|
||||
/>
|
||||
<ProCard
|
||||
title={<FormLabelRequire title="度量表达式" />}
|
||||
title={<FormLabelRequire title="表达式" />}
|
||||
// tooltip="由于度量已自带聚合函数，因此通过度量创建指标时，表达式中无需再写聚合函数，如
|
||||
// 通过度量a和度量b来创建指标，由于建模的时候度量a和度量b被指定了聚合函数SUM，因此创建指标时表达式只需要写成 a+b, 而不需要带聚合函数"
|
||||
>
|
||||
|
||||
@@ -10,14 +10,12 @@ import { ISemantic } from '../data';
|
||||
type Props = {
|
||||
typeParams: ISemantic.IMetricTypeParams;
|
||||
metricList: ISemantic.IMetricItem[];
|
||||
// selectedMeasuresList: any;
|
||||
onFieldChange: (metrics: ISemantic.IMetricTypeParamsItem[]) => void;
|
||||
onSqlChange: (sql: string) => void;
|
||||
};
|
||||
|
||||
const MetricMetricFormTable: React.FC<Props> = ({
|
||||
typeParams,
|
||||
// selectedMeasuresList = [],
|
||||
metricList,
|
||||
onFieldChange,
|
||||
onSqlChange,
|
||||
@@ -150,7 +148,7 @@ const MetricMetricFormTable: React.FC<Props> = ({
|
||||
scroll={{ y: 500 }}
|
||||
rowSelection={rowSelection}
|
||||
/>
|
||||
<ProCard title={<FormLabelRequire title="指标表达式" />} tooltip="">
|
||||
<ProCard title={<FormLabelRequire title="表达式" />} tooltip="">
|
||||
<p
|
||||
className={styles.desc}
|
||||
style={{ border: 'unset', padding: 0, marginBottom: 20, marginLeft: 2 }}
|
||||
|
||||
@@ -1,310 +0,0 @@
|
||||
import { Space, Tag, Typography } from 'antd';
|
||||
import { StatusEnum } from '../enum';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
|
||||
import { TagsOutlined, ReadOutlined } from '@ant-design/icons';
|
||||
import { history } from 'umi';
|
||||
import { ISemantic } from '../data';
|
||||
import { isString } from 'lodash';
|
||||
import { isArrayOfValues } from '@/utils/utils';
|
||||
import styles from './style.less';
|
||||
import MetricStar from '../Metric/components/MetricStar';
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
|
||||
export const ColumnsConfig = {
|
||||
description: {
|
||||
render: (_, record: ISemantic.IMetricItem) => {
|
||||
const { description } = record;
|
||||
return (
|
||||
<Paragraph
|
||||
ellipsis={{ tooltip: description, rows: 3 }}
|
||||
style={{ width: 250, marginBottom: 0 }}
|
||||
>
|
||||
{description}
|
||||
</Paragraph>
|
||||
);
|
||||
},
|
||||
},
|
||||
dimensionInfo: {
|
||||
render: (_, record: ISemantic.IDimensionItem) => {
|
||||
const { name, alias, bizName } = record;
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Space>
|
||||
<span style={{ fontWeight: 500 }}>{name}</span>
|
||||
</Space>
|
||||
</div>
|
||||
<div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
|
||||
{bizName}
|
||||
</div>
|
||||
|
||||
{alias && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Space direction="vertical" size={4}>
|
||||
{alias && (
|
||||
<Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
|
||||
<ReadOutlined />
|
||||
<div style={{ width: 'max-content' }}>别名:</div>
|
||||
<span style={{ marginLeft: 2 }}>
|
||||
<Space size={[0, 8]} wrap>
|
||||
{isString(alias) &&
|
||||
alias.split(',').map((aliasName: string) => {
|
||||
return (
|
||||
<Tag
|
||||
color="#eee"
|
||||
key={aliasName}
|
||||
style={{
|
||||
borderRadius: 44,
|
||||
maxWidth: 90,
|
||||
minWidth: 40,
|
||||
backgroundColor: 'rgba(18, 31, 67, 0.04)',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
maxWidth: 80,
|
||||
color: 'rgb(95, 116, 141)',
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
}}
|
||||
ellipsis={{ tooltip: aliasName }}
|
||||
>
|
||||
{aliasName}
|
||||
</Text>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</span>
|
||||
</Space>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
metricInfo: {
|
||||
render: (_, record: ISemantic.IMetricItem) => {
|
||||
const { name, alias, bizName, tags, id, isCollect } = record;
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Space>
|
||||
<a
|
||||
className={styles.textLink}
|
||||
style={{ fontWeight: 500 }}
|
||||
onClick={(event: any) => {
|
||||
history.push(`/metric/detail/${id}`);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
href={`/webapp/metric/detail/${id}`}
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
<MetricStar metricId={id} initState={isCollect} />
|
||||
{/* <Tag
|
||||
color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
|
||||
style={{ lineHeight: '16px', position: 'relative', top: '-1px' }}
|
||||
>
|
||||
{SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
|
||||
</Tag> */}
|
||||
</Space>
|
||||
</div>
|
||||
<div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
|
||||
{bizName}
|
||||
</div>
|
||||
|
||||
{(alias || isArrayOfValues(tags)) && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Space direction="vertical" size={4}>
|
||||
{alias && (
|
||||
<Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
|
||||
<ReadOutlined />
|
||||
<div style={{ width: 'max-content' }}>别名:</div>
|
||||
<span style={{ marginLeft: 2 }}>
|
||||
<Space size={[0, 8]} wrap>
|
||||
{isString(alias) &&
|
||||
alias.split(',').map((aliasName: string) => {
|
||||
return (
|
||||
<Tag
|
||||
color="#eee"
|
||||
key={aliasName}
|
||||
style={{
|
||||
borderRadius: 44,
|
||||
maxWidth: 90,
|
||||
minWidth: 40,
|
||||
backgroundColor: 'rgba(18, 31, 67, 0.04)',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
maxWidth: 80,
|
||||
color: 'rgb(95, 116, 141)',
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
}}
|
||||
ellipsis={{ tooltip: aliasName }}
|
||||
>
|
||||
{aliasName}
|
||||
</Text>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</span>
|
||||
</Space>
|
||||
)}
|
||||
|
||||
{isArrayOfValues(tags) && (
|
||||
<Space size={4} style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}>
|
||||
<TagsOutlined />
|
||||
<div style={{ width: 'max-content' }}>标签:</div>
|
||||
<span style={{ marginLeft: 2 }}>
|
||||
<Space size={[0, 8]} wrap>
|
||||
{tags.map((tag: string) => {
|
||||
return (
|
||||
<Tag
|
||||
color="#eee"
|
||||
key={tag}
|
||||
style={{
|
||||
borderRadius: 44,
|
||||
maxWidth: 90,
|
||||
minWidth: 40,
|
||||
backgroundColor: 'rgba(18, 31, 67, 0.04)',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
maxWidth: 80,
|
||||
color: 'rgb(95, 116, 141)',
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
}}
|
||||
ellipsis={{ tooltip: tag }}
|
||||
>
|
||||
{tag}
|
||||
</Text>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</span>
|
||||
</Space>
|
||||
)}
|
||||
{/* <Space size={10}>
|
||||
<Space
|
||||
size={2}
|
||||
style={{ color: '#5f748d', fontSize: 12, position: 'relative', top: '1px' }}
|
||||
>
|
||||
<FieldNumberOutlined style={{ fontSize: 16, position: 'relative', top: '1px' }} />
|
||||
<span>:</span>
|
||||
<span style={{ marginLeft: 0 }}>{id}</span>
|
||||
</Space>
|
||||
<Space size={2} style={{ color: '#5f748d', fontSize: 12 }}>
|
||||
<UserOutlined />
|
||||
<span>:</span>
|
||||
<span style={{ marginLeft: 0 }}>{createdBy}</span>
|
||||
</Space>
|
||||
</Space> */}
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
sensitiveLevel: {
|
||||
render: (_, record: ISemantic.IMetricItem) => {
|
||||
const { sensitiveLevel } = record;
|
||||
return SENSITIVE_LEVEL_COLOR[sensitiveLevel] ? (
|
||||
<Tag
|
||||
color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
|
||||
style={{
|
||||
borderRadius: '40px',
|
||||
padding: '2px 16px',
|
||||
fontSize: '13px',
|
||||
// color: '#8ca3ba',
|
||||
}}
|
||||
>
|
||||
{SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag
|
||||
style={{
|
||||
borderRadius: '40px',
|
||||
padding: '2px 16px',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
>
|
||||
未知
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
state: {
|
||||
render: (status) => {
|
||||
let tagProps: { color: string; label: string; style?: any } = {
|
||||
color: 'default',
|
||||
label: '未知',
|
||||
style: {},
|
||||
};
|
||||
switch (status) {
|
||||
case StatusEnum.ONLINE:
|
||||
tagProps = {
|
||||
// color: 'success',
|
||||
color: 'geekblue',
|
||||
label: '已启用',
|
||||
};
|
||||
break;
|
||||
case StatusEnum.OFFLINE:
|
||||
tagProps = {
|
||||
color: 'default',
|
||||
label: '未启用',
|
||||
style: {
|
||||
color: 'rgb(95, 116, 141)',
|
||||
fontWeight: 400,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case StatusEnum.INITIALIZED:
|
||||
tagProps = {
|
||||
color: 'processing',
|
||||
label: '初始化',
|
||||
};
|
||||
break;
|
||||
case StatusEnum.DELETED:
|
||||
tagProps = {
|
||||
color: 'default',
|
||||
label: '已删除',
|
||||
};
|
||||
break;
|
||||
case StatusEnum.UNAVAILABLE:
|
||||
tagProps = {
|
||||
color: 'default',
|
||||
label: '不可用',
|
||||
};
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<Tag
|
||||
color={tagProps.color}
|
||||
style={{
|
||||
borderRadius: '40px',
|
||||
padding: '2px 16px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 500,
|
||||
...tagProps.style,
|
||||
}}
|
||||
>
|
||||
{tagProps.label}
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -8,7 +8,7 @@ import { connect } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import { deleteModel, updateModel } from '../service';
|
||||
import ClassDataSourceTypeModal from './ClassDataSourceTypeModal';
|
||||
import { ColumnsConfig } from './MetricTableColumnRender';
|
||||
import { ColumnsConfig } from './TableColumnRender';
|
||||
|
||||
import moment from 'moment';
|
||||
import styles from './style.less';
|
||||
@@ -41,6 +41,8 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
|
||||
}
|
||||
};
|
||||
|
||||
const columnsConfig = ColumnsConfig();
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
@@ -86,7 +88,7 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
|
||||
dataIndex: 'status',
|
||||
title: '状态',
|
||||
search: false,
|
||||
render: ColumnsConfig.state.render,
|
||||
render: columnsConfig.state.render,
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
|
||||
@@ -0,0 +1,336 @@
|
||||
import { Space, Tag, Typography } from 'antd';
|
||||
import { StatusEnum } from '../enum';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
|
||||
import { TagsOutlined, ReadOutlined } from '@ant-design/icons';
|
||||
import { history } from 'umi';
|
||||
import { ISemantic } from '../data';
|
||||
import { isString } from 'lodash';
|
||||
import { isArrayOfValues } from '@/utils/utils';
|
||||
import styles from './style.less';
|
||||
import IndicatorStar, { StarType } from '../components/IndicatorStar';
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
|
||||
export const ColumnsConfig = (params?: {
|
||||
indicatorInfo?: {
|
||||
url?: string;
|
||||
starType?: StarType;
|
||||
};
|
||||
}) => {
|
||||
return {
|
||||
description: {
|
||||
render: (_, record: ISemantic.IMetricItem) => {
|
||||
const { description } = record;
|
||||
return (
|
||||
<Paragraph
|
||||
ellipsis={{ tooltip: description, rows: 3 }}
|
||||
style={{ width: 250, marginBottom: 0 }}
|
||||
>
|
||||
{description}
|
||||
</Paragraph>
|
||||
);
|
||||
},
|
||||
},
|
||||
dimensionInfo: {
|
||||
render: (_, record: ISemantic.IDimensionItem) => {
|
||||
const { name, alias, bizName } = record;
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Space>
|
||||
<span style={{ fontWeight: 500 }}>{name}</span>
|
||||
</Space>
|
||||
</div>
|
||||
<div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
|
||||
{bizName}
|
||||
</div>
|
||||
|
||||
{alias && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Space direction="vertical" size={4}>
|
||||
{alias && (
|
||||
<Space
|
||||
size={4}
|
||||
style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
|
||||
>
|
||||
<ReadOutlined />
|
||||
<div style={{ width: 'max-content' }}>别名:</div>
|
||||
<span style={{ marginLeft: 2 }}>
|
||||
<Space size={[0, 8]} wrap>
|
||||
{isString(alias) &&
|
||||
alias.split(',').map((aliasName: string) => {
|
||||
return (
|
||||
<Tag
|
||||
color="#eee"
|
||||
key={aliasName}
|
||||
style={{
|
||||
borderRadius: 44,
|
||||
maxWidth: 90,
|
||||
minWidth: 40,
|
||||
backgroundColor: 'rgba(18, 31, 67, 0.04)',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
maxWidth: 80,
|
||||
color: 'rgb(95, 116, 141)',
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
}}
|
||||
ellipsis={{ tooltip: aliasName }}
|
||||
>
|
||||
{aliasName}
|
||||
</Text>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</span>
|
||||
</Space>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
indicatorInfo: {
|
||||
render: (_, record: ISemantic.IMetricItem) => {
|
||||
const { name, alias, bizName, tags, id, isCollect } = record;
|
||||
let url = `/metric/detail/`;
|
||||
let starType: StarType = 'metric';
|
||||
if (params) {
|
||||
if (params?.indicatorInfo?.url) {
|
||||
url = params.indicatorInfo.url;
|
||||
}
|
||||
if (params?.indicatorInfo?.starType) {
|
||||
starType = params.indicatorInfo.starType;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Space>
|
||||
<a
|
||||
className={styles.textLink}
|
||||
style={{ fontWeight: 500 }}
|
||||
onClick={(event: any) => {
|
||||
history.push(`${url}${id}`);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
href={`/webapp${url}${id}`}
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
<IndicatorStar indicatorId={id} type={starType} initState={isCollect} />
|
||||
{/* <Tag
|
||||
color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
|
||||
style={{ lineHeight: '16px', position: 'relative', top: '-1px' }}
|
||||
>
|
||||
{SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
|
||||
</Tag> */}
|
||||
</Space>
|
||||
</div>
|
||||
<div style={{ color: '#5f748d', fontSize: 14, marginTop: 5, marginLeft: 0 }}>
|
||||
{bizName}
|
||||
</div>
|
||||
|
||||
{(alias || isArrayOfValues(tags)) && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Space direction="vertical" size={4}>
|
||||
{alias && (
|
||||
<Space
|
||||
size={4}
|
||||
style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
|
||||
>
|
||||
<ReadOutlined />
|
||||
<div style={{ width: 'max-content' }}>别名:</div>
|
||||
<span style={{ marginLeft: 2 }}>
|
||||
<Space size={[0, 8]} wrap>
|
||||
{isString(alias) &&
|
||||
alias.split(',').map((aliasName: string) => {
|
||||
return (
|
||||
<Tag
|
||||
color="#eee"
|
||||
key={aliasName}
|
||||
style={{
|
||||
borderRadius: 44,
|
||||
maxWidth: 90,
|
||||
minWidth: 40,
|
||||
backgroundColor: 'rgba(18, 31, 67, 0.04)',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
maxWidth: 80,
|
||||
color: 'rgb(95, 116, 141)',
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
}}
|
||||
ellipsis={{ tooltip: aliasName }}
|
||||
>
|
||||
{aliasName}
|
||||
</Text>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</span>
|
||||
</Space>
|
||||
)}
|
||||
|
||||
{isArrayOfValues(tags) && (
|
||||
<Space
|
||||
size={4}
|
||||
style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
|
||||
>
|
||||
<TagsOutlined />
|
||||
<div style={{ width: 'max-content' }}>标签:</div>
|
||||
<span style={{ marginLeft: 2 }}>
|
||||
<Space size={[0, 8]} wrap>
|
||||
{tags.map((tag: string) => {
|
||||
return (
|
||||
<Tag
|
||||
color="#eee"
|
||||
key={tag}
|
||||
style={{
|
||||
borderRadius: 44,
|
||||
maxWidth: 90,
|
||||
minWidth: 40,
|
||||
backgroundColor: 'rgba(18, 31, 67, 0.04)',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
maxWidth: 80,
|
||||
color: 'rgb(95, 116, 141)',
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
}}
|
||||
ellipsis={{ tooltip: tag }}
|
||||
>
|
||||
{tag}
|
||||
</Text>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</span>
|
||||
</Space>
|
||||
)}
|
||||
{/* <Space size={10}>
|
||||
<Space
|
||||
size={2}
|
||||
style={{ color: '#5f748d', fontSize: 12, position: 'relative', top: '1px' }}
|
||||
>
|
||||
<FieldNumberOutlined style={{ fontSize: 16, position: 'relative', top: '1px' }} />
|
||||
<span>:</span>
|
||||
<span style={{ marginLeft: 0 }}>{id}</span>
|
||||
</Space>
|
||||
<Space size={2} style={{ color: '#5f748d', fontSize: 12 }}>
|
||||
<UserOutlined />
|
||||
<span>:</span>
|
||||
<span style={{ marginLeft: 0 }}>{createdBy}</span>
|
||||
</Space>
|
||||
</Space> */}
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
sensitiveLevel: {
|
||||
render: (_, record: ISemantic.IMetricItem) => {
|
||||
const { sensitiveLevel } = record;
|
||||
return SENSITIVE_LEVEL_COLOR[sensitiveLevel] ? (
|
||||
<Tag
|
||||
color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
|
||||
style={{
|
||||
borderRadius: '40px',
|
||||
padding: '2px 16px',
|
||||
fontSize: '13px',
|
||||
// color: '#8ca3ba',
|
||||
}}
|
||||
>
|
||||
{SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag
|
||||
style={{
|
||||
borderRadius: '40px',
|
||||
padding: '2px 16px',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
>
|
||||
未知
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
state: {
|
||||
render: (status) => {
|
||||
let tagProps: { color: string; label: string; style?: any } = {
|
||||
color: 'default',
|
||||
label: '未知',
|
||||
style: {},
|
||||
};
|
||||
switch (status) {
|
||||
case StatusEnum.ONLINE:
|
||||
tagProps = {
|
||||
// color: 'success',
|
||||
color: 'geekblue',
|
||||
label: '已启用',
|
||||
};
|
||||
break;
|
||||
case StatusEnum.OFFLINE:
|
||||
tagProps = {
|
||||
color: 'default',
|
||||
label: '未启用',
|
||||
style: {
|
||||
color: 'rgb(95, 116, 141)',
|
||||
fontWeight: 400,
|
||||
},
|
||||
};
|
||||
break;
|
||||
case StatusEnum.INITIALIZED:
|
||||
tagProps = {
|
||||
color: 'processing',
|
||||
label: '初始化',
|
||||
};
|
||||
break;
|
||||
case StatusEnum.DELETED:
|
||||
tagProps = {
|
||||
color: 'default',
|
||||
label: '已删除',
|
||||
};
|
||||
break;
|
||||
case StatusEnum.UNAVAILABLE:
|
||||
tagProps = {
|
||||
color: 'default',
|
||||
label: '不可用',
|
||||
};
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<Tag
|
||||
color={tagProps.color}
|
||||
style={{
|
||||
borderRadius: '40px',
|
||||
padding: '2px 16px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 500,
|
||||
...tagProps.style,
|
||||
}}
|
||||
>
|
||||
{tagProps.label}
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,174 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Tag, Space } from 'antd';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import ProCard from '@ant-design/pro-card';
|
||||
import SqlEditor from '@/components/SqlEditor';
|
||||
import FormLabelRequire from './FormLabelRequire';
|
||||
import styles from './style.less';
|
||||
import { ISemantic } from '../data';
|
||||
|
||||
type Props = {
|
||||
typeParams: ISemantic.ITagDefineParams;
|
||||
dimensionList: ISemantic.IDimensionItem[];
|
||||
onFieldChange: (metrics: ISemantic.IMetricTypeParamsItem[]) => void;
|
||||
onSqlChange: (sql: string) => void;
|
||||
};
|
||||
|
||||
const TagDimensionFormTable: React.FC<Props> = ({
|
||||
typeParams,
|
||||
dimensionList,
|
||||
onFieldChange,
|
||||
onSqlChange,
|
||||
}) => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const [tableData, setTableData] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!Array.isArray(dimensionList)) {
|
||||
setTableData([]);
|
||||
return;
|
||||
}
|
||||
setTableData(dimensionList);
|
||||
}, [dimensionList]);
|
||||
|
||||
const [defineTypeParams, setDefineTypeParams] = useState<ISemantic.ITagDefineParams>({
|
||||
expr: typeParams?.expr || '',
|
||||
dependencies: typeParams?.dependencies || [],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setDefineTypeParams({ ...typeParams });
|
||||
}, [typeParams]);
|
||||
|
||||
const [exprString, setExprString] = useState(typeParams?.expr || '');
|
||||
|
||||
const [selectedKeys, setSelectedKeys] = useState<any[]>(() => {
|
||||
return defineTypeParams.dependencies;
|
||||
});
|
||||
|
||||
const [selectedKeysMap, setSelectedKeysMap] = useState<Record<string, boolean>>(() => {
|
||||
return defineTypeParams.dependencies.reduce(
|
||||
(keyMap: Record<string, boolean>, dimensionId: string | number) => {
|
||||
keyMap[`${dimensionId}`] = true;
|
||||
return keyMap;
|
||||
},
|
||||
{},
|
||||
);
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '维度名称',
|
||||
},
|
||||
{
|
||||
dataIndex: 'bizName',
|
||||
title: '英文名称',
|
||||
},
|
||||
];
|
||||
|
||||
const handleUpdateKeys = (updateKeys: Record<string, boolean>) => {
|
||||
setSelectedKeysMap(updateKeys);
|
||||
const selectedKeys: number[] = [];
|
||||
const dimenisons = dimensionList.reduce((list: any[], item) => {
|
||||
const { bizName, id } = item;
|
||||
if (updateKeys[id] === true) {
|
||||
selectedKeys.push(id);
|
||||
list.push({
|
||||
bizName,
|
||||
id,
|
||||
});
|
||||
}
|
||||
return list;
|
||||
}, []);
|
||||
setSelectedKeys(selectedKeys);
|
||||
onFieldChange(dimenisons);
|
||||
};
|
||||
|
||||
const rowSelection = {
|
||||
selectedRowKeys: selectedKeys,
|
||||
onSelect: (record: ISemantic.IDimensionItem, selected: boolean) => {
|
||||
const updateKeys = { ...selectedKeysMap, [record.id]: selected };
|
||||
handleUpdateKeys(updateKeys);
|
||||
},
|
||||
onSelectAll: (
|
||||
selected: boolean,
|
||||
selectedRows: ISemantic.IDimensionItem[],
|
||||
changeRows: ISemantic.IDimensionItem[],
|
||||
) => {
|
||||
const updateKeys = changeRows.reduce(
|
||||
(keyMap: Record<string, boolean>, item: ISemantic.IDimensionItem) => {
|
||||
keyMap[item.id] = selected;
|
||||
return keyMap;
|
||||
},
|
||||
{},
|
||||
);
|
||||
handleUpdateKeys({ ...selectedKeysMap, ...updateKeys });
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
headerTitle={<FormLabelRequire title="维度列表" />}
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
// pagination={false}
|
||||
search={false}
|
||||
toolbar={{
|
||||
search: {
|
||||
placeholder: '请输入维度名称',
|
||||
onSearch: (value: string) => {
|
||||
setTableData(
|
||||
dimensionList.reduce(
|
||||
(data: ISemantic.IDimensionItem[], item: ISemantic.IDimensionItem) => {
|
||||
if (item.name.includes(value)) {
|
||||
data.push(item);
|
||||
}
|
||||
return data;
|
||||
},
|
||||
[],
|
||||
),
|
||||
);
|
||||
},
|
||||
},
|
||||
}}
|
||||
pagination={{ defaultPageSize: 10 }}
|
||||
size="small"
|
||||
options={false}
|
||||
tableAlertRender={false}
|
||||
scroll={{ y: 500 }}
|
||||
rowSelection={rowSelection}
|
||||
/>
|
||||
<ProCard title={<FormLabelRequire title="表达式" />} tooltip="">
|
||||
<p
|
||||
className={styles.desc}
|
||||
style={{ border: 'unset', padding: 0, marginBottom: 20, marginLeft: 2 }}
|
||||
>
|
||||
已创建的维度已经过聚合，因此通过这些维度来创建新的维度无需指定
|
||||
<Tag color="#2499ef14" className={styles.markerTag}>
|
||||
聚合函数
|
||||
</Tag>
|
||||
，如根据维度c和维度d来创建新的维度，因为维度本身带有聚合函数，因此表达式可以写成:
|
||||
c+d-100
|
||||
</p>
|
||||
<SqlEditor
|
||||
value={exprString}
|
||||
onChange={(sql: string) => {
|
||||
const expr = sql;
|
||||
setExprString(expr);
|
||||
onSqlChange?.(expr);
|
||||
}}
|
||||
height={'150px'}
|
||||
/>
|
||||
</ProCard>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagDimensionFormTable;
|
||||
@@ -302,37 +302,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.overviewExtraContainer {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
.extraWrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.extraStatistic {
|
||||
display: inline-flex;
|
||||
color: rgba(42, 46, 54, 0.65);
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5714285714285714;
|
||||
list-style: none;
|
||||
.extraTitle {
|
||||
font-size: 12px;
|
||||
margin-inline-end: 6px;
|
||||
margin-block-end: 0;
|
||||
margin-bottom: 4px;
|
||||
color: rgba(42, 46, 54, 0.45);
|
||||
}
|
||||
.extraValue {
|
||||
font-size: 12px;
|
||||
color: rgba(42, 46, 54, 0.65);
|
||||
display: inline-block;
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infoTagList{
|
||||
.siteTagPlus {
|
||||
|
||||
Reference in New Issue
Block a user