feat:

预警管理指标配置部分接口对接

src/components/warn-detail/info.vue

@@ -13,7 +13,7 @@
                 <span class="status" :class="`status-${valueData.status}`"></span>
                 <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
               </span>
-              <span v-else :title="valueData[item.prop]">{{ valueData[item.prop] }}</span>
+              <span v-else :title="valueData[item.prop]">{{ valueData[item.prop] || "-" }}</span>
             </span>
           </div>
         </div>

src/page/main/forewarning/indicator-config/add/index.vue

@@ -27,7 +27,9 @@ const params = {};
 const SaveSubmit = async () => {
   let res = await add_form.value.Submit();
   if (!res) return;
-  Save(res);
+  Save(res, { id, class_id }, () => {
+    Cancle();
+  });
 };
 const Cancle = () => {
   router.go(-1);

src/page/main/forewarning/indicator-config/detail/index.vue

@@ -11,6 +11,16 @@
               <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
             </span>
           </template>
+          <template #create_time="{ valueData }">
+            <span>{{
+              valueData.create_time ? valueData.create_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-"
+            }}</span>
+          </template>
+          <template #update_time="{ valueData }">
+            <span>{{
+              valueData.update_time ? valueData.update_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-"
+            }}</span>
+          </template>
         </Info>
       </div>
       <gap-title :hasLine="true" title="指标表达式"></gap-title>
@@ -45,24 +55,31 @@
       </div>
       <gap-title :hasLine="true" title="高级配置"> </gap-title>
       <div class="info">
-        <Info :labelData="advanced_label" :valueData="advanced_data">
-          <template #inspection_cycle="{ valueData }">
-            <span>{{ valueData.inspection_cycle }}分钟</span>
-          </template>
-        </Info>
+        <Info :labelData="advanced_label" :valueData="advanced_data"></Info>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref, onBeforeMount } from "vue";
+import { ElMessage } from "element-plus";
+import axios from "@/request/http.js";
+import { useRoute } from "vue-router";
 import gapTitle from "@/components/gap-title.vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 import Info from "@/components/warn-detail/info.vue";
 import { METHODS } from "@/components/manual-distribution/env.js";
+const route = useRoute();
+const { id, type_name, target_name } = route.query;
 const STATUS_OBJ = {
-  enabled: "启用",
-  disabled: "禁用",
+  1: "启用",
+  2: "禁用",
+};
+const unitOptions = {
+  s: "秒",
+  m: "分钟",
+  h: "小时",
 };
 const labelData = [
   [
@@ -102,17 +119,7 @@ const labelData = [
     },
   ],
 ];
