# 批量执行窗口增加直接打开web终端功能

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

@@ -6,7 +6,7 @@
 import React, { useEffect, useState } from 'react';
 import { observer, useLocalStore } from 'mobx-react';
 import { Card, Progress, Modal, Collapse, Steps, Skeleton } from 'antd';
-import { ShrinkOutlined, CaretRightOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons';
+import { ShrinkOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons';
 import OutView from './OutView';
 import { http, X_TOKEN } from 'libs';
 import styles from './index.module.less';
@@ -161,10 +161,7 @@ function Ext1Console(props) {
             </Collapse>
           )}
 
-          <Collapse
+          <Collapse defaultActiveKey="0" className={styles.collapse}>
-            defaultActiveKey="0"
-            className={styles.collapse}
-            expandIcon={({isActive}) => <CaretRightOutlined style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
             {Object.entries(hosts).map(([key, item], index) => (
               <Collapse.Panel
                 key={index}

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

@@ -6,7 +6,7 @@
 import React, { useEffect, useState } from 'react';
 import { observer, useLocalStore } from 'mobx-react';
 import { Card, Progress, Modal, Collapse, Steps, Skeleton } from 'antd';
-import { ShrinkOutlined, CaretRightOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons';
+import { ShrinkOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons';
 import OutView from './OutView';
 import { http, X_TOKEN } from 'libs';
 import styles from './index.module.less';
@@ -171,8 +171,7 @@ function Ext2Console(props) {
               accordion
               defaultActiveKey="0"
               className={styles.collapse}
-              style={{marginTop: sActions.length > 0 ? 24 : 0}}
+              style={{marginTop: sActions.length > 0 ? 24 : 0}}>
-              expandIcon={({isActive}) => <CaretRightOutlined style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
               {hostOutputs.map((item, index) => (
                 <Collapse.Panel
                   key={index}

spug_web/src/pages/exec/task/ExecConsole.js

@@ -6,12 +6,12 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import {
-  CaretRightOutlined,
   CheckCircleTwoTone,
   LoadingOutlined,
   WarningTwoTone,
   FullscreenOutlined,
-  FullscreenExitOutlined
+  FullscreenExitOutlined,
+  CodeOutlined
 } from '@ant-design/icons';
 import { Modal, Collapse, Tooltip } from 'antd';
 import OutView from './OutView';
@@ -82,27 +82,26 @@ class ExecConsole extends React.Component {
     }
   }
 
-  genExtra = (status, key) => {
+  StatusExtra = (props) => (
-    if (status === -2) {
+    <div style={{display: 'flex', alignItems: 'center'}}>
-      return <LoadingOutlined style={{fontSize: 20, color: '#108ee9'}}/>;
+      {props.status === -2 ? (
-    } else if (status === 0) {
+        <LoadingOutlined style={{fontSize: 22, color: '#108ee9'}}/>
-      return (
+      ) : (
-        <div style={{display: 'flex', alignItems: 'center'}}>
+        <>
-          <pre className={styles.header2}>{this.lastOutputs[key]}</pre>
+          <pre className={styles.header2}>{this.lastOutputs[props.id]}</pre>
-          <CheckCircleTwoTone style={{fontSize: 20}} twoToneColor="#52c41a"/>
+          {props.status === 0 ? (
-        </div>
+            <CheckCircleTwoTone style={{fontSize: 22}} twoToneColor="#52c41a"/>
-      )
+          ) : (
-    } else {
+            <Tooltip title={`退出状态码：${props.status}`}>
-      return (
+              <WarningTwoTone style={{fontSize: 22}} twoToneColor="red"/>
-        <div style={{display: 'flex', alignItems: 'center'}}>
+            </Tooltip>
-          <pre className={styles.header2}>{this.lastOutputs[key]}</pre>
+          )}
-          <Tooltip title={`退出状态码：${status}`}>
+        </>
-            <WarningTwoTone style={{fontSize: 20}} twoToneColor="red"/>
+      )}
-          </Tooltip>
+      <CodeOutlined style={{fontSize: 22, color: '#1890ff', marginLeft: 16}}
-        </div>
+                    onClick={e => this.openTerminal(e, props.id)}/>
-      )
+    </div>
-    }
+  )
-  };
 
   handleUpdate = (data) => {
     this.setState(data, () => {
@@ -111,6 +110,11 @@ class ExecConsole extends React.Component {
     })
   }
 
+  openTerminal = (e, key) => {
+    e.stopPropagation()
+    window.open(`/ssh?id=${key}`)
+  }
+
   render() {
     const {isFullscreen, activeKey} = this.state;
     return (
@@ -131,13 +135,12 @@ class ExecConsole extends React.Component {
           accordion
           className={styles.collapse}
           activeKey={activeKey}
-          onChange={key => this.handleUpdate({activeKey: key})}
+          onChange={key => this.handleUpdate({activeKey: key})}>
-          expandIcon={({isActive}) => <CaretRightOutlined style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
           {Object.entries(store.outputs).map(([key, item], index) => (
             <Collapse.Panel
               key={key}
-              header={<div className={styles.header1}>{item['title']}</div>}
+              header={<div className={styles.header1}>{item.title}</div>}
-              extra={this.genExtra(item.status, key)}>
+              extra={<this.StatusExtra status={item.status} id={key}/>}>
               <OutView
                 isFullscreen={isFullscreen}
                 getOutput={() => this.outputs[key]}