refactor(datasource): update settings for TDengine and Loki

n9e · Sep 25, 2023 · 262ce18 · 262ce18
1 parent afe47cd
commit 262ce18
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 90 deletions.
diff --git a/src/pages/datasource/Datasources/Loki/Form.tsx b/src/pages/datasource/Datasources/Loki/Form.tsx
@@ -1,5 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { Form, Select } from 'antd';
+import React, { useRef } from 'react';
+import { Form } from 'antd';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import Name from '../../components/items/Name';
@@ -9,22 +9,23 @@ import SkipTLSVerify from '../../components/items/SkipTLSVerify';
 import Headers from '../../components/items/Headers';
 import Description from '../../components/items/Description';
 import Footer from '../../components/items/Footer';
-import { getServerClusters } from '../../services';
-import { CommonStateContext } from '@/App';
+import Cluster from '../../components/items/Cluster';
 
 export default function FormCpt({ data, onFinish, submitLoading }: any) {
   const { t } = useTranslation('datasourceManage');
   const [form] = Form.useForm();
-  const [clusters, setClusters] = useState<any[]>([]);
-  const { groupedDatasourceList } = useContext(CommonStateContext);
+  const clusterRef = useRef<any>();
 
-  useEffect(() => {
-    getServerClusters().then((res) => {
-      setClusters(res);
-    });
-  }, []);
   return (
-    <Form form={form} layout='vertical' onFinish={onFinish} initialValues={data} className='settings-source-form'>
+    <Form
+      form={form}
+      layout='vertical'
+      onFinish={(values) => {
+        onFinish(values, clusterRef.current);
+      }}
+      initialValues={data}
+      className='settings-source-form'
+    >
       <Name />
       <HTTP />
       <BasicAuth />
@@ -33,17 +34,7 @@ export default function FormCpt({ data, onFinish, submitLoading }: any) {
       <div className='page-title' style={{ marginTop: 0 }}>
         {t('form.other')}
       </div>
-      <Form.Item label={t('form.cluster')} name='cluster_name'>
-        <Select>
-          {_.map(clusters, (item) => {
-            return (
-              <Select.Option key={item} value={item}>
-                {item}
-              </Select.Option>
-            );
-          })}
-        </Select>
-      </Form.Item>
+      <Cluster form={form} clusterRef={clusterRef} />
       <Description />
       <div className='mt16'>
         <Footer id={data?.id} submitLoading={submitLoading} />

diff --git a/src/pages/datasource/Datasources/TDengine/Detail.tsx b/src/pages/datasource/Datasources/TDengine/Detail.tsx
@@ -55,31 +55,6 @@ export default function Index(props: Props) {
           </div>
         </>
       )}
-      <div className='page-title'>{t('form.other')}</div>
-      <div className='flash-cat-block'>
-        <Row gutter={16}>
-          <Col span={8}>{t('form.es.version')}：</Col>
-          <Col span={8}>{t('form.es.max_shard')}：</Col>
-          <Col span={8}>{t('form.es.min_interval')}：</Col>
-          <Col span={8} className='second-color'>
-            {data.settings?.version || '-'}
-          </Col>
-          <Col span={8} className='second-color'>
-            {data.settings?.max_shard || '-'}
-          </Col>
-          <Col span={8} className='second-color'>
-            {data.settings?.min_interval || '-'}
-          </Col>
-        </Row>
-        <AdvancedWrap var='VITE_IS_PRO,VITE_IS_ENT'>
-          <Row gutter={16}>
-            <Col span={24}>{t('form.cluster')}：</Col>
-            <Col span={24} className='second-color'>
-              {data?.cluster_name || '-'}
-            </Col>
-          </Row>
-        </AdvancedWrap>
-      </div>
     </div>
   );
 }
diff --git a/src/pages/datasource/Datasources/TDengine/Form.tsx b/src/pages/datasource/Datasources/TDengine/Form.tsx
@@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
-import { Form, Select, InputNumber, Tooltip, Row, Col } from 'antd';
-import { InfoCircleOutlined } from '@ant-design/icons';
+import { Form } from 'antd';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import AdvancedWrap from '@/components/AdvancedWrap';
@@ -33,46 +32,7 @@ export default function FormCpt({ data, onFinish, submitLoading }: any) {
       <BasicAuth />
       <SkipTLSVerify />
       <Headers />
-      <div className='page-title' style={{ marginTop: 0 }}>
-        {t('form.other')}
-      </div>
-      <Row gutter={8}>
-        <Col span={8}>
-          <Form.Item label={t('form.es.version')} name={['settings', 'version']} rules={[]} initialValue='7.0+'>
-            <Select
-              options={[
-                { lebel: '6.0+', value: '6.0+' },
-                { lebel: '7.0+', value: '7.0+' },
-              ]}
-            ></Select>
-          </Form.Item>
-        </Col>
-        <Col span={8}>
-          <Form.Item label={t('form.es.max_shard')} name={['settings', 'max_shard']} rules={[{ type: 'number', min: 0 }]} initialValue={5}>
-            <InputNumber style={{ width: '100%' }} controls={false} />
-          </Form.Item>
-        </Col>
-        <Col span={8}>
-          <Form.Item
-            label={
-              <>
-                <span>{t('form.es.min_interval')}</span>
-                <Tooltip title={t('form.es.min_interval_tip')}>
-                  <InfoCircleOutlined className='ml8' />
-                </Tooltip>
-              </>
-            }
-            name={['settings', 'min_interval']}
-            rules={[{ type: 'number', min: 0 }]}
-            initialValue={10}
-          >
-            <InputNumber style={{ width: '100%' }} controls={false} />
-          </Form.Item>
-        </Col>
-      </Row>
-      <AdvancedWrap var='VITE_IS_PRO,VITE_IS_ENT'>
-        <Cluster form={form} clusterRef={clusterRef} />
-      </AdvancedWrap>
+      <Cluster form={form} clusterRef={clusterRef} />
       <Description />
       <div className='mt16'>
         <Footer id={data?.id} submitLoading={submitLoading} />