[improvement][semantic-fe] Restructured the code to extract the question-answer settings and model management model controls into the OverviewContainer component.

2025-12-20 06:34:55 +00:00 · 2023-08-15 10:40:58 +08:00
parent b1952d64ab
commit c3d3b1146b
48 changed files with 1104 additions and 863 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx
@@ -10,14 +10,12 @@ import { createDatasource, updateDatasource, getColumns } from '../../service';
 import type { Dispatch } from 'umi';
 import type { StateType } from '../../model';
 import { connect } from 'umi';
-import { isUndefined } from 'lodash';

 export type CreateFormProps = {
  domainManger: StateType;
  dispatch: Dispatch;
  createModalVisible: boolean;
  sql?: string;
-  domainId: number;
  dataSourceItem: DataInstanceItem | any;
  onCancel?: () => void;
  onSubmit?: (dataSourceInfo: any) => void;
@@ -37,7 +35,6 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
  domainManger,
  onCancel,
  createModalVisible,
-  domainId,
  scriptColumns,
  sql = '',
  onSubmit,
@@ -51,7 +48,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
  const [hasEmptyNameField, setHasEmptyNameField] = useState<boolean>(false);
  const formValRef = useRef(initFormVal as any);
  const [form] = Form.useForm();
-  const { dataBaseConfig } = domainManger;
+  const { dataBaseConfig, selectModelId: modelId } = domainManger;
  const updateFormVal = (val: any) => {
    formValRef.current = val;
  };
@@ -163,7 +160,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
        databaseId: dataSourceItem?.databaseId || dataBaseConfig.id,
        queryType: basicInfoFormMode === 'fast' ? 'table_query' : 'sql_query',
        tableQuery: dbName && tableName ? `${dbName}.${tableName}` : '',
-        domainId,
+        modelId,
      };
      const queryDatasource = isEdit ? updateDatasource : createDatasource;
      const { code, msg, data } = await queryDatasource(queryParams);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx
@@ -18,7 +18,6 @@ import FullScreen from '@/components/FullScreen';
 import SqlEditor from '@/components/SqlEditor';
 import type { TaskResultItem, DataInstanceItem, TaskResultColumn } from '../data';
 import { excuteSql } from '@/pages/SemanticModel/service';
-// import { getDatabaseByDomainId } from '../../service';
 import DataSourceCreateForm from './DataSourceCreateForm';
 import type { Dispatch } from 'umi';
 import type { StateType } from '../../model';
