perf: 抓包功能优化

2024-08-20 15:49:03 +08:00
parent 03352f3aa8
commit 999ccf64ad
4 changed files with 285 additions and 142 deletions
--- a/src/api/traceManage/pcap.ts
+++ b/src/api/traceManage/pcap.ts
@@ -18,10 +18,21 @@ export function dumpStop(data: Record<string, string>) {
  });
 }

+// 网元抓包PACP 下载
+export function dumpDownload(data: Record<string, string>) {
+  return request({
+    url: '/trace/tcpdump/download',
+    method: 'get',
+    params: data,
+    responseType: 'blob',
+    timeout: 60_000,
+  });
+}
+
 // UPF标准版内部抓包
 export function traceUPF(data: Record<string, string>) {
  return request({
-    url: '/trace/tcpdump/traceUPF',
+    url: '/trace/tcpdump/upf',
    method: 'post',
    data: data,
  });
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1086,18 +1086,20 @@ export default {
      pcap: {
        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',
+        execCmd: "Common Command Options",
+        execCmd2: "Filter Protocol Port Command",
+        execCmd3: "File Split By Time, Number Of Retained File (-G 10 -W 7)",
+        execUPFCmdA: 'Standard Edition - UPF with other NE anomalous packet capture analysis',
+        execUPFCmdB: 'Standard Edition - UPF anomalies requiring packet capture analysis',
+        batchOper: 'Batch Operations',
+        batchStartText: 'Batch Start',
+        batchStopText: 'Batch Stop',
+        batchDownText: 'Batch Download',
        textStart: "Start",
-        textStartBatch: "Batch Start",
        textStop: "Stop",
-        textStopBatch: "Batch Stop",
        textLog: "Log",
        textLogMsg: "Log Info",
        textDown: "Download",
-        textDownBatch: "Batch Download",
        downTip: "Are you sure you want to download the {title} capture data file?",
        downOk: "{title} file download complete",
        downErr: "{title} file download exception",
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1086,18 +1086,20 @@ export default {
      pcap: {
        capArgPlease: '请输入tcpdump -i any支持参数',
        cmd: '命令',
-        execCmd: "通用tcpdump抓包命令",
-        execCmdsSctp: "过滤sctp和port命令",
-        execUPFCmdA: '适合其他网元异常，UPF配合抓包的情况',
-        execUPFCmdB: '适合UPF异常需要抓包分析的情况',
+        execCmd: "通用命令选项",
+        execCmd2: "过滤协议端口命令",
+        execCmd3: "按时间分割的文件，保留的文件数量 (-G 10 -W 7)",
+        execUPFCmdA: '标准版-UPF配合其他网元异常抓包分析',
+        execUPFCmdB: '标准版-UPF异常需要抓包分析',
+        batchOper: '批量操作',
+        batchStartText: '批量开始',
+        batchStopText: '批量停止',
+        batchDownText: '批量下载',
        textStart: "开始",
-        textStartBatch: "批量开始",
        textStop: "停止",
-        textStopBatch: "批量停止",
        textLog: "日志",
        textLogMsg: "日志信息",
        textDown: "下载",
-        textDownBatch: "批量下载",
        downTip: "确认要下载 {title} 抓包数据文件吗？",
        downOk: "{title} 文件下载完成",
        downErr: "{title} 文件下载异常",
--- a/src/views/traceManage/pcap/index.vue
+++ b/src/views/traceManage/pcap/index.vue
@@ -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)"
      />