OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

perf: 抓包功能优化

Browse Source
This commit is contained in:
TsMask
2024-08-20 15:49:03 +08:00
parent 03352f3aa8
commit 999ccf64ad
4 changed files with 285 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
src/views/traceManage/pcap/index.vue
View File

@@ -3,7 +3,12 @@ import { onMounted, reactive } from 'vue';
import { message, Modal } from 'ant-design-vue/lib';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { PageContainer } from 'antdv-pro-layout';
import { dumpStart, dumpStop, traceUPF } from '@/api/traceManage/pcap';
import {
dumpStart,
dumpStop,
dumpDownload,
traceUPF,
} from '@/api/traceManage/pcap';
import { listAllNeInfo } from '@/api/ne/neInfo';
import { getNeFile } from '@/api/tool/neFile';
import saveAs from 'file-saver';
@@ -14,11 +19,50 @@ const { t } = useI18n();
/**对话框对象信息状态类型 */
type ModalStateType = {
/**表单数据 */
from: Record<string, any>;
from: Record<
string,
{
loading: boolean;
/**网元名 */
title: string;
/**命令 */
cmdStart: string;
/**upf标准版需要停止命令，一般空字符 */
cmdStop: string;
/**任务编号 */
taskCode: string;
/**任务日志,upf标准版为空字符串 */
logMsg: string;
/**提交表单参数 */
data: {
neType: string;
neId: string;
cmd?: string;
};
}
>;
/**tcpdump命令组 */
cmdOptions: Record<string, any>[];
cmdOptions: {
/**命令名称 */
label: string;
/**命令选中值 */
value: string;
/**开始命令 */
start: string;
/**停止命令 */
stop: string;
}[];
/**UPF命令组 */
cmdOptionsUPF: Record<string, any>[];
cmdOptionsUPF: {
/**命令名称 */
label: string;
/**命令选中值 */
value: string;
/**开始命令 */
start: string;
/**停止命令 */
stop: string;
}[];
/**详情框是否显示 */
visibleByView: boolean;
/**详情框内容 */
@@ -31,29 +75,35 @@ let modalState: ModalStateType = reactive({
cmdOptions: [
{
label: t('views.traceManage.pcap.execCmd'),
start: '-n -s 0 -v -w',
stop: '',
value: 'any',
start: '-n -v -s 0',
stop: '',
},
{
label: t('views.traceManage.pcap.execCmdsSctp'),
label: t('views.traceManage.pcap.execCmd2'),
value: 'any2',
start: 'sctp or tcp port 3030 or 8088',
stop: '',
value: 'any2',
},
{
label: t('views.traceManage.pcap.execCmd3'),
value: 'any3',
start: '-n -s 0 -v -G 10 -W 7',
stop: '',
},
],
cmdOptionsUPF: [
{
label: t('views.traceManage.pcap.execUPFCmdA'),
value: 'pcap trace',
start: 'pcap trace rx tx max 100000 intfc any',
stop: 'pcap trace rx tx off',
value: 'pcap trace',
},
{
label: t('views.traceManage.pcap.execUPFCmdB'),
value: 'pcap dispatch',
start: 'pcap dispatch trace on max 100000',
stop: 'pcap dispatch trace off',
value: 'pcap dispatch',
},
],
visibleByView: false,
@@ -80,25 +130,25 @@ let tableState: TabeStateType = reactive({
/**表格字段列 */
let tableColumns: ColumnsType = [
{
title: t('views.configManage.neManage.neType'),
title: t('views.ne.common.neType'),
dataIndex: 'neType',
align: 'left',
width: 100,
},
{
title: t('views.configManage.neManage.neId'),
title: t('views.ne.common.neId'),
dataIndex: 'neId',
align: 'left',
width: 100,
},
{
title: t('views.configManage.neManage.neName'),
title: t('views.ne.common.neName'),
dataIndex: 'neName',
align: 'left',
width: 100,
},
{
title: t('views.configManage.neManage.ip'),
title: t('views.ne.common.ipAddr'),
dataIndex: 'ip',
align: 'left',
width: 150,
@@ -108,13 +158,12 @@ let tableColumns: ColumnsType = [
key: 'cmd',
dataIndex: 'serverState',
align: 'left',
width: 300,
width: 350,
},
{
title: t('common.operate'),
key: 'id',
align: 'left',
fixed: 'right',
},
];
@@ -137,20 +186,22 @@ function fnGetList() {
) {
tableState.data = res.data;
// 初始网元参数表单
const { start, stop } = modalState.cmdOptions[0];
for (const item of res.data) {
modalState.from[item.id] = {
loading: false,
title: item.neName, // 网元名
cmdStart: start,
cmdStop: stop, // upf需要停止命令
out: '',
log: '',
data: {
neType: item.neType,
neId: item.neId,
},
};
if (tableState.data.length > 0) {
const { start, stop } = modalState.cmdOptions[0];
for (const item of res.data) {
modalState.from[item.id] = {
loading: false,
title: item.neName,
cmdStart: start,
cmdStop: stop,
taskCode: '',
logMsg: '',
data: {
neType: item.neType,
neId: item.neId,
},
};
}
}
} else {
message.warning({
@@ -166,6 +217,9 @@ function fnGetList() {
function fnSelectCmd(id: any, option: any) {
modalState.from[id].cmdStart = option.start;
modalState.from[id].cmdStop = option.stop;
// 重置任务
modalState.from[id].taskCode = '';
modalState.from[id].logMsg = '';
}
/**
@@ -203,8 +257,9 @@ function fnRecordStart(row?: Record<string, any>) {
if (res.status === 'fulfilled') {
const resV = res.value;
if (resV.code === RESULT_CODE_SUCCESS) {
fromArr[idx].out = resV.data.out;
fromArr[idx].log = resV.data.log;
if (!fromArr[idx].cmdStop) {
fromArr[idx].taskCode = resV.data;
}
fromArr[idx].loading = true;
message.success({
content: t('views.traceManage.pcap.startOk', { title }),
@@ -250,24 +305,51 @@ function fnRecordStop(row?: Record<string, any>) {
title: t('common.tipTitle'),
content: t('views.traceManage.pcap.stopTip', { title: row.neName }),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const fromArr = neIDs.map(id => modalState.from[id]);
const reqArr = fromArr.map(from => {
const reqArr: any = [];
for (const from of fromArr) {
if (from.data.neType === 'UPF' && from.cmdStart.startsWith('pcap')) {
return traceUPF(Object.assign({ cmd: from.cmdStop }, from.data));
reqArr.push(
traceUPF(Object.assign({ cmd: from.cmdStop }, from.data))
);
} else {
const taskCode = from.taskCode;
if (!taskCode) {
message.warning({
content: t('views.traceManage.pcap.stopNotRun', {
title: from.title,
}),
duration: 3,
});
continue;
}
reqArr.push(
dumpStop(Object.assign({ taskCode: from.taskCode }, from.data))
);
}
return dumpStop(Object.assign({ fileName: from.out }, from.data));
});
}
if (reqArr.length === 0) return;
const hide = message.loading(t('common.loading'), 0);
Promise.allSettled(reqArr)
.then(resArr => {
resArr.forEach((res, idx) => {
const title = fromArr[idx].title;
if (res.status === 'fulfilled') {
const resV = res.value;
fromArr[idx].loading = false;
fromArr[idx].logMsg = '';
if (fromArr[idx].cmdStop) {
fromArr[idx].taskCode = '';
}
if (resV.code === RESULT_CODE_SUCCESS) {
fromArr[idx].out = resV.data.out;
fromArr[idx].log = resV.data.log;
fromArr[idx].loading = false;
if (fromArr[idx].cmdStop) {
fromArr[idx].taskCode = resV.data;
} else {
fromArr[idx].logMsg = resV.msg;
}
message.success({
content: t('views.traceManage.pcap.stopOk', { title }),
duration: 3,
@@ -314,11 +396,11 @@ function fnDownPCAP(row?: Record<string, any>) {
title: t('common.tipTitle'),
content: t('views.traceManage.pcap.downTip', { title: row.neName }),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const fromArr = neIDs.map(id => modalState.from[id]);
const reqArr = [];
const reqArr: any = [];
for (const from of fromArr) {
if (!from.out) {
const taskCode = from.taskCode;
if (!taskCode) {
message.warning({
content: t('views.traceManage.pcap.stopNotRun', {
title: from.title,
@@ -327,24 +409,25 @@ function fnDownPCAP(row?: Record<string, any>) {
});
continue;
}
reqArr.push(
getNeFile(
Object.assign(
{
path: '/tmp',
fileName: `${from.out}.pcap`,
},
from.data
)
)
);
if (from.data.neType === 'UPF' && taskCode.startsWith('/tmp')) {
const fileName = taskCode.substring(taskCode.lastIndexOf('/') + 1);
reqArr.push(
getNeFile(Object.assign({ path: '/tmp', fileName }, from.data))
);
} else {
reqArr.push(
dumpDownload(Object.assign({ taskCode: taskCode }, from.data))
);
}
}
if (reqArr.length === 0) return;
const hide = message.loading(t('common.loading'), 0);
Promise.allSettled(reqArr)
.then(resArr => {
resArr.forEach((res, idx) => {
const title = fromArr[idx].title;
const taskCode = fromArr[idx].taskCode;
if (res.status === 'fulfilled') {
const resV = res.value;
@@ -354,9 +437,10 @@ function fnDownPCAP(row?: Record<string, any>) {
duration: 3,
});
// 文件名
const fileName = `${fromArr[idx].out}.pcap`;
if (fileName.length > 6) {
saveAs(resV.data, fileName);
if (taskCode.startsWith('/tmp')) {
saveAs(resV.data, `${title}_${Date.now()}.pcap`);
} else {
saveAs(resV.data, `${title}_${Date.now()}.zip`);
}
} else {
message.warning({
@@ -379,6 +463,24 @@ function fnDownPCAP(row?: Record<string, any>) {
});
}
/**批量操作 */
function fnBatchOper(key: string) {
switch (key) {
case 'start':
fnRecordStart();
break;
case 'stop':
fnRecordStop();
break;
case 'down':
fnDownPCAP();
break;
default:
console.warn('undefined batch oper', key);
break;
}
}
/**
* 对话框弹出显示为 查看
* @param dictId 字典编号id
@@ -387,7 +489,7 @@ function fnModalVisibleByVive(id: string | number) {
const from = modalState.from[id];
if (!from) return;
modalState.visibleByView = true;
modalState.logMsg = from.log;
modalState.logMsg = from.logMsg;
}
/**
@@ -411,30 +513,28 @@ onMounted(() => {
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-button
type="primary"
:disabled="tableState.selectedRowKeys.length <= 0"
@click.prevent="fnRecordStart()"
>
<template #icon><PlayCircleOutlined /> </template>
{{ t('views.traceManage.pcap.textStartBatch') }}
</a-button>
<a-button
danger
:disabled="tableState.selectedRowKeys.length <= 0"
@click.prevent="fnRecordStop()"
>
<template #icon><CloseSquareOutlined /> </template>
{{ t('views.traceManage.pcap.textStopBatch') }}
</a-button>
<a-button
type="dashed"
:disabled="tableState.selectedRowKeys.length <= 0"
@click.prevent="fnDownPCAP()"
>
<template #icon><DownloadOutlined /></template>
{{ t('views.traceManage.pcap.textDownBatch') }}
</a-button>
<a-dropdown trigger="click">
<a-button :disabled="tableState.selectedRowKeys.length <= 0">
{{ t('views.traceManage.pcap.batchOper') }}
<DownOutlined />
</a-button>
<template #overlay>
<a-menu @click="({ key }:any) => fnBatchOper(key)">
<a-menu-item key="start">
<PlayCircleOutlined />
{{ t('views.traceManage.pcap.batchStartText') }}
</a-menu-item>
<a-menu-item key="stop">
<StopOutlined />
{{ t('views.traceManage.pcap.batchStopText') }}
</a-menu-item>
<a-menu-item key="down">
<DownloadOutlined />
{{ t('views.traceManage.pcap.batchDownText') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-space>
</template>
@@ -454,12 +554,12 @@ onMounted(() => {
<a-table
class="table"
row-key="id"
size="small"
size="defatult"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:pagination="false"
:scroll="{ x: tableColumns.length * 120 }"
:scroll="{ x: tableColumns.length * 170 }"
:row-selection="{
type: 'checkbox',
selectedRowKeys: tableState.selectedRowKeys,
@@ -484,50 +584,77 @@ onMounted(() => {
</template>
<template v-if="column.key === 'id'">
<a-space :size="8" align="start" direction="horizontal">
<a-button
type="primary"
size="small"
:loading="modalState.from[record.id].loading"
@click.prevent="fnRecordStart(record)"
>
<template #icon><PlayCircleOutlined /> </template>
{{ t('views.traceManage.pcap.textStart') }}
</a-button>
<a-button
type="default"
danger
size="small"
@click.prevent="fnRecordStop(record)"
>
<template #icon><CloseSquareOutlined /> </template>
{{ t('views.traceManage.pcap.textStop') }}
</a-button>
<a-button
type="primary"
ghost
size="small"
@click.prevent="fnModalVisibleByVive(record.id)"
v-if="modalState.from[record.id].log"
>
<template #icon><FileTextOutlined /> </template>
{{ t('views.traceManage.pcap.textLog') }}
</a-button>
<a-button
type="primary"
ghost
size="small"
@click.prevent="fnDownPCAP(record)"
<a-tooltip placement="topRight">
<template #title>
<div>{{ t('views.traceManage.pcap.textStart') }}</div>
</template>
<a-button
type="primary"
size="small"
:disabled="modalState.from[record.id].loading"
@click.prevent="fnRecordStart(record)"
>
<template #icon><PlayCircleOutlined /> </template>
</a-button>
</a-tooltip>
<a-tooltip
placement="topRight"
v-if="
!modalState.from[record.id].loading &&
modalState.from[record.id].out
modalState.from[record.id].loading ||
modalState.from[record.id].cmdStop
"
>
<template #icon><DownloadOutlined /></template>
{{ t('views.traceManage.pcap.textDown') }}
</a-button>
<template #title>
<div>{{ t('views.traceManage.pcap.textStop') }}</div>
</template>
<a-button
type="default"
danger
size="small"
@click.prevent="fnRecordStop(record)"
>
<template #icon><StopOutlined /> </template>
</a-button>
</a-tooltip>
<a-tooltip
placement="topRight"
v-if="
!modalState.from[record.id].loading &&
!!modalState.from[record.id].logMsg
"
>
<template #title>
<div>{{ t('views.traceManage.pcap.textLog') }}</div>
</template>
<a-button
type="primary"
ghost
size="small"
@click.prevent="fnModalVisibleByVive(record.id)"
>
<template #icon><FileTextOutlined /> </template>
</a-button>
</a-tooltip>
<a-tooltip
placement="topRight"
v-if="
!modalState.from[record.id].loading &&
!!modalState.from[record.id].taskCode
"
>
<template #title>
<div>{{ t('views.traceManage.pcap.textDown') }}</div>
</template>
<a-button
type="primary"
ghost
size="small"
@click.prevent="fnDownPCAP(record)"
>
<template #icon><DownloadOutlined /> </template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
@@ -542,12 +669,13 @@ onMounted(() => {
:footer="false"
:maskClosable="false"
:keyboard="false"
:body-style="{ padding: '12px' }"
:title="t('views.traceManage.pcap.textLogMsg')"
@cancel="fnModalCancel"
>
<a-textarea
v-model:value="modalState.logMsg"
:auto-size="{ minRows: 2, maxRows: 24 }"
:auto-size="{ minRows: 2, maxRows: 18 }"
:disabled="true"
style="color: rgba(0, 0, 0, 0.85)"
/>