mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-13 13:07:32 +00:00
[improvement][semantic-fe] UI optimization for metric details page. (#610)
* [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.
This commit is contained in:
tristanliu
@@ -0,0 +1,188 @@
|
||||
import { message, Tag, Space, Tooltip } from 'antd';
|
||||
import React, { useState, useEffect, ReactNode } from 'react';
|
||||
import { getMetricData } from '../service';
|
||||
import { connect, useParams } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
ExportOutlined,
|
||||
SolutionOutlined,
|
||||
ContainerOutlined,
|
||||
PartitionOutlined,
|
||||
FallOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import styles from './style.less';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
|
||||
import { ISemantic } from '../data';
|
||||
import MetricStar from './components/MetricStar';
|
||||
|
||||
type Props = {
|
||||
metircData: any;
|
||||
domainManger: StateType;
|
||||
onNodeChange: (params?: { eventName?: string }) => void;
|
||||
onEditBtnClick?: (metircData: any) => void;
|
||||
onDimensionRelationBtnClick?: () => void;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
|
||||
const params: any = useParams();
|
||||
const metricId = params.metricId;
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.metricInfoSider}>
|
||||
<div className={styles.title}>
|
||||
<div className={styles.name}>
|
||||
<Space>
|
||||
<MetricStar metricId={metricId} initState={metircData?.isCollect} />
|
||||
{metircData?.name}
|
||||
{metircData?.alias && `[${metircData.alias}]`}
|
||||
{metircData?.hasAdminRes && (
|
||||
<span
|
||||
className={styles.gotoMetricListIcon}
|
||||
onClick={() => {
|
||||
window.open(`/webapp/model/${metircData.domainId}/${metircData.modelId}/`);
|
||||
}}
|
||||
>
|
||||
<Tooltip title="前往所属模型指标列表">
|
||||
<ExportOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{metircData?.sensitiveLevel !== undefined && (
|
||||
<span style={{ marginLeft: 25 }}>
|
||||
<Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
|
||||
{SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
|
||||
</Tag>
|
||||
</span>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
{metircData?.bizName && <div className={styles.bizName}>{metircData.bizName}</div>}
|
||||
</div>
|
||||
|
||||
<div className={styles.sectionContainer}>
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionTitleBox}>
|
||||
<span className={styles.sectionTitle}>
|
||||
<Space>
|
||||
<ContainerOutlined />
|
||||
基本信息
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>所属模型: </span>
|
||||
<span className={styles.itemValue}>
|
||||
<Space>
|
||||
<Tag icon={<PartitionOutlined />} color="#3b5999">
|
||||
{metircData?.modelName || '模型名为空'}
|
||||
</Tag>
|
||||
{metircData?.hasAdminRes && (
|
||||
<span
|
||||
className={styles.gotoMetricListIcon}
|
||||
onClick={() => {
|
||||
window.open(`/webapp/model/${metircData.domainId}/0/overview`);
|
||||
}}
|
||||
>
|
||||
<Tooltip title="前往模型设置页">
|
||||
<ExportOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>描述: </span>
|
||||
<span className={styles.itemValue}>{metircData?.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionTitleBox}>
|
||||
<span className={styles.sectionTitle}>
|
||||
<Space>
|
||||
<SolutionOutlined />
|
||||
创建信息
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>创建人: </span>
|
||||
<span className={styles.itemValue}>{metircData?.createdBy}</span>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>创建时间: </span>
|
||||
<span className={styles.itemValue}>
|
||||
{metircData?.createdAt
|
||||
? dayjs(metircData?.createdAt).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>更新时间: </span>
|
||||
<span className={styles.itemValue}>
|
||||
{metircData?.createdAt
|
||||
? dayjs(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr className={styles.hr} />
|
||||
<div className={styles.ctrlBox}>
|
||||
<ul className={styles.ctrlList}>
|
||||
<li
|
||||
onClick={() => {
|
||||
onDimensionRelationBtnClick?.();
|
||||
}}
|
||||
>
|
||||
<Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
|
||||
<Space style={{ width: '100%' }}>
|
||||
<span className={styles.ctrlItemIcon}>
|
||||
<FallOutlined />
|
||||
</span>
|
||||
<span className={styles.ctrlItemLable}>下钻维度配置</span>
|
||||
</Space>
|
||||
</Tooltip>
|
||||
</li>
|
||||
{/* <li
|
||||
onClick={() => {
|
||||
onDimensionRelationBtnClick?.();
|
||||
}}
|
||||
>
|
||||
<Space style={{ width: '100%' }}>
|
||||
<span className={styles.ctrlItemIcon}>
|
||||
<DeleteOutlined />
|
||||
</span>
|
||||
<span className={styles.ctrlItemLable}>删除</span>
|
||||
</Space>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(MetricInfoSider);
|
||||
Reference in New Issue
Block a user