-const info = {
-  warning_rule_name: "服务中断推送规则1",
-  status: "enabled",
-  warning_target: "容器云",
-  warning_type: "容器集群",
-  warning_index: "CPU使用率",
-  create_by: "admin",
-  create_time: "2020-01-01 00:00:00",
-  update_time: "2020-01-01 00:00:00",
-  indicator_expression: 'shttp_requests_total{method="GET",$pod$}',
-};
+const info = ref({});
 const rule_label = [
   [
     {
@@ -121,9 +128,7 @@ const rule_label = [
     },
   ],
 ];
-const rule_data = {
-  alert_rule_type: "1",
-};
+const rule_data = ref({});
 const ruleTypeOptions = {
   empty: "空",
   1: "百分比范围",
@@ -141,44 +146,17 @@ const advanced_label = [
   ],
   [
     {
-      prop: "inspection_cycle",
+      prop: "check_period",
       label: "检查周期",
     },
   ],
 ];
-const advanced_data = {
-  duration: "直接产生预警",
-  inspection_cycle: "1",
-};
-const ticket_push_label = [
-  [
-    {
-      prop: "notification_method",
-      label: "预警通知方式",
-    },
-  ],
-  [
-    {
-      prop: "push_num",
-      label: "消息推送次数",
-    },
-  ],
-  [
-    {
-      prop: "push_frequency",
-      label: "消息推送频率",
-    },
-  ],
-];
-const ticket_push_data = {
-  notification_method: ["1", "2"],
-  push_num: "10次",
-  push_frequency: "60分钟",
-};
+const advanced_data = ref({});
 const warningScopeHeaders = [
   {
     prop: "variable_name",
     label: "变量名称",
+    width: 100,
   },
   {
     prop: "metric",
@@ -191,50 +169,64 @@ const warningScopeHeaders = [
   {
     prop: "is_required",
     label: "是否必填",
+    width: 150,
   },
   {
     prop: "is_linked",
     label: "是否联动",
+    width: 150,
   },
 ];
-const warningScopeRows = [
-  {
-    variable_name: "$pod$",
-    metric_name: "shttp_requests_total",
-    metric_label: "pod",
-    chinese_name: "demoString",
-    is_required: true,
-    is_linked: true,
+const warningScopeRows = ref([]);
+const getInfoData = () => {
+  axios
+    .get("/v1/api/metric_config", {
+      params: {
+        id: id,
       },
-  {
-    variable_name: "$pod$",
-    metric_name: "shttp_requests_total",
-    metric_label: "pod",
-    chinese_name: "demoString",
-    is_required: true,
-    is_linked: true,
-  },
-];
-const pushHeaders = [
-  {
-    prop: "warning_threshold",
-    label: "预警阈值",
-  },
-  {
-    prop: "risk_level",
-    label: "风险程度",
-  },
-];
-const pushRows = [
-  {
-    warning_threshold: "12% - 50% ",
-    risk_level: "较大风险",
-  },
-  {
-    warning_threshold: "50% - 100%  ",
-    risk_level: "重大风险",
-  },
-];
+    })
+    .then((res) => {
+      if (res.data.code == 200) {
+        let {
+          metric_name,
+          is_enabled,
+          expr,
+          created_by,
+          created_at,
+          updated_at,
+          alert_range,
+          duration,
+          duration_unit,
+          check_period,
+          alert_rule_type,
+        } = res.data.data;
+        info.value = {
+          warning_target: type_name,
+          warning_type: target_name,
+          warning_index: metric_name,
+          status: is_enabled,
+          indicator_expression: expr,
+          created_by: created_by,
+          create_time: created_at,
+          update_time: updated_at,
+        };
+        warningScopeRows.value = alert_range || [];
+        advanced_data.value = {
+          duration: duration == 0 ? "直接产生预警" : duration + unitOptions[duration_unit],
+          check_period: check_period + "分钟",
+        };
+        rule_data.value = {
+          //   alert_rule_type: alert_rule_type,
+          alert_rule_type: "1",
+        };
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    });
+};
+onBeforeMount(() => {
+  getInfoData();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -271,6 +263,12 @@ const pushRows = [
         }
       }
     }
+    :deep(.bg-table) {
+      th > .cell,
+      td > .cell {
+        line-height: 20px;
+      }
+    }
   }
 }
 .status {

src/page/main/forewarning/indicator-config/edit/index.vue

@@ -17,7 +17,8 @@
 import { onBeforeMount, ref } from "vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 import addForm from "../modules/add-form.vue";
-import { Save, URL } from "../modules/interface.js";
+import { Save } from "../modules/interface.js";
+import axios from "@/request/http.js";
 import { ElMessage } from "element-plus";
 import { useRouter, useRoute } from "vue-router";
 const router = useRouter();
@@ -34,53 +35,25 @@ const Cancle = () => {
   router.go(-1);
 };
 const getInfoData = () => {
-  //   axios
-  //     .get(URL, {
-  //       params: {
-  //         id: id,
-  //       },
-  //     })
-  //     .then((res) => {
-  //       if (res.data.code == 200) {
-  //         console.log(res.data.data);
-  //       } else {
-  //         ElMessage.error(res.data.data);
-  //       }
-  //     });
-  let res = {
-    id: "20da8f87-628a-4f0c-bd9c-0ad176d18d59",
-    class_id: 101,
-    metric_name: "xx请求次数告警",
-    expr: 'shttp_requests_total{method="GET",$pod$}',
-    duration: 5,
-    duration_unit: "m",
-    check_period: 3,
-    is_enabled: 1,
-    alert_rule_type: "9f1e6170-65e8-4e14-9c17-6a7b87a900a7",
-    created_by: "",
-    created_at: "2023-06-28 17:28:29",
-    updated_by: "",
-    updated_at: "2023-06-28 17:54:33",
-    alert_range: [
-      {
-        variable_name: "$pod$",
-        metric_name: "shttp_requests_total",
-        metric_label: "pod",
-        chinese_name: "demoString",
-        is_required: true,
-        is_linked: true,
+  axios
+    .get("/v1/api/metric_config", {
+      params: {
+        id: id,
       },
-    ],
-  };
+    })
+    .then((res) => {
+      if (res.data.code == 200) {
+        console.log(res.data.data);
+        let res_d = res.data.data;
         infoData.value = {
-    name: res.metric_name,
-    indicator_expression: res.expr,
-    rule_type: res.alert_rule_type,
-    time: res.duration,
-    unit: res.duration_unit,
-    inspection_cycle: res.check_period,
+          name: res_d.metric_name,
+          indicator_expression: res_d.expr,
+          rule_type: res_d.alert_rule_type,
+          time: res_d.duration,
+          unit: res_d.duration_unit,
+          inspection_cycle: res_d.check_period,
           warningScopeRows:
-      res.alert_range.map((e) => {
+            res_d.alert_range.map((e) => {
               return {
                 key: e.variable_name,
                 input_indicator_tag: e.metric_label,
@@ -91,9 +64,13 @@ const getInfoData = () => {
                 is_linkage: e.is_linked ? 1 : 0,
               };
             }) || [],
-    state: res.is_enabled,
-    res: res,
+          state: res_d.is_enabled,
+          res: res_d,
         };
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    });
 };
 onBeforeMount(() => {
   getInfoData();

src/page/main/forewarning/indicator-config/index.vue

@@ -4,7 +4,7 @@
     <div class="detail_container-main">
       <Slide v-model="node" />
       <div class="main-content">
-        <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入指标名称">
+        <bg-filter-group @search="changeSearch" v-model="filter.metric_name" placeholder="请输入指标名称">
           <template v-slot:left_action>
             <div class="apaas_button">
               <el-button type="primary" @click="addRule">
@@ -22,10 +22,10 @@
             <div class="left-filter filter_list">
               <div class="filter_item">
                 <span class="filter_title">启用状态</span>
-                <el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
+                <el-select v-model="filter.is_enabled" placeholder="请选择" style="width: 300px">
                   <el-option
-                    v-for="(item, index) in stateOptions"
-                    :key="'stateOptions' + index"
+                    v-for="(item, index) in isEnabledOptions"
+                    :key="'isEnabledOptions' + index"
                     :label="item.name"
                     :value="item.value">
                   </el-option>
@@ -60,25 +60,25 @@
               :isIndex="true"
               :select="true"
               :stripe="true">
-              <template v-slot:indicator_name="{ row }">
+              <template v-slot:metric_name="{ row }">
                 <span class="can_click_text" @click="goDetail(row)">
-                  {{ row.indicator_name }}
+                  {{ row.metric_name }}
                 </span>
               </template>
-              <template #state="{ row }">
+              <template #is_enabled="{ row }">
                 <bg-switch
                   @click="stateChange(row)"
                   :labels="['否', '是']"
-                  :values="[0, 1]"
-                  v-model="row.state"></bg-switch>
+                  :values="[2, 1]"
+                  v-model="row.is_enabled"></bg-switch>
               </template>
-              <template v-slot:created_time="{ row }">
-                {{ row.created_time ? row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
+              <template v-slot:created_at="{ row }">
+                {{ row.created_at ? row.created_at.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
               </template>
               <template v-slot:action="{ row }">
                 <bg-table-btns2 :limit="3" :tableData="tableRows">
-                  <bg-table-btn :disabled="row.state != 0" @click="editRow(row)">编辑</bg-table-btn>
-                  <bg-table-btn :disabled="row.state != 0" @click="deleteRow(row)">删除</bg-table-btn>
+                  <bg-table-btn :disabled="row.is_enabled != 2" @click="editRow(row)">编辑</bg-table-btn>
+                  <bg-table-btn :disabled="row.is_enabled != 2" @click="deleteRow(row)">删除</bg-table-btn>
                 </bg-table-btns2>
               </template>
             </bg-table>
@@ -95,7 +95,7 @@
     </div>
     <!-- 删除 -->
     <el-dialog class="dialog_box" title="删除" v-model="delDialog" width="420px">
-      <div style="padding: 20px 0">确定要删除吗？</div>
+      <div>确定要删除吗？</div>
       <template v-slot:footer>
         <div class="apaas_button">
           <el-button type="default" @click="delDialog = false">取消</el-button>
@@ -118,13 +118,15 @@ const node = ref({});
 watch(
   () => node.value,
   (n) => {
-    console.log(n);
+    if (n?.data.class_id) {
+      getTableRows();
+    }
   },
   { deep: true }
 );
 const dataTable = ref(null);
 const state = reactive({
-  stateOptions: [
+  isEnabledOptions: [
     {
       name: "全部",
       value: "",
@@ -134,27 +136,27 @@ const state = reactive({
       value: 1,
     },
     {
-      name: "停用",
+      name: "禁用",
       value: 2,
     },
   ], // 状态
   headers: [
     {
       label: "指标名称",
-      prop: "indicator_name",
+      prop: "metric_name",
       width: 200,
     },
     {
       label: "是否启用",
-      prop: "state",
+      prop: "is_enabled",
     },
     {
       label: "创建人",
-      prop: "created_user",
+      prop: "created_by",
     },
     {
       label: "创建时间",
-      prop: "created_time",
+      prop: "created_at",
       width: 160,
     },
     {
@@ -166,11 +168,11 @@ const state = reactive({
   ],
   filter: {
     notice_method: "", // 通知方式
-    state: "", // 状态
+    is_enabled: "", // 状态
     time: [],
-    search: "",
+    metric_name: "",
     page: 1,
-    limit: 10,
+    page_size: 10,
   },
   tableRows: [], // 表格数据
   selected: [], //选择数据
@@ -184,11 +186,11 @@ const changePage = (page) => {
   getTableRows();
 }; // 改变页码
 const changeSize = (size) => {
-  state.filter.limit = size;
+  state.filter.page_size = size;
   changePage(1);
 }; // 改变每页条数
 const changeSearch = (val) => {
-  state.filter.search = val;
+  state.filter.metric_name = val;
   changePage(1);
 };
 const filterAction = () => {
@@ -196,50 +198,40 @@ const filterAction = () => {
 };
 const filterClear = () => {
   state.filter = {
-    state: "", // 状态
+    is_enabled: "", // 状态
     time: [],
-    search: "",
+    metric_name: "",
     page: 1,
-    limit: 10,
+    page_size: 10,
   };
   changePage(1);
 };
 const selectable = (row, index) => {
-  return row.state === 0;
+  return row.is_enabled === 2;
 };
 const getTableRows = () => {
-  let params = { ...state.filter };
-  state.tableTotal = 23;
-  state.tableRows = [
-    {
-      id: 1,
-      indicator_name: "磁盘使用率",
-      state: 1,
-      created_user: "李四",
-      created_time: "2020-01-01 00:00:00",
-    },
-    {
-      id: 2,
-      indicator_name: "磁盘使用率",
-      state: 0,
-      created_user: "李四",
-      created_time: "2020-01-01 00:00:00",
-    },
-    {
-      id: 3,
-      indicator_name: "磁盘使用率",
-      state: 1,
-      created_user: "李四",
-      created_time: "2020-01-01 00:00:00",
-    },
-  ];
+  let params = { ...state.filter, class_id: node.value.data.class_id };
+  //   axios.get("/v1/api/metric_config/list", { params }).then((res) => {
+  axios.get("/v1/api/metric_config/list").then((res) => {
+    if (res.data.code == 200) {
+      state.tableRows =
+        res.data.data?.list?.map((e) => {
+          return {
+            ...e,
+          };
+        }) || [];
+      state.tableTotal = res.data.data.total_count;
+    }
+  });
 };
 const goDetail = (row) => {
   router.push({
     path: "/forewarning/indicator-config/detail",
     query: {
       id: row.id,
-      class_id: node.value.data.id,
+      class_id: node.value.data.class_id,
+      type_name: node.value.node.parent.data.class_name,
+      target_name: node.value.data.class_name,
     },
   });
 }; // 查看详情
@@ -250,10 +242,10 @@ const deleteRow = (row) => {
   state.actionRow = row;
   state.delType = 1;
   state.delDialog = true;
-  console.log("删除");
+  //   console.log("删除");
 }; // 删除
 const batchDelete = () => {
-  console.log("批量删除");
+  //   console.log("批量删除");
   if (!state.selected || state.selected.length == 0) {
     ElMessage.error("请先勾选要删除的数据");
     return;
@@ -270,53 +262,63 @@ const delConfirm = () => {
       return e.id;
     });
   }
-  console.log(ids);
+  //   console.log(ids);
   state.delDialog = false;
-  setTimeout(() => {
-    clearSelected();
+  axios
+    .delete("/v1/api/metric_config", {
+      data: {
+        ids,
+      },
+    })
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success("删除成功");
         changePage(1);
-  }, 200);
+        clearSelected();
+      } else {
+        ElMessage.error(res.data.msg);
+      }
+    });
 }; // 确定删除
 const clearSelected = () => {
   dataTable.value.clearTable();
 }; // 清空
 const addRule = () => {
-  console.log("新增");
+  //   console.log("新增");
   router.push({
     path: `/forewarning/indicator-config/add`,
     query: {
-      class_id: node.value.data.id,
+      class_id: node.value.data.class_id,
     },
   });
 }; // 新增规则
 const editRow = (row) => {
-  console.log("编辑");
+  //   console.log("编辑");
   router.push({
     path: `/forewarning/indicator-config/edit`,
     query: {
       id: row.id,
-      class_id: node.value.data.id,
+      class_id: node.value.data.class_id,
     },
   });
 }; // 编辑
-const stateChange = (row) => {
-  console.log("更改状态");
-  // axios
-  //   .put(`/xxx/xxx?id=${row.id}&state=${row.state}`)
-  //   .then((res) => {
-  //     if (res.data.code == 200) {
-  //       ElMessage.success(res.data.msg);
-  //       changePage(1);
-  //     } else {
-  //       ElMessage.error(res.data.data);
-  //       row.state = row.state == 0 ? 1 : 0;
-  //     }
-  //   });
-};
-onBeforeMount(() => {
+const stateChange = async (row) => {
+  await nextTick();
+  const params = {
+    id: row.id,
+    is_enabled: row.is_enabled,
+  };
+  axios.put("/v1/api/metric_config", params).then((res) => {
+    if (res.data.code == 200) {
+      ElMessage.success(`状态更新成功`);
       getTableRows();
-});
-const { headers, tableRows, tableTotal, filter, noticeTypes, stateOptions, delDialog } = toRefs(state);
+    } else {
+      row.is_enabled = row.is_enabled == 1 ? 2 : 1;
+      ElMessage.error(res.data.msg);
+    }
+  });
+};
+const { headers, tableRows, tableTotal, filter, noticeTypes, isEnabledOptions, delDialog } = toRefs(state);
 </script>
 
 <style lang="scss" scoped>

src/page/main/forewarning/indicator-config/modules/add-form.vue

@@ -150,7 +150,7 @@ const props = defineProps({
 const tableSelOptions = ["否", "是"];
 const ruleTypeOptions = {
   empty: "空",
-  1: "百分比范围",
+  "9f1e6170-65e8-4e14-9c17-6a7b87a900a7": "百分比范围",
   2: "毫秒范围",
   3: "秒范围",
   4: "个范围",
@@ -329,7 +329,7 @@ watch(
   async (n) => {
     if (!n) return;
     state.form.warningScopeRows =
-      n.warningScopeRows.map((e) => {
+      n.warningScopeRows?.map((e) => {
         return {
           key: e.key,
           input_indicator_tag: e.input_indicator_tag,

src/page/main/forewarning/indicator-config/modules/interface.js

 import { ElMessage } from "element-plus";
+import axios from "@/request/http.js";
 const setParams = (res, { id, class_id }) => {
     let params = {
         class_id,
@@ -25,15 +26,14 @@ const setParams = (res, { id, class_id }) => {
     }
     return params;
 }
-export const URL = "https://so.wodcloud.co/v1/api/metric_config"
-export const Save = (res, p) => {
+export const Save = (res, p, cb) => {
     let params = setParams(res, p);
-    console.log("params: ", params);
-    // axios[id ? 'put' : 'post'](URL, params).then(res => {
-    //     if(res.data.code == 200){
-    //         console.log('success');
-    //     }else{
-    //         ElMessage.error(res.data.data)
-    //     }
-    // })
+    axios[p.id ? 'put' : 'post']('/v1/api/metric_config', params).then(res => {
+        if (res.data.code == 200) {
+            ElMessage.success(`${p.id ? '编辑' : '新增'}成功`)
+            cb && cb()
+        } else {
+            ElMessage.error(res.data.data)
+        }
+    })
 }
\ No newline at end of file

src/page/main/forewarning/indicator-config/modules/slide.vue

@@ -121,18 +121,22 @@ const treeProps = {
 const treeRef = ref(null);
 const selectId = ref("");
 const getSlideTree = () => {
-  const params = {
-    page: 1,
-    page_size: 100000000000,
-  };
-  axios.get("/v1/api/alert_class/list", { params }).then(async (res) => {
+  axios.get("/v1/api/alert_class/tree").then(async (res) => {
     if (res.data.code == 200) {
-      slideTree.value = res.data.data.list;
+      slideTree.value = res.data.data;
+      try {
+        slideTree.value.forEach((e) => {
+          if (e.children && e.children.length > 0) {
+            throw e.children[0];
+          }
+        });
+      } catch (item) {
         await nextTick();
-      treeRef.value.setCurrentKey(slideTree.value[0]?.children?.[0].class_id);
-      const node = treeRef.value.getNode(slideTree.value[0]?.children?.[0]);
+        treeRef.value.setCurrentKey(item.class_id);
+        const node = treeRef.value.getNode(item);
         if (node) {
-        treeNodeChoose(slideTree.value[0].children[0], node);
+          treeNodeChoose(item, node);
+        }
       }
     } else {
       ElMessage.error(res.data.msg);
@@ -152,6 +156,7 @@ const Add = () => {
 };
 const emits = defineEmits(["undate:modelValue"]);
 const treeNodeChoose = (data, node) => {
+  console.log("data, node: ", data, node);
   if (node.level == 1) return;
   emits("update:modelValue", { data, node });
 };