fix #83 add ssh status indicator

src/client/common/constants.js

@@ -3,4 +3,11 @@
  */
 export const contextMenuHeight = 28
 export const contextMenuPaddingTop = 10
+export const statusMap = {
+  default: 'default',
+  success: 'success',
+  error: 'error',
+  processing: 'processing',
+  warning: 'warning'
+}
 

src/client/components/control/index.jsx

@@ -5,10 +5,13 @@ import Btns from './btns'
 import Modal from './modal'
 import {generate} from 'shortid'
 import _ from 'lodash'
+import {statusMap} from '../../common/constants'
 import './control.styl'
 
+const defaultStatus = statusMap.processing
 const newTerm = () => ({
   id: generate(),
+  status: defaultStatus,
   title: 'new terminal'
 })
 
@@ -22,8 +25,10 @@ export default class IndexControl extends React.Component {
   }
 
   onDup = tab => {
+    delete tab.status
     this.props.addTab({
       ...tab,
+      status: defaultStatus,
       id: generate()
     })
   }
@@ -53,6 +58,7 @@ export default class IndexControl extends React.Component {
     let item = _.find(this.props.history, it => it.id === id)
     this.props.addTab({
       ...item,
+      status: defaultStatus,
       id: generate()
     })
   }
@@ -61,6 +67,7 @@ export default class IndexControl extends React.Component {
     let item = _.find(this.props.bookmarks, it => it.id === id)
     this.props.addTab({
       ...item,
+      status: defaultStatus,
       id: generate()
     })
     item.id = generate()

src/client/components/control/tab.jsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react'
-import {Icon, Tooltip, message} from 'antd'
+import {Icon, Tooltip, message, Badge} from 'antd'
 import classnames from 'classnames'
 import copy from 'json-deep-copy'
 import _ from 'lodash'
@@ -146,7 +146,7 @@ export default class Tab extends React.Component {
       onClose
     } = this.props
     let {tab} = this.state
-    let {id, isEditting} = tab
+    let {id, isEditting, status} = tab
     let active = id === currentTabId
     let cls = classnames('tab', {active})
     let title = createName(tab)
@@ -165,6 +165,7 @@ export default class Tab extends React.Component {
             onDoubleClick={() => onDup(tab)}
             onContextMenu={this.onContextMenu}
           >
+            <Badge status={status} />
             {title}
           </div>
           <Icon

src/client/components/terminal/index.jsx

@@ -4,6 +4,7 @@ import fetch from '../../common/fetch'
 import {generate} from 'shortid'
 import _ from 'lodash'
 import {Spin} from 'antd'
+import {statusMap} from '../../common/constants'
 import './terminal.styl'
 
 const {Terminal, getGlobal} = window
@@ -53,6 +54,13 @@ export default class Term extends React.Component {
 
   count = 0
 
+  setStatus = status => {
+    let id = _.get(this.props, 'tab.id')
+    this.props.editTab(id, {
+      status
+    })
+  }
+
   remoteInit = async (term) => {
     this.setState({
       loading: true
@@ -72,8 +80,11 @@ export default class Term extends React.Component {
     this.setState({
       loading: false
     })
-    if (!pid) return
-
+    if (!pid) {
+      this.setStatus(statusMap.error)
+      return
+    }
+    this.setStatus(statusMap.success)
     term.pid = pid
     this.pid = pid
     wsUrl = `ws://${host}:${port}/terminals/${pid}`
@@ -98,6 +109,7 @@ export default class Term extends React.Component {
   }
 
   onerrorSocket = err => {
+    this.setStatus(statusMap.error)
     console.log(err.stack)
   }