From 5aeac11c6e23ecce03ec4110a72a3f5f0dce6770 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Fri, 9 Apr 2021 09:17:15 +0800
Subject: [PATCH] fix issue

---
 spug_web/src/App.js                       |   2 +-
 spug_web/src/components/Breadcrumb.js     |   5 +-
 spug_web/src/components/index.module.less |   2 +
 spug_web/src/pages/host/Detail.js         |   2 +-
 spug_web/src/pages/host/Table.js          | 110 ++++++++++------------
 spug_web/src/pages/host/index.js          |   9 +-
 6 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/spug_web/src/App.js b/spug_web/src/App.js
index 729ed28..867f379 100644
--- a/spug_web/src/App.js
+++ b/spug_web/src/App.js
@@ -14,7 +14,7 @@ class App extends Component {
     return (
       <Switch>
         <Route path="/" exact component={Login} />
-        <Route path="/ssh/:id" exact component={WebSSH} />
+        <Route path="/ssh" exact component={WebSSH} />
         <Route component={Layout} />
       </Switch>
     );
diff --git a/spug_web/src/components/Breadcrumb.js b/spug_web/src/components/Breadcrumb.js
index 6f14328..710da5a 100644
--- a/spug_web/src/components/Breadcrumb.js
+++ b/spug_web/src/components/Breadcrumb.js
@@ -27,7 +27,10 @@ export default class extends React.Component {
         <Breadcrumb>
           {this.props.children}
         </Breadcrumb>
-        <div className={styles.title}>{title}</div>
+        <div className={styles.title}>
+          <span>{title}</span>
+          {this.props.extra}
+        </div>
       </div>
     )
   }
