From f60b7d890f87774c15a8e1af3edb5dcdbf2bb03e Mon Sep 17 00:00:00 2001
From: hanbingleixue <hanbingleixue@hotmail.com>
Date: Fri, 31 May 2024 16:19:19 +0800
Subject: [PATCH] Add front-end page for configuration management

Signed-off-by: hanbingleixue <hanbingleixue@hotmail.com>
---
 .../main/webapp/frontend/src/components.d.ts  |   4 +
 .../src/components/layouts/BaseHeader.vue     |   5 +
 .../main/webapp/frontend/src/router/index.ts  |   8 +-
 .../webapp/frontend/src/views/ConfigView.vue  | 352 ++++++++++++++++++
 4 files changed, 368 insertions(+), 1 deletion(-)
 create mode 100644 sermant-backend/src/main/webapp/frontend/src/views/ConfigView.vue

diff --git a/sermant-backend/src/main/webapp/frontend/src/components.d.ts b/sermant-backend/src/main/webapp/frontend/src/components.d.ts
index 35b2db2c51..6bd6b40dd1 100644
--- a/sermant-backend/src/main/webapp/frontend/src/components.d.ts
+++ b/sermant-backend/src/main/webapp/frontend/src/components.d.ts
@@ -28,14 +28,18 @@ declare module '@vue/runtime-core' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/sermant-backend/src/main/webapp/frontend/src/components/layouts/BaseHeader.vue b/sermant-backend/src/main/webapp/frontend/src/components/layouts/BaseHeader.vue
index 4aa3d5e649..f13ae08449 100644
--- a/sermant-backend/src/main/webapp/frontend/src/components/layouts/BaseHeader.vue
+++ b/sermant-backend/src/main/webapp/frontend/src/components/layouts/BaseHeader.vue
@@ -23,6 +23,10 @@ const toEventsConfig = () => {
   router.replace("/events-config");
 };
 
+const toConfig = () => {
+  router.replace("/config");
+};
+
 const getAssetsImge = (url: string) => {
   return new URL(`../../assets/${url}`, import.meta.url).href;
 };
@@ -42,6 +46,7 @@ const getAssetsImge = (url: string) => {
       <el-menu-item index="3-1" @click="toEvents"> 监测 </el-menu-item>
       <el-menu-item index="3-2" @click="toEventsConfig"> 配置 </el-menu-item>
     </el-sub-menu>
+    <el-menu-item index="4" @click="toConfig"> 配置管理 </el-menu-item>
     <el-menu-item h="full" @click="toggleDark()">
       <button
         class="border-none w-full bg-transparent cursor-pointer"
diff --git a/sermant-backend/src/main/webapp/frontend/src/router/index.ts b/sermant-backend/src/main/webapp/frontend/src/router/index.ts
index 24544d96a2..7d93277fbc 100644
--- a/sermant-backend/src/main/webapp/frontend/src/router/index.ts
+++ b/sermant-backend/src/main/webapp/frontend/src/router/index.ts
@@ -2,6 +2,7 @@ import {createRouter, createWebHashHistory} from 'vue-router'
 import EventsView from '~/views/EventsView.vue'
 import EventsConfigView from '~/views/EventsConfigView.vue'
 import InstancesView from '~/views/InstancesView.vue'
+import ConfigView from "~/views/ConfigView.vue";
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -31,7 +32,12 @@ const router = createRouter({
       path: '/events-config',
       name: 'events-config',
       component: EventsConfigView
-    }
+    },
+    {
+      path: '/config',
+      name: 'config',
+      component: ConfigView
+    },
   ]
 })
 
