upgrade permissions

spug_web/src/pages/host/Detail.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { observer } from 'mobx-react';
 import { Drawer, Descriptions, List, Button, Input, Select, DatePicker, Tag, message } from 'antd';
 import { EditOutlined, SaveOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
+import { AuthButton } from 'components';
 import { http } from 'libs';
 import store from './store';
 import lds from 'lodash';
@@ -136,7 +137,7 @@ export default observer(function () {
           <Button key="1" type="link" loading={fetching} icon={<SyncOutlined/>} onClick={handleFetch}>同步</Button>,
           <Button key="2" type="link" loading={loading} icon={<SaveOutlined/>} onClick={handleSubmit}>保存</Button>
         ]) : (
-          <Button type="link" icon={<EditOutlined/>} onClick={() => setEdit(true)}>编辑</Button>
+          <AuthButton auth="host.host.edit" type="link" icon={<EditOutlined/>} onClick={() => setEdit(true)}>编辑</AuthButton>
         )}
         title={<span style={{fontWeight: 500}}>扩展信息</span>}>
         <Descriptions.Item label="实例ID">

spug_web/src/pages/host/Group.js

@@ -12,9 +12,10 @@ import {
   EditOutlined,
   DeleteOutlined,
   CopyOutlined,
-  ScissorOutlined
+  ScissorOutlined,
+  LoadingOutlined
 } from '@ant-design/icons';
-import { LoadingOutlined } from '@ant-design/icons';
+import { AuthFragment } from 'components';
 import { hasPermission, http } from 'libs';
 import store from './store';
 import lds from 'lodash';
@@ -108,7 +109,7 @@ export default observer(function () {
   }
 
   function handleRightClick(v) {
-    if (hasPermission('host.group.edit')) {
+    if (hasPermission('admin')) {
       store.group = v.node;
       setVisible(true)
     }
@@ -147,12 +148,14 @@ export default observer(function () {
     <Card
       title="分组列表"
       loading={store.grpFetching}
-      extra={<Switch
-        disabled={!hasPermission('host.group.edit')}
-        checked={draggable}
-        onChange={setDraggable}
-        checkedChildren="排版"
-        unCheckedChildren="浏览"/>}>
+      extra={(
+        <AuthFragment auth="admin">
+          <Switch
+            checked={draggable}
+            onChange={setDraggable}
+            checkedChildren="排版"
+            unCheckedChildren="浏览"/>
+        </AuthFragment>)}>
       <Dropdown
         overlay={menus}
         visible={visible}

spug_web/src/pages/host/index.js

@@ -28,7 +28,7 @@ export default observer(function () {
 
   return (
     <AuthDiv auth="host.host.view">
-      <Breadcrumb extra={<AuthButton auth="host.host.console" type="primary" icon={<CodeOutlined/>} onClick={openTerminal}>Web 终端</AuthButton>}>
+      <Breadcrumb extra={<AuthButton auth="host.console.view" type="primary" icon={<CodeOutlined/>} onClick={openTerminal}>Web 终端</AuthButton>}>
         <Breadcrumb.Item>首页</Breadcrumb.Item>
         <Breadcrumb.Item>主机管理</Breadcrumb.Item>
       </Breadcrumb>

spug_web/src/pages/ssh/FileManager.js

@@ -13,6 +13,7 @@ import {
   HomeOutlined,
   UploadOutlined
 } from '@ant-design/icons';
+import { AuthButton, Action } from 'components';
 import { http, uniqueId, X_TOKEN } from 'libs';
 import lds from 'lodash';
 import styles from './index.module.less'
@@ -62,18 +63,18 @@ class FileManager extends React.Component {
     title: '属性',
     key: 'attr',
     render: info => `${info.kind}${info.code}`,
-    width: 120
+    width: 110
   }, {
     title: '操作',
-    width: 80,
+    width: 100,
     align: 'right',
     key: 'action',
     render: info => info.kind === '-' ? (
-      <React.Fragment>
-        <DownloadOutlined style={{color: '#1890ff'}} onClick={() => this.handleDownload(info.name)}/>
-        <Divider type="vertical"/>
-        <DeleteOutlined style={{color: 'red'}} onClick={() => this.handleDelete(info.name)}/>
-      </React.Fragment>
+      <Action>
+        <Action.Button icon={<DownloadOutlined/>} onClick={() => this.handleDownload(info.name)}/>
+        <Action.Button auth="host.console.del" danger icon={<DeleteOutlined/>}
+                       onClick={() => this.handleDelete(info.name)}/>
+      </Action>
     ) : null
   }];
 
@@ -210,8 +211,13 @@ class FileManager extends React.Component {
               checkedChildren="开启"
               unCheckedChildren="关闭"
               onChange={v => this.setState({showDot: v})}/>
-            <Button style={{marginLeft: 10}} size="small" type="primary" icon={<UploadOutlined/>}
-                    onClick={this.handleUpload}>上传文件</Button>
+            <AuthButton
+              auth="host.console.upload"
+              style={{marginLeft: 10}}
+              size="small"
+              type="primary"
+              icon={<UploadOutlined/>}
+              onClick={this.handleUpload}>上传文件</AuthButton>
           </div>
         </div>
         {this.state.uploading && (

spug_web/src/pages/ssh/index.js

@@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 import { Tabs, Tree, Button, Spin } from 'antd';
 import { FolderOutlined, FolderOpenOutlined, CloudServerOutlined } from '@ant-design/icons';
-import { NotFound } from 'components';
+import { NotFound, AuthButton } from 'components';
 import Terminal from './Terminal';
 import FileManager from './FileManager';
 import { http, hasPermission } from 'libs';
@@ -103,11 +103,13 @@ function WebSSH(props) {
           type="editable-card"
           onTabClick={key => setActiveId(key)}
           onEdit={handleRemove}
-          tabBarExtraContent={<Button
+          tabBarExtraContent={<AuthButton
+            auth="host.console.list"
             type="primary"
+            disabled={!activeId}
             style={{marginRight: 5}}
             onClick={() => setVisible(true)}
-            icon={<FolderOpenOutlined/>}>文件管理器</Button>}>
+            icon={<FolderOpenOutlined/>}>文件管理器</AuthButton>}>
           {hosts.map(item => (
             <Tabs.TabPane key={item.id} tab={item.title}>
               <Terminal id={item.id} activeId={activeId}/>