Merge pull request #252 from sakang07/develop

Add db connection of snowflake and fix bugs
2022-11-08 21:29:18 +09:00
parent 762a99cc27 67a8840c61
commit 8fa19cac4c
9 changed files with 349 additions and 32 deletions
--- a/frontend-web/src/pages/Data/DataSource/form/DatabaseForm.tsx
+++ b/frontend-web/src/pages/Data/DataSource/form/DatabaseForm.tsx
@@ -72,7 +72,6 @@ const DatabaseForm = props => {
        <TextField
          label="Password"
          name="password"
-          type="password"
          value={formData?.default?.password || ''}
          required
          fullWidth
--- a/frontend-web/src/pages/Data/DataSource/form/OracleDatabaseForm.tsx
+++ b/frontend-web/src/pages/Data/DataSource/form/OracleDatabaseForm.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { Stack, TextField } from '@mui/material';
+import SubmitButton from '@/components/button/SubmitButton';
+
+const inputStyle = {
+  width: '800px',
+};
+
+const OracleDatabaseForm = props => {
+  const { testConnect, formData, setFormData } = props;
+  const handleSubmit = data => {
+    data.preventDefault();
+    const item = {
+      name: data.target.name.value,
+      host: data.target.host.value,
+      port: Number(data.target.port.value),
+      user: data.target.user.value,
+      password: data.target.password.value,
+      database: data.target.database.value,
+      instanceName: data.target.instanceName.value,
+      fetchAsString: data.target.fetchAsString.value,
+      requestTimeout: data.target.requestTimeout.value,
+    };
+    testConnect(item);
+  };
+
+  const handleNameChange = event => {
+    setFormData(prevState => ({ ...prevState, [event.target.name]: event.target.value }));
+  };
+
+  const handleChange = event => {
+    setFormData(prevState => ({ ...prevState, oracle: { ...prevState.oracle, [event.target.name]: event.target.value } }));
+  };
+
+  return (
+    <Stack component="form" sx={{ maxWidth: 800, mx: 'auto', mt: 3 }} onSubmit={handleSubmit}>
+      <Stack sx={{ display: 'flex', justifyContent: 'space-between' }} spacing="20px">
+        <TextField
+          label="이름"
+          name="name"
+          value={formData?.name || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleNameChange}
+        />
+        <TextField
+          label="Host"
+          name="host"
+          value={formData?.oracle?.host || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Port"
+          name="port"
+          type="number"
+          value={formData?.oracle?.port || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="User"
+          name="user"
+          value={formData?.oracle?.user || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Password"
+          name="password"
+          value={formData?.oracle?.password || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Database"
+          name="database"
+          value={formData?.oracle?.database || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="InstanceName"
+          name="instanceName"
+          value={formData?.oracle?.instanceName || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="FetchAsString"
+          name="fetchAsString"
+          value={formData?.oracle?.fetchAsString || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="RequestTimeout"
+          name="requestTimeout"
+          value={formData?.oracle?.requestTimeout || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <SubmitButton label="TEST CONNECT" type="submit" sx={{ height: '50px', fontSize: '13px' }} />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default OracleDatabaseForm;
--- a/frontend-web/src/pages/Data/DataSource/form/SnowflakeDatabaseForm.tsx
+++ b/frontend-web/src/pages/Data/DataSource/form/SnowflakeDatabaseForm.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { Stack, TextField } from '@mui/material';
+import SubmitButton from '@/components/button/SubmitButton';
+
+const inputStyle = {
+  width: '800px',
+};
+
+const SnowflakeDatabaseForm = props => {
+  const { testConnect, formData, setFormData } = props;
+  const handleSubmit = data => {
+    data.preventDefault();
+    const item = {
+      name: data.target.name.value,
+      account: data.target.account.value,
+      username: data.target.username.value,
+      password: data.target.password.value,
+      database: data.target.database.value,
+      application: data.target.application.value,
+      schema: data.target.schema.value,
+      warehouse: data.target.warehouse.value,
+    };
+    testConnect(item);
+  };
+
+  const handleNameChange = event => {
+    setFormData(prevState => ({ ...prevState, [event.target.name]: event.target.value }));
+  };
+
+  const handleChange = event => {
+    setFormData(prevState => ({
+      ...prevState,
+      snowflake: { ...prevState.snowflake, [event.target.name]: event.target.value },
+    }));
+  };
+
+  return (
+    <Stack component="form" sx={{ maxWidth: 800, mx: 'auto', mt: 3 }} onSubmit={handleSubmit}>
+      <Stack sx={{ display: 'flex', justifyContent: 'space-between' }} spacing="20px">
+        <TextField
+          label="이름"
+          name="name"
+          value={formData?.name || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleNameChange}
+        />
+        <TextField
+          label="Account"
+          name="account"
+          value={formData?.snowflake?.account || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Username"
+          name="username"
+          value={formData?.snowflake?.username || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Password"
+          name="password"
+          value={formData?.snowflake?.password || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Database"
+          name="database"
+          value={formData?.snowflake?.database || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />{' '}
+        <TextField
+          label="Application"
+          name="application"
+          value={formData?.snowflake?.application || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Schema"
+          name="schema"
+          value={formData?.snowflake?.schema || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Warehouse"
+          name="warehouse"
+          value={formData?.snowflake?.warehouse || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <SubmitButton label="TEST CONNECT" type="submit" sx={{ height: '50px', fontSize: '13px' }} />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default SnowflakeDatabaseForm;
--- a/frontend-web/src/pages/Data/DataSource/index.tsx
+++ b/frontend-web/src/pages/Data/DataSource/index.tsx
@@ -14,6 +14,8 @@ import SqliteDatabaseForm from '@/pages/Data/DataSource/form/SqliteDatabaseForm'
 import BigQueryDatabaseForm from '@/pages/Data/DataSource/form/BigQueryDatabaseForm';
 import { SnackbarContext } from '@/contexts/AlertContext';
 import { LoadingContext } from '@/contexts/LoadingContext';
+import SnowflakeDatabaseForm from '@/pages/Data/DataSource/form/SnowflakeDatabaseForm';
+import OracleDatabaseForm from '@/pages/Data/DataSource/form/OracleDatabaseForm';

 function DataSource() {
  const { sourceId } = useParams();
@@ -29,8 +31,8 @@ function DataSource() {
  const [typeList, setTypeList] = useState([]);
  const [formData, setFormData] = useState<any>({
    type: '',
+    name: '',
    default: {
-      name: '',
      host: '',
      port: null,
      user: '',
@@ -38,15 +40,36 @@ function DataSource() {
      database: '',
    },
    sqlite: {
-      name: '',
+      // name: '',
      filename: '',
    },
    bigquery: {
-      name: '',
+      // name: '',
      projectId: '',
      filename: '',
      database: '',
    },
+    oracle: {
+      // name: '',
+      host: '',
+      port: null,
+      user: '',
+      password: '',
+      database: '',
+      instanceName: '',
+      fetchAsString: '',
+      requestTimeout: '',
+    },
+    snowflake: {
+      // name: '',
+      account: '',
+      username: '',
+      password: '',
+      database: '',
+      application: '',
+      schema: '',
+      warehouse: '',
+    },
  });

  useLayoutEffect(() => {
@@ -81,14 +104,33 @@ function DataSource() {
          temp.sqlite = {
            filename: databaseInfo.connectionConfig.filename,
          };
-        }
-        if (databaseInfo.type === 'bigquery') {
+        } else if (databaseInfo.type === 'bigquery') {
          temp.bigquery = {
-            name: databaseInfo.connectionConfig.name,
            projectId: databaseInfo.connectionConfig.projectId,
            keyFilename: databaseInfo.connectionConfig.keyFilename,
            schema: databaseInfo.connectionConfig.schema,
          };
+        } else if (databaseInfo.type === 'oracle') {
+          temp.oracle = {
+            host: databaseInfo.connectionConfig.host,
+            port: Number(databaseInfo.connectionConfig.port),
+            user: databaseInfo.connectionConfig.user,
+            password: databaseInfo.connectionConfig.password,
+            database: databaseInfo.connectionConfig.database,
+            instanceName: databaseInfo.connectionConfig.instanceName,
+            fetchAsString: databaseInfo.connectionConfig.fetchAsString,
+            requestTimeout: databaseInfo.connectionConfig.requestTimeout,
+          };
+        } else if (databaseInfo.type === 'snowflake') {
+          temp.snowflake = {
+            account: databaseInfo.connectionConfig.account,
+            username: databaseInfo.connectionConfig.username,
+            password: databaseInfo.connectionConfig.password,
+            database: databaseInfo.connectionConfig.database,
+            application: databaseInfo.connectionConfig.application,
+            schema: databaseInfo.connectionConfig.schema,
+            warehouse: databaseInfo.connectionConfig.warehouse,
+          };
        } else {
          temp.default = {
            host: databaseInfo.connectionConfig.host,
@@ -133,9 +175,9 @@ function DataSource() {
        const list = response.data.data;
        list.map(item => (item.icon = getDatabaseIcon(item.type)));
        setTypeList(list);
-        if (list.length > 0) {
-          setDataType(list[0]);
-        }
+        // if (list.length > 0) {
+        //   setDataType(list[0]);
+        // }
      }
    });
  };
@@ -153,6 +195,10 @@ function DataSource() {
        return 'sqlite';
      case 'bigquery':
        return 'bigquery';
+      case 'oracle':
+        return 'oracle';
+      case 'snowflake':
+        return 'snowflake';
      default:
        return 'default';
    }
@@ -221,6 +267,12 @@ function DataSource() {
        return <SqliteDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
      case 'bigquery':
        return <BigQueryDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
+      case 'oracle':
+        return <OracleDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
+      case 'snowflake':
+        return <SnowflakeDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
+      case undefined:
+        return <Typography sx={{ my: '160px', mx: 'auto' }}>데이터 소스 타입을 먼저 선택해 주세요.</Typography>;
      default:
        return <DatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
    }
--- a/frontend-web/src/theme/theme.tsx
+++ b/frontend-web/src/theme/theme.tsx
@@ -318,6 +318,26 @@ export default createTheme({
        },
      },
    },
+    MuiAlert: {
+      styleOverrides: {
+        standardSuccess: {
+          color: '#184a00',
+          backgroundColor: '#ecf8e6',
+        },
+        standardError: {
+          color: '#a00000',
+          backgroundColor: '#ffeded',
+        },
+      },
+    },
+    MuiSnackbar: {
+      styleOverrides: {
+        root: {
+          borderRadius: '4px',
+          boxShadow: '2px 2px 4px 0 rgba(0, 0, 0, 0.15)',
+        },
+      },
+    },
    MuiCssBaseline: {
      styleOverrides: {
        'html, body, #root': {
--- a/frontend-web/src/widget/settings/FunnelChartSetting.tsx
+++ b/frontend-web/src/widget/settings/FunnelChartSetting.tsx
@@ -16,19 +16,17 @@ const FunnelChartSetting = props => {
  const [isOneColor, setIsOneColor] = useState(false);

  const setColor = () => {
+    if (option.series.color.length) {
+      return;
+    }
    let pieAggrData = [];
-    if (option['series'].field) {
-      pieAggrData = getAggregationDataForChart(
-        dataSet,
-        option['series'].name,
-        option['series'].field,
-        option['series'].aggregation,
-      );
+    if (option.series.field) {
+      pieAggrData = getAggregationDataForChart(dataSet, option.series.name, option.series.field, option.series.aggregation);
    }
    const colorArr = getColorArr(pieAggrData.length);
    console.log(colorArr);
    setOption(prevState => {
-      prevState['series'].color = colorArr;
+      prevState.series.color = colorArr;
      return { ...prevState };
    });
  };
@@ -36,7 +34,7 @@ const FunnelChartSetting = props => {
    if (!isOneColor) {
      setColor();
    }
-  }, [option['series'].field, option['series'].name]);
+  }, [option.series.field, option.series.name]);

  const handleSeriesChange = event => {
    setOption(prevState => ({
--- a/frontend-web/src/widget/settings/MixedDonutPieChartSetting.tsx
+++ b/frontend-web/src/widget/settings/MixedDonutPieChartSetting.tsx
@@ -16,6 +16,9 @@ const MixedDonutPieChartSetting = props => {
  console.log(option);

  const getColor = () => {
+    if (option.color.length) {
+      return;
+    }
    let aggrData = [];
    if (option.series.field && option.pie.field) {
      const seriesAggrData = getAggregationDataForChart(
--- a/frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx
+++ b/frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx
@@ -23,17 +23,20 @@ const MixedLinePieChartSetting = props => {

  // console.log(option);
  useEffect(() => {
+    if (option.pie.color.length) {
+      return;
+    }
    let pieAggrData = [];
-    if (option['pie'].field) {
-      pieAggrData = getAggregationDataForChart(dataSet, option['pie'].name, option['pie'].field, option['pie'].aggregation);
+    if (option.pie.field) {
+      pieAggrData = getAggregationDataForChart(dataSet, option.pie.name, option.pie.field, option.pie.aggregation);
    }
    const colorArr = getColorArr(pieAggrData.length);
    console.log(colorArr);
    setOption(prevState => {
-      prevState['pie'].color = colorArr;
+      prevState.pie.color = colorArr;
      return { ...prevState };
    });
-  }, [option['pie'].field, option['pie'].name]);
+  }, [option.pie.field, option.pie.name]);

  const handleCenterChange = event => {
    setOption(prevState => {
--- a/frontend-web/src/widget/settings/PieChartSetting.tsx
+++ b/frontend-web/src/widget/settings/PieChartSetting.tsx
@@ -14,22 +14,20 @@ const PieChartSetting = props => {
  const [colorNum, setColorNum] = useState(12);

  useEffect(() => {
+    if (option.series.color.length) {
+      return;
+    }
    let pieAggrData = [];
-    if (option['series'].field) {
-      pieAggrData = getAggregationDataForChart(
-        dataSet,
-        option['series'].name,
-        option['series'].field,
-        option['series'].aggregation,
-      );
+    if (option.series.field) {
+      pieAggrData = getAggregationDataForChart(dataSet, option.series.name, option.series.field, option.series.aggregation);
    }
    const colorArr = getColorArr(pieAggrData.length);
    console.log(colorArr);
    setOption(prevState => {
-      prevState['series'].color = colorArr;
+      prevState.series.color = colorArr;
      return { ...prevState };
    });
-  }, [option['series'].field, option['series'].name]);
+  }, [option.series.field, option.series.name]);

  const handleSeriesChange = event => {
    setOption(prevState => ({