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][headless-fe] code stash

Browse Source
This commit is contained in:
tristanliu
2024-11-28 20:29:12 +08:00
parent c80794e8fc
commit b4669cf110
34 changed files with 991 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -91,6 +91,11 @@ const ROUTES = [
},
],
},
{
path: '/model/dataset/:domainId/:datasetId',
component: './SemanticModel/View/components/Detail',
envEnableList: [ENV_KEY.SEMANTIC],
},
{
path: '/model/metric/:domainId/:modelId/:metricId',
component: './SemanticModel/Metric/Edit',
@@ -102,101 +107,8 @@ const ROUTES = [
// },
// ],
},
// {
// path: '/model/manager/',
// component: './SemanticModel/OverviewContainer',
// routes: [
// {
// path: '/model/manager/:domainId/:modelId',
// component: './SemanticModel/ModelManager',
// routes: [
// {
// path: '/model/manager/:domainId/:modelId/:menuKey',
// component: './SemanticModel/ModelManager',
// },
// ],
// },
// ],
// },
// {
// path: '/model/:domainId',
// component: './SemanticModel/DomainManager',
// envEnableList: [ENV_KEY.SEMANTIC],
// routes: [
// {
// path: '/model/:domainId/:menuKey',
// component: './SemanticModel/DomainManager',
// },
// ],
// },
// {
// path: '/model/manager/:domainId/:modelId',
// component: './SemanticModel/ModelManager',
// envEnableList: [ENV_KEY.SEMANTIC],
// routes: [
// {
// path: '/model/manager/:domainId/:modelId/:menuKey',
// component: './SemanticModel/ModelManager',
// },
// ],
// },
// {
// path: '/model/:domainId/:modelId/:menuKey',
// component: './SemanticModel/DomainManager',
// envEnableList: [ENV_KEY.SEMANTIC],
// },
// {
// path: '/model/:domainId/:modelId/metric',
// component: './SemanticModel/components/ModelMetric',
// envEnableList: [ENV_KEY.SEMANTIC],
// routes: [
// {
// path: '/model/:domainId/:modelId/metric/list',
// component: './SemanticModel/components/ClassMetricTable',
// envEnableList: [ENV_KEY.SEMANTIC],
// },
// ],
// },
],
},
// {
// path: '/model/',
// component: './SemanticModel/DomainManager',
// name: 'semanticModel',
// envEnableList: [ENV_KEY.SEMANTIC],
// routes: [
// {
// path: '/model/:domainId/:modelId',
// component: './SemanticModel/DomainManager',
// envEnableList: [ENV_KEY.SEMANTIC],
// },
// {
// path: '/model/:domainId/:modelId/:menuKey',
// component: './SemanticModel/DomainManager',
// envEnableList: [ENV_KEY.SEMANTIC],
// },
// {
// path: '/model/:domainId/:modelId/metric',
// component: './SemanticModel/components/ModelMetric',
// envEnableList: [ENV_KEY.SEMANTIC],
// routes: [
// {
// path: '/model/:domainId/:modelId/metric/list',
// component: './SemanticModel/components/ClassMetricTable',
// envEnableList: [ENV_KEY.SEMANTIC],
// },
// ],
// },
// ],
// },
// {
// path: '/model/:domainId/:modelId/:menuKey',
// component: './SemanticModel/DomainManager',
// name: 'semanticModel',
// envEnableList: [ENV_KEY.SEMANTIC],
// },
{
path: '/metric',

13
webapp/packages/supersonic-fe/src/app.tsx
View File

@@ -12,6 +12,7 @@ import { publicPath } from '../config/defaultSettings';
import { Copilot } from 'supersonic-chat-sdk';
import { configProviderTheme } from '../config/themeSettings';
export { request } from './services/request';
import { BASE_TITLE } from '@/common/constants';
import { ROUTE_AUTH_CODES } from '../config/routes';
import AppPage from './pages/index';
@@ -106,12 +107,12 @@ export async function getInitialState(): Promise<{
// }
export function onRouteChange() {
const title = window.document.title.split('-SuperSonic')[0];
if (!title.includes('SuperSonic')) {
window.document.title = `${title}-SuperSonic`;
} else {
window.document.title = 'SuperSonic';
}
setTimeout(() => {
let title = window.document.title;
if (!title.toLowerCase().endsWith(BASE_TITLE.toLowerCase())) {
window.document.title = `${title}-${BASE_TITLE}`;
}
}, 100);
}
export const layout: RunTimeLayoutConfig = (params) => {

2
webapp/packages/supersonic-fe/src/common/constants.ts
View File

@@ -3,6 +3,8 @@ export const AUTH_TOKEN_KEY = process.env.APP_TARGET === 'inner' ? 'TME_TOKEN' :
// 记录上次访问页面
export const FROM_URL_KEY = 'FROM_URL';
export const BASE_TITLE = 'Supersonic';
export const PRIMARY_COLOR = '#f87653';
export const CHART_BLUE_COLOR = '#446dff';
export const CHAT_BLUE = '#1b4aef';

9
webapp/packages/supersonic-fe/src/pages/SemanticModel/DomainManager.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { history, useParams, useModel } from '@umijs/max';
import { useParams, useModel } from '@umijs/max';
import DomainManagerTab from './components/DomainManagerTab';
import { toDomainList } from '@/pages/SemanticModel/utils';
type Props = {};
@@ -14,16 +15,12 @@ const DomainManager: React.FC<Props> = ({}) => {
const [activeKey, setActiveKey] = useState<string>(menuKey);
const pushUrlMenu = (domainId: number, menuKey: string) => {
history.push(`/model/domain/${domainId}/${menuKey}`);
};
return (
<DomainManagerTab
activeKey={activeKey}
onMenuChange={(menuKey) => {
setActiveKey(menuKey);
pushUrlMenu(selectDomainId, menuKey);
toDomainList(selectDomainId, menuKey);
}}
/>
);

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

@@ -540,7 +540,6 @@ const TagInfoCreateForm: React.FC<CreateFormProps> = ({
forceRender
width={800}
style={{ top: 48 }}
// styles={{ padding: '32px 40px 48px' }}
destroyOnClose
title={`${isEdit ? '编辑' : '新建'}标签`}
maskClosable={false}

24
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
View File

@@ -1,7 +1,8 @@
import { message, Tabs, Button, Space } from 'antd';
import React, { useState, useEffect } from 'react';
import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
import { useParams, history } from '@umijs/max';
import { useParams, history, Helmet } from '@umijs/max';
import { BASE_TITLE } from '@/common/constants';
import styles from './style.less';
import { ArrowLeftOutlined } from '@ant-design/icons';
import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
@@ -80,7 +81,7 @@ const MetricDetail: React.FC<Props> = () => {
{
key: 'metricCaliberInput',
label: '基础信息',
children: <MetricBasicInfo metircData={metircData} onQueryMetricData={queryMetricData} />,
children: <MetricBasicInfo metircData={metircData} />,
},
{
key: 'metricTrend',
@@ -103,8 +104,18 @@ const MetricDetail: React.FC<Props> = () => {
return (
<>
<Helmet title={`[指标]${metircData?.name}-${BASE_TITLE}`} />
<div className={styles.metricDetailWrapper}>
<div className={styles.metricDetail}>
<div className={styles.siderContainer}>
<MetricInfoSider
relationDimensionOptions={relationDimensionOptions}
metircData={metircData}
onDimensionRelationBtnClick={() => {
setMetricRelationModalOpenState(true);
}}
/>
</div>
<div className={styles.tabContainer}>
<Tabs
defaultActiveKey="metricCaliberInput"
@@ -130,15 +141,6 @@ const MetricDetail: React.FC<Props> = () => {
className={styles.metricDetailTab}
/>
</div>
<div className={styles.siderContainer}>
<MetricInfoSider
relationDimensionOptions={relationDimensionOptions}
metircData={metircData}
onDimensionRelationBtnClick={() => {
setMetricRelationModalOpenState(true);
}}
/>
</div>
</div>
<DimensionAndMetricRelationModal
metricItem={metircData}

54
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit.tsx
View File

@@ -1,12 +1,14 @@
import { message } from 'antd';
import React, { useState, useEffect } from 'react';
import { getMetricData } from '../service';
import { useParams, useModel } from '@umijs/max';
import styles from './style.less';
import { useParams, useModel, Helmet } from '@umijs/max';
import { BASE_TITLE } from '@/common/constants';
import { ISemantic } from '../data';
import MetricInfoEditSider from './MetricInfoEditSider';
import MetricInfoCreateForm from './components/MetricInfoCreateForm';
import { MetricSettingKey } from './constants';
import DetailContainer from '../components/DetailContainer';
import DetailSider from '../components/DetailContainer/DetailSider';
import { ProjectOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
import { MetricSettingKey, MetricSettingWording } from './constants';
type Props = Record<string, any>;
@@ -15,7 +17,7 @@ const MetricDetail: React.FC<Props> = () => {
const metricId = params.metricId;
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
const metricModel = useModel('SemanticModel.metricData');
const { selectMetric, setSelectMetric } = metricModel;
const { setSelectMetric } = metricModel;
const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
useEffect(() => {
@@ -41,23 +43,35 @@ const MetricDetail: React.FC<Props> = () => {
message.error(msg);
};
const settingList = [
{
icon: <ProjectOutlined />,
key: MetricSettingKey.BASIC,
text: MetricSettingWording[MetricSettingKey.BASIC],
},
{
icon: <ConsoleSqlOutlined />,
key: MetricSettingKey.SQL_CONFIG,
text: MetricSettingWording[MetricSettingKey.SQL_CONFIG],
},
];
return (
<>
<div className={styles.metricEditWrapper}>
<div className={styles.metricDetail}>
<div className={styles.siderContainer}>
<MetricInfoEditSider
onSettingKeyChange={(key: string) => {
setSettingKey(key);
}}
metircData={metircData}
/>
</div>
<div className={styles.tabContainer}>
<MetricInfoCreateForm settingKey={settingKey} metricItem={metircData} />
</div>
</div>
</div>
<Helmet title={`[指标]${metircData?.name}-${BASE_TITLE}`} />
<DetailContainer
siderNode={
<DetailSider
menuKey={MetricSettingKey.BASIC}
menuList={settingList}
detailData={metircData}
onMenuKeyChange={(key: string) => {
setSettingKey(key);
}}
/>
}
containerNode={<MetricInfoCreateForm settingKey={settingKey} metricItem={metircData} />}
/>
</>
);
};

57
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit2.tsx
View File

@@ -1,57 +0,0 @@
import { message } from 'antd';
import React, { useState, useEffect } from 'react';
import { getMetricData } from '../service';
import { useParams } from '@umijs/max';
import styles from './style.less';
import { ISemantic } from '../data';
import MetricInfoEditSider from './MetricInfoEditSider';
import MetricInfoCreateForm from './components/MetricInfoCreateForm';
import { MetricSettingKey } from './constants';
type Props = Record<string, any>;
const MetricDetail: React.FC<Props> = () => {
const params: any = useParams();
const metricId = params.metricId;
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
useEffect(() => {
if (!metricId) {
return;
}
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.metricWrapper}>
<div className={styles.metricDetail}>
{/* <div className={styles.siderContainer}>
<MetricInfoEditSider
onSettingKeyChange={(key: string) => {
setSettingKey(key);
}}
metircData={metircData}
/>
</div> */}
<div className={styles.tabContainer}>
<MetricInfoCreateForm settingKey={settingKey} metricItem={metircData} />
</div>
</div>
</div>
</>
);
};
export default MetricDetail;

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
View File

@@ -152,8 +152,6 @@ const ClassMetricTable: React.FC<Props> = ({}) => {
};
const handleMetricEdit = (metricItem: ISemantic.IMetricItem) => {
// setMetricItem(metricItem);
// setCreateModalVisible(true);
history.push(`/model/metric/edit/${metricItem.id}`);
};

9
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx
View File

@@ -59,15 +59,6 @@ const MetricInfoSider: React.FC<Props> = ({
<div className={styles.sectionContainer}>
<hr className={styles.hr} />
<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}>

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
View File

@@ -1,4 +1,4 @@
import { Form, Input, Space, Row, Col, Switch, Flex, Tag } from 'antd';
import { Form, Input, Space, Row, Col } from 'antd';
import StandardFormRow from '@/components/StandardFormRow';
import TagSelect from '@/components/TagSelect';
import React, { ReactNode, useEffect } from 'react';

16
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx
View File

@@ -29,7 +29,6 @@ import {
batchCreateTag,
batchDeleteTag,
} from '../../service';
import { ArrowLeftOutlined } from '@ant-design/icons';
import MetricMetricFormTable from '../../components/MetricMetricFormTable';
import MetricFieldFormTable from '../../components/MetricFieldFormTable';
import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
@@ -68,7 +67,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
const isEdit = !!metricItem?.id;
const domainId = metricItem?.domainId;
const modelId = metricItem?.modelId;
const [currentStep, setCurrentStep] = useState(0);
const formValRef = useRef({} as any);
const [form] = Form.useForm();
const updateFormVal = (val: any) => {
@@ -827,7 +825,10 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
<span style={{ flex: 'auto' }}>{MetricSettingWording[settingKey]}</span>
<span style={{ flex: 'none' }}>
<Button
<Button type="primary" onClick={handleSave}>
保 存
</Button>
{/* <Button
size="middle"
type="link"
key="backListBtn"
@@ -839,7 +840,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
<ArrowLeftOutlined />
返回列表页
</Space>
</Button>
</Button> */}
</span>
</div>
<div className={styles.infoCardContainer}>
@@ -870,13 +871,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
{renderContent()}
</Form>
</div>
<div className={styles.infoCardFooter}>
<div className={styles.infoCardFooterContainer}>
<Button type="primary" onClick={handleSave}>
保 存
</Button>
</div>
</div>
</div>
<DimensionAndMetricRelationModal
metricItem={metricItem}

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

@@ -1,5 +1,5 @@
import React from 'react';
import { Outlet } from 'umi';
import { Outlet } from '@umijs/max';
const market: React.FC = () => {
return (

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

@@ -183,68 +183,7 @@
}
}
.metricEditWrapper {
.metricDetailTab {
:global {
.ant-tabs-nav {
margin: 10px 20px 0 20px;
padding: 0 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.ant-tabs-tab {
padding: 12px 0;
color: #344767;
font-weight: 500;
}
}
}
.metricDetail {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
padding: 0px;
background-color: transparent;
height: 100%;
.tabContainer {
padding: 24px;
min-height: calc(100vh - 78px);
width: calc(100vw - 350px);
background-color: #fafafb;
}
.metricInfoContent {
padding: 25px;
.title {
position: relative;
margin-bottom: 12px;
color: #0e73ff;
font-weight: bold;
font-size: 16px;
&::before {
position: absolute;
top: 10px;
left: -10px;
display: block;
width: 3px;
height: 14px;
font-size: 0;
background: #0e73ff;
border: 1px solid #0e73ff;
border-radius: 2px;
content: '';
}
}
}
.siderContainer {
width: 350px;
min-height: calc(100vh - 78px);
border-radius: 6px;
padding: 24px 0 24px 24px;
}
}
}
.metricDetailWrapper {
height: calc(100vh - 56px);
@@ -276,7 +215,8 @@
.tabContainer {
height: 100%;
min-height: calc(100vh - 78px);
width: calc(100vw - 450px);
// width: calc(100vw - 450px);
width: 100%;
background-color: #fafafb;
}
.metricInfoContent {
@@ -305,9 +245,8 @@
.siderContainer {
width: 450px;
min-height: calc(100vh - 78px);
margin: 10px 20px 20px 0;
background-color: rgb(255, 255, 255);
border-radius: 6px;
padding: 10px 0 24px 24px;
box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px,
rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
}
@@ -326,262 +265,5 @@
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.metricInfoSider {
padding: 20px;
color: #344767;
background-color: #fff;
height: 100%;
border: 1px solid #e6ebf1;
border-radius: 6px;
.createTitle {
margin-bottom: 10px;
color:#344767;
font-weight: 500;
font-size: 16px;
font-family: var(--tencent-font-family);
}
.gotoMetricListIcon {
color: #3182ce;
cursor: pointer;
&:hover {
color: #5493ff;
}
}
.title {
margin-bottom: 20px;
.name {
font-weight: 600;
font-size: 18px;
}
.bizName {
margin: 5px 0 0 25px;
color: #7b809a;
font-weight: 400;
}
}
.desc {
display: block;
margin-top: 8px;
color: #7b809a;
font-weight: 500;
font-size: 14px;
line-height: 1.9;
}
.subTitle {
margin: 0px;
color: rgb(123, 128, 154);
font-weight: 700;
font-size: 14px;
line-height: 1.25;
letter-spacing: 0.03333em;
text-transform: uppercase;
text-decoration: none;
vertical-align: unset;
opacity: 1;
}
.sectionContainer {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: scroll;
overflow: hidden;
background-image: none;
border-radius: 6px;
.section {
padding: 16px;
color: rgb(52, 71, 103);
line-height: 1.25;
background: transparent;
box-shadow: none;
opacity: 1;
.sectionTitleBox {
padding: 8px 0;
color: rgb(52, 71, 103);
background: transparent;
box-shadow: none;
opacity: 1;
.sectionTitle {
margin: 0px;
color: rgb(52, 71, 103);
font-weight: 600;
font-size: 16px;
line-height: 1.625;
letter-spacing: 0.0075em;
text-transform: capitalize;
text-decoration: none;
vertical-align: unset;
opacity: 1;
}
}
.item {
display: flex;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
color: rgb(52, 71, 103);
background: transparent;
box-shadow: none;
opacity: 1;
.itemLable {
min-width: fit-content;
margin: 0px;
margin-right: 10px;
color: #344767;
font-weight: 700;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.02857em;
text-transform: capitalize;
text-decoration: none;
vertical-align: unset;
opacity: 1;
}
.itemValue {
margin: 0px;
color: #7b809a;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.02857em;
text-transform: none;
text-decoration: none;
vertical-align: unset;
opacity: 1;
}
}
}
.hr {
flex-shrink: 0;
margin: 0px;
border-color: rgb(242, 244, 247);
// border-width: 0px 0px thin;
border-style: solid;
}
.ctrlBox {
.ctrlList {
position: relative;
margin: 0px;
padding: 8px 0px;
list-style: none;
background-color: rgb(249, 250, 251);
li {
position: relative;
display: flex;
flex-grow: 1;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
min-width: 0px;
margin: 4px;
padding: 4px 16px;
color: inherit;
text-align: left;
text-decoration: none;
vertical-align: middle;
background-color: transparent;
border: 0px;
border-radius: 0px;
outline: 0px;
cursor: pointer;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
appearance: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-box-flex: 1;
-webkit-box-pack: start;
-webkit-box-align: center;
&:hover {
color: #3182ce;
text-decoration: none;
background-color: rgba(16, 24, 40, 0.04);
}
}
.ctrlItemIcon {
flex-shrink: 0;
min-width: unset;
margin-right: 5px;
font-size: 14px;
}
.styles.ctrlItemLable {
display: block;
margin: 0px;
font-weight: 400;
font-size: 14px;
line-height: 1.6;
}
}
}
}
}
.settingList {
list-style: none;
margin: 0px;
position: relative;
padding: 0px;
li {
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0px;
border: 0px;
margin: 0px;
border-radius: 0px;
cursor: pointer;
user-select: none;
vertical-align: middle;
appearance: none;
display: flex;
flex-grow: 1;
justify-content: flex-start;
align-items: center;
position: relative;
text-decoration: none;
min-width: 0px;
box-sizing: border-box;
text-align: left;
padding: 8px 16px;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
&.active {
background-color: rgba(22, 119, 255, 0.08);
.icon {
color: rgb(22, 119, 255);
}
.content {
.text {
color: rgb(22, 119, 255);
}
}
}
.icon {
min-width: 32px;
color: #344767;
flex-shrink: 0;
display: inline-flex;
}
.content {
flex: 1 1 auto;
min-width: 0px;
margin-top: 4px;
margin-bottom: 4px;
.text {
margin: 0px;
color: #344767;
font-size: 16px;
// line-height: 1.57;
// font-family: var(--tencent-font-family);
font-weight: 600;
display: block;
}
}
&:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.04);
}
}
}

9
webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { history, useParams, useModel } from '@umijs/max';
import ModelManagerTab from './components/ModelManagerTab';
import { toModelList } from '@/pages/SemanticModel/utils';
type Props = {};
@@ -21,7 +22,7 @@ const ModelManager: React.FC<Props> = ({}) => {
const initModelConfig = () => {
const currentMenuKey = menuKey === defaultTabKey ? '' : menuKey;
pushUrlMenu(selectDomainId, selectModelId, currentMenuKey);
toModelList(selectDomainId, selectModelId, currentMenuKey);
setActiveKey(currentMenuKey);
};
@@ -34,17 +35,13 @@ const ModelManager: React.FC<Props> = ({}) => {
MrefreshMetricList({ modelId: selectModelId });
}, [selectModelId]);
const pushUrlMenu = (domainId: number, modelId: number, menuKey: string) => {
history.push(`/model/domain/manager/${domainId}/${modelId}/${menuKey}`);
};
return (
<ModelManagerTab
activeKey={activeKey}
modelList={modelList}
onMenuChange={(menuKey) => {
setActiveKey(menuKey);
pushUrlMenu(selectDomainId, selectModelId, menuKey);
toModelList(selectDomainId, selectModelId, menuKey);
}}
/>
);

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

@@ -1,9 +1,10 @@
import React, { useEffect, useState } from 'react';
import { history, useParams, useModel, Outlet } from '@umijs/max';
import { useParams, useModel, Outlet } from '@umijs/max';
import DomainListTree from './components/DomainList';
import styles from './components/style.less';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { ISemantic } from './data';
import { toDomainList } from '@/pages/SemanticModel/utils';
type Props = {};
@@ -14,10 +15,8 @@ const OverviewContainer: React.FC<Props> = ({}) => {
const modelId = params.modelId;
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const databaseModel = useModel('SemanticModel.databaseData');
const { setSelectDomain, setDomainList, selectDomainId } = domainModel;
const { setSelectDomain, selectDomainId } = domainModel;
const { setSelectModel, setModelTableHistoryParams, MrefreshModelList } = modelModel;
const { MrefreshDatabaseList } = databaseModel;
const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? defaultTabKey : '';
const [collapsedState, setCollapsedState] = useState(true);
@@ -25,51 +24,11 @@ const OverviewContainer: React.FC<Props> = ({}) => {
if (!selectDomainId || `${domainId}` === `${selectDomainId}`) {
return;
}
pushUrlMenu(selectDomainId, menuKey);
toDomainList(selectDomainId, menuKey);
}, [selectDomainId]);
// const initSelectedDomain = (domainList: ISemantic.IDomainItem[]) => {
// const targetNode = domainList.filter((item: any) => {
// return `${item.id}` === domainId;
// })[0];
// if (!targetNode) {
// const firstRootNode = domainList.filter((item: any) => {
// return item.parentId === 0;
// })[0];
// if (firstRootNode) {
// const { id } = firstRootNode;
// setSelectDomain(firstRootNode);
// pushUrlMenu(id, menuKey);
// }
// } else {
// setSelectDomain(targetNode);
// }
// };
// const initProjectTree = async () => {
// const { code, data, msg } = await getDomainList();
// if (code === 200) {
// initSelectedDomain(data);
// setDomainList(data);
// } else {
// message.error(msg);
// }
// };
// useEffect(() => {
// initProjectTree();
// MrefreshDatabaseList();
// return () => {
// setSelectDomain(undefined);
// };
// }, []);
const pushUrlMenu = (domainId: number, menuKey: string) => {
history.push(`/model/domain/${domainId}/${menuKey}`);
};
const cleanModelInfo = (domainId) => {
pushUrlMenu(domainId, defaultTabKey);
const cleanModelInfo = (domainId: number) => {
toDomainList(domainId, defaultTabKey);
setSelectModel(undefined);
};
@@ -102,9 +61,6 @@ const OverviewContainer: React.FC<Props> = ({}) => {
[id]: {},
});
}}
// onTreeDataUpdate={() => {
// // initProjectTree();
// }}
/>
</div>

6
webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx
View File

@@ -1,9 +1,9 @@
import { Outlet } from '@umijs/max';
import { Tabs, Breadcrumb, Space, Radio } from 'antd';
import React, { useRef, useEffect, useState } from 'react';
import { history, useModel } from '@umijs/max';
import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
import styles from './components/style.less';
import { toDomainList, toModelList } from '@/pages/SemanticModel/utils';
const PageBreadcrumb: React.FC = () => {
const domainModel = useModel('SemanticModel.domainData');
@@ -20,7 +20,7 @@ const PageBreadcrumb: React.FC = () => {
<Space
onClick={() => {
setSelectModel(undefined);
history.push(`/model/domain/${selectDomainId}/overview`);
toDomainList(selectDomainId, 'overview');
}}
>
<HomeOutlined />
@@ -41,7 +41,7 @@ const PageBreadcrumb: React.FC = () => {
<Space
onClick={() => {
setSelectMetric(undefined);
history.push(`/model/domain/manager/${selectDomainId}/${selectModelId}/`);
toModelList(selectDomainId, selectModelId);
}}
>
<FundViewOutlined style={{ position: 'relative', top: '2px' }} />

8
webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx
View File

@@ -11,6 +11,7 @@ import styles from '../../components/style.less';
import { ISemantic } from '../../data';
import { ColumnsConfig } from '../../components/TableColumnRender';
import ViewSearchFormModal from './ViewSearchFormModal';
import { toDatasetEditPage } from '@/pages/SemanticModel/utils';
type Props = {
// dataSetList: ISemantic.IDatasetItem[];
@@ -90,9 +91,10 @@ const DataSetTable: React.FC<Props> = ({ disabledEdit = false }) => {
return (
<a
onClick={() => {
setEditFormStep(1);
setViewItem(record);
setCreateDataSourceModalOpen(true);
toDatasetEditPage(record.domainId, record.id);
// setEditFormStep(1);
// setViewItem(record);
// setCreateDataSourceModalOpen(true);
}}
>
{name}

289
webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx Normal file
View File

@@ -0,0 +1,289 @@
import React, { useState, useEffect, useRef } from 'react';
import { Form, Button, Modal, Input, Select, Steps, Spin, Space } from 'antd';
import styles from '../../components/style.less';
import { message } from 'antd';
import { formLayout } from '@/components/FormHelper/utils';
import { createView, updateView, getDimensionList, queryMetric } from '../../service';
import { ISemantic } from '../../data';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import SelectTMEPerson from '@/components/SelectTMEPerson';
import ViewModelConfigTransfer from './ViewModelConfigTransfer';
import type { FormInstance } from 'antd';
const FormItem = Form.Item;
export type ModelCreateFormModalProps = {
// step: number;
form: FormInstance;
activeKey: string;
domainId: number;
viewItem: any;
modelList: ISemantic.IModelItem[];
onCancel: () => void;
onSubmit: (values: any) => void;
};
const DatasetCreateForm: React.FC<ModelCreateFormModalProps> = ({
form,
activeKey,
viewItem,
domainId,
onCancel,
onSubmit,
modelList,
}) => {
const stepWidth: Record<string, number> = {
'0': 800,
'1': 1200,
'2': 800,
};
// const [currentStep, setCurrentStep] = useState();
const [formVals, setFormVals] = useState<ISemantic.IModelItem>({
...viewItem,
currentModel: modelList[0]?.id,
});
const [queryType, setQueryType] = useState<string>('METRIC');
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [dimensionLoading, setDimensionLoading] = useState<boolean>(false);
// const [modalWidth, setModalWidth] = useState<number>(stepWidth[`${currentStep}`]);
const [selectedModelItem, setSelectedModelItem] = useState<ISemantic.IModelItem | undefined>(
modelList[0],
);
// const [form] = Form.useForm();
const configTableRef = useRef<any>();
useEffect(() => {
form.setFieldsValue({
...viewItem,
});
// setQueryType(viewItem?.queryType);
}, [viewItem]);
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>();
const [metricList, setMetricList] = useState<ISemantic.IMetricItem[]>();
// const [tagList, setTagList] = useState<ISemantic.ITagItem[]>();
useEffect(() => {
console.log(selectedModelItem, 'selectedModelItemselectedModelItem');
if (selectedModelItem?.id) {
queryDimensionList(selectedModelItem.id);
queryMetricList(selectedModelItem.id);
// queryTagList(selectedModelItem.id);
}
}, [selectedModelItem]);
const queryDimensionList = async (modelId: number) => {
setDimensionLoading(true);
const { code, data, msg } = await getDimensionList({ modelId });
setDimensionLoading(false);
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
} else {
message.error(msg);
}
};
const queryMetricList = async (modelId: number) => {
const { code, data, msg } = await queryMetric({ modelId });
if (code === 200 && Array.isArray(data?.list)) {
setMetricList(data.list);
} else {
message.error(msg);
}
};
const handleConfirm = async () => {
const fieldsValue = await form.validateFields();
const viewModelConfigsMap = configTableRef?.current.getViewModelConfigs() || {};
const queryData: ISemantic.IModelItem = {
...formVals,
...fieldsValue,
queryType,
dataSetDetail: {
dataSetModelConfigs: Object.values(viewModelConfigsMap),
},
domainId,
};
setFormVals(queryData);
setSaveLoading(true);
const { code, msg } = await (!queryData.id ? createView : updateView)(queryData);
setSaveLoading(false);
if (code === 200) {
onSubmit?.(queryData);
} else {
message.error(msg);
}
};
// const forward = () => {
// setModalWidth(stepWidth[`${currentStep + 1}`]);
// setCurrentStep(currentStep + 1);
// };
// const backward = () => {
// setModalWidth(stepWidth[`${currentStep - 1}`]);
// setCurrentStep(currentStep - 1);
// };
// const handleNext = async () => {
// await form.validateFields();
// forward();
// };
// const renderFooter = () => {
// if (currentStep === 1) {
// return (
// <>
// <Button style={{ float: 'left' }} onClick={backward}>
// 上一步
// </Button>
// <Button
// type="primary"
// loading={saveLoading}
// onClick={() => {
// handleConfirm();
// }}
// >
// 保 存
// </Button>
// </>
// );
// }
// return (
// <>
// <Button onClick={onCancel}>取消</Button>
// <Button type="primary" onClick={handleNext}>
// 下一步
// </Button>
// <Button
// type="primary"
// loading={saveLoading}
// onClick={() => {
// handleConfirm();
// }}
// >
// 保 存
// </Button>
// </>
// );
// };
const renderContent = () => {
return (
<>
<div style={{ display: activeKey === 'relation' ? 'block' : 'none' }}>
<Spin spinning={dimensionLoading}>
<ViewModelConfigTransfer
key={queryType}
queryType={queryType}
toolbarSolt={
<Space>
<span>切换模型: </span>
<Select
style={{
minWidth: 150,
textAlign: 'left',
}}
value={selectedModelItem?.id}
placeholder="请选择模型，获取当前模型下指标维度信息"
onChange={(val) => {
console.log(val, 211111111);
setDimensionList(undefined);
setMetricList(undefined);
const modelItem = modelList.find((item) => item.id === val);
setSelectedModelItem(modelItem);
}}
options={modelList.map((item) => {
return { label: item.name, value: item.id };
})}
/>
</Space>
}
dimensionList={dimensionList}
metricList={metricList}
modelItem={selectedModelItem}
viewItem={viewItem}
ref={configTableRef}
/>
</Spin>
</div>
<div style={{ display: activeKey === 'basic' ? 'block' : 'none' }}>
<FormItem
name="name"
label="数据集名称"
rules={[{ required: true, message: '请输入数据集名称！' }]}
>
<Input placeholder="数据集名称不可重复" />
</FormItem>
<FormItem
name="bizName"
label="数据集英文名称"
rules={[{ required: true, message: '请输入数据集英文名称！' }]}
>
<Input placeholder="请输入数据集英文名称" />
</FormItem>
{/* <FormItem
name="alias"
label="别名"
getValueFromEvent={(value) => {
return Array.isArray(value) ? value.join(',') : '';
}}
getValueProps={(value) => {
return {
value: isString(value) ? value.split(',') : [],
};
}}
>
<Select
mode="tags"
placeholder="输入别名后回车确认，多别名输入、复制粘贴支持英文逗号自动分隔"
tokenSeparators={[',']}
maxTagCount={9}
/>
</FormItem> */}
<FormItem name="admins" label={<FormItemTitle title={'责任人'} />}>
<SelectTMEPerson placeholder="请邀请团队成员" />
</FormItem>
<FormItem name="description" label="数据集描述">
<Input.TextArea placeholder="数据集描述" />
</FormItem>
</div>
</>
);
};
return (
// <Modal
// width={modalWidth}
// destroyOnClose
// title={'数据集信息'}
// open={true}
// maskClosable={false}
// footer={renderFooter()}
// onCancel={onCancel}
// >
<>
{/* <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
<Step title="基本信息" />
<Step title="关联信息" />
</Steps> */}
<Form
{...formLayout}
form={form}
initialValues={{
...formVals,
}}
onValuesChange={(value, values) => {}}
className={styles.form}
>
{renderContent()}
</Form>
</>
// </Modal>
);
};
export default DatasetCreateForm;

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

@@ -0,0 +1,118 @@
import { message, Form } from 'antd';
import React, { useState, useEffect } from 'react';
import { getMetricData } from '../../service';
import { useParams, useModel, Helmet } from '@umijs/max';
import { BASE_TITLE } from '@/common/constants';
import { ISemantic } from '../../data';
import { createView, updateView, getAllModelByDomainId, getDataSetDetail } from '../../service';
import DetailContainer from '@/pages/SemanticModel/components/DetailContainer';
import DetailSider from '@/pages/SemanticModel/components/DetailContainer/DetailSider';
import { ProjectOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
import DatasetCreateForm from './DatasetCreateForm';
import DetailFormWrapper from '@/pages/SemanticModel/components/DetailContainer/DetailFormWrapper';
// import { MetricSettingKey, MetricSettingWording } from './constants';
type Props = Record<string, any>;
const DataSetDetail: React.FC<Props> = () => {
const settingList = [
{
icon: <ProjectOutlined />,
key: 'basic',
text: '基本信息',
},
{
icon: <ConsoleSqlOutlined />,
key: 'relation',
text: '关联信息',
},
];
const params: any = useParams();
const detailId = params.datasetId;
const [detailData, setDetailData] = useState<ISemantic.IMetricItem>();
const domainModel = useModel('SemanticModel.domainData');
const modelModel = useModel('SemanticModel.modelData');
const { modelList } = modelModel;
const { selectDomainId } = domainModel;
const [settingKey, setSettingKey] = useState<string>();
// const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
const [activeMenu, setActiveMenu] = useState<any>(settingList[0]);
const [form] = Form.useForm();
useEffect(() => {
if (!detailId) {
return;
}
queryDetailData(detailId);
}, [detailId]);
// useEffect(() => {
// if (!selectDomainId) {
// return;
// }
// queryDomainAllModel();
// }, [selectDomainId]);
// const queryDomainAllModel = async () => {
// const { code, data, msg } = await getAllModelByDomainId(selectDomainId);
// if (code === 200) {
// setModelList(data);
// } else {
// message.error(msg);
// }
// };
const queryDetailData = async (id: number) => {
const { code, data, msg } = await getDataSetDetail(id);
if (code === 200) {
setDetailData({ ...data });
return;
}
message.error(msg);
};
return (
<>
<Helmet title={`[数据集]${detailData?.name}-${BASE_TITLE}`} />
<DetailContainer
siderNode={
<DetailSider
menuKey={'basic'}
menuList={settingList}
detailData={detailData}
onMenuKeyChange={(key: string, menu) => {
setSettingKey(key);
setActiveMenu(menu);
}}
/>
}
containerNode={
<DetailFormWrapper
currentMenu={activeMenu}
onSave={() => {
console.log(form.getFieldsValue());
}}
>
<DatasetCreateForm
form={form}
activeKey={activeMenu.key}
domainId={selectDomainId}
viewItem={detailData}
modelList={modelList}
onSubmit={() => {
// queryDataSetList();
// setCreateDataSourceModalOpen(false);
}}
onCancel={() => {
// setCreateDataSourceModalOpen(false);
}}
/>
</DetailFormWrapper>
}
/>
</>
);
};
export default DataSetDetail;

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

@@ -262,7 +262,6 @@ const ViewCreateFormModal: React.FC<ModelCreateFormModalProps> = ({
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
<Step title="基本信息" />
<Step title="关联信息" />
{/* <Step title="进阶设置" /> */}
</Steps>
<Form
{...formLayout}

10
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
View File

@@ -3,7 +3,7 @@ import { ProTable } from '@ant-design/pro-components';
import { message, Button, Space, Popconfirm, Input, Select, Tag } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import { StatusEnum, SemanticNodeType } from '../enum';
import { useModel, history } from '@umijs/max';
import { useModel } from '@umijs/max';
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS, TAG_DEFINE_TYPE } from '../constant';
import {
queryMetric,
@@ -21,6 +21,7 @@ import TableHeaderFilter from '@/components/TableHeaderFilter';
import styles from './style.less';
import { ISemantic } from '../data';
import { ColumnsConfig } from './TableColumnRender';
import { toMetricEditPage } from '@/pages/SemanticModel/utils';
type Props = {
onEmptyMetricData?: () => void;
@@ -32,7 +33,7 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
const metricModel = useModel('SemanticModel.metricData');
const { selectDomainId } = domainModel;
const { selectModelId: modelId } = modelModel;
const { MrefreshMetricList, selectMetric, setSelectMetric } = metricModel;
const { MrefreshMetricList, setSelectMetric } = metricModel;
const [batchSensitiveLevelOpenState, setBatchSensitiveLevelOpenState] = useState<boolean>(false);
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
@@ -243,9 +244,8 @@ const ClassMetricTable: React.FC<Props> = ({ onEmptyMetricData }) => {
type="link"
key="metricEditBtn"
onClick={() => {
history.push(`/model/metric/${record.domainId}/${record.modelId}/${record.id}`);
// setMetricItem(record);
// setCreateModalVisible(true);
const { domainId, modelId, id } = record;
toMetricEditPage(domainId, modelId, id);
}}
>
编辑

55
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/DetailFormWrapper.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { Button } from 'antd';
import React, { useState, useEffect } from 'react';
import { MenuItem } from './type';
import styles from './style.less';
type Props = {
detailData?: any;
currentMenu: MenuItem;
onSave?: (data?: any) => void;
} & { children: React.ReactNode };
const DetailFormWrapper: React.FC<Props> = ({ children, currentMenu, onSave }) => {
const [settingKey, setSettingKey] = useState<string>(currentMenu?.key);
useEffect(() => {
if (currentMenu) {
setSettingKey(currentMenu.key);
}
}, [currentMenu]);
return (
<div className={styles.infoCard}>
<div className={styles.infoCardTitle}>
<span style={{ flex: 'auto' }}>{currentMenu?.text}</span>
<span style={{ flex: 'none' }}>
<Button
type="primary"
onClick={() => {
onSave?.();
}}
>
保 存
</Button>
{/* <Button
size="middle"
type="link"
key="backListBtn"
onClick={() => {
history.back();
}}
>
<Space>
<ArrowLeftOutlined />
返回列表页
</Space>
</Button> */}
</span>
</div>
<div className={styles.infoCardContainer}>{children}</div>
</div>
);
};
export default DetailFormWrapper;

84
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoEditSider.tsx → webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/DetailSider.tsx
View File

@@ -1,60 +1,47 @@
import { Tag, Space, Tooltip } from 'antd';
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import dayjs from 'dayjs';
import { MetricSettingKey, MetricSettingWording } from './constants';
import { basePath } from '../../../../config/defaultSettings';
import {
ExportOutlined,
SolutionOutlined,
PartitionOutlined,
ProjectOutlined,
ConsoleSqlOutlined,
SettingOutlined,
} from '@ant-design/icons';
import styles from './style.less';
import { ISemantic } from '../data';
import IndicatorStar from '../components/IndicatorStar';
import IndicatorStar from '../IndicatorStar';
import { toDomainList, toModelList } from '@/pages/SemanticModel/utils';
import { MenuItem } from './type';
type Props = {
metircData: ISemantic.IMetricItem;
onSettingKeyChange?: (key: MetricSettingKey) => void;
detailData: any;
menuKey: string;
menuList: MenuItem[];
onMenuKeyChange?: (key: string, item: MenuItem) => void;
};
const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }) => {
const [settingKey, setSettingKey] = useState<MetricSettingKey>(MetricSettingKey.BASIC);
const DetailSider: React.FC<Props> = ({ detailData, menuList, menuKey, onMenuKeyChange }) => {
const [settingKey, setSettingKey] = useState<string>(menuKey);
const settingList = [
{
icon: <ProjectOutlined />,
key: MetricSettingKey.BASIC,
text: MetricSettingWording[MetricSettingKey.BASIC],
},
{
icon: <ConsoleSqlOutlined />,
key: MetricSettingKey.SQL_CONFIG,
text: MetricSettingWording[MetricSettingKey.SQL_CONFIG],
},
// {
// icon: <DashboardOutlined />,
// key: MetricSettingKey.DIMENSION_CONFIG,
// text: MetricSettingWording[MetricSettingKey.DIMENSION_CONFIG],
// },
];
useEffect(() => {
if (menuKey) {
setSettingKey(menuKey);
}
}, [menuKey]);
return (
<div className={styles.metricInfoSider}>
<div className={styles.DetailInfoSider}>
<div className={styles.sectionContainer}>
{metircData?.id ? (
{detailData?.id ? (
<div className={styles.title}>
<div className={styles.name}>
<Space>
<IndicatorStar indicatorId={metircData?.id} initState={metircData?.isCollect} />
{metircData?.name}
{metircData?.hasAdminRes && (
<IndicatorStar indicatorId={detailData?.id} initState={detailData?.isCollect} />
{detailData?.name}
{detailData?.hasAdminRes && (
<span
className={styles.gotoMetricListIcon}
onClick={() => {
window.open(`${basePath}model/${metircData.domainId}/${metircData.modelId}/`);
toModelList(detailData.domainId, detailData.modelId);
}}
>
<Tooltip title="前往所属模型指标列表">
@@ -64,7 +51,7 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
)}
</Space>
</div>
{metircData?.bizName && <div className={styles.bizName}>{metircData.bizName}</div>}
{detailData?.bizName && <div className={styles.bizName}>{detailData.bizName}</div>}
</div>
) : (
<div className={styles.createTitle}>
@@ -78,13 +65,13 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
<hr className={styles.hr} />
<div className={styles.section} style={{ padding: '16px 0' }}>
<ul className={styles.settingList}>
{settingList.map((item) => {
{menuList.map((item) => {
return (
<li
className={item.key === settingKey ? styles.active : ''}
key={item.key}
onClick={() => {
onSettingKeyChange?.(item.key);
onMenuKeyChange?.(item.key, item);
setSettingKey(item.key);
}}
>
@@ -97,8 +84,7 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
})}
</ul>
</div>
{/* <hr className={styles.hr} /> */}
{metircData?.id && (
{detailData?.id && (
<div className={styles.section} style={{ marginTop: 'auto' }}>
<div className={styles.sectionTitleBox}>
<span className={styles.sectionTitle}>
@@ -113,13 +99,13 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
<span className={styles.itemValue}>
<Space>
<Tag icon={<PartitionOutlined />} color="#3b5999">
{metircData?.modelName || '模型名为空'}
{detailData?.modelName || '模型名为空'}
</Tag>
{metircData?.hasAdminRes && (
{detailData?.hasAdminRes && (
<span
className={styles.gotoMetricListIcon}
onClick={() => {
window.open(`${basePath}model/${metircData.domainId}/0/overview`);
toDomainList(detailData.domainId, 'overview');
}}
>
<Tooltip title="前往模型设置页">
@@ -132,31 +118,29 @@ const MetricInfoEditSider: React.FC<Props> = ({ metircData, onSettingKeyChange }
</div>
<div className={styles.item}>
<span className={styles.itemLable}>创建人: </span>
<span className={styles.itemValue}>{metircData?.createdBy}</span>
<span className={styles.itemValue}>{detailData?.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')
{detailData?.createdAt
? dayjs(detailData?.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')
{detailData?.createdAt
? dayjs(detailData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')
: ''}
</span>
</div>
</div>
)}
{/* <hr className={styles.hr} /> */}
</div>
</div>
);
};
export default MetricInfoEditSider;
export default DetailSider;

22
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/index.tsx Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react';
import styles from './style.less';
type Props = {
siderNode: React.ReactNode;
containerNode: React.ReactNode;
};
const DetailContainer: React.FC<Props> = ({ siderNode, containerNode }) => {
return (
<>
<div className={styles.DetailWrapper}>
<div className={styles.Detail}>
<div className={styles.siderContainer}>{siderNode}</div>
<div className={styles.tabContainer}>{containerNode}</div>
</div>
</div>
</>
);
};
export default DetailContainer;

334
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/style.less Normal file
View File

@@ -0,0 +1,334 @@
.DetailWrapper {
.Detail {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
padding: 0px;
background-color: transparent;
height: 100%;
.tabContainer {
padding: 12px;
min-height: calc(100vh - 78px);
width: calc(100vw - 350px);
background-color: #fafafb;
}
.siderContainer {
width: 350px;
min-height: calc(100vh - 78px);
border-radius: 6px;
padding: 12px 0 12px 12px;
}
}
}
.DetailInfoSider {
padding: 20px;
color: #344767;
background-color: #fff;
height: 100%;
border: 1px solid #e6ebf1;
border-radius: 6px;
.createTitle {
margin-bottom: 10px;
color:#344767;
font-weight: 500;
font-size: 16px;
font-family: var(--tencent-font-family);
}
.gotoMetricListIcon {
color: #3182ce;
cursor: pointer;
&:hover {
color: #5493ff;
}
}
.title {
margin-bottom: 20px;
.name {
font-weight: 600;
font-size: 18px;
}
.bizName {
margin: 5px 0 0 25px;
color: #7b809a;
font-weight: 400;
}
}
.desc {
display: block;
margin-top: 8px;
color: #7b809a;
font-weight: 500;
font-size: 14px;
line-height: 1.9;
}
.subTitle {
margin: 0px;
color: rgb(123, 128, 154);
font-weight: 700;
font-size: 14px;
line-height: 1.25;
letter-spacing: 0.03333em;
text-transform: uppercase;
text-decoration: none;
vertical-align: unset;
opacity: 1;
}
.sectionContainer {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: scroll;
overflow: hidden;
background-image: none;
border-radius: 6px;
.section {
padding: 16px;
color: rgb(52, 71, 103);
line-height: 1.25;
background: transparent;
box-shadow: none;
opacity: 1;
.sectionTitleBox {
padding: 8px 0;
color: rgb(52, 71, 103);
background: transparent;
box-shadow: none;
opacity: 1;
.sectionTitle {
margin: 0px;
color: rgb(52, 71, 103);
font-weight: 600;
font-size: 16px;
line-height: 1.625;
letter-spacing: 0.0075em;
text-transform: capitalize;
text-decoration: none;
vertical-align: unset;
opacity: 1;
}
}
.item {
display: flex;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
color: rgb(52, 71, 103);
background: transparent;
box-shadow: none;
opacity: 1;
.itemLable {
min-width: fit-content;
margin: 0px;
margin-right: 10px;
color: #344767;
font-weight: 700;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.02857em;
text-transform: capitalize;
text-decoration: none;
vertical-align: unset;
opacity: 1;
}
.itemValue {
margin: 0px;
color: #7b809a;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.02857em;
text-transform: none;
text-decoration: none;
vertical-align: unset;
opacity: 1;
}
}
}
.hr {
flex-shrink: 0;
margin: 0px;
border-color: rgb(242, 244, 247);
// border-width: 0px 0px thin;
border-style: solid;
}
.ctrlBox {
.ctrlList {
position: relative;
margin: 0px;
padding: 8px 0px;
list-style: none;
background-color: rgb(249, 250, 251);
li {
position: relative;
display: flex;
flex-grow: 1;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
min-width: 0px;
margin: 4px;
padding: 4px 16px;
color: inherit;
text-align: left;
text-decoration: none;
vertical-align: middle;
background-color: transparent;
border: 0px;
border-radius: 0px;
outline: 0px;
cursor: pointer;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
appearance: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-box-flex: 1;
-webkit-box-pack: start;
-webkit-box-align: center;
&:hover {
color: #3182ce;
text-decoration: none;
background-color: rgba(16, 24, 40, 0.04);
}
}
.ctrlItemIcon {
flex-shrink: 0;
min-width: unset;
margin-right: 5px;
font-size: 14px;
}
.styles.ctrlItemLable {
display: block;
margin: 0px;
font-weight: 400;
font-size: 14px;
line-height: 1.6;
}
}
}
}
}
.settingList {
list-style: none;
margin: 0px;
position: relative;
padding: 0px;
li {
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0px;
border: 0px;
margin: 0px;
border-radius: 0px;
cursor: pointer;
user-select: none;
vertical-align: middle;
appearance: none;
display: flex;
flex-grow: 1;
justify-content: flex-start;
align-items: center;
position: relative;
text-decoration: none;
min-width: 0px;
box-sizing: border-box;
text-align: left;
padding: 8px 16px;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
&.active {
background-color: rgba(22, 119, 255, 0.08);
.icon {
color: rgb(22, 119, 255);
}
.content {
.text {
color: rgb(22, 119, 255);
}
}
}
.icon {
min-width: 32px;
color: #344767;
flex-shrink: 0;
display: inline-flex;
}
.content {
flex: 1 1 auto;
min-width: 0px;
margin-top: 4px;
margin-bottom: 4px;
.text {
margin: 0px;
color: #344767;
font-size: 16px;
// line-height: 1.57;
// font-family: var(--tencent-font-family);
font-weight: 600;
display: block;
}
}
&:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.04);
}
}
}
.infoCard {
min-height: 100%;
background-color: rgb(255, 255, 255);
color: rgb(38, 38, 38);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
position: relative;
border: 1px solid rgb(230, 235, 241);
border-radius: 4px;
box-shadow: inherit;
.infoCardTitle {
display: flex;
border-bottom: 1px solid #e6ebf1;
padding: 15px 20px;
align-items: center;
color: rgb(38, 38, 38);
margin: 0px;
font-size: 16px;
font-weight: 600;
line-height: 1.57;
font-family: "tencentFont", sans-serif;
}
.infoCardContainer {
padding: 20px;
height: calc(100vh - 260px);
overflow: scroll;
}
.infoCardFooter {
border-top: 1px solid #e6ebf1;
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
padding: 20px;
.infoCardFooterContainer {
box-sizing: border-box;
display: flex;
flex-flow: wrap;
// width: 100%;
justify-content: space-between;
align-items: center;
}
}
}

5
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/type.ts Normal file
View File

@@ -0,0 +1,5 @@
export type MenuItem = {
icon: React.ReactNode;
key: string;
text: string;
};

5
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
View File

@@ -11,6 +11,7 @@ import TableHeaderFilter from '@/components/TableHeaderFilter';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
import { toModelList } from '@/pages/SemanticModel/utils';
type Props = {
disabledEdit?: boolean;
@@ -105,9 +106,7 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
<a
onClick={() => {
setSelectModel(record);
history.push(`/model/domain/manager/${domainId}/${id}`);
// onModelChange?.(record);
toModelList(domainId, id);
}}
>
{_}

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

@@ -136,7 +136,7 @@ export const ColumnsConfig = (params?: ColumnsConfigParams) => {
render: (_, record: ISemantic.IMetricItem) => {
const { name, alias, bizName, classifications, id, isCollect, domainId, modelId } = record;
let url = `/metric/detail/`;
let url = `/metric/detail/${id}`;
let starType: StarType = 'metric';
if (params?.indicatorInfo) {
url = replaceRouteParams(params.indicatorInfo.url || '', {

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

@@ -419,7 +419,7 @@
.infoCardTitle {
display: flex;
border-bottom: 1px solid #e6ebf1;
padding: 20px 20px 20px 40px;
padding: 15px 20px;
align-items: center;
color: rgb(38, 38, 38);
margin: 0px;

4
webapp/packages/supersonic-fe/src/pages/SemanticModel/models/domainData.ts
View File

@@ -2,7 +2,9 @@ import { ISemantic } from '../data';
import { useState } from 'react';
export default function Domain() {
const [selectDomain, setSelectDomain] = useState<ISemantic.IDomainItem>();
const [selectDomain, setSelectDomain] = useState<ISemantic.IDomainItem>(
{} as ISemantic.IDomainItem,
);
const [domainList, setDomainList] = useState<ISemantic.IDomainItem[]>([]);
return {

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

@@ -628,6 +628,12 @@ export function getDataSetList(domainId: number): Promise<any> {
});
}
export function getDataSetDetail(id: number): Promise<any> {
return request(`${process.env.API_BASE_URL}dataSet/${id}`, {
method: 'GET',
});
}
export function createView(data: any): Promise<any> {
return request(`${process.env.API_BASE_URL}dataSet`, {
method: 'POST',

18
webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx
View File

@@ -8,6 +8,8 @@ import { ConfigParametersItem } from '../System/types';
import { TransType } from './enum';
import { isString, isBoolean } from 'lodash';
import { ReactNode } from 'react';
import { history } from '@umijs/max';
import { openNewPage } from '@/utils/utils';
const FormItem = Form.Item;
const { TextArea } = Input;
@@ -242,3 +244,19 @@ export const genneratorFormItemList = (itemList: ConfigParametersItem[]) => {
export const wrapperTransTypeAndId = (exTransType: TransType, id: number) => {
return `${exTransType}-${id}`;
};
export const toDomainList = (domainId: number, menuKey: string) => {
history.push(`/model/domain/${domainId}/${menuKey}`);
};
export const toModelList = (domainId: number, modelId: number, menuKey?: string) => {
history.push(`/model/domain/manager/${domainId}/${modelId}${menuKey ? `/${menuKey}` : ''}`);
};
export const toMetricEditPage = (domainId: number, modelId: number, metircId: number) => {
history.push(`/model/metric/${domainId}/${modelId}/${metircId}`);
};
export const toDatasetEditPage = (domainId: number, datasetId: number) => {
history.push(`/model/dataset/${domainId}/${datasetId}`);
};

6
webapp/packages/supersonic-fe/src/utils/utils.ts
View File

@@ -509,3 +509,9 @@ export const replaceRouteParams = (template: string, values: Record<string, stri
return values[key] !== undefined ? values[key] : match;
});
};
export function openNewPage(url: string) {
const newWindow: any = window.open();
newWindow.opener = null;
newWindow.location.href = url;
}