From 400bfb0530b74d192eee7074e5eef3d186d074e3 Mon Sep 17 00:00:00 2001
From: mfeng <mfeng@linux.alibaba.com>
Date: Tue, 19 Jul 2022 15:45:22 +0800
Subject: [PATCH] add: support to view the cluster list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加: 支持查看集群列表
---
 sysom_web/config/routes.js                 |   5 +
 sysom_web/src/locales/zh-CN/menu.js        |   1 +
 sysom_web/src/locales/zh-CN/pages.js       |   6 ++
 sysom_web/src/pages/host/cluster/index.jsx | 115 +++++++++++++++++++++
 sysom_web/src/pages/host/service.js        |  14 ++-
 5 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 sysom_web/src/pages/host/cluster/index.jsx

diff --git a/sysom_web/config/routes.js b/sysom_web/config/routes.js
index 7386c832..e221b208 100644
--- a/sysom_web/config/routes.js
+++ b/sysom_web/config/routes.js
@@ -37,6 +37,11 @@ export default [
         name: 'list',
         component: './host/List',
       },
+      {
+        path: '/host/cluster',
+        name: 'cluster',
+        component: './host/cluster',
+      },
       {
         path: '/host/terminal/:ip?',
         component: './host/Terminal',
diff --git a/sysom_web/src/locales/zh-CN/menu.js b/sysom_web/src/locales/zh-CN/menu.js
index 2ce9914e..00673c81 100644
--- a/sysom_web/src/locales/zh-CN/menu.js
+++ b/sysom_web/src/locales/zh-CN/menu.js
@@ -2,6 +2,7 @@ export default {
   'menu.welcome': '首页',
   'menu.host': '主机管理',
   'menu.host.list': '主机列表',
+  'menu.host.cluster': '集群列表',
   'menu.host.terminal': '主机终端',
   'menu.monitor': '监控中心',
   'menu.monitor.': '监控中心',
diff --git a/sysom_web/src/locales/zh-CN/pages.js b/sysom_web/src/locales/zh-CN/pages.js
index 7eb2bc2b..1333a93b 100644
--- a/sysom_web/src/locales/zh-CN/pages.js
+++ b/sysom_web/src/locales/zh-CN/pages.js
@@ -55,6 +55,12 @@ export default {
   'pages.hostTable.createForm.newHost': '新建主机',
   'pages.hostTable.host': '此为必填项',
   'pages.hostTable.createForm.editHost': '编辑主机',
+  'pages.clusterTable.title': '集群管理',
+  'pages.clusterTable.clusterName': '集群名称',
+  'pages.clusterTable.clusterCreatedAt': '创建时间',
+  'pages.clusterTable.clusterOption': '操作',
+  'pages.clusterTable.delete': '删除',
+  'pages.clusterTable.hostCount': '主机数量',
   'pages.IssueTable.createIssue': '新增方案',
   'pages.journal.audit.title': '日志列表',
   'pages.journal.audit.created_at': '时间',
diff --git a/sysom_web/src/pages/host/cluster/index.jsx b/sysom_web/src/pages/host/cluster/index.jsx
new file mode 100644
index 00000000..e0f23994
--- /dev/null
+++ b/sysom_web/src/pages/host/cluster/index.jsx
@@ -0,0 +1,115 @@
+import { PageContainer } from '@ant-design/pro-layout';
+import { Popconfirm, Table, Space } from 'antd';
+import { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage } from 'umi';
+import ProTable from '@ant-design/pro-table';
+import { getClusterList } from '../service';
+import Cluster from '../components/ClusterForm';
+/**
+ * 集群列表页面
+ */
+const ClusterList = () => {
+    const intl = useIntl();
+
+    const columns = [
+        {
+            title: <FormattedMessage id="pages.clusterTable.clusterName" defaultMessage="Cluster Name" />,
+            dataIndex: 'cluster_name',
+            valueType: 'textarea',
+            // hideInSearch: true,
+        },
+        {
+            title: <FormattedMessage id="pages.clusterTable.hostCount" defaultMessage="Host count" />,
+            dataIndex: 'hosts',
+            valueType: 'textarea',
+            hideInSearch: true,
+            render: (_, record) => (
+                <span>{record.hosts.length}</span>
+            )
+        },
+        {
+            title: (
+                <FormattedMessage
+                    id="pages.clusterTable.clusterCreatedAt"
+                    defaultMessage="Created time"
+                />
+            ),
+            dataIndex: 'created_at',
+            valueType: 'dateTime',
+            hideInSearch: true,
+        },
+        {
+            title: <FormattedMessage id="pages.clusterTable.clusterOption" defaultMessage="Operating" />,
+            key: 'option',
+            dataIndex: 'option',
+            valueType: 'option',
+            render: (_, record) => [
+                <span key='delete'>
+                    <Popconfirm title="是否要删除该集群（将会删除集群下的所有主机信息）?" onConfirm={async () => {
+                        await handleDeleteHost(record);
+                        actionRef.current?.reload();
+                    }}>
+                        <a><FormattedMessage id="pages.clusterTable.delete" defaultMessage="host delete" /></a>
+                    </Popconfirm>
+                </span>,
+            ],
+        },
+    ]
+
+    return (
+        <PageContainer>
+            <ProTable
+                headerTitle={intl.formatMessage({
+                    id: 'pages.clusterTable.title',
+                    defaultMessage: 'Host admin',
+                })}
+                rowKey="id"
+                search={false}
+                request={getClusterList}
+                toolBarRender={() => [
+                    <Cluster onAddClusterSuccess={() => { }} />,
+                ]}
+                columns={columns}
+                rowSelection={{
+                    selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+                    defaultSelectedRowKeys: [1],
+                }}
+                tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
+                    <Space size={24}>
+                        <span>
+                            已选 {selectedRowKeys.length} 项
+                            {/* <a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
+                                取消选择
+                            </a> */}
+                        </span>
+                    </Space>
+                )}
+                tableAlertOptionRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => {
+                    return (
+                        <Space size={16}>
+                            <a
+                                onClick={async () => {
+                                    // await onDeleteHandler(selectedRows);
+                                    // onCleanSelected();
+                                    // actionRef.current?.reload();
+                                }}
+                            >
+                                批量删除
+                            </a>
+                            <a
+                                onClick={async () => {
+                                    // await onBulkExportHostHandler(selectedRows);
+                                    // onCleanSelected();
+                                }}
+                            >
+                                导出数据
+                            </a>
+                        </Space>
+                    );
+                }}
+            />
+        </PageContainer>
+    )
+}
+
+export default ClusterList;
\ No newline at end of file
diff --git a/sysom_web/src/pages/host/service.js b/sysom_web/src/pages/host/service.js
index d822be46..c0d74ed4 100644
--- a/sysom_web/src/pages/host/service.js
+++ b/sysom_web/src/pages/host/service.js
@@ -24,6 +24,18 @@ export async function getCluster(options) {
   return results
 }
 
+/**
+ * 获取集群列表
+ * @param {*} options 
+ * @returns 
+ */
+export async function getClusterList(options) {
+  return request(CLUSTER_URL, {
+    method: 'GET',
+    ...(options || {}),
+  });
+}
+
 export async function addCluster(body, token, options) {
   return request(CLUSTER_URL, {
     method: 'POST',
@@ -50,7 +62,7 @@ export async function getHostName(options) {
     ...(options || {}),
   });
   const array = msg.data
-  console.log(msg,array);
+  console.log(msg, array);
   const results = array?.map(item => {
     return {
       label: item.hostname,
-- 
Gitee