feat: edit policy

src/types/continous-profiling.d.ts

@@ -16,7 +16,7 @@
  */
 
 export interface StrategyItem {
-  type: string;
+  targetType: string;
   checkItems: CheckItems[];
 }
 export type CheckItems = {
@@ -24,6 +24,6 @@ export type CheckItems = {
   threshold: string;
   period: number;
   count: number;
-  uriList: string[];
-  uriRegex: string;
+  uriList?: string[];
+  uriRegex?: string;
 };

src/views/dashboard/related/continuous-profiling/components/EditPolicy.vue

@@ -15,13 +15,27 @@ limitations under the License. -->
 
 <template>
   <div class="policy-list">
-    <el-collapse v-model="activeNames" @change="handleChange">
-      <el-collapse-item
-        v-for="(item, index) in continousProfilingStore.strategyList"
-        :key="index"
-        :title="`Policy${index + 1}`"
-        :name="index"
-      >
+    <el-collapse v-model="activeNames">
+      <el-collapse-item v-for="(item, index) in policyList" :key="index" :name="String(index)">
+        <template #title>
+          <div>
+            <span class="title">{{ `Policy - ${index + 1}` }}</span>
+            <Icon
+              class="mr-5 cp"
+              iconName="remove_circle_outline"
+              size="middle"
+              v-show="policyList.length !== 1"
+              @click="removePolicy($event, index)"
+            />
+            <Icon
+              class="cp"
+              v-show="index === policyList.length - 1"
+              iconName="add_circle_outlinecontrol_point"
+              size="middle"
+              @click="createPolicy"
+            />
+          </div>
+        </template>
         <Policy :data="item" @edit="changePolicy" :order="index" />
       </el-collapse-item>
     </el-collapse>
@@ -37,17 +51,17 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
   import Policy from "./Policy.vue";
-  import type { StrategyItem } from "@/types/continous-profiling";
+  import type { StrategyItem, CheckItems } from "@/types/continous-profiling";
 
   /* global defineEmits */
   const emits = defineEmits(["save"]);
   const { t } = useI18n();
   const continousProfilingStore = useContinousProfilingStore();
-  const activeNames = ref<string[]>(["1"]);
-  const requestParams = ref<StrategyItem[]>([]);
+  const activeNames = ref(["0"]);
+  const policyList = ref<StrategyItem[]>(continousProfilingStore.strategyList);
 
   function changePolicy(params: StrategyItem, order: number) {
-    requestParams.value = requestParams.value.map((d: StrategyItem, index: number) => {
+    policyList.value = policyList.value.map((d: StrategyItem, index: number) => {
       if (order === index) {
         return params;
       }
@@ -55,12 +69,45 @@ limitations under the License. -->
     });
   }
 
-  function save() {
-    emits("save", requestParams.value);
+  function removePolicy(e: PointerEvent, key: number) {
+    e.stopPropagation();
+    if (policyList.value.length === 1) {
+      return;
+    }
+    policyList.value = policyList.value.filter((_, index: number) => index !== key);
   }
 
-  function handleChange(val: any) {
-    activeNames.value = val;
+  function createPolicy(e: PointerEvent) {
+    e.stopPropagation();
+    policyList.value.push({
+      targetType: "",
+      checkItems: [
+        {
+          type: "",
+          threshold: "",
+          period: NaN,
+          count: NaN,
+        },
+      ],
+    });
+    activeNames.value = [String(policyList.value.length - 1)];
+  }
+
+  function save() {
+    const params = [];
+    for (const d of policyList.value) {
+      const checkItems = d.checkItems.filter(
+        (item: CheckItems) => item.type && item.threshold && item.period && item.count,
+      );
+      if (d.targetType && checkItems.length) {
+        const v = {
+          ...d,
+          checkItems,
+        };
+        params.push(v);
+      }
+    }
+    emits("save", params);
   }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/related/continuous-profiling/components/Policy.vue

@@ -19,7 +19,7 @@ limitations under the License. -->
     <Selector
       class="profile-input"
       size="small"
-      :value="states.type"
+      :value="states.targetType"
       :options="TargetTypes"
       placeholder="Select a type"
       @change="changeType"
@@ -84,7 +84,7 @@ limitations under the License. -->
   const states = reactive<StrategyItem>(props.data);
 
   function changeType(opt: { value: string }[]) {
-    states.type = opt[0].value;
+    states.targetType = opt[0].value;
     emits("edit", states, props.order);
   }
 

src/views/dashboard/related/continuous-profiling/components/PolicyList.vue

@@ -82,16 +82,12 @@ limitations under the License. -->
 
   fetchStrategyList();
 
-  function policyItem(items: CheckItems[]) {
-    return items.map((d: CheckItems) => `${d.type}>=${d.threshold}`).join(";");
-  }
-
   async function changePolicy(item: StrategyItem) {
     continousProfilingStore.setSelectedStrategy(item);
     const serviceId = (selectorStore.currentService && selectorStore.currentService.id) || "";
     await continousProfilingStore.getContinousTaskList({
       serviceId,
-      targets: [item.type],
+      targets: [item.targetType],
       triggerType: EBPFProfilingTriggerType.CONTINUOUS_PROFILING,
     });
   }