Feature: Alert Settings

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",

src/locales/lang/zh.ts

@@ -29,6 +29,10 @@ const msg = {
   events: "事件",
   // 警告
   alerts: "警告",
+  description: "描述",
+  operate: "操作",
+  createAAlert: "创建告警",
+  alertSettings: "告警设置",
   alertName: "警告名称",
   startedTime: "开始时间",
   settings: "设置",

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"),
       },
     ],
   },

src/views/Alert.vue

@@ -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>

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>

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: {},
+};