feat: Test the database connection of the ExeSQL operator #1739 (#2036)

### What problem does this PR solve?

feat: Test the database connection of the ExeSQL operator #1739
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/.umirc.ts

@@ -30,7 +30,7 @@ export default defineConfig({
   copy: ['src/conf.json'],
   proxy: {
     '/v1': {
-      target: 'http://123.60.95.134:9380/',
+      target: 'http://localhost:9380/',
       changeOrigin: true,
       ws: true,
       logger: console,

web/src/hooks/flow-hooks.ts

@@ -191,3 +191,24 @@ export const useResetFlow = () => {
 
   return { data, loading, resetFlow: mutateAsync };
 };
+
+export const useTestDbConnect = () => {
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['testDbConnect'],
+    mutationFn: async (params: any) => {
+      const ret = await flowService.testDbConnect(params);
+      if (ret?.retcode === 0) {
+        message.success(ret?.data?.data);
+      } else {
+        message.error(ret?.data?.data);
+      }
+      return ret;
+    },
+  });
+
+  return { data, loading, testDbConnect: mutateAsync };
+};

web/src/pages/flow/exesql-form/index.tsx

@@ -1,11 +1,19 @@
 import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, InputNumber, Select } from 'antd';
+import { useTestDbConnect } from '@/hooks/flow-hooks';
+import { Button, Flex, Form, Input, InputNumber, Select } from 'antd';
+import { useCallback } from 'react';
 import { ExeSQLOptions } from '../constant';
 import { IOperatorForm } from '../interface';
 
 const ExeSQLForm = ({ onValuesChange, form }: IOperatorForm) => {
   const { t } = useTranslate('flow');
+  const { testDbConnect, loading } = useTestDbConnect();
+
+  const handleTest = useCallback(async () => {
+    const ret = await form?.validateFields();
+    testDbConnect(ret);
+  }, [form, testDbConnect]);
 
   return (
     <Form
@@ -59,6 +67,11 @@ const ExeSQLForm = ({ onValuesChange, form }: IOperatorForm) => {
         <InputNumber></InputNumber>
       </Form.Item>
       <TopNItem initialValue={30} max={1000}></TopNItem>
+      <Flex justify={'end'}>
+        <Button type={'primary'} loading={loading} onClick={handleTest}>
+          Test
+        </Button>
+      </Flex>
     </Form>
   );
 };

web/src/services/flow-service.ts

@@ -10,6 +10,7 @@ const {
   removeCanvas,
   runCanvas,
   listTemplates,
+  testDbConnect,
 } = api;
 
 const methods = {
@@ -41,6 +42,10 @@ const methods = {
     url: listTemplates,
     method: 'get',
   },
+  testDbConnect: {
+    url: testDbConnect,
+    method: 'post',
+  },
 } as const;
 
 const chatService = registerServer<keyof typeof methods>(methods, request);

web/src/utils/api.ts

@@ -94,4 +94,5 @@ export default {
   setCanvas: `${api_host}/canvas/set`,
   resetCanvas: `${api_host}/canvas/reset`,
   runCanvas: `${api_host}/canvas/completion`,
+  testDbConnect: `${api_host}/canvas/test_db_connect`,
 };