Refactor/servers (#224)

* refactor: servers add and delete actions

* stash

* stash

Author: jsers

src/pages/help/servers/index.tsx

@@ -15,12 +15,13 @@
  *
  */
 import React, { useState, useEffect } from 'react';
-import { Table, Space, Button, Popover, Select } from 'antd';
+import { Table, Space, Button, Popover, Select, Modal, Form, Input, Popconfirm, AutoComplete } from 'antd';
 import Icon from '@ant-design/icons';
 import moment from 'moment';
+import _ from 'lodash';
 import { useSelector } from 'react-redux';
 import PageLayout from '@/components/pageLayout';
-import { getN9EServers, updateN9EServerCluster } from '@/services/help';
+import { getN9EServers, updateN9EServerCluster, addN9EServers, deleteN9EServers } from '@/services/help';
 import { getCommonClusters } from '@/services/common';
 import { RootState as AccountRootState, accountStoreState } from '@/store/accountInterface';
 import SystemInfoSvg from '../../../../public/image/system-info.svg';
@@ -38,23 +39,21 @@ function ClusterEditor({ id, defaultValue, clusters, onSave }) {
       destroyTooltipOnHide
       content={
         <Space>
-          <Select
+          <AutoComplete
             style={{ minWidth: 200 }}
             placeholder='选择集群'
+            options={_.map(clusters, (item) => {
+              return {
+                label: item,
+                value: item,
+              };
+            })}
             allowClear
             value={cluster}
             onChange={(val) => {
               setCluster(val);
             }}
-          >
-            {clusters.map((item) => {
-              return (
-                <Select.Option key={item} value={item}>
-                  {item}
-                </Select.Option>
-              );
-            })}
-          </Select>
+          />
           <Button
             type='primary'
             onClick={() => {
@@ -78,11 +77,13 @@ function ClusterEditor({ id, defaultValue, clusters, onSave }) {
   );
 }
 
-export default function Migrate() {
+export default function Servers() {
   const { profile } = useSelector<AccountRootState, accountStoreState>((state) => state.account);
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
   const [clusters, setClusters] = useState([]);
+  const [form] = Form.useForm();
+  const [visible, setVisible] = useState(false);
   const fetchData = () => {
     getN9EServers()
       .then((res) => {
@@ -100,8 +101,6 @@ export default function Migrate() {
     fetchData();
   }, []);
 
-  console.log('profile', profile);
-
   return (
     <PageLayout
       title={
@@ -114,54 +113,129 @@ export default function Migrate() {
       <div>
         <div style={{ padding: 20 }}>
           {profile.admin ? (
-            <Table
-              rowKey='id'
-              loading={loading}
-              dataSource={data}
-              pagination={false}
-              columns={[
-                {
-                  title: '引擎实例',
-                  dataIndex: 'instance',
-                  key: 'instance',
-                },
-                {
-                  title: '告警集群',
-                  dataIndex: 'cluster',
-                  key: 'cluster',
-                },
-                {
-                  title: '上次心跳时间',
-                  dataIndex: 'clock',
-                  key: 'clock',
-                  render: (text) => {
-                    return moment.unix(text).format('YYYY-MM-DD HH:mm:ss');
+            <div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Button
+                  onClick={() => {
+                    setVisible(true);
+                  }}
+                >
+                  新增
+                </Button>
+              </div>
+              <Table
+                rowKey='id'
+                loading={loading}
+                dataSource={data}
+                pagination={false}
+                columns={[
+                  {
+                    title: '引擎实例',
+                    dataIndex: 'instance',
+                    key: 'instance',
                   },
-                },
-                {
-                  title: '操作',
-                  render: (record) => {
-                    return (
-                      <Space>
-                        <ClusterEditor
-                          id={record.id}
-                          defaultValue={record.cluster || undefined}
-                          clusters={clusters}
-                          onSave={() => {
-                            fetchData();
-                          }}
-                        />
-                      </Space>
-                    );
+                  {
+                    title: '告警集群',
+                    dataIndex: 'cluster',
+                    key: 'cluster',
                   },
-                },
-              ]}
-            />
+                  {
+                    title: '上次心跳时间',
+                    dataIndex: 'clock',
+                    key: 'clock',
+                    render: (text) => {
+                      return moment.unix(text).format('YYYY-MM-DD HH:mm:ss');
+                    },
+                  },
+                  {
+                    title: '操作',
+                    width: 150,
+                    render: (record) => {
+                      return (
+                        <Space>
+                          <ClusterEditor
+                            id={record.id}
+                            defaultValue={record.cluster || undefined}
+                            clusters={clusters}
+                            onSave={() => {
+                              fetchData();
+                            }}
+                          />
+                          <Popconfirm
+                            title='确认删除？'
+                            onConfirm={() => {
+                              deleteN9EServers([record.id]).then(() => {
+                                fetchData();
+                              });
+                            }}
+                          >
+                            <a style={{ color: '#f53146' }}>删除</a>
+                          </Popconfirm>
+                        </Space>
+                      );
+                    },
+                  },
+                ]}
+              />
+            </div>
           ) : (
             <div>您没有权限查看</div>
           )}
         </div>
       </div>
+      <Modal
+        title='新增'
+        visible={visible}
+        onCancel={() => {
+          setVisible(false);
+        }}
+        footer={[
+          <Button
+            key='cancel'
+            onClick={() => {
+              setVisible(false);
+            }}
+          >
+            取消
+          </Button>,
+          <Button
+            key='ok'
+            type='primary'
+            onClick={() => {
+              form.validateFields().then((values) => {
+                addN9EServers(values).then(() => {
+                  setVisible(false);
+                  fetchData();
+                });
+              });
+            }}
+          >
+            提交
+          </Button>,
+        ]}
+      >
+        <Form form={form}>
+          <Form.Item label='引擎实例' name='instance' rules={[{ required: true, message: '请填写引擎实例' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item label='告警集群' name='cluster' rules={[{ required: true, message: '请选择告警集群' }]}>
+            <AutoComplete
+              options={_.map(clusters, (item) => {
+                return {
+                  label: item,
+                  value: item,
+                };
+              })}
+              allowClear
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
     </PageLayout>
   );
 }

src/services/help.ts

@@ -23,6 +23,22 @@ export const getN9EServers = function () {
   });
 };
 
+export const addN9EServers = function (data) {
+  return request('/api/n9e/servers', {
+    method: RequestMethod.Post,
+    data,
+  });
+};
+
+export const deleteN9EServers = function (ids) {
+  return request('/api/n9e/servers', {
+    method: RequestMethod.Delete,
+    data: {
+      ids,
+    },
+  });
+};
+
 export const updateN9EServerCluster = function (
   id: number,
   data: {