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

feat: 信令抓包

Browse Source
This commit is contained in:
TsMask
2023-09-23 17:20:50 +08:00
parent 08fdeb89f1
commit 6593419fb7
5 changed files with 467 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/api/trace/pcap.ts
View File

@@ -1,11 +1,33 @@
import { request } from '@/plugins/http-fetch';
// 登录方法
export function login(data: Record<string, string>) {
// 网元抓包生成pcap
export function tcpdumpNeTask(
signal: AbortSignal,
data: Record<string, string>
) {
return request({
url: '/securityManagement/v1/login',
url: '/traceManagement/v1/tcpdumpNeTask',
method: 'post',
data: data,
signal: signal,
});
}
// 网元抓包pcap文件下载
export function tcpdumpPcapDownload(data: Record<string, string>) {
return request({
url: '/traceManagement/v1/tcpdumpPcapDownload',
method: 'post',
data: data,
responseType: 'blob',
});
}
// 网元抓包生成pcap
export function tcpdumpNeUPFTask(data: Record<string, string>) {
return request({
url: '/traceManagement/v1/tcpdumpNeUPFTask',
method: 'post',
data: data,
whithToken: false,
});
}

16
src/i18n/locales/en-US.ts
View File

@@ -154,5 +154,21 @@ export default {
neType: 'SMF Type',
},
},
trace: {
pcap: {
cardTitle: 'PCAP capture',
neType: 'Type',
neIp: 'IP address',
capArg: 'Capture parameters',
capTime: "Duration in seconds",
capLog: "Execution Log",
capDownText: "Download PCAP file",
runText: 'Execute',
runTimeText: 'Execute {s} seconds',
stopText: 'Interrupt',
capStart: 'Start capturing packets',
capStop: 'Stop capturing packets',
},
},
},
};

34
src/i18n/locales/zh-CN.ts
View File

@@ -126,23 +126,23 @@ export default {
neTypePlease: '查询网元类型',
neType: 'UDM网元类型',
export: '导出',
exportConfirm: "确认导出全部鉴权用户数据吗?",
exportConfirm: '确认导出全部鉴权用户数据吗?',
import: '导入',
loadDataConfirm: "确认要重新加载数据吗?",
loadData: "更新数据",
loadDataConfirm: '确认要重新加载数据吗?',
loadData: '更新数据',
loadDataTip: '成功获取更新数据：{num}条，系统内部进行数据更新，请勿重复点击获取更新!!!',
num:'放号数',
num: '放号数',
batchAddText: '批量新增',
batchDelText: '批量删除',
batchDelText: '批量删除',
},
sub:{
sub: {
neTypePlease: '查询网元类型',
neType: 'UDM网元类型',
export: '导出',
exportConfirm: "确认导出全部签约用户数据吗?",
exportConfirm: '确认导出全部签约用户数据吗?',
import: '导入',
loadDataConfirm: "确认要重新加载数据吗?",
loadData: "更新数据",
loadDataConfirm: '确认要重新加载数据吗?',
loadData: '更新数据',
loadDataTip: '成功获取更新数据：{num}条，系统内部进行数据更新，请勿重复点击获取更新!!!',
},
base5G: {
@@ -154,5 +154,21 @@ export default {
neType: 'SMF网元类型',
},
},
trace: {
pcap: {
cardTitle: 'PCAP捕获',
neType: '网元类型',
neIp: '网元IP地址',
capArg: '抓包参数',
capTime: "时长（秒's）",
capLog: "执行日志",
capDownText: "下载PCAP文件",
runText: '执行',
runTimeText: '执行 {s} 秒',
stopText: '中断',
capStart: '开始抓包',
capStop: '停止抓包',
},
},
},
};

21
src/plugins/http-fetch.ts
View File

