714 lines
19 KiB
Vue
714 lines
19 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, reactive } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
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, dumpDownload, traceUPF } from '@/api/trace/pcap';
|
|
import { listAllNeInfo } from '@/api/ne/neInfo';
|
|
import { getNeFile } from '@/api/tool/neFile';
|
|
import saveAs from 'file-saver';
|
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import { MENU_PATH_INLINE } from '@/constants/menu-constants';
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
/**对话框对象信息状态类型 */
|
|
type ModalStateType = {
|
|
/**表单数据 */
|
|
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: {
|
|
/**命令名称 */
|
|
label: string;
|
|
/**命令选中值 */
|
|
value: string;
|
|
/**开始命令 */
|
|
start: string;
|
|
/**停止命令 */
|
|
stop: string;
|
|
}[];
|
|
/**UPF命令组 */
|
|
cmdOptionsUPF: {
|
|
/**命令名称 */
|
|
label: string;
|
|
/**命令选中值 */
|
|
value: string;
|
|
/**开始命令 */
|
|
start: string;
|
|
/**停止命令 */
|
|
stop: string;
|
|
}[];
|
|
/**详情框是否显示 */
|
|
visibleByView: boolean;
|
|
/**详情框内容 */
|
|
logMsg: string;
|
|
};
|
|
|
|
/**对话框对象信息状态 */
|
|
let modalState: ModalStateType = reactive({
|
|
from: {},
|
|
cmdOptions: [
|
|
{
|
|
label: t('views.traceManage.pcap.execCmd'),
|
|
value: 'any',
|
|
start: '-n -v -s 0',
|
|
stop: '',
|
|
},
|
|
{
|
|
label: t('views.traceManage.pcap.execCmd2'),
|
|
value: 'any2',
|
|
start: 'sctp or tcp port 3030 or 8088',
|
|
stop: '',
|
|
},
|
|
{
|
|
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',
|
|
},
|
|
{
|
|
label: t('views.traceManage.pcap.execUPFCmdB'),
|
|
value: 'pcap dispatch',
|
|
start: 'pcap dispatch trace on max 100000',
|
|
stop: 'pcap dispatch trace off',
|
|
},
|
|
],
|
|
visibleByView: false,
|
|
logMsg: '',
|
|
});
|
|
|
|
/**表格状态类型 */
|
|
type TabeStateType = {
|
|
/**加载等待 */
|
|
loading: boolean;
|
|
/**记录数据 */
|
|
data: object[];
|
|
/**勾选记录 */
|
|
selectedRowKeys: (string | number)[];
|
|
};
|
|
|
|
/**表格状态 */
|
|
let tableState: TabeStateType = reactive({
|
|
loading: false,
|
|
data: [],
|
|
selectedRowKeys: [],
|
|
});
|
|
|
|
/**表格字段列 */
|
|
let tableColumns: ColumnsType = [
|
|
{
|
|
title: t('views.ne.common.neType'),
|
|
dataIndex: 'neType',
|
|
align: 'left',
|
|
width: 100,
|
|
},
|
|
{
|
|
title: t('views.ne.common.neId'),
|
|
dataIndex: 'neId',
|
|
align: 'left',
|
|
width: 100,
|
|
},
|
|
{
|
|
title: t('views.ne.common.neName'),
|
|
dataIndex: 'neName',
|
|
align: 'left',
|
|
width: 100,
|
|
},
|
|
{
|
|
title: t('views.ne.common.ipAddr'),
|
|
dataIndex: 'ip',
|
|
align: 'left',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: t('views.traceManage.pcap.cmd'),
|
|
key: 'cmd',
|
|
dataIndex: 'serverState',
|
|
align: 'left',
|
|
width: 350,
|
|
},
|
|
{
|
|
title: t('common.operate'),
|
|
key: 'id',
|
|
align: 'left',
|
|
},
|
|
];
|
|
|
|
/**表格多选 */
|
|
function fnTableSelectedRowKeys(keys: (string | number)[]) {
|
|
tableState.selectedRowKeys = keys;
|
|
}
|
|
|
|
/**查询全部网元数据列表 */
|
|
function fnGetList() {
|
|
if (tableState.loading) return;
|
|
tableState.loading = true;
|
|
listAllNeInfo({
|
|
bandStatus: false,
|
|
}).then(res => {
|
|
if (
|
|
res.code === RESULT_CODE_SUCCESS &&
|
|
Array.isArray(res.data) &&
|
|
res.data.length > 0
|
|
) {
|
|
tableState.data = res.data;
|
|
// 初始网元参数表单
|
|
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({
|
|
content: t('common.noData'),
|
|
duration: 2,
|
|
});
|
|
}
|
|
tableState.loading = false;
|
|
});
|
|
}
|
|
|
|
/**抓包命令选择 */
|
|
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 = '';
|
|
}
|
|
|
|
/**
|
|
* 开始
|
|
* @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) {
|
|
if (!fromArr[idx].cmdStop) {
|
|
fromArr[idx].taskCode = resV.data;
|
|
}
|
|
fromArr[idx].loading = true;
|
|
message.success({
|
|
content: t('views.traceManage.pcap.startOk', { title }),
|
|
duration: 3,
|
|
});
|
|
} else {
|
|
message.warning({
|
|
content: `${resV.msg}`,
|
|
duration: 3,
|
|
});
|
|
}
|
|
} else {
|
|
message.error({
|
|
content: t('views.traceManage.pcap.startErr', { title }),
|
|
duration: 3,
|
|
});
|
|
}
|
|
});
|
|
})
|
|
.finally(() => {
|
|
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 fromArr = neIDs.map(id => modalState.from[id]);
|
|
const reqArr: any = [];
|
|
for (const from of fromArr) {
|
|
if (from.data.neType === 'UPF' && from.cmdStart.startsWith('pcap')) {
|
|
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))
|
|
);
|
|
}
|
|
}
|
|
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) {
|
|
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,
|
|
});
|
|
} 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(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.downTip', { title: row.neName }),
|
|
onOk() {
|
|
const fromArr = neIDs.map(id => modalState.from[id]);
|
|
const reqArr: any = [];
|
|
for (const from of fromArr) {
|
|
const taskCode = from.taskCode;
|
|
if (!taskCode) {
|
|
message.warning({
|
|
content: t('views.traceManage.pcap.stopNotRun', {
|
|
title: from.title,
|
|
}),
|
|
duration: 3,
|
|
});
|
|
continue;
|
|
}
|
|
if (from.data.neType === 'UPF' && taskCode.startsWith('/tmp')) {
|
|
const fileName = taskCode.substring(taskCode.lastIndexOf('/') + 1);
|
|
reqArr.push(
|
|
getNeFile(
|
|
Object.assign(
|
|
{ path: '/tmp', fileName, delTemp: true },
|
|
from.data
|
|
)
|
|
)
|
|
);
|
|
} else {
|
|
reqArr.push(
|
|
dumpDownload(
|
|
Object.assign({ taskCode: taskCode, delTemp: true }, 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;
|
|
if (resV.code === RESULT_CODE_SUCCESS) {
|
|
message.success({
|
|
content: t('views.traceManage.pcap.downOk', { title }),
|
|
duration: 3,
|
|
});
|
|
// 文件名
|
|
if (taskCode.startsWith('/tmp')) {
|
|
saveAs(resV.data, `${title}_${Date.now()}.pcap`);
|
|
} else {
|
|
saveAs(resV.data, `${title}_${Date.now()}.zip`);
|
|
}
|
|
} else {
|
|
message.warning({
|
|
content: `${resV.msg}`,
|
|
duration: 3,
|
|
});
|
|
}
|
|
} else {
|
|
message.error({
|
|
content: t('views.traceManage.pcap.downErr', { title }),
|
|
duration: 3,
|
|
});
|
|
}
|
|
});
|
|
})
|
|
.finally(() => {
|
|
hide();
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
/**批量操作 */
|
|
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
|
|
*/
|
|
function fnModalVisibleByVive(id: string | number) {
|
|
const from = modalState.from[id];
|
|
if (!from) return;
|
|
modalState.visibleByView = true;
|
|
modalState.logMsg = from.logMsg;
|
|
}
|
|
|
|
/**
|
|
* 对话框弹出关闭执行函数
|
|
* 进行表达规则校验
|
|
*/
|
|
function fnModalCancel() {
|
|
modalState.visibleByView = false;
|
|
modalState.logMsg = '';
|
|
}
|
|
|
|
/**跳转文件数据页面 */
|
|
function fnFileView(row?: Record<string, any>) {
|
|
let query = undefined;
|
|
if (row) {
|
|
const from = modalState.from[row.id];
|
|
query = {
|
|
neId: from.data.neId,
|
|
neType: from.data.neType,
|
|
};
|
|
}
|
|
router.push({
|
|
path: `${route.path}${MENU_PATH_INLINE}/file`,
|
|
query: query,
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 获取网元列表
|
|
fnGetList();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<PageContainer>
|
|
<a-card :bordered="false" :body-style="{ padding: '0px' }">
|
|
<!-- 插槽-卡片左侧侧 -->
|
|
<template #title>
|
|
<a-space :size="8" align="center">
|
|
<a-button @click="fnFileView()">
|
|
<FileSearchOutlined />
|
|
{{ t('views.traceManage.pcap.fileView') }}
|
|
</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>
|
|
|
|
<!-- 插槽-卡片右侧 -->
|
|
<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 * 170 }"
|
|
: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-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].cmdStop
|
|
"
|
|
>
|
|
<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>
|
|
</a-table>
|
|
</a-card>
|
|
|
|
<!-- 日志信息框 -->
|
|
<ProModal
|
|
:drag="true"
|
|
:width="800"
|
|
:visible="modalState.visibleByView"
|
|
: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: 18 }"
|
|
:disabled="true"
|
|
style="color: rgba(0, 0, 0, 0.85)"
|
|
/>
|
|
</ProModal>
|
|
</PageContainer>
|
|
</template>
|
|
|
|
<style lang="less" scoped></style>
|