feat: 订阅者列表页面

src/api/naming.ts

@@ -38,9 +38,17 @@ class NamingApi {
       params: param
     });
   }
-
-  createService(info: IServiceInfo): Promise<AxiosResponse<IApiResult<any>>> {
-    return axios.requestJSON({
+  querySubscriberPage(
+    param: IServiceQueryPageParam
+  ): Promise<AxiosResponse<IServiceQueryPageResult<IServiceQueryItem>>> {
+    return axios.request({
+      method: 'get',
+      url: '/rnacos/api/console/ns/service/subscribers',
+      params: param
+    });
+  }
+  createService(info: IServiceInfo): Promise<AxiosResponse> {
+    return axios.request({
       method: 'post',
       url: '/rnacos/api/console/v2/service/add',
       data: JSON.stringify(info)

src/components/naming/SuberscriberListColumns.jsx

@@ -0,0 +1,24 @@
+import { useI18n } from 'vue-i18n';
+export const createColumns = function (
+) {
+  const { t } = useI18n();
+
+  const columns = [
+    {
+      title: t('service.name'),
+      key: 'serviceName'
+    },
+    {
+      title: t('service.groupName'),
+      key: 'groupName'
+    },
+    {
+      title: t('client.address'),
+      key: 'address',
+      render(row) {
+        return `${row.ip}:${row.port}`;
+      },
+    },
+  ];
+  return columns;
+};

src/i18n/lang/en-US.js

@@ -75,6 +75,9 @@ const message = {
     export_config: 'Export Config',
     import_config: 'Import Config'
   },
+  client: {
+    address: 'Client Address'
+  },
   namespace: {
     namespace: 'Namespace',
     the_namespace_id_has_been_copied: 'The namespace id has been copied!',
@@ -250,6 +253,7 @@ const message = {
     config_history: 'Config histories',
     service_management: 'ServiceManagement',
     service_list: 'Service list',
+    subscriber_list: 'Subscriber list',
     service_instance_list: 'Service instance list',
     system_management: 'System',
     user_management: 'User list',

src/i18n/lang/zh-CN.js

@@ -41,6 +41,9 @@ const message = {
     masternode: '主节点',
     cluster_info: '集群信息'
   },
+  client: {
+    address: '客户端地址'
+  },
   config: {
     config: '配置',
     config_id: '配置ID',
@@ -242,6 +245,7 @@ const message = {
     config_history: '配置历史记录',
     service_management: '服务管理',
     service_list: '服务列表',
+    subscriber_list: '订阅者列表',
     service_instance_list: '服务实例列表',
     system_management: '系统管理',
     user_management: '用户管理',

src/pages/SubscriberListPage.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      <div class="title">
+        <span> {{ this.$t('menu.subscriber_list') }} </span>
+      </div>
+      <div class="namespace">
+        <NamespacePopSelect @change="queryList" />
+      </div>
+    </div>
+    <div class="content-wrap">
+      <div class="form-container">
+        <div class="query-params">
+          <n-form label-placement="left" label-width="auto">
+            <div class="paramWrap">
+              <n-form-item
+                :label="this.$t('service.name')"
+                path="param.serviceParam"
+              >
+                <n-input
+                  v-model:value="param.serviceParam"
+                  :placeholder="this.$t('service.inputName')"
+                  clearable
+                  @keydown.enter.prevent
+                  @keyup.enter="queryList"
+                />
+              </n-form-item>
+              <n-form-item
+                :label="this.$t('service.groupName')"
+                path="param.groupParam"
+              >
+                <n-input
+                  v-model:value="param.groupParam"
+                  :placeholder="this.$t('service.inputGroupName')"
+                  clearable
+                  @keydown.enter.prevent
+                  @keyup.enter="queryList"
+                />
+              </n-form-item>
+            </div>
+          </n-form>
+          <div class="queryButton">
+            <span class="query-button-item">
+              <n-button tertiary @click="queryList">{{
+                this.$t('common.query')
+              }}</n-button>
+            </span>
+          </div>
+        </div>
+        <n-data-table
+          remote
+          ref="table"
+          :scroll-x="600"
+          :bordered="false"
+          :columns="columns"
+          :data="data"
+          :loading="loading"
+          :pagination="pagination"
+          :row-key="rowKey"
+          @update:page="handlePageChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, defineComponent } from 'vue';
+import { namingApi } from '@/api/naming';
+import { namespaceStore } from '@/data/namespace';
+import { createColumns } from '@/components/naming/SuberscriberListColumns.jsx';
+import NamespacePopSelect from '@/components/namespace/NamespacePopSelect.vue';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+  components: {
+    NamespacePopSelect,
+  },
+  setup() {
+    const { t } = useI18n();
+    const dataRef = ref([]);
+    const loadingRef = ref(false);
+    const paramRef = ref({
+      serviceParam: '',
+      groupParam: '',
+      namespaceId: '',
+      pageNo: 1,
+      pageSize: 20
+    });
+    const paginationReactive = reactive({
+      page: 1,
+      pageCount: 1,
+      pageSize: 10,
+      itemCount: 0,
+      showSizePicker: true,
+      pageSizes: [10, 20, 50, 100],
+      onUpdatePageSize: (pageSize) => {
+        paginationReactive.pageSize = pageSize;
+        paginationReactive.page = 1;
+        doHandlePageChange(1);
+      },
+      prefix({ itemCount }) {
+        return t('common.total') + `: ${itemCount}`;
+      }
+    });
+
+    const doQueryList = () => {
+      return namingApi.querySubscriberPage({
+        namespaceId: namespaceStore.current.value.namespaceId,
+        accessToken: null,
+        serviceName: paramRef.value.serviceParam,
+        groupName: paramRef.value.groupParam,
+        pageNo: paginationReactive.page,
+        pageSize: paginationReactive.pageSize
+      });
+    };
+
+    const doHandlePageChange = (currentPage) => {
+      paginationReactive.page = currentPage;
+      if (!loadingRef.value) {
+        loadingRef.value = true;
+        doQueryList()
+          .then((res) => {
+            loadingRef.value = false;
+            if (res.status == 200) {
+              let count = res.data.count;
+              let pageSize = paginationReactive.pageSize;
+              console.info(res)
+              dataRef.value = res.data.subscribers;
+              paginationReactive.itemCount = count;
+              paginationReactive.pageCount = Math.round(
+                (count + pageSize - 1) / pageSize
+              );
+            } else {
+              window.$message.error('request err,status code:' + res.status);
+              dataRef.value = [];
+            }
+          })
+          .catch((err) => {
+            window.$message.error('request err,message' + err.message);
+            dataRef.value = [];
+            loadingRef.value = false;
+          });
+      }
+    };
+
+    let columns = createColumns();
+    return {
+      columns,
+      data: dataRef,
+      pagination: paginationReactive,
+      loading: loadingRef,
+      param: paramRef,
+      rowKey(rowData) {
+        return rowData.groupName + '@@' + rowData.serviceName + '@@' + rowData.ip + ':' + rowData.port;
+      },
+      doHandlePageChange,
+    };
+  },
+
+  computed: {
+  },
+  methods: {
+    queryList() {
+      this.doHandlePageChange(1);
+    },
+
+    handlePageChange(page) {
+      this.doHandlePageChange(page);
+    },
+  },
+  mounted() {
+    this.queryList();
+  }
+});
+</script>
+
+<style scoped>
+.wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #efefef;
+}
+
+.content-wrap {
+  padding: 10px 10px 10px 10px;
+  background: #efefef;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 16px 8px;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+  border-bottom: #ccc 1px solid;
+  background: #fff;
+  padding-right: 3px;
+}
+
+.title {
+  flex: 1 1 auto;
+  font: 14/1.25;
+  line-height: 30px;
+  padding-left: 15px;
+}
+
+.header-button {
+  flex: 0 0 auto;
+}
+
+.namespace {
+  flex: 0 0 auto;
+}
+
+.query-params {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+.paramWrap {
+  display: flex;
+  gap: 8px;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.queryButton {
+  display: flex;
+  align-items: center;
+}
+
+.query-button-item {
+  margin-left: 10px;
+}
+</style>

src/route/routes.js

@@ -5,6 +5,7 @@ import NamespacePage from '@/pages/NamespacePage';
 //import ConfigListPage from '@/pages/ConfigListPage.vue';
 //import ConfigHistoryListPage from '@/pages/ConfigHistoryListPage.vue';
 import ServiceListPage from '@/pages/ServiceListPage.vue';
+import SubscriberListPage from '@/pages/SubscriberListPage.vue';
 import ServiceInstanceListPage from '@/pages/ServiceInstanceListPage.vue';
 import NotFound from '@/pages/NotFound.vue';
 import ClusterPageVue from '@/pages/ClusterPage.vue';
@@ -85,6 +86,12 @@ export const routes = [
         meta: { title: t('menu.service_list') },
         component: ServiceListPage
       },
+      {
+        path: '/manage/subscriber',
+        name: 'manange subscriber',
+        meta: { title: t('menu.subscriber_list') },
+        component: SubscriberListPage
+      },
       {
         path: '/manage/service/instance',
         name: 'manange instance',
@@ -171,7 +178,11 @@ export const sideAllMenu = [
       {
         name: t('menu.service_list'),
         path: '/manage/service'
-      }
+      },
+      {
+        name: t('menu.subscriber_list'),
+        path: '/manage/subscriber'
+      },
     ]
   },
   {