You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by do...@apache.org on 2021/07/13 04:38:27 UTC
[incubator-inlong] 07/10: feat(cluster): cluster manger done
This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch new-web-client
in repository https://gitbox.apache.org/repos/asf/incubator-inlong.git
commit e54f14310d3003998213eb9de0beaee69d0f56b2
Author: zakwu <12...@qq.com>
AuthorDate: Tue Jun 30 15:13:31 2020 +0800
feat(cluster): cluster manger done
---
web/src/hooks/index.ts | 9 ++-
web/src/pages/Broker/commonModal.tsx | 5 +-
web/src/pages/Cluster/index.less | 0
web/src/pages/Cluster/index.tsx | 144 +++++++++++++++++++++++++++++++++++
web/src/pages/Issue/index.tsx | 4 +-
web/src/routes/index.tsx | 4 +
6 files changed, 161 insertions(+), 5 deletions(-)
diff --git a/web/src/hooks/index.ts b/web/src/hooks/index.ts
index 6ce8168..ae1eecf 100644
--- a/web/src/hooks/index.ts
+++ b/web/src/hooks/index.ts
@@ -32,7 +32,14 @@ axios.interceptors.response.use(
return Promise.reject(data);
}
- return data || [];
+ // set object outside data into it
+ const res = Object.assign({}, data)
+ delete res.errCode;
+ delete res.errMsg;
+ res.data = Object.assign(res.data, {
+ ...res
+ })
+ return res || [];
},
function(error) {
return Promise.reject(error);
diff --git a/web/src/pages/Broker/commonModal.tsx b/web/src/pages/Broker/commonModal.tsx
index fb113d8..26480c4 100644
--- a/web/src/pages/Broker/commonModal.tsx
+++ b/web/src/pages/Broker/commonModal.tsx
@@ -224,11 +224,12 @@ export const onOpenModal = (p: BrokerModalProps) => {
m.isOk = Date.now();
})
},
- onCancel: () =>
+ onCancel: () => {
updateFunction((m: any) => {
m.visible = false;
m.isOk = null;
- }),
+ })
+ }
});
});
};
diff --git a/web/src/pages/Cluster/index.less b/web/src/pages/Cluster/index.less
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/pages/Cluster/index.tsx b/web/src/pages/Cluster/index.tsx
new file mode 100644
index 0000000..7164854
--- /dev/null
+++ b/web/src/pages/Cluster/index.tsx
@@ -0,0 +1,144 @@
+import React, { useContext } from 'react';
+import GlobalContext from '@/context/globalContext';
+import Breadcrumb from '@/components/Breadcrumb';
+import Table from '@/components/Tablex';
+import { Form, Input, Button, Spin } from 'antd';
+import './index.less';
+import { useRequest } from '@/hooks';
+import Modal, {OKProps} from "@/components/Modalx";
+import {useImmer} from "use-immer";
+
+interface ClusterResultData {
+ groupName: string;
+ groupStatus: string;
+ hostName: string;
+ index: number;
+ port: string;
+ nodeStatus: string;
+ length: number;
+}
+
+const queryClusterList = (data: ClusterResultData) => ({
+ url: '/api/op_query/admin_query_master_group_info',
+ data: data,
+});
+
+const Cluster: React.FC = () => {
+ const { breadMap } = useContext(GlobalContext);
+ const [modalParams, updateModelParams] = useImmer<any>({
+ title: '请确认操作',
+ });
+ const { data, loading, run } = useRequest<any, any>(queryClusterList, {
+ formatResult: d => {
+ return {
+ list: d.data.map((t: any) => ({
+ groupName: d.groupName,
+ groupStatus: d.groupStatus,
+ hostName: t.hostName,
+ index: t.index,
+ port: t.port,
+ nodeStatus: t.statusInfo.nodeStatus,
+ length: d.data.length
+ })),
+ };
+ }
+ });
+ const columns = [
+ {
+ title: '集群名',
+ dataIndex: 'groupName',
+ render: (t: string, r: ClusterResultData, index: number) => {
+ return {
+ children: t,
+ props: {
+ rowSpan: index === 0 ? r.length : 0
+ }
+ }
+ }
+ },
+ {
+ title: '集群状态',
+ dataIndex: 'groupStatus',
+ render: (t: string, r: ClusterResultData, index: number) => {
+ return {
+ children: t,
+ props: {
+ rowSpan: index === 0 ? r.length : 0
+ }
+ }
+ }
+ },
+ {
+ title: '节点名',
+ render: (t: string, r: ClusterResultData) => {
+ return `${r.groupName}-${r.hostName}`;
+ }
+ },
+ {
+ title: 'IP地址',
+ render: (t: string, r: ClusterResultData) => {
+ return `${r.hostName}-${r.port}`;
+ }
+ },
+ {
+ title: '节点名',
+ dataIndex: 'nodeStatus',
+ },
+ {
+ title: '操作',
+ render: (t: string, r: ClusterResultData, index: number) => {
+ return {
+ children: (<span className="options-wrapper">
+ <a onClick={() => onSwitchCluster(t, r)}>
+ 切换
+ </a>
+ </span>),
+ props: {
+ rowSpan: index === 0 ? r.length : 0
+ }
+ }
+ }
+ },
+ ];
+
+ const switchClusterQuery = useRequest<any, any>((data?: ClusterResultData) => ({
+ url: '/api/op_modify/admin_transfer_current_master',
+ data,
+ }), { manual: true });
+ const onSwitchCluster = (t: string, r: ClusterResultData) => {
+ updateModelParams(d => {
+ d = Object.assign(d, {
+ visible: true,
+ onOk: (p: OKProps) => {
+ switchClusterQuery.run({
+ confModAuthToken: p.psw
+ })
+ },
+ onCancel: () => {
+ updateModelParams((m: any) => {
+ m.visible = false;
+ })
+ }
+ })
+ })
+ };
+ return (
+ <Spin spinning={loading}>
+ <Breadcrumb breadcrumbMap={breadMap}></Breadcrumb>
+ <div className="main-container">
+ <Table
+ columns={columns}
+ dataSource={data?.list}
+ rowKey="index"
+ ></Table>
+ </div>
+ <Modal {...modalParams} >
+ <div>
+ 确认<span className="enhance">切换</span>集群?
+ </div>
+ </Modal>
+ </Spin>
+ );
+};
+
+export default Cluster;
diff --git a/web/src/pages/Issue/index.tsx b/web/src/pages/Issue/index.tsx
index bfedf64..54f5ad3 100644
--- a/web/src/pages/Issue/index.tsx
+++ b/web/src/pages/Issue/index.tsx
@@ -34,7 +34,7 @@ const columns = [
},
];
-const queryUser = (data: IssueQueryData) => ({
+const queryIssueList = (data: IssueQueryData) => ({
url: '/api/op_query/admin_query_sub_info',
data: data,
});
@@ -43,7 +43,7 @@ const Issue: React.FC = () => {
const { breadMap } = useContext(GlobalContext);
const [form] = Form.useForm();
const [formValues, updateFormValues] = useImmer<any>({});
- const { data, loading, run } = useRequest<any, IssueData>(queryUser, {});
+ const { data, loading, run } = useRequest<any, IssueData>(queryIssueList, {});
const onValuesChange = (p: any) => {
updateFormValues(d => {
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index 285711d..ee36fa2 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -26,6 +26,10 @@ const routes: RouteProps[] = [
component: () => import('@/pages/Topic'),
},
{
+ path: '/cluster',
+ component: () => import('@/pages/Cluster'),
+ },
+ {
component: () => import('@/pages/NotFound'),
},
];