From e026ce09bfb12847d0f452a1f22f0117cfae1b12 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Thu, 31 Mar 2022 00:52:40 +0800
Subject: [PATCH] =?UTF-8?q?A=20=E4=B8=BB=E6=9C=BAexcel=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AF=86=E7=A0=81=E5=AD=97=E6=AE=B5=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AF=BC=E5=85=A5=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_api/apps/host/utils.py                |   4 +-
 spug_api/apps/host/views.py                |  21 ++++--
 spug_web/public/resource/主机导入模板.xlsx | Bin 8760 -> 9119 bytes
 spug_web/src/pages/host/BatchSync.js       |  42 ++----------
 spug_web/src/pages/host/Import.js          |  75 ++++++++++++---------
 spug_web/src/pages/host/Sync.js            |  46 +++++++++++++
 spug_web/src/pages/host/index.module.less  |  13 ++++
 7 files changed, 128 insertions(+), 73 deletions(-)
 create mode 100644 spug_web/src/pages/host/Sync.js

diff --git a/spug_api/apps/host/utils.py b/spug_api/apps/host/utils.py
index 463a33c..d550e95 100644
--- a/spug_api/apps/host/utils.py
+++ b/spug_api/apps/host/utils.py
@@ -248,12 +248,14 @@ def fetch_host_extend(ssh):
         return response
 
 
-def batch_sync_host(token, hosts, password):
+def batch_sync_host(token, hosts, password=None):
     private_key, public_key = AppSetting.get_ssh_key()
     threads, latest_exception, rds = [], None, get_redis_connection()
     max_workers = max(10, os.cpu_count() * 5)
     with futures.ThreadPoolExecutor(max_workers=max_workers) as executor:
         for host in hosts:
+            if hasattr(host, 'password'):
+                password = host.password
             t = executor.submit(_sync_host_extend, host, private_key, public_key, password)
             t.host = host
             threads.append(t)
diff --git a/spug_api/apps/host/views.py b/spug_api/apps/host/views.py
index db7c963..8fb6e36 100644
--- a/spug_api/apps/host/views.py
+++ b/spug_api/apps/host/views.py
@@ -129,31 +129,40 @@ class HostView(View):
 def post_import(request):
     group_id = request.POST.get('group_id')
     file = request.FILES['file']
+    hosts = []
     ws = load_workbook(file, read_only=True)['Sheet1']
-    summary = {'invalid': [], 'skip': [], 'repeat': [], 'success': []}
-    for i, row in enumerate(ws.rows):
-        if i == 0:  # 第1行是表头 略过
+    summary = {'fail': 0, 'success': 0, 'invalid': [], 'skip': [], 'repeat': []}
+    for i, row in enumerate(ws.rows, start=1):
+        if i == 1:  # 第1行是表头 略过
             continue
         if not all([row[x].value for x in range(4)]):
             summary['invalid'].append(i)
+            summary['fail'] += 1
             continue
         data = AttrDict(
             name=row[0].value,
             hostname=row[1].value,
             port=row[2].value,
             username=row[3].value,
-            desc=row[4].value
+            desc=row[5].value
         )
         if Host.objects.filter(hostname=data.hostname, port=data.port, username=data.username).exists():
             summary['skip'].append(i)
+            summary['fail'] += 1
             continue
         if Host.objects.filter(name=data.name).exists():
             summary['repeat'].append(i)
+            summary['fail'] += 1
             continue
         host = Host.objects.create(created_by=request.user, **data)
         host.groups.add(group_id)
-        summary['success'].append(i)
-    return json_response(summary)
+        summary['success'] += 1
+        host.password = row[4].value
+        hosts.append(host)
+    token = uuid.uuid4().hex
+    if hosts:
+        Thread(target=batch_sync_host, args=(token, hosts)).start()
+    return json_response({'summary': summary, 'token': token, 'hosts': {x.id: {'name': x.name} for x in hosts}})
 
 
 @auth('host.host.add')
diff --git a/spug_web/public/resource/主机导入模板.xlsx b/spug_web/public/resource/主机导入模板.xlsx
index 415e78ace78e066b6cae071e7d2bc7195193bf89..4ca6e2f69afca540360957983397dc508edd060f 100644
GIT binary patch
literal 9119
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
Vu+i}N-qj}nw4+1lJLd0q{|DeWCt&~p

literal 8760
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
P2mc)b9&CqC^x*e@r5_3s

