perf: 重构信令跟踪功能
This commit is contained in:
TsMask
@@ -62,3 +62,18 @@ export function packetKeep(taskNo: string, duration: number = 120) {
|
||||
data: { taskNo, duration },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 信令跟踪文件
|
||||
* @param taskNo 对象
|
||||
* @returns object
|
||||
*/
|
||||
export function packetPCAPFile(taskNo: string) {
|
||||
return request({
|
||||
url: '/trace/packet/filePull',
|
||||
method: 'GET',
|
||||
params: { taskNo },
|
||||
responseType: 'blob',
|
||||
timeout: 180_000,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
|
||||
import { onBeforeUnmount, onMounted, reactive, ref, toRaw } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import DissectionTree from '../tshark/components/DissectionTree.vue';
|
||||
import DissectionDump from '../tshark/components/DissectionDump.vue';
|
||||
import PacketTable from '../tshark/components/PacketTable.vue';
|
||||
import {
|
||||
RESULT_CODE_ERROR,
|
||||
RESULT_CODE_SUCCESS,
|
||||
} from '@/constants/result-constants';
|
||||
import { filePullTask } from '@/api/trace/task';
|
||||
import { OptionsType, WS } from '@/plugins/ws-websocket';
|
||||
import { scriptUrl as wkUrl } from '@/assets/js/wiregasm_worker';
|
||||
import * as wkUtil from '@/plugins/wk-worker';
|
||||
import * as wsUtil from '@/plugins/ws-websocket';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import saveAs from 'file-saver';
|
||||
import {
|
||||
@@ -19,34 +19,20 @@ import {
|
||||
packetStop,
|
||||
packetFilter,
|
||||
packetKeep,
|
||||
packetPCAPFile,
|
||||
} from '@/api/trace/packet';
|
||||
const ws = new WS();
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
import { ColumnsType } from 'ant-design-vue/es/table';
|
||||
const ws = new wsUtil.WS();
|
||||
const wk = new wkUtil.WK();
|
||||
const { t } = useI18n();
|
||||
|
||||
// =========== WK ==============
|
||||
const NO_SELECTION = { id: '', idx: 0, start: 0, length: 0 };
|
||||
|
||||
type StateType = {
|
||||
/**网卡设备列表 */
|
||||
devices: { id: string; label: string; children: any[] }[];
|
||||
/**初始化 */
|
||||
initialized: boolean;
|
||||
/**保活调度器 */
|
||||
keepTimer: any;
|
||||
/**任务 */
|
||||
task: {
|
||||
taskNo: string;
|
||||
device: string;
|
||||
filter: string;
|
||||
outputPCAP: boolean;
|
||||
};
|
||||
/**字段 */
|
||||
columns: string[];
|
||||
|
||||
/**过滤条件 */
|
||||
filter: string;
|
||||
/**过滤条件错误信息 */
|
||||
filterError: string | null;
|
||||
|
||||
/**当前选中的帧编号 */
|
||||
selectedFrame: number;
|
||||
/**当前选中的帧数据 */
|
||||
@@ -57,63 +43,19 @@ type StateType = {
|
||||
selectedTree: typeof NO_SELECTION;
|
||||
/**选择帧的Dump数据标签 */
|
||||
selectedDataSourceIndex: number;
|
||||
|
||||
/**包总数 */
|
||||
totalPackets: number;
|
||||
/**包数据 */
|
||||
packetList: any[];
|
||||
};
|
||||
|
||||
const state = reactive<StateType>({
|
||||
devices: [],
|
||||
initialized: false,
|
||||
keepTimer: null,
|
||||
task: {
|
||||
taskNo: 'laYlTbq',
|
||||
device: '192.168.5.58',
|
||||
filter: 'tcp and (port 33030 or 8080)',
|
||||
outputPCAP: false,
|
||||
},
|
||||
columns: [
|
||||
'No.',
|
||||
'Time',
|
||||
'Source',
|
||||
'Destination',
|
||||
'Protocol',
|
||||
'Length',
|
||||
'Info',
|
||||
],
|
||||
filter: 'tcp and (port 33030 or 8080)',
|
||||
filterError: null,
|
||||
selectedFrame: 1,
|
||||
selectedFrame: 0,
|
||||
/**当前选中的帧数据 */
|
||||
packetFrame: { tree: [], data_sources: [] },
|
||||
packetFrameTreeMap: null, // 注意：Map 需要额外处理
|
||||
selectedTree: NO_SELECTION, // NO_SELECTION 需要定义
|
||||
/**选择帧的Dump数据标签 */
|
||||
selectedDataSourceIndex: 0,
|
||||
// 包数据
|
||||
totalPackets: 0,
|
||||
packetList: [],
|
||||
});
|
||||
|
||||
/**清除帧数据和报文信息状态 */
|
||||
function fnReset() {
|
||||
state.initialized = false;
|
||||
// 选择帧的数据
|
||||
state.selectedFrame = 0;
|
||||
state.packetFrame = { tree: [], data_sources: [] };
|
||||
state.packetFrameTreeMap = null;
|
||||
state.selectedTree = NO_SELECTION;
|
||||
state.selectedDataSourceIndex = 0;
|
||||
// 过滤条件
|
||||
state.filter = 'tcp and (port 33030 or 8080)';
|
||||
state.filterError = null;
|
||||
// 包数据
|
||||
state.totalPackets = 0;
|
||||
state.packetList = [];
|
||||
}
|
||||
|
||||
/**解析帧数据为简单结构 */
|
||||
function parseFrameTree(id: string, node: Record<string, any>) {
|
||||
let map = new Map();
|
||||
@@ -136,15 +78,9 @@ function parseFrameTree(id: string, node: Record<string, any>) {
|
||||
|
||||
return map;
|
||||
}
|
||||
|
||||
/**帧数据点击选中 */
|
||||
function handleSelectedTreeEntry(e: any) {
|
||||
console.log('fnSelectedTreeEntry', e);
|
||||
state.selectedTree = e;
|
||||
}
|
||||
/**报文数据点击选中 */
|
||||
function handleSelectedFindSelection(src_idx: number, pos: number) {
|
||||
console.log('fnSelectedFindSelection', pos);
|
||||
// console.log('fnSelectedFindSelection', pos);
|
||||
if (state.packetFrameTreeMap == null) return;
|
||||
// find the smallest one
|
||||
let current = null;
|
||||
@@ -166,83 +102,274 @@ function handleSelectedFindSelection(src_idx: number, pos: number) {
|
||||
state.selectedTree = state.packetFrameTreeMap.get(current);
|
||||
}
|
||||
}
|
||||
/**帧数据点击选中 */
|
||||
function handleSelectedTree(e: any) {
|
||||
state.selectedTree = e;
|
||||
}
|
||||
|
||||
/**包数据表点击选中 */
|
||||
function handleSelectedFrame(num: number) {
|
||||
console.log('fnSelectedFrame', num, state.totalPackets);
|
||||
const packet = state.packetList.find((v: any) => v.number === num);
|
||||
if (!packet) return;
|
||||
const packetFrame = packet.frame;
|
||||
state.selectedFrame = packet.number;
|
||||
state.packetFrame = packetFrame;
|
||||
state.packetFrameTreeMap = parseFrameTree('root', packetFrame);
|
||||
state.selectedTree = NO_SELECTION;
|
||||
state.selectedDataSourceIndex = 0;
|
||||
/**接收数据后回调 */
|
||||
function wkMessage(res: Record<string, any>) {
|
||||
// console.log('wkMessage', res);
|
||||
switch (res.type) {
|
||||
case 'status':
|
||||
console.info(res.status);
|
||||
break;
|
||||
case 'error':
|
||||
console.warn(res.error);
|
||||
break;
|
||||
case 'init':
|
||||
wk.send({ type: 'columns' });
|
||||
state.initialized = true;
|
||||
break;
|
||||
case 'frames':
|
||||
const { frames } = res.data;
|
||||
|
||||
// 有匹配的选择第一个
|
||||
if (frames.length > 0) {
|
||||
state.selectedFrame = frames[0].number;
|
||||
wk.send({ type: 'select', number: state.selectedFrame });
|
||||
}
|
||||
break;
|
||||
case 'selected':
|
||||
// 首行修改帧编号
|
||||
const fristFrame = res.data.tree[0];
|
||||
res.data.tree[0].label = fristFrame.label.replace(
|
||||
'Frame 1:',
|
||||
`Frame ${tableState.selectedNumber}:`
|
||||
);
|
||||
const item = fristFrame.tree.find(
|
||||
(item: any) => item.label === 'Frame Number: 1'
|
||||
);
|
||||
if (item) {
|
||||
item.label = `Frame Number: ${tableState.selectedNumber}:`;
|
||||
}
|
||||
|
||||
state.packetFrame = res.data;
|
||||
state.packetFrameTreeMap = parseFrameTree('root', res.data);
|
||||
state.selectedTree = NO_SELECTION;
|
||||
state.selectedDataSourceIndex = 0;
|
||||
break;
|
||||
case 'processed':
|
||||
// setStatus(`Error: non-zero return code (${e.data.code})`);
|
||||
// 加载数据
|
||||
wk.send({
|
||||
type: 'frames',
|
||||
filter: '',
|
||||
skip: 0,
|
||||
limit: 1,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
console.warn(res);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**包数据表滚动底部加载 */
|
||||
function handleScrollBottom(index: any) {
|
||||
console.log('handleScrollBottom', index);
|
||||
/**建立WK连接 */
|
||||
function fnWK() {
|
||||
const options: wkUtil.OptionsType = {
|
||||
url: wkUrl,
|
||||
onmessage: wkMessage,
|
||||
onerror: (ev: any) => {
|
||||
console.error(ev);
|
||||
},
|
||||
};
|
||||
//建立连接
|
||||
wk.connect(options);
|
||||
}
|
||||
|
||||
// =========== WS ==============
|
||||
/**接收数据后回调 */
|
||||
function wsMessage(res: Record<string, any>) {
|
||||
const { code, requestId, data } = res;
|
||||
if (code === RESULT_CODE_ERROR) {
|
||||
console.warn(res.msg);
|
||||
return;
|
||||
}
|
||||
|
||||
// 建联时发送请求
|
||||
if (!requestId && data.clientId) {
|
||||
tableState.data = [];
|
||||
tableState.total = 0;
|
||||
taskState.keepTimer = setInterval(() => {
|
||||
if (ws.state() != WebSocket.OPEN) {
|
||||
clearInterval(taskState.keepTimer);
|
||||
return;
|
||||
}
|
||||
packetKeep(taskState.task.taskNo, 120);
|
||||
}, 90 * 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
// 订阅组信息
|
||||
if (!data?.groupId) {
|
||||
return;
|
||||
}
|
||||
if (data.groupId === `4_${taskState.task.taskNo}`) {
|
||||
const packetData = data.data;
|
||||
tableState.total = packetData.number;
|
||||
tableState.data.unshift(packetData);
|
||||
if (tableState.data.length > 100) {
|
||||
tableState.data.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
/**建立WS连接 */
|
||||
function fnWS() {
|
||||
const options: wsUtil.OptionsType = {
|
||||
url: '/ws',
|
||||
params: {
|
||||
/**订阅通道组
|
||||
*
|
||||
* 信令跟踪Packet (GroupID:4_taskNo)
|
||||
*/
|
||||
subGroupID: `4_${taskState.task.taskNo}`,
|
||||
},
|
||||
heartTimer: 30 * 1000,
|
||||
onmessage: wsMessage,
|
||||
onerror: (ev: any) => {
|
||||
// 接收数据后回调
|
||||
console.error(ev);
|
||||
},
|
||||
};
|
||||
//建立连接
|
||||
ws.connect(options);
|
||||
}
|
||||
|
||||
// =========== 任务 ==============
|
||||
type TaskStateType = {
|
||||
/**网卡设备列表 */
|
||||
devices: { id: string; label: string; children: any[] }[];
|
||||
|
||||
/**任务 */
|
||||
task: {
|
||||
taskNo: string;
|
||||
device: string;
|
||||
filter: string;
|
||||
outputPCAP: boolean;
|
||||
};
|
||||
|
||||
/**过滤条件 */
|
||||
filter: string;
|
||||
/**过滤条件错误信息 */
|
||||
filterError: string | null;
|
||||
|
||||
/**保活调度器 */
|
||||
keepTimer: any;
|
||||
|
||||
/**停止标记 */
|
||||
stop: boolean;
|
||||
stopOutputPCAP: boolean;
|
||||
};
|
||||
|
||||
const taskState = reactive<TaskStateType>({
|
||||
devices: [],
|
||||
|
||||
task: {
|
||||
taskNo: '',
|
||||
device: '192.168.5.58',
|
||||
filter: '',
|
||||
outputPCAP: false,
|
||||
},
|
||||
|
||||
filter: '',
|
||||
filterError: null,
|
||||
|
||||
keepTimer: null,
|
||||
|
||||
stop: false,
|
||||
stopOutputPCAP: false,
|
||||
});
|
||||
|
||||
/**开始跟踪 */
|
||||
function fnStart() {
|
||||
// state.task.taskNo = 'laYlTbq';
|
||||
state.task.taskNo = Number(Date.now()).toString(16);
|
||||
state.task.outputPCAP = false;
|
||||
packetStart(state.task).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
fnReset();
|
||||
fnWS();
|
||||
} else {
|
||||
message.error(t('common.operateErr'), 3);
|
||||
}
|
||||
});
|
||||
if (taskState.keepTimer) return;
|
||||
taskState.keepTimer = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
// taskState.task.taskNo = 'laYlTbq';
|
||||
taskState.task.taskNo = Number(Date.now()).toString(16);
|
||||
taskState.task.filter = taskState.filter;
|
||||
packetStart(toRaw(taskState.task))
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
// 清空选择帧的数据
|
||||
state.selectedFrame = 0;
|
||||
state.packetFrame = { tree: [], data_sources: [] };
|
||||
state.packetFrameTreeMap = null;
|
||||
state.selectedTree = NO_SELECTION;
|
||||
state.selectedDataSourceIndex = 0;
|
||||
// 开启
|
||||
if (!state.initialized) {
|
||||
fnWK();
|
||||
}
|
||||
clearInterval(taskState.keepTimer);
|
||||
taskState.keepTimer = null;
|
||||
fnWS();
|
||||
// 记录状态
|
||||
taskState.stop = false;
|
||||
taskState.stopOutputPCAP = taskState.task.outputPCAP;
|
||||
} else {
|
||||
message.error(t('common.operateErr'), 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
});
|
||||
}
|
||||
|
||||
/**停止跟踪 */
|
||||
function fnStop() {
|
||||
packetStop(state.task.taskNo).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
if (typeof taskState.keepTimer !== 'number') return;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
packetStop(taskState.task.taskNo)
|
||||
.then(res => {
|
||||
if (res.code !== RESULT_CODE_SUCCESS) {
|
||||
message.warning(res.msg, 3);
|
||||
}
|
||||
// 关闭监听
|
||||
ws.close();
|
||||
state.initialized = false;
|
||||
state.filter = '';
|
||||
state.filterError = null;
|
||||
} else {
|
||||
message.warning(res.msg, 3);
|
||||
}
|
||||
});
|
||||
clearInterval(taskState.keepTimer);
|
||||
taskState.keepTimer = null;
|
||||
|
||||
taskState.filter = '';
|
||||
taskState.filterError = null;
|
||||
|
||||
taskState.stop = true;
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
});
|
||||
}
|
||||
|
||||
/**跟踪数据表过滤 */
|
||||
function handleFilterFrames() {
|
||||
packetFilter(state.task.taskNo, state.filter).then(res => {
|
||||
packetFilter(taskState.task.taskNo, taskState.filter).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
state.task.filter = state.filter;
|
||||
taskState.task.filter = taskState.filter;
|
||||
taskState.filterError = null;
|
||||
} else {
|
||||
state.filterError = res.msg;
|
||||
taskState.filterError = res.msg;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**开始跟踪 */
|
||||
/**选择网卡 */
|
||||
function fnDevice(v: string) {
|
||||
state.task.device = v;
|
||||
taskState.task.device = v;
|
||||
}
|
||||
|
||||
/**下载触发等待 */
|
||||
let downLoading = ref<boolean>(false);
|
||||
|
||||
/**信息文件下载 */
|
||||
function fnDownloadPCAP() {
|
||||
if (downLoading.value) return;
|
||||
const fileName = `trace_packet_${state.task.taskNo}.pcap`;
|
||||
const fileName = `packet_${taskState.task.taskNo}.pcap`;
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('views.logManage.neFile.downTip', { fileName }),
|
||||
onOk() {
|
||||
downLoading.value = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
filePullTask(state.task.taskNo)
|
||||
packetPCAPFile(taskState.task.taskNo)
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
@@ -267,90 +394,203 @@ function fnDownloadPCAP() {
|
||||
});
|
||||
}
|
||||
|
||||
/**接收数据后回调 */
|
||||
function wsMessage(res: Record<string, any>) {
|
||||
const { code, requestId, data } = res;
|
||||
if (code === RESULT_CODE_ERROR) {
|
||||
console.warn(res.msg);
|
||||
return;
|
||||
}
|
||||
// =========== 表格数据 ==============
|
||||
/**表格状态类型 */
|
||||
type TabeStateType = {
|
||||
/**加载等待 */
|
||||
loading: boolean;
|
||||
/**记录数据 */
|
||||
data: Record<string, any>[];
|
||||
/**总记录数 */
|
||||
total: number;
|
||||
/**选择帧编号 */
|
||||
selectedNumber: number;
|
||||
};
|
||||
|
||||
// 建联时发送请求
|
||||
if (!requestId && data.clientId) {
|
||||
state.initialized = true;
|
||||
state.keepTimer = setInterval(() => {
|
||||
packetKeep(state.task.taskNo, 120);
|
||||
}, 90 * 1000);
|
||||
return;
|
||||
}
|
||||
/**表格状态 */
|
||||
let tableState: TabeStateType = reactive({
|
||||
loading: false,
|
||||
data: [],
|
||||
total: 0,
|
||||
selectedNumber: 0,
|
||||
});
|
||||
|
||||
// 订阅组信息
|
||||
if (!data?.groupId) {
|
||||
/**表格字段列 */
|
||||
let tableColumns = ref<ColumnsType>([
|
||||
{
|
||||
title: 'Number',
|
||||
dataIndex: 'number',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: 'Time',
|
||||
dataIndex: 'time',
|
||||
align: 'left',
|
||||
width: 150,
|
||||
customRender(opt) {
|
||||
if (!opt.value) return '';
|
||||
const nanoseconds = opt.value; // 纳秒时间戳
|
||||
const milliseconds = Math.floor(nanoseconds / 1000000);
|
||||
const nanosecondsPart = (nanoseconds % 1000000)
|
||||
.toString()
|
||||
.padStart(6, '0');
|
||||
|
||||
return `${parseDateToStr(
|
||||
milliseconds,
|
||||
'HH:mm:ss.SSS'
|
||||
)}.${nanosecondsPart}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Source',
|
||||
dataIndex: 'source',
|
||||
align: 'left',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Destination',
|
||||
dataIndex: 'destination',
|
||||
align: 'left',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Protocol',
|
||||
dataIndex: 'protocol',
|
||||
key: 'protocol',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: 'length',
|
||||
dataIndex: 'length',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: 'Info',
|
||||
dataIndex: 'info',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* 查看帧数据
|
||||
* @param row 记录信息
|
||||
*/
|
||||
function fnVisible(row: Record<string, any>) {
|
||||
// 选中行重复点击时显示隐藏
|
||||
if (row.id === tableState.selectedNumber && state.selectedFrame !== 0) {
|
||||
state.selectedFrame = 0;
|
||||
return;
|
||||
}
|
||||
if (data.groupId === `4_${state.task.taskNo}`) {
|
||||
const packetData = data.data;
|
||||
state.totalPackets = packetData.number;
|
||||
state.packetList.push(packetData);
|
||||
}
|
||||
tableState.selectedNumber = row.number;
|
||||
const blob = generatePCAP(row.time / 1e3, row.data);
|
||||
wk.send({ type: 'process', file: blob });
|
||||
}
|
||||
/**生成PCAP-blob */
|
||||
function generatePCAP(timestamp: number, base64Data: string): Blob {
|
||||
// 1. 转换数据
|
||||
const binaryString = atob(base64Data);
|
||||
const len = binaryString.length;
|
||||
const bytes = new Uint8Array(len);
|
||||
for (let i = 0; i < len; i++) {
|
||||
bytes[i] = binaryString.charCodeAt(i);
|
||||
}
|
||||
|
||||
/**建立WS连接 */
|
||||
function fnWS() {
|
||||
const options: OptionsType = {
|
||||
url: '/ws',
|
||||
params: {
|
||||
/**订阅通道组
|
||||
*
|
||||
* 信令跟踪Packet (GroupID:4_taskNo)
|
||||
*/
|
||||
subGroupID: `4_${state.task.taskNo}`,
|
||||
},
|
||||
onmessage: wsMessage,
|
||||
onerror: (ev: any) => {
|
||||
// 接收数据后回调
|
||||
console.error(ev);
|
||||
},
|
||||
};
|
||||
//建立连接
|
||||
ws.connect(options);
|
||||
// 2. 创建PCAP文件头
|
||||
const fileHeader = new Uint8Array([
|
||||
0xd4,
|
||||
0xc3,
|
||||
0xb2,
|
||||
0xa1, // magic_number (微秒级)
|
||||
0x02,
|
||||
0x00, // version_major (2)
|
||||
0x04,
|
||||
0x00, // version_minor (4)
|
||||
0x00,
|
||||
0x00,
|
||||
0x00,
|
||||
0x00, // thiszone (UTC)
|
||||
0x00,
|
||||
0x00,
|
||||
0x00,
|
||||
0x00, // sigfigs (固定0)
|
||||
0xff,
|
||||
0xff,
|
||||
0x00,
|
||||
0x00, // snaplen (最大捕获长度)
|
||||
0x01,
|
||||
0x00,
|
||||
0x00,
|
||||
0x00, // network (LINKTYPE_ETHERNET)
|
||||
]);
|
||||
|
||||
// 3. 生成时间戳
|
||||
const date = new Date(timestamp);
|
||||
const secs = Math.floor(date.getTime() / 1000);
|
||||
const usecs = (date.getTime() % 1000) * 1000;
|
||||
|
||||
// 4. 构造PCAP报文头
|
||||
const packetHeader = new Uint8Array(16);
|
||||
const headerView = new DataView(packetHeader.buffer);
|
||||
headerView.setUint32(0, secs, true); // 时间戳秒
|
||||
headerView.setUint32(4, usecs, true); // 时间戳微秒
|
||||
headerView.setUint32(8, bytes.length, true); // 捕获长度
|
||||
headerView.setUint32(12, bytes.length, true); // 原始长度
|
||||
|
||||
// 5. 合并所有数据
|
||||
const finalData = new Uint8Array(
|
||||
fileHeader.length + packetHeader.length + bytes.length
|
||||
);
|
||||
finalData.set(fileHeader);
|
||||
finalData.set(packetHeader, fileHeader.length);
|
||||
finalData.set(bytes, fileHeader.length + packetHeader.length);
|
||||
|
||||
// 6. 文件Blob对象
|
||||
return new Blob([finalData], { type: 'application/octet-stream' });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
packetDevices().then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
state.devices = res.data;
|
||||
taskState.devices = res.data;
|
||||
if (res.data.length === 0) return;
|
||||
state.task.device = res.data[0].id;
|
||||
taskState.task.device = res.data[0].id;
|
||||
}
|
||||
});
|
||||
fnWK();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(state.keepTimer);
|
||||
state.keepTimer = null;
|
||||
if (ws.state() === WebSocket.OPEN) ws.close();
|
||||
clearInterval(taskState.keepTimer);
|
||||
wk.send({ type: 'close' }) && wk.close();
|
||||
if (ws.state() <= WebSocket.OPEN) ws.close();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageContainer>
|
||||
<a-card :bordered="false" :body-style="{ padding: '12px' }">
|
||||
<div class="toolbar">
|
||||
<a-space :size="8" class="toolbar-oper">
|
||||
<!-- 插槽-卡片左侧侧 -->
|
||||
<template #title>
|
||||
<a-space :size="8" align="end">
|
||||
<a-dropdown-button
|
||||
type="primary"
|
||||
:disabled="state.initialized"
|
||||
@click="fnStart"
|
||||
:disabled="!taskState.stop && taskState.task.taskNo !== ''"
|
||||
>
|
||||
<PlayCircleOutlined />
|
||||
Start Trace
|
||||
<template #overlay>
|
||||
<a-menu
|
||||
@click="({ key }:any) => fnDevice(key)"
|
||||
:selectedKeys="[state.task.device]"
|
||||
:selectedKeys="[taskState.task.device]"
|
||||
>
|
||||
<a-menu-item v-for="v in state.devices" :key="v.id">
|
||||
<a-menu-item v-for="v in taskState.devices" :key="v.id">
|
||||
<a-popover placement="rightTop" trigger="hover">
|
||||
<template #content>
|
||||
<div v-for="c in v.children">{{ c.id }}</div>
|
||||
@@ -366,79 +606,130 @@ onBeforeUnmount(() => {
|
||||
<template #icon><DownOutlined /></template>
|
||||
</a-dropdown-button>
|
||||
|
||||
<a-button danger @click.prevent="fnStop()" v-if="state.initialized">
|
||||
<a-button
|
||||
danger
|
||||
@click.prevent="fnStop()"
|
||||
:disabled="taskState.stop || taskState.task.taskNo === ''"
|
||||
>
|
||||
<template #icon><CloseCircleOutlined /></template>
|
||||
Stop Trace
|
||||
</a-button>
|
||||
|
||||
<a-checkbox
|
||||
v-model:checked="taskState.task.outputPCAP"
|
||||
:disabled="!taskState.stop && taskState.task.taskNo !== ''"
|
||||
>
|
||||
Output PCAP
|
||||
</a-checkbox>
|
||||
|
||||
<a-tag color="processing" v-if="taskState.task.filter !== ''">
|
||||
{{ taskState.task.filter }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<a-space :size="8" align="end">
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="downLoading"
|
||||
@click.prevent="fnDownloadPCAP()"
|
||||
v-if="state.task.outputPCAP"
|
||||
v-if="taskState.stop && taskState.stopOutputPCAP"
|
||||
>
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
{{ t('common.downloadText') }}
|
||||
</a-button>
|
||||
<a-tag
|
||||
color="green"
|
||||
v-show="!!state.task.filter && state.initialized"
|
||||
>
|
||||
{{ state.task.filter }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
|
||||
<a-space :size="8" class="toolbar-info" v-show="state.initialized">
|
||||
<span>
|
||||
{{ t('views.traceManage.task.traceId') }}:
|
||||
<strong>{{ state.task.taskNo }}</strong>
|
||||
Packets:
|
||||
<strong>{{ tableState.total }}</strong>
|
||||
</span>
|
||||
<span>
|
||||
Task No:
|
||||
<strong>{{ taskState.task.taskNo }}</strong>
|
||||
</span>
|
||||
<span> Packets: {{ state.totalPackets }} </span>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 包数据表过滤 -->
|
||||
<a-input-group compact v-show="state.initialized">
|
||||
<a-input
|
||||
v-model:value="state.filter"
|
||||
placeholder="display filter, example: tcp"
|
||||
:allow-clear="true"
|
||||
<a-input-group compact>
|
||||
<a-auto-complete
|
||||
v-model:value="taskState.filter"
|
||||
:options="[
|
||||
{ value: 'tcp and port 33030 and greater 100' },
|
||||
{
|
||||
value:
|
||||
'(src 192.168.5.58 and dst port 33030) or (src 192.168.9.59 and dst port 33030)',
|
||||
},
|
||||
{ value: 'src host 192.168.5.58 and dst host 192.168.5.58' },
|
||||
{ value: 'host 192.168.5.58 and greater 100 and less 2500' },
|
||||
]"
|
||||
style="width: calc(100% - 100px)"
|
||||
@pressEnter="handleFilterFrames"
|
||||
:allow-clear="true"
|
||||
>
|
||||
<template #prefix>
|
||||
<FilterOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-input
|
||||
placeholder="BPF Basic Filter, example: tcp"
|
||||
@pressEnter="handleFilterFrames"
|
||||
>
|
||||
<template #prefix>
|
||||
<FilterOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-auto-complete>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
style="width: 100px"
|
||||
@click="handleFilterFrames"
|
||||
:disabled="taskState.task.taskNo === '' || taskState.stop"
|
||||
>
|
||||
Filter
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
<a-alert
|
||||
:message="state.filterError"
|
||||
:message="taskState.filterError"
|
||||
type="error"
|
||||
v-if="state.filterError != null"
|
||||
v-if="taskState.filterError != null"
|
||||
/>
|
||||
|
||||
<!-- 包数据表 -->
|
||||
<PacketTable
|
||||
:columns="state.columns"
|
||||
:data="state.packetList"
|
||||
:selectedFrame="state.selectedFrame"
|
||||
:onSelectedFrame="handleSelectedFrame"
|
||||
:onScrollBottom="handleScrollBottom"
|
||||
></PacketTable>
|
||||
|
||||
<a-row>
|
||||
<a-table
|
||||
class="table"
|
||||
row-key="number"
|
||||
:columns="tableColumns"
|
||||
:loading="tableState.loading"
|
||||
:data-source="tableState.data"
|
||||
size="small"
|
||||
:pagination="false"
|
||||
:row-class-name="(record:any) => {
|
||||
return `table-striped-${record.protocol}`
|
||||
}"
|
||||
:customRow="
|
||||
record => {
|
||||
return {
|
||||
onClick: () => fnVisible(record),
|
||||
};
|
||||
}
|
||||
"
|
||||
:scroll="{ x: tableColumns.length * 150, y: '400px' }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'protocol'">
|
||||
<!-- <DictTag :options="dict.traceMsgType" :value="record.msgType" /> -->
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- 帧数据 -->
|
||||
<a-row
|
||||
:gutter="16"
|
||||
style="border: 2px rgb(217 217 217) solid; border-radius: 6px"
|
||||
v-show="state.selectedFrame == 1"
|
||||
>
|
||||
<a-col :lg="12" :md="12" :xs="24" class="tree">
|
||||
<!-- 帧数据 -->
|
||||
<DissectionTree
|
||||
id="root"
|
||||
:select="handleSelectedTreeEntry"
|
||||
:select="handleSelectedTree"
|
||||
:selected="state.selectedTree"
|
||||
:tree="state.packetFrame.tree"
|
||||
/>
|
||||
@@ -474,28 +765,6 @@ onBeforeUnmount(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.toolbar-oper {
|
||||
flex: 1;
|
||||
}
|
||||
.toolbar-info {
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.summary-item > span:first-child {
|
||||
font-weight: 600;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.tree {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
Reference in New Issue
Block a user