From a7b17f09f3f7d66149c5047240b4cf0ba0ff6ec5 Mon Sep 17 00:00:00 2001 From: vapao Date: Thu, 28 Oct 2021 09:34:06 +0800 Subject: [PATCH] =?UTF-8?q?#=20=E5=8F=91=E5=B8=83=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E7=AA=97=E5=8F=A3=E5=A2=9E=E5=8A=A0=E7=9B=B4=E6=8E=A5=E5=BC=80?= =?UTF-8?q?web=E7=BB=88=E7=AB=AF=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/deploy/request/Ext1Console.js | 8 ++- .../src/pages/deploy/request/Ext2Console.js | 8 ++- .../pages/deploy/request/index.module.less | 5 ++ spug_web/src/pages/ssh/index.js | 52 +++++++++++++------ 4 files changed, 54 insertions(+), 19 deletions(-) diff --git a/spug_web/src/pages/deploy/request/Ext1Console.js b/spug_web/src/pages/deploy/request/Ext1Console.js index fc73a4f..94007a4 100644 --- a/spug_web/src/pages/deploy/request/Ext1Console.js +++ b/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 } from '@ant-design/icons'; +import { ShrinkOutlined, CaretRightOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons'; import OutView from './OutView'; import { http, X_TOKEN } from 'libs'; import styles from './index.module.less'; @@ -98,6 +98,11 @@ function Ext1Console(props) { terms[key] = term } + function openTerminal(e, item) { + e.stopPropagation() + window.open(`/ssh?id=${item.id}`) + } + let {local, ...hosts} = outputs; return (
@@ -173,6 +178,7 @@ function Ext1Console(props) { + openTerminal(e, item)}/>
}> handleSetTerm(term, key)}/> diff --git a/spug_web/src/pages/deploy/request/Ext2Console.js b/spug_web/src/pages/deploy/request/Ext2Console.js index 2d2869f..84e99df 100644 --- a/spug_web/src/pages/deploy/request/Ext2Console.js +++ b/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 } from '@ant-design/icons'; +import { ShrinkOutlined, CaretRightOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons'; import OutView from './OutView'; import { http, X_TOKEN } from 'libs'; import styles from './index.module.less'; @@ -106,6 +106,11 @@ function Ext2Console(props) { terms[key] = term } + function openTerminal(e, item) { + e.stopPropagation() + window.open(`/ssh?id=${item.id}`) + } + const hostOutputs = Object.values(outputs).filter(x => x.id !== 'local'); return (
@@ -180,6 +185,7 @@ function Ext2Console(props) { ))} + openTerminal(e, item)}/>
}> handleSetTerm(term, item.id)}/> diff --git a/spug_web/src/pages/deploy/request/index.module.less b/spug_web/src/pages/deploy/request/index.module.less index cb1090e..925cd16 100644 --- a/spug_web/src/pages/deploy/request/index.module.less +++ b/spug_web/src/pages/deploy/request/index.module.less @@ -86,6 +86,11 @@ margin-right: 16px; } + .codeIcon { + font-size: 22px; + color: #1890ff; + } + .icon { font-size: 22px; font-weight: 300; diff --git a/spug_web/src/pages/ssh/index.js b/spug_web/src/pages/ssh/index.js index 5f1e085..5813242 100644 --- a/spug_web/src/pages/ssh/index.js +++ b/spug_web/src/pages/ssh/index.js @@ -20,6 +20,7 @@ function WebSSH(props) { const [visible, setVisible] = useState(false); const [fetching, setFetching] = useState(true); const [rawTreeData, setRawTreeData] = useState([]); + const [rawHostList, setRawHostList] = useState([]); const [treeData, setTreeData] = useState([]); const [searchValue, setSearchValue] = useState(); const [hosts, setHosts] = useState([]); @@ -30,40 +31,57 @@ function WebSSH(props) { window.document.title = 'Spug web terminal' window.addEventListener('beforeunload', leaveTips) http.get('/api/host/group/?with_hosts=1') - .then(res => setRawTreeData(res.treeData)) + .then(res => { + const tmp = {} + setRawTreeData(res.treeData) + setTreeData(res.treeData) + const loop = (data) => { + for (let item of data) { + if (item.children) { + loop(item.children) + } else if (item.isLeaf) { + tmp[item.id] = item + } + } + } + loop(res.treeData) + setRawHostList(Object.values(tmp)) + const query = new URLSearchParams(props.location.search); + const id = query.get('id'); + if (id) { + const node = lds.find(Object.values(tmp), {id: Number(id)}) + if (node) _openNode(node) + } + }) .finally(() => setFetching(false)) return () => window.removeEventListener('beforeunload', leaveTips) + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) useEffect(() => { if (searchValue) { - const newTreeData = [] - const loop = (data) => { - for (let item of data) { - if (item.children) { - loop(item.children) - } else if (item.isLeaf && includes(item.title, searchValue)) { - newTreeData.push(item) - } - } - } - loop(rawTreeData) + const newTreeData = rawHostList.filter(x => includes(x.title, searchValue)) setTreeData(newTreeData) } else { setTreeData(rawTreeData) } - }, [rawTreeData, searchValue]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchValue]) function leaveTips(e) { e.returnValue = '确定要离开页面？' } + function _openNode(node) { + node.vId = String(new Date().getTime()) + hosts.push(node); + setHosts(lds.cloneDeep(hosts)) + setActiveId(node.vId) + } + function handleSelect(e) { if (e.nativeEvent.detail > 1 && e.node.isLeaf) { - e.node.vId = String(new Date().getTime()) - hosts.push(e.node); - setHosts(lds.cloneDeep(hosts)) - setActiveId(e.node.vId) + _openNode(e.node) } }