U 优化查看发布申请的刷新机制

spug_web/src/components/Action.js

@@ -21,14 +21,21 @@ class Action extends React.Component {
     return <Button type="link" {...props} style={{padding: 0}}/>
   }
 
+  _handle = (data, el) => {
+    const length = data.length;
+    if (canVisible(el.props.auth)) {
+      if (length !== 0) data.push(<Divider key={length} type="vertical"/>)
+      data.push(el)
+    }
+  }
+
   render() {
     const children = [];
-    this.props.children.forEach((el, index) => {
-      if (canVisible(el.props.auth)) {
-        if (children.length !== 0) children.push(<Divider key={index} type="vertical"/>);
-        children.push(el)
-      }
-    })
+    if (Array.isArray(this.props.children)) {
+      this.props.children.forEach(el => this._handle(children, el))
+    } else {
+      this._handle(children, this.props.children)
+    }
 
     return <span>
       {children}

spug_web/src/pages/deploy/do/Ext1Index.js

@@ -18,10 +18,11 @@ import lds from 'lodash';
 class Ext1Index extends React.Component {
   constructor(props) {
     super(props);
+    this.timer = null;
     this.id = props.match.params.id;
     this.log = props.match.params.log;
     this.state = {
-      fetching: false,
+      fetching: true,
       loading: false,
     }
   }
@@ -32,14 +33,13 @@ class Ext1Index extends React.Component {
 
   componentWillUnmount() {
     if (this.socket) this.socket.close();
-    if (this.interval) clearInterval(this.interval);
+    if (this.timer) clearTimeout(this.timer);
     store.request = {targets: [], host_actions: [], server_actions: []};
     store.outputs = {};
   }
 
   fetch = () => {
-    if (this.state.fetching) return ;
-    this.setState({fetching: true});
+    if (!this.timer) this.setState({fetching: true});
     http.get(`/api/deploy/request/${this.id}/`, {params: {log: this.log}})
       .then(res => {
         store.request = res;
@@ -53,12 +53,10 @@ class Ext1Index extends React.Component {
           this._parse_message(msg, outputs)
         }
         store.outputs = outputs;
-        if (this.interval) {
-          if (['3', '-3'].includes(store.request.status)) {
-            clearInterval(this.interval)
-          }
-        } else if (store.request.status === '2') {
-          this.interval = setInterval(this.fetch, 2000)
+        if (store.request.status === '2') {
+          this.timer = setTimeout(this.fetch, 2000)
+        } else {
+          this.timer = null
         }
       })
       .finally(() => this.setState({fetching: false}))

spug_web/src/pages/deploy/do/Ext2Index.js

@@ -18,10 +18,11 @@ import lds from 'lodash';
 class Ext1Index extends React.Component {
   constructor(props) {
     super(props);
+    this.timer = null;
     this.id = props.match.params.id;
     this.log = props.match.params.log;
     this.state = {
-      fetching: false,
+      fetching: true,
       loading: false,
     }
   }
@@ -32,15 +33,14 @@ class Ext1Index extends React.Component {
 
   componentWillUnmount() {
     if (this.socket) this.socket.close();
-    if (this.interval) clearInterval(this.interval);
+    if (this.timer) clearTimeout(this.timer);
     store.request = {targets: [], server_actions: [], host_actions: []};
     store.outputs = {};
   }
 
 
   fetch = () => {
-    if (this.state.fetching) return;
-    this.setState({fetching: true});
+    if (!this.timer) this.setState({fetching: true});
     http.get(`/api/deploy/request/${this.id}/`, {params: {log: this.log}})
       .then(res => {
         store.request = res;
@@ -54,12 +54,10 @@ class Ext1Index extends React.Component {
           this._parse_message(msg, outputs)
         }
         store.outputs = outputs;
-        if (this.interval) {
-          if (['3', '-3'].includes(store.request.status)) {
-            clearInterval(this.interval)
-          }
-        } else if (store.request.status === '2') {
-          this.interval = setInterval(this.fetch, 2000)
+        if (store.request.status === '2') {
+          this.timer = setTimeout(this.fetch, 2000)
+        } else {
+          this.timer = null
         }
       })
       .finally(() => this.setState({fetching: false}))