diff --git a/sermant-backend/src/main/webapp/frontend/src/views/ConfigView.vue b/sermant-backend/src/main/webapp/frontend/src/views/ConfigView.vue
new file mode 100644
index 0000000000..9a26d9ff5f
--- /dev/null
+++ b/sermant-backend/src/main/webapp/frontend/src/views/ConfigView.vue
@@ -0,0 +1,352 @@
+<template>
+  <div style="width: 100%">
+    <el-page-header :title="'实例'" @back="goBack">
+      <template #content>
+        <span class="font-600 mr-3"> 配置管理 </span>
+      </template>
+    </el-page-header>
+    <el-descriptions title="配置中心信息：" style="margin-top: 30px; width: 800px;">
+      <el-descriptions-item label=""><b>配置中心类型：</b>{{ configCenterInfo.dynamicConfigType }}</el-descriptions-item>
+      <el-descriptions-item label=""><b>配置中心地址：</b>{{ configCenterInfo.serverAddress }}</el-descriptions-item>
+      <el-descriptions-item label=""><b>用户名：</b>{{ configCenterInfo.userName }}</el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions title="配置信息：" style="margin-top: 15px; width: 800px;"></el-descriptions>
+    <el-form :inline="true" style="margin-top: 15px; margin-bottom: 15px;">
+      <el-form-item>
+        <el-select v-model="value" placeholder="配置类型" size="large" @change="handlerChangePluginType">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="configCenterInfo.dynamicConfigType == 'nacos'">
+        <el-input size="large" v-model.trim="requestParam.namespace" placeholder="请输入命名空间"/>
+      </el-form-item>
+      <el-form-item v-if="requestParam.pluginType != 'other' && requestParam.pluginType != 'flowcontrol'">
+        <el-input size="large" v-model.trim="requestParam.appName" placeholder="请输入应用名称"/>
+      </el-form-item>
+      <el-form-item v-if="requestParam.pluginType != 'other'">
+        <el-input size="large" v-model.trim="requestParam.serviceName" placeholder="请输入服务名称"/>
+      </el-form-item>
+      <el-form-item v-if="requestParam.pluginType != 'other' && requestParam.pluginType != 'flowcontrol'">
+        <el-input size="large" v-model.trim="requestParam.environment" placeholder="请输入环境名称"/>
+      </el-form-item>
+      <el-form-item
+          v-if="requestParam.pluginType == 'mq-consume-prohibition' || requestParam.pluginType == 'database-write-prohibition'">
+        <el-input size="large" v-model.trim="requestParam.zone" placeholder="请输入区域名称"/>
+      </el-form-item>
+      <el-form-item v-if="requestParam.pluginType == 'other'">
+        <el-input size="large" v-model.trim="requestParam.group" placeholder="请输入group"/>
+      </el-form-item>
+      <el-form-item v-if="requestParam.pluginType == 'other'">
+        <el-input size="large" v-model.trim="requestParam.key" placeholder="请输入key"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="large" @click="getConfigList">
+          <el-icon>
+            <Search/>
+          </el-icon>
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="configInfos.configInfos" border style="width: 100%;">
+      <el-table-column v-if="configCenterInfo.dynamicConfigType == 'nacos'"
+                       column-key="namespace" align="center" prop="namespace" width="150px" label="命名空间"/>
+      <el-table-column column-key="appName" align="center" prop="appName" width="150px" label="应用名称"/>
+      <el-table-column column-key="serviceName" align="center" prop="serviceName" width="300px" label="服务名称"/>
+      <el-table-column column-key="environment" align="center" prop="environment" width="150px" label="环境名称"/>
+      <el-table-column
+          v-if="requestParam.pluginType == 'mq-consume-prohibition' || requestParam.pluginType == 'database-write-prohibition'"
+          column-key="zone" align="center" prop="zone" width="150px" label="区域名称"/>
+      <el-table-column column-key="group" align="center" prop="group" label="group"/>
+      <el-table-column column-key="key" align="center" prop="key" label="key"/>
+      <el-table-column fixed="right" align="center" label="操作类型" width="120px">
+        <template #default="scope">
+          <el-tooltip content="修改" effect="light">
+            <el-button type="primary" @click="toModifyConfig(scope.row)" :icon="Edit" circle/>
+          </el-tooltip>
+          <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled" icon-color="#626AEF"
+                         title="是否确认删除当前配置项?" @confirm="deleteConfig(scope.row, scope.$index)">
+            <template #reference>
+              <div style="display: inline;">
+                <el-tooltip content="删除" effect="light">
+                  <el-button type="danger" :icon="Delete" style="margin-left: 12px;" circle/>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="display: flex;align-items: center; margin-top: 30px; width:100%;">
+      <el-button type="primary" size="large" style="margin-left: 42.5%; width: 15%;" shouldAddSpace="true"
+                 @click="toAddConfig()">新增
+      </el-button>
+    </div>
+    <div class="pagination-div" style="margin-top: 30px;">
+      <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageInfo.currentPage"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="pageInfo.pageSize"
+          :total="pageInfo.totalDataCount"
+          layout="sizes, prev, pager, next, jumper"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onBeforeMount, reactive, ref} from "vue";
+import {RouteParamsRaw, useRouter} from "vue-router";
+import axios from "axios";
+import {Delete, Edit, InfoFilled, Search} from '@element-plus/icons-vue'
+import {ElMessage} from 'element-plus'
+
+const requestParam = reactive<ConfigInfo>({
+  appName: "",
+  environment: "",
+  group: "",
+  key: "",
+  namespace: "",
+  pluginType: "",
+  serviceName: "",
+  zone: ""
+});
+
+const configCenterInfo = reactive({
+  dynamicConfigType: "zookeeper",
+  serverAddress: "127.0.0.1:2181",
+  userName: "zhp"
+});
+
+onBeforeMount(() => {
+  requestParam.pluginType = 'router';
+  requestParam.group = "app"
+  requestParam.key = "servicecomb."
+  getConfigList();
+  getConfigurationCenter();
+});
+
+const value = ref('router')
+
+const options = [
+  {label: '路由插件配置', value: 'router',},
+  {label: 'springboot注册插件配置', value: 'springboot-registry',},
+  {label: '注册迁移插件配置', value: 'service-registry',},
+  {label: '流控插件配置', value: 'flowcontrol',},
+  {label: '离群实例摘除插件配置', value: 'removal',},
+  {label: '负载均衡插件配置', value: 'loadbalancer',},
+  {label: '标签透传插件配置', value: 'tag-transmission',},
+  {label: '消息队列禁止消费', value: 'mq-consume-prohibition',},
+  {label: '数据库禁写插件配置', value: 'database-write-prohibition',},
+  {label: '其他配置', value: 'other',},
+]
+
+// 路由
+const router = useRouter();
+
+const goBack = () => {
+  router.push("/");
+};
+
+const configInfos = reactive({
+  configInfos: [] as ConfigInfo[]
+});
+
+const displayState = reactive({
+  currentPage: 1,
+  totalPage: 1,
+  pageSize: 10,
+});
+
+const pageInfo = {
+  pagedData: [{
+    pluginType: "",
+    namespace: "",
+    appName: "",
+    serviceName: "",
+    environment: "",
+    zone: "",
+    group: "",
+    key: "",
+  }], // 当前分页的数据列表
+  currentPage: 1, // 当前页码
+  pageSize: 10, // 每页显示的数据条数
+  totalDataCount: 0 // 数据总条数
+};
+
+const getConfigList = () => {
+  axios.get(`${window.location.origin}/sermant/configs`, {
+    params: requestParam,
+  }).then(function (response) {
+    const data = response.data;
+    if (data.code == "00") {
+      configInfos.configInfos = data.data;
+      displayState.totalPage = Math.ceil(data.data.length / displayState.pageSize);
+      displayState.currentPage = 1;
+      ElMessage({
+        message: "获取配置成功",
+        type: "success",
+      });
+    } else {
+      configInfos.configInfos = [];
+      ElMessage({
+        message: data.message,
+        type: "error",
+      });
+    }
+  }).catch(function () {
+    ElMessage({
+      message: "获取配置失败",
+      type: "error",
+    });
+  });
+};
+
+const getConfigurationCenter = () => {
+  axios.get(`${window.location.origin}/sermant/ConfigurationCenter`).then(function (response) {
+    const data = response.data.data;
+    configCenterInfo.serverAddress = data.serverAddress;
+    configCenterInfo.dynamicConfigType = data.dynamicConfigType.toLowerCase();
+    configCenterInfo.userName = data.userName;
+  }).catch(function (error) {
+    console.log(error);
+  });
+};
+
+const handlerChangePluginType = (value: string) => {
+  requestParam.pluginType = value;
+  if (value == "router") {
+    requestParam.group = "app="
+    requestParam.key = "servicecomb."
+  } else if (value == "springboot-registry") {
+    requestParam.group = "app="
+    requestParam.key = "sermant.plugin.registry"
+  } else if (value == "service-registry") {
+    requestParam.group = "app="
+    requestParam.key = "sermant.agent.registry"
+  } else if (value == "flowcontrol") {
+    requestParam.group = "service="
+    requestParam.key = "servicecomb."
+  } else if (value == "removal") {
+    requestParam.group = "app="
+    requestParam.key = "sermant.removal.config."
+  } else if (value == "loadbalancer") {
+    requestParam.group = "app="
+    requestParam.key = "servicecomb."
+  } else if (value == "tag-transmission") {
+    requestParam.group = "sermant/tag-transmission-plugin"
+    requestParam.key = "tag-config"
+  } else if (value == "mq-consume-prohibition") {
+    requestParam.group = "app="
+    requestParam.key = "sermant.mq.consume."
+  } else if (value == "database-write-prohibition") {
+    requestParam.group = "app="
+    requestParam.key = "sermant.database.write."
+  } else if (value == "other") {
+    requestParam.group = ""
+    requestParam.key = ""
+  }
+  requestParam.appName = "";
+  requestParam.serviceName = "";
+  requestParam.zone = "";
+  requestParam.environment = "";
+}
+
+interface ConfigInfo {
+  pluginType: string,
+  namespace: string,
+  appName: string,
+  serviceName: string,
+  environment: string,
+  zone: string,
+  group: string,
+  key: string,
+}
+
+const fetchData = () => {
+  // 根据当前页码和每页显示条数，截取当前分页的数据
+  const startIndex = (pageInfo.currentPage - 1) * pageInfo.pageSize;
+  const endIndex = startIndex + pageInfo.pageSize;
+  pageInfo.pagedData = configInfos.configInfos.slice(startIndex, endIndex);
+};
+const handleSizeChange = (newSize: number) => {
+  // 每页显示条数改变时触发
+  pageInfo.pageSize = newSize;
+  pageInfo.currentPage = 1; // 回到第一页
+  fetchData();
+};
+
+const handleCurrentChange = (newPage: number) => {
+  // 当前页码改变时触发
+  pageInfo.currentPage = newPage;
+  fetchData();
+};
+
+const deleteConfig = (row: ConfigInfo, index: number) => {
+  const params = {
+    group: row.group,
+    key: row.key
+  };
+  axios.delete(`${window.location.origin}/sermant/config`, {
+    params: params,
+  }).then(function (response) {
+    const data = response.data;
+    if (data.code == "00") {
+      ElMessage({
+        message: "删除配置成功",
+        type: "success",
+      });
+      deleteRow(index);
+    } else {
+      configInfos.configInfos = [];
+      ElMessage({
+        message: data.message,
+        type: "error",
+      });
+    }
+  }).catch(function () {
+    ElMessage({
+      message: "删除配置失败",
+      type: "error",
+    });
+  });
+};
+
+const toAddConfig = () => {
+  const params = {
+    type: "add",
+    configType: configCenterInfo.dynamicConfigType
+  };
+  router.push({name: "configInfo", query: params});
+};
+
+const toModifyConfig = (row: ConfigInfo) => {
+  const params: RouteParamsRaw = {
+    pluginType: row.pluginType,
+    namespace: row.namespace,
+    appName: row.appName,
+    serviceName: row.serviceName,
+    environment: row.environment,
+    zone: row.zone,
+    group: row.group,
+    key: row.key,
+    type: "modify",
+    configType: configCenterInfo.dynamicConfigType
+  };
+  router.push({name: "configInfo", query: params});
+};
+
+const deleteRow = (index: number) => {
+  configInfos.configInfos.splice(index, 1)
+}
+</script>
+
+<style scoped>
+.pagination-div {
+  margin: 5px;
+  display: flex;
+  justify-content: space-around;
+}
+</style>