feat: 信令抓包

src/api/trace/pcap.ts

@@ -1,11 +1,33 @@
 import { request } from '@/plugins/http-fetch';
 
-// 登录方法
+// 网元抓包生成pcap
-export function login(data: Record<string, string>) {
+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,
   });
 }

src/i18n/locales/en-US.ts

@@ -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',
+      },
+    },
   },
 };

src/i18n/locales/zh-CN.ts

@@ -126,23 +126,23 @@ export default {
         neTypePlease: '查询网元类型',
         neType: 'UDM网元类型',
         export: '导出',
-        exportConfirm: "确认导出全部鉴权用户数据吗?",
+        exportConfirm: '确认导出全部鉴权用户数据吗?',
         import: '导入',
-        loadDataConfirm: "确认要重新加载数据吗?",
+        loadDataConfirm: '确认要重新加载数据吗?',
-        loadData: "更新数据",
+        loadData: '更新数据',
         loadDataTip: '成功获取更新数据：{num}条，系统内部进行数据更新，请勿重复点击获取更新!!!',
-        num:'放号数',
+        num: '放号数',
         batchAddText: '批量新增',
-        batchDelText: '批量删除',  
+        batchDelText: '批量删除',
       },
-      sub:{
+      sub: {
         neTypePlease: '查询网元类型',
         neType: 'UDM网元类型',
         export: '导出',
-        exportConfirm: "确认导出全部签约用户数据吗?",
+        exportConfirm: '确认导出全部签约用户数据吗?',
         import: '导入',
-        loadDataConfirm: "确认要重新加载数据吗?",
+        loadDataConfirm: '确认要重新加载数据吗?',
-        loadData: "更新数据",
+        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: '停止抓包',
+      },
+    },
   },
 };

src/plugins/http-fetch.ts

@@ -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();
+  if (!options.signal) {
-  const { signal } = controller;
+    const controller = new AbortController();
-
+    const { signal } = controller;
-  options = Object.assign({ signal }, FATCH_OPTIONS, options);
+    options.signal = signal; 
-
+    timeoutId = setTimeout(() => {
-  const timeoutId = setTimeout(() => {
+      controller.abort(); // 终止请求
-    controller.abort(); // 终止请求
+    }, options.timeout);
-  }, options.timeout);
+  }
 
   // 检查请求拦截
   const beforeReq = beforeRequest(options);

src/views/trace/pcap/index.vue

@@ -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<{
+/**对话框对象信息状态类型 */
-  /**上传状态 */
+type ModalStateType = {
-  loading: boolean;
+  /**网元类型 */
-  uploadFilePath: string;
+  neType: string[];
-  downloadFilePath: string;
+  /**表单数据 */
-  /*文件列表 */
+  from: Record<string, any>;
-  fileList: UploadFile<any>[];
+  /**确定按钮 loading */
-}>({
+  confirmLoading: boolean;
-  loading: false,
+  /**执行日志 */
-  uploadFilePath: '',
+  execLogMsg: string;
-  downloadFilePath: '',
+  /**文件名 */
-  fileList: [
+  fileName: string;
-    // {
+  /**下载文件按钮 */
-    //   uid: '1',
+  downBtn: boolean;
-    //   percent: 100,
+};
-    //   status: 'success',
+
-    //   name: 'xxx.png',
+/**对话框对象信息状态 */
-    //   url: '/upload/default/2023/06/xxx.png',
+let modalState: ModalStateType = reactive({
-    //   thumbUrl: '/upload/default/2023/06/xxx.png',
+  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,
 });
 
-/**查询参数 */
+function fnNeChange(_: any, item: any) {
-let queryParams = reactive({
+  modalState.from.ip = item[1].ip;
-  /**网元类型 */
+  modalState.execLogMsg = '';
-  neType: [''],
+  modalState.fileName = '';
-  ip: '',
+  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-col :lg="12" :md="12" :xs="24">
-          <a-form-item label="网元类型" name="neType">
+          <a-form
-            <a-cascader
+            name="modalState"
-              v-model:value="queryParams.neType"
+            :model="modalState"
-              :options="useNeInfoStore().getNeCascaderOtions"
+            layout="horizontal"
-              placeholder="请选择网元"
+            autocomplete="off"
-            />
+            :label-col="{ span: 5 }"
-          </a-form-item>
+            labelWrap
-        </a-col>
+          >
-        <a-col :lg="8" :md="8" :xs="24">
+            <a-form-item :label="t('views.trace.pcap.neType')" name="neType">
-          <a-form-item label="IP地址" name="ip">
+              <a-cascader
-            <a-input
+                v-model:value="modalState.neType"
-              v-model:value="queryParams.ip"
+                :options="useNeInfoStore().getNeCascaderOtions"
-              placeholder="查询IP地址"
+                @change="fnNeChange"
-            ></a-input>
+                :allow-clear="false"
-          </a-form-item>
+                placeholder="请选择网元"
-        </a-col>
+              />
-      </a-row>
+            </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">
+            <template v-if="modalState.neType[0] === 'UPF'">
-        <a-col :span="24" style="margin-bottom: 16px">
+              <a-form-item
-          <a-input
+                :label="t('views.trace.pcap.capStart')"
-            style="margin-bottom: 16px"
+                name="upfStart"
-            type="text"
+                v-bind="modalStateFrom.validateInfos.upfStart"
-            placeholder="输入资源文件地址"
+              >
-            v-model:value="state.downloadFilePath"
+                <a-input-group compact>
-          >
+                  <a-input
-            <template #suffix>
+                    v-model:value="modalState.from.upfStart"
-              <a-button type="primary" @click=""> 普通下载 </a-button>
+                    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>
+            <template v-else>
-          <a-input
+              <a-form-item
-            type="text"
+                :label="t('views.trace.pcap.capArg')"
-            placeholder="输入资源文件地址"
+                name="cmd"
-            v-model:value="state.downloadFilePath"
+                v-bind="modalStateFrom.validateInfos.cmd"
-          >
+              >
-            <template #suffix>
+                <a-input
-              <a-button type="primary" @click=""> 分片下载 </a-button>
+                  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-col :offset="2" :lg="10" :md="10" :xs="24">
-          <a-space direction="vertical" :size="16">
+          <a-form layout="vertical" autocomplete="off">
-            <a-upload
+            <a-form-item
-              name="file"
+              :label="t('views.trace.pcap.capLog')"
-              list-type="picture"
+              name="execLogMsg"
-              :max-count="1"
+              v-show="!!modalState.execLogMsg"
-              :show-upload-list="false"
             >
-              <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-form-item>
-            <a-image :width="128" :height="128" :src="state.uploadFilePath" />
+          </a-form>
-          </a-space>
         </a-col>
       </a-row>
     </a-card>