🔨 执行日志.
This commit is contained in:
@@ -0,0 +1,55 @@
|
|||||||
|
package com.orion.ops.module.asset.handler.host.exec.command;
|
||||||
|
|
||||||
|
import com.orion.lang.support.timeout.TimeoutChecker;
|
||||||
|
import com.orion.lang.support.timeout.TimeoutEndpoint;
|
||||||
|
import com.orion.lang.utils.Threads;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO KIT
|
||||||
|
*
|
||||||
|
* @author Jiahang Li
|
||||||
|
* @version 1.0.0
|
||||||
|
* @since 2024/3/20 16:50
|
||||||
|
*/
|
||||||
|
public class TimeOutCheckerFix implements TimeoutChecker {
|
||||||
|
|
||||||
|
private final List<TimeoutEndpoint> tasks = new ArrayList<>();
|
||||||
|
|
||||||
|
private final long delay;
|
||||||
|
|
||||||
|
private boolean run;
|
||||||
|
|
||||||
|
public TimeOutCheckerFix() {
|
||||||
|
this(DEFAULT_DELAY);
|
||||||
|
}
|
||||||
|
|
||||||
|
public TimeOutCheckerFix(long delay) {
|
||||||
|
this.delay = delay;
|
||||||
|
this.run = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public <T extends TimeoutEndpoint> void addTask(T task) {
|
||||||
|
tasks.add(task);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void run() {
|
||||||
|
while (run) {
|
||||||
|
// 完成或超时 直接移除
|
||||||
|
tasks.removeIf(ch -> ch.isDone() || ch.checkTimeout());
|
||||||
|
// 等待
|
||||||
|
// 不为空则休眠
|
||||||
|
Threads.sleep(delay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void close() {
|
||||||
|
this.run = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -4,11 +4,11 @@ import com.orion.lang.support.timeout.TimeoutChecker;
|
|||||||
import com.orion.lang.utils.Threads;
|
import com.orion.lang.utils.Threads;
|
||||||
import com.orion.lang.utils.collect.Lists;
|
import com.orion.lang.utils.collect.Lists;
|
||||||
import com.orion.lang.utils.io.Streams;
|
import com.orion.lang.utils.io.Streams;
|
||||||
import com.orion.ops.framework.common.constant.Const;
|
|
||||||
import com.orion.ops.module.asset.dao.ExecLogDAO;
|
import com.orion.ops.module.asset.dao.ExecLogDAO;
|
||||||
import com.orion.ops.module.asset.define.AssetThreadPools;
|
import com.orion.ops.module.asset.define.AssetThreadPools;
|
||||||
import com.orion.ops.module.asset.entity.domain.ExecLogDO;
|
import com.orion.ops.module.asset.entity.domain.ExecLogDO;
|
||||||
import com.orion.ops.module.asset.enums.ExecStatusEnum;
|
import com.orion.ops.module.asset.enums.ExecStatusEnum;
|
||||||
|
import com.orion.ops.module.asset.handler.host.exec.command.TimeOutCheckerFix;
|
||||||
import com.orion.ops.module.asset.handler.host.exec.command.dto.ExecCommandDTO;
|
import com.orion.ops.module.asset.handler.host.exec.command.dto.ExecCommandDTO;
|
||||||
import com.orion.ops.module.asset.handler.host.exec.command.dto.ExecCommandHostDTO;
|
import com.orion.ops.module.asset.handler.host.exec.command.dto.ExecCommandHostDTO;
|
||||||
import com.orion.ops.module.asset.handler.host.exec.command.manager.ExecTaskManager;
|
import com.orion.ops.module.asset.handler.host.exec.command.manager.ExecTaskManager;
|
||||||
@@ -32,7 +32,7 @@ public class ExecTaskHandler implements IExecTaskHandler {
|
|||||||
|
|
||||||
private static final ExecLogDAO execLogDAO = SpringHolder.getBean(ExecLogDAO.class);
|
private static final ExecLogDAO execLogDAO = SpringHolder.getBean(ExecLogDAO.class);
|
||||||
|
|
||||||
private static final ExecTaskManager EXEC_TASK_MANAGER = SpringHolder.getBean(ExecTaskManager.class);
|
private static final ExecTaskManager execTaskManager = SpringHolder.getBean(ExecTaskManager.class);
|
||||||
|
|
||||||
private final ExecCommandDTO execCommand;
|
private final ExecCommandDTO execCommand;
|
||||||
|
|
||||||
@@ -50,7 +50,7 @@ public class ExecTaskHandler implements IExecTaskHandler {
|
|||||||
public void run() {
|
public void run() {
|
||||||
Long id = execCommand.getLogId();
|
Long id = execCommand.getLogId();
|
||||||
// 添加任务
|
// 添加任务
|
||||||
EXEC_TASK_MANAGER.addTask(id, this);
|
execTaskManager.addTask(id, this);
|
||||||
log.info("ExecTaskHandler.run start id: {}", id);
|
log.info("ExecTaskHandler.run start id: {}", id);
|
||||||
// 更新状态
|
// 更新状态
|
||||||
this.updateStatus(ExecStatusEnum.RUNNING);
|
this.updateStatus(ExecStatusEnum.RUNNING);
|
||||||
@@ -68,7 +68,7 @@ public class ExecTaskHandler implements IExecTaskHandler {
|
|||||||
// 释放资源
|
// 释放资源
|
||||||
Streams.close(this);
|
Streams.close(this);
|
||||||
// 移除任务
|
// 移除任务
|
||||||
EXEC_TASK_MANAGER.removeTask(id);
|
execTaskManager.removeTask(id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -87,7 +87,7 @@ public class ExecTaskHandler implements IExecTaskHandler {
|
|||||||
private void runHostCommand(List<ExecCommandHostDTO> hosts) throws Exception {
|
private void runHostCommand(List<ExecCommandHostDTO> hosts) throws Exception {
|
||||||
// 超时检查
|
// 超时检查
|
||||||
if (execCommand.getTimeout() != 0) {
|
if (execCommand.getTimeout() != 0) {
|
||||||
this.timeoutChecker = TimeoutChecker.create(Const.MS_S_1);
|
this.timeoutChecker = new TimeOutCheckerFix();
|
||||||
AssetThreadPools.TIMEOUT_CHECK.execute(this.timeoutChecker);
|
AssetThreadPools.TIMEOUT_CHECK.execute(this.timeoutChecker);
|
||||||
}
|
}
|
||||||
if (hosts.size() == 1) {
|
if (hosts.size() == 1) {
|
||||||
|
|||||||
@@ -27,13 +27,14 @@ export const AppenderOptions: ITerminalOptions & ITerminalInitOnlyOptions = {
|
|||||||
export interface LogDomRef {
|
export interface LogDomRef {
|
||||||
id: number;
|
id: number;
|
||||||
el: HTMLElement;
|
el: HTMLElement;
|
||||||
|
openSearch: () => {};
|
||||||
}
|
}
|
||||||
|
|
||||||
// appender 配置
|
// appender 配置
|
||||||
export interface LogAppenderConf {
|
export interface LogAppenderConf {
|
||||||
id: number;
|
id: number;
|
||||||
el: HTMLElement;
|
el: HTMLElement;
|
||||||
fixed: boolean;
|
openSearch: () => {};
|
||||||
terminal: Terminal;
|
terminal: Terminal;
|
||||||
addons: LogAddons;
|
addons: LogAddons;
|
||||||
}
|
}
|
||||||
@@ -53,14 +54,17 @@ export interface ILogAppender {
|
|||||||
// 设置当前元素
|
// 设置当前元素
|
||||||
setCurrent(id: number): void;
|
setCurrent(id: number): void;
|
||||||
|
|
||||||
|
// 打开搜索
|
||||||
|
openSearch(): void;
|
||||||
|
|
||||||
// 查找关键字
|
// 查找关键字
|
||||||
find(word: string, next: boolean, options: any): void;
|
find(word: string, next: boolean, options: any): void;
|
||||||
|
|
||||||
// 聚焦
|
// 聚焦
|
||||||
focus(): void;
|
focus(): void;
|
||||||
|
|
||||||
// 设置固定
|
// 自适应
|
||||||
setFixed(fixed: boolean): void;
|
fitAll(): void;
|
||||||
|
|
||||||
// 去顶部
|
// 去顶部
|
||||||
toTop(): void;
|
toTop(): void;
|
||||||
|
|||||||
@@ -59,7 +59,6 @@ export default class LogAppender implements ILogAppender {
|
|||||||
addons.fit.fit();
|
addons.fit.fit();
|
||||||
this.appenderRel[logDomRef.id] = {
|
this.appenderRel[logDomRef.id] = {
|
||||||
...logDomRef,
|
...logDomRef,
|
||||||
fixed: false,
|
|
||||||
terminal,
|
terminal,
|
||||||
addons
|
addons
|
||||||
};
|
};
|
||||||
@@ -94,7 +93,7 @@ export default class LogAppender implements ILogAppender {
|
|||||||
} else if (e.ctrlKey && e.code === 'KeyF') {
|
} else if (e.ctrlKey && e.code === 'KeyF') {
|
||||||
// 搜索
|
// 搜索
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// TODO open search
|
this.current.openSearch();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
@@ -147,13 +146,14 @@ export default class LogAppender implements ILogAppender {
|
|||||||
this.current = rel;
|
this.current = rel;
|
||||||
// 自适应
|
// 自适应
|
||||||
rel.addons.fit.fit();
|
rel.addons.fit.fit();
|
||||||
// 非固定跳转到最底部
|
|
||||||
if (!rel.fixed) {
|
|
||||||
rel.terminal.scrollToBottom();
|
|
||||||
}
|
|
||||||
this.focus();
|
this.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 打开搜索
|
||||||
|
openSearch() {
|
||||||
|
this.current.openSearch();
|
||||||
|
}
|
||||||
|
|
||||||
// 查找关键字
|
// 查找关键字
|
||||||
find(word: string, next: boolean, options: any) {
|
find(word: string, next: boolean, options: any) {
|
||||||
if (next) {
|
if (next) {
|
||||||
@@ -163,12 +163,6 @@ export default class LogAppender implements ILogAppender {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置固定
|
|
||||||
setFixed(fixed: boolean): void {
|
|
||||||
this.current.fixed = fixed;
|
|
||||||
this.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 去顶部
|
// 去顶部
|
||||||
toTop(): void {
|
toTop(): void {
|
||||||
this.current.terminal.scrollToTop();
|
this.current.terminal.scrollToTop();
|
||||||
|
|||||||
@@ -0,0 +1,271 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<!-- 面板头部 -->
|
||||||
|
<div class="log-header">
|
||||||
|
<!-- 左侧信息 -->
|
||||||
|
<a-space class="log-header-left" :size="12">
|
||||||
|
<!-- 状态 -->
|
||||||
|
<a-tag :color="getDictValue(execHostStatusKey, host.status, 'color')">
|
||||||
|
{{ getDictValue(execHostStatusKey, host.status) }}
|
||||||
|
</a-tag>
|
||||||
|
<!-- exitStatus -->
|
||||||
|
<a-tag v-if="host.exitStatus || host.exitStatus === 0"
|
||||||
|
:color="host.exitStatus === 0 ? 'arcoblue' : 'orangered'"
|
||||||
|
title="exit status">
|
||||||
|
<template #icon>
|
||||||
|
<icon-check v-if="host.exitStatus === 0" />
|
||||||
|
<icon-exclamation v-else />
|
||||||
|
</template>
|
||||||
|
<span class="tag-value">{{ host.exitStatus }}</span>
|
||||||
|
</a-tag>
|
||||||
|
<!-- 持续时间 -->
|
||||||
|
<a-tag color="arcoblue" title="持续时间">
|
||||||
|
<template #icon>
|
||||||
|
<icon-loading v-if="host.status === execHostStatus.WAITING || host.status === execHostStatus.RUNNING" />
|
||||||
|
<icon-clock-circle v-else />
|
||||||
|
</template>
|
||||||
|
<span class="tag-value">{{ formatDuration(host.startTime, host.finishTime) || '0s' }}</span>
|
||||||
|
</a-tag>
|
||||||
|
</a-space>
|
||||||
|
<!-- 右侧操作 -->
|
||||||
|
<a-space class="log-header-right" :size="12">
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="搜索"
|
||||||
|
@click="() => appender?.openSearch()">
|
||||||
|
<icon-find-replace />
|
||||||
|
</span>
|
||||||
|
<!-- 增大字号 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="增大字号"
|
||||||
|
@click="() => appender?.addFontSize(1)">
|
||||||
|
<icon-zoom-in />
|
||||||
|
</span>
|
||||||
|
<!-- 减小字号 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="减小字号"
|
||||||
|
@click="() => appender?.addFontSize(-1)">
|
||||||
|
<icon-zoom-out />
|
||||||
|
</span>
|
||||||
|
<!-- 去顶部 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="去顶部"
|
||||||
|
@click="() => appender?.toTop()">
|
||||||
|
<icon-up />
|
||||||
|
</span>
|
||||||
|
<!-- 去底部 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="去底部"
|
||||||
|
@click="() => appender?.toBottom()">
|
||||||
|
<icon-down />
|
||||||
|
</span>
|
||||||
|
<!-- 全选 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="全选"
|
||||||
|
@click="() => appender?.selectAll()">
|
||||||
|
<icon-expand />
|
||||||
|
</span>
|
||||||
|
<!-- 复制 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="复制"
|
||||||
|
@click="() => appender?.copy()">
|
||||||
|
<icon-copy />
|
||||||
|
</span>
|
||||||
|
<!-- 复制全部 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="复制全部"
|
||||||
|
@click="() => appender?.copyAll()">
|
||||||
|
<icon-brush />
|
||||||
|
</span>
|
||||||
|
<!-- 清空 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="清空"
|
||||||
|
@click="() => appender?.clear()">
|
||||||
|
<icon-delete />
|
||||||
|
</span>
|
||||||
|
<!-- 下载 -->
|
||||||
|
<span class="log-action click-icon-wrapper"
|
||||||
|
title="下载"
|
||||||
|
@click="downloadLogFile(host.id)">
|
||||||
|
<icon-download />
|
||||||
|
</span>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
<!-- 右键菜单 -->
|
||||||
|
<a-dropdown :popup-max-height="false"
|
||||||
|
trigger="contextMenu"
|
||||||
|
position="bl"
|
||||||
|
alignPoint>
|
||||||
|
<!-- 日志面板 -->
|
||||||
|
<div class="log-wrapper">
|
||||||
|
<!-- terminal -->
|
||||||
|
<div class="log-appender" ref="appenderRef" />
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<xterm-search-modal ref="searchRef"
|
||||||
|
class="search-modal"
|
||||||
|
@find="searchWords"
|
||||||
|
@close="searchClose" />
|
||||||
|
</div>
|
||||||
|
<!-- 右键菜单 -->
|
||||||
|
<template #content>
|
||||||
|
<!-- 去顶部 -->
|
||||||
|
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||||
|
@click="() => appender?.toTop()">
|
||||||
|
<template #icon>
|
||||||
|
<icon-up />
|
||||||
|
</template>
|
||||||
|
<span>去顶部</span>
|
||||||
|
</a-doption>
|
||||||
|
<!-- 去底部 -->
|
||||||
|
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||||
|
@click="() => appender?.toBottom()">
|
||||||
|
<template #icon>
|
||||||
|
<icon-down />
|
||||||
|
</template>
|
||||||
|
<span>去底部</span>
|
||||||
|
</a-doption>
|
||||||
|
<!-- 全选 -->
|
||||||
|
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||||
|
@click="() => appender?.selectAll()">
|
||||||
|
<template #icon>
|
||||||
|
<icon-expand />
|
||||||
|
</template>
|
||||||
|
<span>全选</span>
|
||||||
|
</a-doption>
|
||||||
|
<!-- 复制 -->
|
||||||
|
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||||
|
@click="() => appender?.copy()">
|
||||||
|
<template #icon>
|
||||||
|
<icon-copy />
|
||||||
|
</template>
|
||||||
|
<span>复制</span>
|
||||||
|
</a-doption>
|
||||||
|
<!-- 清空 -->
|
||||||
|
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||||
|
@click="() => appender?.clear()">
|
||||||
|
<template #icon>
|
||||||
|
<icon-delete />
|
||||||
|
</template>
|
||||||
|
<span>清空</span>
|
||||||
|
</a-doption>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'logPanelAppender'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { ExecCommandHostResponse } from '@/api/exec/exec';
|
||||||
|
import type { ILogAppender } from '@/components/xtrem/log-appender/appender.const';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { execHostStatus, execHostStatusKey } from '@/views/exec/exec-log/types/const';
|
||||||
|
import { formatDuration } from '@/utils';
|
||||||
|
import { useDictStore } from '@/store';
|
||||||
|
import { downloadExecLogFile } from '@/api/exec/exec';
|
||||||
|
import { downloadFile } from '@/utils/file';
|
||||||
|
import XtermSearchModal from '@/components/xtrem/search-modal/index.vue';
|
||||||
|
import 'xterm/css/xterm.css';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
host: ExecCommandHostResponse;
|
||||||
|
appender: ILogAppender
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const { getDictValue } = useDictStore();
|
||||||
|
|
||||||
|
const appenderRef = ref();
|
||||||
|
const searchRef = ref();
|
||||||
|
|
||||||
|
// 打开搜索
|
||||||
|
const openSearch = () => {
|
||||||
|
searchRef.value.toggle();
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
id: props.host.id,
|
||||||
|
appenderRef,
|
||||||
|
openSearch
|
||||||
|
});
|
||||||
|
|
||||||
|
// 搜索关键字
|
||||||
|
const searchWords = (word: string, next: boolean, options: any) => {
|
||||||
|
props.appender?.find(word, next, options);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭搜索框
|
||||||
|
const searchClose = () => {
|
||||||
|
props.appender?.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下载文件
|
||||||
|
const downloadLogFile = async (id: number) => {
|
||||||
|
const data = await downloadExecLogFile(id);
|
||||||
|
downloadFile(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@header-height: 40px;
|
||||||
|
|
||||||
|
.log-header {
|
||||||
|
width: 100%;
|
||||||
|
height: @header-height;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--color-bg-1);
|
||||||
|
color: var(--color-text-1);
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
:deep(.arco-tag-icon) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-value {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-action {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - @header-height);
|
||||||
|
position: relative;
|
||||||
|
background: #202020;
|
||||||
|
padding: 4px 0 0 4px;
|
||||||
|
|
||||||
|
.log-appender {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-modal {
|
||||||
|
--bg-focus: rgba(255, 255, 255, .85);
|
||||||
|
--bg: rgba(255, 255, 255, .95);
|
||||||
|
--color-text: #0E0E0E;
|
||||||
|
--color-text-focus: #0F0F0F;
|
||||||
|
--bg-icon-hover: rgba(12, 12, 12, .04);
|
||||||
|
--bg-icon-hover-focus: rgba(12, 12, 12, .08);
|
||||||
|
--bg-icon-selected: rgba(12, 12, 12, .06);
|
||||||
|
--bg-icon-selected-focus: rgba(12, 12, 12, .10);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -1,166 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div v-show="current === host.id"
|
<template v-if="appender">
|
||||||
v-for="host in command.hosts"
|
<log-panel-appender class="log-view"
|
||||||
:key="host.id"
|
v-show="current === host.id"
|
||||||
class="log-view">
|
v-for="host in command.hosts"
|
||||||
<!-- 面板头部 -->
|
:key="host.id"
|
||||||
<div class="log-header">
|
:ref="addRef as unknown as VNodeRef"
|
||||||
<!-- 左侧信息 -->
|
:host="host"
|
||||||
<a-space class="log-header-left" :size="12">
|
:appender="appender as ILogAppender" />
|
||||||
<!-- 状态 -->
|
</template>
|
||||||
<a-tag :color="getDictValue(execHostStatusKey, host.status, 'color')">
|
|
||||||
{{ getDictValue(execHostStatusKey, host.status) }}
|
|
||||||
</a-tag>
|
|
||||||
<!-- exitStatus -->
|
|
||||||
<a-tag v-if="host.exitStatus || host.exitStatus === 0"
|
|
||||||
:color="host.exitStatus === 0 ? 'arcoblue' : 'orangered'"
|
|
||||||
title="exit status">
|
|
||||||
<template #icon>
|
|
||||||
<icon-check v-if="host.exitStatus === 0" />
|
|
||||||
<icon-exclamation v-else />
|
|
||||||
</template>
|
|
||||||
<span class="tag-value">{{ host.exitStatus }}</span>
|
|
||||||
</a-tag>
|
|
||||||
<!-- 持续时间 -->
|
|
||||||
<a-tag color="arcoblue" title="持续时间">
|
|
||||||
<template #icon>
|
|
||||||
<icon-loading v-if="host.status === execHostStatus.WAITING || host.status === execHostStatus.RUNNING" />
|
|
||||||
<icon-clock-circle v-else />
|
|
||||||
</template>
|
|
||||||
<span class="tag-value">{{ formatDuration(host.startTime, host.finishTime) || '0s' }}</span>
|
|
||||||
</a-tag>
|
|
||||||
</a-space>
|
|
||||||
<!-- 右侧操作 -->
|
|
||||||
<a-space class="log-header-right" :size="12">
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="搜索"
|
|
||||||
@click="() => appender?.addFontSize(1)">
|
|
||||||
<icon-find-replace />
|
|
||||||
</span>
|
|
||||||
<!-- 增大字号 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="增大字号"
|
|
||||||
@click="() => appender?.addFontSize(1)">
|
|
||||||
<icon-zoom-in />
|
|
||||||
</span>
|
|
||||||
<!-- 减小字号 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="减小字号"
|
|
||||||
@click="() => appender?.addFontSize(-1)">
|
|
||||||
<icon-zoom-out />
|
|
||||||
</span>
|
|
||||||
<!-- 去顶部 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="去顶部"
|
|
||||||
@click="() => appender?.toTop()">
|
|
||||||
<icon-up />
|
|
||||||
</span>
|
|
||||||
<!-- 去底部 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="去底部"
|
|
||||||
@click="() => appender?.toBottom()">
|
|
||||||
<icon-down />
|
|
||||||
</span>
|
|
||||||
<!-- 全选 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="全选"
|
|
||||||
@click="() => appender?.selectAll()">
|
|
||||||
<icon-expand />
|
|
||||||
</span>
|
|
||||||
<!-- 复制 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="复制"
|
|
||||||
@click="() => appender?.copy()">
|
|
||||||
<icon-copy />
|
|
||||||
</span>
|
|
||||||
<!-- 复制全部 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="复制全部"
|
|
||||||
@click="() => appender?.copyAll()">
|
|
||||||
<icon-brush />
|
|
||||||
</span>
|
|
||||||
<!-- 清空 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="清空"
|
|
||||||
@click="() => appender?.clear()">
|
|
||||||
<icon-delete />
|
|
||||||
</span>
|
|
||||||
<!-- 下载 -->
|
|
||||||
<span class="log-action click-icon-wrapper"
|
|
||||||
title="下载"
|
|
||||||
@click="downloadLogFile(host.id)">
|
|
||||||
<icon-download />
|
|
||||||
</span>
|
|
||||||
<!-- 设置固定 -->
|
|
||||||
<a-switch type="round"
|
|
||||||
checked-text="固定"
|
|
||||||
unchecked-text="跟随"
|
|
||||||
@change="(e: any) => appender?.setFixed(e as boolean)" />
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
<!-- 右键菜单 -->
|
|
||||||
<a-dropdown :popup-max-height="false"
|
|
||||||
trigger="contextMenu"
|
|
||||||
position="bl"
|
|
||||||
alignPoint>
|
|
||||||
<!-- 日志面板 -->
|
|
||||||
<div class="log-wrapper">
|
|
||||||
<!-- terminal -->
|
|
||||||
<div class="log-appender"
|
|
||||||
:ref="e => addRef(host.id, e as HTMLElement) as unknown as VNodeRef" />
|
|
||||||
<!-- 搜索框 -->
|
|
||||||
<xterm-search-modal ref="searchModal"
|
|
||||||
class="search-modal"
|
|
||||||
@find="searchWords"
|
|
||||||
@close="searchClose" />
|
|
||||||
</div>
|
|
||||||
<!-- 右键菜单 -->
|
|
||||||
<template #content>
|
|
||||||
<!-- 去顶部 -->
|
|
||||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
|
||||||
@click="() => appender?.toTop()">
|
|
||||||
<template #icon>
|
|
||||||
<icon-up />
|
|
||||||
</template>
|
|
||||||
<span>去顶部</span>
|
|
||||||
</a-doption>
|
|
||||||
<!-- 去底部 -->
|
|
||||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
|
||||||
@click="() => appender?.toBottom()">
|
|
||||||
<template #icon>
|
|
||||||
<icon-down />
|
|
||||||
</template>
|
|
||||||
<span>去底部</span>
|
|
||||||
</a-doption>
|
|
||||||
<!-- 全选 -->
|
|
||||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
|
||||||
@click="() => appender?.selectAll()">
|
|
||||||
<template #icon>
|
|
||||||
<icon-expand />
|
|
||||||
</template>
|
|
||||||
<span>全选</span>
|
|
||||||
</a-doption>
|
|
||||||
<!-- 复制 -->
|
|
||||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
|
||||||
@click="() => appender?.copy()">
|
|
||||||
<template #icon>
|
|
||||||
<icon-copy />
|
|
||||||
</template>
|
|
||||||
<span>复制</span>
|
|
||||||
</a-doption>
|
|
||||||
<!-- 清空 -->
|
|
||||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
|
||||||
@click="() => appender?.clear()">
|
|
||||||
<template #icon>
|
|
||||||
<icon-delete />
|
|
||||||
</template>
|
|
||||||
<span>清空</span>
|
|
||||||
</a-doption>
|
|
||||||
</template>
|
|
||||||
</a-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -174,40 +22,34 @@
|
|||||||
import type { VNodeRef } from 'vue';
|
import type { VNodeRef } from 'vue';
|
||||||
import type { ExecCommandResponse } from '@/api/exec/exec';
|
import type { ExecCommandResponse } from '@/api/exec/exec';
|
||||||
import type { LogDomRef, ILogAppender } from '@/components/xtrem/log-appender/appender.const';
|
import type { LogDomRef, ILogAppender } from '@/components/xtrem/log-appender/appender.const';
|
||||||
import { nextTick, ref, watch } from 'vue';
|
import { nextTick, onBeforeMount, ref, watch } from 'vue';
|
||||||
import { downloadExecLogFile } from '@/api/exec/exec';
|
|
||||||
import { downloadFile } from '@/utils/file';
|
|
||||||
import { formatDuration } from '@/utils';
|
|
||||||
import { execHostStatus, execHostStatusKey } from '@/views/exec/exec-log/types/const';
|
|
||||||
import { useDictStore } from '@/store';
|
|
||||||
import LogAppender from '@/components/xtrem/log-appender/log-appender';
|
import LogAppender from '@/components/xtrem/log-appender/log-appender';
|
||||||
import XtermSearchModal from '@/components/xtrem/search-modal/index.vue';
|
import LogPanelAppender from './log-panel-appender.vue';
|
||||||
import 'xterm/css/xterm.css';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
current: number;
|
current: number;
|
||||||
command: ExecCommandResponse;
|
command: ExecCommandResponse;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const { getDictValue } = useDictStore();
|
|
||||||
|
|
||||||
const logRefs = ref<Array<LogDomRef>>([]);
|
const logRefs = ref<Array<LogDomRef>>([]);
|
||||||
const appender = ref<ILogAppender>();
|
const appender = ref<ILogAppender>();
|
||||||
const searchModal = ref();
|
|
||||||
|
|
||||||
// 切换标签
|
// 切换标签
|
||||||
watch(() => props.current, (val) => {
|
watch(() => props.current, (val) => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
appender.value?.setCurrent(val);
|
setTimeout(() => {
|
||||||
|
appender.value?.setCurrent(val);
|
||||||
|
}, 50);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 打开
|
// 打开
|
||||||
const open = () => {
|
const open = () => {
|
||||||
nextTick(async () => {
|
nextTick(async () => {
|
||||||
appender.value = new LogAppender({ execId: props.command.id });
|
if (appender.value) {
|
||||||
// 初始化
|
// 初始化
|
||||||
await appender.value.init(logRefs.value);
|
await appender.value.init(logRefs.value);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -219,96 +61,37 @@
|
|||||||
// 关闭全部
|
// 关闭全部
|
||||||
const closeAll = () => {
|
const closeAll = () => {
|
||||||
appender.value?.close();
|
appender.value?.close();
|
||||||
|
logRefs.value = [];
|
||||||
|
appender.value = undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
defineExpose({ open, closeClient, closeAll });
|
defineExpose({ open, closeClient, closeAll });
|
||||||
|
|
||||||
// 添加 ref
|
// 添加 ref
|
||||||
const addRef = (id: number, el: HTMLElement) => {
|
const addRef = (ref: any) => {
|
||||||
|
if (!ref) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
logRefs.value.push({ id, el });
|
logRefs.value.push({
|
||||||
|
id: ref.id,
|
||||||
|
el: ref.appenderRef,
|
||||||
|
openSearch: ref.openSearch
|
||||||
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 搜索关键字
|
onBeforeMount(() => {
|
||||||
const searchWords = (word: string, next: boolean, options: any) => {
|
appender.value = new LogAppender({ execId: props.command.id });
|
||||||
appender.value?.find(word, next, options);
|
});
|
||||||
};
|
|
||||||
|
|
||||||
// 关闭搜索框
|
|
||||||
const searchClose = () => {
|
|
||||||
appender.value?.focus();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 下载文件
|
|
||||||
const downloadLogFile = async (id: number) => {
|
|
||||||
const data = await downloadExecLogFile(id);
|
|
||||||
downloadFile(data);
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@header-height: 40px;
|
|
||||||
|
|
||||||
.log-view {
|
.log-view {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-header {
|
|
||||||
width: 100%;
|
|
||||||
height: @header-height;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background: var(--color-bg-1);
|
|
||||||
color: var(--color-text-1);
|
|
||||||
|
|
||||||
:deep(.arco-tag-icon) {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-value {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-action {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - @header-height);
|
|
||||||
position: relative;
|
|
||||||
background: #202020;
|
|
||||||
padding: 4px 0 0 4px;
|
|
||||||
|
|
||||||
.log-appender {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-modal {
|
|
||||||
--bg-focus: rgba(255, 255, 255, .85);
|
|
||||||
--bg: rgba(255, 255, 255, .95);
|
|
||||||
--color-text: #0E0E0E;
|
|
||||||
--color-text-focus: #0F0F0F;
|
|
||||||
--bg-icon-hover: rgba(12, 12, 12, .04);
|
|
||||||
--bg-icon-hover-focus: rgba(12, 12, 12, .08);
|
|
||||||
--bg-icon-selected: rgba(12, 12, 12, .06);
|
|
||||||
--bg-icon-selected-focus: rgba(12, 12, 12, .10);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
@selected="selectedHost"
|
@selected="selectedHost"
|
||||||
@back="emits('back')" />
|
@back="emits('back')" />
|
||||||
<!-- 日志容器 -->
|
<!-- 日志容器 -->
|
||||||
<log-panel-view ref="logContainer"
|
<log-panel-view ref="logView"
|
||||||
class="log-container"
|
class="log-container"
|
||||||
:current="currentHostExecId"
|
:current="currentHostExecId"
|
||||||
:command="command" />
|
:command="command" />
|
||||||
@@ -30,7 +30,7 @@
|
|||||||
|
|
||||||
const emits = defineEmits(['back']);
|
const emits = defineEmits(['back']);
|
||||||
|
|
||||||
const logContainer = ref();
|
const logView = ref();
|
||||||
const currentHostExecId = ref();
|
const currentHostExecId = ref();
|
||||||
const statusIntervalId = ref();
|
const statusIntervalId = ref();
|
||||||
const finishIntervalId = ref();
|
const finishIntervalId = ref();
|
||||||
@@ -46,7 +46,7 @@
|
|||||||
finishIntervalId.value = setInterval(setTaskFinishTime, 1000);
|
finishIntervalId.value = setInterval(setTaskFinishTime, 1000);
|
||||||
// 打开日志
|
// 打开日志
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
logContainer.value?.open();
|
logView.value?.open();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -68,7 +68,9 @@
|
|||||||
if (hostStatus) {
|
if (hostStatus) {
|
||||||
host.status = hostStatus.status;
|
host.status = hostStatus.status;
|
||||||
host.startTime = hostStatus.startTime;
|
host.startTime = hostStatus.startTime;
|
||||||
host.finishTime = hostStatus.finishTime;
|
if (hostStatus.finishTime) {
|
||||||
|
host.finishTime = hostStatus.finishTime;
|
||||||
|
}
|
||||||
host.exitStatus = hostStatus.exitStatus;
|
host.exitStatus = hostStatus.exitStatus;
|
||||||
host.errorMessage = hostStatus.errorMessage;
|
host.errorMessage = hostStatus.errorMessage;
|
||||||
}
|
}
|
||||||
@@ -108,7 +110,7 @@
|
|||||||
// 关闭连接
|
// 关闭连接
|
||||||
const closeClient = () => {
|
const closeClient = () => {
|
||||||
// 关闭日志
|
// 关闭日志
|
||||||
logContainer.value?.closeClient();
|
logView.value?.closeClient();
|
||||||
// 清理轮询
|
// 清理轮询
|
||||||
clearAllInterval();
|
clearAllInterval();
|
||||||
};
|
};
|
||||||
@@ -116,7 +118,7 @@
|
|||||||
// 清理并且关闭
|
// 清理并且关闭
|
||||||
const closeAll = () => {
|
const closeAll = () => {
|
||||||
// 关闭日志
|
// 关闭日志
|
||||||
logContainer.value?.closeAll();
|
logView.value?.closeAll();
|
||||||
// 清理轮询
|
// 清理轮询
|
||||||
clearAllInterval();
|
clearAllInterval();
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user