feat: 支持 Zookeeper 模块

2026-01-15 04:38:16 +08:00 · 2022-10-28 17:36:15 +08:00
parent 5f6df3681c
commit 941dd4fd65
22 changed files with 1064 additions and 91 deletions
--- a/km-console/packages/layout-clusters-fe/src/pages/Zookeeper/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Zookeeper/index.tsx
@@ -0,0 +1,128 @@
+import React, { useState, useEffect, memo } from 'react';
+import { useParams, useHistory, useLocation } from 'react-router-dom';
+import { ProTable, Button, Utils, AppContainer, SearchInput } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
+import API from '../../api';
+import { getZookeeperColumns, defaultPagination } from './config';
+import { tableHeaderPrefix } from '@src/constants/common';
+import ZookeeperDetail from './Detail';
+import ZookeeperCard from '@src/components/CardBar/ZookeeperCard';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
+import './index.less';
+const { request } = Utils;
+
+const ZookeeperList: React.FC = () => {
+  const [global] = AppContainer.useGlobalValue();
+  const [loading, setLoading] = useState(false);
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [data, setData] = useState([]);
+  const [searchKeywords, setSearchKeywords] = useState('');
+  const [pagination, setPagination] = useState<any>(defaultPagination);
+
+  // 请求接口获取数据
+  const genData = async ({ pageNo, pageSize, filters, sorter }: any) => {
+    if (global?.clusterInfo?.id === undefined) return;
+
+    setLoading(true);
+    const params = {
+      searchKeywords: searchKeywords.slice(0, 128),
+      pageNo,
+      pageSize,
+    };
+
+    request(API.getZookeeperList(global?.clusterInfo?.id), { method: 'POST', data: params })
+      .then((res: any) => {
+        setPagination({
+          current: res.pagination?.pageNo,
+          pageSize: res.pagination?.pageSize,
+          total: res.pagination?.total,
+        });
+        const newData =
+          res?.bizData.map((item: any) => {
+            return {
+              ...item,
+              ...item?.latestMetrics?.metrics,
+            };
+          }) || [];
+        setData(newData);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setLoading(false);
+      });
+  };
+
+  const onTableChange = (pagination: any, filters: any, sorter: any) => {
+    genData({ pageNo: pagination.current, pageSize: pagination.pageSize, filters, sorter });
+  };
+
+  useEffect(() => {
+    genData({
+      pageNo: 1,
+      pageSize: pagination.pageSize,
+    });
+  }, [searchKeywords]);
+
+  return (
+    <div key="brokerList" className="brokerList">
+      <div className="breadcrumb" style={{ marginBottom: '10px' }}>
+        <DBreadcrumb
+          breadcrumbs={[
+            { label: '多集群管理', aHref: '/' },
+            { label: global?.clusterInfo?.name, aHref: `/cluster/${global?.clusterInfo?.id}` },
+            { label: 'Zookeeper', aHref: `/cluster/${global?.clusterInfo?.id}/zookepper` },
+            { label: 'Servers', aHref: `` },
+          ]}
+        />
+      </div>
+      <div style={{ margin: '12px 0' }}>
+        <ZookeeperCard />
+      </div>
+      <div className="clustom-table-content">
+        <div className={tableHeaderPrefix}>
+          <div className={`${tableHeaderPrefix}-left`}>
+            <div
+              className={`${tableHeaderPrefix}-left-refresh`}
+              onClick={() => genData({ pageNo: pagination.current, pageSize: pagination.pageSize })}
+            >
+              <IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
+            </div>
+          </div>
+          <div className={`${tableHeaderPrefix}-right`}>
+            <SearchInput
+              onSearch={setSearchKeywords}
+              attrs={{
+                placeholder: '请输入Host',
+                style: { width: '248px', borderRiadus: '8px' },
+                maxLength: 128,
+              }}
+            />
+            <Button type="primary" onClick={() => setDetailVisible(true)}>
+              查看Zookeeper详情
+            </Button>
+          </div>
+        </div>
+        <ProTable
+          key="zookeeper-table"
+          showQueryForm={false}
+          tableProps={{
+            showHeader: false,
+            rowKey: 'zookeeper_list',
+            loading: loading,
+            columns: getZookeeperColumns(),
+            dataSource: data,
+            paginationProps: { ...pagination },
+            attrs: {
+              onChange: onTableChange,
+              scroll: { y: 'calc(100vh - 400px)' },
+              bordered: false,
+            },
+          }}
+        />
+      </div>
+      {<ZookeeperDetail visible={detailVisible} setVisible={setDetailVisible} />}
+    </div>
+  );
+};
+
+export default ZookeeperList;