From b4669cf110e2a89ada7150751776e8f152ae2be0 Mon Sep 17 00:00:00 2001 From: tristanliu Date: Thu, 28 Nov 2024 20:29:12 +0800 Subject: [PATCH] [improvement][headless-fe] code stash --- .../packages/supersonic-fe/config/routes.ts | 98 +---- webapp/packages/supersonic-fe/src/app.tsx | 13 +- .../supersonic-fe/src/common/constants.ts | 2 + .../src/pages/SemanticModel/DomainManager.tsx | 9 +- .../Insights/components/TagInfoCreateForm.tsx | 1 - .../src/pages/SemanticModel/Metric/Detail.tsx | 24 +- .../src/pages/SemanticModel/Metric/Edit.tsx | 54 +-- .../src/pages/SemanticModel/Metric/Edit2.tsx | 57 --- .../src/pages/SemanticModel/Metric/Market.tsx | 2 - .../SemanticModel/Metric/MetricInfoSider.tsx | 9 - .../Metric/components/MetricFilter.tsx | 2 +- .../components/MetricInfoCreateForm.tsx | 16 +- .../src/pages/SemanticModel/Metric/index.tsx | 2 +- .../src/pages/SemanticModel/Metric/style.less | 326 +---------------- .../src/pages/SemanticModel/ModelManager.tsx | 9 +- .../pages/SemanticModel/OverviewContainer.tsx | 56 +-- .../pages/SemanticModel/PageBreadcrumb.tsx | 6 +- .../View/components/DataSetTable.tsx | 8 +- .../View/components/DatasetCreateForm.tsx | 289 +++++++++++++++ .../SemanticModel/View/components/Detail.tsx | 118 +++++++ .../View/components/ViewCreateFormModal.tsx | 1 - .../components/ClassMetricTable.tsx | 10 +- .../DetailContainer/DetailFormWrapper.tsx | 55 +++ .../DetailContainer/DetailSider.tsx} | 84 ++--- .../components/DetailContainer/index.tsx | 22 ++ .../components/DetailContainer/style.less | 334 ++++++++++++++++++ .../components/DetailContainer/type.ts | 5 + .../SemanticModel/components/ModelTable.tsx | 5 +- .../components/TableColumnRender.tsx | 2 +- .../pages/SemanticModel/components/style.less | 2 +- .../pages/SemanticModel/models/domainData.ts | 4 +- .../src/pages/SemanticModel/service.ts | 6 + .../src/pages/SemanticModel/utils.tsx | 18 + .../packages/supersonic-fe/src/utils/utils.ts | 6 + 34 files changed, 991 insertions(+), 664 deletions(-) delete mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit2.tsx create mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx create mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/Detail.tsx create mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/DetailFormWrapper.tsx rename webapp/packages/supersonic-fe/src/pages/SemanticModel/{Metric/MetricInfoEditSider.tsx => components/DetailContainer/DetailSider.tsx} (60%) create mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/index.tsx create mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/style.less create mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DetailContainer/type.ts diff --git a/webapp/packages/supersonic-fe/config/routes.ts b/webapp/packages/supersonic-fe/config/routes.ts index 04a8413d8..8f91deed4 100644 --- a/webapp/packages/supersonic-fe/config/routes.ts +++ b/webapp/packages/supersonic-fe/config/routes.ts @@ -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', diff --git a/webapp/packages/supersonic-fe/src/app.tsx b/webapp/packages/supersonic-fe/src/app.tsx index 107a7ea68..bcc5d7a69 100644 --- a/webapp/packages/supersonic-fe/src/app.tsx +++ b/webapp/packages/supersonic-fe/src/app.tsx @@ -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) => { diff --git a/webapp/packages/supersonic-fe/src/common/constants.ts b/webapp/packages/supersonic-fe/src/common/constants.ts index 0b4f2a520..c3beadcb3 100644 --- a/webapp/packages/supersonic-fe/src/common/constants.ts +++ b/webapp/packages/supersonic-fe/src/common/constants.ts @@ -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'; diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/DomainManager.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/DomainManager.tsx index d278a710b..677b3b561 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/DomainManager.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/DomainManager.tsx @@ -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 = ({}) => { const [activeKey, setActiveKey] = useState(menuKey); - const pushUrlMenu = (domainId: number, menuKey: string) => { - history.push(`/model/domain/${domainId}/${menuKey}`); - }; - return ( { setActiveKey(menuKey); - pushUrlMenu(selectDomainId, menuKey); + toDomainList(selectDomainId, menuKey); }} /> ); diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoCreateForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoCreateForm.tsx index 89a02cd43..8601f28e5 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoCreateForm.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/components/TagInfoCreateForm.tsx @@ -540,7 +540,6 @@ const TagInfoCreateForm: React.FC = ({ forceRender width={800} style={{ top: 48 }} - // styles={{ padding: '32px 40px 48px' }} destroyOnClose title={`${isEdit ? '编辑' : '新建'}标签`} maskClosable={false} diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx index f3b7a8137..1d76f26a9 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx @@ -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 = () => { { key: 'metricCaliberInput', label: '基础信息', - children: , + children: , }, { key: 'metricTrend', @@ -103,8 +104,18 @@ const MetricDetail: React.FC = () => { return ( <> +
+
+ { + setMetricRelationModalOpenState(true); + }} + /> +
= () => { className={styles.metricDetailTab} />
-
- { - setMetricRelationModalOpenState(true); - }} - /> -
; @@ -15,7 +17,7 @@ const MetricDetail: React.FC = () => { const metricId = params.metricId; const [metircData, setMetircData] = useState(); const metricModel = useModel('SemanticModel.metricData'); - const { selectMetric, setSelectMetric } = metricModel; + const { setSelectMetric } = metricModel; const [settingKey, setSettingKey] = useState(MetricSettingKey.BASIC); useEffect(() => { @@ -41,23 +43,35 @@ const MetricDetail: React.FC = () => { message.error(msg); }; + const settingList = [ + { + icon: , + key: MetricSettingKey.BASIC, + text: MetricSettingWording[MetricSettingKey.BASIC], + }, + { + icon: , + key: MetricSettingKey.SQL_CONFIG, + text: MetricSettingWording[MetricSettingKey.SQL_CONFIG], + }, + ]; + return ( <> -
-
-
- { - setSettingKey(key); - }} - metircData={metircData} - /> -
-
- -
-
-
+ + { + setSettingKey(key); + }} + /> + } + containerNode={} + /> ); }; diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit2.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit2.tsx deleted file mode 100644 index f81b3bba7..000000000 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Edit2.tsx +++ /dev/null @@ -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; - -const MetricDetail: React.FC = () => { - const params: any = useParams(); - const metricId = params.metricId; - const [metircData, setMetircData] = useState(); - - const [settingKey, setSettingKey] = useState(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 ( - <> -
-
- {/*
- { - setSettingKey(key); - }} - metircData={metircData} - /> -
*/} -
- -
-
-
- - ); -}; - -export default MetricDetail; diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx index 606c3ec09..11700f26f 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx @@ -152,8 +152,6 @@ const ClassMetricTable: React.FC = ({}) => { }; const handleMetricEdit = (metricItem: ISemantic.IMetricItem) => { - // setMetricItem(metricItem); - // setCreateModalVisible(true); history.push(`/model/metric/edit/${metricItem.id}`); }; diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx index 9ce982bef..3f9d92d38 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx @@ -59,15 +59,6 @@ const MetricInfoSider: React.FC = ({
- {/*
- - - - 基本信息 - - -
*/} -
敏感度: diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx index 26385eda9..075c3c1d8 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx @@ -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'; diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx index 217b25e05..075ccd2fe 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricInfoCreateForm.tsx @@ -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 = ({ 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 = ({ {MetricSettingWording[settingKey]} - + {/* + */}
@@ -870,13 +871,6 @@ const MetricInfoCreateForm: React.FC = ({ {renderContent()}
-
-
- -
-
{ return ( diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less index 7d9f57bb4..f1f9006d0 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less @@ -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); - } - } -} - diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx index 1cf463814..fd91435e5 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/ModelManager.tsx @@ -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 = ({}) => { 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 = ({}) => { MrefreshMetricList({ modelId: selectModelId }); }, [selectModelId]); - const pushUrlMenu = (domainId: number, modelId: number, menuKey: string) => { - history.push(`/model/domain/manager/${domainId}/${modelId}/${menuKey}`); - }; - return ( { setActiveKey(menuKey); - pushUrlMenu(selectDomainId, selectModelId, menuKey); + toModelList(selectDomainId, selectModelId, menuKey); }} /> ); diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx index e99c011ef..472c1f5e7 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx @@ -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 = ({}) => { 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 = ({}) => { 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 = ({}) => { [id]: {}, }); }} - // onTreeDataUpdate={() => { - // // initProjectTree(); - // }} />
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx index 8c3efdc37..828455c86 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/PageBreadcrumb.tsx @@ -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 = () => { { setSelectModel(undefined); - history.push(`/model/domain/${selectDomainId}/overview`); + toDomainList(selectDomainId, 'overview'); }} > @@ -41,7 +41,7 @@ const PageBreadcrumb: React.FC = () => { { setSelectMetric(undefined); - history.push(`/model/domain/manager/${selectDomainId}/${selectModelId}/`); + toModelList(selectDomainId, selectModelId); }} > diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx index d75534090..7f39127f4 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DataSetTable.tsx @@ -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 = ({ disabledEdit = false }) => { return ( { - setEditFormStep(1); - setViewItem(record); - setCreateDataSourceModalOpen(true); + toDatasetEditPage(record.domainId, record.id); + // setEditFormStep(1); + // setViewItem(record); + // setCreateDataSourceModalOpen(true); }} > {name} diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx new file mode 100644 index 000000000..5e15035f7 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/DatasetCreateForm.tsx @@ -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 = ({ + form, + activeKey, + viewItem, + domainId, + onCancel, + onSubmit, + modelList, +}) => { + const stepWidth: Record = { + '0': 800, + '1': 1200, + '2': 800, + }; + // const [currentStep, setCurrentStep] = useState(); + + const [formVals, setFormVals] = useState({ + ...viewItem, + currentModel: modelList[0]?.id, + }); + + const [queryType, setQueryType] = useState('METRIC'); + + const [saveLoading, setSaveLoading] = useState(false); + const [dimensionLoading, setDimensionLoading] = useState(false); + // const [modalWidth, setModalWidth] = useState(stepWidth[`${currentStep}`]); + const [selectedModelItem, setSelectedModelItem] = useState( + modelList[0], + ); + // const [form] = Form.useForm(); + const configTableRef = useRef(); + + useEffect(() => { + form.setFieldsValue({ + ...viewItem, + }); + // setQueryType(viewItem?.queryType); + }, [viewItem]); + + const [dimensionList, setDimensionList] = useState(); + const [metricList, setMetricList] = useState(); + // const [tagList, setTagList] = useState(); + + 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 ( + // <> + // + // + // + // ); + // } + // return ( + // <> + // + // + // + // + // ); + // }; + + const renderContent = () => { + return ( + <> +
+ + + 切换模型: + + + + + + {/* { + return Array.isArray(value) ? value.join(',') : ''; + }} + getValueProps={(value) => { + return { + value: isString(value) ? value.split(',') : [], + }; + }} + > +