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

[improvement][headless-fe] Optimized the tag setting system. (#846)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* [improvement][headless-fe] Optimized the tag setting system.
This commit is contained in:
tristanliu
2024-03-21 00:53:16 +08:00
committed by GitHub
parent 754902a67e
commit 01bfb57149
45 changed files with 2189 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Market.tsx
View File

@@ -6,10 +6,10 @@ import type { Dispatch } from 'umi';
import { connect, useModel } from 'umi';
import type { StateType } from '../model';
import { SENSITIVE_LEVEL_ENUM } from '../constant';
import { getTagList, deleteTag, batchUpdateTagStatus } from '../service';
import { getTagList, deleteTag, batchUpdateTagStatus, getTagObjectList } from '../service';
import TagFilter from './components/TagFilter';
import TagInfoCreateForm from './components/TagInfoCreateForm';
import { SemanticNodeType, StatusEnum } from '../enum';
import { StatusEnum } from '../enum';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
@@ -54,12 +54,27 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const [hasAllPermission, setHasAllPermission] = useState<boolean>(true);
const [tagObjectList, setTagObjectList] = useState<ISemantic.ITagObjectItem[]>([]);
const actionRef = useRef<ActionType>();
useEffect(() => {
queryTagList(filterParams);
queryTagObjectList();
}, []);
const queryTagObjectList = async () => {
const { code, msg, data } = await getTagObjectList({});
if (code === 200) {
setTagObjectList(data);
const target = data[0];
if (target) {
queryTagList({ ...filterParams, tagObjectId: target.id });
}
return;
}
message.error(msg);
};
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
@@ -167,17 +182,26 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
width: 300,
render: columnsConfig.description.render,
},
// {
// dataIndex: 'status',
// title: '状态',
// width: 180,
// search: false,
// render: columnsConfig.state.render,
// },
{
dataIndex: 'status',
title: '状态',
width: 180,
dataIndex: 'domainName',
title: '所属主题域',
search: false,
},
{
dataIndex: 'tagObjectName',
title: '所属对象',
search: false,
render: columnsConfig.state.render,
},
{
dataIndex: 'createdBy',
title: '创建人',
// width: 150,
search: false,
},
{
@@ -234,7 +258,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const handleFilterChange = async (filterParams: {
key: string;
sensitiveLevel: string[];
sensitiveLevel: string;
showFilter: string[];
type: string;
}) => {
@@ -296,6 +320,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
<>
<div className={styles.TagFilterWrapper}>
<TagFilter
tagObjectList={tagObjectList}
initFilterValues={filterParams}
onFiltersChange={(_, values) => {
if (_.showType !== undefined) {
@@ -321,22 +346,22 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
return false;
}}
sticky={{ offsetHeader: 0 }}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
toolBarRender={() => [
<BatchCtrlDropDownButton
key="ctrlBtnList"
downloadLoading={downloadLoading}
onDeleteConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
hiddenList={['batchDownload']}
disabledList={hasAllPermission ? [] : ['batchStart', 'batchStop', 'batchDelete']}
onMenuClick={onMenuClick}
/>,
]}
// rowSelection={{
// type: 'checkbox',
// ...rowSelection,
// }}
// toolBarRender={() => [
// <BatchCtrlDropDownButton
// key="ctrlBtnList"
// downloadLoading={downloadLoading}
// onDeleteConfirm={() => {
// queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
// }}
// hiddenList={['batchDownload', 'batchStart', 'batchStop']}
// disabledList={hasAllPermission ? [] : ['batchStart', 'batchDelete']}
// onMenuClick={onMenuClick}
// />,
// ]}
loading={loading}
onChange={(data: any) => {
const { current, pageSize, total } = data;

41
webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagFilter.tsx
View File

@@ -1,20 +1,22 @@
import { Form, Input, Space, Row, Col, Switch } from 'antd';
import { Form, Input, Space, Row, Col, Switch, Select } from 'antd';
import StandardFormRow from '@/components/StandardFormRow';
import TagSelect from '@/components/TagSelect';
import React, { useEffect } from 'react';
import { SENSITIVE_LEVEL_OPTIONS } from '../../constant';
import { SearchOutlined } from '@ant-design/icons';
import DomainTreeSelect from '../../components/DomainTreeSelect';
import { ISemantic } from '../../data';
import styles from '../style.less';
const FormItem = Form.Item;
type Props = {
tagObjectList: ISemantic.ITagObjectItem[];
initFilterValues?: any;
onFiltersChange: (_: any, values: any) => void;
};
const TagFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange }) => {
const TagFilter: React.FC<Props> = ({ tagObjectList, initFilterValues = {}, onFiltersChange }) => {
const [form] = Form.useForm();
useEffect(() => {
@@ -23,6 +25,14 @@ const TagFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange })
});
}, [form]);
useEffect(() => {
const target = tagObjectList?.[0];
if (!target) {
return;
}
form.setFieldValue('tagObjectId', target.id);
}, [tagObjectList]);
const handleValuesChange = (value: any, values: any) => {
localStorage.setItem('metricMarketShowType', !!values.showType ? '1' : '0');
onFiltersChange(value, values);
@@ -98,17 +108,20 @@ const TagFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange })
</div>
</StandardFormRow>
<Space size={40}>
{/* <StandardFormRow key="showType" title="切换为卡片" block>
<FormItem name="showType" valuePropName="checked">
<Switch size="small" />
<StandardFormRow key="tagObjectId" title="所属对象" block>
<FormItem name="tagObjectId">
<Select
style={{ minWidth: 150 }}
placeholder="请选择所属对象"
options={tagObjectList.map((item: ISemantic.ITagObjectItem) => {
return {
label: item.name,
value: item.id,
};
})}
/>
</FormItem>
</StandardFormRow> */}
{/* <StandardFormRow key="onlyShowMe" title="仅显示我的" block>
<FormItem name="onlyShowMe" valuePropName="checked">
<Switch size="small" />
</FormItem>
</StandardFormRow> */}
</StandardFormRow>
{filterList.map((item) => {
const { title, key, options } = item;
return (
@@ -125,11 +138,11 @@ const TagFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange })
</StandardFormRow>
);
})}
<StandardFormRow key="domainIds" title="所属主题域" block>
{/* <StandardFormRow key="domainIds" title="所属主题域" block>
<FormItem name="domainIds">
<DomainTreeSelect />
</FormItem>
</StandardFormRow>
</StandardFormRow> */}
</Space>
</Form>
);

