feat: save policy

src/locales/lang/en.ts

@@ -391,5 +391,11 @@ const msg = {
   save: "Save",
   editStrategy: "Edit Policies",
   policyList: "Policy List",
+  targetTypes: "Target Type",
+  monitorType: "Monitor Type",
+  count: "Count",
+  threshold: "Threshold",
+  uriRegex: "URI Regex",
+  uriList: "URI List",
 };
 export default msg;

src/locales/lang/es.ts

@@ -390,5 +390,11 @@ const msg = {
   save: "Salvar",
   editStrategy: "Estrategia editorial",
   policyList: "Lista de políticas",
+  targetTypes: "Tipo de objetivo",
+  monitorType: "Tipo de Monitor",
+  count: "Contar",
+  threshold: "Umbral",
+  uriRegex: "Lista URI",
+  uriList: "URI List",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -388,5 +388,11 @@ const msg = {
   save: "保存",
   editStrategy: "编辑策略",
   policyList: "策略列表",
+  targetTypes: "目标类型",
+  monitorType: "监视器类型",
+  count: "总数",
+  threshold: "阈值",
+  uriRegex: "URI规则",
+  uriList: "URI列表",
 };
 export default msg;

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

@@ -14,35 +14,62 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="profile-task">
+  <div class="policy-list">
-    <Policy v-for="(item, index) in continousProfilingStore.strategyList" :key="index" :data="item" />
+    <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"
+      >
+        <Policy :data="item" @edit="changePolicy" :order="index" />
+      </el-collapse-item>
+    </el-collapse>
     <div>
-      <el-button @click="save" type="primary" class="create-task-btn">
+      <el-button @click="save" type="primary" class="save-btn">
         {{ t("save") }}
       </el-button>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+  import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
   import Policy from "./Policy.vue";
+  import type { StrategyItem } 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[]>([]);
+
+  function changePolicy(params: StrategyItem, order: number) {
+    requestParams.value = requestParams.value.map((d: StrategyItem, index: number) => {
+      if (order === index) {
+        return params;
+      }
+      return d;
+    });
+  }
 
   function save() {
-    emits("save", {});
+    emits("save", requestParams.value);
+  }
+
+  function handleChange(val: any) {
+    activeNames.value = val;
   }
 </script>
 <style lang="scss" scoped>
-  .profile-task {
+  .policy-list {
-    width: 100%;
+    margin: 0 auto;
+    width: 300px;
   }
 
-  .create-task-btn {
+  .save-btn {
     width: 300px;
     margin-top: 50px;
   }

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

@@ -15,7 +15,7 @@ limitations under the License. -->
 
 <template>
   <div>
-    <div class="label">{{ t("type") }}</div>
+    <div class="label">{{ t("targetTypes") }}</div>
     <Selector
       class="profile-input"
       size="small"
@@ -27,7 +27,7 @@ limitations under the License. -->
   </div>
   <div v-for="(item, index) in states.checkItems" :key="index">
     <div>
-      <div class="label">{{ t("type") }}</div>
+      <div class="label">{{ t("monitorType") }}</div>
       <Selector
         class="profile-input"
         size="small"
@@ -39,23 +39,25 @@ limitations under the License. -->
     </div>
     <div>
       <div class="label">{{ t("count") }}</div>
-      <el-input size="small" class="profile-input" :min="0" v-model="item.count" type="number" />
+      <el-input size="small" class="profile-input" :min="0" v-model="item.count" type="number" @change="changeParam" />
     </div>
     <div>
       <div class="label">{{ t("threshold") }}</div>
-      <el-input size="small" class="profile-input" v-model="item.threshold" />
+      <el-input size="small" class="profile-input" v-model="item.threshold" @change="changeParam" />
     </div>
     <div>
       <div class="label">{{ t("period") }}</div>
-      <el-input size="small" class="profile-input" :min="0" v-model="item.period" type="number" />
+      <el-input size="small" class="profile-input" :min="0" v-model="item.period" type="number" @change="changeParam" />
     </div>
     <div>
       <div class="label">{{ t("uriRegex") }}</div>
-      <el-input size="small" class="profile-input" v-model="item.uriRegex" />
+      <el-input size="small" class="profile-input" v-model="item.uriRegex" @change="changeParam" />
     </div>
     <div>
-      <div class="label">{{ t("uriRegex") }}</div>
+      <div class="label">{{ t("uriList") }}</div>
-      <el-input size="small" class="profile-input" v-model="item.uriRegex" />
+      <div id="uri-param" contenteditable="true" @input="changeURI($event, index)" class="profile-input">
+        {{ (item.uriList || []).join("; ") }}
+      </div>
     </div>
   </div>
 </template>
@@ -63,7 +65,7 @@ limitations under the License. -->
   import { reactive } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
-  import type { StrategyItem } from "@/types/continous-profiling";
+  import type { StrategyItem, CheckItems } from "@/types/continous-profiling";
   import { MonitorType, TargetTypes } from "../data";
 
   /* global defineEmits, defineProps */
@@ -72,33 +74,59 @@ limitations under the License. -->
       type: Object as PropType<StrategyItem>,
       default: () => ({}),
     },
+    order: {
+      type: Number,
+      default: 0,
+    },
   });
-  const emits = defineEmits(["save"]);
+  const emits = defineEmits(["edit"]);
   const { t } = useI18n();
   const states = reactive<StrategyItem>(props.data);
 
   function changeType(opt: any[]) {
     states.type = (opt.map((d) => d.value)[0] || {}).value;
-    emits("save", states);
+    emits("edit", states, props.order);
   }
 
   function changeMonitorType(opt: any[], index: number) {
     states.checkItems[index].type = (opt.map((d) => d.value)[0] || {}).value;
-    emits("save", states);
+    emits("edit", states, props.order);
+  }
+
+  function changeURI(event: any, index: number) {
+    const params = event.target.textContent;
+    const regex = /http[^;]*;/g;
+    const arr = params.match(regex);
+    states.checkItems[index].uriList = arr.length ? arr : null;
+    emits("edit", states, props.order);
+  }
+
+  function changeParam() {
+    const checkItems = states.checkItems.map((d: CheckItems) => {
+      d.count = Number(d.count);
+      d.period = Number(d.period);
+      return d;
+    });
+    emits("edit", { ...states, checkItems }, props.order);
   }
 </script>
 <style lang="scss" scoped>
-  .profile-task {
+  .profile-input {
-    width: 100%;
-  }
-
-  .create-task-btn {
     width: 300px;
-    margin-top: 50px;
+    margin-bottom: 10px;
   }
 
-  .title {
+  #uri-param {
-    display: inline-block;
+    border: 1px solid #dcdfe6;
-    margin-right: 5px;
+    cursor: text;
+    padding: 0 5px;
+    border-radius: 4px;
+    color: #606266;
+    outline: none;
+    height: 100px;
+
+    &:focus {
+      border-color: #409eff;
+    }
   }
 </style>