update task ui

src/types/ebpf.d.ts

@@ -77,3 +77,9 @@ export type ProcessNode = {
   x?: number;
   y?: number;
 };
+export interface NetworkProfilingRequest {
+  uriRegex: string;
+  when4xx: string;
+  when5xx: string;
+  minDuration: number;
+}

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

@@ -0,0 +1,90 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+
+<template>
+  <div class="profile-task">
+    <div>
+      <div class="label">URI Regex</div>
+      <el-input size="small" class="profile-input" v-model="states.uriRegex" />
+    </div>
+    <div>
+      <div class="label">{{ t("minDuration") }} (ms)</div>
+      <el-input
+        size="small"
+        class="profile-input"
+        :min="0"
+        v-model="states.minDuration"
+        type="number"
+      />
+    </div>
+    <div>
+      <div class="label">{{ t("when4xx") }}</div>
+      <Radio
+        class="mb-5"
+        :value="states.when4xx"
+        :options="InitTaskField.Whenxx"
+        @change="changeConfig({ when4xx: $event })"
+      />
+    </div>
+    <div>
+      <div class="label">{{ t("when5xx") }}</div>
+      <Radio
+        class="mb-5"
+        :value="states.when5xx"
+        :options="InitTaskField.Whenxx"
+        @change="changeConfig({ when5xx: $event })"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { defineProps, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import type { PropType } from "vue";
+import { InitTaskField } from "./data";
+import { NetworkProfilingRequest } from "@/types/ebpf";
+
+const props = defineProps({
+  condition: {
+    type: Object as PropType<NetworkProfilingRequest>,
+    default: () => ({ children: [] }),
+  },
+  key: {
+    type: Number,
+    default: () => 0,
+  },
+});
+const { t } = useI18n();
+const states = reactive<NetworkProfilingRequest>(props.condition);
+
+function changeConfig(params: { [key: string]: number | string }) {
+  const key: string = Object.keys(params)[0];
+  (states as any)[key] = params[key];
+}
+</script>
+<style lang="scss" scoped>
+.date {
+  font-size: 12px;
+}
+
+.label {
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.profile-input {
+  width: 300px;
+}
+</style>

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

@@ -15,76 +15,76 @@ limitations under the License. -->
 
 <template>
   <div class="profile-task">
-    <div>
+    <el-collapse v-model="activeNames">
-      <div class="label">URI Regex</div>
+      <el-collapse-item
-      <el-input size="small" class="profile-input" v-model="states.uriRegex" />
+        v-for="(item, index) in conditionsList"
-    </div>
+        :key="index"
-    <div>
+        :title="`Condition - ${index + 1}`"
-      <div class="label">{{ t("minDuration") }} (ms)</div>
+      >
-      <el-input
+        <NewCondition
-        size="small"
+          :name="index"
-        class="profile-input"
+          :condition="item"
-        :min="0"
+          :key="index"
-        v-model="states.minDuration"
+          @change="changeConfig"
-        type="number"
+        />
-      />
+      </el-collapse-item>
-    </div>
+    </el-collapse>
-    <div>
-      <div class="label">{{ t("when4xx") }}</div>
-      <Radio
-        class="mb-5"
-        :value="states.when4xx"
-        :options="InitTaskField.Whenxx"
-        @change="changeConfig({ when4xx: $event })"
-      />
-    </div>
-    <div>
-      <div class="label">{{ t("when5xx") }}</div>
-      <Radio
-        class="mb-5"
-        :value="states.when5xx"
-        :options="InitTaskField.Whenxx"
-        @change="changeConfig({ when5xx: $event })"
-      />
-    </div>
     <div>
       <el-button @click="createTask" type="primary" class="create-task-btn">
         {{ t("createTask") }}
       </el-button>
+      <el-button
+        @click="createConditions"
+        type="primary"
+        class="create-task-btn"
+      >
+        {{ t("createConditions") }}
+      </el-button>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { InitTaskField } from "./data";
+import NewCondition from "./NewConditions.vue";
+import { NetworkProfilingRequest } from "@/types/ebpf";
+
 /* global defineEmits */
 const emits = defineEmits(["create"]);
 const { t } = useI18n();
-const states = reactive<{
+const activeNames = ref([1]);
-  uriRegex: string;
+const conditionsList = ref<NetworkProfilingRequest[]>([
-  when4xx: string;
+  {
-  when5xx: string;
+    uriRegex: "",
-  minDuration: number;
+    when4xx: InitTaskField.Whenxx[0].value,
-}>({
+    when5xx: InitTaskField.Whenxx[1].value,
-  uriRegex: "",
+    minDuration: NaN,
-  when4xx: InitTaskField.Whenxx[0].value,
+  },
-  when5xx: InitTaskField.Whenxx[1].value,
+]);
-  minDuration: NaN,
-});
 
-function changeConfig(params: { [key: string]: number | string }) {
+function changeConfig(
+  params: { [key: string]: number | string },
+  index: number
+) {
   const key: string = Object.keys(params)[0];
-  (states as any)[key] = params[key];
+  (conditionsList.value[index] as any)[key] = params[key];
 }
 
 function createTask() {
-  emits("create", {
+  const list = conditionsList.value.map((d: NetworkProfilingRequest) => {
-    uriRegex: states.uriRegex || undefined,
+    return {
-    when4xx: states.when4xx === InitTaskField.Whenxx[0].value ? true : false,
+      uriRegex: d.uriRegex || undefined,
-    when5xx: states.when5xx === InitTaskField.Whenxx[0].value ? true : false,
+      when4xx: d.when4xx === InitTaskField.Whenxx[0].value ? true : false,
-    minDuration: isNaN(states.minDuration) ? undefined : states.minDuration,
+      when5xx: d.when5xx === InitTaskField.Whenxx[0].value ? true : false,
+      minDuration: isNaN(d.minDuration) ? undefined : d.minDuration,
+    };
   });
+  emits("create", list);
+}
+
+function createConditions() {
+  console.log(conditionsList);
 }
 </script>
 <style lang="scss" scoped>
@@ -93,19 +93,6 @@ function createTask() {
   width: 400px;
 }
 
-.date {
-  font-size: 12px;
-}
-
-.label {
-  margin-top: 10px;
-  font-size: 14px;
-}
-
-.profile-input {
-  width: 300px;
-}
-
 .create-task-btn {
   width: 300px;
   margin-top: 50px;