add multiple conditions

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

@@ -35,7 +35,7 @@ limitations under the License. -->
         class="mb-5"
         :value="states.when4xx"
         :options="InitTaskField.Whenxx"
-        @change="changeConfig({ when4xx: $event })"
+        @change="changeConfig({ when4xx: states.when4xx })"
       />
     </div>
     <div>
@@ -44,7 +44,7 @@ limitations under the License. -->
         class="mb-5"
         :value="states.when5xx"
         :options="InitTaskField.Whenxx"
-        @change="changeConfig({ when5xx: $event })"
+        @change="changeConfig({ when5xx: states.when5xx })"
       />
     </div>
   </div>
@@ -56,6 +56,8 @@ import type { PropType } from "vue";
 import { InitTaskField } from "./data";
 import { NetworkProfilingRequest } from "@/types/ebpf";
 
+/* global defineEmits */
+const emits = defineEmits(["change"]);
 const props = defineProps({
   condition: {
     type: Object as PropType<NetworkProfilingRequest>,
@@ -72,6 +74,7 @@ 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];
+  emits("change", states, props.key);
 }
 </script>
 <style lang="scss" scoped>

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

@@ -19,8 +19,26 @@ limitations under the License. -->
       <el-collapse-item
         v-for="(item, index) in conditionsList"
         :key="index"
-        :title="`Condition - ${index + 1}`"
+        :name="index"
       >
+        <template #title>
+          <div>
+            <span class="title">{{ `Condition - ${index + 1}` }}</span>
+            <Icon
+              class="mr-5 cp"
+              iconName="remove_circle_outline"
+              size="middle"
+              @click="removeConditions($event, index)"
+            />
+            <Icon
+              class="cp"
+              v-show="index === conditionsList.length - 1"
+              iconName="add_circle_outlinecontrol_point"
+              size="middle"
+              @click="createConditions"
+            />
+          </div>
+        </template>
         <NewCondition
           :name="index"
           :condition="item"
@@ -33,13 +51,6 @@ limitations under the License. -->
       <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>
@@ -53,7 +64,7 @@ import { NetworkProfilingRequest } from "@/types/ebpf";
 /* global defineEmits */
 const emits = defineEmits(["create"]);
 const { t } = useI18n();
-const activeNames = ref([1]);
+const activeNames = ref([0]);
 const conditionsList = ref<NetworkProfilingRequest[]>([
   {
     uriRegex: "",
@@ -77,14 +88,30 @@ function createTask() {
       uriRegex: d.uriRegex || undefined,
       when4xx: d.when4xx === InitTaskField.Whenxx[0].value ? true : false,
       when5xx: d.when5xx === InitTaskField.Whenxx[0].value ? true : false,
-      minDuration: isNaN(d.minDuration) ? undefined : d.minDuration,
+      minDuration: isNaN(Number(d.minDuration))
+        ? undefined
+        : Number(d.minDuration),
     };
   });
   emits("create", list);
 }
 
-function createConditions() {
-  console.log(conditionsList);
+function createConditions(e: any) {
+  e.stopPropagation();
+  conditionsList.value.push({
+    uriRegex: "",
+    when4xx: InitTaskField.Whenxx[0].value,
+    when5xx: InitTaskField.Whenxx[1].value,
+    minDuration: NaN,
+  });
+  activeNames.value = [conditionsList.value.length - 1];
+}
+
+function removeConditions(e: any, key: number) {
+  e.stopPropagation();
+  conditionsList.value = conditionsList.value.filter(
+    (_, index: number) => index !== key
+  );
 }
 </script>
 <style lang="scss" scoped>
@@ -97,4 +124,9 @@ function createConditions() {
   width: 300px;
   margin-top: 50px;
 }
+
+.title {
+  display: inline-block;
+  margin-right: 5px;
+}
 </style>

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

@@ -168,16 +168,19 @@ function createTask() {
   }
   newTask.value = true;
 }
-async function saveNewTask(params: {
-  uriRegex: string;
-  when4xx: string;
-  when5xx: string;
-  minDuration: number;
-}) {
+async function saveNewTask(
+  params: {
+    uriRegex: string;
+    when4xx: string;
+    when5xx: string;
+    minDuration: number;
+  }[]
+) {
+  console.log(params);
   newTask.value = false;
   const instanceId =
     (selectorStore.currentPod && selectorStore.currentPod.id) || "";
-  if (!instanceId) {
+  if (instanceId) {
     return ElMessage.error("No Instance ID");
   }
   const res = await networkProfilingStore.createNetworkTask(instanceId, params);