From f2cf7b0891c6d09f01fab424e789e0efc829e608 Mon Sep 17 00:00:00 2001
From: wanghaohao <wanghaohao@kylinos.cn>
Date: Mon, 28 Oct 2024 17:58:01 +0800
Subject: [PATCH] add rule list config

---
 web/src/api/prometheus.ts            |   8 +
 web/src/types/host.ts                |  12 +
 web/src/types/rule.ts                |  17 ++
 web/src/views/ruleForm/addRule.vue   | 362 +++++++++++++++++++++++++++
 web/src/views/ruleForm/customRule.ts |  30 +++
 web/src/views/ruleList.vue           |   9 +
 6 files changed, 438 insertions(+)
 create mode 100644 web/src/types/host.ts
 create mode 100644 web/src/types/rule.ts
 create mode 100644 web/src/views/ruleForm/addRule.vue
 create mode 100644 web/src/views/ruleForm/customRule.ts

diff --git a/web/src/api/prometheus.ts b/web/src/api/prometheus.ts
index 257a33f..1a05bee 100644
--- a/web/src/api/prometheus.ts
+++ b/web/src/api/prometheus.ts
@@ -41,6 +41,14 @@ export function getRuleList(data: Object) {
     params: data,
   });
 }
+// 添加告警告警规则
+export function addConfigRule(data: object) {
+  return request({
+    url: "/plugin/prometheus/ruleAdd",
+    method: "post",
+    data,
+  });
+}
 // 获取所有监控指标
 export function getMetrics() {
   return request({
diff --git a/web/src/types/host.ts b/web/src/types/host.ts
new file mode 100644
index 0000000..f27b4a1
--- /dev/null
+++ b/web/src/types/host.ts
@@ -0,0 +1,12 @@
+export interface Host {
+  hostId: number,
+  targetIp: string,
+  deptName: string,
+  agentStatus: string,
+  operatingSystem: string,
+  monitorAgentStatus: string,
+  version: string,
+  monitorVersion: string,
+  architecture: string,
+  registTime: string
+}
\ No newline at end of file
diff --git a/web/src/types/rule.ts b/web/src/types/rule.ts
new file mode 100644
index 0000000..cce61ff
--- /dev/null
+++ b/web/src/types/rule.ts
@@ -0,0 +1,17 @@
+export interface ConfigRule {
+  id?: number;
+  metrics: string;
+  ips?: string[];
+  batches: any[];
+  batches_str: string;
+  alertTargets: any[];
+  alertHostIds?: string;
+  alertLabel: string;
+  alertName: string;
+  duration: number | string;
+  severity: string;
+  input_severity?: string;
+  threshold: number | string;
+  desc: string;
+  [key: string]: unknown;
+}
diff --git a/web/src/views/ruleForm/addRule.vue b/web/src/views/ruleForm/addRule.vue
new file mode 100644
index 0000000..e41b0a3
--- /dev/null
+++ b/web/src/views/ruleForm/addRule.vue
@@ -0,0 +1,362 @@
+<template>
+  <el-form ref="ruleFormRef" :model="form" :rules="rules" label="right" label-width="auto" class="custom-form">
+    <el-form-item label="告警名称" prop="alertName">
+      <el-input v-model="form.alertName" maxlength="15" placeholder="请输入告警名称" clearable type="text"
+        show-word-limit></el-input>
+    </el-form-item>
+    <el-form-item label="监控主机" :prop="selectHostType">
+      <el-radio-group v-model="selectHostType" style="width: 100%" @change="changeHostType">
+        <el-radio label="ips">选择主机IP</el-radio>
+      </el-radio-group>
+      <el-select v-model="form.ips" v-if="selectHostType === 'ips'" multiple filterable placeholder="请选择监控主机"
+        collapse-tags @change="changeHost">
+        <el-option v-for="item in ips" :key="item.targetIp
+          " :label="item.targetIp" :value="item.targetIp" />
+        <template #empty>
+          <div style="text-align: center; padding: 10px">暂无数据</div>
+        </template>
+      </el-select>
+
+      <el-select v-model="form.batches" v-if="selectHostType === 'batches'" multiple placeholder="请选择主机批次" collapse-tags
+        @change="selectBtaches">
+        <el-option v-for="item in batches" :key="item.id" :label="item.name" :value="item.id" />
+        <template #empty>
+          <div style="text-align: center; padding: 10px">暂无数据</div>
+        </template>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="监控指标" prop="metrics">
+      <el-select v-model="form.metrics" placeholder="请选择监控指标" @change="handleAlertLevel">
+        <el-option v-for="item in metrics" :key="item" :label="item" :value="item" />
+        <template #empty>
+          <div style="text-align: center; padding: 10px">暂无数据</div>
+        </template>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="告警级别" :prop="showLevelInput ? 'input_severity' : 'severity'">
+      <el-radio-group v-model="select_level_type" style="width: 100%" @change="changeLevel">
+        <el-radio label="select" @click="showLevelInput = false">选择告警级别</el-radio>
+        <el-radio label="input" @click="showLevelInput = true">自定义告警级别</el-radio>
+      </el-radio-group>
+      <el-select v-model="form.severity" filterable v-if="!showLevelInput" placeholder="请选择告警级别">
+        <el-option v-for="item in levels" :key="item" :label="item" :value="item" />
+        <template #empty>
+          <div style="text-align: center; padding: 10px">暂无数据</div>
+        </template>
+      </el-select>
+      <el-input v-model="form.input_severity" v-if="showLevelInput" placeholder="请输入自定义级别"></el-input>
+    </el-form-item>
+    <el-form-item :label="'告警阈值(' + unit + ')'" prop="threshold">
+      <el-input style="width: 240px" v-model="form.threshold" :disabled="form.metrics === '服务器宕机'" placeholder="请输入告警阈值"
+        clearable>
+      </el-input>
+    </el-form-item>
+    <el-form-item label="持续触发时间(s)" prop="duration">
+      <el-input style="width: 240px" v-model="form.duration" placeholder="请输入持续触发时间，单位秒" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="自定义描述" prop="desc">
+      <el-input v-model="form.desc" type="textarea" placeholder="请输入自定义描述" maxlength="50" show-word-limit></el-input>
+    </el-form-item>
+  </el-form>
+  <el-form class="centered-buttons">
+    <el-button @click="onCancel">取消</el-button>
+    <el-button type="primary" @click="saveTaskData(ruleFormRef)" :loading="isLoading"
+      @mousedown="(e: any) => e.preventDefault()">确定</el-button>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { ElMessage, ElForm } from "element-plus";
+import { reactive, onMounted, ref } from "vue";
+import {
+  addConfigRule,
+  updateConfigRule,
+  getMetrics,
+  getExporterList,
+  getHostsByBatchId,
+} from "@/api/prometheus";
+import type { ConfigRule } from "@/types/rule";
+import type { Host } from "@/types/host";
+import { checkDuration } from "./customRule";
+
+type FormInstance = InstanceType<typeof ElForm>;
+type FormRules = InstanceType<typeof ElForm>;
+
+const emit = defineEmits(["close", "update"]);
+const props = defineProps({
+  row: {
+    type: Object,
+    required: false,
+    default: {},
+  },
+  isUpdate: {
+    type: Boolean,
+    required: false,
+    defalut: false,
+  },
+});
+
+const ruleFormRef = ref<FormInstance>();
+const form = reactive<ConfigRule>({
+  alertName: "",
+  batches: [],
+  batches_str: "",
+  ips: [],
+  desc: "",
+  alertTargets: [],
+  metrics: "",
+  threshold: "",
+  duration: "15",
+  severity: "",
+  input_severity: "",
+  alertLabel: "",
+});
+const rules = reactive<FormRules>({
+  alertName: [
+    { required: true, message: "请输入告警名称", trigger: ["blur", "change"] },
+  ],
+  threshold: [
+    { required: true, message: "请输入告警阈值", trigger: "blur" },
+    { validator: checkDuration, trigger: ["blur", "change"] },
+  ],
+  duration: [
+    {
+      required: true,
+      message: "请输入告警持续触发时间",
+      trigger: ["blur", "change"],
+    },
+    { validator: checkDuration, trigger: ["blur", "change"] },
+  ],
+  ips: [{ required: true, message: "请选择监控主机", trigger: ["change"] }],
+  batches: [{ required: true, message: "请选择主机批次", trigger: "change" }],
+  metrics: [{ required: true, message: "请选择监控指标", trigger: "change" }],
+  severity: [{ required: true, message: "请选择告警级别", trigger: "change" }],
+  input_severity: [
+    { required: true, message: "请输入告警级别", trigger: ["blur", "change"] },
+  ],
+  desc: [
+    {
+      required: true,
+      message: "请输入自定义描述",
+      trigger: ["blur", "change"],
+    },
+  ],
+} as any);
+
+onMounted(() => {
+  let rowItem: ConfigRule = props.row as ConfigRule;
+  if (rowItem && props.isUpdate) {
+    selectHostType.value = "ips"
+    form.id = rowItem.id;
+    form.ips = rowItem.alertTargets.map((item) => item.ip);
+    form.alertTargets = rowItem.alertTargets;
+    form.alertName = rowItem.alertName;
+    form.alertLabel = rowItem.alertLabel;
+    form.desc = rowItem.desc;
+    form.metrics = rowItem.metrics;
+    form.duration = rowItem.duration;
+    form.severity = rowItem.severity;
+    handleAlertLevel(form.metrics);
+    form.threshold = rowItem.threshold;
+  }
+  getAllHost();
+  getAllMetrics();
+  console.log('ruleFormRef', ruleFormRef)
+});
+
+// 获取所有批次
+const selectHostType = ref("ips");
+const batches = ref([] as any[]);
+// 批次选中事件
+const selected_batches = ref([] as number[]);
+const selectBtaches = (value: number[]) => {
+  if (!value) return;
+  selected_batches.value = value;
+  form.batches_str = value.join();
+};
+
+// 获取批次内的所有主机
+const getHostsByBtaches = () => {
+  form.alertTargets = [];
+  let all_proms = [] as any;
+  selected_batches.value.forEach((batch_id) => {
+    let promissItem = getHostsByBatchId({ id: batch_id }).then((res) => {
+      // 添加主机信息
+      if (res.data.code == 200) {
+        res.data.data.forEach((host: any) => {
+          if (host.agentStatus !== "断开") {
+            form.alertTargets.push({
+              ip: host.ip,
+              hostId: host.id,
+            });
+          }
+        });
+      }
+    });
+    all_proms.push(promissItem);
+  });
+  return Promise.all(all_proms);
+};
+
+// 获取所有监控主机
+const ips = ref([] as Host[]);
+const getAllHost = () => {
+  getExporterList({ paged: false }).then((res) => {
+    if (res.data.code === 200) {
+      ips.value = res.data.data;
+    }
+  });
+};
+
+// 获取监控指标
+// 获取所有的告警级别
+const levels = ref([] as any);
+const metrics = ref([] as any);
+const getAllMetrics = () => {
+  getMetrics().then((res) => {
+    if (res.data.code === 200) {
+      metrics.value = res.data.data.metrics;
+      levels.value = res.data.data.ruleLevel;
+    }
+  });
+};
+// 处理主机选中
+let checked_hosts = ref([] as any[]);
+const changeHost = (value: string[]) => {
+  if (!value) return;
+  checked_hosts.value = [];
+  value.forEach((ip) => {
+    let ip_filtered_item = ips.value.filter((item) => item.targetIp === ip)[0];
+    checked_hosts.value.push({
+      hostId: ip_filtered_item.hostId,
+      ip: ip_filtered_item.targetIp,
+    });
+  });
+
+  form.alertTargets = checked_hosts.value;
+};
+
+// 点击选择告警级别方式时触发
+const changeLevel = () => {
+  form.severity = "";
+  form.input_severity = "";
+  setTimeout(() => {
+    ruleFormRef.value.clearValidate("severity");
+    ruleFormRef.value.clearValidate("input_severity");
+  }, 50);
+};
+// 点击选择告警级别方式时触发
+const changeHostType = () => {
+  form.batches = [];
+  form.ips = [];
+  setTimeout(() => {
+    ruleFormRef.value.clearValidate("ips");
+    ruleFormRef.value.clearValidate("batches");
+  }, 50);
+};
+
+// 根据告警指标处理告警阈值
+let unit = ref("%");
+const handleAlertLevel = (value: string) => {
+  form.threshold = "";
+  if (["cpu使用率", "内存使用率", "磁盘容量", ""].includes(value))
+    unit.value = "%";
+  if (["网络流入", "网络流出"].includes(value)) unit.value = "KB";
+
+  if (["TCP连接数"].includes(value)) unit.value = "个";
+
+  if (["服务器宕机"].includes(value)) {
+    unit.value = "0";
+    form.threshold = "0";
+    setTimeout(() => {
+      ruleFormRef.value.clearValidate("threshold");
+    }, 50);
+  }
+};
+
+// 新增告警级别
+const select_level_type = ref("select");
+const showLevelInput = ref(false);
+
+// 新增一条规则
+const isLoading = ref(false);
+const addRule = () => {
+  addConfigRule(form)
+    .then((res) => {
+      if (res.data.code === 200) {
+        isLoading.value = false;
+        ElMessage.success(res.data.msg);
+        emit("close");
+        emit("update", true);
+      } else {
+        isLoading.value = false;
+        ElMessage.error(res.data.msg);
+      }
+    })
+    .catch((err) => {
+      ElMessage.error("数据传输失败，请检查", err);
+    });
+};
+
+// 编辑一条规则
+const updateRule = () => {
+  updateConfigRule(form)
+    .then((res) => {
+      if (res.data.code === 200) {
+        isLoading.value = false;
+        ElMessage.success(res.data.msg);
+        emit("close");
+        emit("update", false);
+      } else {
+        isLoading.value = false;
+        ElMessage.error(res.data.msg);
+      }
+    })
+    .catch((err) => {
+      ElMessage.error("数据传输失败，请检查", err);
+    });
+};
+
+// 保存任务数据
+const saveTaskData = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid: any, _fields: any) => {
+    if (valid) {
+      isLoading.value = true;
+      if (showLevelInput.value) {
+        form.severity = form.input_severity!;
+      }
+      if (selectHostType.value === "batches") {
+        getHostsByBtaches().then((res) => {
+          props.isUpdate ? updateRule() : addRule();
+        });
+      } else {
+        props.isUpdate ? updateRule() : addRule();
+      }
+    }
+  });
+};
+
+const onCancel = () => {
+  emit("close");
+};
+</script>
+
+<style scoped lang="scss">
+.custom-form {
+  margin-left: 25px;
+  margin-right: 20px;
+  outline-width: 120px;
+
+  .custom-input {
+    white-space: pre-wrap;
+    resize: none;
+    text-align: left;
+    vertical-align: top;
+  }
+}
+
+.centered-buttons {
+  text-align: right;
+}
+</style>
diff --git a/web/src/views/ruleForm/customRule.ts b/web/src/views/ruleForm/customRule.ts
new file mode 100644
index 0000000..0aeac28
--- /dev/null
+++ b/web/src/views/ruleForm/customRule.ts
@@ -0,0 +1,30 @@
+// 自定义校验
+
+// 校验阈值是否在0-100之间
+export const checkThreshold = (rule: any, value: any, callback: any) => {
+  setTimeout(() => {
+    if (!Number.isInteger(parseInt(value))) {
+      callback(new Error('请输入数字'))
+    } else {
+      if (value < 0 || value > 100) {
+        callback(new Error('请输入0-100之间的数字'))
+      } else {
+        callback()
+      }
+    }
+  }, 100)
+}
+
+export const checkDuration = (rule: any, value: any, callback: any) => {
+  setTimeout(() => {
+    if (isNaN(value)) {
+      callback(new Error('请输入数字'))
+    } else {
+      if (value < 0) {
+        callback(new Error('请输入大于等于0的数字'))
+      } else {
+        callback()
+      }
+    }
+  }, 100)
+}
\ No newline at end of file
diff --git a/web/src/views/ruleList.vue b/web/src/views/ruleList.vue
index 557ae3b..23a4aa6 100644
--- a/web/src/views/ruleList.vue
+++ b/web/src/views/ruleList.vue
@@ -12,6 +12,10 @@
             @input="searchInputKey" />
         </div>
       </template>
+      <template #button_bar>
+        <el-button plain class="el-button1" type="primary" @click="handleAdd"
+          @mousedown="(e: any) => e.preventDefault()">新增</el-button>
+      </template>
       <el-table-column prop="id" label="ID" width="140" />
       <el-table-column prop="alertName" label="告警名称" :show-overflow-tooltip="true" width="220" />
       <el-table-column prop="alertTargets" label="告警主机" :show-overflow-tooltip="true" width="260">
@@ -48,12 +52,17 @@
       <el-table-column prop="desc" label="告警描述" :show-overflow-tooltip="true" width="280" />
     </pm-table>
   </div>
+  <el-dialog :title="title" width="40%" v-model="showDialog" destroy-on-close :center="false">
+    <addRule v-if="showDialog" @close="closeDialog" :row="selectedEditRow" :is-update="isUpdate"
+      @update="handleRefresh" />
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import pmTable from "@/components/PmTable.vue";
 import MyAutoComplete from "@/components/MyAutoComplete.vue";
+import addRule from "./ruleForm/addRule.vue";
 import { getRuleList, delConfigRule, getMetrics } from "@/api/prometheus";
 import type { ConfigRule } from "@/types/rule";
 import { ElMessage } from "element-plus";
-- 
Gitee