From 1cd1e5874bc98333c895cd561d4c22ecb4e36031 Mon Sep 17 00:00:00 2001
From: heyanlong <yanlong.hee@gmail.com>
Date: Thu, 16 Dec 2021 14:22:18 +0800
Subject: [PATCH 1/5] alert: add view and router

---
 src/locales/lang/zh.ts |   3 ++
 src/router/alert.ts    |   6 +--
 src/views/Alert.vue    | 102 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 src/views/Alert.vue

diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 6e5912fb..91ef3646 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -27,7 +27,10 @@ const msg = {
   dashboardList: "仪表盘列表",
   log: "日志",
   events: "事件",
+  // 警告
   alerts: "警告",
+  alertName: "警告名称",
+  startedTime: "开始时间",
   settings: "设置",
   dashboards: "仪表盘",
   profiles: "性能剖析",
diff --git a/src/router/alert.ts b/src/router/alert.ts
index c0e27fb2..1e3f4f3a 100644
--- a/src/router/alert.ts
+++ b/src/router/alert.ts
@@ -24,8 +24,8 @@ export const routesAlert: Array<RouteRecordRaw> = [
     meta: {
       title: "alerts",
       icon: "notification_important",
-      hasGroup: false,
-      exact: false,
+      hasGroup: true,
+      exact: true,
     },
     component: Layout,
     children: [
@@ -38,7 +38,7 @@ export const routesAlert: Array<RouteRecordRaw> = [
           hasGroup: false,
           exact: false,
         },
-        component: () => import("@/views/Log.vue"),
+        component: () => import("@/views/Alert.vue"),
       },
     ],
   },
