manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔨 批量执行.

Browse Source
This commit is contained in:
lijiahangmax
2024-03-21 01:32:25 +08:00
parent eb9e184d79
commit 2a144cfa57
12 changed files with 165 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/about/change-log.md
View File

@@ -2,14 +2,16 @@
## v1.0.2
`2024-03-` `release`
`2024-03-22` `release`
* 🐞 修复 SFTP 加载失败后一直 loading
* 🐞 修复 主机终端搜索框报错
* 🐞 修复 SSH 配置未启用还可以连接
* 🐞 修复 主机配置保存后无法修改状态
* 🐞 修复 添加快捷命令时编辑器无代码提示
* 🔨 修改 菜单路由命名逻辑修改
* 🔨 优化 前端组件命名规范化
* 🔨 优化 前端 emit 命名规范化
* 🌈 新增 双击终端会话 Tab 快速复制
* 🌈 新增 批量执行命令
* 🌈 新增 命令执行日志

2
orion-ops-ui/src/api/exec/exec-log.ts
View File

@@ -77,7 +77,7 @@ export function getExecLogPage(request: ExecLogQueryRequest) {
* 查询执行记录
*/
export function getExecLog(id: number) {
return axios.get<ExecLogQueryResponse>('/asset/exec-log/query', { params: { id } });
return axios.get<ExecLogQueryResponse>('/asset/exec-log/get', { params: { id } });
}
/**

58
orion-ops-ui/src/components/exec/log/panel-modal/index.vue
View File

@@ -3,17 +3,21 @@
title-align="start"
title="执行日志"
width="94%"
:top="80"
:body-style="{ padding: '0' }"
:top="40"
:body-style="{ padding: '0', height: 'calc(100vh - 140px)', overflow: 'hidden' }"
:align-center="false"
:draggable="true"
:mask-closable="false"
:unmount-on-close="true"
:footer="false"
@close="handleClose">
<a-spin class="modal-body" :loading="loading">
<!-- 日志面板 -->
<exec-log-panel ref="log" :visible-back="false" />
<a-spin v-if="visible"
class="modal-body"
:loading="loading">
<div class="panel-wrapper">
<!-- 日志面板 -->
<exec-log-panel ref="log" :visible-back="false" />
</div>
</a-spin>
</a-modal>
</template>
@@ -36,7 +40,7 @@
const log = ref();
// TODO 测试卸载
// TODO 卸载
// 打开
const open = async (id: number) => {
@@ -46,16 +50,18 @@
// 获取执行日志
const { data } = await getExecLog(id);
// 打开日志
nextTick(() => {
await nextTick(() => {
log.value.open(data);
});
} catch (e) {
} finally {
setVisible(false);
} finally {
setLoading(false);
}
};
defineExpose({ open });
// 关闭回调
const handleClose = () => {
handleClear();
@@ -65,6 +71,7 @@
const handleClear = () => {
setLoading(false);
setVisible(false);
console.log('clear');
};
</script>
@@ -72,6 +79,39 @@
<style lang="less" scoped>
.modal-body {
width: 100%;
height: calc(100vh - 140px);
height: 100%;
position: relative;
padding: 0 12px 12px 12px;
}
.panel-wrapper {
width: 100%;
height: 100%;
position: relative;
}
:deep(.exec-host-container) {
padding: 0;
.host-header {
height: 38px;
margin: 0;
h3 {
height: 100%;
display: flex;
align-items: center;
}
}
.exec-host-items {
width: 100%;
height: calc(100% - 38px);
}
}
:deep(.log-header) {
padding: 0;
}
</style>

27
orion-ops-ui/src/components/exec/log/panel/exec-host.vue
View File

@@ -2,7 +2,7 @@
<!-- 执行主机 -->
<div class="container">
<!-- 表头 -->
<div class="panel-header">
<div class="host-header">
<h3>执行主机</h3>
<!-- 操作 -->
<a-button v-if="visibleBack"
@@ -12,7 +12,7 @@
</a-button>
</div>
<!-- 主机列表 -->
<div class="exec-host-container">
<div class="exec-host-items">
<div v-for="item in hosts"
:key="item.id"
class="exec-host-item"
@@ -57,8 +57,27 @@
</script>
<style lang="less" scoped>
.exec-host-container {
margin-top: 4px;
.host-header {
width: 100%;
height: 28px;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: flex-start;
h3, > span {
margin: 0;
overflow: hidden;
white-space: nowrap;
}
h3 {
color: var(--color-text-1);
}
}
.exec-host-items {
position: absolute;
width: calc(100% - 32px);
height: calc(100% - 68px);

49
orion-ops-ui/src/components/exec/log/panel/index.vue
View File

@@ -1,17 +1,18 @@
<template>
<div class="log-panel-container" v-if="command">
<div class="log-panel-container" v-if="execLog && appender">
<!-- 执行主机 -->
<exec-host class="exec-host-container"
:visibleBack="visibleBack"
:current="currentHostExecId"
:hosts="command.hosts"
:hosts="execLog.hosts"
@selected="selectedHost"
@back="emits('back')" />
<!-- 日志容器 -->
<log-view ref="logView"
<log-view ref="logViewRef"
class="log-view-container"
:current="currentHostExecId"
:command="command" />
:hosts="execLog.hosts"
:appender="appender" />
</div>
</template>
@@ -23,11 +24,13 @@
<script lang="ts" setup>
import type { ExecLogQueryResponse } from '@/api/exec/exec-log';
import type { ILogAppender } from './const';
import { onUnmounted, ref, nextTick } from 'vue';
import { getExecLogStatus } from '@/api/exec/exec-log';
import { execHostStatus, execStatus } from './const';
import ExecHost from './exec-host.vue';
import LogView from './log-view.vue';
import LogAppender from '@/components/exec/log/panel/log-appender';
const props = defineProps<{
visibleBack: boolean
@@ -35,15 +38,17 @@
const emits = defineEmits(['back']);
const logView = ref();
const logViewRef = ref();
const currentHostExecId = ref();
const statusIntervalId = ref();
const finishIntervalId = ref();
const command = ref<ExecLogQueryResponse>();
const execLog = ref<ExecLogQueryResponse>();
const appender = ref<ILogAppender>();
// 打开
const open = (record: ExecLogQueryResponse) => {
command.value = record;
appender.value = new LogAppender({ execId: record.id });
execLog.value = record;
currentHostExecId.value = record.hosts[0].id;
// 定时查询执行状态
if (record.status === execStatus.WAITING ||
@@ -55,24 +60,24 @@
}
// 打开日志
nextTick(() => {
logView.value?.open();
logViewRef.value?.open();
});
};
// 加载状态
const fetchTaskStatus = async () => {
if (!command.value) {
if (!execLog.value) {
return;
}
// 加载状态
const { data: { logList, hostList } } = await getExecLogStatus([command.value.id]);
const { data: { logList, hostList } } = await getExecLogStatus([execLog.value.id]);
if (logList.length) {
command.value.status = logList[0].status;
command.value.startTime = logList[0].startTime;
command.value.finishTime = logList[0].finishTime;
execLog.value.status = logList[0].status;
execLog.value.startTime = logList[0].startTime;
execLog.value.finishTime = logList[0].finishTime;
}
// 设置主机状态
for (let host of command.value.hosts) {
for (let host of execLog.value.hosts) {
const hostStatus = hostList.find(s => s.id === host.id);
if (hostStatus) {
host.status = hostStatus.status;
@@ -85,15 +90,15 @@
}
}
// 已完成跳过
if (command.value.status === execStatus.COMPLETED ||
command.value.status === execStatus.FAILED) {
if (execLog.value.status === execStatus.COMPLETED ||
execLog.value.status === execStatus.FAILED) {
closeClient();
}
};
// 设置完成时间
const setTaskFinishTime = () => {
const hosts = command.value?.hosts;
const hosts = execLog.value?.hosts;
if (!hosts) {
return;
}
@@ -118,18 +123,20 @@
// 关闭连接
const closeClient = () => {
// 关闭日志
logView.value?.closeClient();
// 清理轮询
clearAllInterval();
// 关闭 client
appender.value?.closeClient();
};
// 清理并且关闭
const closeAll = () => {
// 关闭日志
logView.value?.closeAll();
// TODO
console.log('closeAll');
// 清理轮询
clearAllInterval();
// 关闭 appender
appender.value?.close();
};
// 清理轮询

12
orion-ops-ui/src/components/exec/log/panel/log-appender.ts
View File

@@ -235,10 +235,10 @@ export default class LogAppender implements ILogAppender {
closeView(): void {
// 关闭 terminal
Object.values(this.appenderRel).forEach(s => {
s.terminal?.dispose();
if (s.addons) {
Object.values(s.addons).forEach(s => s.dispose());
}
s.terminal?.dispose();
});
// 移除自适应事件
removeEventListen(window, 'resize', this.fitAllFn);
@@ -246,8 +246,14 @@ export default class LogAppender implements ILogAppender {
// 关闭
close(): void {
this.closeClient();
this.closeView();
try {
this.closeClient();
this.closeView();
} catch (ex) {
// TODO
console.log('errr');
console.error(ex);
}
}
// 处理消息

2
orion-ops-ui/src/components/exec/log/panel/log-item.vue
View File

@@ -211,7 +211,7 @@
</script>
<style lang="less" scoped>
@header-height: 40px;
@header-height: 38px;
.log-header {
width: 100%;

51
orion-ops-ui/src/components/exec/log/panel/log-view.vue
View File

@@ -1,14 +1,12 @@
<template>
<div class="container">
<template v-if="appender">
<log-item class="log-item"
v-show="current === host.id"
v-for="host in command.hosts"
:key="host.id"
:ref="addRef as unknown as VNodeRef"
:host="host"
:appender="appender as ILogAppender" />
</template>
<log-item class="log-item"
v-show="current === host.id"
v-for="host in hosts"
:key="host.id"
:ref="addRef as unknown as VNodeRef"
:host="host"
:appender="appender" />
</div>
</template>
@@ -20,25 +18,24 @@
<script lang="ts" setup>
import type { VNodeRef } from 'vue';
import type { ExecLogQueryResponse } from '@/api/exec/exec-log';
import type { ExecHostLogQueryResponse } from '@/api/exec/exec-log';
import type { LogDomRef, ILogAppender } from './const';
import { nextTick, onBeforeMount, ref, watch } from 'vue';
import LogAppender from './log-appender';
import { nextTick, ref, watch } from 'vue';
import LogItem from './log-item.vue';
const props = defineProps<{
current: number;
command: ExecLogQueryResponse;
hosts: Array<ExecHostLogQueryResponse>;
appender: ILogAppender;
}>();
const logRefs = ref<Array<LogDomRef>>([]);
const appender = ref<ILogAppender>();
// 切换标签
watch(() => props.current, (val) => {
nextTick(() => {
setTimeout(() => {
appender.value?.setCurrent(val);
props.appender?.setCurrent(val);
}, 50);
});
});
@@ -46,26 +43,16 @@
// 打开
const open = () => {
nextTick(async () => {
if (appender.value) {
// TODO
console.log(props.appender);
if (props.appender) {
// 初始化
await appender.value.init(logRefs.value);
await props.appender.init(logRefs.value);
}
});
};
// 关闭客户端
const closeClient = () => {
appender.value?.closeClient();
};
// 关闭全部
const closeAll = () => {
appender.value?.close();
logRefs.value = [];
appender.value = undefined;
};
defineExpose({ open, closeClient, closeAll });
defineExpose({ open });
// 添加 ref
const addRef = (ref: any) => {
@@ -81,10 +68,6 @@
});
};
onBeforeMount(() => {
appender.value = new LogAppender({ execId: props.command.id });
});
</script>
<style lang="less" scoped>

24
orion-ops-ui/src/views/exec/exec-command/components/exec-panel.vue
View File

@@ -112,6 +112,7 @@
const defaultForm = (): ExecCommandRequest => {
return {
command: '',
timeout: 0,
};
};
@@ -220,8 +221,8 @@
@command-gap: @form-width + @history-width + 32px;
.exec-container {
width: calc(100% - 32px);
height: calc(100% - 32px);
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
position: absolute;
@@ -265,4 +266,23 @@
}
}
:deep(.panel-header) {
width: 100%;
height: 28px;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
align-items: flex-start;
h3, > span {
margin: 0;
overflow: hidden;
white-space: nowrap;
}
h3 {
color: var(--color-text-1);
}
}
</style>

33
orion-ops-ui/src/views/exec/exec-command/index.vue
View File

@@ -1,13 +1,15 @@
<template>
<div class="layout-container full">
<!-- 执行面板 -->
<exec-panel v-show="!logVisible"
@submit="openLog" />
<div v-show="!logVisible" class="panel-wrapper">
<exec-panel @submit="openLog" />
</div>
<!-- 执行日志 -->
<exec-log-panel v-if="logVisible"
ref="log"
:visibleBack="true"
@back="setLogVisible(false)" />
<div v-if="logVisible" class="panel-wrapper">
<exec-log-panel ref="log"
:visibleBack="true"
@back="setLogVisible(false)" />
</div>
</div>
</template>
@@ -48,23 +50,10 @@
<style lang="less" scoped>
:deep(.panel-header) {
.panel-wrapper {
width: 100%;
height: 28px;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
align-items: flex-start;
h3, > span {
margin: 0;
overflow: hidden;
white-space: nowrap;
}
h3 {
color: var(--color-text-1);
}
height: 100%;
position: relative;
}
</style>

2
orion-ops-ui/src/views/exec/exec-log/components/exec-log-table.vue
View File

@@ -163,7 +163,7 @@
<a-button v-permission="['asset:exec:exec-command']"
type="text"
size="mini"
@click="() => emits('viewLog', record.id, $event.ctrlKey)">
@click="(e) => emits('viewLog', record.id, e.ctrlKey)">
日志
</a-button>
<!-- 中断 -->

3
orion-ops-ui/src/views/exec/exec-template/index.vue
View File

@@ -31,9 +31,6 @@
import ExecTemplateExecDrawer from './components/exec-template-exec-drawer.vue';
import AuthorizedHostModal from '@/components/asset/host/authorized-host-modal/index.vue';
// TODO TEST 选择主机
// TODO openAdd openUpdate 脊柱
const render = ref(false);
const table = ref();
const drawer = ref();