A web update

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

@@ -27,18 +27,16 @@ class Index extends React.Component {
 
   componentWillUnmount() {
     if (this.socket) this.socket.close();
-    store.request = {};
+    store.request = { targets: []};
     store.outputs = {};
-    store.targets = []
   }
 
   handleDeploy = () => {
     this.setState({loading: true});
     http.post(`/api/deploy/request/${this.id}/`)
-      .then(({token, outputs, targets}) => {
+      .then(({token, outputs}) => {
         store.request.status = '2';
         store.outputs = outputs;
-        store.targets = targets;
         this.socket = new WebSocket(`ws://localhost:8000/ws/exec/${token}/`);
         this.socket.onopen = () => {
           this.socket.send('ok');
@@ -71,8 +69,8 @@ class Index extends React.Component {
   };
 
   getStatusAlias = () => {
-    if (store.targets.length !== 0) {
-      for (let item of [{id: 'local'}, ...store.targets]) {
+    if (Object.keys(store.outputs).length !== 0) {
+      for (let item of [{id: 'local'}, ...store.request.targets]) {
         if (lds.get(store.outputs, `${item.id}.status`) === 'error') {
           return <Tag color="red">发布异常</Tag>
         } else if (lds.get(store.outputs, `${item.id}.step`, -1) < 5) {
@@ -99,14 +97,18 @@ class Index extends React.Component {
           onBack={() => history.goBack()}/>
         <Collapse defaultActiveKey={1} className={styles.collapse}>
           <Collapse.Panel showArrow={false} key={1} header={
-            <Steps>
-              <Steps.Step {...this.getStatus('local', 0)} title="建立连接"/>
-              <Steps.Step {...this.getStatus('local', 1)} title="发布准备"/>
-              <Steps.Step {...this.getStatus('local', 2)} title="检出前任务"/>
-              <Steps.Step {...this.getStatus('local', 3)} title="执行检出"/>
-              <Steps.Step {...this.getStatus('local', 4)} title="检出后任务"/>
-              <Steps.Step {...this.getStatus('local', 5)} title="执行打包"/>
-            </Steps>}>
+            store.request.type === '1' ?
+              <Steps>
+                <Steps.Step {...this.getStatus('local', 0)} title="建立连接"/>
+                <Steps.Step {...this.getStatus('local', 1)} title="发布准备"/>
+                <Steps.Step {...this.getStatus('local', 2)} title="检出前任务"/>
+                <Steps.Step {...this.getStatus('local', 3)} title="执行检出"/>
+                <Steps.Step {...this.getStatus('local', 4)} title="检出后任务"/>
+                <Steps.Step {...this.getStatus('local', 5)} title="执行打包"/>
+              </Steps> : <Steps style={{width: 400}}>
+                <Steps.Step {...this.getStatus('local', 0)} title="建立连接"/>
+                <Steps.Step {...this.getStatus('local', 1)} title="发布准备"/>
+              </Steps>}>
             <pre className={styles.console}>{lds.get(store.outputs, 'local.data')}</pre>
           </Collapse.Panel>
         </Collapse>
@@ -115,7 +117,7 @@ class Index extends React.Component {
           defaultActiveKey={'0'}
           className={styles.collapse}
           expandIcon={({isActive}) => <Icon type="caret-right" style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
-          {store.targets.map((item, index) => (
+          {store.request.targets.map((item, index) => (
             <Collapse.Panel key={index} header={
               <div style={{display: 'flex', justifyContent: 'space-between'}}>
                 <b>{item.title}</b>

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

@@ -2,8 +2,9 @@ import { observable } from "mobx";
 
 class Store {
   @observable outputs = {};
-  @observable targets = [];
-  @observable request = {};
+  @observable request = {
+    targets: [],
+  };
 }
 
 export default new Store()

spug_web/src/pages/deploy/request/Table.js

@@ -8,6 +8,13 @@ import { LinkButton } from "components";
 
 @observer
 class ComTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false
+    }
+  }
+
   componentDidMount() {
     store.fetchRecords()
   }
@@ -76,10 +83,16 @@ class ComTable extends React.Component {
           return <React.Fragment>
             <Link to={`/deploy/do/${info.id}`}>发布</Link>
             <Divider type="vertical"/>
-            <LinkButton onClick={() => store.showForm(info)}>回滚</LinkButton>
+            <LinkButton
+              disabled={info.type === '2'}
+              loading={this.state.loading}
+              onClick={() => this.handleRollback(info)}>回滚</LinkButton>
           </React.Fragment>;
         case '3':
-          return <LinkButton onClick={() => store.showForm(info)}>回滚</LinkButton>;
+          return <LinkButton
+            disabled={info.type === '2'}
+            loading={this.state.loading}
+            onClick={() => this.handleRollback(info)}>回滚</LinkButton>;
         case '-1':
           return <React.Fragment>
             <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
@@ -106,12 +119,31 @@ class ComTable extends React.Component {
     }
   }];
 
-  handleDelete = (text) => {
+  handleRollback = (info) => {
+    this.setState({loading: true});
+    http.put('/api/deploy/request/', {id: info.id, action: 'check'})
+      .then(res => {
+        Modal.confirm({
+          title: '回滚确认',
+          content: `确定要回滚至 ${res['date']} 创建的名称为【${res['name']}】的发布申请版本?`,
+          onOk: () => {
+            return http.put('/api/deploy/request/', {id: info.id, action: 'do'})
+              .then(() => {
+                message.success('回滚申请创建成功');
+                store.fetchRecords()
+              })
+          }
+        })
+      })
+      .finally(() => this.setState({loading: false}))
+  };
+
+  handleDelete = (info) => {
     Modal.confirm({
       title: '删除确认',
-      content: `确定要删除【${text['name']}】?`,
+      content: `确定要删除【${info['name']}】?`,
       onOk: () => {
-        return http.delete('/api/exec/template/', {params: {id: text.id}})
+        return http.delete('/api/exec/template/', {params: {id: info.id}})
           .then(() => {
             message.success('删除成功');
             store.fetchRecords()