@@ -33,7 +32,6 @@ type IProps = {
  domainManger: StateType;
  dispatch: Dispatch;
  dataSourceItem: DataInstanceItem;
-  domainId: number;
  onUpdateSql?: (sql: string) => void;
  sql?: string;
  onSubmitSuccess?: (dataSourceInfo: any) => void;
@@ -59,12 +57,11 @@ const SqlDetail: React.FC<IProps> = ({
  domainManger,
  dataSourceItem,
  onSubmitSuccess,
-  domainId,
  sql = '',
  onUpdateSql,
  onJdbcSourceChange,
 }) => {
-  const { dataBaseConfig } = domainManger;
+  const { dataBaseConfig, selectModelId: modelId } = domainManger;
  const [resultTable, setResultTable] = useState<ResultTableItem[]>([]);
  const [resultTableLoading, setResultTableLoading] = useState(false);
  const [resultCols, setResultCols] = useState<ResultColItem[]>([]);
@@ -82,8 +79,6 @@ const SqlDetail: React.FC<IProps> = ({
    y: 200,
  });

-  // const [dataSourceResult, setDataSourceResult] = useState<any>({});
-
  const [runState, setRunState] = useState<boolean | undefined>();

  const [taskLog, setTaskLog] = useState('');
@@ -93,7 +88,6 @@ const SqlDetail: React.FC<IProps> = ({
  const [isSqlIdeFullScreen, setIsSqlIdeFullScreen] = useState<boolean>(false);
  const [isSqlResFullScreen, setIsSqlResFullScreen] = useState<boolean>(false);

-  // const [sqlParams, setSqlParams] = useState<SqlParamsItem[]>([]);
  const resultInnerWrap = useRef<HTMLDivElement>();

  const [editorSize, setEditorSize] = useState<number>(0);
@@ -104,18 +98,6 @@ const SqlDetail: React.FC<IProps> = ({
  const [isRight, setIsRight] = useState(false);

  const [scriptColumns, setScriptColumns] = useState<any[]>([]);
-  // const [jdbcSourceName, setJdbcSourceName] = useState<string>(() => {
-  //   const sourceId = dataSourceItem.databaseId;
-  //   if (sourceId) {
-  //     const target: any = jdbcSourceItems.filter((item: any) => {
-  //       return item.key === Number(sourceId);
-  //     })[0];
-  //     if (target) {
-  //       return target.label;
-  //     }
-  //   }
-  //   return 'ClickHouse';
-  // });

  useEffect(() => {
    setJdbcSourceItems([
@@ -127,21 +109,6 @@ const SqlDetail: React.FC<IProps> = ({
    onJdbcSourceChange?.(dataBaseConfig?.id && Number(dataBaseConfig?.id));
  }, [dataBaseConfig]);

-  // const queryDatabaseConfig = async () => {
-  //   const { code, data } = await getDatabaseByDomainId(domainId);
-  //   if (code === 200) {
-  //     setJdbcSourceItems([
-  //       {
-  //         label: data?.name,
-  //         key: data?.id,
-  //       },
-  //     ]);
-  //     onJdbcSourceChange?.(data?.id && Number(data?.id));
-  //     return;
-  //   }
-  //   message.error('数据库配置获取错误');
-  // };
-
  function creatCalcItem(key: string, data: string) {
    const line = document.createElement('div'); // 需要每条数据一行，这样避免数据换行的时候获得的宽度不准确
    const child = document.createElement('span');
@@ -245,7 +212,7 @@ const SqlDetail: React.FC<IProps> = ({
    setResultTableLoading(true);
    const { code, data, msg } = await excuteSql({
      sql: value,
-      domainId,
+      modelId,
    });
    setResultTableLoading(false);
    if (code === 200) {
@@ -521,7 +488,6 @@ const SqlDetail: React.FC<IProps> = ({
      {dataSourceModalVisible && (
        <DataSourceCreateForm
          sql={sql}
-          domainId={domainId}
          dataSourceItem={dataSourceItem}
          scriptColumns={scriptColumns}
          onCancel={() => {
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlSide.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlSide.tsx
@@ -22,14 +22,13 @@ type TableRef = {

 type Props = {
  initialValues: any;
-  domainId: number;
  onSubmitSuccess?: (dataSourceInfo: any) => void;
 };

 const { TabPane } = Tabs;
 const LIST_KEY = 'list';

-const SqlSide: React.FC<Props> = ({ initialValues, domainId, onSubmitSuccess }) => {
+const SqlSide: React.FC<Props> = ({ initialValues, onSubmitSuccess }) => {
  const defaultPanes: Panes[] = [
    {
      key: '数据源查询',
@@ -98,8 +97,6 @@ const SqlSide: React.FC<Props> = ({ initialValues, domainId, onSubmitSuccess })
                <SqlDetail
                  onSubmitSuccess={onSubmitSuccess}
                  dataSourceItem={dataSourceItem}
-                  oprType={pane.type}
-                  domainId={domainId}
                  onUpdateSql={(sql: string) => {
                    updateTabSql(sql, pane.key);
                  }}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/index.tsx
@@ -7,13 +7,12 @@ import { RightOutlined, LeftOutlined } from '@ant-design/icons';

 type Props = {
  initialValues: any;
-  domainId: number;
  onSubmitSuccess?: (dataSourceInfo: any) => void;
 };

 const DEFAULT_RIGHT_SIZE = '300px';

-const DataExploreView: React.FC<Props> = ({ initialValues, domainId, onSubmitSuccess }) => {
+const DataExploreView: React.FC<Props> = ({ initialValues, onSubmitSuccess }) => {
  const [collapsed, setCollapsed] = useState(false);

  useEffect(() => {
@@ -51,11 +50,7 @@ const DataExploreView: React.FC<Props> = ({ initialValues, domainId, onSubmitSuc
                {collapsed ? <LeftOutlined /> : <RightOutlined />}
              </div>
            )}
-            <SqlSide
-              initialValues={initialValues}
-              domainId={domainId}
-              onSubmitSuccess={onSubmitSuccess}
-            />
+            <SqlSide initialValues={initialValues} onSubmitSuccess={onSubmitSuccess} />
          </div>

          <Pane initialSize={0} />