diff --git a/src/views/Alert.vue b/src/views/Alert.vue
new file mode 100644
index 00000000..821afa74
--- /dev/null
+++ b/src/views/Alert.vue
@@ -0,0 +1,102 @@
+<!-- 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-table :data="tableData" :span-method="objectSpanMethod" border>
+      <el-table-column
+          v-for="(h, index) in tableHeader"
+          :label="t(h)"
+          :key="h + index"
+      >
+        <template #default="scope">
+          <router-link
+              :to="`${state.path}/${scope.row.serviceName}/metrics`"
+              v-if="h === tableHeader[1] && index !== 0"
+          >
+            <span class="alert-name cp">{{ scope.row[h] }}</span>
+          </router-link>
+          <span v-else>{{ scope.row[h] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive, watch} from "vue";
+import {useI18n} from "vue-i18n";
+import {useRoute} from "vue-router";
+import {ElTable, ElTableColumn} from "element-plus";
+
+const route = useRoute();
+const {t} = useI18n();
+const tableHeader = [
+  "scope",
+  "alertName",
+  "message",
+  "startedTime"
+];
+const tableData = [
+  {
+    scope: "Service",
+    alertName: "xx",
+    message: "Response time of service instance 91629a56afea40e885ab4fae0cbe6e9c@10.170.0.13 of business-zone::projectA is more than 1000ms in last 10 minutes",
+    startedTime: "2021-08-17 23:26:25",
+  },
+  {
+    scope: "Service",
+    alertName: "xx",
+    message: "Response time of service i",
+    startedTime: "2021-08-17 23:26:25",
+  },
+];
+const state = reactive({
+  path: route.meta.headPath,
+});
+const objectSpanMethod = (item: { columnIndex: number; rowIndex: number }) => {
+  if (item.columnIndex === 0) {
+    if (item.rowIndex % 2 === 0) {
+      return {
+        rowspan: 2,
+        colspan: 1,
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      };
+    }
+  }
+};
+watch(
+    () => route.meta.headPath,
+    (path: unknown) => {
+      if (!path) {
+        return;
+      }
+      state.path = path;
+    }
+);
+</script>
+<style lang="scss" scoped>
+.alert-name {
+  color: #448edf;
+  cursor: pointer;
+}
+
+.alert-table {
+  padding: 15px;
+}
+</style>
\ No newline at end of file

From e17049b7bdce9ce834b1047f1cabf2b53ac3cb19 Mon Sep 17 00:00:00 2001
From: heyanlong <yanlong.hee@gmail.com>
Date: Thu, 30 Dec 2021 11:44:31 +0800
Subject: [PATCH 2/5] Feature: Alert Settings

---
 src/locales/lang/en.ts       |   4 ++
 src/locales/lang/zh.ts       |   4 ++
 src/router/alert.ts          |   6 +--
 src/views/Alert.vue          | 102 -----------------------------------
 src/views/alert/Settings.vue |  87 ++++++++++++++++++++++++++++++
 src/views/alert/data.ts      |  19 +++++++
 6 files changed, 117 insertions(+), 105 deletions(-)
 delete mode 100644 src/views/Alert.vue
 create mode 100644 src/views/alert/Settings.vue
 create mode 100644 src/views/alert/data.ts

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index ca98a81a..0c739f9d 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -29,6 +29,10 @@ const msg = {
   logs: "Logs",
   events: "Events",
   alerts: "Alerts",
+  description: "Description",
+  operate: "Action",
+  createAAlert: "Create a alert",
+  alertSettings: "Alert setting",
   settings: "Settings",
   dashboards: "Dashboards",
   profiles: "Profiles",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 2b625bdc..7204a86b 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -29,6 +29,10 @@ const msg = {
   events: "事件",
   // 警告
   alerts: "警告",
+  description: "描述",
+  operate: "操作",
+  createAAlert: "创建告警",
+  alertSettings: "告警设置",
   alertName: "警告名称",
   startedTime: "开始时间",
   settings: "设置",
diff --git a/src/router/alert.ts b/src/router/alert.ts
index 1e3f4f3a..a972e7ef 100644
--- a/src/router/alert.ts
+++ b/src/router/alert.ts
@@ -31,14 +31,14 @@ export const routesAlert: Array<RouteRecordRaw> = [
     children: [
       {
         path: "/alerts",
-        name: "Alerts",
+        name: "alertSettings",
         meta: {
-          title: "alerts",
+          title: "Alert Settings",
           icon: "notification_important",
           hasGroup: false,
           exact: false,
         },
-        component: () => import("@/views/Alert.vue"),
+        component: () => import("@/views/alert/Settings.vue"),
       },
     ],
   },
diff --git a/src/views/Alert.vue b/src/views/Alert.vue
deleted file mode 100644
index 821afa74..00000000
--- a/src/views/Alert.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<!-- 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-table :data="tableData" :span-method="objectSpanMethod" border>
-      <el-table-column
-          v-for="(h, index) in tableHeader"
-          :label="t(h)"
-          :key="h + index"
-      >
-        <template #default="scope">
-          <router-link
-              :to="`${state.path}/${scope.row.serviceName}/metrics`"
-              v-if="h === tableHeader[1] && index !== 0"
-          >
-            <span class="alert-name cp">{{ scope.row[h] }}</span>
-          </router-link>
-          <span v-else>{{ scope.row[h] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {reactive, watch} from "vue";
-import {useI18n} from "vue-i18n";
-import {useRoute} from "vue-router";
-import {ElTable, ElTableColumn} from "element-plus";
-
-const route = useRoute();
-const {t} = useI18n();
-const tableHeader = [
-  "scope",
-  "alertName",
-  "message",
-  "startedTime"
-];
-const tableData = [
-  {
-    scope: "Service",
-    alertName: "xx",
-    message: "Response time of service instance 91629a56afea40e885ab4fae0cbe6e9c@10.170.0.13 of business-zone::projectA is more than 1000ms in last 10 minutes",
-    startedTime: "2021-08-17 23:26:25",
-  },
-  {
-    scope: "Service",
-    alertName: "xx",
-    message: "Response time of service i",
-    startedTime: "2021-08-17 23:26:25",
-  },
-];
-const state = reactive({
-  path: route.meta.headPath,
-});
-const objectSpanMethod = (item: { columnIndex: number; rowIndex: number }) => {
-  if (item.columnIndex === 0) {
-    if (item.rowIndex % 2 === 0) {
-      return {
-        rowspan: 2,
-        colspan: 1,
-      };
-    } else {
-      return {
-        rowspan: 0,
-        colspan: 0,
-      };
-    }
-  }
-};
-watch(
-    () => route.meta.headPath,
-    (path: unknown) => {
-      if (!path) {
-        return;
-      }
-      state.path = path;
-    }
-);
-</script>
-<style lang="scss" scoped>
-.alert-name {
-  color: #448edf;
-  cursor: pointer;
-}
-
-.alert-table {
-  padding: 15px;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/alert/Settings.vue b/src/views/alert/Settings.vue
new file mode 100644
index 00000000..90c60bd3
--- /dev/null
+++ b/src/views/alert/Settings.vue
@@ -0,0 +1,87 @@
+<!-- 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-button class="alert-create" type="primary" size="small">{{
+      t("createAAlert")
+    }}</el-button>
+    <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 !== 'operate'">{{ scope.row[h] }}</span>
+          <el-button v-else type="danger" size="mini">{{
+            t("delete")
+          }}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { ElButton, ElTable, ElTableColumn } from "element-plus";
+
+const route = useRoute();
+const { t } = useI18n();
+const tableHeader = ["name", "entityType", "description", "status", "operate"];
+const tableData = [
+  {
+    name: "xxxx-name",
+    entityType: "Service",
+    description: "xxxxxxx",
+    status: "Disable",
+  },
+  {
+    name: "xxxx-name",
+    entityType: "Service",
+    description: "xxxxxxx",
+    status: "Disable",
+  },
+];
+const state = reactive({
+  path: route.meta.headPath,
+});
+watch(
+  () => route.meta.headPath,
+  (path: unknown) => {
+    if (!path) {
+      return;
+    }
+    state.path = path;
+  }
+);
+</script>
+<style lang="scss" scoped>
+.alert-name {
+  color: #448edf;
+  cursor: pointer;
+}
+
+.alert-table {
+  padding: 15px;
+}
+
+.alert-create {
+  float: right;
+  margin-bottom: 15px;
+}
+</style>
diff --git a/src/views/alert/data.ts b/src/views/alert/data.ts
new file mode 100644
index 00000000..5416cf4d
--- /dev/null
+++ b/src/views/alert/data.ts
@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+export const TabsConfig: { [key: string]: any } = {
+  Settings: {},
+};

From 89ff4ac19fe8a2dad0cf807de61382785810d201 Mon Sep 17 00:00:00 2001
From: heyanlong <yanlong.hee@gmail.com>
Date: Thu, 30 Dec 2021 13:51:28 +0800
Subject: [PATCH 3/5] Feature: Alert Settings

---
 src/locales/lang/en.ts       |  2 +-
 src/locales/lang/zh.ts       |  2 +-
 src/views/alert/Settings.vue | 13 -------------
 src/views/alert/data.ts      |  3 ---
 4 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 0c739f9d..6c597814 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -30,7 +30,7 @@ const msg = {
   events: "Events",
   alerts: "Alerts",
   description: "Description",
-  operate: "Action",
+  action: "Action",
   createAAlert: "Create a alert",
   alertSettings: "Alert setting",
   settings: "Settings",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 7204a86b..5938cda9 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -30,7 +30,7 @@ const msg = {
   // 警告
   alerts: "警告",
   description: "描述",
-  operate: "操作",
+  action: "操作",
   createAAlert: "创建告警",
   alertSettings: "告警设置",
   alertName: "警告名称",
diff --git a/src/views/alert/Settings.vue b/src/views/alert/Settings.vue
index 90c60bd3..313f232e 100644
--- a/src/views/alert/Settings.vue
+++ b/src/views/alert/Settings.vue
@@ -35,7 +35,6 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import { reactive, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { ElButton, ElTable, ElTableColumn } from "element-plus";
@@ -57,18 +56,6 @@ const tableData = [
     status: "Disable",
   },
 ];
-const state = reactive({
-  path: route.meta.headPath,
-});
-watch(
-  () => route.meta.headPath,
-  (path: unknown) => {
-    if (!path) {
-      return;
-    }
-    state.path = path;
-  }
-);
 </script>
 <style lang="scss" scoped>
 .alert-name {
diff --git a/src/views/alert/data.ts b/src/views/alert/data.ts
index 5416cf4d..366cda74 100644
--- a/src/views/alert/data.ts
+++ b/src/views/alert/data.ts
@@ -14,6 +14,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export const TabsConfig: { [key: string]: any } = {
-  Settings: {},
-};

From 3a1e13abba0f8513d8cb3c06ff9f470d0c103672 Mon Sep 17 00:00:00 2001
From: heyanlong <yanlong.hee@gmail.com>
Date: Thu, 30 Dec 2021 14:27:10 +0800
Subject: [PATCH 4/5] Feature: Alert Settings

---
 src/views/alert/Settings.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/views/alert/Settings.vue b/src/views/alert/Settings.vue
index 313f232e..c95dd92c 100644
--- a/src/views/alert/Settings.vue
+++ b/src/views/alert/Settings.vue
@@ -24,7 +24,7 @@ limitations under the License. -->
         :key="h + index"
       >
         <template #default="scope">
-          <span v-if="h !== 'operate'">{{ scope.row[h] }}</span>
+          <span v-if="h !== 'action'">{{ scope.row[h] }}</span>
           <el-button v-else type="danger" size="mini">{{
             t("delete")
           }}</el-button>
@@ -36,12 +36,10 @@ limitations under the License. -->
 
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import { ElButton, ElTable, ElTableColumn } from "element-plus";
 
-const route = useRoute();
 const { t } = useI18n();
-const tableHeader = ["name", "entityType", "description", "status", "operate"];
+const tableHeader = ["name", "entityType", "description", "status", "action"];
 const tableData = [
   {
     name: "xxxx-name",

From b1ea07cc0e225a01958068c1930e86299a0a3485 Mon Sep 17 00:00:00 2001
From: heyanlong <yanlong.hee@gmail.com>
Date: Thu, 30 Dec 2021 14:27:46 +0800
Subject: [PATCH 5/5] Feature: Alert Settings

---
 src/locales/lang/en.ts       | 2 +-
 src/locales/lang/zh.ts       | 2 +-
 src/views/alert/Settings.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 6c597814..073b3e2a 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -31,7 +31,7 @@ const msg = {
   alerts: "Alerts",
   description: "Description",
   action: "Action",
-  createAAlert: "Create a alert",
+  createAlert: "Create a alert",
   alertSettings: "Alert setting",
   settings: "Settings",
   dashboards: "Dashboards",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 5938cda9..f6af6f0f 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -31,7 +31,7 @@ const msg = {
   alerts: "警告",
   description: "描述",
   action: "操作",
-  createAAlert: "创建告警",
+  createAlert: "创建告警",
   alertSettings: "告警设置",
   alertName: "警告名称",
   startedTime: "开始时间",
diff --git a/src/views/alert/Settings.vue b/src/views/alert/Settings.vue
index c95dd92c..e47cf3e2 100644
--- a/src/views/alert/Settings.vue
+++ b/src/views/alert/Settings.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="alert-table">
     <el-button class="alert-create" type="primary" size="small">{{
-      t("createAAlert")
+      t("createAlert")
     }}</el-button>
     <el-table :data="tableData" border>
       <el-table-column