6
webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoSider.tsx
View File

@@ -21,8 +21,6 @@ import {
import { ISemantic } from '../../data';
import IndicatorStar from '../../components/IndicatorStar';
const { Text } = Typography;
type Props = {
tagData: ISemantic.ITagItem;
domainManger: StateType;
@@ -39,8 +37,8 @@ const TagInfoSider: React.FC<Props> = ({ tagData, dimensionMap, metricMap }) =>
if (!tagData) {
return <></>;
}
const { tagDefineType, tagDefineParams } = tagData;
const { dependencies } = tagDefineParams;
const { tagDefineType, tagDefineParams = {} } = tagData;
const { dependencies } = tagDefineParams as any;
if (!Array.isArray(dependencies)) {
return <></>;
}

163
webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagObjectCreateForm.tsx Normal file
View File

@@ -0,0 +1,163 @@
import React, { useEffect, useRef } from 'react';
import { Form, Button, Modal, Steps, Input, Select, message } from 'antd';
import { formLayout } from '@/components/FormHelper/utils';
import styles from '../../components/style.less';
import { createTagObject, updateTagObject } from '../../service';
import { ISemantic } from '../../data';
export type CreateFormProps = {
datasourceId?: number;
domainId: number;
createModalVisible: boolean;
tagItem?: ISemantic.ITagItem;
onCancel?: () => void;
onSubmit?: (values: any) => void;
};
const FormItem = Form.Item;
const { TextArea } = Input;
const TagObjectCreateForm: React.FC<CreateFormProps> = ({
domainId,
onCancel,
createModalVisible,
tagItem,
onSubmit,
}) => {
const isEdit = !!tagItem?.id;
const formValRef = useRef({} as any);
const [form] = Form.useForm();
const updateFormVal = (val: any) => {
const formVal = {
...formValRef.current,
...val,
};
formValRef.current = formVal;
};
const handleNext = async () => {
const fieldsValue = await form.validateFields();
const submitForm = {
...formValRef.current,
...fieldsValue,
};
updateFormVal(submitForm);
await saveTag(submitForm);
};
const initData = () => {
if (!tagItem) {
return;
}
const initValue = {
...tagItem,
};
const editInitFormVal = {
...formValRef.current,
...initValue,
};
updateFormVal(editInitFormVal);
form.setFieldsValue(initValue);
};
useEffect(() => {
if (isEdit) {
initData();
}
}, [tagItem]);
const saveTag = async (fieldsValue: any) => {
const queryParams = {
domainId: isEdit ? tagItem.domainId : domainId,
...fieldsValue,
typeEnum: 'TAG_OBJECT',
};
let saveTagQuery = createTagObject;
if (queryParams.id) {
saveTagQuery = updateTagObject;
}
const { code, msg } = await saveTagQuery(queryParams);
if (code === 200) {
message.success('编辑标签成功');
onSubmit?.(queryParams);
return;
}
message.error(msg);
};
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
name="description"
label={'描述'}
rules={[{ required: true, message: '请输入业务口径' }]}
>
<TextArea placeholder="请输入业务口径" />
</FormItem>
</>
);
};
const renderFooter = () => {
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}
>
<>
<Form
{...formLayout}
form={form}
initialValues={{
...formValRef.current,
}}
className={styles.form}
>
{renderContent()}
</Form>
</>
</Modal>
);
};
export default TagObjectCreateForm;