diff --git a/spug_web/src/pages/host/BatchSync.js b/spug_web/src/pages/host/BatchSync.js
index 8332c95..8c32b81 100644
--- a/spug_web/src/pages/host/BatchSync.js
+++ b/spug_web/src/pages/host/BatchSync.js
@@ -3,42 +3,20 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { Modal, Form, Input, Button, Radio } from 'antd';
-import { LoadingOutlined } from '@ant-design/icons';
-import { http, X_TOKEN } from 'libs';
+import Sync from './Sync';
+import { http } from 'libs';
 import store from './store';
 
 export default observer(function () {
   const [loading, setLoading] = useState(false);
   const [password, setPassword] = useState();
   const [range, setRange] = useState('2');
-  const [hosts, setHosts] = useState({});
+  const [hosts, setHosts] = useState();
   const [token, setToken] = useState();
 
-  useEffect(() => {
-    if (token) {
-      let index = 0;
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      const socket = new WebSocket(`${protocol}//${window.location.host}/api/ws/host/${token}/?x-token=${X_TOKEN}`);
-      socket.onopen = () => socket.send(String(index));
-      socket.onmessage = e => {
-        if (e.data === 'pong') {
-          socket.send(String(index))
-        } else {
-          index += 1;
-          const {key, status, message} = JSON.parse(e.data);
-          hosts[key]['status'] = status;
-          hosts[key]['message'] = message;
-          setHosts({...hosts})
-        }
-      }
-      return () => socket && socket.close()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token])
-
   function handleSubmit() {
     setLoading(true);
     http.post('/api/host/valid/', {password, range})
@@ -82,15 +60,9 @@ export default observer(function () {
         </Form.Item>
       </Form>
 
-      <Form hidden={!token} labelCol={{span: 8}} wrapperCol={{span: 14}}>
-        {Object.entries(hosts).map(([key, item]) => (
-          <Form.Item key={key} label={item.name} extra={item.message}>
-            {item.status === 'ok' && <span style={{color: "#52c41a"}}>成功</span>}
-            {item.status === 'fail' && <span style={{color: "red"}}>失败</span>}
-            {item.status === undefined && <LoadingOutlined style={{fontSize: 20}}/>}
-          </Form.Item>
-        ))}
-      </Form>
+      {token && hosts ? (
+        <Sync token={token} hosts={hosts}/>
+      ) : null}
     </Modal>
   );
 })
diff --git a/spug_web/src/pages/host/Import.js b/spug_web/src/pages/host/Import.js
index d58635f..e77c3e6 100644
--- a/spug_web/src/pages/host/Import.js
+++ b/spug_web/src/pages/host/Import.js
@@ -5,8 +5,9 @@
  */
 import React, { useState } from 'react';
 import { observer } from 'mobx-react';
+import { Modal, Form, Upload, Button, Tooltip, Divider, Cascader, message } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
-import { Modal, Form, Upload, Button, Tooltip, Alert, Cascader, message } from 'antd';
+import Sync from './Sync';
 import http from 'libs/http';
 import store from './store';
 
@@ -14,6 +15,9 @@ export default observer(function () {
   const [loading, setLoading] = useState(false);
   const [fileList, setFileList] = useState([]);
   const [groupId, setGroupId] = useState([]);
+  const [summary, setSummary] = useState({});
+  const [token, setToken] = useState();
+  const [hosts, setHosts] = useState();
 
   function handleSubmit() {
     if (groupId.length === 0) return message.error('请选择要导入的分组');
@@ -23,25 +27,9 @@ export default observer(function () {
     formData.append('group_id', groupId[groupId.length - 1]);
     http.post('/api/host/import/', formData, {timeout: 120000})
       .then(res => {
-        Modal.info({
-          title: '导入结果',
-          content: <Form labelCol={{span: 7}} wrapperCol={{span: 14}}>
-            <Form.Item style={{margin: 0}} label="导入成功">{res.success.length}</Form.Item>
-            {res['skip'].length > 0 && <Form.Item style={{margin: 0, color: '#1890ff'}} label="重复数据">
-              <Tooltip title={`相关行：${res['skip'].join(', ')}`}>{res['skip'].length}</Tooltip>
-            </Form.Item>}
-            {res['invalid'].length > 0 && <Form.Item style={{margin: 0, color: '#1890ff'}} label="无效数据">
-              <Tooltip title={`相关行：${res['invalid'].join(', ')}`}>{res['invalid'].length}</Tooltip>
-            </Form.Item>}
-            {res['repeat'].length > 0 && <Form.Item style={{margin: 0, color: '#1890ff'}} label="重复主机名">
-              <Tooltip title={`相关行：${res['repeat'].join(', ')}`}>{res['repeat'].length}</Tooltip>
-            </Form.Item>}
-          </Form>,
-          onOk: () => {
-            store.fetchRecords();
-            store.importVisible = false
-          }
-        })
+        setToken(res.token)
+        setHosts(res.hosts)
+        setSummary(res.summary)
       })
       .finally(() => setLoading(false))
   }
@@ -54,22 +42,20 @@ export default observer(function () {
     }
   }
 
+  function handleClose() {
+    store.importVisible = false;
+    store.fetchRecords()
+  }
+
   return (
     <Modal
       visible
       maskClosable={false}
       title="批量导入"
       okText="导入"
-      onCancel={() => store.importVisible = false}
-      confirmLoading={loading}
-      okButtonProps={{disabled: !fileList.length}}
-      onOk={handleSubmit}>
-      <Alert
-        showIcon
-        type="info"
-        style={{width: 365, margin: '0 auto 20px'}}
-        message="导入或输入的密码仅作首次验证使用，不会存储。"/>
-      <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
+      onCancel={handleClose}
+      footer={null}>
+      <Form hidden={token} labelCol={{span: 6}} wrapperCol={{span: 14}}>
         <Form.Item label="模板下载" extra="请下载使用该模板填充数据后导入">
           <a href="/resource/主机导入模板.xlsx">主机导入模板.xlsx</a>
         </Form.Item>
@@ -81,7 +67,7 @@ export default observer(function () {
             fieldNames={{label: 'title'}}
             placeholder="请选择"/>
         </Form.Item>
-        <Form.Item required label="导入数据" extra="导入完成后可通过验证功能进行批量验证。">
+        <Form.Item required label="导入数据" extra="Spug使用密钥认证连接服务器，导入或输入的密码仅作首次验证使用，不会存储。">
           <Upload
             name="file"
             accept=".xls, .xlsx"
@@ -93,7 +79,34 @@ export default observer(function () {
             )}
           </Upload>
         </Form.Item>
+        <Form.Item wrapperCol={{span: 14, offset: 6}}>
+          <Button loading={loading} disabled={!fileList.length} type="primary" onClick={handleSubmit}>导入主机</Button>
+        </Form.Item>
       </Form>
+
+      {token && hosts ? (
+        <div>
+          <Divider>导入结果</Divider>
+          <div style={{display: 'flex', justifyContent: 'space-around'}}>
+            <div>成功：{summary.success}</div>
+            <div>失败：{summary.fail > 0 ? (
+              <Tooltip style={{color: '#1890ff'}} title={(
+                <div>
+                  {summary.skip.map(x => <div key={x}>第 {x} 行，重复的服务器信息</div>)}
+                  {summary.repeat.map(x => <div key={x}>第 {x} 行，重复的主机名称</div>)}
+                  {summary.invalid.map(x => <div key={x}>第 {x} 行，无效的数据</div>)}
+                </div>
+              )}><span style={{color: '#1890ff'}}>{summary.fail}</span></Tooltip>
+            ) : 0}</div>
+          </div>
+          {Object.keys(hosts).length > 0 && (
+            <>
+              <Divider>验证及同步</Divider>
+              <Sync token={token} hosts={hosts} style={{maxHeight: 'calc(100vh - 400px)'}}/>
+            </>
+          )}
+        </div>
+      ) : null}
     </Modal>
   );
 })
diff --git a/spug_web/src/pages/host/Sync.js b/spug_web/src/pages/host/Sync.js
new file mode 100644
index 0000000..1d7d13c
--- /dev/null
+++ b/spug_web/src/pages/host/Sync.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the AGPL-3.0 License.
+ */
+import React, { useState, useEffect } from 'react';
+import { Form } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import { X_TOKEN } from 'libs';
+import styles from './index.module.less';
+
+export default function (props) {
+  const [hosts, setHosts] = useState(props.hosts);
+
+  useEffect(() => {
+    let index = 0;
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const socket = new WebSocket(`${protocol}//${window.location.host}/api/ws/host/${props.token}/?x-token=${X_TOKEN}`);
+    socket.onopen = () => socket.send(String(index));
+    socket.onmessage = e => {
+      if (e.data === 'pong') {
+        socket.send(String(index))
+      } else {
+        index += 1;
+        const {key, status, message} = JSON.parse(e.data);
+        hosts[key]['status'] = status;
+        hosts[key]['message'] = message;
+        setHosts({...hosts})
+      }
+    }
+    return () => socket && socket.close()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <Form labelCol={{span: 8}} wrapperCol={{span: 14}} className={styles.batchSync} style={props.style}>
+      {Object.entries(hosts).map(([key, item]) => (
+        <Form.Item key={key} label={item.name} extra={item.message}>
+          {item.status === 'ok' && <span style={{color: "#52c41a"}}>成功</span>}
+          {item.status === 'fail' && <span style={{color: "red"}}>失败</span>}
+          {item.status === undefined && <LoadingOutlined/>}
+        </Form.Item>
+      ))}
+    </Form>
+  )
+}
diff --git a/spug_web/src/pages/host/index.module.less b/spug_web/src/pages/host/index.module.less
index 30d4517..27c2ccd 100644
--- a/spug_web/src/pages/host/index.module.less
+++ b/spug_web/src/pages/host/index.module.less
@@ -68,4 +68,17 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+}
+
+.batchSync {
+  max-height: calc(100vh - 300px);
+  overflow: auto;
+
+  :global(.ant-form-item) {
+    margin-bottom: 4px;
+  }
+
+  :global(.ant-form-item-extra) {
+    padding-top: 0;
+  }
 }
\ No newline at end of file