update

src/components/Radio.vue

@@ -24,8 +24,8 @@ import { ref } from "vue";
 import type { PropType } from "vue";
 
 interface Option {
-  label: string;
+  label: string | number;
-  value: string;
+  value: string | number;
 }
 
 /*global  defineProps, defineEmits */

src/components/Selector.vue

@@ -42,7 +42,7 @@ import type { PropType } from "vue";
 
 interface Option {
   label: string | number;
-  value: string | number | boolean;
+  value: string | number;
 }
 
 /*global  defineProps, defineEmits*/

src/store/modules/network-profiling.ts

@@ -110,13 +110,29 @@ export const networkProfilingStore = defineStore({
       this.calls = calls;
       this.nodes = data.nodes;
     },
-    async createNetworkTask(param: {
+    async createNetworkTask(
-      serviceId: string;
+      instanceId: string,
-      serviceInstanceId: string;
+      params: {
-    }) {
+        uriRegex: string;
+        when4xx: string;
+        when5xx: string;
+        minDuration: number;
+      }
+    ) {
       const res: AxiosResponse = await graphql
         .query("newNetworkProfiling")
-        .params({ request: { instanceId: param.serviceInstanceId } });
+        .params({
+          request: {
+            instanceId,
+            samplings: {
+              ...params,
+              settings: {
+                requireCompleteRequest: true,
+                requireCompleteResponse: true,
+              },
+            },
+          },
+        });
 
       if (res.data.errors) {
         return res.data;

src/views/dashboard/related/network-profiling/components/NewTask.vue

@@ -20,34 +20,31 @@ limitations under the License. -->
       <el-input size="small" class="profile-input" v-model="states.uriRegex" />
     </div>
     <div>
-      <div class="label">{{ t("minThreshold") }} (ms)</div>
+      <div class="label">{{ t("minDuration") }} (ms)</div>
-      <el-input-number
+      <el-input
         size="small"
         class="profile-input"
         :min="0"
         v-model="states.minDuration"
+        type="number"
       />
     </div>
     <div>
-      <div class="label">{{ t("monitorTime") }}</div>
+      <div class="label">{{ t("when4xx") }}</div>
-      <div>
+      <Radio
-        <Selector
+        class="mb-5"
-          size="small"
+        :value="states.when4xx"
-          :value="states.when4xx"
+        :options="InitTaskField.Whenxx"
-          :options="InitTaskField.When4xx"
+        @change="changeConfig({ when4xx: $event })"
-          placeholder="Select a data"
+      />
-          @change="changeConfig({ when4xx: states.when4xx })"
-          class="profile-input"
-        />
-      </div>
     </div>
     <div>
-      <div class="label">{{ t("minThreshold") }} (ms)</div>
+      <div class="label">{{ t("when5xx") }}</div>
-      <el-input-number
+      <Radio
-        size="small"
+        class="mb-5"
-        class="profile-input"
+        :value="states.when5xx"
-        :min="0"
+        :options="InitTaskField.Whenxx"
-        v-model="states.minDuration"
+        @change="changeConfig({ when5xx: $event })"
       />
     </div>
     <div>
@@ -62,21 +59,36 @@ import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { InitTaskField } from "./data";
 /* global defineEmits */
-const emits = defineEmits(["close"]);
+const emits = defineEmits(["create"]);
 const { t } = useI18n();
-const states = reactive<any>({
+const states = reactive<{
+  uriRegex: string;
+  when4xx: string;
+  when5xx: string;
+  minDuration: number;
+}>({
   uriRegex: "",
-  when4xx: true,
+  when4xx: InitTaskField.Whenxx[0].value,
+  when5xx: InitTaskField.Whenxx[1].value,
   minDuration: NaN,
 });
 
-function changeConfig(params: { [key: string]: unknown }) {
+function changeConfig(params: { [key: string]: number | string }) {
-  const key = Object.keys(params)[0];
+  const key: string = Object.keys(params)[0];
-  states[key] = params[key];
+  (states as any)[key] = params[key];
 }
 
 async function createTask() {
-  emits("close");
+  const when4xx =
+    states.when4xx === InitTaskField.Whenxx[0].value ? true : false;
+  const when5xx =
+    states.when5xx === InitTaskField.Whenxx[0].value ? true : false;
+  emits("create", {
+    uriRegex: states.uriRegex || undefined,
+    when4xx,
+    when5xx,
+    minDuration: isNaN(states.minDuration) ? undefined : states.minDuration,
+  });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/related/network-profiling/components/Tasks.vue

@@ -82,7 +82,7 @@ limitations under the License. -->
     fullscreen
     @closed="newTask = false"
   >
-    <NewTask />
+    <NewTask @create="saveNewTask" />
   </el-dialog>
 </template>
 <script lang="ts" setup>
@@ -168,21 +168,19 @@ function createTask() {
   }
   newTask.value = true;
 }
-async function saveNewTask() {
+async function saveNewTask(params: {
-  const serviceId =
+  uriRegex: string;
-    (selectorStore.currentService && selectorStore.currentService.id) || "";
+  when4xx: string;
-  const serviceInstanceId =
+  when5xx: string;
+  minDuration: number;
+}) {
+  newTask.value = false;
+  const instanceId =
     (selectorStore.currentPod && selectorStore.currentPod.id) || "";
-  if (!serviceId) {
+  if (!instanceId) {
-    return;
+    return ElMessage.error("No Instance ID");
   }
-  if (!serviceInstanceId) {
+  const res = await networkProfilingStore.createNetworkTask(instanceId, params);
-    return;
-  }
-  const res = await networkProfilingStore.createNetworkTask({
-    serviceId,
-    serviceInstanceId,
-  });
   if (res.errors) {
     ElMessage.error(res.errors);
     return;

src/views/dashboard/related/network-profiling/components/data.ts

@@ -29,39 +29,8 @@ export const NewTaskField = {
 };
 
 export const InitTaskField = {
-  serviceSource: [{ key: "", label: "None" }],
+  Whenxx: [
-  When4xx: [
+    { value: "1", label: "True" },
-    { value: true, label: "true" },
+    { value: "0", label: "False" },
-    { value: false, label: "false" },
-  ],
-  When5xx: [
-    { value: true, label: "true" },
-    { value: false, label: "false" },
-  ],
-  monitorTimeCn: [
-    { value: "0", label: "此刻" },
-    { value: "1", label: "设置时间" },
-  ],
-  monitorDuration: [
-    { value: "5", label: "5 min" },
-    { value: "10", label: "10 min" },
-    { value: "15", label: "15 min" },
-  ],
-  dumpPeriod: [
-    { value: "10", label: "10 ms" },
-    { value: "20", label: "20 ms" },
-    { value: "50", label: "50 ms" },
-    { value: "100", label: "100 ms" },
-  ],
-  maxSamplingCount: [
-    { value: "1", label: "1" },
-    { value: "2", label: "2" },
-    { value: "3", label: "3" },
-    { value: "4", label: "4" },
-    { value: "5", label: "5" },
-    { value: "6", label: "6" },
-    { value: "7", label: "7" },
-    { value: "8", label: "8" },
-    { value: "9", label: "9" },
   ],
 };