ref: 重构抓包功能页面
This commit is contained in:
TsMask
@@ -1,33 +1,27 @@
|
||||
import { request } from '@/plugins/http-fetch';
|
||||
|
||||
// 网元抓包生成pcap
|
||||
export function tcpdumpNeTask(
|
||||
signal: AbortSignal,
|
||||
data: Record<string, string>
|
||||
) {
|
||||
// 网元抓包PACP 开始
|
||||
export function dumpStart(data: Record<string, string>) {
|
||||
return request({
|
||||
url: '/tcpdump/ne',
|
||||
url: '/tcpdump/start',
|
||||
method: 'post',
|
||||
data: data,
|
||||
signal: signal,
|
||||
});
|
||||
}
|
||||
|
||||
// 网元抓包pcap文件下载
|
||||
export function tcpdumpPcapDownload(data: Record<string, string>) {
|
||||
// 网元抓包PACP 结束
|
||||
export function dumpStop(data: Record<string, string>) {
|
||||
return request({
|
||||
url: '/tcpdump/download',
|
||||
url: '/tcpdump/stop',
|
||||
method: 'post',
|
||||
data: data,
|
||||
responseType: 'blob',
|
||||
timeout: 180_000,
|
||||
});
|
||||
}
|
||||
|
||||
// 网元抓包生成pcap
|
||||
export function tcpdumpNeUPFTask(data: Record<string, string>) {
|
||||
// UPF标准版内部抓包
|
||||
export function traceUPF(data: Record<string, string>) {
|
||||
return request({
|
||||
url: '/tcpdump/neUPF',
|
||||
url: '/tcpdump/traceUPF',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
|
||||
@@ -685,33 +685,29 @@ export default {
|
||||
taskDownTip: 'Confirm downloading the signaling details HTML file?',
|
||||
},
|
||||
pcap: {
|
||||
cardTitle: 'PCAP Capture',
|
||||
neType: 'Type',
|
||||
neTypePlease: 'Please select the type of network element',
|
||||
neIp: 'IP Address',
|
||||
capArg: 'Capture Parameters',
|
||||
capArgPlease: 'Please enter tcpdump any support parameters!',
|
||||
capTime: 'Duration in seconds',
|
||||
capTimePlease: 'Please enter the duration, up to 120 seconds',
|
||||
capLog: 'Execution Log',
|
||||
capDownText: 'Download PCAP file',
|
||||
runText: 'Execute',
|
||||
runTimeText: 'Execute {s} seconds',
|
||||
stopText: 'Interrupt',
|
||||
capArgUPFPlease: 'Please select the packet capture command supported by UPF',
|
||||
capStart: 'Start capturing packets',
|
||||
capStop: 'Stop capturing packets',
|
||||
execTimeout: 'Execution timeout',
|
||||
execSuccess: 'Execution completed',
|
||||
execFailed: 'Execution failed',
|
||||
execBreak: 'Break Execution',
|
||||
noFileName: 'Invalid file name',
|
||||
execUPFStartA: 'Executed, please stop capturing packets according to the situation',
|
||||
execUPFStart: 'Execution successful, please stop capturing packets according to the situation',
|
||||
execUPFStopA: 'Stopped, please start capturing packets according to the situation',
|
||||
execUPFStop: 'Execution successful, packet capture stopped',
|
||||
execUPFCmdA: 'Suitable for other network element anomalies',
|
||||
execUPFCmdB: 'Suitable for UPF anomalies',
|
||||
capArgPlease: 'Please enter tcpdump -i any support parameter',
|
||||
cmd: 'Command',
|
||||
execCmd: "Generic tcpdump packet capture command",
|
||||
execCmdsSctp: "Generic tcpdump filter sctp and port commands",
|
||||
execUPFCmdA: 'Suitable for anomalous packet capture of other NE',
|
||||
execUPFCmdB: 'Suitable for UPF anomaly packet capture analysis',
|
||||
textStart: "Start",
|
||||
textStartBatch: "Batch Start",
|
||||
textStop: "Stop",
|
||||
textStopBatch: "Batch Stop",
|
||||
textLog: "Log",
|
||||
textLogMsg: "Log Info",
|
||||
textDown: "Download",
|
||||
downOk: "{title} file download complete",
|
||||
downErr: "{title} file download exception",
|
||||
textSelect: "check list",
|
||||
startTip: "Are you sure you want to start the {title} packet grabbing task?",
|
||||
startOk: "{title} the mission has begun",
|
||||
startErr: "{title} mission anomaly",
|
||||
stopTip: "Are you sure you want to stop the {title} grabbing task?",
|
||||
stopOk: "{title} mandate closed",
|
||||
stopErr: "{title} mission anomaly",
|
||||
stopNotRun: "{title} not running",
|
||||
},
|
||||
task: {
|
||||
neTypePlease: 'Query network element type',
|
||||
|
||||
@@ -685,33 +685,29 @@ export default {
|
||||
taskDownTip: '确认下载信令详情HTML文件?',
|
||||
},
|
||||
pcap: {
|
||||
cardTitle: 'PCAP捕获',
|
||||
neType: '网元类型',
|
||||
neTypePlease: '请选择网元类型',
|
||||
neIp: '网元IP地址',
|
||||
capArg: '抓包参数',
|
||||
capArgPlease: '请输入tcpdump any支持参数!',
|
||||
capTime: "时长（秒's）",
|
||||
capTimePlease: '请输入持续时长，最长120秒',
|
||||
capLog: '执行日志',
|
||||
capDownText: '下载PCAP文件',
|
||||
runText: '执行',
|
||||
runTimeText: '执行 {s} 秒',
|
||||
stopText: '中断',
|
||||
capArgUPFPlease: '请选择UPF支持的抓包命令',
|
||||
capStart: '开始抓包',
|
||||
capStop: '停止抓包',
|
||||
execTimeout: '执行超时',
|
||||
execSuccess: '执行完成',
|
||||
execFailed: '执行失败',
|
||||
execBreak: '中断执行',
|
||||
noFileName: '无效文件名',
|
||||
execUPFStartA: '已经执行, 请根据情况停止抓包',
|
||||
execUPFStart: '执行成功, 请根据情况停止抓包',
|
||||
execUPFStopA: '已经停止, 请根据情况开始抓包',
|
||||
execUPFStop: '执行成功, 抓包已停止',
|
||||
capArgPlease: '请输入tcpdump -i any支持参数',
|
||||
cmd: '命令',
|
||||
execCmd: "通用tcpdump抓包命令",
|
||||
execCmdsSctp: "过滤sctp和port命令",
|
||||
execUPFCmdA: '适合其他网元异常，UPF配合抓包的情况',
|
||||
execUPFCmdB: '适合UPF异常需要抓包分析的情况',
|
||||
textStart: "开始",
|
||||
textStartBatch: "批量开始",
|
||||
textStop: "停止",
|
||||
textStopBatch: "批量停止",
|
||||
textLog: "日志",
|
||||
textLogMsg: "日志信息",
|
||||
textDown: "下载",
|
||||
downOk: "{title} 文件下载完成",
|
||||
downErr: "{title} 文件下载异常",
|
||||
textSelect: "勾选的",
|
||||
startTip: "确认要开始 {title} 抓包任务吗？",
|
||||
startOk: "{title} 任务已开始",
|
||||
startErr: "{title} 任务异常",
|
||||
stopTip: "确认要停止 {title} 抓包任务吗？",
|
||||
stopOk: "{title} 任务已结束",
|
||||
stopErr: "{title} 任务异常",
|
||||
stopNotRun: "{title} 任务未运行",
|
||||
},
|
||||
task: {
|
||||
neTypePlease: '请选择网元类型',
|
||||
|
||||
@@ -1,57 +1,48 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, reactive, toRaw } from 'vue';
|
||||
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 { listNe } from '@/api/ne/ne';
|
||||
import { getNeFile } from '@/api/tool/neFile';
|
||||
import saveAs from 'file-saver';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import {
|
||||
RESULT_CODE_ERROR,
|
||||
RESULT_CODE_SUCCESS,
|
||||
} from '@/constants/result-constants';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { message, Form } from 'ant-design-vue/lib';
|
||||
import {
|
||||
tcpdumpNeTask,
|
||||
tcpdumpNeUPFTask,
|
||||
tcpdumpPcapDownload,
|
||||
} from '@/api/traceManage/pcap';
|
||||
import { ref } from 'vue';
|
||||
const neInfoStore = useNeInfoStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
/**对话框对象信息状态类型 */
|
||||
type ModalStateType = {
|
||||
/**网元类型 */
|
||||
neType: string[];
|
||||
/**表单数据 */
|
||||
from: Record<string, any>;
|
||||
/**tcpdump命令组 */
|
||||
cmdOptions: Record<string, any>[];
|
||||
/**UPF命令组 */
|
||||
upfCmdOptions: Record<string, any>[];
|
||||
/**UPF是否执行过 */
|
||||
upfExec: boolean;
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
/**执行日志 */
|
||||
execLogMsg: string;
|
||||
/**文件名 */
|
||||
fileName: string;
|
||||
/**下载文件按钮 */
|
||||
downBtn: boolean;
|
||||
cmdOptionsUPF: Record<string, any>[];
|
||||
/**详情框是否显示 */
|
||||
visibleByView: boolean;
|
||||
/**详情框内容 */
|
||||
logMsg: string;
|
||||
};
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
neType: [],
|
||||
from: {
|
||||
ip: '',
|
||||
timestamp: '', // 时间戳记录文件时间
|
||||
// 普通网元
|
||||
cmd: '-n -s 0 -v -w',
|
||||
timeout: 60,
|
||||
// upf
|
||||
upfStart: '',
|
||||
upfStop: '',
|
||||
},
|
||||
upfCmdOptions: [
|
||||
from: {},
|
||||
cmdOptions: [
|
||||
{
|
||||
label: t('views.traceManage.pcap.execCmd'),
|
||||
start: '-n -s 0 -v -w',
|
||||
stop: '',
|
||||
value: 'any',
|
||||
},
|
||||
{
|
||||
label: t('views.traceManage.pcap.execCmdsSctp'),
|
||||
start: 'sctp or tcp port 3030 or 8088',
|
||||
stop: '',
|
||||
value: 'any2',
|
||||
},
|
||||
],
|
||||
cmdOptionsUPF: [
|
||||
{
|
||||
label: t('views.traceManage.pcap.execUPFCmdA'),
|
||||
start: 'pcap trace rx tx max 100000 intfc any',
|
||||
@@ -65,411 +56,434 @@ let modalState: ModalStateType = reactive({
|
||||
value: 'pcap dispatch',
|
||||
},
|
||||
],
|
||||
upfExec: false,
|
||||
confirmLoading: false,
|
||||
execLogMsg: '',
|
||||
fileName: '',
|
||||
downBtn: false,
|
||||
visibleByView: false,
|
||||
logMsg: '',
|
||||
});
|
||||
|
||||
/**网元类型选择对应修改 */
|
||||
function fnNeChange(_: any, item: any) {
|
||||
modalState.from.ip = item[1].ip;
|
||||
modalState.execLogMsg = '';
|
||||
modalState.fileName = '';
|
||||
modalState.downBtn = false;
|
||||
runTime.value = 0;
|
||||
/**表格状态类型 */
|
||||
type TabeStateType = {
|
||||
/**加载等待 */
|
||||
loading: boolean;
|
||||
/**记录数据 */
|
||||
data: object[];
|
||||
/**勾选记录 */
|
||||
selectedRowKeys: (string | number)[];
|
||||
};
|
||||
|
||||
/**表格状态 */
|
||||
let tableState: TabeStateType = reactive({
|
||||
loading: false,
|
||||
data: [],
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
|
||||
/**表格字段列 */
|
||||
let tableColumns: ColumnsType = [
|
||||
{
|
||||
title: t('views.configManage.neManage.neType'),
|
||||
dataIndex: 'neType',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: t('views.configManage.neManage.neId'),
|
||||
dataIndex: 'neId',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: t('views.configManage.neManage.neName'),
|
||||
dataIndex: 'neName',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: t('views.configManage.neManage.ip'),
|
||||
dataIndex: 'ip',
|
||||
align: 'left',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.pcap.cmd'),
|
||||
key: 'cmd',
|
||||
dataIndex: 'serverState',
|
||||
align: 'left',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: t('common.operate'),
|
||||
key: 'id',
|
||||
align: 'left',
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
/**表格多选 */
|
||||
function fnTableSelectedRowKeys(keys: (string | number)[]) {
|
||||
tableState.selectedRowKeys = keys;
|
||||
}
|
||||
|
||||
/**对话框内表单属性和校验规则 */
|
||||
const modalStateFrom = Form.useForm(
|
||||
modalState.from,
|
||||
reactive({
|
||||
cmd: [
|
||||
{ required: true, message: t('views.traceManage.pcap.capArgPlease') },
|
||||
],
|
||||
timeout: [
|
||||
{ required: true, message: t('views.traceManage.pcap.capTimePlease') },
|
||||
],
|
||||
upfStart: [
|
||||
{ required: true, message: t('views.traceManage.pcap.capArgUPFPlease') },
|
||||
],
|
||||
upfStop: [
|
||||
{ required: true, message: t('views.traceManage.pcap.capArgUPFPlease') },
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
// 创建 AbortController 实例
|
||||
let controller = new AbortController();
|
||||
let timeoutId: any = 0;
|
||||
let runTime = ref<number>(0);
|
||||
|
||||
/**普通抓包执行 */
|
||||
function fnStart() {
|
||||
modalStateFrom
|
||||
.validate(['cmd', 'timeout'])
|
||||
.then(() => {
|
||||
modalState.confirmLoading = true;
|
||||
modalState.from.timestamp = `${Date.now()}`;
|
||||
const from = toRaw(modalState.from);
|
||||
controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
timeoutId = setInterval(() => {
|
||||
runTime.value++;
|
||||
if (runTime.value >= from.timeout + 5) {
|
||||
clearInterval(timeoutId);
|
||||
runTime.value = 0;
|
||||
message.warning({
|
||||
content: t('views.traceManage.pcap.execTimeout'),
|
||||
duration: 3,
|
||||
});
|
||||
// 超时终止请求
|
||||
controller.abort();
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
tcpdumpNeTask(signal, {
|
||||
neType: modalState.neType[0],
|
||||
neId: modalState.neType[1],
|
||||
timestamp: from.timestamp,
|
||||
timeout: from.timeout,
|
||||
cmd: from.cmd,
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res)
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('views.traceManage.pcap.execSuccess'),
|
||||
duration: 3,
|
||||
});
|
||||
const msg = res.data.msg;
|
||||
let logmsg = res.data.cmd + '\n\n' + msg;
|
||||
logmsg = logmsg.replace(' \n', '\n\n');
|
||||
modalState.execLogMsg = logmsg;
|
||||
modalState.fileName = res.data.fileName;
|
||||
// 正常抓包时才显示文件下载
|
||||
modalState.downBtn =
|
||||
msg.indexOf('tcpdump: listening on any,') !== -1;
|
||||
} else if (
|
||||
res.code === RESULT_CODE_ERROR &&
|
||||
res.msg.includes('imeout')
|
||||
) {
|
||||
message.warning({
|
||||
content: t('views.traceManage.pcap.execBreak'),
|
||||
duration: 3,
|
||||
});
|
||||
} else {
|
||||
message.error({
|
||||
content: t('views.traceManage.pcap.execFailed'),
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
clearInterval(timeoutId);
|
||||
runTime.value = 0;
|
||||
modalState.confirmLoading = false;
|
||||
});
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
|
||||
});
|
||||
}
|
||||
|
||||
/**普通抓包中断 */
|
||||
function fnStop() {
|
||||
controller.abort(); // 终止请求
|
||||
clearInterval(timeoutId);
|
||||
runTime.value = 0;
|
||||
}
|
||||
|
||||
/**下载PCAP文件 */
|
||||
function fnDownPCAP() {
|
||||
if (!modalState.fileName) {
|
||||
message.warning({
|
||||
content: t('views.traceManage.pcap.noFileName'),
|
||||
duration: 2,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const key = 'tcpdumpPcapDownload';
|
||||
message.loading({ content: t('common.loading'), key });
|
||||
tcpdumpPcapDownload({
|
||||
neType: modalState.neType[0],
|
||||
neId: modalState.neType[1],
|
||||
fileName: modalState.fileName,
|
||||
/**查询全部网元数据列表 */
|
||||
function fnGetList() {
|
||||
if (tableState.loading) return;
|
||||
tableState.loading = true;
|
||||
listNe({
|
||||
bandStatus: false,
|
||||
}).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('views.traceManage.pcap.execSuccess'),
|
||||
key,
|
||||
duration: 3,
|
||||
});
|
||||
saveAs(res.data, modalState.fileName);
|
||||
if (
|
||||
res.code === RESULT_CODE_SUCCESS &&
|
||||
Array.isArray(res.data) &&
|
||||
res.data.length > 0
|
||||
) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
}
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
key,
|
||||
duration: 3,
|
||||
message.warning({
|
||||
content: t('common.noData'),
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
tableState.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**UPF抓包命令选择 */
|
||||
function fnUPFSelectCmd(value: any, option: any) {
|
||||
modalState.from.upfStart = option.start;
|
||||
modalState.from.upfStop = option.stop;
|
||||
/**抓包命令选择 */
|
||||
function fnSelectCmd(id: any, option: any) {
|
||||
modalState.from[id].cmdStart = option.start;
|
||||
modalState.from[id].cmdStop = option.stop;
|
||||
}
|
||||
|
||||
/**UPF抓包执行 */
|
||||
function fnUPF(runType: 'start' | 'stop') {
|
||||
modalStateFrom
|
||||
.validate([runType === 'start' ? 'upfStart' : 'upfStop'])
|
||||
.then(() => {
|
||||
modalState.confirmLoading = true;
|
||||
if (runType === 'start') {
|
||||
modalState.downBtn = false;
|
||||
modalState.from.timestamp = `${Date.now()}`;
|
||||
}
|
||||
const from = toRaw(modalState.from);
|
||||
tcpdumpNeUPFTask({
|
||||
neType: modalState.neType[0],
|
||||
neId: modalState.neType[1],
|
||||
timestamp: from.timestamp,
|
||||
runType: runType === 'start' ? 'start_str' : 'stop_str',
|
||||
cmd: runType === 'start' ? from.upfStart : from.upfStop,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
let logmsg = res.data.cmd + '\n\n' + res.data.msg;
|
||||
logmsg = logmsg.replace(' \n', '\n\n');
|
||||
modalState.execLogMsg = logmsg;
|
||||
modalState.fileName = res.data.fileName;
|
||||
if (runType === 'start') {
|
||||
modalState.upfExec = true;
|
||||
if (res.data.msg.includes('already')) {
|
||||
message.warning({
|
||||
content: t('views.traceManage.pcap.execUPFStartA'),
|
||||
duration: 10,
|
||||
/**
|
||||
* 开始
|
||||
* @param row 行记录
|
||||
*/
|
||||
function fnRecordStart(row?: Record<string, any>) {
|
||||
let neIDs: string[] = [];
|
||||
if (row) {
|
||||
neIDs = [`${row.id}`];
|
||||
} else {
|
||||
row = {
|
||||
neName: t('views.traceManage.pcap.textSelect'),
|
||||
};
|
||||
neIDs = tableState.selectedRowKeys.map(s => `${s}`);
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('views.traceManage.pcap.startTip', { 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 data = Object.assign({ cmd: from.cmdStart }, from.data);
|
||||
if (from.data.neType === 'UPF' && from.cmdStart.startsWith('pcap')) {
|
||||
return traceUPF(data);
|
||||
}
|
||||
return dumpStart(data);
|
||||
});
|
||||
Promise.allSettled(reqArr)
|
||||
.then(resArr => {
|
||||
resArr.forEach((res, idx) => {
|
||||
const title = fromArr[idx].title;
|
||||
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;
|
||||
fromArr[idx].loading = true;
|
||||
message.success({
|
||||
content: t('views.traceManage.pcap.startOk', { title }),
|
||||
duration: 3,
|
||||
});
|
||||
} else {
|
||||
message.success({
|
||||
content: t('views.traceManage.pcap.execUPFStart'),
|
||||
duration: 10,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (runType === 'stop') {
|
||||
modalState.upfExec = false;
|
||||
if (res.data.msg.includes('already')) {
|
||||
message.warning({
|
||||
content: t('views.traceManage.pcap.execUPFStopA'),
|
||||
duration: 10,
|
||||
content: `${resV.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
} else {
|
||||
message.success({
|
||||
content: t('views.traceManage.pcap.execUPFStop'),
|
||||
duration: 10,
|
||||
});
|
||||
modalState.downBtn = true;
|
||||
}
|
||||
} else {
|
||||
message.error({
|
||||
content: t('views.traceManage.pcap.startErr', { title }),
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
message.error({
|
||||
content: t('views.traceManage.pcap.execFailed'),
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
modalState.confirmLoading = false;
|
||||
hide();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 停止
|
||||
* @param row 行记录
|
||||
*/
|
||||
function fnRecordStop(row?: Record<string, any>) {
|
||||
let neIDs: string[] = [];
|
||||
if (row) {
|
||||
neIDs = [`${row.id}`];
|
||||
} else {
|
||||
row = {
|
||||
neName: t('views.traceManage.pcap.textSelect'),
|
||||
};
|
||||
neIDs = tableState.selectedRowKeys.map(s => `${s}`);
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
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 => {
|
||||
if (from.data.neType === 'UPF' && from.cmdStart.startsWith('pcap')) {
|
||||
return traceUPF(Object.assign({ cmd: from.cmdStop }, from.data));
|
||||
}
|
||||
return dumpStop(Object.assign({ fileName: from.out }, from.data));
|
||||
});
|
||||
Promise.allSettled(reqArr)
|
||||
.then(resArr => {
|
||||
resArr.forEach((res, idx) => {
|
||||
const title = fromArr[idx].title;
|
||||
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;
|
||||
fromArr[idx].loading = false;
|
||||
message.success({
|
||||
content: t('views.traceManage.pcap.stopOk', { title }),
|
||||
duration: 3,
|
||||
});
|
||||
} else if (resV.msg.indexOf('not run') > 0) {
|
||||
message.warning({
|
||||
content: t('views.traceManage.pcap.stopNotRun', { title }),
|
||||
duration: 3,
|
||||
});
|
||||
} else {
|
||||
message.warning({
|
||||
content: `${resV.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
message.error({
|
||||
content: t('views.traceManage.pcap.stopErr', { title }),
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**下载PCAP文件 */
|
||||
function fnDownPCAP(id: number | string) {
|
||||
const from = modalState.from[id];
|
||||
if (!from) return;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
const data = Object.assign(
|
||||
{
|
||||
path: '/tmp',
|
||||
fileName: `${from.out}.pcap`,
|
||||
},
|
||||
from.data
|
||||
);
|
||||
getNeFile(data)
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('views.traceManage.pcap.downOk', { title: from.out }),
|
||||
duration: 3,
|
||||
});
|
||||
saveAs(res.data, data.fileName);
|
||||
} else {
|
||||
message.error({
|
||||
content: t('views.traceManage.pcap.downErr', { title: from.out }),
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
|
||||
.finally(() => {
|
||||
hide();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出显示为 查看
|
||||
* @param dictId 字典编号id
|
||||
*/
|
||||
function fnModalVisibleByVive(id: string | number) {
|
||||
const from = modalState.from[id];
|
||||
if (!from) return;
|
||||
modalState.visibleByView = true;
|
||||
modalState.logMsg = from.log;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalCancel() {
|
||||
modalState.visibleByView = false;
|
||||
modalState.logMsg = '';
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 获取网元网元列表
|
||||
useNeInfoStore()
|
||||
.fnNelist()
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.data.length > 0) {
|
||||
const info = res.data[0];
|
||||
modalState.neType = [info.neType, info.neId];
|
||||
modalState.from.ip = info.ip;
|
||||
}
|
||||
} else {
|
||||
message.warning({
|
||||
content: 'No Data',
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
fnStop();
|
||||
if (modalState.neType[0] === 'UPF') {
|
||||
fnUPF('stop');
|
||||
}
|
||||
// 获取网元列表
|
||||
fnGetList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageContainer>
|
||||
<a-card :title="t('views.traceManage.pcap.cardTitle')">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form
|
||||
name="modalState"
|
||||
:model="modalState"
|
||||
layout="horizontal"
|
||||
autocomplete="off"
|
||||
:label-col="{ span: 5 }"
|
||||
labelWrap
|
||||
>
|
||||
<a-form-item
|
||||
:label="t('views.traceManage.pcap.neType')"
|
||||
name="neType"
|
||||
>
|
||||
<a-cascader
|
||||
v-model:value="modalState.neType"
|
||||
:options="neInfoStore.getNeCascaderOptions"
|
||||
@change="fnNeChange"
|
||||
:allow-clear="false"
|
||||
:placeholder="t('views.traceManage.pcap.neTypePlease')"
|
||||
:disabled="modalState.confirmLoading || modalState.upfExec"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('views.traceManage.pcap.neIp')" name="ip">
|
||||
<span style="font-weight: bold">{{ modalState.from.ip }}</span>
|
||||
</a-form-item>
|
||||
<a-card :bordered="false" :body-style="{ padding: '0px' }">
|
||||
<!-- 插槽-卡片左侧侧 -->
|
||||
<template #title>
|
||||
<a-space :size="8" align="center">
|
||||
<a-button type="primary" @click.prevent="fnRecordStart()">
|
||||
{{ t('views.traceManage.pcap.textStartBatch') }}
|
||||
</a-button>
|
||||
<a-button danger @click.prevent="fnRecordStop()">
|
||||
{{ t('views.traceManage.pcap.textStopBatch') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<template v-if="modalState.neType[0] === 'UPF'">
|
||||
<a-form-item
|
||||
:label="t('views.traceManage.pcap.capArg')"
|
||||
name="upfStart"
|
||||
v-bind="modalStateFrom.validateInfos.upfStart"
|
||||
>
|
||||
<a-auto-complete
|
||||
v-model:value="modalState.from.upfStart"
|
||||
:options="modalState.upfCmdOptions"
|
||||
:placeholder="t('views.traceManage.pcap.capArgUPFPlease')"
|
||||
:disabled="modalState.confirmLoading"
|
||||
allow-clear
|
||||
@select="fnUPFSelectCmd"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{ offset: 5 }">
|
||||
<a-space :size="8">
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="modalState.upfExec"
|
||||
:loading="modalState.confirmLoading"
|
||||
@click.prevent="fnUPF('start')"
|
||||
>
|
||||
<template #icon><ApiOutlined /></template>
|
||||
{{ t('views.traceManage.pcap.capStart') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
danger
|
||||
:disabled="!modalState.upfExec"
|
||||
:loading="modalState.confirmLoading"
|
||||
@click.prevent="fnUPF('stop')"
|
||||
>
|
||||
{{ t('views.traceManage.pcap.capStop') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-form-item
|
||||
:label="t('views.traceManage.pcap.capArg')"
|
||||
name="cmd"
|
||||
v-bind="modalStateFrom.validateInfos.cmd"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="modalState.from.cmd"
|
||||
allow-clear
|
||||
:placeholder="t('views.traceManage.pcap.capArgPlease')"
|
||||
>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="t('views.traceManage.pcap.capTime')"
|
||||
name="timeout"
|
||||
v-bind="modalStateFrom.validateInfos.timeout"
|
||||
>
|
||||
<a-input-number
|
||||
v-model:value="modalState.from.timeout"
|
||||
:placeholder="t('views.traceManage.pcap.capTimePlease')"
|
||||
:min="5"
|
||||
:max="120"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{ offset: 5 }">
|
||||
<a-space :size="8">
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="modalState.confirmLoading"
|
||||
:loading="modalState.confirmLoading"
|
||||
@click.prevent="fnStart"
|
||||
>
|
||||
<template #icon><ApiOutlined /></template>
|
||||
{{
|
||||
runTime != 0
|
||||
? t('views.traceManage.pcap.runTimeText', {
|
||||
s: runTime,
|
||||
})
|
||||
: t('views.traceManage.pcap.runText')
|
||||
}}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
danger
|
||||
:disabled="!modalState.confirmLoading"
|
||||
@click.prevent="fnStop"
|
||||
>
|
||||
{{ t('views.traceManage.pcap.stopText') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-col :offset="2" :lg="10" :md="10" :xs="24">
|
||||
<a-form layout="vertical" autocomplete="off">
|
||||
<a-form-item
|
||||
:label="t('views.traceManage.pcap.capLog')"
|
||||
name="execLogMsg"
|
||||
v-show="!!modalState.execLogMsg"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="modalState.execLogMsg"
|
||||
:auto-size="{ minRows: 10, maxRows: 15 }"
|
||||
:disabled="true"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-show="modalState.downBtn">
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.reloadText') }}</template>
|
||||
<a-button type="text" @click.prevent="fnGetList()">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 表格列表 -->
|
||||
<a-table
|
||||
class="table"
|
||||
row-key="id"
|
||||
size="small"
|
||||
:columns="tableColumns"
|
||||
:loading="tableState.loading"
|
||||
:data-source="tableState.data"
|
||||
:pagination="false"
|
||||
:scroll="{ x: tableColumns.length * 120 }"
|
||||
:row-selection="{
|
||||
type: 'checkbox',
|
||||
selectedRowKeys: tableState.selectedRowKeys,
|
||||
onChange: fnTableSelectedRowKeys,
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'cmd'">
|
||||
<a-auto-complete
|
||||
v-model:value="modalState.from[record.id].cmdStart"
|
||||
:options="
|
||||
record.neType === 'UPF'
|
||||
? modalState.cmdOptions.concat(modalState.cmdOptionsUPF)
|
||||
: modalState.cmdOptions
|
||||
"
|
||||
:placeholder="t('views.traceManage.pcap.capArgPlease')"
|
||||
:disabled="modalState.from[record.id].loading"
|
||||
allow-clear
|
||||
@select="(_: any, option: any) => fnSelectCmd(record.id, option)"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'id'">
|
||||
<a-space :size="8" align="start" direction="horizontal">
|
||||
<a-button
|
||||
type="primary"
|
||||
:title="modalState.fileName"
|
||||
@click.prevent="fnDownPCAP"
|
||||
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.id)"
|
||||
v-if="
|
||||
!modalState.from[record.id].loading &&
|
||||
modalState.from[record.id].out
|
||||
"
|
||||
>
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
{{ t('views.traceManage.pcap.capDownText') }}
|
||||
{{ t('views.traceManage.pcap.textDown') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 详情框 -->
|
||||
<a-modal
|
||||
width="800px"
|
||||
:visible="modalState.visibleByView"
|
||||
:footer="null"
|
||||
:maskClosable="false"
|
||||
:keyboard="false"
|
||||
:title="t('views.traceManage.pcap.textLogMsg')"
|
||||
@cancel="fnModalCancel"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="modalState.logMsg"
|
||||
:auto-size="{ minRows: 2, maxRows: 24 }"
|
||||
:disabled="true"
|
||||
style="color: rgba(0, 0, 0, 0.85)"
|
||||
/>
|
||||
</a-modal>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user