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-14 00:09:20 +08:00
parent b0afc8f80a
commit e98bace51b
33 changed files with 379 additions and 1426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,19 +9,73 @@
:scroll="{ y: '100%' }"
:pagination="false"
:bordered="false">
<!-- 执行主机 -->
<template #hostName="{ record }">
<span class="span-blue">
{{ record.hostName }}
</span>
</template>
<!-- 错误信息 -->
<template #errorMessage="{ record }">
<span class="span-red">
{{ record.errorMessage }}
</span>
</template>
<!-- 执行状态 -->
<template #status="{ record }">
{{ getDictValue(execHostStatusKey, record.status) }}
<a-tag :color="getDictValue(execHostStatusKey, record.status, 'color')">
{{ getDictValue(execHostStatusKey, record.status) }}
</a-tag>
</template>
<!-- 执行时间 -->
<template #startTime="{ record }">
<span class="table-cell-value">
{{ (record.startTime && dateFormat(new Date(record.startTime))) || '-' }}
</span>
<br>
<span class="table-cell-sub-value usn" style="font-size: 12px;">
持续时间: {{ formatDuration(record.startTime, record.finishTime) || '-' }}
</span>
</template>
<!-- 操作 -->
<template #handle="{ record }">
<div class="table-handle-wrapper">
<!-- 命令 -->
<a-button type="text"
size="mini"
@click="emits('viewCommand', record.command)">
命令
</a-button>
<!-- 参数 -->
<a-button type="text"
size="mini"
@click="emits('viewParams', record.parameter)">
参数
</a-button>
<!-- 日志 -->
<a-button type="text"
size="mini">
日志
</a-button>
<!-- 中断 -->
<a-popconfirm content="确认要中断命令吗?"
position="left"
type="warning"
@ok="interruptedHost(record)">
<a-button v-permission="['asset:exec:interrupt-exec']"
type="text"
size="mini"
status="danger"
:disabled="record.status !== execHostStatus.WAITING && record.status !== execHostStatus.RUNNING">
中断
</a-button>
</a-popconfirm>
<!-- 删除 -->
<a-popconfirm content="确认删除这条记录吗?"
position="left"
type="warning"
@ok="deleteRow(record)">
<a-button v-permission="['asset:exec-host-log:delete']"
<a-button v-permission="['asset:exec-log:delete']"
type="text"
size="mini"
status="danger">
@@ -40,24 +94,43 @@
</script>
<script lang="ts" setup>
import type { ExecLogQueryResponse } from '@/api/exec/exec-log';
import { reactive, ref, onMounted } from 'vue';
import { deleteExecHostLog } from '@/api/exec/exec-host-log';
import type { ExecLogQueryResponse, ExecHostLogQueryResponse } from '@/api/exec/exec-log';
import { deleteExecHostLog } from '@/api/exec/exec-log';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { execHostStatusKey } from '../types/const';
import columns from '../types/host-table.columns';
import { execHostStatusKey, execHostStatus } from '../types/const';
import { useDictStore } from '@/store';
import { useExpandable } from '@/types/table';
import { dateFormat, formatDuration } from '@/utils';
import { interruptHostExec } from '@/api/exec/exec';
const props = defineProps<{
row: ExecLogQueryResponse;
}>();
const expandable = useExpandable();
const emits = defineEmits(['viewCommand', 'viewParams']);
const expandable = useExpandable({ width: 90 });
const { loading, setLoading } = useLoading();
const { toOptions, getDictValue } = useDictStore();
// 中断执行
const interruptedHost = async (record: ExecHostLogQueryResponse) => {
try {
setLoading(true);
// 调用中断接口
await interruptHostExec({
hostLogId: record.id
});
Message.success('已中断');
record.status = execHostStatus.INTERRUPTED;
} catch (e) {
} finally {
setLoading(false);
}
};
// 删除当前行
const deleteRow = async ({ id }: {
id: number

199
orion-ops-ui/src/views/exec/exec-log/components/exec-log-form-modal.vue
View File

@@ -1,199 +0,0 @@
<!--<template>-->
<!-- <a-modal v-model:visible="visible"-->
<!-- body-class="modal-form"-->
<!-- title-align="start"-->
<!-- :title="title"-->
<!-- :top="80"-->
<!-- :align-center="false"-->
<!-- :draggable="true"-->
<!-- :mask-closable="false"-->
<!-- :unmount-on-close="true"-->
<!-- :ok-button-props="{ disabled: loading }"-->
<!-- :cancel-button-props="{ disabled: loading }"-->
<!-- :on-before-ok="handlerOk"-->
<!-- @close="handleClose">-->
<!-- <a-spin class="full" :loading="loading">-->
<!-- <a-form :model="formModel"-->
<!-- ref="formRef"-->
<!-- label-align="right"-->
<!-- :label-col-props="{ span: 5 }"-->
<!-- :wrapper-col-props="{ span: 18 }"-->
<!-- :rules="formRules">-->
<!-- &lt;!&ndash; 任务id &ndash;&gt;-->
<!-- <a-form-item field="userId" label="任务id">-->
<!-- <a-input-number v-model="formModel.userId"-->
<!-- placeholder="请输入任务id"-->
<!-- hide-button />-->
<!-- </a-form-item>-->
<!-- &lt;!&ndash; 执行用户名 &ndash;&gt;-->
<!-- <a-form-item field="username" label="执行用户名">-->
<!-- <a-input v-model="formModel.username"-->
<!-- placeholder="请输入执行用户名"-->
<!-- allow-clear />-->
<!-- </a-form-item>-->
<!-- &lt;!&ndash; 执行来源 &ndash;&gt;-->
<!-- <a-form-item field="source" label="执行来源">-->
<!-- <a-input v-model="formModel.source"-->
<!-- placeholder="请输入执行来源"-->
<!-- allow-clear />-->
<!-- </a-form-item>-->
<!-- &lt;!&ndash; 执行来源id &ndash;&gt;-->
<!-- <a-form-item field="sourceId" label="执行来源id">-->
<!-- <a-input-number v-model="formModel.sourceId"-->
<!-- placeholder="请输入执行来源id"-->
<!-- hide-button />-->
<!-- </a-form-item>-->
<!-- &lt;!&ndash; 执行描述 &ndash;&gt;-->
<!-- <a-form-item field="description" label="执行描述">-->
<!-- <a-input v-model="formModel.description"-->
<!-- placeholder="请输入执行描述"-->
<!-- allow-clear />-->
<!-- </a-form-item>-->
<!-- &lt;!&ndash; 执行命令 &ndash;&gt;-->
<!-- <a-form-item field="command" label="执行命令">-->
<!-- <a-input v-model="formModel.command"-->
<!-- placeholder="请输入执行命令"-->
<!-- allow-clear />-->
<!-- </a-form-item>-->
<!-- &lt;!&ndash; 超时时间 &ndash;&gt;-->
<!-- <a-form-item field="timeout" label="超时时间">-->
<!-- <a-input-number v-model="formModel.timeout"-->
<!-- placeholder="请输入超时时间"-->
<!-- hide-button />-->
<!-- </a-form-item>-->
<!-- &lt;!&ndash; 执行状态 &ndash;&gt;-->
<!-- <a-form-item field="status" label="执行状态">-->
<!-- <a-select v-model="formModel.status"-->
<!-- :options="toOptions(execStatusKey)"-->
<!-- placeholder="请选择执行状态" />-->
<!-- </a-form-item>-->
<!-- &lt;!&ndash; 执行开始时间 &ndash;&gt;-->
<!-- <a-form-item field="startTime" label="执行开始时间">-->
<!-- <a-date-picker v-model="formModel.startTime"-->
<!-- style="width: 100%"-->
<!-- placeholder="请选择执行开始时间"-->
<!-- show-time />-->
<!-- </a-form-item>-->
<!-- &lt;!&ndash; 执行完成时间 &ndash;&gt;-->
<!-- <a-form-item field="finishTime" label="执行完成时间">-->
<!-- <a-date-picker v-model="formModel.finishTime"-->
<!-- style="width: 100%"-->
<!-- placeholder="请选择执行完成时间"-->
<!-- show-time />-->
<!-- </a-form-item>-->
<!-- </a-form>-->
<!-- </a-spin>-->
<!-- </a-modal>-->
<!--</template>-->
<!--<script lang="ts">-->
<!-- export default {-->
<!-- name: 'execLogFormModal'-->
<!-- };-->
<!--</script>-->
<!--<script lang="ts" setup>-->
<!-- import type { ExecLogUpdateRequest } from '@/api/exec/exec-log';-->
<!-- import { ref } from 'vue';-->
<!-- import useLoading from '@/hooks/loading';-->
<!-- import useVisible from '@/hooks/visible';-->
<!-- import formRules from '../types/form.rules';-->
<!-- import { execStatusKey } from '../types/const';-->
<!-- import { createExecLog, updateExecLog } from '@/api/exec/exec-log';-->
<!-- import { Message } from '@arco-design/web-vue';-->
<!-- import { useDictStore } from '@/store';-->
<!-- const emits = defineEmits(['added', 'updated']);-->
<!-- const { visible, setVisible } = useVisible();-->
<!-- const { loading, setLoading } = useLoading();-->
<!-- const { toOptions } = useDictStore();-->
<!-- const title = ref<string>();-->
<!-- const isAddHandle = ref<boolean>(true);-->
<!-- const formRef = ref<any>();-->
<!-- const formModel = ref<ExecLogUpdateRequest>({});-->
<!-- const defaultForm = (): ExecLogUpdateRequest => {-->
<!-- return {-->
<!-- id: undefined,-->
<!-- userId: undefined,-->
<!-- username: undefined,-->
<!-- source: undefined,-->
<!-- sourceId: undefined,-->
<!-- description: undefined,-->
<!-- command: undefined,-->
<!-- timeout: undefined,-->
<!-- status: undefined,-->
<!-- startTime: undefined,-->
<!-- finishTime: undefined,-->
<!-- };-->
<!-- };-->
<!-- // 打开新增-->
<!-- const openAdd = () => {-->
<!-- title.value = '添加执行记录';-->
<!-- isAddHandle.value = true;-->
<!-- renderForm({ ...defaultForm() });-->
<!-- setVisible(true);-->
<!-- };-->
<!-- // 打开修改-->
<!-- const openUpdate = (record: any) => {-->
<!-- title.value = '修改执行记录';-->
<!-- isAddHandle.value = false;-->
<!-- renderForm({ ...defaultForm(), ...record });-->
<!-- setVisible(true);-->
<!-- };-->
<!-- // 渲染表单-->
<!-- const renderForm = (record: any) => {-->
<!-- formModel.value = Object.assign({}, record);-->
<!-- };-->
<!-- defineExpose({ openAdd, openUpdate });-->
<!-- // 确定-->
<!-- const handlerOk = async () => {-->
<!-- setLoading(true);-->
<!-- try {-->
<!-- // 验证参数-->
<!-- const error = await formRef.value.validate();-->
<!-- if (error) {-->
<!-- return false;-->
<!-- }-->
<!-- if (isAddHandle.value) {-->
<!-- // 新增-->
<!-- await createExecLog(formModel.value);-->
<!-- Message.success('创建成功');-->
<!-- emits('added');-->
<!-- } else {-->
<!-- // 修改-->
<!-- await updateExecLog(formModel.value);-->
<!-- Message.success('修改成功');-->
<!-- emits('updated');-->
<!-- }-->
<!-- // 清空-->
<!-- handlerClear();-->
<!-- } catch (e) {-->
<!-- return false;-->
<!-- } finally {-->
<!-- setLoading(false);-->
<!-- }-->
<!-- };-->
<!-- // 关闭-->
<!-- const handleClose = () => {-->
<!-- handlerClear();-->
<!-- };-->
<!-- // 清空-->
<!-- const handlerClear = () => {-->
<!-- setLoading(false);-->
<!-- };-->
<!--</script>-->
<!--<style lang="less" scoped>-->
<!--</style>-->

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

@@ -95,7 +95,15 @@
@expand="loadHostExecData">
<!-- 展开表格 -->
<template #expand-row="{ record }">
<exec-host-log-table :row="record" />
<exec-host-log-table :row="record"
@view-command="s => emits('viewCommand', s)"
@view-params="s => emits('viewParams', s)" />
</template>
<!-- 执行命令 -->
<template #command="{ record }">
<span :title="record.command">
{{ record.command }}
</span>
</template>
<!-- 执行状态 -->
<template #status="{ record }">
@@ -105,17 +113,55 @@
</template>
<!-- 执行时间 -->
<template #startTime="{ record }">
<span class="start-time">
<span class="table-cell-value">
{{ (record.startTime && dateFormat(new Date(record.startTime))) || '-' }}
</span>
<br>
<span class="exec-duration usn">
<span class="table-cell-sub-value usn" style="font-size: 12px;">
持续时间: {{ formatDuration(record.startTime, record.finishTime) || '-' }}
</span>
</template>
<!-- 操作 -->
<template #handle="{ record }">
<div class="table-handle-wrapper">
<!-- 重新执行 -->
<a-popconfirm content="确定要重新执行吗?"
position="left"
type="warning"
@ok="deleteRow(record)">
<a-button v-permission="['asset:exec:exec-command']"
type="text"
size="mini">
重新执行
</a-button>
</a-popconfirm>
<!-- 命令 -->
<a-button v-permission="['asset:exec:interrupt-exec']"
type="text"
size="mini"
@click="emits('viewCommand', record.command)">
命令
</a-button>
<!-- 日志 -->
<a-button v-permission="['asset:exec:interrupt-exec']"
type="text"
size="mini"
@click="emits('viewLog', record.id)">
日志
</a-button>
<!-- 中断 -->
<a-popconfirm content="确定要中断执行吗?"
position="left"
type="warning"
@ok="interruptedExec(record)">
<a-button v-permission="['asset:exec:interrupt-exec']"
type="text"
size="mini"
status="danger"
:disabled="record.status !== execStatus.WAITING && record.status !== execStatus.RUNNING">
中断
</a-button>
</a-popconfirm>
<!-- 删除 -->
<a-popconfirm content="确认删除这条记录吗?"
position="left"
@@ -147,19 +193,25 @@
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { execStatusKey } from '../types/const';
import { execStatus, execStatusKey } from '../types/const';
import { useExpandable, usePagination, useRowSelection } from '@/types/table';
import { useDictStore } from '@/store';
import { dateFormat, formatDuration } from '@/utils';
import { interruptExec } from '@/api/exec/exec';
import UserSelector from '@/components/user/user/selector/index.vue';
import ExecHostLogTable from './exec-host-log-table.vue';
const emits = defineEmits(['viewCommand', 'viewParams', 'viewLog']);
// TODO 日志 清理 轮询状态 ctrl日志 ctrl重新执行
const pagination = usePagination();
const rowSelection = useRowSelection();
const expandable = useExpandable();
const { loading, setLoading } = useLoading();
const { toOptions, getDictValue } = useDictStore();
const tableRef = ref();
const selectedKeys = ref<number[]>([]);
const tableRenderData = ref<ExecLogQueryResponse[]>([]);
const formModel = reactive<ExecLogQueryRequest>({
@@ -204,6 +256,22 @@
}
};
// 中断执行
const interruptedExec = async (record: ExecLogQueryResponse) => {
try {
setLoading(true);
// 调用中断接口
await interruptExec({
logId: record.id
});
Message.success('已中断');
record.status = execStatus.COMPLETED;
} catch (e) {
} finally {
setLoading(false);
}
};
// 加载主机数据
const loadHostExecData = async (key: number, record: ExecLogQueryResponse) => {
if (record.hosts) {
@@ -224,6 +292,7 @@
pagination.current = request.page;
pagination.pageSize = request.limit;
selectedKeys.value = [];
tableRef.value.expandAll(false);
} catch (e) {
} finally {
setLoading(false);
@@ -242,16 +311,6 @@
</script>
<style lang="less" scoped>
.start-time {
color: var(--color-text-2);
}
.exec-duration {
display: flex;
margin-top: 4px;
color: var(--color-text-3);
}
:deep(.arco-table-cell-fixed-expand) {
width: 100% !important;
}

32
orion-ops-ui/src/views/exec/exec-log/index.vue
View File

@@ -1,11 +1,15 @@
<template>
<div class="layout-container" v-if="render">
<!-- 列表-表格 -->
<exec-log-table />
<!-- 添加修改模态框 -->
<!-- <exec-log-form-modal ref="modal"-->
<!-- @added="modalAddCallback"-->
<!-- @updated="modalUpdateCallback" />-->
<exec-log-table @view-command="viewCommand"
@view-params="viewParams" />
<!-- json 模态框 -->
<json-editor-modal ref="jsonModal"
:esc-to-close="true" />
<!-- shell 模态框 -->
<shell-editor-modal ref="shellModal"
:footer="false"
:esc-to-close="true" />
</div>
</template>
@@ -20,19 +24,21 @@
import { useDictStore } from '@/store';
import { dictKeys } from './types/const';
import ExecLogTable from './components/exec-log-table.vue';
import JsonEditorModal from '@/components/view/json-editor/modal/index.vue';
import ShellEditorModal from '@/components/view/shell-editor/modal/index.vue';
const render = ref(false);
const table = ref();
const modal = ref();
const jsonModal = ref();
const shellModal = ref();
// 添加回调
const modalAddCallback = () => {
table.value.addedCallback();
// 查看命令
const viewCommand = (data: string) => {
shellModal.value.open(data, '命令');
};
// 修改回调
const modalUpdateCallback = () => {
table.value.updatedCallback();
// 查看参数
const viewParams = (data: string) => {
jsonModal.value.open(JSON.parse(data));
};
onBeforeMount(async () => {

76
orion-ops-ui/src/views/exec/exec-log/types/form.rules.ts
View File

@@ -1,76 +0,0 @@
import type { FieldRule } from '@arco-design/web-vue';
export const userId = [{
required: true,
message: '请输入执行用户id'
}] as FieldRule[];
export const username = [{
required: true,
message: '请输入执行用户名'
}, {
maxLength: 32,
message: '执行用户名长度不能大于32位'
}] as FieldRule[];
export const source = [{
required: true,
message: '请输入执行来源'
}, {
maxLength: 12,
message: '执行来源长度不能大于12位'
}] as FieldRule[];
export const sourceId = [{
required: true,
message: '请输入执行来源id'
}] as FieldRule[];
export const description = [{
required: true,
message: '请输入执行描述'
}, {
maxLength: 128,
message: '执行描述长度不能大于128位'
}] as FieldRule[];
export const command = [{
required: true,
message: '请输入执行命令'
}] as FieldRule[];
export const timeout = [{
required: true,
message: '请输入超时时间'
}] as FieldRule[];
export const status = [{
required: true,
message: '请输入执行状态'
}, {
maxLength: 12,
message: '执行状态长度不能大于12位'
}] as FieldRule[];
export const startTime = [{
required: true,
message: '请输入执行开始时间'
}] as FieldRule[];
export const finishTime = [{
required: true,
message: '请输入执行完成时间'
}] as FieldRule[];
export default {
userId,
username,
source,
sourceId,
description,
command,
timeout,
status,
startTime,
finishTime,
} as Record<string, FieldRule | FieldRule[]>;

93
orion-ops-ui/src/views/exec/exec-log/types/host-table.columns.ts
View File

@@ -1,5 +1,5 @@
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { dateFormat } from '@/utils';
import { isNumber } from '@/utils/is';
const columns = [
{
@@ -10,55 +10,27 @@ const columns = [
align: 'left',
fixed: 'left',
}, {
title: '执行日志id',
dataIndex: 'logId',
slotName: 'logId',
align: 'left',
}, {
title: '主机id',
dataIndex: 'hostId',
slotName: 'hostId',
align: 'left',
}, {
title: '主机名称',
title: '执行主机',
dataIndex: 'hostName',
slotName: 'hostName',
align: 'left',
ellipsis: true,
tooltip: true,
}, {
title: '执行状态',
dataIndex: 'status',
slotName: 'status',
align: 'left',
ellipsis: true,
tooltip: true,
}, {
title: '执行命令',
dataIndex: 'command',
slotName: 'command',
align: 'left',
ellipsis: true,
tooltip: true,
}, {
title: '执行参数',
dataIndex: 'parameter',
slotName: 'parameter',
align: 'left',
ellipsis: true,
tooltip: true,
}, {
title: '退出码',
dataIndex: 'exitStatus',
slotName: 'exitStatus',
align: 'left',
width: 118,
render: ({ record }) => {
return isNumber(record.exitStatus) ? record.exitStatus : '-';
},
}, {
title: '日志路径',
dataIndex: 'logPath',
slotName: 'logPath',
title: '执行状态',
dataIndex: 'status',
slotName: 'status',
align: 'left',
ellipsis: true,
tooltip: true,
width: 118,
}, {
title: '错误信息',
dataIndex: 'errorMessage',
@@ -66,54 +38,17 @@ const columns = [
align: 'left',
ellipsis: true,
tooltip: true,
width: 168,
}, {
title: '执行开始时间',
title: '执行时间',
dataIndex: 'startTime',
slotName: 'startTime',
align: 'left',
width: 180,
render: ({ record }) => {
return record.startTime && dateFormat(new Date(record.startTime));
},
}, {
title: '执行结束时间',
dataIndex: 'finishTime',
slotName: 'finishTime',
align: 'left',
width: 180,
render: ({ record }) => {
return record.finishTime && dateFormat(new Date(record.finishTime));
},
}, {
title: '创建时间',
dataIndex: 'createTime',
slotName: 'createTime',
align: 'center',
width: 180,
render: ({ record }) => {
return dateFormat(new Date(record.createTime));
},
}, {
title: '修改时间',
dataIndex: 'updateTime',
slotName: 'updateTime',
align: 'center',
width: 180,
render: ({ record }) => {
return dateFormat(new Date(record.updateTime));
},
}, {
title: '创建人',
dataIndex: 'creator',
slotName: 'creator',
}, {
title: '修改人',
dataIndex: 'updater',
slotName: 'updater',
width: 190,
}, {
title: '操作',
slotName: 'handle',
width: 130,
width: 258,
align: 'center',
fixed: 'right',
},

40
orion-ops-ui/src/views/exec/exec-log/types/sub-table.columns.ts
View File

@@ -1,40 +0,0 @@
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
const columns = [
{
title: '执行主机',
dataIndex: 'hostName',
slotName: 'hostName',
align: 'left',
width: 168,
ellipsis: true,
tooltip: true,
}, {
title: '执行命令',
dataIndex: 'command',
slotName: 'command',
align: 'left',
ellipsis: true,
tooltip: true,
}, {
title: '执行状态1',
dataIndex: 'status1',
slotName: 'status1',
align: 'left',
width: 118,
}, {
title: '执行时间',
dataIndex: 'startTime',
slotName: 'startTime',
align: 'left',
width: 180,
}, {
title: '操作',
slotName: 'handle',
width: 130,
align: 'center',
fixed: 'right',
},
] as TableColumnData[];
export default columns;

7
orion-ops-ui/src/views/exec/exec-log/types/table.columns.ts
View File

@@ -9,7 +9,7 @@ const columns = [
align: 'left',
fixed: 'left',
}, {
title: '描述',
title: '执行描述',
dataIndex: 'description',
slotName: 'description',
align: 'left',
@@ -22,7 +22,6 @@ const columns = [
slotName: 'command',
align: 'left',
ellipsis: true,
tooltip: true,
}, {
title: '执行用户',
dataIndex: 'username',
@@ -41,11 +40,11 @@ const columns = [
dataIndex: 'startTime',
slotName: 'startTime',
align: 'left',
width: 180,
width: 190,
}, {
title: '操作',
slotName: 'handle',
width: 130,
width: 288,
align: 'center',
fixed: 'right',
},