278
webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagObjectTable.tsx Normal file
View File

@@ -0,0 +1,278 @@
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 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 { getTagObjectList, deleteTagObject, batchUpdateTagStatus } from '../../service';
import TagObjectCreateForm from './TagObjectCreateForm';
// import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
import TableHeaderFilter from '../../components/TableHeaderFilter';
import moment from 'moment';
import styles from '../style.less';
import { ISemantic } from '../../data';
import { ColumnsConfig } from '../../components/TableColumnRender';
import TagValueSettingModal from './TagValueSettingModal';
type Props = {
dispatch: Dispatch;
domainManger: StateType;
};
const TagObjectTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { selectModelId: modelId, selectDomainId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const [tagItem, setTagItem] = useState<ISemantic.ITagItem>();
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [tableData, setTableData] = useState<ISemantic.ITagItem[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const defaultPagination = {
current: 1,
pageSize: 20,
total: 0,
};
const [pagination, setPagination] = useState(defaultPagination);
const [filterParams, setFilterParams] = useState<Record<string, any>>({});
const [tagValueSettingModalVisible, setTagValueSettingModalVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
const { code, msg } = await batchUpdateTagStatus({
ids,
status,
});
if (code === 200) {
queryTagList({ ...filterParams, ...defaultPagination });
return;
}
message.error(msg);
};
useEffect(() => {
queryTagList({ ...filterParams, ...defaultPagination });
}, [filterParams]);
const queryTagList = async (params: any) => {
setLoading(true);
const { code, data, msg } = await getTagObjectList({
...params,
domainId: selectDomainId,
status: StatusEnum.ONLINE,
});
setLoading(false);
if (code === 200) {
setTableData(data);
} else {
message.error(msg);
setTableData([]);
}
};
const columnsConfig = ColumnsConfig();
const columns: ProColumns[] = [
{
dataIndex: 'id',
title: 'ID',
width: 80,
search: false,
},
{
dataIndex: 'name',
title: '标签对象',
// width: 280,
// width: '30%',
search: false,
},
{
dataIndex: 'description',
title: '描述',
search: false,
render: columnsConfig.description.render,
},
{
dataIndex: 'status',
title: '状态',
search: false,
render: columnsConfig.state.render,
},
{
dataIndex: 'createdBy',
title: '创建人',
search: false,
},
// {
// dataIndex: 'updatedAt',
// title: '更新时间',
// search: false,
// render: (value: any) => {
// return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
// },
// },
{
title: '操作',
dataIndex: 'x',
valueType: 'option',
width: 150,
render: (_, record) => {
return (
<Space className={styles.ctrlBtnContainer}>
<Button
type="link"
key="metricEditBtn"
onClick={() => {
setTagItem(record);
setCreateModalVisible(true);
}}
>
编辑
</Button>
<Popconfirm
title="确认删除？"
okText="是"
cancelText="否"
onConfirm={async () => {
const { code, msg } = await deleteTagObject(record.id);
if (code === 200) {
setTagItem(undefined);
queryTagList({ ...filterParams, ...defaultPagination });
} else {
message.error(msg);
}
}}
>
<Button
type="link"
key="metricDeleteBtn"
onClick={() => {
setTagItem(record);
}}
>
删除
</Button>
</Popconfirm>
</Space>
);
},
},
];
const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys);
},
};
return (
<>
<ProTable
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft} ${styles.disabledSearchTable} `}
actionRef={actionRef}
// headerTitle={
// <TableHeaderFilter
// components={[
// {
// label: '标签搜索',
// component: (
// <Input.Search
// style={{ width: 280 }}
// placeholder="请输入ID/标签名称/英文名称"
// onSearch={(value) => {
// setFilterParams((preState) => {
// return {
// ...preState,
// key: value,
// };
// });
// }}
// />
// ),
// },
// ]}
// />
// }
rowKey="id"
loading={loading}
search={false}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
columns={columns}
params={{ modelId }}
dataSource={tableData}
// pagination={pagination}
tableAlertRender={() => {
return false;
}}
onChange={(data: any) => {
const { current, pageSize, total } = data;
const currentPagin = {
current,
pageSize,
total,
};
setPagination(currentPagin);
queryTagList({ ...filterParams, ...currentPagin });
}}
sticky={{ offsetHeader: 0 }}
size="large"
options={{ reload: false, density: false, fullScreen: false }}
toolBarRender={() => [
<Button
key="create"
type="primary"
onClick={() => {
setTagItem(undefined);
setCreateModalVisible(true);
}}
>
创建标签对象
</Button>,
]}
/>
{createModalVisible && (
<TagObjectCreateForm
domainId={selectDomainId}
createModalVisible={createModalVisible}
tagItem={tagItem}
onSubmit={() => {
setCreateModalVisible(false);
queryTagList({ ...filterParams, ...defaultPagination });
}}
onCancel={() => {
setCreateModalVisible(false);
}}
/>
)}
{tagValueSettingModalVisible && (
<TagValueSettingModal
open={tagValueSettingModalVisible}
tagItem={tagItem}
onCancel={() => {
setTagValueSettingModalVisible(false);
}}
onSubmit={() => {
setTagValueSettingModalVisible(false);
}}
/>
)}
</>
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(TagObjectTable);

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagTrendSection.tsx
View File

@@ -28,7 +28,7 @@ const TagTrendSection: React.FC<Props> = ({ tagData }) => {
const queryTagValueDistribution = async (params: any) => {
setTagTrendLoading(true);
const { data, code } = await getTagValueDistribution({
itemId: params.id,
id: params.id,
dateConf: {
unit: 5,
},