diff --git a/spug_web/src/components/index.module.less b/spug_web/src/components/index.module.less
index 61a6b37..d6d72bf 100644
--- a/spug_web/src/components/index.module.less
+++ b/spug_web/src/components/index.module.less
@@ -141,6 +141,8 @@
   border-bottom: 1px solid #e8e8e8;
 
   .title {
+    display: flex;
+    justify-content: space-between;
     margin-bottom: 9px;
     font-size: 20px;
     line-height: 50px;
diff --git a/spug_web/src/pages/host/Detail.js b/spug_web/src/pages/host/Detail.js
index 3540bea..86bc3e0 100644
--- a/spug_web/src/pages/host/Detail.js
+++ b/spug_web/src/pages/host/Detail.js
@@ -22,7 +22,7 @@ export default observer(function () {
         <Descriptions.Item label="所属分组">
           <List >
             {group_ids.map(g_id => (
-              <List.Item style={{padding: '6px 0'}}>{store.groups[g_id]}</List.Item>
+              <List.Item key={g_id} style={{padding: '6px 0'}}>{store.groups[g_id]}</List.Item>
             ))}
           </List>
         </Descriptions.Item>
diff --git a/spug_web/src/pages/host/Table.js b/spug_web/src/pages/host/Table.js
index df1180c..3fae7f7 100644
--- a/spug_web/src/pages/host/Table.js
+++ b/spug_web/src/pages/host/Table.js
@@ -3,7 +3,7 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
 import { PlusOutlined, ImportOutlined } from '@ant-design/icons';
@@ -11,17 +11,12 @@ import { Action, TableCard, AuthButton } from 'components';
 import { http, hasPermission } from 'libs';
 import store from './store';
 
-@observer
-class ComTable extends React.Component {
-  componentDidMount() {
+function ComTable() {
+  useEffect(() => {
     store.fetchRecords()
-  }
+  }, [])
 
-  handleConsole = (info) => {
-    window.open(`/ssh/${info.id}`)
-  };
-
-  handleDelete = (text) => {
+  function handleDelete(text) {
     Modal.confirm({
       title: '删除确认',
       content: `确定要删除【${text['name']}】?`,
@@ -33,55 +28,52 @@ class ComTable extends React.Component {
           })
       }
     })
-  };
-
-  render() {
-    return (
-      <TableCard
-        rowKey="id"
-        title={<TableCard.Search keys={['f_name/主机名称', 'f_host/连接地址']} onChange={(k, v) => store[k] = v}/>}
-        loading={store.isFetching}
-        dataSource={store.dataSource}
-        onReload={store.fetchRecords}
-        actions={[
-          <AuthButton
-            auth="host.host.add"
-            type="primary"
-            icon={<PlusOutlined/>}
-            onClick={() => store.showForm()}>新建</AuthButton>,
-          <AuthButton
-            auth="host.host.add"
-            type="primary"
-            icon={<ImportOutlined/>}
-            onClick={() => store.importVisible = true}>批量导入</AuthButton>
-        ]}
-        pagination={{
-          showSizeChanger: true,
-          showLessItems: true,
-          hideOnSinglePage: true,
-          showTotal: total => `共 ${total} 条`,
-          pageSizeOptions: ['10', '20', '50', '100']
-        }}>
-        <Table.Column
-          showSorterTooltip={false}
-          title="主机名称"
-          render={info => <Action.Button onClick={() => store.showDetail(info)}>{info.name}</Action.Button>}
-          sorter={(a, b) => a.name.localeCompare(b.name)}/>
-        <Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
-        <Table.Column hide width={100} title="端口" dataIndex="port"/>
-        <Table.Column title="备注信息" dataIndex="desc"/>
-        {hasPermission('host.host.edit|host.host.del|host.host.console') && (
-          <Table.Column width={200} title="操作" render={info => (
-            <Action>
-              <Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-              <Action.Button auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-              <Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
-            </Action>
-          )}/>
-        )}
-      </TableCard>
-    )
   }
+
+  return (
+    <TableCard
+      rowKey="id"
+      title={<TableCard.Search keys={['f_name/主机名称', 'f_host/连接地址']} onChange={(k, v) => store[k] = v}/>}
+      loading={store.isFetching}
+      dataSource={store.dataSource}
+      onReload={store.fetchRecords}
+      actions={[
+        <AuthButton
+          auth="host.host.add"
+          type="primary"
+          icon={<PlusOutlined/>}
+          onClick={() => store.showForm()}>新建</AuthButton>,
+        <AuthButton
+          auth="host.host.add"
+          type="primary"
+          icon={<ImportOutlined/>}
+          onClick={() => store.importVisible = true}>批量导入</AuthButton>
+      ]}
+      pagination={{
+        showSizeChanger: true,
+        showLessItems: true,
+        hideOnSinglePage: true,
+        showTotal: total => `共 ${total} 条`,
+        pageSizeOptions: ['10', '20', '50', '100']
+      }}>
+      <Table.Column
+        showSorterTooltip={false}
+        title="主机名称"
+        render={info => <Action.Button onClick={() => store.showDetail(info)}>{info.name}</Action.Button>}
+        sorter={(a, b) => a.name.localeCompare(b.name)}/>
+      <Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
+      <Table.Column hide width={100} title="端口" dataIndex="port"/>
+      <Table.Column title="备注信息" dataIndex="desc"/>
+      {hasPermission('host.host.edit|host.host.del|host.host.console') && (
+        <Table.Column width={160} title="操作" render={info => (
+          <Action>
+            <Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+            <Action.Button auth="host.host.del" onClick={() => handleDelete(info)}>删除</Action.Button>
+          </Action>
+        )}/>
+      )}
+    </TableCard>
+  )
 }
 
-export default ComTable
+export default observer(ComTable)
diff --git a/spug_web/src/pages/host/index.js b/spug_web/src/pages/host/index.js
index 1d52b35..65beb94 100644
--- a/spug_web/src/pages/host/index.js
+++ b/spug_web/src/pages/host/index.js
@@ -5,7 +5,8 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Row, Col } from 'antd';
+import { Row, Col, Button } from 'antd';
+import { RobotOutlined } from '@ant-design/icons';
 import { AuthDiv, Breadcrumb } from 'components';
 import Group from './Group';
 import ComTable from './Table';
@@ -16,9 +17,13 @@ import Selector from './Selector';
 import store from './store';
 
 export default observer(function () {
+  function openTerminal() {
+    window.open('/ssh')
+  }
+
   return (
     <AuthDiv auth="host.host.view">
-      <Breadcrumb>
+      <Breadcrumb extra={<Button type="primary" icon={<RobotOutlined/>} onClick={openTerminal}>Web 终端</Button>}>
         <Breadcrumb.Item>首页</Breadcrumb.Item>
         <Breadcrumb.Item>主机管理</Breadcrumb.Item>
       </Breadcrumb>