Feature: Alert Channels

package.json

@@ -10,6 +10,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^0.2.4",
     "axios": "^0.24.0",
     "element-plus": "^1.2.0-beta.3",
     "pinia": "^2.0.5",

src/locales/lang/en.ts

@@ -33,6 +33,11 @@ const msg = {
   action: "Action",
   createAlert: "Create a alert",
   alertSettings: "Alert setting",
+  addAlertChannel: "Add Alert Channel",
+  email: "Email",
+  slack: "Slack",
+  weChat: "WeChat",
+  dingDing: "DingTalk",
   settings: "Settings",
   dashboards: "Dashboards",
   profiles: "Profiles",

src/locales/lang/zh.ts

@@ -33,6 +33,11 @@ const msg = {
   action: "操作",
   createAlert: "创建告警",
   alertSettings: "告警设置",
+  addAlertChannel: "添加告警通道",
+  email: "Email",
+  slack: "Slack",
+  weChat: "微信",
+  dingDing: "钉钉",
   alertName: "警告名称",
   startedTime: "开始时间",
   settings: "设置",

src/router/alert.ts

@@ -40,6 +40,17 @@ export const routesAlert: Array<RouteRecordRaw> = [
         },
         component: () => import("@/views/alert/Settings.vue"),
       },
+      {
+        path: "/alert/channels",
+        name: "alertChannels",
+        meta: {
+          title: "Alert Channels",
+          icon: "notification_important",
+          hasGroup: false,
+          exact: false,
+        },
+        component: () => import("@/views/alert/Channels.vue"),
+      },
     ],
   },
 ];

src/views/alert/Channels.vue

@@ -0,0 +1,148 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="alert-table">
+    <el-dropdown class="alert-create">
+      <el-button type="primary" size="small">
+        {{ t("addAlertChannel") }}
+        <el-icon class="el-icon--right">
+          <arrow-down />
+        </el-icon>
+      </el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="createChannel('email')">{{
+            t("email")
+          }}</el-dropdown-item>
+          <el-dropdown-item @click="createChannel('slack')">{{
+            t("slack")
+          }}</el-dropdown-item>
+          <el-dropdown-item @click="createChannel('weChat')">{{
+            t("weChat")
+          }}</el-dropdown-item>
+          <el-dropdown-item @click="createChannel('dingDing')">{{
+            t("dingDing")
+          }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <el-table :data="tableData" border>
+      <el-table-column
+        v-for="(h, index) in tableHeader"
+        :label="t(h)"
+        :key="h + index"
+      >
+        <template #default="scope">
+          <span v-if="h !== 'action'">{{ scope.row[h] }}</span>
+          <el-button v-else type="danger" size="mini">{{
+            t("delete")
+          }}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="
+      t('create') + ' ' + t(dialogType) + ' ' + t('alert') + ' ' + t('channel')
+    "
+  >
+    <el-form :model="form" label-position="top">
+      <el-form-item :label="t('name')">
+        <el-input v-model="form.name" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dialogType === 'email'" :label="t('email')">
+        <el-input v-model="form.email" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dialogType !== 'email'" :label="t('webHookURL')">
+        <el-input v-model="form.email" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dialogType !== 'email'" :label="t('iconURL')">
+        <el-input v-model="form.email" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dialogType !== 'email'" :label="t('channelName')">
+        <el-input v-model="form.email" autocomplete="off"></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">{{ t("cancel") }}</el-button>
+        <el-button type="primary" @click="dialogVisible = false">{{
+          t("create")
+        }}</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElDialog,
+  ElIcon,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ElButton,
+  ElTable,
+  ElTableColumn,
+} from "element-plus";
+import { ArrowDown } from "@element-plus/icons-vue";
+
+const { t } = useI18n();
+const tableHeader = ["name"];
+const tableData = [
+  {
+    name: "email",
+  },
+  {
+    name: "weChat",
+  },
+];
+
+let dialogVisible = ref(false);
+let dialogType = ref("");
+let form = ref({
+  name: "",
+  email: "",
+  webHookURL: "",
+  iconURL: "",
+  channelName: "",
+});
+
+let createChannel = (type: string) => {
+  dialogType.value = type;
+  dialogVisible.value = true;
+};
+</script>
+<style lang="scss" scoped>
+.alert-name {
+  color: #448edf;
+  cursor: pointer;
+}
+
+.alert-table {
+  padding: 15px;
+}
+
+.alert-create {
+  float: right;
+  margin-bottom: 15px;
+}
+</style>