From f17e998e05e2217c7d34b9e6cfbf38eae323e47b Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 26 Oct 2023 18:05:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B7=9F=E8=B8=AA=E4=BF=A1=E4=BB=A4?=
 =?UTF-8?q?=E6=8A=93=E5=8C=85upf=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/traceManage/pcap.ts          |   6 +-
 src/i18n/locales/en-US.ts            |   2 +-
 src/i18n/locales/zh-CN.ts            |   2 +-
 src/views/traceManage/pcap/index.vue | 109 ++++++++++++++++++---------
 4 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/src/api/traceManage/pcap.ts b/src/api/traceManage/pcap.ts
index d5ef4744..9b3ff45e 100644
--- a/src/api/traceManage/pcap.ts
+++ b/src/api/traceManage/pcap.ts
@@ -6,7 +6,7 @@ export function tcpdumpNeTask(
   data: Record<string, string>
 ) {
   return request({
-    url: '/api/rest/traceManagement/v1/tcpdumpNeTask',
+    url: '/tcpdump/ne',
     method: 'post',
     data: data,
     signal: signal,
@@ -16,7 +16,7 @@ export function tcpdumpNeTask(
 // 网元抓包pcap文件下载
 export function tcpdumpPcapDownload(data: Record<string, string>) {
   return request({
-    url: '/api/rest/traceManagement/v1/tcpdumpPcapDownload',
+    url: '/tcpdump/download',
     method: 'post',
     data: data,
     responseType: 'blob',
@@ -26,7 +26,7 @@ export function tcpdumpPcapDownload(data: Record<string, string>) {
 // 网元抓包生成pcap
 export function tcpdumpNeUPFTask(data: Record<string, string>) {
   return request({
-    url: '/api/rest/traceManagement/v1/tcpdumpNeUPFTask',
+    url: '/tcpdump/neUPF',
     method: 'post',
     data: data,
   });
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index e4fb0217..48d9c82b 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -281,7 +281,7 @@ export default {
         runText: 'Execute',
         runTimeText: 'Execute {s} seconds',
         stopText: 'Interrupt',
-        capArgUPFPlease: 'Please enter the packet capture command supported by UPF',
+        capArgUPFPlease: 'Please select the packet capture command supported by UPF',
         capStart: 'Start capturing packets',
         capStop: 'Stop capturing packets',
         execTimeout: 'Execution timeout',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index c1d05891..295a14e4 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -281,7 +281,7 @@ export default {
         runText: '执行',
         runTimeText: '执行 {s} 秒',
         stopText: '中断',
-        capArgUPFPlease: '请输入UPF支持的抓包命令',
+        capArgUPFPlease: '请选择UPF支持的抓包命令',
         capStart: '开始抓包',
         capStop: '停止抓包',
         execTimeout: '执行超时',
diff --git a/src/views/traceManage/pcap/index.vue b/src/views/traceManage/pcap/index.vue
index 4c0c1395..9449143b 100644
--- a/src/views/traceManage/pcap/index.vue
+++ b/src/views/traceManage/pcap/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, reactive, toRaw } from 'vue';
+import { onMounted, onUnmounted, reactive, toRaw } from 'vue';
 import { PageContainer } from '@ant-design-vue/pro-layout';
 import saveAs from 'file-saver';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -23,6 +23,10 @@ type ModalStateType = {
   neType: string[];
   /**表单数据 */
   from: Record<string, any>;
+  /**UPF命令组 */
+  upfCmdOptions: Record<string, any>[];
+  /**UPF是否执行过 */
+  upfExec: boolean;
   /**确定按钮 loading */
   confirmLoading: boolean;
   /**执行日志 */
@@ -38,11 +42,29 @@ let modalState: ModalStateType = reactive({
   neType: [],
   from: {
     ip: '',
-    cmd: 'sctp or tcp port 8080 or 8088',
+    timestamp: '', // 时间戳记录文件时间
+    // 普通网元
+    cmd: '-n -s 0 -v -w',
     timeout: 60,
-    upfStart: 'pcap dispatch trace on max 100000',
-    upfStop: 'pcap dispatch trace off',
+    // upf
+    upfStart: '',
+    upfStop: '',
   },
+  upfCmdOptions: [
+    {
+      label: '适合其他网元异常，UPF配合抓包的情况',
+      start: 'pcap trace rx tx max 100000 intfc any',
+      stop: 'pcap trace rx tx off',
+      value: 'pcap trace',
+    },
+    {
+      label: '适合UPF异常需要抓包分析的情况',
+      start: 'pcap dispatch trace on max 100000',
+      stop: 'pcap dispatch trace off',
+      value: 'pcap dispatch',
+    },
+  ],
+  upfExec: false,
   confirmLoading: false,
   execLogMsg: '',
   fileName: '',
@@ -88,13 +110,14 @@ function fnStart() {
     .validate(['cmd', 'timeout'])
     .then(() => {
       modalState.confirmLoading = true;
+      modalState.from.timestamp = `${Date.now()}`;
       const from = toRaw(modalState.from);
       const hide = message.loading(t('common.loading'), 0);
       controller = new AbortController();
       const signal = controller.signal;
       timeoutId = setInterval(() => {
         runTime.value++;
-        if (runTime.value > from.timeout + 5) {
+        if (runTime.value >= from.timeout + 5) {
           clearInterval(timeoutId);
           runTime.value = 0;
           message.warning({
@@ -109,6 +132,7 @@ function fnStart() {
       tcpdumpNeTask(signal, {
         neType: modalState.neType[0],
         neId: modalState.neType[1],
+        timestamp: from.timestamp,
         timeout: from.timeout,
         cmd: from.cmd,
       })
@@ -118,11 +142,14 @@ function fnStart() {
               content: t('views.traceManage.pcap.execSuccess'),
               duration: 3,
             });
-            let logmsg = res.data.cmd + '\n\n' + res.data.msg;
+            const msg = res.data.msg;
+            let logmsg = res.data.cmd + '\n\n' + msg;
             logmsg = logmsg.replace(' \n', '\n\n');
             modalState.execLogMsg = logmsg;
             modalState.fileName = res.data.fileName;
-            modalState.downBtn = true;
+            // 正常抓包时才显示文件下载
+            modalState.downBtn =
+              msg.indexOf('tcpdump: listening on any,') !== -1;
           } else if (
             res.code === RESULT_CODE_ERROR &&
             res.msg.includes('timeout')
@@ -190,17 +217,29 @@ function fnDownPCAP() {
   });
 }
 
+/**UPF抓包命令选择 */
+function fnUPFSelectCmd(value: any, option: any) {
+  console.log(value, option);
+  modalState.from.upfStart = option.start;
+  modalState.from.upfStop = option.stop;
+}
+
 /**UPF抓包执行 */
 function fnUPF(runType: 'start' | 'stop') {
   modalStateFrom
     .validate([runType === 'start' ? 'upfStart' : 'upfStop'])
     .then(() => {
       modalState.confirmLoading = true;
+      if (runType === 'start') {
+        modalState.downBtn = false;
+        modalState.from.timestamp = `${Date.now()}`;
+      }
       const from = toRaw(modalState.from);
       const hide = message.loading(t('common.loading'), 0);
       tcpdumpNeUPFTask({
         neType: modalState.neType[0],
         neId: modalState.neType[1],
+        timestamp: from.timestamp,
         runType: runType === 'start' ? 'start_str' : 'stop_str',
         cmd: runType === 'start' ? from.upfStart : from.upfStop,
       })
@@ -211,6 +250,7 @@ function fnUPF(runType: 'start' | 'stop') {
             modalState.execLogMsg = logmsg;
             modalState.fileName = res.data.fileName;
             if (runType === 'start') {
+              modalState.upfExec = true;
               if (res.data.msg.includes('already')) {
                 message.warning({
                   content: t('views.traceManage.pcap.execUPFStartA'),
@@ -224,6 +264,7 @@ function fnUPF(runType: 'start' | 'stop') {
               }
             }
             if (runType === 'stop') {
+              modalState.upfExec = false;
               if (res.data.msg.includes('already')) {
                 message.warning({
                   content: t('views.traceManage.pcap.execUPFStopA'),
@@ -273,6 +314,10 @@ onMounted(() => {
       }
     });
 });
+
+onUnmounted(() => {
+  fnStop();
+});
 </script>
 
 <template>
@@ -298,6 +343,7 @@ onMounted(() => {
                 @change="fnNeChange"
                 :allow-clear="false"
                 :placeholder="t('views.traceManage.pcap.neTypePlease')"
+                :disabled="modalState.confirmLoading || modalState.upfExec"
               />
             </a-form-item>
             <a-form-item :label="t('views.traceManage.pcap.neIp')" name="ip">
@@ -306,50 +352,39 @@ onMounted(() => {
 
             <template v-if="modalState.neType[0] === 'UPF'">
               <a-form-item
-                :label="t('views.traceManage.pcap.capStart')"
+                :label="t('views.traceManage.pcap.capArg')"
                 name="upfStart"
                 v-bind="modalStateFrom.validateInfos.upfStart"
               >
-                <a-input-group compact>
-                  <a-input
-                    v-model:value="modalState.from.upfStart"
-                    allow-clear
-                    :placeholder="t('views.traceManage.pcap.capArgUPFPlease')"
-                    style="width: 75%"
-                  />
+                <a-auto-complete
+                  v-model:value="modalState.from.upfStart"
+                  :options="modalState.upfCmdOptions"
+                  :placeholder="t('views.traceManage.pcap.capArgUPFPlease')"
+                  allow-clear
+                  @select="fnUPFSelectCmd"
+                />
+              </a-form-item>
+              <a-form-item :wrapperCol="{ offset: 5 }">
+                <a-space :size="8">
                   <a-button
                     type="primary"
-                    style="width: 25%"
-                    :disabled="modalState.confirmLoading"
+                    :disabled="modalState.upfExec"
                     :loading="modalState.confirmLoading"
                     @click.prevent="fnUPF('start')"
                   >
-                    {{ t('views.traceManage.pcap.runText') }}
+                    <template #icon><ApiOutlined /></template>
+                    {{ t('views.traceManage.pcap.capStart') }}
                   </a-button>
-                </a-input-group>
-              </a-form-item>
-              <a-form-item
-                :label="t('views.traceManage.pcap.capStop')"
-                name="upfStop"
-                v-bind="modalStateFrom.validateInfos.upfStop"
-              >
-                <a-input-group compact>
-                  <a-input
-                    v-model:value="modalState.from.upfStop"
-                    allow-clear
-                    :placeholder="t('views.traceManage.pcap.capArgUPFPlease')"
-                    style="width: 75%"
-                  />
                   <a-button
-                    type="primary"
-                    style="width: 25%"
-                    :disabled="modalState.confirmLoading"
+                    type="dashed"
+                    danger
+                    :disabled="!modalState.upfExec"
                     :loading="modalState.confirmLoading"
                     @click.prevent="fnUPF('stop')"
                   >
-                    {{ t('views.traceManage.pcap.runText') }}
+                    {{ t('views.traceManage.pcap.capStop') }}
                   </a-button>
-                </a-input-group>
+                </a-space>
               </a-form-item>
             </template>
             <template v-else>