Add standalone IoTDB frontend support

src/components/AdvancedWrap/utils.ts

@@ -38,6 +38,17 @@ export const baseCates: Cate[] = [
     alertPro: false,
     logo: '/image/logos/elasticsearch.png',
   },
+  {
+    value: 'iotdb',
+    label: 'IoTDB',
+    type: ['metric'],
+    alertRule: true,
+    dashboard: true,
+    dashboardVariable: false,
+    graphPro: false,
+    alertPro: false,
+    logo: '/image/logos/iotdb.png',
+  },
   {
     value: 'tdengine',
     label: 'TDengine',
@@ -141,6 +152,13 @@ export const baseCates: Cate[] = [
 
 export const allCates = [...baseCates, ...advancedCates];
 
+export const getCateByValue = (cate: string) => {
+  if (cate === 'iotdb') {
+    return _.find(baseCates, { value: 'iotdb' });
+  }
+  return _.find(allCates, { value: cate });
+};
+
 export const getAuthorizedDatasourceCates = (feats, isPlus, filter?: (cate: any) => boolean) => {
   let cates = baseCates;
   if (feats && isPlus) {
@@ -155,6 +173,6 @@ export const getAuthorizedDatasourceCates = (feats, isPlus, filter?: (cate: any)
 };
 
 export const getGraphProByCate = (cate: string) => {
-  const currentCate = _.find(allCates, { value: cate });
+  const currentCate = getCateByValue(cate);
   return currentCate?.graphPro;
 };

src/pages/alertRules/Form/Rule/Rule/index.tsx

@@ -6,6 +6,7 @@ import _ from 'lodash';
 import { DatasourceCateEnum } from '@/utils/constant';
 import IntervalAndDuration from '@/pages/alertRules/Form/components/IntervalAndDuration';
 
+import { AlertRule as IotDB } from '@/plugins/iotdb';
 import { AlertRule as TDengine } from '@/plugins/TDengine';
 import { AlertRule as ClickHouse } from '@/plugins/clickHouse';
 import { AlertRule as ElasticsearchSettings } from '@/plugins/elasticsearch';
@@ -36,6 +37,7 @@ export default function index() {
       </Form.Item>
       <div style={{ marginBottom: 10 }}>
         {cate === DatasourceCateEnum.prometheus && <Prometheus datasourceCate={cate} datasourceValue={datasourceValue} />}
+        {cate === DatasourceCateEnum.iotdb && <IotDB datasourceValue={datasourceValue} />}
         {cate === DatasourceCateEnum.tdengine && <TDengine datasourceValue={datasourceValue} />}
         {cate === DatasourceCateEnum.ck && <ClickHouse datasourceValue={datasourceValue} />}
         {cate === DatasourceCateEnum.loki && <Loki datasourceCate={cate} datasourceValue={datasourceValue} />}

src/pages/alertRules/Form/utils.ts

@@ -360,6 +360,27 @@ export function getDefaultValuesByCate(prod, cate) {
       ...datasourceDefaultValue,
     };
   }
+  if (cate === DatasourceCateEnum.iotdb) {
+    return {
+      prod,
+      cate,
+      rule_config: {
+        ...defaultRuleConfig,
+        queries: [
+          {
+            ref: 'A',
+            interval: 1,
+            interval_unit: 'min',
+            keys: {
+              timeKey: 'time',
+              timeFormat: '2006-01-02T15:04:05',
+            },
+          },
+        ],
+      },
+      ...datasourceDefaultValue,
+    };
+  }
   if (cate === DatasourceCateEnum.loki) {
     return {
       prod,

src/pages/dashboard/Editor/QueryEditor/QueryBuilder.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { DatasourceCateEnum } from '@/utils/constant';
 
+import { QueryBuilder as IotDB } from '@/plugins/iotdb';
 import { QueryBuilder as TDengine } from '@/plugins/TDengine';
 import { QueryBuilder as CK } from '@/plugins/clickHouse';
 import { IRawTimeRange } from '@/components/TimeRangePicker/types';
@@ -30,6 +31,9 @@ export default function QueryBuilder(props: Props) {
   if (cate === DatasourceCateEnum.elasticsearch) {
     return <Elasticsearch datasourceValue={datasourceValue} />;
   }
+  if (cate === DatasourceCateEnum.iotdb) {
+    return <IotDB datasourceValue={datasourceValue} />;
+  }
   if (cate === DatasourceCateEnum.tdengine) {
     return <TDengine datasourceValue={datasourceValue} />;
   }

src/pages/dashboard/Renderer/datasource/useQuery.tsx

@@ -20,6 +20,7 @@ import { Form } from 'antd';
 import { useDebounceFn } from 'ahooks';
 
 import { IRawTimeRange } from '@/components/TimeRangePicker';
+import { datasource as iotdbQuery } from '@/plugins/iotdb';
 import { datasource as tdengineQuery } from '@/plugins/TDengine';
 import { datasource as ckQuery } from '@/plugins/clickHouse';
 import flatten from '@/utils/flatten';
@@ -71,6 +72,7 @@ export default function useQuery(props: IProps) {
   const fetchQueryMap = {
     prometheus: prometheusQuery,
     elasticsearch: elasticsearchQuery,
+    iotdb: iotdbQuery,
     tdengine: tdengineQuery,
     ck: ckQuery,
     ...plusDatasource,

src/pages/datasource/Datasources/Detail.tsx

@@ -11,6 +11,7 @@ import Victorialogs from '@/plugins/victorialogs/Datasource/Detail';
 import Prometheus from './Prometheus/Detail';
 import ElasticSearch from './ElasticSearch/Detail';
 import Jaeger from './Jaeger/Detail';
+import IotDB from './iotdb/Detail';
 import TDengine from './TDengine/Detail';
 import Loki from './Loki/Detail';
 
@@ -30,6 +31,9 @@ export default function Form(props) {
   if (props.data.plugin_type === 'jaeger') {
     return <Jaeger {...props} />;
   }
+  if (props.data.plugin_type === DatasourceCateEnum.iotdb) {
+    return <IotDB {...props} />;
+  }
   if (props.data.plugin_type === DatasourceCateEnum.tdengine) {
     return <TDengine {...props} />;
   }

src/pages/datasource/Datasources/Form.tsx

@@ -12,6 +12,7 @@ import Victorialogs from '@/plugins/victorialogs/Datasource/Form';
 import Prometheus from './Prometheus/Form';
 import ElasticSearch from './ElasticSearch/Form';
 import Jaeger from './Jaeger/Form';
+import IotDB from './iotdb/Form';
 import TDengine from './TDengine/Form';
 import Loki from './Loki/Form';
 // @ts-ignore
@@ -31,6 +32,9 @@ export default function Form(props) {
   if (params.type === 'jaeger') {
     return <Jaeger {...props} />;
   }
+  if (params.type === DatasourceCateEnum.iotdb) {
+    return <IotDB {...props} />;
+  }
   if (params.type === DatasourceCateEnum.tdengine) {
     return <TDengine {...props} />;
   }

src/pages/datasource/Datasources/iotdb/Detail.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import _ from 'lodash';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  data: any;
+}
+
+export default function Index(props: Props) {
+  const { t } = useTranslation('datasourceManage');
+  const { data } = props;
+
+  return (
+    <div>
+      <div className='page-title'>HTTP</div>
+      <div className='flash-cat-block'>
+        <Row gutter={16}>
+          <Col span={24}>URL：</Col>
+          <Col span={24} className='second-color'>
+            {data?.http?.url}
+          </Col>
+        </Row>
+      </div>
+      <div className='page-title'>{t('form.auth')}</div>
+      <div className='flash-cat-block'>
+        <Row gutter={16}>
+          <Col span={8}>{t('form.username')}：</Col>
+          <Col span={8}>{t('form.password')}：</Col>
+          <Col span={8}>{t('form.skip_ssl_verify')}：</Col>
+          <Col span={8} className='second-color'>
+            {data?.auth?.basic_auth_user || '-'}
+          </Col>
+          <Col span={8} className='second-color'>
+            {data?.auth?.basic_auth_password ? '******' : '-'}
+          </Col>
+          <Col span={8} className='second-color'>
+            {data.http?.tls?.skip_tls_verify ? t('form.yes') : t('form.no')}
+          </Col>
+        </Row>
+      </div>
+      {!_.isEmpty(data?.http?.headers) && (
+        <>
+          <div className='page-title'>{t('form.headers')}</div>
+          <div className='flash-cat-block'>
+            <Row gutter={16}>
+              {_.map(data?.http?.headers, (val, key) => {
+                return (
+                  <Col key={key} span={24}>
+                    {key + ' : ' + val}
+                  </Col>
+                );
+              })}
+            </Row>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/pages/datasource/Datasources/iotdb/Form.tsx

@@ -0,0 +1,49 @@
+import React, { useRef } from 'react';
+import { Form, Card } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { scrollToFirstError } from '@/utils';
+import Name from '../../components/items/Name';
+import HTTP from '../../components/items/HTTP';
+import BasicAuth from '../../components/items/BasicAuth';
+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 Cluster from '../../components/items/Cluster';
+
+export default function FormCpt({ action, data, onFinish, submitLoading }: any) {
+  const { t } = useTranslation('datasourceManage');
+  const [form] = Form.useForm();
+  const clusterRef = useRef<any>();
+
+  return (
+    <Form
+      form={form}
+      layout='vertical'
+      onFinish={(values) => {
+        onFinish(values, clusterRef.current);
+      }}
+      onFinishFailed={() => {
+        scrollToFirstError();
+      }}
+      initialValues={{
+        http: {
+          url: 'http://localhost:18080',
+        },
+        ...data,
+      }}
+      className='settings-source-form'
+    >
+      <Card title={t(`${action}_title`)}>
+        <Name />
+        <HTTP placeholder='http://localhost:18080' />
+        <BasicAuth />
+        <SkipTLSVerify />
+        <Headers />
+        <Cluster form={form} clusterRef={clusterRef} />
+        <Description />
+      </Card>
+      <Footer id={data?.id} submitLoading={submitLoading} />
+    </Form>
+  );
+}

src/pages/datasource/components/TableSource/index.tsx

@@ -6,7 +6,7 @@ import { ColumnProps } from 'antd/es/table';
 import { CheckCircleFilled, MinusCircleFilled, WarningOutlined, MoreOutlined } from '@ant-design/icons';
 import { CommonStateContext } from '@/App';
 import usePagination from '@/components/usePagination';
-import { allCates } from '@/components/AdvancedWrap/utils';
+import { getCateByValue } from '@/components/AdvancedWrap/utils';
 import localeCompare from '@/pages/dashboard/Renderer/utils/localeCompare';
 
 import Rename from '../Rename';
@@ -91,7 +91,7 @@ const TableSource = (props: IPropsType) => {
       sorter: (a, b) => localeCompare(a.plugin_type, b.plugin_type),
       defaultSortOrder: 'ascend',
       render: (val) => {
-        const finded = _.find(allCates, { value: val });
+        const finded = getCateByValue(val);
         return (
           <Space>
             <img alt={val} src={finded?.logo} height={20} />

src/pages/datasource/config.tsx

@@ -2,6 +2,7 @@ import { DatasourceCateEnum } from '@/utils/constant';
 
 export const helpLinkMap = {
   [DatasourceCateEnum.prometheus]: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/datasource/prometheus/',
+  [DatasourceCateEnum.iotdb]: 'https://iotdb.apache.org/UserGuide/latest-Table/',
   [DatasourceCateEnum.tdengine]: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/datasource/tdengine/',
   jaeger: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/datasource/jaeger/',
   [DatasourceCateEnum.zabbix]: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/datasource/zabbix/',

src/pages/datasource/index.tsx

@@ -4,7 +4,7 @@ import { Input, Button, Modal } from 'antd';
 import { useDebounce } from 'ahooks';
 import { useTranslation } from 'react-i18next';
 import PageLayout from '@/components/pageLayout';
-import { allCates } from '@/components/AdvancedWrap/utils';
+import { getCateByValue } from '@/components/AdvancedWrap/utils';
 import { getDataSourcePluginList } from './services';
 import SourceCards from './components/SourceCards';
 import TableSource from './components/TableSource';
@@ -28,7 +28,7 @@ export default function index() {
     getDataSourcePluginList().then((res) => {
       setPluginList(
         _.map(res, (item) => {
-          const logoSrc = _.find(allCates, { value: item.plugin_type })?.logo;
+          const logoSrc = getCateByValue(item.plugin_type)?.logo;
           return {
             name: item.plugin_type_name,
             category: item.category,

src/pages/explorer/Explorer.tsx

@@ -31,6 +31,7 @@ import InputGroupWithFormItem from '@/components/InputGroupWithFormItem';
 import { DatasourceCateEnum, IS_PLUS } from '@/utils/constant';
 import { getDefaultDatasourceValue, setDefaultDatasourceValue } from '@/utils';
 import { CommonStateContext } from '@/App';
+import { Explorer as IotDB } from '@/plugins/iotdb';
 import { Explorer as TDengine } from '@/plugins/TDengine';
 import { Explorer as CK } from '@/plugins/clickHouse';
 import { allCates } from '@/components/AdvancedWrap/utils';
@@ -354,6 +355,8 @@ const Panel = (props: IProps) => {
                       showBuilder={false}
                     />
                   );
+                } else if (datasourceCate === DatasourceCateEnum.iotdb) {
+                  return <IotDB datasourceValue={datasourceValue} form={form} />;
                 } else if (datasourceCate === DatasourceCateEnum.tdengine) {
                   return <TDengine datasourceValue={datasourceValue} form={form} />;
                 } else if (datasourceCate === DatasourceCateEnum.loki) {

src/pages/explorer/components/Help/index.tsx

@@ -15,6 +15,7 @@ interface Props {
 
 const documentPathMap = {
   [DatasourceCateEnum.prometheus]: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/time-series/metrics/prometheus/',
+  [DatasourceCateEnum.iotdb]: 'https://iotdb.apache.org/UserGuide/latest-Table/',
   [DatasourceCateEnum.tdengine]: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/time-series/metrics/tdengine/',
   [DatasourceCateEnum.elasticsearch]: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/log-analysis/elasticserch/',
   ...(proDocumentPathMap || {}),