feat(module): support view usage for username quota

src/api/modules.js

@@ -141,4 +141,8 @@ export function queryNodeAuditLogs(node, params) {
   return http.get(`/nodes/${node}/audits`, { params })
 }
 
+export function queryUsernameQuotaUsage(params) {
+  return http.get(`/quota/usernames`, { params })
+}
+
 export default {}

src/i18n/Modules.js

@@ -522,4 +522,12 @@ export default {
     zh: '指定过滤条件实时输出 DEBUG 级别日志，用于调试和排查错误。',
     en: 'Specify filter conditions to output DEBUG level logs in real-time for debugging and troubleshooting.',
   },
+  numberOfSessions: {
+    zh: '会话数',
+    en: 'Number of Sessions',
+  },
+  usage: {
+    zh: '使用详情',
+    en: 'Usage',
+  },
 }

src/views/Modules/ModuleDetail.vue

@@ -69,6 +69,11 @@
               <GCPIoT v-if="detailTabs === 'devices'" />
             </el-tab-pane>
           </template>
+          <template v-else-if="moduleData.type == 'username_quota'">
+            <el-tab-pane ref="moduleSpecialTab" :label="$t('Modules.usage')" :name="specialModuleDefaultTabName">
+              <UsernameQuota v-if="detailTabs === 'usage'" />
+            </el-tab-pane>
+          </template>
         </template>
         <el-tab-pane :label="$t('Modules.configuration')" name="configuration">
           <!-- <div class="emq-title module-title">
@@ -251,9 +256,9 @@ import LwClients from './components/Lwm2mProtocol/LwClients'
 import TopicMetrics from './components/TopicMetrics/TopicMetrics'
 import SlowQuery from './components/SlowQuery/SlowQuery.vue'
 import GCPIoT from './components/GCPIoT/GCPIoT.vue'
+import UsernameQuota from './components/UsernameQuota/UsernameQuota.vue'
 import TLSVersionSelect from '@/components/TLSVersionSelect.vue'
 import BinaryFileEditor from '@/components/BinaryFileEditor.vue'
-
 import Listeners from './components/Listeners'
 
 export default {
@@ -275,6 +280,7 @@ export default {
     TLSVersionSelect,
     GCPIoT,
     BinaryFileEditor,
+    UsernameQuota,
   },
 
   mixins: [handleMongoDBSRV('module')],
@@ -312,6 +318,7 @@ export default {
         slow_subscribers_statistics: 'subscribers',
         tracer: 'trace',
         gcp_device: 'devices',
+        username_quota: 'usage',
       },
       // canManageModuleTypes: [
       //   'mnesia_authentication',

src/views/Modules/components/UsernameQuota/UsernameQuota.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="username-quota" :loading="isTableLoading">
+    <el-table :data="tableData">
+      <el-table-column prop="username" :label="$t('Clients.username')" />
+      <el-table-column prop="used" :label="$t('Modules.numberOfSessions')" />
+    </el-table>
+    <div class="emq-table-footer">
+      <el-pagination
+        hide-on-single-page
+        background
+        layout="total, sizes, prev, pager, next"
+        :page-sizes="[20, 50, 100, 500]"
+        :page-size.sync="params._limit"
+        :current-page.sync="params._page"
+        :total="params._count"
+        @size-change="handleSizeChange"
+        @current-change="getData"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryUsernameQuotaUsage } from '@/api/modules'
+
+export default {
+  name: 'SlowQuery',
+  data() {
+    return {
+      tableData: [],
+      params: {
+        _page: 1,
+        _limit: 20,
+        _count: 0,
+      },
+      isTableLoading: false,
+    }
+  },
+
+  created() {
+    this.getData()
+  },
+
+  methods: {
+    async getData() {
+      try {
+        this.isTableLoading = true
+        const { items, meta } = await queryUsernameQuotaUsage(this.params)
+        this.tableData = items
+        this.params._count = meta.count
+      } catch (error) {
+        //
+      } finally {
+        this.isTableLoading = false
+      }
+    },
+    handleSizeChange() {
+      this.params._page = 1
+      this.getData()
+    },
+  },
+}
+</script>
+<style lang="scss">
+.username-quota {
+  padding: 28px 16px 16px;
+}
+</style>