mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-20 06:34:55 +00:00
[improvement][headless-fe] Added term management functionality. (#990)
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. * [improvement][semantic-fe] Fixing the logic error in the dimension value setting. * [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information. * [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience. * [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas. * [improvement][semantic-fe] Changing the line type for canvas connections. * [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless". * [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model. * [improvement][semantic-fe] Updating the logic for the fieldName. * [improvement][semantic-fe] Adjusting the position of the metrics tab. * [improvement][semantic-fe] Changing the 字段名称 to 英文名称. * [improvement][semantic-fe] Fix metric measurement deletion. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI adjustment for metric details page. * [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty. * [improvement][semantic-fe] Added field type and metric type to the metric creation options. * [improvement][semantic-fe] The organization structure selection feature has been added to the permission management. * [improvement][semantic-fe] Improved user experience for the metric list. * [improvement][semantic-fe] fix update the metric list. * [improvement][headless-fe] Added view management functionality. * [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system. * [improvement][headless-fe] Added model editing side effect detection. * [improvement][headless-fe] Fixed the logic error in view editing. * [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings. * [improvement][headless-fe] Added the ability to hide the Q&A settings entry point. * [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation. * [improvement][headless-fe] Added search functionality to the field list in model editing. * [improvement][headless-fe] fix the field list in model editing * [improvement][headless-fe] Restructured the data for the dimension value settings interface. * [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts. * [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function. * [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process. * [improvement][headless-fe] Replaced the term "view" with "dataset" * [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target. * [improvement][headless-fe] Enhanced dataset creation to support the tag mode. * [improvement][headless-fe] Added tag value setting. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead. * [improvement][headless-fe] Added search functionality to model management. * [improvement][headless-fe] Removed field null validation during model editing. * [improvement][headless-fe] Updated the batch operation button component. * [improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings. * [improvement][headless-fe] Adjusted the length of the input field for model editing names. * [improvement][headless-fe] Lock the version of the @ant-design/pro-table component and replace it with @ant-design/pro-components. * [improvement][headless-fe] Optimized the style of the metrics market and tags market. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] Fixed the issue where the conditions for metric measurement creation were not being saved correctly. * [improvement][headless-fe] Default value setting for hiding dimensions. * [improvement][headless-fe] Updated the file imports in the project. * [improvement][headless-fe] Adjusted the logic for displaying the tab in the theme domain. * [improvement][headless-fe] Added term management functionality.
This commit is contained in:
tristanliu
@@ -7,7 +7,7 @@ import ClassMetricTable from './ClassMetricTable';
|
||||
import PermissionSection from './Permission/PermissionSection';
|
||||
// import ClassTagTable from '../Insights/components/ClassTagTable';
|
||||
import TagObjectTable from '../Insights/components/TagObjectTable';
|
||||
|
||||
import TermTable from '../components/Term/TermTable';
|
||||
import OverView from './OverView';
|
||||
import styles from './style.less';
|
||||
import type { StateType } from '../model';
|
||||
@@ -76,7 +76,7 @@ const DomainManagerTab: React.FC<Props> = ({
|
||||
},
|
||||
{
|
||||
label: '数据集管理',
|
||||
key: 'dataSetManange',
|
||||
key: 'dataSetManage',
|
||||
hidden: !!domainData?.parentId,
|
||||
children: (
|
||||
<View
|
||||
@@ -89,10 +89,16 @@ const DomainManagerTab: React.FC<Props> = ({
|
||||
},
|
||||
{
|
||||
label: '标签对象管理',
|
||||
key: 'tagObjectManange',
|
||||
key: 'tagObjectManage',
|
||||
hidden: !!domainData?.parentId,
|
||||
children: <TagObjectTable />,
|
||||
},
|
||||
{
|
||||
label: '术语管理',
|
||||
key: 'termManage',
|
||||
hidden: !!domainData?.parentId,
|
||||
children: <TermTable />,
|
||||
},
|
||||
{
|
||||
label: '画布',
|
||||
key: 'xflow',
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Form, Button, Modal, Input, Select } from 'antd';
|
||||
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import styles from '../style.less';
|
||||
|
||||
import { ISemantic } from '../../data';
|
||||
|
||||
export type CreateFormProps = {
|
||||
createModalVisible: boolean;
|
||||
termItem?: ISemantic.ITermItem;
|
||||
onCancel?: () => void;
|
||||
onSubmit?: (values: any) => void;
|
||||
};
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const TermCreateForm: React.FC<CreateFormProps> = ({
|
||||
onCancel,
|
||||
createModalVisible,
|
||||
termItem,
|
||||
onSubmit,
|
||||
}) => {
|
||||
const isEdit = !!termItem?.name;
|
||||
const formValRef = useRef({} as any);
|
||||
const [form] = Form.useForm();
|
||||
const updateFormVal = (val: any) => {
|
||||
const formVal = {
|
||||
...formValRef.current,
|
||||
...val,
|
||||
};
|
||||
formValRef.current = formVal;
|
||||
};
|
||||
|
||||
const initData = () => {
|
||||
if (!termItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
const initValue = {
|
||||
...termItem,
|
||||
};
|
||||
const editInitFormVal = {
|
||||
...formValRef.current,
|
||||
...initValue,
|
||||
};
|
||||
|
||||
updateFormVal(editInitFormVal);
|
||||
form.setFieldsValue(initValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
initData();
|
||||
}
|
||||
}, [termItem]);
|
||||
|
||||
const renderContent = () => {
|
||||
return (
|
||||
<>
|
||||
<FormItem name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
|
||||
<Input placeholder="名称不可重复" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="similarTerms"
|
||||
label={'近义词'}
|
||||
rules={[{ required: true, message: '请输入业务口径' }]}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
placeholder="输入近义词后回车确认，多近义词输入、复制粘贴支持英文逗号自动分隔"
|
||||
tokenSeparators={[',']}
|
||||
maxTagCount={9}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="description" label={'描述'}>
|
||||
<TextArea placeholder="请输入描述" />
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={async () => {
|
||||
const fieldsValue = await form.validateFields();
|
||||
const submitForm = {
|
||||
...formValRef.current,
|
||||
...fieldsValue,
|
||||
};
|
||||
updateFormVal(submitForm);
|
||||
onSubmit?.(submitForm);
|
||||
}}
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
forceRender
|
||||
width={800}
|
||||
style={{ top: 48 }}
|
||||
destroyOnClose
|
||||
title={`${isEdit ? '编辑' : '新建'}术语`}
|
||||
maskClosable={false}
|
||||
open={createModalVisible}
|
||||
footer={renderFooter()}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
initialValues={{
|
||||
...formValRef.current,
|
||||
}}
|
||||
className={styles.form}
|
||||
>
|
||||
{renderContent()}
|
||||
</Form>
|
||||
</>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default TermCreateForm;
|
||||
@@ -0,0 +1,198 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { ProTable } from '@ant-design/pro-components';
|
||||
import { message, Button, Space, Popconfirm, Typography } from 'antd';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import { getTermList, saveOrUpdate } from '../../service';
|
||||
|
||||
import styles from '../style.less';
|
||||
import { ISemantic } from '../../data';
|
||||
import { ColumnsConfig } from '../../components/TableColumnRender';
|
||||
import TermCreateForm from './TermCreateForm';
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
|
||||
type Props = {
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const TermTable: React.FC<Props> = ({ domainManger }) => {
|
||||
const { selectDomainId } = domainManger;
|
||||
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
|
||||
const [termItem, setTermItem] = useState<ISemantic.ITermItem>();
|
||||
|
||||
const [tableData, setTableData] = useState<ISemantic.ITermItem[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
useEffect(() => {
|
||||
queryTagList();
|
||||
}, []);
|
||||
|
||||
const queryTagList = async () => {
|
||||
setLoading(true);
|
||||
const { code, data, msg } = await getTermList(selectDomainId);
|
||||
setLoading(false);
|
||||
if (code === 200) {
|
||||
setTableData(data?.terms || []);
|
||||
} else {
|
||||
message.error(msg);
|
||||
setTableData([]);
|
||||
}
|
||||
};
|
||||
|
||||
const queryTermConfig = async (terms: ISemantic.ITermItem[]) => {
|
||||
const { code, msg } = await saveOrUpdate({
|
||||
domainId: selectDomainId,
|
||||
terms,
|
||||
});
|
||||
setLoading(false);
|
||||
if (code === 200) {
|
||||
setTableData(terms);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
const saveTermConfig = (termItem: ISemantic.ITermItem) => {
|
||||
const hasTerm = tableData.find((item) => item.name === termItem.name);
|
||||
let terms = [];
|
||||
if (hasTerm) {
|
||||
terms = tableData.map((item) => {
|
||||
if (item.name === termItem.name) {
|
||||
return {
|
||||
...item,
|
||||
...termItem,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
terms = [...tableData, termItem];
|
||||
}
|
||||
queryTermConfig(terms);
|
||||
};
|
||||
|
||||
const deleteTermConfig = (termItem: ISemantic.ITermItem) => {
|
||||
const terms = tableData.filter((item) => item.name !== termItem.name);
|
||||
queryTermConfig(terms);
|
||||
};
|
||||
|
||||
const columnsConfig = ColumnsConfig();
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '名称',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'similarTerms',
|
||||
title: '近义词',
|
||||
search: false,
|
||||
render: (_: string[]) => {
|
||||
const similarTerms = Array.isArray(_) ? _.join(',') : '-';
|
||||
return (
|
||||
<Paragraph
|
||||
ellipsis={{ tooltip: similarTerms, rows: 3 }}
|
||||
style={{ width: 350, marginBottom: 0 }}
|
||||
>
|
||||
{similarTerms}
|
||||
</Paragraph>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
search: false,
|
||||
render: columnsConfig.description.render,
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
width: 150,
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<Space className={styles.ctrlBtnContainer}>
|
||||
<Button
|
||||
type="link"
|
||||
key="metricEditBtn"
|
||||
onClick={() => {
|
||||
setTermItem(record);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={() => {
|
||||
deleteTermConfig(record);
|
||||
}}
|
||||
>
|
||||
<Button type="link" key="metricDeleteBtn">
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable
|
||||
className={`${styles.classTable} ${styles.disabledSearchTable} `}
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
search={false}
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
tableAlertRender={() => {
|
||||
return false;
|
||||
}}
|
||||
sticky={{ offsetHeader: 0 }}
|
||||
size="large"
|
||||
options={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setTermItem(undefined);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
创建术语
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
{createModalVisible && (
|
||||
<TermCreateForm
|
||||
createModalVisible={createModalVisible}
|
||||
termItem={termItem}
|
||||
onSubmit={(termData) => {
|
||||
saveTermConfig(termData);
|
||||
setCreateModalVisible(false);
|
||||
}}
|
||||
onCancel={() => {
|
||||
setCreateModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(TermTable);
|
||||
Reference in New Issue
Block a user