You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by le...@apache.org on 2022/08/12 07:16:27 UTC
[inlong] branch master updated: [INLONG-5520][Dashboard] Move cluster config to metas (#5521)
This is an automated email from the ASF dual-hosted git repository.
leezng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong.git
The following commit(s) were added to refs/heads/master by this push:
new 3dc9c7266 [INLONG-5520][Dashboard] Move cluster config to metas (#5521)
3dc9c7266 is described below
commit 3dc9c7266ac46a210f8cbdfa06385c5e2f53cf1f
Author: Daniel <le...@apache.org>
AuthorDate: Fri Aug 12 15:16:23 2022 +0800
[INLONG-5520][Dashboard] Move cluster config to metas (#5521)
---
.../config => metas/clusters}/DataProxy.tsx | 2 +-
.../Clusters/config => metas/clusters}/Pulsar.tsx | 2 +-
.../Clusters/config => metas/clusters}/TubeMQ.tsx | 2 +-
.../config => metas/clusters/common}/types.ts | 0
.../Clusters/config => metas/clusters}/index.tsx | 2 +-
.../src/pages/ClusterTags/ClusterList.tsx | 2 +-
.../src/pages/Clusters/CreateModal.tsx | 2 +-
inlong-dashboard/src/pages/Clusters/index.tsx | 2 +-
.../src/pages/DataSources/CreateModal.tsx | 115 ------------
.../src/pages/DataSources/DbConfig.tsx | 162 -----------------
inlong-dashboard/src/pages/DataSources/index.tsx | 201 ---------------------
inlong-dashboard/src/pages/DataSources/status.tsx | 61 -------
12 files changed, 7 insertions(+), 546 deletions(-)
diff --git a/inlong-dashboard/src/pages/Clusters/config/DataProxy.tsx b/inlong-dashboard/src/metas/clusters/DataProxy.tsx
similarity index 93%
rename from inlong-dashboard/src/pages/Clusters/config/DataProxy.tsx
rename to inlong-dashboard/src/metas/clusters/DataProxy.tsx
index 85c4a857c..51076bf9d 100644
--- a/inlong-dashboard/src/pages/Clusters/config/DataProxy.tsx
+++ b/inlong-dashboard/src/metas/clusters/DataProxy.tsx
@@ -17,6 +17,6 @@
* under the License.
*/
-import type { ClsConfigItemType } from './types';
+import type { ClsConfigItemType } from './common/types';
export const DataProxy: ClsConfigItemType[] = [];
diff --git a/inlong-dashboard/src/pages/Clusters/config/Pulsar.tsx b/inlong-dashboard/src/metas/clusters/Pulsar.tsx
similarity index 96%
rename from inlong-dashboard/src/pages/Clusters/config/Pulsar.tsx
rename to inlong-dashboard/src/metas/clusters/Pulsar.tsx
index bf4b67d89..bf9947143 100644
--- a/inlong-dashboard/src/pages/Clusters/config/Pulsar.tsx
+++ b/inlong-dashboard/src/metas/clusters/Pulsar.tsx
@@ -18,7 +18,7 @@
*/
import i18n from '@/i18n';
-import type { ClsConfigItemType } from './types';
+import type { ClsConfigItemType } from './common/types';
export const Pulsar: ClsConfigItemType[] = [
{
diff --git a/inlong-dashboard/src/pages/Clusters/config/TubeMQ.tsx b/inlong-dashboard/src/metas/clusters/TubeMQ.tsx
similarity index 96%
rename from inlong-dashboard/src/pages/Clusters/config/TubeMQ.tsx
rename to inlong-dashboard/src/metas/clusters/TubeMQ.tsx
index 4e3c96c2d..7761c2dc3 100644
--- a/inlong-dashboard/src/pages/Clusters/config/TubeMQ.tsx
+++ b/inlong-dashboard/src/metas/clusters/TubeMQ.tsx
@@ -18,7 +18,7 @@
*/
import i18n from '@/i18n';
-import type { ClsConfigItemType } from './types';
+import type { ClsConfigItemType } from './common/types';
export const TubeMQ: ClsConfigItemType[] = [
{
diff --git a/inlong-dashboard/src/pages/Clusters/config/types.ts b/inlong-dashboard/src/metas/clusters/common/types.ts
similarity index 100%
rename from inlong-dashboard/src/pages/Clusters/config/types.ts
rename to inlong-dashboard/src/metas/clusters/common/types.ts
diff --git a/inlong-dashboard/src/pages/Clusters/config/index.tsx b/inlong-dashboard/src/metas/clusters/index.tsx
similarity index 97%
rename from inlong-dashboard/src/pages/Clusters/config/index.tsx
rename to inlong-dashboard/src/metas/clusters/index.tsx
index 10afeb41f..4c8bc7912 100644
--- a/inlong-dashboard/src/pages/Clusters/config/index.tsx
+++ b/inlong-dashboard/src/metas/clusters/index.tsx
@@ -20,7 +20,7 @@
import React from 'react';
import i18n from '@/i18n';
import StaffSelect from '@/components/StaffSelect';
-import type { ClsConfigItemType, ClsTableItemType } from './types';
+import type { ClsConfigItemType, ClsTableItemType } from './common/types';
import { DataProxy } from './DataProxy';
import { Pulsar } from './Pulsar';
import { TubeMQ } from './TubeMQ';
diff --git a/inlong-dashboard/src/pages/ClusterTags/ClusterList.tsx b/inlong-dashboard/src/pages/ClusterTags/ClusterList.tsx
index 46c0b63f4..0567a304b 100644
--- a/inlong-dashboard/src/pages/ClusterTags/ClusterList.tsx
+++ b/inlong-dashboard/src/pages/ClusterTags/ClusterList.tsx
@@ -23,7 +23,7 @@ import i18n from '@/i18n';
import HighTable from '@/components/HighTable';
import { defaultSize } from '@/configs/pagination';
import { useRequest } from '@/hooks';
-import { Clusters } from '@/pages/Clusters/config';
+import { Clusters } from '@/metas/clusters';
import ClusterBindModal from './ClusterBindModal';
import request from '@/utils/request';
diff --git a/inlong-dashboard/src/pages/Clusters/CreateModal.tsx b/inlong-dashboard/src/pages/Clusters/CreateModal.tsx
index 3b2793509..403f8e884 100644
--- a/inlong-dashboard/src/pages/Clusters/CreateModal.tsx
+++ b/inlong-dashboard/src/pages/Clusters/CreateModal.tsx
@@ -23,7 +23,7 @@ import { ModalProps } from 'antd/es/modal';
import FormGenerator, { useForm } from '@/components/FormGenerator';
import { useRequest, useUpdateEffect } from '@/hooks';
import request from '@/utils/request';
-import { Clusters } from './config';
+import { Clusters } from '@/metas/clusters';
import i18n from '@/i18n';
export interface Props extends ModalProps {
diff --git a/inlong-dashboard/src/pages/Clusters/index.tsx b/inlong-dashboard/src/pages/Clusters/index.tsx
index 17c29de4a..9fd9e9c94 100644
--- a/inlong-dashboard/src/pages/Clusters/index.tsx
+++ b/inlong-dashboard/src/pages/Clusters/index.tsx
@@ -25,7 +25,7 @@ import HighTable from '@/components/HighTable';
import { PageContainer } from '@/components/PageContainer';
import { defaultSize } from '@/configs/pagination';
import { useRequest } from '@/hooks';
-import { Clusters } from './config';
+import { Clusters } from '@/metas/clusters';
import CreateModal from './CreateModal';
import request from '@/utils/request';
import { timestampFormat } from '@/utils';
diff --git a/inlong-dashboard/src/pages/DataSources/CreateModal.tsx b/inlong-dashboard/src/pages/DataSources/CreateModal.tsx
deleted file mode 100644
index 02abb9dd4..000000000
--- a/inlong-dashboard/src/pages/DataSources/CreateModal.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { useMemo } from 'react';
-import { Modal, message } from 'antd';
-import { ModalProps } from 'antd/es/modal';
-import { State } from '@/models';
-import FormGenerator, { useForm } from '@/components/FormGenerator';
-import { useRequest, useUpdateEffect, useSelector } from '@/hooks';
-import { useTranslation } from 'react-i18next';
-import request from '@/utils/request';
-// import { getCreateFormContent as getFileCreateFormContent } from './FileConfig';
-import { getCreateFormContent as getDbCreateFormContent } from './DbConfig';
-
-export interface Props extends ModalProps {
- // Type
- type: 'DB' | 'FILE';
- // Required when edit
- id?: string;
-}
-
-const Comp: React.FC<Props> = ({ type, id, ...modalProps }) => {
- const { t } = useTranslation();
-
- const [form] = useForm();
-
- const { userName } = useSelector<State, State>(state => state);
-
- const onOk = async e => {
- const values = await form.validateFields();
- const isUpdate = id;
- const submitData = {
- ...values,
- serverType: type,
- };
- if (isUpdate) {
- submitData.id = id;
- }
- if (type === 'DB') {
- submitData.inCharges = values.inCharges.join(',');
- }
- await request({
- url: `/commonserver/db/${isUpdate ? 'update' : 'create'}`,
- method: 'POST',
- data: submitData,
- });
- await modalProps?.onOk(values);
- message.success(t('basic.OperatingSuccess'));
- };
-
- useUpdateEffect(() => {
- if (modalProps.visible) {
- // open
- form.resetFields();
- if (id) {
- getData(id);
- } else {
- userName && type === 'DB' && form.setFieldsValue({ inCharges: [userName] });
- }
- }
- }, [modalProps.visible]);
-
- const { data, run: getData } = useRequest(
- id => ({
- url: `/commonserver/db/getById/${id}`,
- params: {
- serverType: type,
- },
- }),
- {
- manual: true,
- onSuccess: result => {
- if (type === 'DB') {
- result.inCharges = result.inCharges.split(',');
- }
- form.setFieldsValue(result);
- },
- },
- );
-
- const getCreateFormContent = useMemo(() => {
- return {
- DB: getDbCreateFormContent,
- // FILE: getFileCreateFormContent,
- }[type];
- }, [type]);
-
- return (
- <Modal
- {...modalProps}
- title={`${type} ${t('pages.Datasources.CreateModal.Server')}`}
- onOk={onOk}
- >
- <FormGenerator content={getCreateFormContent(data)} form={form} useMaxWidth />
- </Modal>
- );
-};
-
-export default Comp;
diff --git a/inlong-dashboard/src/pages/DataSources/DbConfig.tsx b/inlong-dashboard/src/pages/DataSources/DbConfig.tsx
deleted file mode 100644
index a764ea08b..000000000
--- a/inlong-dashboard/src/pages/DataSources/DbConfig.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-import i18n from '@/i18n';
-import { ColumnsType } from 'antd/es/table';
-import StaffSelect from '@/components/StaffSelect';
-import rulesPattern from '@/utils/pattern';
-
-export const getCreateFormContent = (defaultValues = {}) => {
- const array = [
- {
- type: 'input',
- label: i18n.t('pages.Datasources.DbConfig.ServerName'),
- name: 'connectionName',
- rules: [{ required: true }],
- props: {
- maxLength: 128,
- },
- },
- {
- type: 'select',
- label: i18n.t('pages.Datasources.DbConfig.Type'),
- name: 'dbType',
- rules: [{ required: true }],
- props: {
- options: [
- {
- label: 'MySQL',
- value: 'MySQL',
- },
- {
- label: 'PG',
- value: 'PG',
- },
- ],
- },
- },
- {
- type: 'input',
- label: 'DB IP',
- name: 'dbServerIp',
- rules: [
- { required: true },
- {
- pattern: rulesPattern.ip,
- message: i18n.t('pages.Datasources.DbConfig.IpPattern'),
- },
- ],
- },
- {
- type: 'inputnumber',
- label: i18n.t('pages.Datasources.DbConfig.Port'),
- name: 'port',
- rules: [
- { required: true },
- {
- pattern: rulesPattern.port,
- message: i18n.t('pages.Datasources.DbConfig.PortPattern'),
- },
- ],
- },
- {
- type: 'input',
- label: i18n.t('pages.Datasources.DbConfig.BackupDbIp'),
- name: 'backupDbServerIp',
- rules: [
- {
- pattern: rulesPattern.ip,
- message: i18n.t('pages.Datasources.DbConfig.IpPattern'),
- },
- ],
- },
- {
- type: 'inputnumber',
- label: i18n.t('pages.Datasources.DbConfig.BackupDbPort'),
- name: 'backupDbPort',
- rules: [
- {
- pattern: rulesPattern.port,
- message: i18n.t('pages.Datasources.DbConfig.PortPattern'),
- },
- ],
- },
- {
- type: 'input',
- label: i18n.t('pages.Datasources.DbConfig.DbName'),
- name: 'dbName',
- },
- {
- type: 'input',
- label: i18n.t('pages.Datasources.DbConfig.Username'),
- name: 'username',
- rules: [{ required: true }],
- },
- {
- type: 'input',
- label: i18n.t('pages.Datasources.DbConfig.Password'),
- name: 'password',
- rules: [{ required: true }],
- },
- {
- type: <StaffSelect mode="multiple" currentUserClosable={false} />,
- label: i18n.t('pages.Datasources.DbConfig.InCharges'),
- name: 'inCharges',
- rules: [{ required: true }],
- },
- {
- type: 'input',
- label: i18n.t('pages.Datasources.DbConfig.DbDescription'),
- name: 'dbDescription',
- props: {
- maxLength: 256,
- },
- },
- ];
-
- return array;
-};
-
-export const tableColumns: ColumnsType = [
- {
- title: i18n.t('pages.Datasources.DbConfig.ServerName'),
- dataIndex: 'connectionName',
- },
- {
- title: i18n.t('pages.Datasources.DbConfig.Type'),
- dataIndex: 'dbType',
- },
- {
- title: 'DB IP',
- dataIndex: 'dbServerIp',
- },
- {
- title: i18n.t('pages.Datasources.DbConfig.Port'),
- dataIndex: 'port',
- },
- {
- title: i18n.t('pages.Datasources.DbConfig.DbName'),
- dataIndex: 'dbName',
- },
- {
- title: i18n.t('pages.Datasources.DbConfig.DbDescription'),
- dataIndex: 'dbDescription',
- },
-];
diff --git a/inlong-dashboard/src/pages/DataSources/index.tsx b/inlong-dashboard/src/pages/DataSources/index.tsx
deleted file mode 100644
index 386b6aee2..000000000
--- a/inlong-dashboard/src/pages/DataSources/index.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { useState } from 'react';
-import { Button, Modal, message } from 'antd';
-import HighTable from '@/components/HighTable';
-import { PageContainer } from '@/components/PageContainer';
-import { defaultSize } from '@/configs/pagination';
-import { useRequest } from '@/hooks';
-import i18n from '@/i18n';
-// import { tableColumns as dataSourcesFileColumns } from './FileConfig';
-import { tableColumns as dataSourcesDbColumns } from './DbConfig';
-import DataSourcesCreateModal from './CreateModal';
-import request from '@/utils/request';
-import { timestampFormat } from '@/utils';
-import { genStatusTag } from './status';
-
-const getFilterFormContent = defaultValues => [
- {
- type: 'inputsearch',
- name: 'keyword',
- },
- {
- type: 'radiobutton',
- name: 'type',
- label: i18n.t('pages.Datasources.Type'),
- initialValue: defaultValues.type,
- props: {
- buttonStyle: 'solid',
- options: [
- // {
- // label: 'FILE',
- // value: 'FILE',
- // },
- {
- label: 'DB',
- value: 'DB',
- },
- ],
- },
- },
-];
-
-const Comp: React.FC = () => {
- const [options, setOptions] = useState({
- // keyword: '',
- pageSize: defaultSize,
- pageNum: 1,
- type: 'DB',
- });
-
- const [createModal, setCreateModal] = useState<Record<string, unknown>>({
- visible: false,
- });
-
- const { data, loading, run: getList } = useRequest(
- {
- url: `/commonserver/db/list`,
- method: 'POST',
- params: {
- ...options,
- serverType: options.type,
- type: undefined,
- },
- },
- {
- refreshDeps: [options],
- },
- );
-
- const onEdit = ({ id }) => {
- setCreateModal({ visible: true, id });
- };
-
- const onDelete = ({ id }) => {
- Modal.confirm({
- title: i18n.t('basic.DeleteConfirm'),
- onOk: async () => {
- await request({
- url: `/commonserver/db/deleteById/${id}`,
- method: 'DELETE',
- params: {
- serverType: options.type,
- },
- });
- await getList();
- message.success(i18n.t('basic.DeleteSuccess'));
- },
- });
- };
-
- const onChange = ({ current: pageNum, pageSize }) => {
- setOptions(prev => ({
- ...prev,
- pageNum,
- pageSize,
- }));
- };
-
- const onFilter = allValues => {
- setOptions(prev => ({
- ...prev,
- ...allValues,
- pageNum: 1,
- }));
- };
-
- const pagination = {
- pageSize: +options.pageSize,
- current: +options.pageNum,
- total: data?.total,
- };
-
- const columns = (options.type === 'FILE' ? [] : dataSourcesDbColumns).concat([
- {
- title: i18n.t('pages.Datasources.LastModifier'),
- dataIndex: 'modifier',
- width: 150,
- render: (text, record: any) => (
- <>
- <div>{text}</div>
- <div>{record.modifyTime && timestampFormat(record.modifyTime)}</div>
- </>
- ),
- },
- {
- title: i18n.t('basic.Status'),
- dataIndex: 'status',
- width: 80,
- render: text => genStatusTag(text),
- },
- {
- title: i18n.t('basic.Operating'),
- dataIndex: 'action',
- width: 120,
- render: (text, record) => (
- <>
- <Button type="link" onClick={() => onEdit(record)}>
- {i18n.t('basic.Edit')}
- </Button>
- <Button type="link" onClick={() => onDelete(record)}>
- {i18n.t('basic.Delete')}
- </Button>
- </>
- ),
- } as any,
- ]);
-
- return (
- <PageContainer useDefaultBreadcrumb={false}>
- <HighTable
- filterForm={{
- content: getFilterFormContent(options),
- onFilter,
- }}
- suffix={
- <Button type="primary" onClick={() => setCreateModal({ visible: true })}>
- {i18n.t('pages.Datasources.Create')}
- </Button>
- }
- table={{
- columns,
- rowKey: 'id',
- dataSource: data?.list,
- pagination,
- loading,
- onChange,
- }}
- />
-
- <DataSourcesCreateModal
- {...createModal}
- type={options.type as any}
- visible={createModal.visible as boolean}
- onOk={async values => {
- await getList();
- setCreateModal({ visible: false });
- }}
- onCancel={() => setCreateModal({ visible: false })}
- />
- </PageContainer>
- );
-};
-
-export default Comp;
diff --git a/inlong-dashboard/src/pages/DataSources/status.tsx b/inlong-dashboard/src/pages/DataSources/status.tsx
deleted file mode 100644
index a454b44c4..000000000
--- a/inlong-dashboard/src/pages/DataSources/status.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-import i18n from '@/i18n';
-import StatusTag, { StatusTagProps } from '@/components/StatusTag';
-
-type StatusProp = {
- label: string;
- value: string | number;
- type: StatusTagProps['type'];
- icon?: StatusTagProps['icon'];
-};
-
-export const statusList: StatusProp[] = [
- {
- label: i18n.t('pages.Datasources.status.Success'),
- value: 10,
- type: 'success',
- },
- {
- label: i18n.t('pages.Datasources.status.Error'),
- value: 20,
- type: 'error',
- },
- {
- label: i18n.t('pages.Datasources.status.Deleted'),
- value: 40,
- type: 'error',
- },
-];
-
-export const statusMap = statusList.reduce(
- (acc, cur) => ({
- ...acc,
- [cur.value]: cur,
- }),
- {},
-);
-
-export const genStatusTag = (value: StatusProp['value']) => {
- const item = statusMap[value] || {};
-
- return <StatusTag type={item.type || 'default'} title={item.label || value} icon={item.icon} />;
-};