opensource/orion-ops
3
0
Fork 0
mirror of https://gitee.com/lijiahangmax/orion-ops.git synced 2026-09-24 15:30:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

tail file writeable.

Browse Source
This commit is contained in:
lijiahang
2022-05-25 08:52:36 +08:00
parent 21da5b2d02
commit f76d39209a
5 changed files with 224 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
orion-ops-vue/src/components/log/LogAppender.vue
+8 -2
View File
@@ -202,7 +202,8 @@ export default {
fit: null,
search: null,
links: null
}
},
token: {}
}
},
methods: {
@@ -212,6 +213,7 @@ export default {
type: this.tailType,
relId: this.relId
}).then(({ data }) => {
this.token = data
this.initLogTailView(data)
})
})
@@ -263,6 +265,7 @@ export default {
this.client = new WebSocket(this.$api.fileTail({ token: data.token }))
this.client.onopen = () => {
this.status = this.$enum.LOG_TAIL_STATUS.RUNNABLE.value
this.$emit('open')
}
this.client.onerror = () => {
this.status = this.$enum.LOG_TAIL_STATUS.ERROR.value
@@ -270,7 +273,10 @@ export default {
this.client.onclose = (e) => {
console.log('closed', e.code, e.reason)
this.status = this.$enum.LOG_TAIL_STATUS.CLOSE.value
// this.term.write('\r\n\x1b[31m已断开连接...\x1b[0m')
if (e.code > 4000 && e.code < 5000) {
// 自定义错误信息
this.term.write(`\x1b[93m${e.reason}\x1b[0m`)
}
this.$emit('close')
}
this.client.onmessage = async event => {
orion-ops-vue/src/components/log/LoggerViewModal.vue
+85 -31
View File
@@ -16,40 +16,46 @@
:appendStyle="{height: 'calc(100vh - 92px)'}"
:relId="id"
:tailType="$enum.FILE_TAIL_TYPE.TAIL_LIST.value"
:downloadType="$enum.FILE_DOWNLOAD_TYPE.TAIL_LIST_FILE.value">
:downloadType="$enum.FILE_DOWNLOAD_TYPE.TAIL_LIST_FILE.value"
@open="loggerOpened"
@close="loggerClosed">
<!-- 左侧工具栏 -->
<template #left-tools>
<div class="fixed-left-tools">
<!-- 文件名称 -->
<a-breadcrumb>
<!-- 机器名称 -->
<a-breadcrumb-item v-if="file.machineName">
<a-tag color="#7950F2" class="m0">
<!-- 日志信息 -->
<div class="machine-log-info-container">
<!-- 机器信息 -->
<a-tooltip :title="file.machineHost">
<span class="log-info-wrapper" style="margin-left: 2px;">
{{ file.machineName }}
</a-tag>
</a-breadcrumb-item>
<!-- 机器主机 -->
<a-breadcrumb-item v-if="file.machineHost">
<a-tag color="#5C7CFA" class="m0">
{{ file.machineHost }}
</a-tag>
</a-breadcrumb-item>
<!-- 名称 -->
<a-breadcrumb-item v-if="file.name">
<a-tag color="#15AABF" class="m0">
{{ file.name }}
</a-tag>
</a-breadcrumb-item>
<!-- 文件名称 -->
<a-breadcrumb-item v-if="file.path">
<a-tag color="#40C057"
class="pointer"
:title="file.path"
@click="$copy(file.path)">
</span>
</a-tooltip>
<a-divider type="vertical" style="top: -0.36em; height: 1em"/>
<!-- 文件信息 -->
<a-tooltip :title="`${file.path}`">
<span class="log-info-wrapper pointer" @click="$copy(file.path)">
{{ file.fileName }}
</a-tag>
</a-breadcrumb-item>
</a-breadcrumb>
</span>
</a-tooltip>
</div>
<!-- 命令输入 -->
<a-input-search class="command-write-input"
size="default"
v-if="visibleCommand"
v-model="command"
placeholder="输入"
@search="sendCommand">
<template #enterButton>
<a-icon type="forward"/>
</template>
<!-- 发送 lf -->
<template #suffix>
<a-icon :class="{'send-lf-trigger': true, 'send-lf-trigger-enable': sendLf}"
title="是否发送 \n"
type="pull-request"
@click="() => sendLf = !sendLf"/>
</template>
</a-input-search>
</div>
</template>
</LogAppender>
@@ -69,11 +75,20 @@ export default {
return {
id: null,
file: {},
visible: false
visible: false,
visibleCommand: false,
command: null,
sendLf: true,
closed: false
}
},
methods: {
open(id) {
this.file = {}
this.visibleCommand = false
this.command = null
this.sendLf = true
this.closed = false
this.visible = true
this.id = id
this.$api.getTailDetail({
@@ -86,12 +101,38 @@ export default {
},
close() {
this.id = null
this.file = {}
this.visible = false
this.$nextTick(() => {
this.$refs.appender.clear()
this.$refs.appender.close()
})
},
loggerOpened() {
if (this.$refs.appender.token.tailMode === this.$enum.FILE_TAIL_MODE.TAIL.value) {
setTimeout(() => {
if (!this.closed) {
this.visibleCommand = true
}
}, 200)
}
},
loggerClosed() {
this.closed = true
this.visibleCommand = false
},
sendCommand() {
let command = this.command || ''
if (this.sendLf) {
command += '\n'
}
if (!command) {
return
}
this.command = ''
this.$api.writeTailCommand({
token: this.$refs.appender.token.token,
command
})
}
}
}
@@ -104,4 +145,17 @@ export default {
align-items: center;
}
.machine-log-info-container {
margin-right: 16px;
margin-top: -9px;
height: 1em;
}
.log-info-wrapper {
color: rgba(0, 0, 0, .8);
max-width: 200px;
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
}
</style>
orion-ops-vue/src/lib/api.js
+7
View File
@@ -931,6 +931,13 @@ const $api = {
return $http.$post('/file-tail/config', param, { skipErrorMessage: true })
},
/**
* tail 输入命令
*/
writeTailCommand: param => {
return $http.$post('/file-tail/write', param)
},
/**
* 应用环境列表
*/
orion-ops-vue/src/views/log/LoggerList.vue
+20 -3
View File
@@ -82,10 +82,21 @@
<!-- 操作 -->
<template v-slot:action="record">
<!-- 打开 -->
<a-tooltip title="ctrl 点击打开新页面">
<a-tooltip title="ctrl 点击打开新页面" v-if="record.machineStatus === $enum.ENABLE_STATUS.ENABLE.value">
<a target="_blank"
:href="`#/log/view/${record.id}`"
@click="openLogView($event, record.id)">打开</a>
@click="openLogView($event, record.id)">
<a-button class="open-log-trigger" type="link">
打开
</a-button>
</a>
</a-tooltip>
<a-tooltip title="机器未启用" v-else>
<a-button class="open-log-trigger"
type="link"
:disabled="true">
打开
</a-button>
</a-tooltip>
<a-divider type="vertical"/>
<!-- 修改 -->
@@ -283,6 +294,12 @@ export default {
}
</script>
<style scoped>
<style lang="less" scoped>
.open-log-trigger {
height: 22px;
padding: 0;
margin: 0;
}
</style>
orion-ops-vue/src/views/log/LoggerView.vue
+104 -40
View File
@@ -50,40 +50,46 @@
:appendStyle="{height: 'calc(100vh - 100px)'}"
:relId="selectedTailFile.id"
:tailType="$enum.FILE_TAIL_TYPE.TAIL_LIST.value"
:downloadType="$enum.FILE_DOWNLOAD_TYPE.TAIL_LIST_FILE.value">
:downloadType="$enum.FILE_DOWNLOAD_TYPE.TAIL_LIST_FILE.value"
@open="loggerOpened(selectedTailFile)"
@close="loggerClosed(selectedTailFile)">
<!-- 左侧工具栏 -->
<template #left-tools>
<div class="appender-left-tools">
<!-- 信息 -->
<a-breadcrumb>
<!-- 机器名称 -->
<a-breadcrumb-item v-if="selectedTailFile.machineName">
<a-tag color="#7950F2" class="m0">
<!-- 日志信息 -->
<div class="machine-log-info-container">
<!-- 机器信息 -->
<a-tooltip :title="selectedTailFile.machineHost">
<span class="log-info-wrapper" style="margin-left: 2px;">
{{ selectedTailFile.machineName }}
</a-tag>
</a-breadcrumb-item>
<!-- 机器主机 -->
<a-breadcrumb-item v-if="selectedTailFile.machineHost">
<a-tag color="#5C7CFA" class="m0">
{{ selectedTailFile.machineHost }}
</a-tag>
</a-breadcrumb-item>
<!-- 名称 -->
<a-breadcrumb-item v-if="selectedTailFile.name">
<a-tag color="#15AABF" class="m0">
{{ selectedTailFile.name }}
</a-tag>
</a-breadcrumb-item>
<!-- 文件名称 -->
<a-breadcrumb-item v-if="selectedTailFile.path">
<a-tag color="#40C057"
class="pointer mr8"
:title="selectedTailFile.path"
@click="$copy(selectedTailFile.path)">
</span>
</a-tooltip>
<a-divider type="vertical" style="top: -0.36em; height: 1em"/>
<!-- 文件信息 -->
<a-tooltip :title="`${selectedTailFile.path}`">
<span class="log-info-wrapper pointer" @click="$copy(selectedTailFile.path)">
{{ selectedTailFile.fileName }}
</a-tag>
</a-breadcrumb-item>
</a-breadcrumb>
</span>
</a-tooltip>
</div>
<!-- 命令输入 -->
<a-input-search class="command-write-input"
size="default"
v-if="selectedTailFile.visibleCommand"
v-model="selectedTailFile.command"
placeholder="输入"
@search="sendCommand(selectedTailFile)">
<template #enterButton>
<a-icon type="forward"/>
</template>
<!-- 发送 lf -->
<template #suffix>
<a-icon :class="{'send-lf-trigger': true, 'send-lf-trigger-enable': selectedTailFile.sendLf}"
title="是否发送 \n"
type="pull-request"
@click="() => selectedTailFile.sendLf = !selectedTailFile.sendLf"/>
</template>
</a-input-search>
</div>
</template>
</LogAppender>
@@ -149,16 +155,18 @@ export default {
const tailListRes = await this.$api.getTailList({
limit: 10000
})
this.tailList = tailListRes.data.rows.map(i => {
return {
id: i.id,
name: i.name,
path: i.path,
fileName: i.fileName,
machineName: i.machineName,
machineHost: i.machineHost
}
})
this.tailList = tailListRes.data.rows
.filter(i => i.machineStatus === this.$enum.ENABLE_STATUS.ENABLE.value)
.map(i => {
return {
id: i.id,
name: i.name,
path: i.path,
fileName: i.fileName,
machineName: i.machineName,
machineHost: i.machineHost
}
})
this.filterTailList = [...this.tailList]
} catch (e) {
// ignore
@@ -185,7 +193,11 @@ export default {
path: filterTailFile.path,
fileName: filterTailFile.fileName,
machineName: filterTailFile.machineName,
machineHost: filterTailFile.machineHost
machineHost: filterTailFile.machineHost,
visibleCommand: false,
command: null,
sendLf: true,
closed: false
})
this.$nextTick(() => {
const $ref = this.$refs['appender' + id]
@@ -219,6 +231,39 @@ export default {
}
this.selectedTailFiles = selectedTailFiles
this.activeTab = activeTab
},
loggerOpened(file) {
const $ref = this.$refs['appender' + file.id]
if ($ref && $ref.length) {
if ($ref[0].token.tailMode === this.$enum.FILE_TAIL_MODE.TAIL.value) {
setTimeout(() => {
if (!file.closed) {
file.visibleCommand = true
}
}, 200)
}
}
},
loggerClosed(file) {
file.closed = true
file.visibleCommand = false
},
sendCommand(file) {
const $ref = this.$refs['appender' + file.id]
if ($ref && $ref.length) {
let command = file.command || ''
if (file.sendLf) {
command += '\n'
}
if (!command) {
return
}
file.command = ''
this.$api.writeTailCommand({
token: $ref[0].token.token,
command
})
}
}
},
async mounted() {
@@ -293,4 +338,23 @@ export default {
padding: 6px 8px;
}
.appender-left-tools {
display: flex;
align-items: center;
}
.machine-log-info-container {
margin-right: 16px;
margin-top: -9px;
height: 1em;
}
.log-info-wrapper {
color: rgba(0, 0, 0, .8);
max-width: 200px;
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
}
</style>