topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-10 11:07:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators (#347)

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
This commit is contained in:
tristanliu
2023-11-09 05:37:36 -06:00
committed by GitHub
parent 4e139c837a
commit 18aa14118c
27 changed files with 1654 additions and 916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
webapp/packages/supersonic-fe/config/routes.ts
View File

@@ -35,23 +35,10 @@ const ROUTES = [
envEnableList: [ENV_KEY.CHAT], envEnableList: [ENV_KEY.CHAT],
}, },
{ {
path: '/model', path: '/model/:domainId?/:modelId?/:menuKey?',
component: './SemanticModel/DomainManager',
name: 'semanticModel', name: 'semanticModel',
envEnableList: [ENV_KEY.SEMANTIC], envEnableList: [ENV_KEY.SEMANTIC],
routes: [
{
path: '/model/:domainId?/:modelId?/:menuKey?',
component: './SemanticModel/DomainManager',
name: 'model',
envEnableList: [ENV_KEY.SEMANTIC],
},
{
path: '/database',
name: 'database',
component: './SemanticModel/components/Database/DatabaseTable',
envEnableList: [ENV_KEY.SEMANTIC],
},
],
}, },
{ {
@@ -66,6 +53,25 @@ const ROUTES = [
name: 'metric', name: 'metric',
component: './SemanticModel/Metric', component: './SemanticModel/Metric',
envEnableList: [ENV_KEY.SEMANTIC], envEnableList: [ENV_KEY.SEMANTIC],
routes: [
{
path: '/metric',
redirect: '/metric/market',
},
{
path: '/metric/market',
component: './SemanticModel/Metric/Market',
hideInMenu: true,
envEnableList: [ENV_KEY.SEMANTIC],
},
{
path: '/metric/detail/:metricId',
name: 'metricDetail',
hideInMenu: true,
component: './SemanticModel/Metric/Detail',
envEnableList: [ENV_KEY.SEMANTIC],
},
],
}, },
{ {
path: '/plugin', path: '/plugin',

6
webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx
View File

@@ -24,6 +24,7 @@ type Props = {
showCurrentDataRangeString?: boolean; showCurrentDataRangeString?: boolean;
onDateRangeChange: (value: string[], from: any) => void; onDateRangeChange: (value: string[], from: any) => void;
onDateRangeTypeChange?: (dateRangeType: DateRangeType) => void; onDateRangeTypeChange?: (dateRangeType: DateRangeType) => void;
onInit?: (params: { dateStringRange: string[] }) => void;
}; };
const { CheckableTag } = Tag; const { CheckableTag } = Tag;
@@ -33,6 +34,7 @@ const MDatePicker: React.FC<Props> = ({
showCurrentDataRangeString = true, showCurrentDataRangeString = true,
onDateRangeChange, onDateRangeChange,
onDateRangeTypeChange, onDateRangeTypeChange,
onInit,
}: any) => { }: any) => {
const getDynamicDefaultConfig = (dateRangeType: DateRangeType) => { const getDynamicDefaultConfig = (dateRangeType: DateRangeType) => {
const dynamicDefaultConfig = { const dynamicDefaultConfig = {
@@ -151,6 +153,10 @@ const MDatePicker: React.FC<Props> = ({
} }
} }
} }
useEffect(() => {
onInit?.({ dateRange: currentDateRange });
}, []);
useEffect(() => { useEffect(() => {
setSelectedDateRangeString(getSelectedDateRangeString()); setSelectedDateRangeString(getSelectedDateRangeString());
}, [staticParams, dynamicParams, currentDateRange]); }, [staticParams, dynamicParams, currentDateRange]);

1
webapp/packages/supersonic-fe/src/components/RemoteSelect/index.tsx
View File

@@ -80,7 +80,6 @@ const DebounceSelect = forwardRef(
if (disabledSearch) { if (disabledSearch) {
return; return;
} }
console.log(!allowEmptyValue && !value, value, allowEmptyValue, 333);
if (!allowEmptyValue && !value) return; if (!allowEmptyValue && !value) return;
fetchRef.current += 1; fetchRef.current += 1;
const fetchId = fetchRef.current; const fetchId = fetchRef.current;

7
webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts
View File

@@ -7,11 +7,10 @@ export default {
'menu.exception.not-permission': '403', 'menu.exception.not-permission': '403',
'menu.exception.not-find': '404', 'menu.exception.not-find': '404',
'menu.exception.server-error': '500', 'menu.exception.server-error': '500',
'menu.semanticModel': '语义模型', 'menu.semanticModel': '语义建模',
'menu.semanticModel.model': '模型管理',
'menu.semanticModel.database': '数据库连接',
'menu.metric': '指标市场', 'menu.metric': '指标市场',
'menu.database': '数据库连接', 'menu.metric.metricDetail': '指标详情页',
'menu.database': '数据库管理',
'menu.chatSetting': '问答设置', 'menu.chatSetting': '问答设置',
'menu.plugin': '插件市场', 'menu.plugin': '插件市场',
'menu.login': '登录', 'menu.login': '登录',

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/ChatSetting/ChatSettingSection.tsx
View File

@@ -35,7 +35,7 @@ const ChatSettingSection: React.FC<Props> = () => {
// ]; // ];
return ( return (
<div style={{ width: 900, margin: '0 auto' }}> <div style={{ width: 900, margin: '20px auto' }}>
{/* <Tabs {/* <Tabs
className={styles.chatSettingSectionTab} className={styles.chatSettingSectionTab}
items={isModelItem} items={isModelItem}

316
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx Normal file
View File

@@ -0,0 +1,316 @@
import { message, Tag, Space, Layout, Tabs, Tooltip } from 'antd';
import React, { useState, useEffect, ReactNode } from 'react';
import { getMetricData } from '../service';
import { connect, useParams, history } from 'umi';
import type { StateType } from '../model';
import moment from 'moment';
import {
LeftOutlined,
UserOutlined,
CalendarOutlined,
InfoCircleOutlined,
} from '@ant-design/icons';
import styles from './style.less';
import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
import type { TabsProps } from 'antd';
import { ISemantic } from '../data';
const { Content } = Layout;
type Props = {
metircData: any;
domainManger: StateType;
onNodeChange: (params?: { eventName?: string }) => void;
onEditBtnClick?: (metircData: any) => void;
[key: string]: any;
};
interface DescriptionItemProps {
title: string | ReactNode;
content: React.ReactNode;
icon: ReactNode;
}
// type InfoListItemChildrenItem = {
// label: string;
// value: string;
// content?: ReactNode;
// hideItem?: boolean;
// };
// type InfoListItem = {
// title: string;
// hideItem?: boolean;
// render?: () => ReactNode;
// children?: InfoListItemChildrenItem[];
// };
const DescriptionItem = ({ title, content, icon }: DescriptionItemProps) => (
<Tooltip title={title}>
<div style={{ width: 'max-content', fontSize: 14, color: '#546174' }}>
<Space>
<span style={{ width: 'max-content' }}>{icon}</span>
{content}
</Space>
</div>
</Tooltip>
);
const MetricDetail: React.FC<Props> = ({ domainManger }) => {
const params: any = useParams();
const metricId = params.metricId;
// const bizName = params.bizName;
// const [infoList, setInfoList] = useState<InfoListItem[]>([]);
// const { selectModelName } = domainManger;
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
useEffect(() => {
queryMetricData(metricId);
}, [metricId]);
const queryMetricData = async (metricId: string) => {
const { code, data, msg } = await getMetricData(metricId);
if (code === 200) {
setMetircData(data);
return;
}
message.error(msg);
};
// useEffect(() => {
// if (!metircData) {
// return;
// }
// const {
// alias,
// bizName,
// createdBy,
// createdAt,
// updatedAt,
// description,
// sensitiveLevel,
// modelName,
// } = metircData;
// const list = [
// {
// title: '基本信息',
// children: [
// {
// label: '字段名称',
// value: bizName,
// },
// {
// label: '别名',
// hideItem: !alias,
// value: alias || '-',
// },
// {
// label: '所属模型',
// value: modelName,
// content: <Tag>{modelName || selectModelName}</Tag>,
// },
// {
// label: '描述',
// value: description,
// },
// ],
// },
// {
// title: '应用信息',
// children: [
// {
// label: '敏感度',
// value: SENSITIVE_LEVEL_ENUM[sensitiveLevel],
// },
// ],
// },
// // {
// // title: '指标趋势',
// // render: () => (
// // <Row key={`metricTrendSection`} style={{ marginBottom: 10, display: 'flex' }}>
// // <Col span={24}>
// // <MetricTrendSection nodeData={metircData} />
// // </Col>
// // </Row>
// // ),
// // },
// {
// title: '创建信息',
// children: [
// {
// label: '创建人',
// value: createdBy,
// },
// {
// label: '创建时间',
// value: createdAt ? moment(createdAt).format('YYYY-MM-DD HH:mm:ss') : '',
// },
// {
// label: '更新时间',
// value: updatedAt ? moment(updatedAt).format('YYYY-MM-DD HH:mm:ss') : '',
// },
// ],
// },
// ];
// setInfoList(list);
// }, [metircData]);
const tabItems: TabsProps['items'] = [
{
key: 'metricTrend',
label: '图表',
children: <MetricTrendSection metircData={metircData} />,
},
// {
// key: '2',
// label: 'Tab 2',
// children: 'Content of Tab Pane 2',
// },
];
const contentStyle: React.CSSProperties = {
minHeight: 120,
color: '#fff',
// marginRight: 15,
backgroundColor: '#fff',
};
// const siderStyle: React.CSSProperties = {
// width: '300px',
// backgroundColor: '#fff',
// };
return (
<Layout className={styles.metricDetail}>
<Layout>
<Content style={contentStyle}>
<h2 className={styles.title}>
<div className={styles.titleLeft}>
<div
className={styles.backBtn}
onClick={() => {
history.push(`/metric/market`);
}}
>
<LeftOutlined />
</div>
<div className={styles.navContainer}>
<Space>
<span style={{ color: '#296DF3' }}>
{metircData?.name}
{metircData?.alias && `[${metircData.alias}]`}
</span>
{metircData?.name && (
<>
<span style={{ position: 'relative', top: '-2px' }}> | </span>
<span style={{ fontSize: 16, color: '#296DF3' }}>{metircData?.bizName}</span>
</>
)}
{metircData?.sensitiveLevel !== undefined && (
<span style={{ position: 'relative', top: '-2px' }}>
<Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
{SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}敏感度
</Tag>
</span>
)}
</Space>
{metircData?.description ? (
<div className={styles.description}>
<Tooltip title="指标描述">
<Space>
<InfoCircleOutlined />
{metircData?.description}
</Space>
</Tooltip>
</div>
) : (
<></>
)}
</div>
</div>
<div className={styles.titleRight}>
{metircData?.createdBy ? (
<>
{/* <div className={styles.info}>
<DescriptionItem
title="所属模型"
icon={<UserOutlined />}
content={metircData?.modelName}
/>
<DescriptionItem
title="更新时间"
icon={<CalendarOutlined />}
content={metircData?.description}
/>
</div> */}
<div className={styles.info}>
<DescriptionItem
title="创建人"
icon={<UserOutlined />}
content={metircData?.createdBy}
/>
<DescriptionItem
title="更新时间"
icon={<CalendarOutlined />}
content={moment(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
/>
</div>
</>
) : (
<></>
)}
</div>
</h2>
<div className={styles.tabContainer}>
<Tabs defaultActiveKey="metricTrend" items={tabItems} size="large" />
</div>
</Content>
</Layout>
{/* <Sider style={siderStyle} width={400}>
<>
<div key={metircData?.id} className={styles.metricInfoContent}>
{infoList.map((item) => {
const { children, title, render } = item;
return (
<div key={title} style={{ display: item.hideItem ? 'none' : 'block' }}>
<p className={styles.title}>{title}</p>
{render?.() ||
(Array.isArray(children) &&
children.map((childrenItem) => {
return (
<Row
key={`${childrenItem.label}-${childrenItem.value}`}
style={{
marginBottom: 10,
display: childrenItem.hideItem ? 'none' : 'flex',
}}
>
<Col span={24}>
<DescriptionItem
title={childrenItem.label}
content={childrenItem.content || childrenItem.value}
/>
</Col>
</Row>
);
}))}
<Divider />
</div>
);
})}
</div>
</>
</Sider> */}
</Layout>
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(MetricDetail);

456
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx Normal file
View File

@@ -0,0 +1,456 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Space, Popconfirm, Tag, Spin, Dropdown } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import type { Dispatch } from 'umi';
import { connect, history, useModel } from 'umi';
import type { StateType } from '../model';
import { SENSITIVE_LEVEL_ENUM } from '../constant';
import { queryMetric, deleteMetric, batchUpdateMetricStatus } from '../service';
import MetricFilter from './components/MetricFilter';
import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
import MetricCardList from './components/MetricCardList';
import NodeInfoDrawer from '../SemanticGraph/components/NodeInfoDrawer';
import { SemanticNodeType, StatusEnum } from '../enum';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
type Props = {
dispatch: Dispatch;
domainManger: StateType;
};
type QueryMetricListParams = {
id?: string;
name?: string;
bizName?: string;
sensitiveLevel?: string;
type?: string;
[key: string]: any;
};
const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { initialState = {} } = useModel('@@initialState');
const { currentUser = {} } = initialState as any;
const { selectDomainId, selectModelId: modelId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const defaultPagination = {
current: 1,
pageSize: 20,
total: 0,
};
const [pagination, setPagination] = useState(defaultPagination);
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<ISemantic.IMetricItem[]>([]);
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [filterParams, setFilterParams] = useState<Record<string, any>>({
showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
});
const [infoDrawerVisible, setInfoDrawerVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
useEffect(() => {
queryMetricList(filterParams);
}, []);
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
const { code, msg } = await batchUpdateMetricStatus({
ids,
status,
});
if (code === 200) {
queryMetricList(filterParams);
return;
}
message.error(msg);
};
const queryMetricList = async (params: QueryMetricListParams = {}, disabledLoading = false) => {
if (!disabledLoading) {
setLoading(true);
}
const { code, data, msg } = await queryMetric({
...pagination,
...params,
createdBy: params.onlyShowMe ? currentUser.name : null,
pageSize: params.showType ? 100 : params.pageSize || pagination.pageSize,
});
setLoading(false);
const { list, pageSize, pageNum, total } = data || {};
let resData: any = {};
if (code === 200) {
if (!params.showType) {
setPagination({
...pagination,
pageSize: Math.min(pageSize, 100),
current: pageNum,
total,
});
}
setDataSource(list);
resData = {
data: list || [],
success: true,
};
} else {
message.error(msg);
setDataSource([]);
resData = {
data: [],
total: 0,
success: false,
};
}
return resData;
};
const deleteMetricQuery = async (id: number) => {
const { code, msg } = await deleteMetric(id);
if (code === 200) {
setMetricItem(undefined);
queryMetricList(filterParams);
} else {
message.error(msg);
}
};
const handleMetricEdit = (metricItem: ISemantic.IMetricItem) => {
setMetricItem(metricItem);
setCreateModalVisible(true);
};
const columns: ProColumns[] = [
{
dataIndex: 'id',
title: 'ID',
},
{
dataIndex: 'name',
title: '指标名称',
render: (_, record: any) => {
return (
<a
onClick={() => {
// setMetricItem(record);
// setInfoDrawerVisible(true);
history.push(`/metric/detail/${record.id}`);
}}
>
{record.name}
</a>
);
},
},
{
dataIndex: 'modelName',
title: '所属模型',
render: (_, record: any) => {
if (record.hasAdminRes) {
return (
<a
onClick={() => {
history.replace(`/model/${record.domainId}/${record.modelId}/metric`);
}}
>
{record.modelName}
</a>
);
}
return <> {record.modelName}</>;
},
},
{
dataIndex: 'sensitiveLevel',
title: '敏感度',
valueEnum: SENSITIVE_LEVEL_ENUM,
},
{
dataIndex: 'status',
title: '状态',
width: 80,
search: false,
render: (status) => {
switch (status) {
case StatusEnum.ONLINE:
return <Tag color="success">已启用</Tag>;
case StatusEnum.OFFLINE:
return <Tag color="warning">未启用</Tag>;
case StatusEnum.INITIALIZED:
return <Tag color="processing">初始化</Tag>;
case StatusEnum.DELETED:
return <Tag color="default">已删除</Tag>;
default:
return <Tag color="default">未知</Tag>;
}
},
},
{
dataIndex: 'createdBy',
title: '创建人',
search: false,
},
{
dataIndex: 'tags',
title: '标签',
search: false,
render: (tags) => {
if (Array.isArray(tags)) {
return (
<Space size={2}>
{tags.map((tag) => (
<Tag color="blue" key={tag}>
{tag}
</Tag>
))}
</Space>
);
}
return <>--</>;
},
},
{
dataIndex: 'description',
title: '描述',
search: false,
},
{
dataIndex: 'updatedAt',
title: '更新时间',
search: false,
render: (value: any) => {
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
},
},
{
title: '操作',
dataIndex: 'x',
valueType: 'option',
render: (_, record) => {
if (record.hasAdminRes) {
return (
<Space>
<a
key="metricEditBtn"
onClick={() => {
handleMetricEdit(record);
}}
>
编辑
</a>
<Popconfirm
title="确认删除？"
okText="是"
cancelText="否"
onConfirm={async () => {
deleteMetricQuery(record.id);
}}
>
<a
key="metricDeleteBtn"
onClick={() => {
setMetricItem(record);
}}
>
删除
</a>
</Popconfirm>
</Space>
);
} else {
return <></>;
}
},
},
];
const handleFilterChange = async (filterParams: {
key: string;
sensitiveLevel: string;
type: string;
}) => {
const { sensitiveLevel, type } = filterParams;
const params: QueryMetricListParams = { ...filterParams };
const sensitiveLevelValue = sensitiveLevel?.[0];
const typeValue = type?.[0];
params.sensitiveLevel = sensitiveLevelValue;
params.type = typeValue;
setFilterParams(params);
await queryMetricList(params, filterParams.key ? false : true);
};
const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys);
},
getCheckboxProps: (record: ISemantic.IMetricItem) => ({
disabled: !record.hasAdminRes,
}),
};
const dropdownButtonItems = [
{
key: 'batchStart',
label: '批量启用',
},
{
key: 'batchStop',
label: '批量停用',
},
{
key: 'batchDelete',
label: (
<Popconfirm
title="确定批量删除吗？"
onConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
>
<a>批量删除</a>
</Popconfirm>
),
},
];
const onMenuClick = ({ key }: { key: string }) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
break;
case 'batchStop':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
break;
default:
break;
}
};
return (
<>
<div className={styles.metricFilterWrapper}>
<MetricFilter
initFilterValues={filterParams}
onFiltersChange={(_, values) => {
if (_.showType !== undefined) {
setLoading(true);
setDataSource([]);
}
handleFilterChange(values);
}}
/>
</div>
<>
{filterParams.showType ? (
<Spin spinning={loading} style={{ minHeight: 500 }}>
<MetricCardList
metricList={dataSource}
disabledEdit={true}
onMetricChange={(metricItem: ISemantic.IMetricItem) => {
history.push(`/metric/detail/${metricItem.modelId}/${metricItem.bizName}`);
}}
onDeleteBtnClick={(metricItem: ISemantic.IMetricItem) => {
deleteMetricQuery(metricItem.id);
}}
onEditBtnClick={(metricItem: ISemantic.IMetricItem) => {
setMetricItem(metricItem);
setCreateModalVisible(true);
}}
/>
</Spin>
) : (
<ProTable
className={`${styles.metricTable}`}
actionRef={actionRef}
rowKey="id"
search={false}
dataSource={dataSource}
columns={columns}
pagination={pagination}
tableAlertRender={() => {
return false;
}}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
toolBarRender={() => [
<Dropdown.Button
key="ctrlBtnList"
menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
>
批量操作
</Dropdown.Button>,
]}
loading={loading}
onChange={(data: any) => {
const { current, pageSize, total } = data;
const pagin = {
current,
pageSize,
total,
};
setPagination(pagin);
queryMetricList({ ...pagin, ...filterParams });
}}
size="small"
options={{ reload: false, density: false, fullScreen: false }}
/>
)}
</>
{createModalVisible && (
<MetricInfoCreateForm
domainId={Number(selectDomainId)}
createModalVisible={createModalVisible}
modelId={modelId}
metricItem={metricItem}
onSubmit={() => {
setCreateModalVisible(false);
queryMetricList(filterParams);
dispatch({
type: 'domainManger/queryMetricList',
payload: {
domainId: selectDomainId,
},
});
}}
onCancel={() => {
setCreateModalVisible(false);
}}
/>
)}
{infoDrawerVisible && (
<NodeInfoDrawer
nodeData={{ ...metricItem, nodeType: SemanticNodeType.METRIC }}
placement="right"
onClose={() => {
setInfoDrawerVisible(false);
}}
width="100%"
open={infoDrawerVisible}
mask={true}
getContainer={false}
onEditBtnClick={(nodeData: any) => {
handleMetricEdit(nodeData);
}}
maskClosable={true}
onNodeChange={({ eventName }: { eventName: string }) => {
setInfoDrawerVisible(false);
}}
/>
)}
</>
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(ClassMetricTable);

100
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrend.tsx
View File

@@ -9,6 +9,7 @@ import { DownloadOutlined } from '@ant-design/icons';
import type { ECharts } from 'echarts'; import type { ECharts } from 'echarts';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { groupBy, sum } from 'lodash';
import styles from '../style.less'; import styles from '../style.less';
import moment from 'moment'; import moment from 'moment';
@@ -17,8 +18,6 @@ type Props = {
tip?: string; tip?: string;
data: any[]; data: any[];
fields: any[]; fields: any[];
// columnFieldName: string;
// valueFieldName: string;
loading: boolean; loading: boolean;
isPer?: boolean; isPer?: boolean;
isPercent?: boolean; isPercent?: boolean;
@@ -27,6 +26,8 @@ type Props = {
height?: number; height?: number;
renderType?: string; renderType?: string;
decimalPlaces?: number; decimalPlaces?: number;
rowNumber?: number;
groupByDimensionFieldName?: string;
onDownload?: () => void; onDownload?: () => void;
}; };
@@ -38,9 +39,10 @@ const TrendChart: React.FC<Props> = ({
loading, loading,
isPer, isPer,
isPercent, isPercent,
dateFieldName, dateFieldName = 'sys_imp_date',
// columnFieldName, // columnFieldName,
// valueFieldName, rowNumber = 0,
groupByDimensionFieldName,
dateFormat, dateFormat,
height, height,
renderType, renderType,
@@ -64,32 +66,67 @@ const TrendChart: React.FC<Props> = ({
new Set( new Set(
data data
.map((item) => .map((item) =>
moment(`${(dateFieldName && item[dateFieldName]) || item.sys_imp_date}`).format( moment(`${dateFieldName && item[dateFieldName]}`).format(dateFormat ?? 'YYYY-MM-DD'),
dateFormat ?? 'YYYY-MM-DD',
),
) )
.sort((a, b) => { .sort((a, b) => {
return moment(a).valueOf() - moment(b).valueOf(); return moment(a).valueOf() - moment(b).valueOf();
}), }),
), ),
); );
const seriesData = fields.map((field) => {
const fieldData = { const formatterSeriesData = () => {
type: 'line', if (groupByDimensionFieldName) {
name: field.name, const groupByMap = groupBy(data, groupByDimensionFieldName);
symbol: 'circle',
showSymbol: data.length === 1, const seriesData = Object.keys(groupByMap).map((fieldKey: string) => {
smooth: true, const dimensionDataList = groupByMap[fieldKey];
data: data.reduce((itemData, item) => { const dimensionDataMapByDate = dimensionDataList.reduce((itemMap, item) => {
const target = item[field.column]; itemMap[item[dateFieldName]] = { ...item };
if (target) { return itemMap;
itemData.push(target); }, {});
} const dataList = xData.reduce((itemData: any[], dateString) => {
return itemData; const dimensionDataMapItem = dimensionDataMapByDate[dateString];
}, []), if (dimensionDataMapItem) {
}; itemData.push(dimensionDataMapItem[fields?.[0]?.column]);
return fieldData; } else {
}); itemData.push(0);
}
return itemData;
}, []);
return {
type: 'line',
name: fieldKey,
symbol: 'circle',
smooth: true,
sortNum: sum(dataList),
data: dataList,
};
});
if (rowNumber) {
return seriesData.sort((a, b) => b.sortNum - a.sortNum).slice(0, rowNumber);
}
return seriesData;
}
const seriesData = fields.map((field) => {
const fieldData = {
type: 'line',
name: field.name,
symbol: 'circle',
showSymbol: data.length === 1,
smooth: true,
data: data.reduce((itemData, item) => {
const target = item[field.column];
if (target) {
itemData.push(target);
}
return itemData;
}, []),
};
return fieldData;
});
return seriesData;
};
const seriesData = formatterSeriesData();
instanceObj.setOption({ instanceObj.setOption({
legend: { legend: {
@@ -178,7 +215,18 @@ const TrendChart: React.FC<Props> = ({
series: seriesData, series: seriesData,
}); });
instanceObj.resize(); instanceObj.resize();
}, [data, fields, instance, isPer, isPercent, dateFieldName, decimalPlaces, renderType]); }, [
data,
fields,
instance,
isPer,
isPercent,
dateFieldName,
decimalPlaces,
renderType,
rowNumber,
groupByDimensionFieldName,
]);
useEffect(() => { useEffect(() => {
if (!loading) { if (!loading) {
@@ -203,7 +251,7 @@ const TrendChart: React.FC<Props> = ({
<Skeleton <Skeleton
className={styles.chart} className={styles.chart}
style={{ height, display: loading ? 'table' : 'none' }} style={{ height, display: loading ? 'table' : 'none' }}
paragraph={{ rows: height && height > 300 ? 9 : 6 }} paragraph={{ rows: height && height > 300 ? 15 : 6 }}
/> />
<div <div
className={styles.chart} className={styles.chart}

26
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx
View File

@@ -5,13 +5,13 @@ import RemoteSelect, { RemoteSelectImperativeHandle } from '@/components/RemoteS
import { queryDimValue } from '@/pages/SemanticModel/service'; import { queryDimValue } from '@/pages/SemanticModel/service';
import { OperatorEnum } from '@/pages/SemanticModel/enum'; import { OperatorEnum } from '@/pages/SemanticModel/enum';
import { isString } from 'lodash'; import { isString } from 'lodash';
import styles from '../style.less';
const FormItem = Form.Item; const FormItem = Form.Item;
type Props = { type Props = {
dimensionOptions: { value: string; label: string }[]; dimensionOptions: OptionsItem[];
modelId: number; modelId: number;
periodDate?: { startDate: string; endDate: string; dateField: string };
value?: FormData; value?: FormData;
onChange?: (value: FormData) => void; onChange?: (value: FormData) => void;
}; };
@@ -19,20 +19,19 @@ type Props = {
export type FormData = { export type FormData = {
dimensionBizName: string; dimensionBizName: string;
operator: OperatorEnum; operator: OperatorEnum;
dimensionValue: string | string[]; dimensionValue?: string | string[];
}; };
const MetricTrendDimensionFilter: React.FC<Props> = ({ const MetricTrendDimensionFilter: React.FC<Props> = ({
dimensionOptions, dimensionOptions,
modelId, modelId,
value, value,
periodDate,
onChange, onChange,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const dimensionValueSearchRef = useRef<RemoteSelectImperativeHandle>(); const dimensionValueSearchRef = useRef<RemoteSelectImperativeHandle>();
const queryParams = useRef<{ dimensionBizName?: string }>({}); const queryParams = useRef<{ dimensionBizName?: string }>({});
const [formData, setFormData] = useState<FormData>({ operator: OperatorEnum.IN } as FormData); const [formData, setFormData] = useState<FormData>({ operator: OperatorEnum.IN } as FormData);
useEffect(() => { useEffect(() => {
@@ -47,6 +46,11 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
if (formData.dimensionBizName) { if (formData.dimensionBizName) {
queryParams.current = { dimensionBizName: formData.dimensionBizName }; queryParams.current = { dimensionBizName: formData.dimensionBizName };
dimensionValueSearchRef.current?.emitSearch(''); dimensionValueSearchRef.current?.emitSearch('');
form.setFieldValue('dimensionValue', undefined);
setFormData({
...formData,
dimensionValue: undefined,
});
} }
}, [formData.dimensionBizName]); }, [formData.dimensionBizName]);
@@ -59,7 +63,17 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
...queryParams.current, ...queryParams.current,
value: searchValue, value: searchValue,
modelId, modelId,
// dateInfo: {},
limit: 50, limit: 50,
...(periodDate?.startDate
? {
dateInfo: {
dateMode: 'BETWEEN',
startDate: periodDate.startDate,
endDate: periodDate.endDate,
},
}
: {}),
}); });
if (code === 200 && Array.isArray(data?.resultList)) { if (code === 200 && Array.isArray(data?.resultList)) {
return data.resultList.slice(0, 50).map((item: any) => ({ return data.resultList.slice(0, 50).map((item: any) => ({
@@ -109,7 +123,7 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
placeholder="请选择筛选维度" placeholder="请选择筛选维度"
/> />
</FormItem> </FormItem>
<Tag color="processing" style={{ margin: 0, padding: 0 }}> <Tag color="processing" style={{ margin: 0, padding: 0, height: 32 }}>
<FormItem name="operator" noStyle> <FormItem name="operator" noStyle>
<Select <Select
style={{ minWidth: 72 }} style={{ minWidth: 72 }}

91
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilterContainer.tsx
View File

@@ -1,48 +1,95 @@
import { Form, Select, Space, Tag, Button, Tooltip } from 'antd'; import { Space, Tag } from 'antd';
import { PlusOutlined } from '@ant-design/icons'; import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import RemoteSelect, { RemoteSelectImperativeHandle } from '@/components/RemoteSelect';
import { queryDimValue } from '@/pages/SemanticModel/service';
import { OperatorEnum } from '@/pages/SemanticModel/enum';
import MetricTrendDimensionFilter from './MetricTrendDimensionFilter'; import MetricTrendDimensionFilter from './MetricTrendDimensionFilter';
import type { FormData } from './MetricTrendDimensionFilter'; import type { FormData } from './MetricTrendDimensionFilter';
import { isString } from 'lodash';
import styles from '../style.less';
const FormItem = Form.Item;
type Props = { type Props = {
dimensionOptions: { value: string; label: string }[]; dimensionOptions: OptionsItem[];
modelId: number; modelId: number;
value?: FormData; value?: FormData;
onChange?: (value: FormData) => void; periodDate?: { startDate: string; endDate: string; dateField: string };
onChange?: (value: FormData[]) => void;
};
type DimensionOptionsMapItem = {
dimensionBizName: string;
dimensionName: string;
}; };
const MetricTrendDimensionFilterContainer: React.FC<Props> = ({ const MetricTrendDimensionFilterContainer: React.FC<Props> = ({
dimensionOptions, dimensionOptions,
modelId, modelId,
periodDate,
value, value,
onChange, onChange,
}) => { }) => {
const [filterData, setFilterData] = useState<FormData[]>([]); const [filterData, setFilterData] = useState<FormData[]>([]);
const [dimensionOptionsMap, setDimensionOptionsMap] = useState<
Record<string, DimensionOptionsMapItem>
>({});
useEffect(() => {
if (Array.isArray(dimensionOptions)) {
const dimensionDataMap = dimensionOptions.reduce(
(dimensionMap: Record<string, DimensionOptionsMapItem>, item: OptionsItem) => {
dimensionMap[item.value] = {
dimensionBizName: `${item.value}`,
dimensionName: item.label,
};
return dimensionMap;
},
{},
);
setDimensionOptionsMap(dimensionDataMap);
}
}, [dimensionOptions]);
return ( return (
<div> <div>
<MetricTrendDimensionFilter <MetricTrendDimensionFilter
modelId={modelId} modelId={modelId}
dimensionOptions={dimensionOptions} dimensionOptions={dimensionOptions}
value={value} // value={value}
periodDate={periodDate}
onChange={(value) => { onChange={(value) => {
setFilterData([...filterData, value]); const data = [...filterData, value];
onChange?.(value); setFilterData(data);
onChange?.(data);
}} }}
/> />
<div> <Space size={8} wrap style={{ marginTop: 10 }}>
<Tag> {filterData.map((item: FormData, index: number) => {
{filterData.map((item: FormData) => { const { dimensionBizName, dimensionValue, operator } = item;
return <Tag key={item.dimensionValue}>{item.dimensionValue}</Tag>; return (
})} // eslint-disable-next-line react/no-array-index-key
</Tag> <Space key={`${dimensionBizName}-${dimensionValue}-${operator}-${Math.random()}`}>
</div> <Tag
color="blue"
style={{ padding: 5 }}
closable
onClose={() => {
const newData = [...filterData];
newData.splice(index, 1);
setFilterData(newData);
onChange?.(newData);
}}
>
<span style={{ marginRight: 5 }}>
{dimensionOptionsMap?.[dimensionBizName]?.dimensionName}[{operator}]:
</span>
<Tag color="purple">
{Array.isArray(dimensionValue) ? dimensionValue.join('、') : dimensionValue}
</Tag>
</Tag>
{index !== filterData.length - 1 && (
<Tag color="blue" style={{ marginRight: 10 }}>
<span style={{ height: 32, display: 'flex', alignItems: 'center' }}>AND</span>
</Tag>
)}
</Space>
);
})}
</Space>
</div> </div>
); );
}; };

327
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
View File

@@ -1,31 +1,37 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { SemanticNodeType } from '../../enum';
import moment from 'moment'; import moment from 'moment';
import { message, Row, Col, Button, Space, Select, Form } from 'antd'; import { message, Row, Col, Button, Space, Select, Form, Tooltip, Radio } from 'antd';
import { import {
queryStruct, queryStruct,
downloadCosFile,
getDrillDownDimension, getDrillDownDimension,
getDimensionList, getDimensionList,
} from '@/pages/SemanticModel/service'; } from '@/pages/SemanticModel/service';
import {
InfoCircleOutlined,
LineChartOutlined,
TableOutlined,
DownloadOutlined,
} from '@ant-design/icons';
import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend'; import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
import MetricTrendDimensionFilter from './MetricTrendDimensionFilter'; import MetricTrendDimensionFilterContainer from './MetricTrendDimensionFilterContainer';
import MDatePicker from '@/components/MDatePicker'; import MDatePicker from '@/components/MDatePicker';
import { useModel } from 'umi';
import { DateRangeType, DateSettingType } from '@/components/MDatePicker/type'; import { DateRangeType, DateSettingType } from '@/components/MDatePicker/type';
import StandardFormRow from '@/components/StandardFormRow'; import StandardFormRow from '@/components/StandardFormRow';
import MetricTable from './Table';
import { ColumnConfig } from '../data';
import { ISemantic } from '../../data'; import { ISemantic } from '../../data';
const FormItem = Form.Item; const FormItem = Form.Item;
const { Option } = Select;
type Props = { type Props = {
nodeData: any; metircData?: ISemantic.IMetricItem;
[key: string]: any; [key: string]: any;
}; };
const MetricTrendSection: React.FC<Props> = ({ nodeData }) => { const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
const dateFieldMap = { const dateFieldMap = {
[DateRangeType.DAY]: 'sys_imp_date', [DateRangeType.DAY]: 'sys_imp_date',
[DateRangeType.WEEK]: 'sys_imp_week', [DateRangeType.WEEK]: 'sys_imp_week',
@@ -35,6 +41,10 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
const [metricTrendData, setMetricTrendData] = useState<ISemantic.IMetricTrendItem[]>([]); const [metricTrendData, setMetricTrendData] = useState<ISemantic.IMetricTrendItem[]>([]);
const [metricTrendLoading, setMetricTrendLoading] = useState<boolean>(false); const [metricTrendLoading, setMetricTrendLoading] = useState<boolean>(false);
const [metricColumnConfig, setMetricColumnConfig] = useState<ISemantic.IMetricTrendColumn>(); const [metricColumnConfig, setMetricColumnConfig] = useState<ISemantic.IMetricTrendColumn>();
const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
const [drillDownDimensions, setDrillDownDimensions] = useState<
ISemantic.IDrillDownDimensionItem[]
>(metircData?.relateDimension?.drillDownDimensions || []);
const [authMessage, setAuthMessage] = useState<string>(''); const [authMessage, setAuthMessage] = useState<string>('');
const [downloadLoding, setDownloadLoding] = useState<boolean>(false); const [downloadLoding, setDownloadLoding] = useState<boolean>(false);
const [relationDimensionOptions, setRelationDimensionOptions] = useState< const [relationDimensionOptions, setRelationDimensionOptions] = useState<
@@ -42,15 +52,21 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
>([]); >([]);
const [queryParams, setQueryParams] = useState<any>({}); const [queryParams, setQueryParams] = useState<any>({});
const [downloadBtnDisabledState, setDownloadBtnDisabledState] = useState<boolean>(true); const [downloadBtnDisabledState, setDownloadBtnDisabledState] = useState<boolean>(true);
// const [showDimensionOptions, setShowDimensionOptions] = useState<any[]>([]);
const [periodDate, setPeriodDate] = useState<{ const [periodDate, setPeriodDate] = useState<{
startDate: string; startDate: string;
endDate: string; endDate: string;
dateField: string; dateField: string;
}>({ }>({
startDate: moment().subtract('7', 'days').format('YYYY-MM-DD'), startDate: moment().subtract('6', 'days').format('YYYY-MM-DD'),
endDate: moment().format('YYYY-MM-DD'), endDate: moment().format('YYYY-MM-DD'),
dateField: dateFieldMap[DateRangeType.DAY], dateField: dateFieldMap[DateRangeType.DAY],
}); });
const [rowNumber, setRowNumber] = useState<number>(5);
const [chartType, setChartType] = useState<'chart' | 'table'>('chart');
const [tableColumnConfig, setTableColumnConfig] = useState<ColumnConfig[]>([]);
const [groupByDimensionFieldName, setGroupByDimensionFieldName] = useState<string>();
const getMetricTrendData = async (params: any = { download: false }) => { const getMetricTrendData = async (params: any = { download: false }) => {
const { download, dimensionGroup, dimensionFilters } = params; const { download, dimensionGroup, dimensionFilters } = params;
@@ -59,8 +75,10 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
} else { } else {
setMetricTrendLoading(true); setMetricTrendLoading(true);
} }
if (!metircData) {
const { modelId, bizName, name } = nodeData; return;
}
const { modelId, bizName, name } = metircData;
indicatorFields.current = [{ name, column: bizName }]; indicatorFields.current = [{ name, column: bizName }];
const res = await queryStruct({ const res = await queryStruct({
modelId, modelId,
@@ -81,6 +99,7 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
if (code === 200) { if (code === 200) {
const { resultList, columns, queryAuthorization } = data; const { resultList, columns, queryAuthorization } = data;
setMetricTrendData(resultList); setMetricTrendData(resultList);
setTableColumnConfig(columns);
const message = queryAuthorization?.message; const message = queryAuthorization?.message;
if (message) { if (message) {
setAuthMessage(message); setAuthMessage(message);
@@ -139,14 +158,15 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
}; };
useEffect(() => { useEffect(() => {
if (nodeData?.id && nodeData?.nodeType === SemanticNodeType.METRIC) { if (metircData?.id) {
getMetricTrendData(); getMetricTrendData({ ...queryParams });
initDimensionData(nodeData); initDimensionData(metircData);
setDrillDownDimensions(metircData?.relateDimension?.drillDownDimensions || []);
} }
}, [nodeData, periodDate]); }, [metircData, periodDate]);
return ( return (
<> <div style={{ backgroundColor: '#fff', marginTop: 20 }}>
<div style={{ marginBottom: 25 }}> <div style={{ marginBottom: 25 }}>
<Row> <Row>
<Col flex="1 1 200px"> <Col flex="1 1 200px">
@@ -158,57 +178,8 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
if (value.key) { if (value.key) {
return; return;
} }
// handleValuesChange(value, values);
}} }}
> >
{/* <StandardFormRow key="dimensionSelected" title="维度下钻:">
<FormItem name="dimensionSelected">
<Select
style={{ minWidth: 150, maxWidth: 200 }}
options={relationDimensionOptions}
showSearch
filterOption={(input, option) =>
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
}
mode="multiple"
placeholder="请选择下钻维度"
onChange={(value) => {
const params = { ...queryParams, dimensionGroup: value || [] };
setQueryParams(params);
getMetricTrendData({ ...params });
}}
/>
</FormItem>
</StandardFormRow>
<StandardFormRow key="dimensionFilter" title="维度筛选:">
<FormItem name="dimensionFilter">
<MetricTrendDimensionFilter
modelId={nodeData.modelId}
dimensionOptions={relationDimensionOptions}
onChange={(filterParams) => {
const {
dimensionBizName: bizName,
dimensionValue: value,
operator,
} = filterParams;
if (bizName && value && operator) {
const params = {
...queryParams,
dimensionFilters: [
{
bizName: 'user_name',
value: ['williamhliu', 'leooonli'],
operator: 'in',
},
],
};
setQueryParams(params);
getMetricTrendData({ ...params });
}
}}
/>
</FormItem>
</StandardFormRow> */}
<StandardFormRow key="metricDate" title="日期区间:"> <StandardFormRow key="metricDate" title="日期区间:">
<FormItem name="metricDate"> <FormItem name="metricDate">
<MDatePicker <MDatePicker
@@ -243,45 +214,209 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
/> />
</FormItem> </FormItem>
</StandardFormRow> </StandardFormRow>
<StandardFormRow key="dimensionSelected" title="维度下钻:">
<FormItem name="dimensionSelected">
<Select
style={{ minWidth: 150, maxWidth: 200 }}
options={relationDimensionOptions}
showSearch
filterOption={(input, option) =>
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
}
mode="multiple"
placeholder="请选择下钻维度"
onChange={(value) => {
const params = { ...queryParams, dimensionGroup: value || [] };
setQueryParams(params);
getMetricTrendData({ ...params });
setGroupByDimensionFieldName(value[value.length - 1]);
}}
/>
</FormItem>
</StandardFormRow>
<StandardFormRow key="dimensionFilter" title="维度筛选:">
<FormItem name="dimensionFilter">
<MetricTrendDimensionFilterContainer
modelId={metircData?.modelId || 0}
dimensionOptions={relationDimensionOptions}
periodDate={periodDate}
onChange={(filterList) => {
const dimensionFilters = filterList.map((item) => {
const { dimensionBizName, dimensionValue, operator } = item;
return {
bizName: dimensionBizName,
value: dimensionValue,
operator,
};
});
const params = {
...queryParams,
dimensionFilters,
};
setQueryParams(params);
getMetricTrendData({ ...params });
}}
/>
</FormItem>
</StandardFormRow>
</Form> </Form>
</Col> </Col>
<Col flex="0 1"> <Col flex="0 1">
<Button <Space>
type="primary" {metircData?.hasAdminRes && (
loading={downloadLoding} <Button
disabled={downloadBtnDisabledState} type="primary"
onClick={() => { key="addDimension"
getMetricTrendData({ download: true, ...queryParams }); onClick={() => {
}} setMetricRelationModalOpenState(true);
> }}
下载 >
</Button> <Space>
下钻维度配置
<Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
<InfoCircleOutlined />
</Tooltip>
</Space>
</Button>
)}
<Button
type="primary"
key="download"
loading={downloadLoding}
disabled={downloadBtnDisabledState}
onClick={() => {
getMetricTrendData({ download: true, ...queryParams });
}}
>
<Space>
<DownloadOutlined />
下载
</Space>
</Button>
</Space>
</Col> </Col>
</Row> </Row>
</div> </div>
{authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>} {authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>}
<TrendChart <Row style={{ marginBottom: 20 }}>
data={metricTrendData} <Col flex="1 1 300px">
isPer={ <Radio.Group
metricColumnConfig?.dataFormatType === 'percent' && size="small"
metricColumnConfig?.dataFormat?.needMultiply100 === false buttonStyle="solid"
? true options={[
: false {
} label: (
isPercent={ <Tooltip title="折线图">
metricColumnConfig?.dataFormatType === 'percent' && <LineChartOutlined />
metricColumnConfig?.dataFormat?.needMultiply100 === true </Tooltip>
? true ),
: false value: 'chart',
} },
fields={indicatorFields.current} {
loading={metricTrendLoading} label: (
dateFieldName={periodDate.dateField} <Tooltip title="表格">
height={350} <TableOutlined />
renderType="clear" </Tooltip>
decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2} ),
value: 'table',
},
]}
onChange={(e) => {
setChartType(e.target.value);
}}
value={chartType}
optionType="button"
/>
{/* <Space>
<Select
style={{ minWidth: 150, maxWidth: 200 }}
options={showDimensionOptions}
value={groupByDimensionFieldName}
showSearch
filterOption={(input, option) =>
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
}
placeholder="展示维度切换"
onChange={(value) => {
setGroupByDimensionFieldName(value);
}}
/>
</Space> */}
</Col>
<Col flex="0 1 100px">
<Space>
<Select
defaultValue={rowNumber}
style={{
width: 120,
display:
Array.isArray(queryParams.dimensionGroup) &&
queryParams.dimensionGroup.length > 0 &&
chartType === 'chart'
? 'block'
: 'none',
}}
onChange={(value) => {
setRowNumber(value);
}}
>
<Option value={5}>前5项</Option>
<Option value={10}>前10项</Option>
<Option value={15}>前15项</Option>
<Option value={20}>前20项</Option>
</Select>
</Space>
</Col>
</Row>
{chartType === 'chart' && (
<TrendChart
data={metricTrendData}
isPer={
metricColumnConfig?.dataFormatType === 'percent' &&
metricColumnConfig?.dataFormat?.needMultiply100 === false
? true
: false
}
isPercent={
metricColumnConfig?.dataFormatType === 'percent' &&
metricColumnConfig?.dataFormat?.needMultiply100 === true
? true
: false
}
rowNumber={rowNumber}
fields={indicatorFields.current}
loading={metricTrendLoading}
dateFieldName={periodDate.dateField}
groupByDimensionFieldName={groupByDimensionFieldName}
height={500}
renderType="clear"
decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
/>
)}
<div style={{ display: chartType === 'table' ? 'block' : 'none', marginBottom: 45 }}>
<MetricTable
loading={metricTrendLoading}
columnConfig={tableColumnConfig}
dataSource={metricTrendData}
dateFieldName={periodDate.dateField}
metricFieldName={indicatorFields.current?.[0]?.column}
/>
</div>
<DimensionAndMetricRelationModal
metricItem={metircData}
relationsInitialValue={drillDownDimensions}
open={metricRelationModalOpenState}
onCancel={() => {
setMetricRelationModalOpenState(false);
}}
onSubmit={(relations) => {
setDrillDownDimensions(relations);
setMetricRelationModalOpenState(false);
initDimensionData(metircData!);
}}
/> />
</> </div>
); );
}; };

74
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/Table.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import styles from '../style.less';
import { ColumnConfig } from '../data';
type Props = {
columnConfig?: ColumnConfig[];
dataSource: any;
metricFieldName: string;
dateFieldName?: string;
loading?: boolean;
};
const MetricTable: React.FC<Props> = ({
columnConfig,
dataSource,
dateFieldName = 'sys_imp_date',
metricFieldName,
loading = false,
}) => {
const [columns, setColumns] = useState<ColumnsType<any>>([]);
useEffect(() => {
if (Array.isArray(columnConfig)) {
const config: ColumnsType<any> = columnConfig.map((item: ColumnConfig) => {
const { name, nameEn } = item;
if (nameEn === dateFieldName) {
return {
title: '日期',
dataIndex: nameEn,
key: nameEn,
width: 120,
fixed: 'left',
defaultSortOrder: 'descend',
sorter: (a, b) => moment(a[nameEn]).valueOf() - moment(b[nameEn]).valueOf(),
};
}
if (nameEn === metricFieldName) {
return {
title: name,
dataIndex: nameEn,
key: nameEn,
sortDirections: ['descend'],
sorter: (a, b) => a[nameEn] - b[nameEn],
};
}
return {
title: name,
key: nameEn,
dataIndex: nameEn,
};
});
setColumns(config);
}
}, [columnConfig]);
return (
<div style={{ height: '100%' }}>
{Array.isArray(columns) && columns.length > 0 && (
<Table
columns={columns}
dataSource={dataSource}
scroll={{ x: 200, y: 700 }}
// pagination={{ defaultPageSize: 20 }}
loading={loading}
onChange={() => {}}
/>
)}
</div>
);
};
export default MetricTable;

9
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/data.d.ts vendored
View File

@@ -0,0 +1,9 @@
export type ColumnConfig = {
name: string;
type: string;
nameEn: string;
showType: string;
authorized: boolean;
dataFormatType: null;
dataFormat: null;
};

457
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/index.tsx
View File

@@ -1,456 +1,7 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table'; import React from 'react';
import ProTable from '@ant-design/pro-table';
import { message, Space, Popconfirm, Tag, Spin, Dropdown } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import type { Dispatch } from 'umi';
import { connect, history, useModel } from 'umi';
import type { StateType } from '../model';
import { SENSITIVE_LEVEL_ENUM } from '../constant';
import { queryMetric, deleteMetric, batchUpdateMetricStatus } from '../service';
import MetricFilter from './components/MetricFilter';
import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
import MetricCardList from './components/MetricCardList';
import NodeInfoDrawer from '../SemanticGraph/components/NodeInfoDrawer';
import { SemanticNodeType, StatusEnum } from '../enum';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
type Props = { const market: React.FC = ({ children }) => {
dispatch: Dispatch; return <>{children}</>;
domainManger: StateType;
}; };
type QueryMetricListParams = { export default market;
id?: string;
name?: string;
bizName?: string;
sensitiveLevel?: string;
type?: string;
[key: string]: any;
};
const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { initialState = {} } = useModel('@@initialState');
const { currentUser = {} } = initialState as any;
const { selectDomainId, selectModelId: modelId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const defaultPagination = {
current: 1,
pageSize: 20,
total: 0,
};
const [pagination, setPagination] = useState(defaultPagination);
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<ISemantic.IMetricItem[]>([]);
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [filterParams, setFilterParams] = useState<Record<string, any>>({
showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
});
const [infoDrawerVisible, setInfoDrawerVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
useEffect(() => {
queryMetricList(filterParams);
}, []);
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
const { code, msg } = await batchUpdateMetricStatus({
ids,
status,
});
if (code === 200) {
queryMetricList(filterParams);
return;
}
message.error(msg);
};
const queryMetricList = async (params: QueryMetricListParams = {}, disabledLoading = false) => {
if (!disabledLoading) {
setLoading(true);
}
const { code, data, msg } = await queryMetric({
...pagination,
...params,
createdBy: params.onlyShowMe ? currentUser.name : null,
pageSize: params.showType ? 100 : params.pageSize || pagination.pageSize,
});
setLoading(false);
const { list, pageSize, pageNum, total } = data || {};
let resData: any = {};
if (code === 200) {
if (!params.showType) {
setPagination({
...pagination,
pageSize: Math.min(pageSize, 100),
current: pageNum,
total,
});
}
setDataSource(list);
resData = {
data: list || [],
success: true,
};
} else {
message.error(msg);
setDataSource([]);
resData = {
data: [],
total: 0,
success: false,
};
}
return resData;
};
const deleteMetricQuery = async (id: number) => {
const { code, msg } = await deleteMetric(id);
if (code === 200) {
setMetricItem(undefined);
queryMetricList(filterParams);
} else {
message.error(msg);
}
};
const handleMetricEdit = (metricItem: ISemantic.IMetricItem) => {
setMetricItem(metricItem);
setCreateModalVisible(true);
};
const columns: ProColumns[] = [
{
dataIndex: 'id',
title: 'ID',
},
{
dataIndex: 'name',
title: '指标名称',
render: (_, record: any) => {
return (
<a
onClick={() => {
setMetricItem(record);
setInfoDrawerVisible(true);
}}
>
{record.name}
</a>
);
},
},
{
dataIndex: 'modelName',
title: '所属模型',
render: (_, record: any) => {
if (record.hasAdminRes) {
return (
<a
onClick={() => {
history.replace(`/model/${record.domainId}/${record.modelId}/metric`);
}}
>
{record.modelName}
</a>
);
}
return <> {record.modelName}</>;
},
},
{
dataIndex: 'sensitiveLevel',
title: '敏感度',
valueEnum: SENSITIVE_LEVEL_ENUM,
},
{
dataIndex: 'status',
title: '状态',
width: 80,
search: false,
render: (status) => {
switch (status) {
case StatusEnum.ONLINE:
return <Tag color="success">已启用</Tag>;
case StatusEnum.OFFLINE:
return <Tag color="warning">未启用</Tag>;
case StatusEnum.INITIALIZED:
return <Tag color="processing">初始化</Tag>;
case StatusEnum.DELETED:
return <Tag color="default">已删除</Tag>;
default:
return <Tag color="default">未知</Tag>;
}
},
},
{
dataIndex: 'createdBy',
title: '创建人',
search: false,
},
{
dataIndex: 'tags',
title: '标签',
search: false,
render: (tags) => {
if (Array.isArray(tags)) {
return (
<Space size={2}>
{tags.map((tag) => (
<Tag color="blue" key={tag}>
{tag}
</Tag>
))}
</Space>
);
}
return <>--</>;
},
},
{
dataIndex: 'description',
title: '描述',
search: false,
},
{
dataIndex: 'updatedAt',
title: '更新时间',
search: false,
render: (value: any) => {
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
},
},
{
title: '操作',
dataIndex: 'x',
valueType: 'option',
render: (_, record) => {
if (record.hasAdminRes) {
return (
<Space>
<a
key="metricEditBtn"
onClick={() => {
handleMetricEdit(record);
}}
>
编辑
</a>
<Popconfirm
title="确认删除？"
okText="是"
cancelText="否"
onConfirm={async () => {
deleteMetricQuery(record.id);
}}
>
<a
key="metricDeleteBtn"
onClick={() => {
setMetricItem(record);
}}
>
删除
</a>
</Popconfirm>
</Space>
);
} else {
return <></>;
}
},
},
];
const handleFilterChange = async (filterParams: {
key: string;
sensitiveLevel: string;
type: string;
}) => {
const { sensitiveLevel, type } = filterParams;
const params: QueryMetricListParams = { ...filterParams };
const sensitiveLevelValue = sensitiveLevel?.[0];
const typeValue = type?.[0];
params.sensitiveLevel = sensitiveLevelValue;
params.type = typeValue;
setFilterParams(params);
await queryMetricList(params, filterParams.key ? false : true);
};
const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys);
},
getCheckboxProps: (record: ISemantic.IMetricItem) => ({
disabled: !record.hasAdminRes,
}),
};
const dropdownButtonItems = [
{
key: 'batchStart',
label: '批量启用',
},
{
key: 'batchStop',
label: '批量停用',
},
{
key: 'batchDelete',
label: (
<Popconfirm
title="确定批量删除吗？"
onConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
>
<a>批量删除</a>
</Popconfirm>
),
},
];
const onMenuClick = ({ key }: { key: string }) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
break;
case 'batchStop':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
break;
default:
break;
}
};
return (
<>
<div className={styles.metricFilterWrapper}>
<MetricFilter
initFilterValues={filterParams}
onFiltersChange={(_, values) => {
if (_.showType !== undefined) {
setLoading(true);
setDataSource([]);
}
handleFilterChange(values);
}}
/>
</div>
<>
{filterParams.showType ? (
<Spin spinning={loading} style={{ minHeight: 500 }}>
<MetricCardList
metricList={dataSource}
disabledEdit={true}
onMetricChange={(metricItem: ISemantic.IMetricItem) => {
setInfoDrawerVisible(true);
setMetricItem(metricItem);
}}
onDeleteBtnClick={(metricItem: ISemantic.IMetricItem) => {
deleteMetricQuery(metricItem.id);
}}
onEditBtnClick={(metricItem: ISemantic.IMetricItem) => {
setMetricItem(metricItem);
setCreateModalVisible(true);
}}
/>
</Spin>
) : (
<ProTable
className={`${styles.metricTable}`}
actionRef={actionRef}
rowKey="id"
search={false}
dataSource={dataSource}
columns={columns}
pagination={pagination}
tableAlertRender={() => {
return false;
}}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
toolBarRender={() => [
<Dropdown.Button
key="ctrlBtnList"
menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
>
批量操作
</Dropdown.Button>,
]}
loading={loading}
onChange={(data: any) => {
const { current, pageSize, total } = data;
const pagin = {
current,
pageSize,
total,
};
setPagination(pagin);
queryMetricList({ ...pagin, ...filterParams });
}}
size="small"
options={{ reload: false, density: false, fullScreen: false }}
/>
)}
</>
{createModalVisible && (
<MetricInfoCreateForm
domainId={Number(selectDomainId)}
createModalVisible={createModalVisible}
modelId={modelId}
metricItem={metricItem}
onSubmit={() => {
setCreateModalVisible(false);
queryMetricList(filterParams);
dispatch({
type: 'domainManger/queryMetricList',
payload: {
domainId: selectDomainId,
},
});
}}
onCancel={() => {
setCreateModalVisible(false);
}}
/>
)}
{infoDrawerVisible && (
<NodeInfoDrawer
nodeData={{ ...metricItem, nodeType: SemanticNodeType.METRIC }}
placement="right"
onClose={() => {
setInfoDrawerVisible(false);
}}
width="100%"
open={infoDrawerVisible}
mask={true}
getContainer={false}
onEditBtnClick={(nodeData: any) => {
handleMetricEdit(nodeData);
}}
maskClosable={true}
onNodeChange={({ eventName }: { eventName: string }) => {
setInfoDrawerVisible(false);
}}
/>
)}
</>
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(ClassMetricTable);

79
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
View File

@@ -114,4 +114,81 @@
} }
} }
} }
} }
.metricDetail {
height: calc(100vh - 50px);
.title {
margin-bottom: 0;
// padding: 20px;
font-size: 20px;
line-height: 34px;
border-bottom: 1px solid #d9d9d9;
display: flex;
.titleLeft {
display: flex;
flex: 1 1 auto;
.navContainer {
// display: flex;
padding: 20px;
padding-left: 30px;
.description {
font-size: 12px;
line-height: 12px;
padding-top: 12px;
color: #546174
}
}
.backBtn {
background-color: #f8f8f8;
padding: 5px;
color: #b0b4bc;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&:hover {
background-color: #7599e5;
color: #fff;
}
}
}
.titleRight {
display: flex;
flex: 0 1 200px;
.info {
margin: 15px;
}
}
}
.tabContainer {
background-color: #fff;
padding: 0px 40px;
}
.metricInfoContent {
padding:25px;
.title {
margin-bottom: 12px;
font-size: 16px;
color: #0e73ff;
font-weight: bold;
position: relative;
&::before {
display: block;
position: absolute;
content: "";
left: -10px;
top: 10px;
height: 14px;
width: 3px;
font-size: 0;
background: #0e73ff;
border-radius: 2px;
border: 1px solid #0e73ff;
}
}
}
}

168
webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx
View File

@@ -202,109 +202,77 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
<div className={styles.projectBody}> <div className={styles.projectBody}>
<Helmet title={'语义模型-超音数'} /> <Helmet title={'语义模型-超音数'} />
<div className={styles.projectManger}> <div className={styles.projectManger}>
<h2 className={styles.title}> <div className={styles.sider}>
{!!selectModelId && ( <div className={styles.domainTitle}>
<div <Space>
className={styles.backBtn} {selectDomainName ? `${selectDomainName}` : '主题域信息'}
onClick={() => { {selectModelName && (
cleanModelInfo(selectDomainId); <>
}} <span style={{ position: 'relative' }}> | </span>
> <span style={{ fontSize: 16, color: '#296DF3' }}>{selectModelName}</span>
<LeftOutlined /> </>
</div> )}
)} </Space>
</div>
<div className={styles.navContainer}> <DomainListTree
<Popover createDomainBtnVisible={mode === 'domain' ? true : false}
zIndex={1000} onTreeSelected={(domainData) => {
overlayInnerStyle={{ setOpen(false);
overflow: 'scroll', const { id, name } = domainData;
maxHeight: '800px', cleanModelInfo(id);
}} dispatch({
content={ type: 'domainManger/setSelectDomain',
<DomainListTree selectDomainId: id,
createDomainBtnVisible={mode === 'domain' ? true : false} selectDomainName: name,
onTreeSelected={(domainData) => { domainData,
setOpen(false); });
const { id, name } = domainData; }}
cleanModelInfo(id); onTreeDataUpdate={() => {
dispatch({ initProjectTree();
type: 'domainManger/setSelectDomain', }}
selectDomainId: id, />
selectDomainName: name, </div>
domainData, <div className={styles.content}>
}); {selectDomainId ? (
<>
{mode === 'domain' ? (
<DomainManagerTab
isModel={isModel}
activeKey={activeKey}
modelList={modelList}
handleModelChange={(model) => {
handleModelChange(model);
}} }}
onTreeDataUpdate={() => { onBackDomainBtnClick={() => {
initProjectTree(); cleanModelInfo(selectDomainId);
}}
onMenuChange={(menuKey) => {
setActiveKey(menuKey);
pushUrlMenu(selectDomainId, selectModelId, menuKey);
}} }}
/> />
} ) : (
trigger="click" <ChatSettingTab
open={selectModelId ? false : open} isModel={isModel}
onOpenChange={handleOpenChange} activeKey={activeKey}
> modelList={modelList}
<div className={styles.domainSelector}> handleModelChange={(model) => {
<span className={styles.domainTitle}> handleModelChange(model);
<Space> }}
{selectDomainName ? `${selectDomainName}` : '主题域信息'} onBackDomainBtnClick={() => {
{selectModelName && ( cleanModelInfo(selectDomainId);
<> }}
<span style={{ position: 'relative', top: '-2px' }}> | </span> onMenuChange={(menuKey) => {
<span style={{ fontSize: 16, color: '#296DF3' }}>{selectModelName}</span> setActiveKey(menuKey);
</> pushUrlMenu(selectDomainId, selectModelId, menuKey);
)} }}
</Space> />
</span> )}
{!selectModelId && ( </>
<span className={styles.downIcon}> ) : (
<DownOutlined /> <h2 className={styles.mainTip}>请选择项目</h2>
</span> )}
)} </div>
</div>
</Popover>
</div>
</h2>
{selectDomainId ? (
<>
{mode === 'domain' ? (
<DomainManagerTab
isModel={isModel}
activeKey={activeKey}
modelList={modelList}
handleModelChange={(model) => {
handleModelChange(model);
}}
onBackDomainBtnClick={() => {
cleanModelInfo(selectDomainId);
}}
onMenuChange={(menuKey) => {
setActiveKey(menuKey);
pushUrlMenu(selectDomainId, selectModelId, menuKey);
}}
/>
) : (
<ChatSettingTab
isModel={isModel}
activeKey={activeKey}
modelList={modelList}
handleModelChange={(model) => {
handleModelChange(model);
}}
onBackDomainBtnClick={() => {
cleanModelInfo(selectDomainId);
}}
onMenuChange={(menuKey) => {
setActiveKey(menuKey);
pushUrlMenu(selectDomainId, selectModelId, menuKey);
}}
/>
)}
</>
) : (
<h2 className={styles.mainTip}>请选择项目</h2>
)}
</div> </div>
</div> </div>
); );

26
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionAndMetricRelationModal.tsx
View File

@@ -1,27 +1,44 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Modal, Button } from 'antd'; import { Modal, Button, message } from 'antd';
import DimensionMetricRelationTableTransfer from './DimensionMetricRelationTableTransfer'; import DimensionMetricRelationTableTransfer from './DimensionMetricRelationTableTransfer';
import { ISemantic } from '../data'; import { ISemantic } from '../data';
import { updateExprMetric } from '../service';
import FormItemTitle from '@/components/FormHelper/FormItemTitle'; import FormItemTitle from '@/components/FormHelper/FormItemTitle';
type Props = { type Props = {
onCancel: () => void; onCancel: () => void;
open: boolean; open: boolean;
metricItem: ISemantic.IMetricItem; metricItem?: ISemantic.IMetricItem;
relationsInitialValue?: ISemantic.IDrillDownDimensionItem[]; relationsInitialValue?: ISemantic.IDrillDownDimensionItem[];
onSubmit: (relations: ISemantic.IDrillDownDimensionItem[]) => void; onSubmit: (relations: ISemantic.IDrillDownDimensionItem[]) => void;
}; };
const DimensionAndMetricRelationModal: React.FC<Props> = ({ const DimensionAndMetricRelationModal: React.FC<Props> = ({
open, open,
metricItem, metricItem = {},
relationsInitialValue, relationsInitialValue,
onCancel, onCancel,
onSubmit, onSubmit,
}) => { }) => {
const [relationList, setRelationList] = useState<ISemantic.IDrillDownDimensionItem[]>([]); const [relationList, setRelationList] = useState<ISemantic.IDrillDownDimensionItem[]>([]);
const saveMetric = async (relationList: any) => {
const queryParams = {
...metricItem,
relateDimension: {
...(metricItem?.relateDimension || {}),
drillDownDimensions: relationList,
},
};
const { code, msg } = await updateExprMetric(queryParams);
if (code === 200) {
// message.success('编辑指标成功');
// onSubmit?.(queryParams);
return;
}
message.error(msg);
};
const renderFooter = () => { const renderFooter = () => {
return ( return (
<> <>
@@ -30,6 +47,7 @@ const DimensionAndMetricRelationModal: React.FC<Props> = ({
type="primary" type="primary"
onClick={() => { onClick={() => {
onSubmit(relationList); onSubmit(relationList);
saveMetric(relationList);
}} }}
> >
完成 完成

4
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionMetricRelationTableTransfer.tsx
View File

@@ -33,7 +33,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
onChange, onChange,
}) => { }) => {
const [targetKeys, setTargetKeys] = useState<string[]>([]); const [targetKeys, setTargetKeys] = useState<string[]>([]);
const { selectModelId: modelId, selectDomainId } = domainManger; const { selectModelId: modelId } = domainManger;
const [checkedMap, setCheckedMap] = useState<Record<string, ISemantic.IDrillDownDimensionItem>>( const [checkedMap, setCheckedMap] = useState<Record<string, ISemantic.IDrillDownDimensionItem>>(
{}, {},
); );
@@ -42,7 +42,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
useEffect(() => { useEffect(() => {
queryDimensionList(); queryDimensionList();
}, []); }, [metricItem, relationsInitialValue]);
const queryDimensionList = async () => { const queryDimensionList = async () => {
const { code, data, msg } = await getDimensionList({ modelId: metricItem?.modelId || modelId }); const { code, data, msg } = await getDimensionList({ modelId: metricItem?.modelId || modelId });

24
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx
View File

@@ -1,5 +1,5 @@
import { DownOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'; import { DownOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { Input, message, Tree, Popconfirm, Space, Tooltip, Row, Col } from 'antd'; import { Input, message, Tree, Popconfirm, Space, Tooltip, Row, Col, Button } from 'antd';
import type { DataNode } from 'antd/lib/tree'; import type { DataNode } from 'antd/lib/tree';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import type { FC, Key } from 'react'; import type { FC, Key } from 'react';
@@ -119,7 +119,7 @@ const DomainListTree: FC<DomainListProps> = ({
return ( return (
<div className={styles.projectItem}> <div className={styles.projectItem}>
<span <span
className={styles.title} className={styles.projectItemTitle}
onClick={() => { onClick={() => {
handleSelect(id, name); handleSelect(id, name);
}} }}
@@ -180,17 +180,31 @@ const DomainListTree: FC<DomainListProps> = ({
return ( return (
<div className={styles.domainList}> <div className={styles.domainList}>
<Row> <Row>
<Col flex="1 1 200px"> <Col flex="1 1 auto">
{/* <Space> */}
<Search <Search
allowClear allowClear
className={styles.search} className={styles.search}
placeholder="请输入主题域名称进行查询" placeholder="请输入主题域名称进行查询"
onSearch={onSearch} onSearch={onSearch}
/> />
{/* </Space> */}
</Col> </Col>
{createDomainBtnVisible && ( {createDomainBtnVisible && (
<Col flex="0 1 50px"> <Col flex="0 0 40px" style={{ display: 'flex', alignItems: 'center' }}>
<Tooltip title="新增顶级域"> <Tooltip title="新增顶级域">
<Button
type="primary"
icon={<PlusOutlined />}
size="small"
onClick={() => {
setProjectInfoParams({ type: 'top', modelType: 'add' });
setProjectInfoModalVisible(true);
onCreateDomainBtnClick?.();
}}
/>
</Tooltip>
{/* <Tooltip title="新增顶级域">
<PlusCircleOutlined <PlusCircleOutlined
onClick={() => { onClick={() => {
setProjectInfoParams({ type: 'top', modelType: 'add' }); setProjectInfoParams({ type: 'top', modelType: 'add' });
@@ -199,7 +213,7 @@ const DomainListTree: FC<DomainListProps> = ({
}} }}
className={styles.addBtn} className={styles.addBtn}
/> />
</Tooltip> </Tooltip> */}
</Col> </Col>
)} )}
</Row> </Row>

61
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
View File

@@ -6,7 +6,6 @@ import ClassDataSourceTable from './ClassDataSourceTable';
import ClassDimensionTable from './ClassDimensionTable'; import ClassDimensionTable from './ClassDimensionTable';
import ClassMetricTable from './ClassMetricTable'; import ClassMetricTable from './ClassMetricTable';
import PermissionSection from './Permission/PermissionSection'; import PermissionSection from './Permission/PermissionSection';
// import DatabaseSection from './Database/DatabaseSection';
import EntitySettingSection from './Entity/EntitySettingSection'; import EntitySettingSection from './Entity/EntitySettingSection';
import ChatSettingSection from '../ChatSetting/ChatSettingSection'; import ChatSettingSection from '../ChatSetting/ChatSettingSection';
import OverView from './OverView'; import OverView from './OverView';
@@ -16,6 +15,7 @@ import { LeftOutlined } from '@ant-design/icons';
import { ISemantic } from '../data'; import { ISemantic } from '../data';
import SemanticGraphCanvas from '../SemanticGraphCanvas'; import SemanticGraphCanvas from '../SemanticGraphCanvas';
import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection'; import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
import DatabaseTable from '../components/Database/DatabaseTable';
import type { Dispatch } from 'umi'; import type { Dispatch } from 'umi';
@@ -39,10 +39,10 @@ const DomainManagerTab: React.FC<Props> = ({
onMenuChange, onMenuChange,
}) => { }) => {
const defaultTabKey = 'xflow'; const defaultTabKey = 'xflow';
const { selectDomainId, domainList } = domainManger; const { selectDomainId, domainList, selectModelId } = domainManger;
const tabItem = [ const tabItem = [
{ {
label: '模型', label: '模型管理',
key: 'overview', key: 'overview',
children: ( children: (
<OverView <OverView
@@ -53,16 +53,16 @@ const DomainManagerTab: React.FC<Props> = ({
/> />
), ),
}, },
// {
// label: '数据库',
// key: 'dataBase',
// children: <DatabaseSection />,
// },
{ {
label: '权限管理', label: '权限管理',
key: 'permissonSetting', key: 'permissonSetting',
children: <PermissionSection permissionTarget={'domain'} />, children: <PermissionSection permissionTarget={'domain'} />,
}, },
{
label: '数据库管理',
key: 'database',
children: <DatabaseTable />,
},
].filter((item) => { ].filter((item) => {
const target = domainList.find((domain) => domain.id === selectDomainId); const target = domainList.find((domain) => domain.id === selectDomainId);
if (target?.hasEditPermission) { if (target?.hasEditPermission) {
@@ -76,7 +76,7 @@ const DomainManagerTab: React.FC<Props> = ({
label: '画布', label: '画布',
key: 'xflow', key: 'xflow',
children: ( children: (
<div style={{ width: '100%', marginTop: -20 }}> <div style={{ width: '100%' }}>
<SemanticGraphCanvas /> <SemanticGraphCanvas />
</div> </div>
), ),
@@ -131,20 +131,35 @@ const DomainManagerTab: React.FC<Props> = ({
items={!isModel ? tabItem : isModelItem} items={!isModel ? tabItem : isModelItem}
activeKey={activeKey || defaultTabKey} activeKey={activeKey || defaultTabKey}
destroyInactiveTabPane destroyInactiveTabPane
tabBarExtraContent={ size="large"
isModel ? ( tabBarExtraContent={{
<Button left: (
type="primary" <>
icon={<LeftOutlined />} {!!selectModelId && (
onClick={() => { <div
onBackDomainBtnClick?.(); className={styles.backBtn}
}} onClick={() => {
style={{ marginRight: 10 }} onBackDomainBtnClick?.();
> }}
返回主题域 >
</Button> <LeftOutlined />
) : undefined </div>
} )}
</>
),
// right: isModel ? (
// <Button
// type="primary"
// icon={<LeftOutlined />}
// onClick={() => {
// onBackDomainBtnClick?.();
// }}
// style={{ marginRight: 10, marginBottom: 5 }}
// >
// 返回主题域
// </Button>
// ) : undefined,
}}
onChange={(menuKey: string) => { onChange={(menuKey: string) => {
onMenuChange?.(menuKey); onMenuChange?.(menuKey);
}} }}

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySettingSection.tsx
View File

@@ -43,7 +43,7 @@ const EntitySettingSection: React.FC<Props> = ({ domainManger }) => {
}, [modelId]); }, [modelId]);
return ( return (
<div style={{ width: 800, margin: '0 auto' }}> <div style={{ width: 800, margin: '20px auto' }}>
<Space direction="vertical" style={{ width: '100%' }} size={20}> <Space direction="vertical" style={{ width: '100%' }} size={20}>
{ {
<ProCard title="实体" bordered> <ProCard title="实体" bordered>

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/RecommendedQuestionsSection.tsx
View File

@@ -72,7 +72,7 @@ const RecommendedQuestionsSection: React.FC<Props> = ({ domainManger }) => {
}, [modelId]); }, [modelId]);
return ( return (
<div style={{ width: 800, margin: '0 auto' }}> <div style={{ width: 800, margin: '20px auto' }}>
<ProCard bordered title="问题推荐列表"> <ProCard bordered title="问题推荐列表">
<TextAreaCommonEditList <TextAreaCommonEditList
value={questionData} value={questionData}

1
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelCreateFormModal.tsx
View File

@@ -144,6 +144,7 @@ const ModelCreateFormModal: React.FC<ModelCreateFormModalProps> = (props) => {
subTitle={'配置之后,可在指标主页和问答指标卡处选择用来对指标进行下钻和过滤'} subTitle={'配置之后,可在指标主页和问答指标卡处选择用来对指标进行下钻和过滤'}
/> />
} }
hidden={!basicInfo?.id}
> >
<Select <Select
mode="multiple" mode="multiple"

266
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
View File

@@ -10,9 +10,79 @@
min-height: calc(100vh - 48px); min-height: calc(100vh - 48px);
// background: #f8f9fb; // background: #f8f9fb;
background-color: #fff; background-color: #fff;
display: flex;
position: relative; position: relative;
.sider {
flex: 0 0 350px;
border-right: 5px solid #eee;
.domainTitle {
margin-bottom: 0;
font-size: 20px;
border-bottom: 1px solid #f0f0f0;
display: flex;
font-weight: 500;
padding: 12px 0 12px 35px;
}
.addBtn {
cursor: pointer;
width: 100%;
font-size: 18px;
margin-top: 18px;
&:hover {
color: #296DF3;
}
}
.treeTitle {
margin-bottom: 0;
padding: 20px;
line-height: 34px;
text-align: right;
background: #fff;
// border-bottom: 1px solid #d9d9d9;
.title {
float: left;
}
}
.search {
width: calc(100% - 60px);
margin: 10px 0 10px 35px;
}
.tree {
flex: 1;
padding: 10px;
.projectItem {
display: flex;
width: 100%;
cursor: auto;
line-height: 30px;
height: 30px;
.projectItemTitle {
font-size: 16px;
flex: 1;
cursor: pointer;
}
.operation {
.icon {
margin-left: 6px;
cursor: pointer;
}
}
}
}
}
.content {
flex: 1 1 auto;
}
.collapseLeftBtn { .collapseLeftBtn {
position: absolute; position: absolute;
top: calc(50% + 45px); top: calc(50% + 45px);
@@ -41,20 +111,20 @@
padding: 20px; padding: 20px;
padding-left: 30px; padding-left: 30px;
} }
.backBtn { // .backBtn {
background-color: #f8f8f8; // background-color: #f8f8f8;
padding: 5px; // padding: 5px;
color: #b0b4bc; // color: #b0b4bc;
cursor: pointer; // cursor: pointer;
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); // transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&:hover { // &:hover {
background-color: #7599e5; // background-color: #7599e5;
color: #fff; // color: #fff;
} // }
} // }
.tab { .tab {
:global { :global {
.ant-tabs-tab-btn { .ant-tabs-tab-btn {
@@ -66,6 +136,24 @@
.ant-tabs-nav { .ant-tabs-nav {
margin-bottom: 0; margin-bottom: 0;
} }
.ant-tabs-tab {
padding-bottom:15px;
}
}
.backBtn {
height: 56px;
background-color: #f8f8f8;
padding: 5px;
color: #b0b4bc;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&:hover {
background-color: #7599e5;
color: #fff;
}
} }
} }
.chatSettingSectionTab { .chatSettingSectionTab {
@@ -87,164 +175,42 @@
.ant-card-body { .ant-card-body {
padding: 0 !important; padding: 0 !important;
} }
.ant-tabs-content-holder {
padding-top: 20px;
}
} }
.resource {
display: flex;
.tree {
flex: 1;
.headOperation {
.btn {
margin-right: 18px;
}
}
.resourceSearch {
margin: 10px 0;
}
}
.view {
width: 480px;
padding-left: 20px;
}
.selectTypesBtn {
margin-right: 8px;
}
}
} }
} }
.domainTreeSelect {
// width: 300px;
}
.domainList { .domainList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 400px; // width: 400px;
width: 100%;
overflow: hidden; overflow: hidden;
// min-height: calc(100vh - 48px);
.addBtn {
cursor: pointer;
width: 100%;
font-size: 18px;
margin-top: 18px;
&:hover {
color: #296DF3;
}
}
.treeTitle {
margin-bottom: 0;
padding: 20px;
line-height: 34px;
text-align: right;
background: #fff;
border-bottom: 1px solid #d9d9d9;
.title {
float: left;
}
}
.search {
width: calc(100% - 20px);
margin: 10px;
}
.tree {
flex: 1;
padding: 10px;
.projectItem {
display: flex;
width: 100%;
cursor: auto;
.title {
flex: 1;
cursor: pointer;
}
.operation {
.icon {
margin-left: 6px;
cursor: pointer;
}
}
}
}
} }
.user { // .user {
display: grid; // display: grid;
} // }
.search{ // .search{
width: 50%; // width: 50%;
margin-bottom: 20px; // margin-bottom: 20px;
} // }
.paramsName{
margin-right: 10px;
}
.deleteBtn{
margin-left: 5px;
}
.authBtn{
cursor: pointer;
}
.selectedResource{
font-size: 12px;
color: darkgrey;
margin-top: 4px;
}
.switch{
// min-width: 900px;
// max-width: 1200px;
// width: 100%;
display: flex;
justify-content: flex-start;
.switchUser {
width: 200px;
margin-left: 33px;
:global {
.ant-select {
width: 100% !important;
}
}
}
}
.dimensionIntentionForm { // .authBtn{
margin-bottom: -24px !important; // cursor: pointer;
margin-top: 10px; // }
margin-left: 26px;
}
.classTable { .classTable {
:global { :global {
.ant-pro-table-search-query-filter { .ant-pro-table-search-query-filter {
padding-left: 0 !important; padding-left: 0 !important;
// padding-bottom: 24px !important;
.ant-pro-form-query-filter {
.ant-form-item {
// margin-bottom: 0;
}
}
} }
.ant-table-tbody > tr.ant-table-row-selected > td { .ant-table-tbody > tr.ant-table-row-selected > td {
background: none; background: none;
@@ -275,8 +241,6 @@
padding: 0 11px; padding: 0 11px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
// background-color: #fff;
// border: 1px solid #d9d9d9;
border-radius: 4px; border-radius: 4px;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
color: #000a24d9; color: #000a24d9;

18
webapp/packages/supersonic-fe/src/pages/SemanticModel/constant.ts
View File

@@ -1,17 +1,23 @@
import { SemanticNodeType } from './enum'; import { SemanticNodeType } from './enum';
export enum SENSITIVE_LEVEL {
LOW = 0,
MID = 1,
HIGH = 2,
}
export const SENSITIVE_LEVEL_OPTIONS = [ export const SENSITIVE_LEVEL_OPTIONS = [
{ {
label: '低', label: '低',
value: 0, value: SENSITIVE_LEVEL.LOW,
}, },
{ {
label: '中', label: '中',
value: 1, value: SENSITIVE_LEVEL.MID,
}, },
{ {
label: '高', label: '高',
value: 2, value: SENSITIVE_LEVEL.HIGH,
}, },
]; ];
@@ -24,6 +30,12 @@ export const SENSITIVE_LEVEL_ENUM = SENSITIVE_LEVEL_OPTIONS.reduce(
{}, {},
); );
export const SENSITIVE_LEVEL_COLOR = {
[SENSITIVE_LEVEL.LOW]: 'lime',
[SENSITIVE_LEVEL.MID]: 'warning',
[SENSITIVE_LEVEL.HIGH]: 'error',
};
export const SEMANTIC_NODE_TYPE_CONFIG = { export const SEMANTIC_NODE_TYPE_CONFIG = {
[SemanticNodeType.DATASOURCE]: { [SemanticNodeType.DATASOURCE]: {
label: '数据源', label: '数据源',

6
webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
View File

@@ -138,6 +138,10 @@ export function getMetricTags(): Promise<any> {
return request.get(`${process.env.API_BASE_URL}metric/getMetricTags`); return request.get(`${process.env.API_BASE_URL}metric/getMetricTags`);
} }
export function getMetricData(metricId: string | number): Promise<any> {
return request.get(`${process.env.API_BASE_URL}metric/getMetric/${metricId}`);
}
export function getDrillDownDimension(metricId: number): Promise<any> { export function getDrillDownDimension(metricId: number): Promise<any> {
return request.get(`${process.env.API_BASE_URL}metric/getDrillDownDimension`, { return request.get(`${process.env.API_BASE_URL}metric/getDrillDownDimension`, {
params: { metricId }, params: { metricId },
@@ -453,7 +457,7 @@ export async function queryStruct({
period: 'DAY', period: 'DAY',
text: 'null', text: 'null',
}, },
limit: 365, limit: 2000,
nativeQuery: false, nativeQuery: false,
}, },
}, },

5
webapp/packages/supersonic-fe/src/typings.d.ts vendored
View File

@@ -57,3 +57,8 @@ type PaginationResponse<T> = Result<{
pageSize: number; pageSize: number;
total: number; total: number;
}>; }>;
type OptionsItem = {
value: string | number;
label: string;
};