U 优化文件分发上传进度展示

spug_web/src/pages/exec/transfer/index.js

@@ -28,10 +28,10 @@ function TransferIndex() {
   const [dir, setDir] = useState('')
   const [hosts, setHosts] = useState([])
   const [sProps, setSProps] = useState({visible: false})
+  const [percent, setPercent] = useState()
   const [token, setToken] = useState()
   const [histories, setHistories] = useState([])
 
-
   useEffect(() => {
     if (!loading) {
       http.get('/api/exec/transfer/')
@@ -39,6 +39,12 @@ function TransferIndex() {
     }
   }, [loading])
 
+  function _handleProgress(e) {
+    const data = e.loaded / e.total * 100
+    if (!percent && data === 100) return
+    setPercent(String(data).replace(/(\d+\.\d).*/, '$1'))
+  }
+
   function handleSubmit() {
     const formData = new FormData();
     if (files.length === 0) return message.error('请添加数据源')
@@ -55,7 +61,7 @@ function TransferIndex() {
     }
     formData.append('data', JSON.stringify(data))
     setLoading(true)
-    http.post('/api/exec/transfer/', formData)
+    http.post('/api/exec/transfer/', formData, {timeout: 600000, onUploadProgress: _handleProgress})
       .then(res => {
         const tmp = {}
         for (let host of hosts) {
@@ -68,7 +74,10 @@ function TransferIndex() {
         store.outputs = tmp
         setToken(res)
       })
-      .finally(() => setLoading(false))
+      .finally(() => {
+        setLoading(false)
+        setPercent()
+      })
   }
 
   function handleAddHostFile() {
@@ -145,8 +154,9 @@ function TransferIndex() {
           </Form>
         </Card>
 
-        <Button loading={loading} icon={<ThunderboltOutlined/>} type="primary"
+        <Button loading={loading} icon={<ThunderboltOutlined/>} type="primary" onClick={() => handleSubmit()}>
-                onClick={() => handleSubmit()}>开始执行</Button>
+          {percent ? `上传中 ${percent}%` : '开始执行'}
+        </Button>
       </div>
 
       <div className={style.right}>

spug_web/src/pages/ssh/FileManager.js

@@ -123,12 +123,6 @@ class FileManager extends React.Component {
     this.fetchFiles(pwd)
   };
 
-  handlePathInput = (e) => {
-    const value = e.target.value;
-    const pwd = value.substring(1).split('/')
-    this.setState({pwd})
-  };
-
   handleInputEnter = () => {
     if (this.state.inputPath === null) {
       if (this.state.pwd.length > 0) {