@@ -69,6 +69,8 @@ type OptionsType = {
repeatSubmit?: boolean;
/**携带授权Token请求头 */
whithToken?: boolean;
/**中断控制信号，timeout不会生效 */
signal?: AbortSignal;
};
/**默认请求参数 */
@@ -87,6 +89,7 @@ const FATCH_OPTIONS: OptionsType = {
credentials: undefined,
repeatSubmit: true,
whithToken: true,
signal: undefined
};
/**请求前的拦截 */
@@ -200,15 +203,17 @@ function interceptorResponse(res: ResultType): ResultType | Promise<any> {
* @returns 返回 Promise<ResultType>
*/
export async function request(options: OptionsType): Promise<ResultType> {
options = Object.assign({}, FATCH_OPTIONS, options);
let timeoutId: any = 0;
// 请求超时控制请求终止
const controller = new AbortController();
const { signal } = controller;
options = Object.assign({ signal }, FATCH_OPTIONS, options);
const timeoutId = setTimeout(() => {
controller.abort(); // 终止请求
}, options.timeout);
if (!options.signal) {
const controller = new AbortController();
const { signal } = controller;
options.signal = signal;
timeoutId = setTimeout(() => {
controller.abort(); // 终止请求
}, options.timeout);
}
// 检查请求拦截
const beforeReq = beforeRequest(options);

471
src/views/trace/pcap/index.vue
View File

@@ -1,45 +1,253 @@
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { onMounted, reactive, toRaw } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout';
import { Modal } from 'ant-design-vue/lib/components';
import message from 'ant-design-vue/lib/message';
import { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import saveAs from 'file-saver';
import useNeInfoStore from '@/store/modules/neinfo';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import {
RESULT_CODE_ERROR,
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/trace/pcap';
import { ref } from 'vue';
const { t } = useI18n();
let state = reactive<{
/**上传状态 */
loading: boolean;
uploadFilePath: string;
downloadFilePath: string;
/*文件列表 */
fileList: UploadFile<any>[];
}>({
loading: false,
uploadFilePath: '',
downloadFilePath: '',
fileList: [
// {
// uid: '1',
// percent: 100,
// status: 'success',
// name: 'xxx.png',
// url: '/upload/default/2023/06/xxx.png',
// thumbUrl: '/upload/default/2023/06/xxx.png',
// },
],
/**对话框对象信息状态类型 */
type ModalStateType = {
/**网元类型 */
neType: string[];
/**表单数据 */
from: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
/**执行日志 */
execLogMsg: string;
/**文件名 */
fileName: string;
/**下载文件按钮 */
downBtn: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
neType: [],
from: {
ip: '',
cmd: 'sctp or tcp port 8080 or 8088',
timeout: 60,
upfStart: 'pcap dispatch trace on max 100000',
upfStop: 'pcap dispatch trace off',
},
confirmLoading: false,
execLogMsg: '',
fileName: '',
downBtn: false,
});
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: [''],
ip: '',
});
function fnNeChange(_: any, item: any) {
modalState.from.ip = item[1].ip;
modalState.execLogMsg = '';
modalState.fileName = '';
modalState.downBtn = false;
runTime.value = 0;
}
/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
modalState.from,
reactive({
cmd: [{ required: true, message: 'tcpdump any 参数!' }],
timeout: [{ required: true, message: '执行时长，单位是秒!' }],
upfStart: [{ required: true, message: 'upf start pacp 命令!' }],
upfStop: [{ required: true, message: 'upf stop pacp 命令!' }],
})
);
// 创建 AbortController 实例
let controller = new AbortController();
let timeoutId: any = 0;
let runTime = ref<number>(0);
/**普通抓包执行 */
function fnStart() {
modalStateFrom
.validate(['cmd', 'timeout'])
.then(() => {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
const hide = message.loading('正在执行...', 0);
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: `执行超时`,
duration: 2,
});
// 超时终止请求
controller.abort();
}
}, 1000);
tcpdumpNeTask(signal, {
neType: modalState.neType[0],
neId: modalState.neType[1],
timeout: from.timeout,
cmd: from.cmd,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: `执行完成`,
duration: 3,
});
let logmsg = res.data.cmd + '\n\n' + res.data.msg;
logmsg = logmsg.replace(' \n', '\n\n');
modalState.execLogMsg = logmsg;
modalState.fileName = res.data.fileName;
modalState.downBtn = true;
} else if (
res.code === RESULT_CODE_ERROR &&
res.msg.includes('timeout')
) {
message.warning({
content: `中断执行`,
duration: 3,
});
} else {
message.error({
content: `执行失败`,
duration: 3,
});
}
})
.finally(() => {
hide();
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: `无效文件名`,
duration: 2,
});
return;
}
const key = 'tcpdumpPcapDownload';
message.loading({ content: '请稍等...', key });
tcpdumpPcapDownload({
neType: modalState.neType[0],
neId: modalState.neType[1],
fileName: modalState.fileName,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: `已完成`,
key,
duration: 2,
});
saveAs(res.data, modalState.fileName);
} else {
message.error({
content: `${res.msg}`,
key,
duration: 2,
});
}
});
}
/**UPF抓包执行 */
function fnUPF(runType: 'start' | 'stop') {
let validateArr = ['upfStop'];
if (runType === 'start') {
validateArr = ['upfStart'];
}
modalStateFrom
.validate(validateArr)
.then(() => {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
const hide = message.loading('请稍等...', 0);
tcpdumpNeUPFTask({
neType: modalState.neType[0],
neId: modalState.neType[1],
runType: runType,
cmd: from.upfStart,
})
.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') {
if (res.data.msg.includes('already')) {
message.warning({
content: `已经执行, 请根据情况停止抓包`,
duration: 10,
});
} else {
message.success({
content: `执行成功, 请根据情况停止抓包`,
duration: 10,
});
}
}
if (runType === 'stop') {
if (res.data.msg.includes('already')) {
message.warning({
content: `已经停止, 请根据情况开始抓包`,
duration: 10,
});
} else {
message.success({
content: `执行成功, 抓包已停止`,
duration: 10,
});
modalState.downBtn = true;
}
}
} else {
message.error({
content: `执行失败`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
});
}
onMounted(() => {
// 获取网元网元列表
@@ -48,7 +256,9 @@ onMounted(() => {
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.data.length > 0) {
console.log(res.data);
const info = res.data[0];
modalState.neType = [info.neType, info.neId];
modalState.from.ip = info.ip;
}
} else {
message.warning({
@@ -62,63 +272,156 @@ onMounted(() => {
<template>
<PageContainer>
<a-card title="PCAP捕获">
<a-card :title="t('views.trace.pcap.cardTitle')">
<a-row :gutter="16">
<a-col :lg="8" :md="8" :xs="24">
<a-form-item label="网元类型" name="neType">
<a-cascader
v-model:value="queryParams.neType"
:options="useNeInfoStore().getNeCascaderOtions"
placeholder="请选择网元"
/>
</a-form-item>
</a-col>
<a-col :lg="8" :md="8" :xs="24">
<a-form-item label="IP地址" name="ip">
<a-input
v-model:value="queryParams.ip"
placeholder="查询IP地址"
></a-input>
</a-form-item>
</a-col>
</a-row>
<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.trace.pcap.neType')" name="neType">
<a-cascader
v-model:value="modalState.neType"
:options="useNeInfoStore().getNeCascaderOtions"
@change="fnNeChange"
:allow-clear="false"
placeholder="请选择网元"
/>
</a-form-item>
<a-form-item :label="t('views.trace.pcap.neIp')" name="ip">
<span style="font-weight: bold">{{ modalState.from.ip }}</span>
</a-form-item>
<a-row :gutter="8">
<a-col :span="24" style="margin-bottom: 16px">
<a-input
style="margin-bottom: 16px"
type="text"
placeholder="输入资源文件地址"
v-model:value="state.downloadFilePath"
>
<template #suffix>
<a-button type="primary" @click=""> 普通下载 </a-button>
<template v-if="modalState.neType[0] === 'UPF'">
<a-form-item
:label="t('views.trace.pcap.capStart')"
name="upfStart"
v-bind="modalStateFrom.validateInfos.upfStart"
>
<a-input-group compact>
<a-input
v-model:value="modalState.from.upfStart"
allow-clear
placeholder="upf pacp 命令"
style="width: 80%"
/>
<a-button
type="primary"
style="width: 20%"
:disabled="modalState.confirmLoading"
:loading="modalState.confirmLoading"
@click.prevent="fnUPF('start')"
>
{{ t('views.trace.pcap.runText') }}
</a-button>
</a-input-group>
</a-form-item>
<a-form-item
:label="t('views.trace.pcap.capStop')"
name="upfStop"
v-bind="modalStateFrom.validateInfos.upfStop"
>
<a-input-group compact>
<a-input
v-model:value="modalState.from.upfStop"
allow-clear
placeholder="upf pacp 命令"
style="width: 80%"
/>
<a-button
type="primary"
style="width: 20%"
:disabled="modalState.confirmLoading"
:loading="modalState.confirmLoading"
@click.prevent="fnUPF('stop')"
>
{{ t('views.trace.pcap.runText') }}
</a-button>
</a-input-group>
</a-form-item>
</template>
</a-input>
<a-input
type="text"
placeholder="输入资源文件地址"
v-model:value="state.downloadFilePath"
>
<template #suffix>
<a-button type="primary" @click=""> 分片下载 </a-button>
<template v-else>
<a-form-item
:label="t('views.trace.pcap.capArg')"
name="cmd"
v-bind="modalStateFrom.validateInfos.cmd"
>
<a-input
v-model:value="modalState.from.cmd"
allow-clear
placeholder="tcpdump any 参数"
>
</a-input>
</a-form-item>
<a-form-item
:label="t('views.trace.pcap.capTime')"
name="timeout"
v-bind="modalStateFrom.validateInfos.timeout"
>
<a-input-number
v-model:value="modalState.from.timeout"
placeholder="单位是秒's"
: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.trace.pcap.runTimeText', { s: runTime })
: t('views.trace.pcap.runText')
}}
</a-button>
<a-button
type="dashed"
danger
:disabled="!modalState.confirmLoading"
@click.prevent="fnStop"
>
{{ t('views.trace.pcap.stopText') }}
</a-button>
</a-space>
</a-form-item>
</template>
</a-input>
</a-form>
</a-col>
<a-col :span="24">
<a-space direction="vertical" :size="16">
<a-upload
name="file"
list-type="picture"
:max-count="1"
:show-upload-list="false"
<a-col :offset="2" :lg="10" :md="10" :xs="24">
<a-form layout="vertical" autocomplete="off">
<a-form-item
:label="t('views.trace.pcap.capLog')"
name="execLogMsg"
v-show="!!modalState.execLogMsg"
>
<a-button type="default" :loading="state.loading">
选择文件
<a-textarea
v-model:value="modalState.execLogMsg"
:auto-size="{ minRows: 10, maxRows: 15 }"
:disabled="true"
placeholder="输出执行日志..."
/>
</a-form-item>
<a-form-item v-show="modalState.downBtn">
<a-button
type="primary"
:title="modalState.fileName"
@click.prevent="fnDownPCAP"
>
<template #icon><DownloadOutlined /></template>
{{ t('views.trace.pcap.capDownText') }}
</a-button>
</a-upload>
<a-image :width="128" :height="128" :src="state.uploadFilePath" />
</a-space>
</a-form-item>
</a-form>
</a-col>
</a-row>
</a-card>