From 218fbce5760c29d8eac092e800fe12386cd715d4 Mon Sep 17 00:00:00 2001 From: AntoineYANG Date: Mon, 19 Jun 2023 21:11:41 +0800 Subject: [PATCH 1/3] refactor(datasource): remove unused files Co-Authored-By: kyusho --- .../src/pages/dataConnection/database/api.ts | 311 ------------ .../pages/dataConnection/database/config.ts | 107 ---- .../dataConnection/database/connect-form.tsx | 150 ------ .../database/custom-dropdown.tsx | 71 --- .../dataConnection/database/customConfig.tsx | 48 -- .../database/dropdown-or-input.tsx | 43 -- .../pages/dataConnection/database/index.tsx | 47 -- .../database/query-editor/diagram-editor.tsx | 23 - .../database/query-editor/index.tsx | 88 ---- .../database/query-editor/interfaces.ts | 9 - .../database/query-editor/sql-editor.tsx | 41 -- .../dataConnection/database/query-form.tsx | 64 --- .../pages/dataConnection/database/reducer.ts | 472 ------------------ .../dataConnection/database/table-preview.tsx | 96 ---- .../src/pages/dataConnection/database/type.ts | 47 -- 15 files changed, 1617 deletions(-) delete mode 100644 packages/rath-client/src/pages/dataConnection/database/api.ts delete mode 100644 packages/rath-client/src/pages/dataConnection/database/config.ts delete mode 100644 packages/rath-client/src/pages/dataConnection/database/connect-form.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/custom-dropdown.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/customConfig.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/dropdown-or-input.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/index.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/query-editor/diagram-editor.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/query-editor/index.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/query-editor/interfaces.ts delete mode 100644 packages/rath-client/src/pages/dataConnection/database/query-editor/sql-editor.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/query-form.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/reducer.ts delete mode 100644 packages/rath-client/src/pages/dataConnection/database/table-preview.tsx delete mode 100644 packages/rath-client/src/pages/dataConnection/database/type.ts diff --git a/packages/rath-client/src/pages/dataConnection/database/api.ts b/packages/rath-client/src/pages/dataConnection/database/api.ts deleted file mode 100644 index 44be6bbf3..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/api.ts +++ /dev/null @@ -1,311 +0,0 @@ -import { notify } from '../../../components/error'; -import { getRathError } from '../../../rath-error'; -import { SupportedDatabaseType } from './type'; -import type { TableData, TableLabels } from '.'; - -const apiPathPrefix = '/api'; - -const DB_CONNECTOR_SERVICE_KEY = 'db_api'; - -export function getConnectorServiceInfo() { - return localStorage.getItem(DB_CONNECTOR_SERVICE_KEY) || 'https://gateway.kanaries.net/connector'; -} - -export function setConnectorServiceInfo(info: string) { - localStorage.setItem(DB_CONNECTOR_SERVICE_KEY, info); -} - -function getAPIPathPrefix(apiPrefix: string | undefined = '') { - const servicePrefix = getConnectorServiceInfo(); - return `${servicePrefix}${apiPrefix}`; -} - -type TableDataResult = - | { - success: true; - data: TableData; - } - | { - success: false; - message: string; - }; - -interface TestConnectionResult { - success: boolean; - // 先直接返回，未来需要放到 token 里 - data: number; -} - -type ListDatabasesResult = - | { - success: true; - data: string[]; - } - | { - success: false; - message: string; - }; - -export type TableInfo = { - name: string; - meta: { - key: string; - colIndex: number; - dataType: string | null; - }[]; -}; - -type TableList = TableInfo[]; - -type ListTableResult = - | { - success: true; - data: TableList; - } - | { - success: false; - message: string; - }; - -export const pingConnector = async (): Promise => { - try { - const res = (await fetch(`${getAPIPathPrefix()}/ping`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - }, - }).then((res) => - res.ok - ? res.json() - : (() => { - throw new Error(); - })() - )) as TestConnectionResult; - - if (!res.success) { - throw new Error('Operation failed.'); - } - - return true; - } catch (error) { - const rathError = getRathError('ConnectorError', error); - - notify(rathError); - - return false; - } -}; - -export const getSourceId = async (sourceType: SupportedDatabaseType, uri: string): Promise => { - try { - const res = (await fetch(`${getAPIPathPrefix(apiPathPrefix)}/upsert`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - sourceType, - uri, - }), - }).then((res) => - res.ok - ? res.json() - : (() => { - throw new Error(); - })() - )) as TestConnectionResult; - - if (!res.success) { - throw new Error('Operation failed.'); - } - - return res.data; - } catch (error) { - const rathError = getRathError('SourceIdError', error); - - notify(rathError); - - return null; - } -}; - -export const listDatabases = async (sourceId: number): Promise => { - try { - const res = (await fetch(`${getAPIPathPrefix(apiPathPrefix)}/database_list`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - sourceId, - }), - }).then((res) => - res.ok - ? res.json() - : (() => { - throw new Error(); - })() - )) as ListDatabasesResult; - - return res.success - ? res.data - : (() => { - throw new Error(res.message); - })(); - } catch (error) { - const rathError = getRathError('FetchDatabaseListFailed', error); - - notify(rathError); - - return null; - } -}; - -export const listSchemas = async (sourceId: number, db: string | null): Promise => { - try { - const res = (await fetch(`${getAPIPathPrefix(apiPathPrefix)}/schema_list`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - sourceId, - db, - }), - }).then((res) => - res.ok - ? res.json() - : (() => { - throw new Error(); - })() - )) as ListDatabasesResult; - - return res.success - ? res.data - : (() => { - throw new Error(res.message); - })(); - } catch (error) { - const rathError = getRathError('FetchSchemaListFailed', error); - - notify(rathError); - - return null; - } -}; - -export const listTables = async (sourceId: number, db: string | null, schema: string | null): Promise => { - try { - const res = (await fetch(`${getAPIPathPrefix(apiPathPrefix)}/table_list`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - sourceId, - db, - schema, - }), - }).then((res) => - res.ok - ? res.json() - : (() => { - throw new Error(); - })() - )) as ListTableResult; - - return res.success - ? res.data - : (() => { - throw new Error(res.message); - })(); - } catch (error) { - const rathError = getRathError('FetchTableListFailed', error); - - notify(rathError); - - return null; - } -}; - -export const fetchTablePreview = async ( - sourceId: number, - db: string | null, - schema: string | null, - table: string | null, - silent: boolean = false -): Promise | null> => { - try { - const res = (await fetch(`${getAPIPathPrefix(apiPathPrefix)}/table_detail`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - sourceId, - db, - schema, - table, - }), - }).then((res) => - res.ok - ? res.json() - : (() => { - throw new Error(); - })() - )) as TableDataResult; - - return res.success - ? res.data - : (() => { - throw new Error(res.message); - })(); - } catch (error) { - if (!silent) { - const rathError = getRathError('FetchTablePreviewFailed', error); - - notify(rathError); - } - - return null; - } -}; - -export const requestSQL = async (sourceId: number, queryString: string) => { - try { - const res = (await fetch(`${getAPIPathPrefix(apiPathPrefix)}/execute`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - sourceId, - query: queryString, - }), - }).then((res) => - res.ok - ? res.json() - : (() => { - throw new Error(); - })() - )) as TableDataResult; - - const data = res.success - ? res.data - : (() => { - throw new Error(res.message); - })(); - - if (!data) { - return null; - } - - return data; - } catch (error) { - const rathError = getRathError('QueryExecutionError', error, { sql: queryString }); - - notify(rathError); - - return null; - } -}; diff --git a/packages/rath-client/src/pages/dataConnection/database/config.ts b/packages/rath-client/src/pages/dataConnection/database/config.ts deleted file mode 100644 index 1ab0bf9f6..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/config.ts +++ /dev/null @@ -1,107 +0,0 @@ -import type { IDropdownOption } from '@fluentui/react'; -import { SupportedDatabaseType } from './type'; - -const datasetOptions = ( - [ - { - text: 'PostgreSQL', - key: 'postgres', - rule: 'postgresql://{userName}:{password}@{host}:{port}/{database}', - hasDatabase: false, - requiredSchema: true, - icon: 'postgres.svg', - }, - { - text: 'ClickHouse', - key: 'clickhouse', - rule: 'clickhouse://{userName}:{password}@{host}:{port}/{database}', - icon: 'clickhouse.svg', - }, - { - text: 'MySQL', - key: 'mysql', - icon: 'mysql.svg', - rule: 'mysql://{userName}:{password}@{host}/{database}', - }, - { - text: 'Apache Kylin', - key: 'kylin', - rule: 'kylin://{username}:{password}@{hostname}:{port}/{project}?{param1}={value1}&{param2}={value2}', - hasDatabase: false, - requiredSchema: true, - schemaEnumerable: false, - tableEnumerable: false, - icon: 'kylin.png', - }, - { - text: 'Oracle', - key: 'oracle', - rule: 'oracle://', - icon: 'oracle.svg', - hasDatabase: false, - }, - { - text: 'Apache Doris', - key: 'doris', - icon: 'doris.png', - rule: '', - }, - { - text: 'Apache Impala', - key: 'impala', - rule: 'impala://{hostname}:{port}/{database}', - icon: 'impala.png', - }, - { - text: 'Amazon Athena', - key: 'awsathena', - rule: 'awsathena+rest://{aws_access_key_id}:{aws_secret_access_key}@athena.{region_name}.amazonaws.com/{', - icon: 'athena.png', - }, - { - text: 'Amazon Redshift', - key: 'redshift', - rule: 'redshift+psycopg2://:@:5439/', - icon: 'redshift.svg', - }, - { - text: 'Amazon Spark SQL', - key: 'sparksql', - rule: 'hive://hive@{hostname}:{port}/{database}', - icon: 'sparksql.png', - }, - { - text: 'Apache Hive', - key: 'hive', - rule: 'hive://hive@{hostname}:{port}/{database}', - icon: 'hive.jpg', - }, - { - text: 'SQL Server', - key: 'sqlserver', - rule: 'mssql://', - requiredSchema: true, - icon: 'mssql.svg', - }, - ] as Array< - IDropdownOption & { - key: SupportedDatabaseType; - icon?: string; - rule: string; - /** @default true */ - hasDatabase?: boolean; - /** @default true */ - databaseEnumerable?: boolean; - /** @default false */ - requiredSchema?: boolean; - /** @default true */ - schemaEnumerable?: boolean; - /** @default true */ - hasTableList?: boolean; - /** @default true */ - tableEnumerable?: boolean; - } - > -).sort((a, b) => a.text.localeCompare(b.text)); - -export default datasetOptions; diff --git a/packages/rath-client/src/pages/dataConnection/database/connect-form.tsx b/packages/rath-client/src/pages/dataConnection/database/connect-form.tsx deleted file mode 100644 index 3a59ea3af..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/connect-form.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import type { FC } from 'react'; -import { DefaultButton, Dropdown, IDropdownOption, PrimaryButton, Stack, TextField } from '@fluentui/react'; -import intl from 'react-intl-universal'; -import datasetOptions from './config'; -import { renderDropdownItem, renderDropdownTitle } from './custom-dropdown'; -import type { DatabaseOptions, SupportedDatabaseType } from './type'; -import { StackTokens } from '.'; - -interface ConnectFormProps { - sourceType: SupportedDatabaseType; - setSourceType: (sType: SupportedDatabaseType) => void; - whichDatabase: typeof datasetOptions[0]; - sourceId: DatabaseOptions['sourceId']; - connectUri: DatabaseOptions['connectUri']; - setConnectUri: (uri: string) => void; - handleConnectionTest: () => Promise; -} - -const ConnectForm: FC = ({ - sourceType, - setSourceType, - whichDatabase, - sourceId, - connectUri, - setConnectUri, - handleConnectionTest, -}) => { - return ( - - JSX.Element} - onRenderTitle={renderDropdownTitle as (e?: IDropdownOption[]) => JSX.Element} - onChange={(_, item) => { - if (item) { - setSourceType(item.key as SupportedDatabaseType); - } - }} - /> - { - setConnectUri(uri ?? ''); - }} - onKeyPress={(e) => { - if (e.key === 'Enter') { - handleConnectionTest(); - } - }} - styles={{ - root: { - position: 'relative', - marginRight: '1em', - flexGrow: 1, - flexShrink: 1, - }, - fieldGroup: { - borderLeft: 'none', - borderRadius: '0 4px 4px 0', - }, - // 如果错误信息被插入到下方， - // static 定位时会导致布局被向上顶开. - errorMessage: { - position: 'absolute', - paddingBlock: '5px', - paddingInlineStart: '1em', - bottom: '100%', - }, - }} - /> - - - ); -}; - -interface ConnectFormReadonlyProps { - connectUri: string; - resetConnectUri: () => void; -} - -export const ConnectFormReadonly: FC = ({ connectUri, resetConnectUri }) => { - return ( - - - - - ); -}; - -export default ConnectForm; diff --git a/packages/rath-client/src/pages/dataConnection/database/custom-dropdown.tsx b/packages/rath-client/src/pages/dataConnection/database/custom-dropdown.tsx deleted file mode 100644 index b80cc1adb..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/custom-dropdown.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Icon } from '@fluentui/react'; -import datasetOptions from './config'; - -export const renderDropdownTitle: React.FC = ([item]) => { - if (!item) { - return null; - } - - const { icon, text, key } = item; - - return ( -
- - {text} -
- ); -}; - -export const renderDropdownItem: React.FC = (props) => { - if (!props) { - return null; - } - - const { icon, text, key } = props; - - return ( -
- - {text} -
- ); -}; diff --git a/packages/rath-client/src/pages/dataConnection/database/customConfig.tsx b/packages/rath-client/src/pages/dataConnection/database/customConfig.tsx deleted file mode 100644 index ac78b4a54..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/customConfig.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { TextField, Stack, PrimaryButton, DefaultButton, Spinner } from '@fluentui/react'; -import React, { useCallback, useEffect, useState } from 'react'; -import intl from 'react-intl-universal'; -import { getConnectorServiceInfo, setConnectorServiceInfo } from './api'; - -interface CustomConfigProps { - ping: () => void; - loading?: boolean; -} -const CustomConfig: React.FC = (props) => { - const { ping, loading } = props; - const [show, setShow] = useState(false); - const [serviceInfo, setServiceInfo] = useState(''); - useEffect(() => { - setServiceInfo(getConnectorServiceInfo()); - }, []); - const serviceInfoHandler = useCallback(() => { - setConnectorServiceInfo(serviceInfo); - ping(); - }, [serviceInfo, ping]); - return ( -
- { - setShow((v) => !v); - }} - iconProps={{ iconName: 'Settings' }} - /> - {loading && } - {show && ( - - { - setServiceInfo(val + ''); - }} - /> - - - )} -
- ); -}; - -export default CustomConfig; diff --git a/packages/rath-client/src/pages/dataConnection/database/dropdown-or-input.tsx b/packages/rath-client/src/pages/dataConnection/database/dropdown-or-input.tsx deleted file mode 100644 index 29ba6e158..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/dropdown-or-input.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Dropdown, IDropdownOption, TextField } from '@fluentui/react'; -import type { FC } from 'react'; -import intl from 'react-intl-universal'; -import { inputWidth } from '.'; - -interface DropdownOrInputProps { - name: string; - options: IDropdownOption[] | null; - value: string | null | undefined; - setValue: (key: string) => void; -} - -const DropdownOrInput: FC = ({ name, options, value, setValue }) => { - return options ? ( - { - if (item) { - setValue(item.key as string); - } - }} - /> - ) : ( - { - if (typeof key === 'string') { - setValue(key); - } - }} - /> - ); -}; - -export default DropdownOrInput; diff --git a/packages/rath-client/src/pages/dataConnection/database/index.tsx b/packages/rath-client/src/pages/dataConnection/database/index.tsx deleted file mode 100644 index be0c333c8..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { registerIcons } from '@fluentui/react'; -import datasetOptions from './config'; - -export const StackTokens = { - childrenGap: 20, -}; - -const iconPathPrefix = '/assets/icons/'; - -registerIcons({ - icons: Object.fromEntries( - datasetOptions.map<[string, JSX.Element]>((opt) => [ - opt.key, - opt.icon ? ( - {opt.text} - ) : ( - <> - ), - ]) - ), -}); - -export type TableLabels = { - key: string; - colIndex: number; - dataType: string | null; -}[]; - -type TableRowItem = { - [key in keyof TL]: any; -}; - -export interface TableData { - columns: TL; - rows: TableRowItem[]; -} - -export const inputWidth = '180px'; diff --git a/packages/rath-client/src/pages/dataConnection/database/query-editor/diagram-editor.tsx b/packages/rath-client/src/pages/dataConnection/database/query-editor/diagram-editor.tsx deleted file mode 100644 index 8652d86db..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/query-editor/diagram-editor.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { memo, useEffect, useState } from 'react'; -import DbGraph from '../../../../components/dbGraph'; -import type { IDBGraph } from '../../../../components/dbGraph/localTypes'; -import { toSQL } from '../../../../components/dbGraph/utils'; -import { QueryEditorProps } from './interfaces'; - -const DiagramEditor = memo(function DiagramEditor({ tableEnumerable, query, tables, setQuery, preview }) { - const [graph, setGraph] = useState({ - nodes: [], - edges: [], - }); - - useEffect(() => { - if (tableEnumerable) { - const sql = toSQL(graph, tables); - setQuery(sql); - } - }, [graph, setQuery, tables, tableEnumerable]); - - return !tableEnumerable ? null : ; -}); - -export default DiagramEditor; diff --git a/packages/rath-client/src/pages/dataConnection/database/query-editor/index.tsx b/packages/rath-client/src/pages/dataConnection/database/query-editor/index.tsx deleted file mode 100644 index f0487ee45..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/query-editor/index.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { useEffect, useMemo, useState } from 'react'; -import styled from 'styled-components'; -import { Pivot, PivotItem } from '@fluentui/react'; -import DiagramEditor from './diagram-editor'; -import SQLEditor from './sql-editor'; -import { QueryEditorProps } from './interfaces'; - -const Container = styled.div` - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; - display: flex; - flex-direction: column; - > *[role='tabpanel'] { - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; - width: 100%; - display: flex; - flex-direction: column; - } -`; - -export type QueryEditorMode = 'diagram' | 'query'; - -const QueryEditor = ({ tableEnumerable, tables, query, setQuery, preview }: QueryEditorProps) => { - const [mode, setMode] = useState('query'); - - const modes = useMemo< - { - mode: QueryEditorMode; - enabled: boolean; - iconName?: string; - label: string; - }[] - >(() => { - return [ - { - mode: 'query', - enabled: true, - iconName: 'FileSQL', - label: 'Query', - }, - { - mode: 'diagram', - enabled: Array.isArray(tables), - label: 'Diagram', - iconName: 'VisioDiagram', - }, - ]; - }, [tables]); - - useEffect(() => { - if (!tableEnumerable && mode === 'diagram') { - setMode('query'); - } - }, [tableEnumerable, mode]); - - useEffect(() => { - setQuery(''); - }, [mode, setQuery]); - - return ( - - { - if (item && item.props.itemKey) { - setMode(item.props.itemKey as QueryEditorMode); - } - }} - > - {modes.map((m, i) => ( - - ))} - -
-
- {mode === 'diagram' ? ( - - ) : ( - - )} -
- - ); -}; - -export default QueryEditor; diff --git a/packages/rath-client/src/pages/dataConnection/database/query-editor/interfaces.ts b/packages/rath-client/src/pages/dataConnection/database/query-editor/interfaces.ts deleted file mode 100644 index f849e0872..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/query-editor/interfaces.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { TableInfo } from '../api'; - -export interface QueryEditorProps { - tableEnumerable: boolean; - tables: TableInfo[]; - query: string; - setQuery: (query: string) => void; - preview: (query?: string) => void; -} diff --git a/packages/rath-client/src/pages/dataConnection/database/query-editor/sql-editor.tsx b/packages/rath-client/src/pages/dataConnection/database/query-editor/sql-editor.tsx deleted file mode 100644 index b07191135..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/query-editor/sql-editor.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { useCallback, useState } from 'react'; -import { DefaultButton, Stack } from '@fluentui/react'; -import styled from 'styled-components'; -import MonacoEditor, { ChangeHandler } from 'react-monaco-editor'; -import intl from 'react-intl-universal'; -import { QueryEditorProps } from './interfaces'; - -const Container = styled.div` - width: 100%; - height: 300; - .sql-editor { - margin-top: 1em; - } -`; - -const SQLEditor = ({ setQuery, preview }: QueryEditorProps) => { - const [code, setCode] = useState(''); - - const updateCode = useCallback((newValue, e) => { - setCode(newValue); - }, []); - return ( - - - { - setQuery(code); - preview(code); - }} - > - {intl.get('common.preview')} - - -
- -
- - ); -}; - -export default SQLEditor; diff --git a/packages/rath-client/src/pages/dataConnection/database/query-form.tsx b/packages/rath-client/src/pages/dataConnection/database/query-form.tsx deleted file mode 100644 index 4eaf906f6..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/query-form.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import type { FC } from 'react'; -import { Label, PrimaryButton, Stack, TextField } from '@fluentui/react'; -import intl from 'react-intl-universal'; -import TablePreview from './table-preview'; -import { StackTokens, TableData, TableLabels } from '.'; - -interface QueryFormProps { - preview: TableData; - isQuerying: boolean; - tableName: string | null | undefined; - queryString: string | undefined; - setQueryString: (sql: string) => void; - query: () => void; - disableQuery: boolean; -} - -const QueryForm: FC = ({ preview, isQuerying, tableName, queryString, setQueryString, query, disableQuery }) => { - return ( - - - - - '}`} - value={queryString} - styles={{ - root: { - flexGrow: 1, - }, - }} - onChange={(_, sql) => { - setQueryString(sql ?? ''); - }} - onKeyPress={(e) => { - if (e.key === 'Enter') { - query(); - } - }} - /> - - - - ); -}; - -export default QueryForm; diff --git a/packages/rath-client/src/pages/dataConnection/database/reducer.ts b/packages/rath-client/src/pages/dataConnection/database/reducer.ts deleted file mode 100644 index 06cb389fc..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/reducer.ts +++ /dev/null @@ -1,472 +0,0 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { map, Subject, switchAll, throttleTime } from 'rxjs'; -import produce from 'immer'; -import type { DatabaseOptions } from './type'; -import datasetOptions from './config'; -import { listDatabases, listSchemas, listTables, requestSQL } from './api'; - -const useDatabaseReducer = (setLoadingAnimation: (show: boolean) => void) => { - const [progress, _setProgress] = useState({ - connectorReady: false, - databaseType: 'clickhouse', - connectUri: '', - sourceId: { - status: 'empty', - value: NaN, - }, - database: { - status: 'empty', - options: [], - }, - schema: { - status: 'empty', - options: [], - }, - table: { - status: 'empty', - options: [], - }, - queryString: '', - preview: { - status: 'empty', - }, - }); - - const progress$ = useMemo(() => new Subject(), []); - - useEffect(() => { - const subscription = progress$.pipe(throttleTime(10)).subscribe((p) => { - _setProgress(p); - }); - - return () => subscription.unsubscribe(); - }, [progress$]); - - const ref = useRef(progress); - ref.current = progress; - const temp = useRef(progress); - temp.current = progress; - - const setProgress: typeof _setProgress = useCallback( - (p) => { - const _p = produce(typeof p === 'function' ? p(temp.current) : p, () => {}); - temp.current = _p; - progress$.next(_p); - }, - [progress$] - ); - - const [connectorReady$, databaseType$, connectUri$, sourceId$, database$, schema$, table$, queryString$, preview$] = useMemo( - () => [ - new Subject(), - new Subject(), - new Subject(), - new Subject(), - new Subject>(), - new Subject>(), - new Subject>(), - new Subject(), - new Subject>(), - ], - [] - ); - - useEffect(() => { - const subscriptions = [ - connectorReady$.subscribe((cReady) => { - _setProgress((p) => - produce(p, (draft) => { - draft.connectorReady = cReady; - draft.sourceId = { - status: 'empty', - value: NaN, - }; - sourceId$.next({ - status: 'empty', - value: NaN, - }); - }) - ); - }), - databaseType$.subscribe((dType) => { - _setProgress((p) => - produce(p, (draft) => { - draft.databaseType = dType; - }) - ); - }), - connectUri$.subscribe((uri) => { - setProgress((p) => - produce(p, (draft) => { - draft.connectUri = uri; - }) - ); - }), - sourceId$.subscribe((sId) => { - _setProgress((p) => - produce(p, (draft) => { - draft.sourceId = sId; - database$.next( - Promise.resolve({ - status: 'empty', - options: [], - }) - ); - }) - ); - const { databaseType } = ref.current; - if (sId.status === 'resolved' && Number.isFinite(sId.value)) { - // automatically fetch database list - const { hasDatabase = true, databaseEnumerable = true } = datasetOptions.find((which) => which.key === databaseType)!; - if (!hasDatabase || !databaseEnumerable) { - database$.next( - Promise.resolve({ - status: 'resolved', - options: [], - }) - ); - return; - } else { - setLoadingAnimation(true); - const task = listDatabases(sId.value); - database$.next( - task.then((list) => { - if (!list) { - sourceId$.next({ - status: 'empty', - value: NaN, - }); - return { - status: 'empty', - options: [], - }; - } - return { - status: 'resolved', - options: list, - }; - }) - ); - task.finally(() => setLoadingAnimation(false)); - } - } else { - database$.next( - Promise.resolve({ - status: 'empty', - options: [], - }) - ); - } - }), - database$.pipe(switchAll()).subscribe((db) => { - _setProgress((p) => - produce(p, (draft) => { - draft.database = db; - schema$.next( - Promise.resolve({ - status: 'empty', - options: [], - }) - ); - }) - ); - }), - database$ - .pipe( - switchAll(), - map((db) => db.value) - ) - .subscribe((dbName) => { - const { sourceId, databaseType } = ref.current; - // automatically fetch schema list when selected database changes - const { - hasDatabase = true, - requiredSchema = false, - schemaEnumerable = true, - } = datasetOptions.find((which) => which.key === databaseType)!; - if (!requiredSchema || !schemaEnumerable || sourceId.status !== 'resolved') { - schema$.next( - Promise.resolve({ - status: 'resolved', - options: [], - }) - ); - } else if (!hasDatabase) { - schema$.next( - Promise.resolve({ - status: 'pending', - options: [], - }) - ); - setLoadingAnimation(true); - const task = listSchemas(sourceId.value, null); - schema$.next( - task.then((schemas) => { - if (schemas) { - return { - status: 'resolved', - options: schemas, - }; - } else { - sourceId$.next({ - status: 'empty', - value: NaN, - }); - return { - status: 'empty', - options: [], - }; - } - }) - ); - task.finally(() => { - setLoadingAnimation(false); - }); - } else if (typeof dbName === 'string') { - schema$.next( - Promise.resolve({ - status: 'pending', - options: [], - }) - ); - setLoadingAnimation(true); - const task = listSchemas(sourceId.value, dbName); - schema$.next( - task.then((schemas) => { - if (schemas) { - return { - status: 'resolved', - options: schemas, - }; - } else { - sourceId$.next({ - status: 'empty', - value: NaN, - }); - return { - status: 'empty', - options: [], - }; - } - }) - ); - task.finally(() => { - setLoadingAnimation(false); - }); - } else { - schema$.next( - Promise.resolve({ - status: 'empty', - options: [], - }) - ); - } - }), - schema$.pipe(switchAll()).subscribe((schema) => { - _setProgress((p) => - produce(p, (draft) => { - draft.schema = schema; - }) - ); - table$.next( - Promise.resolve({ - status: 'empty', - options: [], - }) - ); - }), - schema$ - .pipe( - switchAll(), - map((s) => s.value) - ) - .subscribe((schemaName) => { - const { - sourceId, - databaseType, - database: { value: dbName }, - } = ref.current; - const { - hasDatabase = true, - requiredSchema = false, - hasTableList = true, - tableEnumerable = true, - } = datasetOptions.find((which) => which.key === databaseType)!; - // automatically fetch table list when selected schema changes - if (!hasTableList || !tableEnumerable || sourceId.status !== 'resolved') { - table$.next( - Promise.resolve({ - status: 'resolved', - options: [], - }) - ); - } else if ((hasDatabase ? typeof dbName === 'string' : true) && (requiredSchema ? typeof schemaName === 'string' : true)) { - table$.next( - Promise.resolve({ - status: 'pending', - options: [], - }) - ); - setLoadingAnimation(true); - const task = listTables(sourceId.value, dbName ?? null, schemaName ?? null); - table$.next( - task.then((tables) => { - if (tables) { - return { - status: 'resolved', - options: tables, - }; - } else { - sourceId$.next({ - status: 'empty', - value: NaN, - }); - return { - status: 'empty', - options: [], - }; - } - }) - ); - task.finally(() => { - setLoadingAnimation(false); - }); - } else { - table$.next( - Promise.resolve({ - status: 'empty', - options: [], - }) - ); - } - }), - table$.pipe(switchAll()).subscribe((table) => { - _setProgress((p) => - produce(p, (draft) => { - draft.table = table; - }) - ); - preview$.next( - Promise.resolve({ - status: 'empty', - }) - ); - queryString$.next(''); - }), - queryString$.subscribe((sql) => { - setProgress((p) => - produce(p, (draft) => { - draft.queryString = sql; - }) - ); - preview$.next( - Promise.resolve({ - status: 'empty', - }) - ); - }), - preview$.pipe(switchAll()).subscribe((preview) => { - _setProgress((p) => - produce(p, (draft) => { - draft.preview = preview; - }) - ); - }), - ]; - - return () => { - subscriptions.forEach((sbs) => sbs.unsubscribe()); - }; - }, [ - connectorReady$, - databaseType$, - connectUri$, - sourceId$, - database$, - schema$, - table$, - preview$, - queryString$, - setLoadingAnimation, - setProgress, - ]); - - const actions = useMemo( - () => ({ - setConnectorStatus: (status: DatabaseOptions['connectorReady']) => { - connectorReady$.next(status); - }, - setDatabaseType: (dbType: DatabaseOptions['databaseType']) => { - databaseType$.next(dbType); - }, - setConnectUri: (uri: DatabaseOptions['connectUri']) => { - connectUri$.next(uri); - }, - setSourceId: (sourceId: DatabaseOptions['sourceId']) => { - sourceId$.next(sourceId); - }, - setDatabase: (database: DatabaseOptions['database']['options'][0]) => { - const db = produce(ref.current.database, (draft) => { - draft.value = database; - }); - database$.next(Promise.resolve(db)); - }, - setSchemaList: (schema: DatabaseOptions['schema']) => { - schema$.next(Promise.resolve(schema)); - }, - setSchema: (schema: DatabaseOptions['schema']['options'][0]) => { - schema$.next( - Promise.resolve( - produce(ref.current.schema, (draft) => { - draft.value = schema; - }) - ) - ); - }, - setTableList: (table: DatabaseOptions['table']) => { - table$.next(Promise.resolve(table)); - }, - setQueryString: (sql: DatabaseOptions['queryString']) => { - queryString$.next(sql); - }, - genPreview: (sql?: DatabaseOptions['queryString']) => { - const { sourceId, queryString } = ref.current; - const content = sql ?? queryString; - if (!content || sourceId.status !== 'resolved') { - return; - } - preview$.next( - Promise.resolve({ - status: 'empty', - }) - ); - setLoadingAnimation(true); - const task = requestSQL(sourceId.value, content); - preview$.next( - task.then((data) => { - if (data) { - return { - status: 'resolved', - value: data, - }; - } - return { - status: 'empty', - }; - }) - ); - task.finally(() => { - setLoadingAnimation(false); - }); - }, - }), - [connectorReady$, databaseType$, connectUri$, sourceId$, database$, schema$, table$, preview$, queryString$, setLoadingAnimation] - ); - - return { - progress, - actions, - }; -}; - -export default useDatabaseReducer; diff --git a/packages/rath-client/src/pages/dataConnection/database/table-preview.tsx b/packages/rath-client/src/pages/dataConnection/database/table-preview.tsx deleted file mode 100644 index 1268448aa..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/table-preview.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { FC, memo, CSSProperties, Fragment } from 'react'; -import type { TableData } from '.'; - -interface TablePreviewProps { - data: TableData; -} - -const styles: Record & Record = { - Int64: { - color: 'rgb(38, 139, 210)', - }, -}; - -const TablePreview: FC = memo(function TablePreview({ data }) { - const columns = - (data.columns ?? []).length === 0 - ? data.rows[0]?.map((_, i) => ({ - key: `col_${i + 1}`, - colIndex: i, - dataType: null, - })) - : data.columns; - - return ( -
- {/* corner */} - - {columns.map((col) => ( - - ))} - {data.rows.map((d, i) => ( - - - {i + 1} - - {d.map((e, j) => ( -
- {e} -
- ))} - - ))} - {data.rows.length === 0 && ( - - (empty) - - )} -
- ); -}); - -export default TablePreview; diff --git a/packages/rath-client/src/pages/dataConnection/database/type.ts b/packages/rath-client/src/pages/dataConnection/database/type.ts deleted file mode 100644 index bbd4fbe09..000000000 --- a/packages/rath-client/src/pages/dataConnection/database/type.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type { TableInfo } from './api'; -import type { TableData, TableLabels } from '.'; - -export type SupportedDatabaseType = - | 'postgres' - | 'clickhouse' - | 'mysql' - | 'kylin' - | 'oracle' - | 'doris' - | 'impala' - | 'awsathena' - | 'redshift' - | 'sparksql' - | 'hive' - | 'sqlserver'; - -export type AsyncStatus = 'empty' | 'pending' | 'resolved'; - -export type DatabaseOptions = { - connectorReady: boolean; - databaseType: SupportedDatabaseType; - connectUri: string; - sourceId: { - status: AsyncStatus; - value: number; - }; - database: { - status: AsyncStatus; - options: string[]; - value?: string; - }; - schema: { - status: AsyncStatus; - options: string[]; - value?: string; - }; - table: { - status: AsyncStatus; - options: TableInfo[]; - }; - queryString: string; - preview: { - status: AsyncStatus; - value?: TableData; - }; -}; From c24f288855a2e1545e586aeeac9fae84004f5da0 Mon Sep 17 00:00:00 2001 From: AntoineYANG Date: Mon, 19 Jun 2023 21:18:30 +0800 Subject: [PATCH 2/3] refactor(connection): move database to cur dir Co-Authored-By: kyusho --- .../src/components/dbGraph/index.tsx | 2 +- .../src/components/dbGraph/utils.ts | 2 +- .../src/pages/dataConnection/create.tsx | 2 +- .../database/components/nested-list-item.tsx | 0 .../database/components/nested-list.tsx | 0 .../components/server-dropdown-item.tsx | 2 +- .../database/dropdown.tsx} | 2 +- .../database/form/advanced-options.tsx | 0 .../database/form/components.tsx | 0 .../database/form/connect-options.tsx | 8 +++---- .../database/form/query-options.tsx | 18 +++++++-------- .../database/form/utils.tsx | 8 +++---- .../database/interfaces.ts} | 0 .../database/main.tsx} | 22 +++++++++---------- .../database/options.ts} | 2 +- .../database/queryEditor/diagramEditor.tsx} | 12 +++++----- .../database/queryEditor/sqlEditor.tsx} | 4 ++-- .../database/service.ts} | 8 +++---- .../database/tablePreview.tsx} | 2 +- .../src/pages/dataSource/selection/index.tsx | 2 +- 20 files changed, 48 insertions(+), 48 deletions(-) rename packages/rath-client/src/pages/{dataSource/selection => dataConnection}/database/components/nested-list-item.tsx (100%) rename packages/rath-client/src/pages/{dataSource/selection => dataConnection}/database/components/nested-list.tsx (100%) rename packages/rath-client/src/pages/{dataSource/selection => dataConnection}/database/components/server-dropdown-item.tsx (98%) rename packages/rath-client/src/pages/{dataSource/selection/database/custom-dropdown.tsx => dataConnection/database/dropdown.tsx} (97%) rename packages/rath-client/src/pages/{dataSource/selection => dataConnection}/database/form/advanced-options.tsx (100%) rename packages/rath-client/src/pages/{dataSource/selection => dataConnection}/database/form/components.tsx (100%) rename packages/rath-client/src/pages/{dataSource/selection => dataConnection}/database/form/connect-options.tsx (97%) rename packages/rath-client/src/pages/{dataSource/selection => dataConnection}/database/form/query-options.tsx (97%) rename packages/rath-client/src/pages/{dataSource/selection => dataConnection}/database/form/utils.tsx (97%) rename packages/rath-client/src/pages/{dataSource/selection/database/type.ts => dataConnection/database/interfaces.ts} (100%) rename packages/rath-client/src/pages/{dataSource/selection/database/index.tsx => dataConnection/database/main.tsx} (93%) rename packages/rath-client/src/pages/{dataSource/selection/database/config.ts => dataConnection/database/options.ts} (98%) rename packages/rath-client/src/pages/{dataSource/selection/database/query-editor/diagram-editor.tsx => dataConnection/database/queryEditor/diagramEditor.tsx} (87%) rename packages/rath-client/src/pages/{dataSource/selection/database/query-editor/sql-editor.tsx => dataConnection/database/queryEditor/sqlEditor.tsx} (98%) rename packages/rath-client/src/pages/{dataSource/selection/database/api.ts => dataConnection/database/service.ts} (96%) rename packages/rath-client/src/pages/{dataSource/selection/database/table-preview.tsx => dataConnection/database/tablePreview.tsx} (99%) diff --git a/packages/rath-client/src/components/dbGraph/index.tsx b/packages/rath-client/src/components/dbGraph/index.tsx index 0474c9051..f3074d3dc 100644 --- a/packages/rath-client/src/components/dbGraph/index.tsx +++ b/packages/rath-client/src/components/dbGraph/index.tsx @@ -3,7 +3,7 @@ import produce from 'immer'; import { DragEvent, memo, MouseEvent, useCallback, useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; import intl from 'react-intl-universal'; -import type { TableInfo } from '../../pages/dataSource/selection/database/type'; +import type { TableInfo } from '../../pages/dataConnection/database/interfaces'; import Link from './link'; import { IDBGraph } from './localTypes'; import DBNode from './node'; diff --git a/packages/rath-client/src/components/dbGraph/utils.ts b/packages/rath-client/src/components/dbGraph/utils.ts index 8bfe51993..16bd9dd07 100644 --- a/packages/rath-client/src/components/dbGraph/utils.ts +++ b/packages/rath-client/src/components/dbGraph/utils.ts @@ -1,4 +1,4 @@ -import type { TableInfo } from "../../pages/dataSource/selection/database/type"; +import type { TableInfo } from "../../pages/dataConnection/database/interfaces"; import { BOX_HEIGHT, BOX_WIDTH, STROKE_RADIUS } from "./config"; import type { IDBEdge, IDBGraph } from "./localTypes"; diff --git a/packages/rath-client/src/pages/dataConnection/create.tsx b/packages/rath-client/src/pages/dataConnection/create.tsx index 8abf44fd4..833158735 100644 --- a/packages/rath-client/src/pages/dataConnection/create.tsx +++ b/packages/rath-client/src/pages/dataConnection/create.tsx @@ -26,8 +26,8 @@ import { DataSourceTag, IDBMeta, setDataStorage } from '../../utils/storage'; import DataLoadingStatus from '../dataSource/dataLoadingStatus'; import { useGlobalStore } from '../../store'; import { PIVOT_KEYS } from '../../constants'; -import DatabaseConnector from '../dataSource/selection/database'; import { notify } from '../../components/error'; +import DatabaseConnector from './database/main'; import FileData from './file'; import DemoData from './demo'; // import RestfulData from './restful'; diff --git a/packages/rath-client/src/pages/dataSource/selection/database/components/nested-list-item.tsx b/packages/rath-client/src/pages/dataConnection/database/components/nested-list-item.tsx similarity index 100% rename from packages/rath-client/src/pages/dataSource/selection/database/components/nested-list-item.tsx rename to packages/rath-client/src/pages/dataConnection/database/components/nested-list-item.tsx diff --git a/packages/rath-client/src/pages/dataSource/selection/database/components/nested-list.tsx b/packages/rath-client/src/pages/dataConnection/database/components/nested-list.tsx similarity index 100% rename from packages/rath-client/src/pages/dataSource/selection/database/components/nested-list.tsx rename to packages/rath-client/src/pages/dataConnection/database/components/nested-list.tsx diff --git a/packages/rath-client/src/pages/dataSource/selection/database/components/server-dropdown-item.tsx b/packages/rath-client/src/pages/dataConnection/database/components/server-dropdown-item.tsx similarity index 98% rename from packages/rath-client/src/pages/dataSource/selection/database/components/server-dropdown-item.tsx rename to packages/rath-client/src/pages/dataConnection/database/components/server-dropdown-item.tsx index b8a7e0e4f..40819e3b6 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/components/server-dropdown-item.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/components/server-dropdown-item.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; import { Icon, IconButton, Spinner, IContextualMenuItem, SpinnerSize } from "@fluentui/react"; -import { defaultServers } from '..'; +import { defaultServers } from '../main'; const ServerItem = styled.div` diff --git a/packages/rath-client/src/pages/dataSource/selection/database/custom-dropdown.tsx b/packages/rath-client/src/pages/dataConnection/database/dropdown.tsx similarity index 97% rename from packages/rath-client/src/pages/dataSource/selection/database/custom-dropdown.tsx rename to packages/rath-client/src/pages/dataConnection/database/dropdown.tsx index c13f9ccfb..9feddd579 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/custom-dropdown.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/dropdown.tsx @@ -1,6 +1,6 @@ import { Icon } from '@fluentui/react'; import styled from 'styled-components'; -import databaseOptions from './config'; +import databaseOptions from './options'; const ItemContainer = styled.div` diff --git a/packages/rath-client/src/pages/dataSource/selection/database/form/advanced-options.tsx b/packages/rath-client/src/pages/dataConnection/database/form/advanced-options.tsx similarity index 100% rename from packages/rath-client/src/pages/dataSource/selection/database/form/advanced-options.tsx rename to packages/rath-client/src/pages/dataConnection/database/form/advanced-options.tsx diff --git a/packages/rath-client/src/pages/dataSource/selection/database/form/components.tsx b/packages/rath-client/src/pages/dataConnection/database/form/components.tsx similarity index 100% rename from packages/rath-client/src/pages/dataSource/selection/database/form/components.tsx rename to packages/rath-client/src/pages/dataConnection/database/form/components.tsx diff --git a/packages/rath-client/src/pages/dataSource/selection/database/form/connect-options.tsx b/packages/rath-client/src/pages/dataConnection/database/form/connect-options.tsx similarity index 97% rename from packages/rath-client/src/pages/dataSource/selection/database/form/connect-options.tsx rename to packages/rath-client/src/pages/dataConnection/database/form/connect-options.tsx index e082280c7..3db8a34c4 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/form/connect-options.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/form/connect-options.tsx @@ -5,10 +5,10 @@ import styled from 'styled-components'; import produce from 'immer'; import { useId } from '@fluentui/react-hooks'; import { ContextualMenu, DefaultButton, Dropdown, Icon, IContextualMenuItem, IDropdownOption, Label, PrimaryButton, Stack, TextField } from '@fluentui/react'; -import databaseOptions from '../config'; -import type { SupportedDatabaseType } from '../type'; -import { renderDropdownItem, renderDropdownTitle } from '../custom-dropdown'; -import useCachedState from '../../../../../hooks/use-cached-state'; +import databaseOptions from '../options'; +import type { SupportedDatabaseType } from '../interfaces'; +import { renderDropdownItem, renderDropdownTitle } from '../dropdown'; +import useCachedState from '../../../../hooks/use-cached-state'; const InputGroupStackToken = { childrenGap: 10 }; diff --git a/packages/rath-client/src/pages/dataSource/selection/database/form/query-options.tsx b/packages/rath-client/src/pages/dataConnection/database/form/query-options.tsx similarity index 97% rename from packages/rath-client/src/pages/dataSource/selection/database/form/query-options.tsx rename to packages/rath-client/src/pages/dataConnection/database/form/query-options.tsx index 8f01365df..fe1c39cf4 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/form/query-options.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/form/query-options.tsx @@ -3,17 +3,17 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRe import { observer } from 'mobx-react-lite'; import produce from 'immer'; import { IconButton, Spinner, useTheme } from '@fluentui/react'; -import type { SupportedDatabaseType, TableColInfo, TableInfo } from '../type'; -import databaseOptions from '../config'; +import type { SupportedDatabaseType, TableColInfo, TableInfo } from '../interfaces'; +import databaseOptions from '../options'; import NestedList from '../components/nested-list'; import type { INestedListItem } from '../components/nested-list-item'; -import useAsyncState, { AsyncDispatch } from '../../../../../hooks/use-async-state'; -import { notify } from '../../../../../components/error'; -import type { TableData } from '../index'; -import { DatabaseApiOperator, DatabaseRequestPayload, fetchQueryResult } from '../api'; -import TablePreview from '../table-preview'; -import SQLEditor from '../query-editor/sql-editor'; -import DiagramEditor from '../query-editor/diagram-editor'; +import useAsyncState, { AsyncDispatch } from '../../../../hooks/use-async-state'; +import { notify } from '../../../../components/error'; +import type { TableData } from '../main'; +import { DatabaseApiOperator, DatabaseRequestPayload, fetchQueryResult } from '../service'; +import TablePreview from '../tablePreview'; +import SQLEditor from '../queryEditor/sqlEditor'; +import DiagramEditor from '../queryEditor/diagramEditor'; import { EditorKey, fetchListAsNodes, fetchTablePreviewData, findNodeByPathId, handleBrowserItemClick, MenuType, PageType } from './utils'; import { MessageContainer, PivotHeader, PivotList, QueryBrowserHeader, QueryContainer, QueryViewBody, SpinnerContainer, SyncButton } from './components'; diff --git a/packages/rath-client/src/pages/dataSource/selection/database/form/utils.tsx b/packages/rath-client/src/pages/dataConnection/database/form/utils.tsx similarity index 97% rename from packages/rath-client/src/pages/dataSource/selection/database/form/utils.tsx rename to packages/rath-client/src/pages/dataConnection/database/form/utils.tsx index 3f96dab12..b987d9245 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/form/utils.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/form/utils.tsx @@ -1,11 +1,11 @@ import { Icon } from '@fluentui/react'; import produce from 'immer'; import type { Dispatch } from 'react'; -import type { DatabaseLevelType } from '../config'; +import type { DatabaseLevelType } from '../options'; import { INestedListItem } from '../components/nested-list-item'; -import { DatabaseApiOperator, DatabaseRequestPayload, fetchDatabaseList, fetchSchemaList, fetchTableDetail, fetchTableList } from '../api'; -import databaseOptions from '../config'; -import { SupportedDatabaseType } from '../type'; +import { DatabaseApiOperator, DatabaseRequestPayload, fetchDatabaseList, fetchSchemaList, fetchTableDetail, fetchTableList } from '../service'; +import databaseOptions from '../options'; +import { SupportedDatabaseType } from '../interfaces'; export const findNode = (root: INestedListItem[], path: INestedListItem[]): INestedListItem | null => { diff --git a/packages/rath-client/src/pages/dataSource/selection/database/type.ts b/packages/rath-client/src/pages/dataConnection/database/interfaces.ts similarity index 100% rename from packages/rath-client/src/pages/dataSource/selection/database/type.ts rename to packages/rath-client/src/pages/dataConnection/database/interfaces.ts diff --git a/packages/rath-client/src/pages/dataSource/selection/database/index.tsx b/packages/rath-client/src/pages/dataConnection/database/main.tsx similarity index 93% rename from packages/rath-client/src/pages/dataSource/selection/database/index.tsx rename to packages/rath-client/src/pages/dataConnection/database/main.tsx index 2dc198447..7dc17bcca 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/index.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/main.tsx @@ -3,17 +3,17 @@ import intl from 'react-intl-universal'; import { observer } from 'mobx-react-lite'; import produce from 'immer'; import { PrimaryButton, registerIcons, Spinner, Stack } from '@fluentui/react'; -import { DataSourceType, IMuteFieldBase, IRow } from '../../../../interfaces'; -import { DataSourceTag } from '../../../../utils/storage'; -import useAsyncState from '../../../../hooks/use-async-state'; -import useCachedState from '../../../../hooks/use-cached-state'; -import { notify } from '../../../../components/error'; -import { useGlobalStore } from '../../../../store'; -import { logDataImport } from '../../../../loggers/dataImport'; -import { rawData2DataWithBaseMetas } from '../../utils'; -import databaseOptions from './config'; -import type { SupportedDatabaseType } from './type'; -import { checkServerConnection } from './api'; +import { DataSourceType, IMuteFieldBase, IRow } from '../../../interfaces'; +import { DataSourceTag } from '../../../utils/storage'; +import useAsyncState from '../../../hooks/use-async-state'; +import useCachedState from '../../../hooks/use-cached-state'; +import { notify } from '../../../components/error'; +import { useGlobalStore } from '../../../store'; +import { logDataImport } from '../../../loggers/dataImport'; +import { rawData2DataWithBaseMetas } from '../../dataSource/utils'; +import databaseOptions from './options'; +import type { SupportedDatabaseType } from './interfaces'; +import { checkServerConnection } from './service'; import AdvancedOptions from './form/advanced-options'; import ConnectOptions from './form/connect-options'; import QueryOptions, { QueryOptionsHandlerRef } from './form/query-options'; diff --git a/packages/rath-client/src/pages/dataSource/selection/database/config.ts b/packages/rath-client/src/pages/dataConnection/database/options.ts similarity index 98% rename from packages/rath-client/src/pages/dataSource/selection/database/config.ts rename to packages/rath-client/src/pages/dataConnection/database/options.ts index b4293713f..ca508fc0a 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/config.ts +++ b/packages/rath-client/src/pages/dataConnection/database/options.ts @@ -1,5 +1,5 @@ import type { IDropdownOption } from '@fluentui/react'; -import type { SupportedDatabaseType } from "./type"; +import type { SupportedDatabaseType } from "./interfaces"; export type DatabaseLevelType = 'database' | 'schema' | 'table'; diff --git a/packages/rath-client/src/pages/dataSource/selection/database/query-editor/diagram-editor.tsx b/packages/rath-client/src/pages/dataConnection/database/queryEditor/diagramEditor.tsx similarity index 87% rename from packages/rath-client/src/pages/dataSource/selection/database/query-editor/diagram-editor.tsx rename to packages/rath-client/src/pages/dataConnection/database/queryEditor/diagramEditor.tsx index b79022b4e..4f942cb9d 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/query-editor/diagram-editor.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/queryEditor/diagramEditor.tsx @@ -1,11 +1,11 @@ import { memo, useEffect, useState } from "react"; import styled from "styled-components"; -import Diagram from "../../../../../components/dbGraph"; -import type { IDBGraph } from "../../../../../components/dbGraph/localTypes"; -import TablePreview from "../table-preview"; -import { toSQL } from "../../../../../components/dbGraph/utils"; -import type { TableInfo } from "../type"; -import type { TableData, TableLabels } from ".."; +import Diagram from "../../../../components/dbGraph"; +import type { IDBGraph } from "../../../../components/dbGraph/localTypes"; +import TablePreview from "../tablePreview"; +import { toSQL } from "../../../../components/dbGraph/utils"; +import type { TableInfo } from "../interfaces"; +import type { TableData, TableLabels } from "../main"; const Container = styled.div` diff --git a/packages/rath-client/src/pages/dataSource/selection/database/query-editor/sql-editor.tsx b/packages/rath-client/src/pages/dataConnection/database/queryEditor/sqlEditor.tsx similarity index 98% rename from packages/rath-client/src/pages/dataSource/selection/database/query-editor/sql-editor.tsx rename to packages/rath-client/src/pages/dataConnection/database/queryEditor/sqlEditor.tsx index dbbbf8a46..e59ce4d45 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/query-editor/sql-editor.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/queryEditor/sqlEditor.tsx @@ -4,8 +4,8 @@ import styled from 'styled-components'; import intl from 'react-intl-universal'; import MonacoEditor, { ChangeHandler, EditorWillMount } from 'react-monaco-editor'; import { IRange, languages } from 'monaco-editor'; -import TablePreview from '../table-preview'; -import type { TableData } from '..'; +import TablePreview from '../tablePreview'; +import type { TableData } from '../main'; import type { INestedListItem } from '../components/nested-list-item'; type Monaco = Parameters[0]; diff --git a/packages/rath-client/src/pages/dataSource/selection/database/api.ts b/packages/rath-client/src/pages/dataConnection/database/service.ts similarity index 96% rename from packages/rath-client/src/pages/dataSource/selection/database/api.ts rename to packages/rath-client/src/pages/dataConnection/database/service.ts index b7c59ab52..e3850758f 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/api.ts +++ b/packages/rath-client/src/pages/dataConnection/database/service.ts @@ -1,7 +1,7 @@ -import { notify } from "../../../../components/error"; -import { getRathError } from "../../../../rath-error"; -import databaseOptions from "./config"; -import type { SupportedDatabaseType, TableColInfo, TableInfo, TableRowData } from "./type"; +import { notify } from "../../../components/error"; +import { getRathError } from "../../../rath-error"; +import databaseOptions from "./options"; +import type { SupportedDatabaseType, TableColInfo, TableInfo, TableRowData } from "./interfaces"; const apiPath = '/api/get_connection'; diff --git a/packages/rath-client/src/pages/dataSource/selection/database/table-preview.tsx b/packages/rath-client/src/pages/dataConnection/database/tablePreview.tsx similarity index 99% rename from packages/rath-client/src/pages/dataSource/selection/database/table-preview.tsx rename to packages/rath-client/src/pages/dataConnection/database/tablePreview.tsx index 544669635..756473956 100644 --- a/packages/rath-client/src/pages/dataSource/selection/database/table-preview.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/tablePreview.tsx @@ -2,7 +2,7 @@ import intl from 'react-intl-universal'; import { PrimaryButton } from '@fluentui/react'; import { FC, memo, CSSProperties, Fragment, useMemo } from 'react'; import styled from 'styled-components'; -import type { TableData } from './index'; +import type { TableData } from './main'; interface TablePreviewProps { diff --git a/packages/rath-client/src/pages/dataSource/selection/index.tsx b/packages/rath-client/src/pages/dataSource/selection/index.tsx index 416e19851..cdde78afd 100644 --- a/packages/rath-client/src/pages/dataSource/selection/index.tsx +++ b/packages/rath-client/src/pages/dataSource/selection/index.tsx @@ -6,13 +6,13 @@ import { IMuteFieldBase, IRow } from '../../../interfaces'; import { useDataSourceTypeOptions } from '../config'; import DataLoadingStatus from '../dataLoadingStatus'; import type { DataSourceTag, IDBMeta } from '../../../utils/storage'; +import DatabaseConnector from '../../dataConnection/database/main'; import FileData from './file'; import DemoData from './demo'; // import RestfulData from './restful'; import JSONAPI from './jsonAPI'; import OLAPData from './olap'; import HistoryPanel from './history'; -import DatabaseConnector from './database'; import AirTableSource from './airtable'; interface SelectionProps { From 9017a4260edff9cbd090dfba3d612a7b0cd2d23c Mon Sep 17 00:00:00 2001 From: AntoineYANG Date: Mon, 19 Jun 2023 22:53:43 +0800 Subject: [PATCH 3/3] fix: lint issue Co-Authored-By: kyusho --- packages/rath-client/src/pages/dataConnection/database/main.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rath-client/src/pages/dataConnection/database/main.tsx b/packages/rath-client/src/pages/dataConnection/database/main.tsx index b03454f6e..762546409 100644 --- a/packages/rath-client/src/pages/dataConnection/database/main.tsx +++ b/packages/rath-client/src/pages/dataConnection/database/main.tsx @@ -6,12 +6,12 @@ import { PrimaryButton, registerIcons, Spinner, Stack } from '@fluentui/react'; import { DataSourceType, IMuteFieldBase, IRow } from '../../../interfaces'; import { DataSourceTag } from '../../../utils/storage'; import useAsyncState from '../../../hooks/use-async-state'; -import QueryOptions, { QueryOptionsHandlerRef } from './form/query-options'; import { notify } from '../../../components/error'; import { useGlobalStore } from '../../../store'; import { logDataImport } from '../../../loggers/dataImport'; import { rawData2DataWithBaseMetas } from '../../dataSource/utils'; import useLocalStorage from '../../../hooks/use-local-storage'; +import QueryOptions, { QueryOptionsHandlerRef } from './form/query-options'; import databaseOptions from './options'; import type { SupportedDatabaseType } from './interfaces'; import { checkServerConnection } from './service';