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

* [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.
This commit is contained in:
tristanliu
2024-03-29 14:33:35 +08:00
committed by GitHub
parent 8cdd0b001a
commit 1ab88360ac
31 changed files with 1364 additions and 301 deletions

View File

@@ -40,7 +40,12 @@ const ROUTES = [
name: 'semanticModel',
envEnableList: [ENV_KEY.SEMANTIC],
},
{
path: '/plugin',
name: 'plugin',
component: './ChatPlugin',
envEnableList: [ENV_KEY.CHAT],
},
{
path: '/metric',
name: 'metric',
@@ -93,12 +98,6 @@ const ROUTES = [
],
},
{
path: '/plugin',
name: 'plugin',
component: './ChatPlugin',
envEnableList: [ENV_KEY.CHAT],
},
{
path: '/login',
name: 'login',

View File

@@ -73,7 +73,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
const [tagObjectIdState, setTagObjectIdState] = useState(modelItem?.tagObjectId);
const formValRef = useRef(initFormVal as any);
const [form] = Form.useForm();
const { databaseConfigList, selectModelId: modelId, selectDomainId } = domainManger;
const { databaseConfigList, selectModelId: modelId, selectDomainId, domainData } = domainManger;
const updateFormVal = (val: any) => {
formValRef.current = val;
};
@@ -106,7 +106,9 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
const backward = () => setCurrentStep(currentStep - 1);
const queryTagObjectList = async () => {
const { code, msg, data } = await getTagObjectList({ domainId: selectDomainId });
const { code, msg, data } = await getTagObjectList({
domainId: domainData?.parentId || domainData?.id,
});
if (code === 200) {
setTagObjectList(data);

View File

@@ -136,7 +136,6 @@ const DataSourceFieldForm: React.FC<Props> = ({
width: 185,
render: (_: any, record: FieldItem) => {
const { type } = record;
console.log(record, 3333);
if (type === EnumDataSourceType.PRIMARY) {
return (
<Space>

View File

@@ -6,7 +6,7 @@ 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, getTagObjectList } from '../service';
import { getTagList, deleteTag, batchDeleteTag, getTagObjectList } from '../service';
import TagFilter from './components/TagFilter';
import TagInfoCreateForm from './components/TagInfoCreateForm';
import { StatusEnum } from '../enum';
@@ -46,9 +46,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const [dataSource, setDataSource] = useState<ISemantic.ITagItem[]>([]);
const [tagItem, setTagItem] = useState<ISemantic.ITagItem>();
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [filterParams, setFilterParams] = useState<Record<string, any>>({
showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
});
const [filterParams, setFilterParams] = useState<Record<string, any>>({});
const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
@@ -66,23 +64,36 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { code, msg, data } = await getTagObjectList({});
if (code === 200) {
setTagObjectList(data);
const target = data[0];
if (target) {
queryTagList({ ...filterParams, tagObjectId: target.id });
}
// const target = data[0];
// if (target) {
// queryTagList({ ...filterParams, tagObjectId: target.id });
// }
return;
}
message.error(msg);
};
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
// const getTagList = (ids: React.Key[])=>{
// const filterItem = dataSource.filter((item)=>{
// return ids.includes(item.id);
// });
// const dimension = {
// }
// filterItem.forEach((item)=>{
// })
// }
const queryBatchDeleteTag = async (ids: React.Key[]) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
const { code, msg } = await batchUpdateTagStatus({
const { code, msg } = await batchDeleteTag([
{
ids,
status,
});
},
]);
if (code === 200) {
queryTagList(filterParams);
return;
@@ -94,6 +105,11 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
if (!disabledLoading) {
setLoading(true);
}
if (!params.tagObjectId) {
setLoading(false);
setDataSource([]);
return;
}
const { code, data, msg } = await getTagList({
...pagination,
...params,
@@ -191,12 +207,12 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
// },
{
dataIndex: 'domainName',
title: '所属主题域',
title: '主题域',
search: false,
},
{
dataIndex: 'tagObjectName',
title: '所属对象',
title: '标签对象',
search: false,
},
{
@@ -221,14 +237,14 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
if (record.hasAdminRes) {
return (
<Space>
<a
{/* <a
key="metricEditBtn"
onClick={() => {
handleMetricEdit(record);
}}
>
编辑
</a>
</a> */}
<Popconfirm
title="确认删除?"
@@ -303,18 +319,18 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
// }),
};
const onMenuClick = (key: string) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
break;
case 'batchStop':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
break;
default:
break;
}
};
// const onMenuClick = (key: string) => {
// switch (key) {
// case 'batchStart':
// queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
// break;
// case 'batchStop':
// queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
// break;
// default:
// break;
// }
// };
return (
<>
@@ -322,6 +338,13 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
<TagFilter
tagObjectList={tagObjectList}
initFilterValues={filterParams}
onFilterInit={(values) => {
setFilterParams({
...filterParams,
...values,
});
queryTagList(values);
}}
onFiltersChange={(_, values) => {
if (_.showType !== undefined) {
setLoading(true);
@@ -346,22 +369,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', 'batchStart', 'batchStop']}
// disabledList={hasAllPermission ? [] : ['batchStart', 'batchDelete']}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
toolBarRender={() => [
<BatchCtrlDropDownButton
key="ctrlBtnList"
downloadLoading={downloadLoading}
onDeleteConfirm={() => {
queryBatchDeleteTag(selectedRowKeys);
}}
hiddenList={['batchDownload', 'batchStart', 'batchStop']}
disabledList={hasAllPermission ? [] : ['batchStart', 'batchDelete']}
// onMenuClick={onMenuClick}
// />,
// ]}
/>,
]}
loading={loading}
onChange={(data: any) => {
const { current, pageSize, total } = data;

View File

@@ -1,7 +1,7 @@
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 React, { useEffect, useState, useRef } from 'react';
import { SENSITIVE_LEVEL_OPTIONS } from '../../constant';
import { SearchOutlined } from '@ant-design/icons';
import DomainTreeSelect from '../../components/DomainTreeSelect';
@@ -13,10 +13,16 @@ const FormItem = Form.Item;
type Props = {
tagObjectList: ISemantic.ITagObjectItem[];
initFilterValues?: any;
onFilterInit?: (values: any) => void;
onFiltersChange: (_: any, values: any) => void;
};
const TagFilter: React.FC<Props> = ({ tagObjectList, initFilterValues = {}, onFiltersChange }) => {
const TagFilter: React.FC<Props> = ({
tagObjectList,
initFilterValues = {},
onFilterInit,
onFiltersChange,
}) => {
const [form] = Form.useForm();
useEffect(() => {
@@ -25,16 +31,45 @@ const TagFilter: React.FC<Props> = ({ tagObjectList, initFilterValues = {}, onFi
});
}, [form]);
const [currentDomainId, setCurrentDomainId] = useState<number>();
const [tagObjectOptions, setTagObjectOptions] = useState<OptionsItem[]>([]);
const initState = useRef<boolean>(false);
useEffect(() => {
const target = tagObjectList?.[0];
if (!target) {
return;
const options = tagObjectList
.filter((item) => {
if (currentDomainId) {
return item.domainId === currentDomainId;
} else {
return true;
}
form.setFieldValue('tagObjectId', target.id);
}, [tagObjectList]);
})
.map((item: ISemantic.ITagObjectItem) => {
return {
label: item.name,
value: item.id,
};
});
setTagObjectOptions(options);
const target = options[0];
form.setFieldValue('tagObjectId', target?.value);
if (currentDomainId && target?.value && !initState.current) {
initState.current = true;
const data = form.getFieldsValue();
onFilterInit?.({ ...data, tagObjectId: target?.value });
}
}, [currentDomainId, tagObjectList]);
// useEffect(() => {
// if (currentDomainId) {
// onFilterInit?.();
// }
// }, [currentDomainId])
const handleValuesChange = (value: any, values: any) => {
localStorage.setItem('metricMarketShowType', !!values.showType ? '1' : '0');
onFiltersChange(value, values);
};
@@ -73,6 +108,22 @@ const TagFilter: React.FC<Props> = ({ tagObjectList, initFilterValues = {}, onFi
if (value.key) {
return;
}
if (value.domainId) {
setCurrentDomainId(value.domainId);
const options = tagObjectList.filter((item) => {
if (value.domainId) {
return item.domainId === value.domainId;
} else {
return true;
}
});
handleValuesChange(value, {
...values,
tagObjectId: options[0]?.id,
});
return;
}
handleValuesChange(value, values);
}}
>
@@ -108,17 +159,23 @@ const TagFilter: React.FC<Props> = ({ tagObjectList, initFilterValues = {}, onFi
</div>
</StandardFormRow>
<Space size={40}>
<StandardFormRow key="tagObjectId" title="所属对象" block>
<StandardFormRow key="domainId" title="主题域" block>
<FormItem name="domainId">
<DomainTreeSelect
firstLevelOnly={true}
treeSelectProps={{ multiple: false, allowClear: false }}
onDefaultValue={(value) => {
setCurrentDomainId(value);
}}
/>
</FormItem>
</StandardFormRow>
<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,
};
})}
options={tagObjectOptions}
/>
</FormItem>
</StandardFormRow>
@@ -138,11 +195,6 @@ const TagFilter: React.FC<Props> = ({ tagObjectList, initFilterValues = {}, onFi
</StandardFormRow>
);
})}
{/* <StandardFormRow key="domainIds" title="所属主题域" block>
<FormItem name="domainIds">
<DomainTreeSelect />
</FormItem>
</StandardFormRow> */}
</Space>
</Form>
);

View File

@@ -16,7 +16,7 @@
// margin-bottom: 12px;
background: #fff;
border-radius: 10px;
width: 540px;
width: 740px;
margin: 0 auto;
.searchInput {
width: 100%;

View File

@@ -7,6 +7,7 @@ import styles from './style.less';
import { ArrowLeftOutlined } from '@ant-design/icons';
import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
import { ISemantic } from '../data';
import MetricBasicInfo from './components/MetricBasicInfo';
import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
import MetricInfoSider from './MetricInfoSider';
import type { TabsProps } from 'antd';
@@ -77,9 +78,14 @@ const MetricDetail: React.FC<Props> = () => {
};
const tabItems: TabsProps['items'] = [
{
key: 'metricCaliberInput',
label: '基础信息',
children: <MetricBasicInfo metircData={metircData} onQueryMetricData={queryMetricData} />,
},
{
key: 'metricTrend',
label: '图表',
label: '指标探索',
children: (
<MetricTrendSection
metircData={metircData}
@@ -88,11 +94,7 @@ const MetricDetail: React.FC<Props> = () => {
/>
),
},
// {
// key: 'metricCaliberInput',
// label: '基础信息',
// children: <></>,
// },
// {
// key: 'metricDataRemark',
// label: '备注',
@@ -106,7 +108,7 @@ const MetricDetail: React.FC<Props> = () => {
<div className={styles.metricDetail}>
<div className={styles.tabContainer}>
<Tabs
defaultActiveKey="metricTrend"
defaultActiveKey="metricCaliberInput"
items={tabItems}
tabBarExtraContent={{
right: (

View File

@@ -11,6 +11,8 @@ import {
deleteMetric,
batchUpdateMetricStatus,
batchDownloadMetric,
batchMetricPublish,
batchMetricUnPublish,
} from '../service';
import MetricFilter from './components/MetricFilter';
import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
@@ -92,6 +94,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
...params,
createdBy: params.onlyShowMe ? currentUser.name : null,
pageSize: params.showType ? 100 : params.pageSize || pagination.pageSize,
isPublish: 1,
});
setLoading(false);
const { list, pageSize, pageNum, total } = data || {};
@@ -159,6 +162,21 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
setCreateModalVisible(true);
};
const queryBatchUpdatePublish = async (ids: React.Key[], status: boolean) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
const queryPublish = status ? batchMetricPublish : batchMetricUnPublish;
const { code, msg } = await queryPublish({
ids,
});
if (code === 200) {
queryMetricList(filterParams);
return;
}
message.error(msg);
};
const columnsConfig = ColumnsConfig();
const columns: ProColumns[] = [
@@ -204,6 +222,22 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
valueEnum: SENSITIVE_LEVEL_ENUM,
render: columnsConfig.sensitiveLevel.render,
},
{
dataIndex: 'isPublish',
title: '是否发布',
width: 100,
search: false,
render: (isPublish) => {
switch (isPublish) {
case 0:
return '否';
case 1:
return <span style={{ color: '#1677ff' }}></span>;
default:
return <Tag color="default"></Tag>;
}
},
},
{
dataIndex: 'description',
@@ -250,6 +284,25 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
>
</a>
{record.isPublish ? (
<a
key="metricUnPublishBtn"
onClick={() => {
queryBatchUpdatePublish([record.id], false);
}}
>
</a>
) : (
<a
key="metricPublishBtn"
onClick={() => {
queryBatchUpdatePublish([record.id], true);
}}
>
</a>
)}
<Popconfirm
title="确认删除?"

View File

@@ -62,14 +62,14 @@ const MetricInfoSider: React.FC<Props> = ({
<div className={styles.sectionContainer}>
<hr className={styles.hr} />
<div className={styles.section}>
<div className={styles.sectionTitleBox}>
{/* <div className={styles.sectionTitleBox}>
<span className={styles.sectionTitle}>
<Space>
<ContainerOutlined />
基本信息
</Space>
</span>
</div>
</div> */}
<div className={styles.item}>
<span className={styles.itemLable}>: </span>
@@ -193,12 +193,12 @@ const MetricInfoSider: React.FC<Props> = ({
</span>
</div>
{isArrayOfValues(metircData?.tags) && (
{isArrayOfValues(metircData?.classifications) && (
<div className={styles.item}>
<span className={styles.itemLable}>: </span>
<span className={styles.itemLable}>: </span>
<span className={styles.itemValue}>
<Space size={2} wrap>
{metircData?.tags.map((tag) => (
{metircData?.classifications.map((tag) => (
<Tag color="blue" key={tag}>
{tag}
</Tag>

View File

@@ -0,0 +1,207 @@
import React, { useState, useEffect } from 'react';
import { Divider, Flex, Tag, Input, Table } from 'antd';
import { METRIC_DEFINE_TYPE } from '../../constant';
import styles from '../style.less';
import { ISemantic } from '../../data';
const { TextArea } = Input;
type Props = {
metircData?: ISemantic.IMetricItem;
};
const MetricBasicInformation: React.FC<Props> = ({ metircData }) => {
const [defineData, setDefineData] = useState<{
name: string;
listName: string;
expr: string;
list: any[];
columns: any[];
}>();
const metricColumns = [
{
dataIndex: 'name',
title: '指标名称',
},
{
dataIndex: 'bizName',
title: '英文名称',
},
];
const fieldColumns = [
{
dataIndex: 'fieldName',
title: '字段名称',
},
{
dataIndex: 'dataType',
title: '字段类型',
},
];
const measureColumns = [
{
dataIndex: 'bizName',
title: '度量名称',
tooltip: '由模型名称_字段名称拼接而来',
},
{
dataIndex: 'constraint',
title: '限定条件',
width: 250,
tooltip:
'该限定条件用于在计算指标时限定口径作用于度量所用于过滤的维度必须在创建模型的时候被标记为日期或者维度不需要加where关键字。比如维度A="值1" and 维度B="值2"',
render: (_: any, record: any) => {
const { constraint } = record;
return <TextArea readOnly value={constraint} />;
},
},
{
dataIndex: 'agg',
title: '聚合函数',
width: 80,
},
];
useEffect(() => {
if (!metircData) {
return;
}
const {
metricDefineType,
metricDefineByFieldParams,
metricDefineByMeasureParams,
metricDefineByMetricParams,
} = metircData;
switch (metricDefineType) {
case METRIC_DEFINE_TYPE.FIELD:
setDefineData({
name: '按字段',
listName: '字段列表',
expr: metricDefineByFieldParams.expr,
list: metricDefineByFieldParams.fields,
columns: fieldColumns,
});
break;
case METRIC_DEFINE_TYPE.MEASURE:
setDefineData({
name: '按度量',
listName: '度量列表',
expr: metricDefineByMeasureParams.expr,
list: metricDefineByMeasureParams.measures,
columns: measureColumns,
});
break;
case METRIC_DEFINE_TYPE.METRIC:
setDefineData({
name: '按指标',
listName: '指标列表',
expr: metricDefineByMetricParams.expr,
list: metricDefineByMetricParams.metrics,
columns: metricColumns,
});
break;
default:
break;
}
}, [metircData]);
return (
<div className={styles.sectionBox} style={{ padding: '10px 20px' }}>
<div className={styles.metricBasicInfo}>
<Flex justify="space-between" align="center">
<p className={styles.caliberSubTitle}></p>
</Flex>
<Flex wrap="wrap">
<div>
<span className={styles.label}>ID</span>
{metircData?.id}
</div>
<div>
<span className={styles.label}></span>
{metircData?.name}
</div>
</Flex>
<Flex wrap="wrap">
<div>
<span className={styles.label}></span>
{metircData?.bizName}
</div>
</Flex>
<Flex wrap="wrap">
<div>
<span className={styles.label}></span>
{metircData?.alias &&
metircData.alias.split(',').map((alias) => (
<Tag color="blue" key={alias}>
{alias}
</Tag>
))}
</div>
</Flex>
<Flex wrap="wrap">
<div>
<span className={styles.label}></span>
{Array.isArray(metircData?.classifications) &&
metircData.classifications.map((className) => (
<Tag color="blue" key={className}>
{className}
</Tag>
))}
</div>
</Flex>
<Divider />
<Flex justify="space-between" align="center">
<p className={styles.caliberSubTitle}></p>
</Flex>
<Flex wrap="wrap">
<div>
<span className={styles.label}></span>
{metircData?.modelName}
</div>
<div>
<span className={styles.label}>ID</span> {metircData?.modelId}
</div>
</Flex>
<Flex wrap="wrap">
<div>
<span className={styles.label}></span>
{metircData?.modelBizName}
</div>
</Flex>
<Divider />
<Flex justify="space-between" align="center">
<p className={styles.caliberSubTitle}></p>
</Flex>
<Flex wrap="wrap">
<div>
<span className={styles.label}></span>
{defineData?.name}
</div>
<div>
<span className={styles.label}></span>
{defineData?.expr}
</div>
</Flex>
<div className={styles.label} style={{ marginBottom: 10 }}>
{defineData?.listName}
</div>
<Table
className={styles.defineDataTable}
columns={defineData?.columns}
dataSource={defineData?.list}
size="small"
pagination={false}
/>
</div>
</div>
);
};
export default MetricBasicInformation;

View File

@@ -108,7 +108,11 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
<Switch size="small" />
</FormItem>
</StandardFormRow> */}
<StandardFormRow key="domainIds" title="主题域" block>
<FormItem name="domainIds">
<DomainTreeSelect />
</FormItem>
</StandardFormRow>
{filterList.map((item) => {
const { title, key, options } = item;
return (
@@ -125,11 +129,6 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
</StandardFormRow>
);
})}
<StandardFormRow key="domainIds" title="所属主题域" block>
<FormItem name="domainIds">
<DomainTreeSelect />
</FormItem>
</StandardFormRow>
</Space>
</Form>
);

View File

@@ -0,0 +1,187 @@
import { message, Select, Tag } from 'antd';
import React, { useState } from 'react';
import CommonEditTable from '../../components/CommonEditTable';
import { ISemantic } from '../../data';
import {
queryRemarks,
deleteMetricDataRemark,
insertOrUpdateMetircDataRemark,
} from '../../service';
import styles from '../style.less';
type Props = {
metricId: number;
};
const remarkColumns = [
{
title: '开始时间',
dataIndex: 'startTime',
valueType: 'dateTime',
search: false,
width: 180,
},
{
title: '结束时间',
dataIndex: 'endTime',
valueType: 'dateTime',
search: false,
width: 180,
},
{
title: '产品',
dataIndex: 'product',
width: 150,
tooltip: '',
renderFormItem: () => {
return (
<Select
mode="tags"
maxTagCount={1}
style={{ width: '100%' }}
placeholder="请选择产品类型"
options={[
{
label: 'TME整体',
value: 'TME整体',
},
{
label: 'QQ音乐',
value: 'QQ音乐',
},
{
label: '酷狗音乐',
value: '酷狗音乐',
},
{
label: '酷我音乐',
value: '酷我音乐',
},
]}
/>
);
},
render: (_: any, row: any) => {
return Array.isArray(row?.product) ? (
row?.product.map((item: any) => <Tag key={item}>{item}</Tag>)
) : (
<Tag key={row.product}>{row.product}</Tag>
);
},
},
{
title: '备注',
dataIndex: 'remark',
width: 200,
tooltip: '',
search: false,
fieldProps: {
placeholder: '请填写备注',
},
formItemProps: {
rules: [
{
required: true,
whitespace: true,
message: '此项是必填项',
},
],
},
},
];
const MetricRemark: React.FC<Props> = ({ metricId }) => {
const [remarkData, setRemarkData] = useState<ISemantic.IMetricRemarkItem[]>([]);
const [remarkPagination, setRemarkPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
const queryRemarkData = async () => {
const { code, data, msg } = await queryRemarks({
current: remarkPagination.current,
size: remarkPagination.pageSize,
metricId,
});
const { records, size, current, total } = data || {};
let resData: any = {};
if (code == 200) {
setRemarkPagination({
pageSize: size,
current,
total,
});
const list = records.map((item: any) => {
return {
...item,
editRowId: (Math.random() * 1000000).toFixed(0),
};
});
setRemarkData(list);
resData = {
data: list || [],
success: true,
};
} else {
message.error(msg);
resData = {
data: [],
total: 0,
success: false,
};
}
return resData;
};
const handleMetricDataDelete = async (id: string) => {
const { code, msg } = await deleteMetricDataRemark(id);
if (code !== 200) {
message.error(msg);
}
};
const handleMetricRemarksSubmit = async (data: any) => {
const { code, msg } = await insertOrUpdateMetircDataRemark({
...data,
product: Array.isArray(data.product) ? data.product.join() : data.product,
metricId,
});
if (code !== 200) {
message.error(msg);
}
};
return (
<div className={styles.sectionBox} style={{ padding: '20px' }}>
<div className={styles.table}>
<CommonEditTable
position="top"
search={false}
request={queryRemarkData}
tableDataSource={remarkData}
columnList={remarkColumns}
onDataSourceChange={(tableData) => { }}
pagination={{
...remarkPagination,
onChange: (page: number) => {
setRemarkPagination({ ...remarkPagination, current: page });
},
}}
onDelete={(data: any) => {
handleMetricDataDelete(data.id);
}}
editable={{
onSave: async (rowKey: string, data: any) => {
handleMetricRemarksSubmit(data);
},
}}
/>
</div>
</div>
);
};
export default MetricRemark;

View File

@@ -43,10 +43,12 @@ const MetricTrendSection: React.FC<Props> = ({
startDate: string;
endDate: string;
dateField: string;
period: DateRangeType;
}>({
startDate: dayjs().subtract(6, 'days').format('YYYY-MM-DD'),
endDate: dayjs().format('YYYY-MM-DD'),
dateField: DateFieldMap[DateRangeType.DAY],
period: DateRangeType.DAY,
});
const [rowNumber, setRowNumber] = useState<number>(5);
@@ -66,31 +68,24 @@ const MetricTrendSection: React.FC<Props> = ({
if (!metircData) {
return;
}
const { modelId, bizName, name } = metircData;
const { bizName, id, domainId, name } = metircData;
indicatorFields.current = [{ name, column: bizName }];
const dimensionFiltersBizNameList = dimensionFilters.map((item) => {
return item.bizName;
});
const bizNameList = Array.from(new Set([...dimensionFiltersBizNameList, ...dimensionGroup]));
const modelIds = dimensionList.reduce(
const dimensionIds = dimensionList.reduce(
(idList: number[], item: ISemantic.IDimensionItem) => {
if (bizNameList.includes(item.bizName)) {
idList.push(item.modelId);
if (dimensionGroup.includes(item.bizName)) {
idList.push(item.id);
}
return idList;
},
[modelId],
[],
);
const res = await queryStruct({
// modelId,
modelIds: Array.from(new Set(modelIds)),
bizName,
groups: dimensionGroup,
dimensionFilters,
domainId,
metricIds: [id],
dimensionIds,
filters: dimensionFilters,
period: periodDate.period,
dateField: periodDate.dateField,
startDate: periodDate.startDate,
endDate: periodDate.endDate,
@@ -162,13 +157,16 @@ const MetricTrendSection: React.FC<Props> = ({
const [startDate, endDate] = value;
const { dateSettingType, dynamicParams, staticParams } = config;
let dateField = DateFieldMap[DateRangeType.DAY];
let period = DateRangeType.DAY;
if (DateSettingType.DYNAMIC === dateSettingType) {
dateField = DateFieldMap[dynamicParams.dateRangeType];
period = dynamicParams.dateRangeType;
}
if (DateSettingType.STATIC === dateSettingType) {
dateField = DateFieldMap[staticParams.dateRangeType];
period = staticParams.dateRangeType;
}
setPeriodDate({ startDate, endDate, dateField });
setPeriodDate({ startDate, endDate, dateField, period });
}}
disabledAdvanceSetting={true}
/>

View File

@@ -10,13 +10,62 @@
margin: 20px;
}
.table {
overflow: auto;
}
.metricBasicInfo {
.label {
font-size: 14px;
color: rgb(95, 116, 141);
}
div {
min-width: 300px;
font-size: 15px;
margin-bottom: 10px;
color: rgb(18, 31, 67);
}
}
.caliberTitle {
font-weight: 500;
font-size: 16px;
margin-bottom: 20px;
color: rgb(18, 31, 67);
}
.caliberSubTitle {
font-weight: 500;
font-size: 14px;
color: rgb(33, 43, 54);
}
.defineDataTable{
width: 600px;
background-color: rgb(255, 255, 255);
color: rgb(67, 71, 75);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border-radius: 6px;
box-shadow: rgba(114, 117, 120, 0.14) 0px 9px 16px, rgba(179, 181, 183, 0.38) 0px 0px 2px;
overflow: hidden;
:global {
.ant-table-thead {
font-size: 13px;
}
}
}
.caliberDesc {
font-size: 14px;
color: #bdbdbd;
}
.searchBox {
// margin-bottom: 12px;
background: #fff;
border-radius: 10px;
width: 540px;
width: 740px;
margin: 0 auto;
.searchInput {
width: 100%;

View File

@@ -13,7 +13,7 @@ import DomainManagerTab from './components/DomainManagerTab';
import type { Dispatch } from 'umi';
type Props = {
mode: 'domain' | 'chatSetting';
mode: 'domain';
domainManger: StateType;
dispatch: Dispatch;
};
@@ -160,8 +160,7 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
}, [selectModelId]);
const pushUrlMenu = (domainId: number, modelId: number, menuKey: string) => {
const path = mode === 'domain' ? 'model' : 'chatSetting/model';
history.push(`/${path}/${domainId}/${modelId || 0}/${menuKey}`);
history.push(`/model/${domainId}/${modelId || 0}/${menuKey}`);
};
const handleModelChange = (model?: ISemantic.IModelItem) => {

View File

@@ -7,15 +7,18 @@ import { Form, Input, Select, InputNumber } from 'antd';
import { wrapperTransTypeAndId } from '../../utils';
import { ISemantic } from '../../data';
import { TransType, SemanticNodeType } from '../../enum';
import { ChatConfigType, TransType, SemanticNodeType } from '../../enum';
import TransTypeTag from '../../components/TransTypeTag';
type Props = {
chatConfigType: TransType;
// entityData: any;
// chatConfigKey: string;
chatConfigType: ChatConfigType.TAG | ChatConfigType.METRIC;
metricList?: ISemantic.IMetricItem[];
dimensionList?: ISemantic.IDimensionItem[];
tagList?: ISemantic.ITagItem[];
form: any;
// domainId: number;
// onSubmit: (params?: any) => void;
};
const FormItem = Form.Item;
@@ -28,7 +31,7 @@ const formDefaultValue = {
};
const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
{ metricList, dimensionList, tagList, chatConfigType, form },
{ metricList, dimensionList, chatConfigType, form },
ref,
) => {
const [dataItemListOptions, setDataItemListOptions] = useState<any>([]);
@@ -51,57 +54,84 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
}
}, []);
const defaultConfigKeyMap: any = {
[TransType.TAG]: 'tagTypeDefaultConfig',
[TransType.METRIC]: 'metricTypeDefaultConfig',
const defaultConfigKeyMap = {
[ChatConfigType.TAG]: 'tagTypeDefaultConfig',
[ChatConfigType.METRIC]: 'metricTypeDefaultConfig',
};
useEffect(() => {
if (Array.isArray(tagList)) {
const tagEnum = tagList.map((item: ISemantic.ITagItem) => {
if (Array.isArray(dimensionList) && Array.isArray(metricList)) {
const dimensionEnum = dimensionList.map((item: ISemantic.IDimensionItem) => {
const { name, id, bizName } = item;
return {
name,
label: (
<>
<TransTypeTag type={SemanticNodeType.TAG} />
<TransTypeTag type={SemanticNodeType.DIMENSION} />
{name}
</>
),
value: wrapperTransTypeAndId(TransType.TAG, id),
value: wrapperTransTypeAndId(TransType.DIMENSION, id),
bizName,
id,
transType: TransType.TAG,
transType: TransType.DIMENSION,
};
});
setDataItemListOptions([...tagEnum]);
const metricEnum = metricList.map((item: ISemantic.IMetricItem) => {
const { name, id, bizName } = item;
return {
name,
label: (
<>
<TransTypeTag type={SemanticNodeType.METRIC} />
{name}
</>
),
value: wrapperTransTypeAndId(TransType.METRIC, id),
bizName,
id,
transType: TransType.METRIC,
};
});
setDataItemListOptions([...dimensionEnum, ...metricEnum]);
}
}, [tagList]);
}, [dimensionList, metricList]);
return (
<>
{chatConfigType === TransType.TAG && (
{chatConfigType === ChatConfigType.TAG && (
<FormItem
name={['queryConfig', defaultConfigKeyMap[TransType.TAG], 'defaultDisplayInfo']}
name={['queryConfig', defaultConfigKeyMap[ChatConfigType.TAG], 'defaultDisplayInfo']}
label="圈选结果展示字段"
getValueFromEvent={(value, items) => {
const result: { tagIds: number[] } = {
tagIds: [],
const result: { dimensionIds: number[]; metricIds: number[] } = {
dimensionIds: [],
metricIds: [],
};
items.forEach((item: any) => {
result.tagIds.push(item.id);
if (item.transType === TransType.DIMENSION) {
result.dimensionIds.push(item.id);
}
if (item.transType === TransType.METRIC) {
result.metricIds.push(item.id);
}
});
return result;
}}
getValueProps={(value) => {
const { tagIds } = value || {};
const tagValues = Array.isArray(tagIds)
? tagIds.map((id: number) => {
return wrapperTransTypeAndId(TransType.TAG, id);
const { dimensionIds, metricIds } = value || {};
const dimensionValues = Array.isArray(dimensionIds)
? dimensionIds.map((id: number) => {
return wrapperTransTypeAndId(TransType.DIMENSION, id);
})
: [];
const metricValues = Array.isArray(metricIds)
? metricIds.map((id: number) => {
return wrapperTransTypeAndId(TransType.METRIC, id);
})
: [];
return {
value: [...tagValues],
value: [...dimensionValues, ...metricValues],
};
}}
>
@@ -131,7 +161,7 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
}
>
<Input.Group compact>
{chatConfigType === TransType.TAG ? (
{chatConfigType === ChatConfigType.TAG ? (
<span
style={{
display: 'inline-block',

View File

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

View File

@@ -3,13 +3,12 @@ import { Form, Button, Modal, Input } from 'antd';
import styles from '../style.less';
import { message } from 'antd';
import { formLayout } from '@/components/FormHelper/utils';
import { createView, updateView, getDimensionList, queryMetric, getTagList } from '../../service';
import { createView, updateView, getDimensionList, queryMetric } from '../../service';
import { ISemantic } from '../../data';
import DefaultSettingForm from './DefaultSettingForm';
import { isArrayOfValues } from '@/utils/utils';
import ProCard from '@ant-design/pro-card';
import { TransType } from '../../enum';
import { number } from 'echarts';
import { ChatConfigType } from '../../enum';
export type ModelCreateFormModalProps = {
domainId: number;
@@ -32,40 +31,22 @@ const ViewSearchFormModal: React.FC<ModelCreateFormModalProps> = ({
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>();
const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>();
const [tagList, setTagList] = useState<ISemantic.ITagItem[]>();
useEffect(() => {
const dataSetModelConfigs = viewItem?.dataSetDetail?.dataSetModelConfigs;
if (Array.isArray(dataSetModelConfigs)) {
const allMetrics: number[] = [];
const allDimensions: number[] = [];
const allTags: number[] = [];
dataSetModelConfigs.forEach((item: ISemantic.IViewModelConfigItem) => {
const { metrics, dimensions, tagIds } = item;
const { metrics, dimensions } = item;
allMetrics.push(...metrics);
allDimensions.push(...dimensions);
allTags.push(...tagIds);
});
queryDimensionListByIds(allDimensions);
queryMetricListByIds(allMetrics);
queryTagListByIds(allTags);
}
}, [viewItem]);
const queryTagListByIds = async (ids: number[]) => {
const { code, data, msg } = await getTagList({
ids,
});
const { list } = data || {};
if (code === 200) {
setTagList(list);
} else {
message.error(msg);
setTagList([]);
}
};
const queryDimensionListByIds = async (ids: number[]) => {
if (!isArrayOfValues(ids)) {
setDimensionList([]);
@@ -129,22 +110,23 @@ const ViewSearchFormModal: React.FC<ModelCreateFormModalProps> = ({
const renderContent = () => {
return (
<div className={styles.viewSearchFormContainer}>
{viewItem?.queryType === TransType.METRIC && (
<ProCard title="指标模式" style={{ marginBottom: 10, borderBottom: '1px solid #eee' }}>
<DefaultSettingForm
form={form}
dimensionList={dimensionList}
metricList={metricList}
chatConfigType={TransType.METRIC}
chatConfigType={ChatConfigType.METRIC}
/>
</ProCard>
)}
{viewItem?.queryType === TransType.TAG && (
<ProCard title="标签模式">
<DefaultSettingForm form={form} tagList={tagList} chatConfigType={TransType.TAG} />
<DefaultSettingForm
form={form}
dimensionList={dimensionList}
metricList={metricList}
chatConfigType={ChatConfigType.TAG}
/>
</ProCard>
)}
</div>
);
};

View File

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

View File

@@ -129,7 +129,7 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
>
</a>
{/* <a
<a
key="searchEditBtn"
onClick={() => {
setViewItem(record);
@@ -137,7 +137,7 @@ const ViewTable: React.FC<Props> = ({ disabledEdit = false, modelList, domainMan
}}
>
</a> */}
</a>
{record.status === StatusEnum.ONLINE ? (
<Button
type="link"

View File

@@ -103,7 +103,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
});
setLoading(false);
if (code === 200) {
queryDimensionList({ ...filterParams, ...defaultPagination });
queryDimensionList({ ...filterParams, ...pagination });
dispatch({
type: 'domainManger/queryDimensionList',
payload: {
@@ -131,7 +131,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
setLoading(false);
if (code === 200) {
queryDimensionList({ ...filterParams, ...defaultPagination });
queryDimensionList({ ...filterParams, ...pagination });
dispatch({
type: 'domainManger/queryDimensionList',
payload: {
@@ -206,6 +206,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
{
dataIndex: 'description',
title: '描述',
width: 250,
search: false,
render: columnsConfig.description.render,
},
@@ -375,7 +376,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
),
},
{
label: '标签状态',
label: '是否为标签',
component: (
<Select
style={{ width: 145 }}
@@ -439,7 +440,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
</Button>,
<BatchCtrlDropDownButton
key="ctrlBtnList"
extenderEnable={true}
extenderList={['exportTagButton']}
onDeleteConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}

View File

@@ -4,7 +4,7 @@ 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 { connect, history } from 'umi';
import type { StateType } from '../model';
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
import {
@@ -13,6 +13,8 @@ import {
batchUpdateMetricStatus,
batchDownloadMetric,
batchCreateTag,
batchMetricPublish,
batchMetricUnPublish,
} from '../service';
import MetricInfoCreateForm from './MetricInfoCreateForm';
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
@@ -23,11 +25,12 @@ import { ISemantic } from '../data';
import { ColumnsConfig } from './TableColumnRender';
type Props = {
onEmptyMetricData?: () => void;
dispatch: Dispatch;
domainManger: StateType;
};
const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData, domainManger, dispatch }) => {
const { selectModelId: modelId, selectDomainId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
@@ -39,6 +42,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
pageSize: 20,
total: 0,
};
const initState = useRef<boolean>(false);
const [pagination, setPagination] = useState(defaultPagination);
const [filterParams, setFilterParams] = useState<Record<string, any>>({});
@@ -95,6 +99,27 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
message.error(msg);
};
const queryBatchUpdatePublish = async (ids: React.Key[], status: boolean) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
const queryPublish = status ? batchMetricPublish : batchMetricUnPublish;
const { code, msg } = await queryPublish({
ids,
});
if (code === 200) {
queryMetricList({ ...filterParams, ...defaultPagination });
dispatch({
type: 'domainManger/queryMetricList',
payload: {
modelId,
},
});
return;
}
message.error(msg);
};
useEffect(() => {
queryMetricList({ ...filterParams, ...defaultPagination });
}, [filterParams]);
@@ -115,6 +140,11 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
current: pageNum,
total,
});
if (list.length === 0 && !initState.current) {
onEmptyMetricData?.();
}
initState.current = true;
setTableData(list);
} else {
message.error(msg);
@@ -169,7 +199,22 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}
},
},
{
dataIndex: 'isPublish',
title: '是否发布',
width: 150,
search: false,
render: (isPublish) => {
switch (isPublish) {
case 0:
return '否';
case 1:
return <span style={{ color: '#1677ff' }}></span>;
default:
return <Tag color="default"></Tag>;
}
},
},
{
dataIndex: 'description',
title: '描述',
@@ -285,6 +330,12 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
case 'exportTagButton':
queryBatchExportTag(selectedRowKeys);
break;
case 'batchPublish':
queryBatchUpdatePublish(selectedRowKeys, true);
break;
case 'batchUnPublish':
queryBatchUpdatePublish(selectedRowKeys, false);
break;
default:
break;
}
@@ -355,6 +406,28 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
/>
),
},
{
label: '是否为标签',
component: (
<Select
style={{ width: 145 }}
placeholder="请选择标签状态"
allowClear
onChange={(value) => {
setFilterParams((preState) => {
return {
...preState,
isTag: value,
};
});
}}
options={[
{ value: 1, label: '是' },
{ value: 0, label: '否' },
]}
/>
),
},
]}
/>
}
@@ -400,7 +473,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
<BatchCtrlDropDownButton
key="ctrlBtnList"
downloadLoading={downloadLoading}
extenderEnable={true}
extenderList={['batchPublish', 'batchUnPublish', 'exportTagButton']}
onDeleteConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}

View File

@@ -93,10 +93,12 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
};
const queryBatchDeleteTag = async (dimensionItem: ISemantic.IDimensionItem) => {
const { code, msg } = await batchDeleteTag({
const { code, msg } = await batchDeleteTag([
{
itemIds: [dimensionItem.id],
tagDefineType: TAG_DEFINE_TYPE.DIMENSION,
});
},
]);
if (code === 200) {
return;
}

View File

@@ -1,5 +1,5 @@
import { Tabs, Breadcrumb, Space } from 'antd';
import React from 'react';
import React, { useRef, useEffect } from 'react';
import { connect, history } from 'umi';
import ClassDimensionTable from './ClassDimensionTable';
@@ -41,10 +41,15 @@ const DomainManagerTab: React.FC<Props> = ({
onBackDomainBtnClick,
onMenuChange,
}) => {
const initState = useRef<boolean>(false);
const defaultTabKey = 'metric';
const { selectDomainId, domainList, selectModelId, selectModelName, selectDomainName } =
const { selectDomainId, selectModelId, selectModelName, selectDomainName, domainData } =
domainManger;
useEffect(() => {
initState.current = false;
}, [selectModelId]);
const tabItem = [
{
label: '模型管理',
@@ -73,6 +78,7 @@ const DomainManagerTab: React.FC<Props> = ({
{
label: '标签对象管理',
key: 'tagObjectManange',
hidden: !!domainData?.parentId,
children: <TagObjectTable />,
},
{
@@ -96,8 +102,10 @@ const DomainManagerTab: React.FC<Props> = ({
// children: <DatabaseTable />,
// },
].filter((item) => {
const target = domainList.find((domain) => domain.id === selectDomainId);
if (target?.hasEditPermission) {
if (item.hidden) {
return false;
}
if (domainData?.hasEditPermission) {
return true;
}
return item.key !== 'permissonSetting';
@@ -107,7 +115,16 @@ const DomainManagerTab: React.FC<Props> = ({
{
label: '指标管理',
key: 'metric',
children: <ClassMetricTable />,
children: (
<ClassMetricTable
onEmptyMetricData={() => {
if (!initState.current) {
initState.current = true;
onMenuChange?.('dimenstion');
}
}}
/>
),
},
{
label: '维度管理',

View File

@@ -1,10 +1,8 @@
import { message, TreeSelect } from 'antd';
import type { DataNode } from 'antd/lib/tree';
import { useEffect, useState } from 'react';
import { useEffect, useState, useRef } from 'react';
import type { FC } from 'react';
import { connect } from 'umi';
import type { Dispatch } from 'umi';
import type { StateType } from '../model';
import { getDomainList } from '../../SemanticModel/service';
import { constructorClassTreeFromList, addPathInTreeData } from '../utils';
import styles from './style.less';
@@ -13,54 +11,64 @@ import { ISemantic } from '../data';
type Props = {
value?: any;
width?: number | string;
firstLevelOnly?: boolean;
onChange?: () => void;
treeSelectProps?: Record<string, any>;
domainList: ISemantic.IDomainItem[];
dispatch: Dispatch;
onDefaultValue?: (value?: number) => void;
};
const DomainTreeSelect: FC<Props> = ({
value,
width = 300,
width = 250,
firstLevelOnly = false,
onChange,
onDefaultValue,
treeSelectProps = {},
domainList,
dispatch,
}) => {
const [domainTree, setDomainTree] = useState<DataNode[]>([]);
const defaultValue = useRef<number>();
const [initState, setInitState] = useState<boolean>(false);
const initProjectTree = async () => {
const { code, data, msg } = await getDomainList();
if (!initState) {
setInitState(true);
}
const domainList = data;
if (code === 200) {
dispatch({
type: 'domainManger/setDomainList',
payload: { domainList: data },
const treeData = addPathInTreeData(constructorClassTreeFromList(domainList));
if (firstLevelOnly) {
const firstLevelNodes = treeData.map((item: any) => {
return { ...item, children: [] };
});
defaultValue.current = firstLevelNodes[0]?.id;
onDefaultValue?.(defaultValue.current);
setDomainTree(firstLevelNodes);
return;
}
setDomainTree(treeData);
} else {
message.error(msg);
}
};
useEffect(() => {
if (domainList.length === 0) {
initProjectTree();
}
}, []);
useEffect(() => {
const treeData = addPathInTreeData(constructorClassTreeFromList(domainList));
setDomainTree(treeData);
}, [domainList]);
return (
<div
className={styles.domainTreeSelect}
style={{
width,
}}
>
{defaultValue.current ? (
<TreeSelect
defaultValue={defaultValue.current}
popupClassName={styles.domainSelector}
showSearch
key="defaultValue"
style={{ width: '100%' }}
value={value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
@@ -73,18 +81,27 @@ const DomainTreeSelect: FC<Props> = ({
treeData={domainTree}
{...treeSelectProps}
/>
) : (
<TreeSelect
defaultValue={defaultValue.current}
popupClassName={styles.domainSelector}
showSearch
key="preRender"
style={{ width: '100%' }}
value={value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder={'请选择主题域'}
allowClear
multiple
treeNodeFilterProp="title"
treeDefaultExpandAll
onChange={onChange}
treeData={domainTree}
{...treeSelectProps}
/>
)}
</div>
);
};
export default connect(
({
domainManger: { selectDomainId, selectDomainName, domainList },
}: {
domainManger: StateType;
}) => ({
selectDomainId,
selectDomainName,
domainList,
}),
)(DomainTreeSelect);
export default DomainTreeSelect;

View File

@@ -250,7 +250,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
dataFormat,
dataFormatType,
alias,
tags,
classifications,
metricDefineType,
metricDefineByMeasureParams,
metricDefineByMetricParams,
@@ -264,7 +264,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
bizName,
sensitiveLevel,
description,
tags,
classifications,
isTag,
// isPercent,
dataFormatType: dataFormatType || '',
@@ -396,10 +396,12 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
};
const queryBatchDelete = async (metricItem: ISemantic.IMetricItem) => {
const { code, msg } = await batchDeleteTag({
const { code, msg } = await batchDeleteTag([
{
itemIds: [metricItem.id],
tagDefineType: TAG_DEFINE_TYPE.METRIC,
});
},
]);
if (code === 200) {
return;
}
@@ -661,10 +663,10 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
)}
</Row>
</FormItem>
<FormItem name="tags" label="标签">
<FormItem name="classifications" label="分类">
<Select
mode="tags"
placeholder="输入名后回车确认,多别名输入、复制粘贴支持英文逗号自动分隔"
placeholder="输入分类名后回车确认,多别名输入、复制粘贴支持英文逗号自动分隔"
tokenSeparators={[',']}
maxTagCount={9}
options={tagOptions}

View File

@@ -37,13 +37,13 @@ const MetricMeasuresFormTable: React.FC<Props> = ({
);
const [selectedKeys, setSelectedKeys] = useState<string[]>(() => {
return measuresParams?.measures.map((item: any) => {
return measuresParams?.measures.map((item: ISemantic.IMeasure) => {
return item.bizName;
});
});
const [selectedKeysMap, setSelectedKeysMap] = useState<Record<string, boolean>>(() => {
return measuresParams.measures.reduce((keyMap, item: any) => {
return measuresParams.measures.reduce((keyMap: any, item: ISemantic.IMeasure) => {
keyMap[item.bizName] = true;
return keyMap;
}, {});

View File

@@ -97,7 +97,7 @@ export const ColumnsConfig = (params?: {
},
indicatorInfo: {
render: (_, record: ISemantic.IMetricItem) => {
const { name, alias, bizName, tags, id, isCollect } = record;
const { name, alias, bizName, classifications, id, isCollect } = record;
let url = `/metric/detail/`;
let starType: StarType = 'metric';
if (params) {
@@ -137,7 +137,7 @@ export const ColumnsConfig = (params?: {
{bizName}
</div>
{(alias || isArrayOfValues(tags)) && (
{(alias || isArrayOfValues(classifications)) && (
<div style={{ marginTop: 8 }}>
<Space direction="vertical" size={4}>
{alias && (
@@ -181,16 +181,16 @@ export const ColumnsConfig = (params?: {
</Space>
)}
{isArrayOfValues(tags) && (
{isArrayOfValues(classifications) && (
<Space
size={4}
style={{ color: '#5f748d', fontSize: 12, margin: '5px 0 5px 0' }}
>
<TagsOutlined />
<div style={{ width: 'max-content' }}>:</div>
<div style={{ width: 'max-content' }}>:</div>
<span style={{ marginLeft: 2 }}>
<Space size={[0, 8]} wrap>
{tags.map((tag: string) => {
{classifications.map((tag: string) => {
return (
<Tag
color="#eee"
@@ -280,7 +280,7 @@ export const ColumnsConfig = (params?: {
switch (status) {
case StatusEnum.ONLINE:
tagProps = {
// color: 'success',
// color: 'processing',
color: 'geekblue',
label: '已启用',
};

View File

@@ -285,20 +285,10 @@
.domainSelector {
display: flex;
width: max-content;
padding: 0 11px;
cursor: pointer;
position: relative;
border-radius: 4px;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
color: #000a24d9;
.downIcon {
margin-left: 10px;
font-size: 14px;
:global {
.ant-select-tree .ant-select-tree-treenode-active .ant-select-tree-node-content-wrapper {
outline: none;
}
&:hover {
color:#296DF3;
}
}

View File

@@ -1,6 +1,6 @@
import { TreeGraphData } from '@antv/g6-core';
import { StatusEnum } from './enum';
import { SENSITIVE_LEVEL, TAG_DEFINE_TYPE } from './constant';
import { SENSITIVE_LEVEL, TAG_DEFINE_TYPE, METRIC_DEFINE_TYPE } from './constant';
export type ISODateString =
`${number}-${number}-${number}T${number}:${number}:${number}.${number}+${number}:${number}`;
@@ -278,10 +278,12 @@ export declare namespace ISemantic {
domainName: string;
modelName: string;
modelId: number;
modelBizName: string;
hasAdminRes: boolean;
type: string;
tags: string[];
classifications: string[];
// typeParams: IMeasureTypeParams;
metricDefineType: METRIC_DEFINE_TYPE;
metricDefineByMeasureParams: IMeasureTypeParams;
metricDefineByFieldParams: IFieldTypeParams;
metricDefineByMetricParams: IMetricTypeParams;
@@ -291,6 +293,7 @@ export declare namespace ISemantic {
alias: string;
useCnt: number;
isCollect: boolean;
isPublish: boolean;
relateDimension?: IRelateDimension;
}

View File

@@ -1,6 +1,6 @@
import request from 'umi-request';
import moment from 'moment';
import { DatePeridMap } from '@/pages/SemanticModel/constant';
import { DateRangeType } from '@/components/MDatePicker/type';
import { IDataSource } from './data';
const getRunningEnv = () => {
@@ -144,7 +144,7 @@ export function batchUpdateDimensionStatus(data: any): Promise<any> {
}
export async function batchDownloadMetric(data: any): Promise<any> {
const response = await request.post(`${process.env.API_BASE_URL}query/download/batch`, {
const response = await request.post(`${process.env.API_BASE_URL}query/downloadBatch/metric`, {
responseType: 'blob',
getResponse: true,
data,
@@ -486,53 +486,47 @@ const downloadStruct = (blob: Blob) => {
};
export function queryDimValue(data: any): Promise<any> {
return request(`${process.env.API_BASE_URL}query/queryDimValue`, {
return request(`${process.env.API_BASE_URL}dimension/queryDimValue`, {
method: 'POST',
data,
});
}
export async function queryStruct({
modelIds,
bizName,
domainId,
dateField = 'sys_imp_date',
startDate,
endDate,
download = false,
groups = [],
dimensionFilters = [],
period = DateRangeType.DAY,
dimensionIds = [],
metricIds,
filters = [],
isTransform,
}: {
modelIds: number[];
bizName: string;
domainId: number;
metricIds: number[];
dateField: string;
startDate: string;
endDate: string;
download?: boolean;
groups?: string[];
dimensionFilters?: string[];
dimensionIds: number[];
period: DateRangeType;
filters?: string[];
isTransform: boolean;
}): Promise<any> {
const response = await request(
`${process.env.API_BASE_URL}query/${download ? 'download/' : ''}struct`,
`${process.env.API_BASE_URL}query/${download ? 'download/' : ''}metric`,
{
method: 'POST',
...(download ? { responseType: 'blob', getResponse: true } : {}),
data: {
modelIds,
groups: [dateField, ...groups],
dimensionFilters,
domainId,
filters,
isTransform,
aggregators: [
{
column: bizName,
// func: 'SUM',
nameCh: 'null',
args: null,
},
],
metricIds,
dimensionIds,
orders: [{ column: dateField, direction: 'desc' }],
metricFilters: [],
params: [],
dateInfo: {
dateMode: 'BETWEEN',
@@ -540,8 +534,8 @@ export async function queryStruct({
endDate,
dateList: [],
unit: 7,
// period: 'DAY',
period: DatePeridMap[dateField],
groupByDate: true,
period,
text: 'null',
},
limit: 2000,
@@ -672,6 +666,20 @@ export function batchDeleteTag(data: any): Promise<any> {
});
}
export function batchMetricPublish(data: any): Promise<any> {
return request(`${process.env.API_BASE_URL}metric/batchPublish`, {
method: 'POST',
data,
});
}
export function batchMetricUnPublish(data: any): Promise<any> {
return request(`${process.env.API_BASE_URL}metric/batchUnPublish`, {
method: 'POST',
data,
});
}
export function createTagObject(data: any): Promise<any> {
return request(`${process.env.API_BASE_URL}tagObject/create`, {
method: 'POST',