feat: implement the Alert Settings

Alert Settings

src/locales/lang/en.ts

@@ -29,6 +29,10 @@ const msg = {
   logs: "Logs",
   events: "Events",
   alerts: "Alerts",
+  description: "Description",
+  action: "Action",
+  createAlert: "Create a alert",
+  alertSettings: "Alert setting",
   settings: "Settings",
   dashboards: "Dashboards",
   profiles: "Profiles",

src/locales/lang/zh.ts

@@ -27,7 +27,14 @@ const msg = {
   dashboardList: "仪表盘列表",
   log: "日志",
   events: "事件",
+  // 警告
   alerts: "警告",
+  description: "描述",
+  action: "操作",
+  createAlert: "创建告警",
+  alertSettings: "告警设置",
+  alertName: "警告名称",
+  startedTime: "开始时间",
   settings: "设置",
   dashboards: "仪表盘",
   profiles: "性能剖析",

src/router/alert.ts

@@ -24,21 +24,21 @@ export const routesAlert: Array<RouteRecordRaw> = [
     meta: {
       title: "alerts",
       icon: "notification_important",
-      hasGroup: false,
-      exact: false,
+      hasGroup: true,
+      exact: true,
     },
     component: Layout,
     children: [
       {
         path: "/alerts",
-        name: "Alerts",
+        name: "alertSettings",
         meta: {
-          title: "alerts",
+          title: "Alert Settings",
           icon: "notification_important",
           hasGroup: false,
           exact: false,
         },
-        component: () => import("@/views/Log.vue"),
+        component: () => import("@/views/alert/Settings.vue"),
       },
     ],
   },

src/views/alert/Settings.vue

@@ -0,0 +1,72 @@
+<!-- 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("createAlert")
+    }}</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 !== 'action'">{{ 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 { useI18n } from "vue-i18n";
+import { ElButton, ElTable, ElTableColumn } from "element-plus";
+
+const { t } = useI18n();
+const tableHeader = ["name", "entityType", "description", "status", "action"];
+const tableData = [
+  {
+    name: "xxxx-name",
+    entityType: "Service",
+    description: "xxxxxxx",
+    status: "Disable",
+  },
+  {
+    name: "xxxx-name",
+    entityType: "Service",
+    description: "xxxxxxx",
+    status: "Disable",
+  },
+];
+</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,16 @@
+/**
+ * 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.
+ */