feat(data statistics): add statistic data for south and north nodes

src/api/config.ts

@@ -159,7 +159,6 @@ export const queryNodeConfig = async (node: string) => {
 }
 
 /* GROUP */
-
 export const queryGroupList = async (node: string): Promise<Array<GroupData>> => {
   const { data }: AxiosResponse<{ error: number; groups: Array<GroupData> }> = await http.get('/group', {
     params: { node },
@@ -192,7 +191,6 @@ export const updateGroup = async (data: GroupForm): Promise<AxiosResponse> => {
 }
 
 /* TAG */
-
 export const queryTagList = async (node: string, groupName: string): Promise<Array<TagData>> => {
   const { data } = await http.get('/tags', { params: { node, group: groupName } })
   return Promise.resolve(data.tags || [])
@@ -215,7 +213,6 @@ export const updateTag = (node: string, group: string, tag: TagForm) => {
 }
 
 /* PLUGIN */
-
 export const queryPluginList = (): Promise<AxiosResponse<{ plugins: Array<CreatedPlugin> }>> => {
   return http.get('/plugin')
 }
@@ -231,3 +228,15 @@ export const updatePlugin = (data: PluginForm) => {
 export const deletePlugin = (pluginName: string) => {
   return http.delete('/plugin', { data: { plugin: pluginName } })
 }
+
+/* Data statistic */
+
+/**
+ *  Get Node Statistic Data
+ *  param { String } type: 'app'(north node) | 'driver'(south node)
+ *  param { String } node: Optional, if you want to get the data statisctics of a node, pass in the parameter node name
+ *  */
+export const getDataStatisticByType = (type = 'driver', params = {}): Promise<AxiosResponse<string>> => {
+  return http.get(`/metrics?category=${type}`, { params })
+}
+/* Data statistic end */

src/composables/config/useDriver.ts

@@ -1,8 +1,9 @@
-import { sendCommandToNode } from '@/api/config'
+import { sendCommandToNode, getDataStatisticByType } from '@/api/config'
 import type { DriverItemInList } from '@/types/config'
 import { DriverDirection, NodeLinkState, NodeOperationCommand, NodeState } from '@/types/enums'
 import { NORTH_DRIVER_NODE_TYPE, SOUTH_DRIVER_NODE_TYPE } from '@/utils/constants'
-import { computed } from 'vue'
+// import { ElLoading } from 'element-plus'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 export const useDriverStatus = (props: { data: DriverItemInList }) => {
@@ -95,3 +96,43 @@ export const useNodeType = () => {
     getNodeTypeLabelByValue,
   }
 }
+
+export const dataStatistics = () => {
+  const drawerRef = ref()
+  const dataStatisticsVisiable = ref(false)
+  const loadingStatistic = ref(false)
+  const nodeStatisticData = ref('')
+
+  const isShowDataStatistics = (value?: boolean) => {
+    if (value === undefined || value === null) {
+      dataStatisticsVisiable.value = !dataStatisticsVisiable.value
+      return
+    }
+    dataStatisticsVisiable.value = value
+  }
+
+  /**
+   * get north app node or south device node statistic data
+   * @param type 'app' | 'driver' (north | south)
+   * @param params { node name }
+   */
+  const getNodeStatisticData = (type: string, params: any) => {
+    loadingStatistic.value = true
+    getDataStatisticByType(type, params)
+      .then((res) => {
+        nodeStatisticData.value = res.data || ''
+      })
+      .finally(() => {
+        loadingStatistic.value = false
+      })
+  }
+
+  return {
+    drawerRef,
+    isShowDataStatistics,
+    dataStatisticsVisiable,
+    nodeStatisticData,
+    loadingStatistic,
+    getNodeStatisticData,
+  }
+}

src/i18n/config.ts

@@ -388,4 +388,8 @@ export default {
     zh: '运行成功',
     en: 'Run successfully',
   },
+  dataStatistics: {
+    zh: '数据统计',
+    en: 'Data statistics',
+  },
 }

src/views/config/components/dataStatisticsDrawer.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-drawer v-model="visible" :title="nodeName" direction="rtl" size="50%" custom-class="dataStatisticsDrawer">
+    <main ref="drawerRef" class="content">
+      {{ nodeStatisticData }}
+    </main>
+    <span v-if="!nodeStatisticData && !loadingStatistic" class="empty-state">{{ $t('common.emptyData') }}</span>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps, defineEmits } from 'vue'
+import { ElDrawer } from 'element-plus'
+import { dataStatistics } from '@/composables/config/useDriver'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  type: { type: String, default: '' }, // 'app' | 'driver'
+  nodeName: { type: String, default: '' },
+})
+const emits = defineEmits(['update:modelValue'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val: boolean) => {
+    emits('update:modelValue', val)
+  },
+})
+
+const { drawerRef, loadingStatistic, nodeStatisticData, getNodeStatisticData } = dataStatistics()
+
+if (props.type && props.nodeName) {
+  getNodeStatisticData(props.type, { node: props.nodeName })
+}
+</script>
+
+<style lang="scss">
+.dataStatisticsDrawer {
+  .el-drawer__header {
+    margin-bottom: 20px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+  .el-drawer__body {
+    border-top: 1px solid #eee;
+    overflow: auto;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.content {
+  padding: 20px;
+  white-space: pre-wrap;
+  color: #333;
+}
+.empty-state {
+  display: inline-block;
+  width: 100%;
+  font-size: 16px;
+  text-align: center;
+  color: #666;
+}
+</style>

src/views/config/northDriver/components/SetupItemCard.vue

@@ -6,6 +6,9 @@
         <AComWithDesc :content="$t('config.appConfig')">
           <i class="iconfont iconsetting" @click.stop="goNodeConfig"></i>
         </AComWithDesc>
+        <AComWithDesc :content="$t('config.dataStatistics')">
+          <i class="iconfont iconstatus" @click.stop="isShowDataStatistics()"></i>
+        </AComWithDesc>
         <AComWithDesc :content="$t('common.delete')">
           <i
             class="iconfont icondelete"
@@ -38,17 +41,26 @@
       <span>{{ data.plugin }}</span>
     </div>
   </div>
+
+  <!-- Data Statistics -->
+  <DataStatisticsDrawer
+    v-if="dataStatisticsVisiable"
+    v-model="dataStatisticsVisiable"
+    :type="'app'"
+    :node-name="data.name"
+  ></DataStatisticsDrawer>
 </template>
 
 <script lang="ts" setup>
-import AComWithDesc from '@/components/AComWithDesc.vue'
-import useDeleteDriver from '@/composables/config/useDeleteDriver'
-import { useDriverStatus, useNodeStartStopStatus } from '@/composables/config/useDriver'
-import { PluginKind } from '@/types/enums'
-import type { PropType } from 'vue'
 import { computed, defineEmits, defineProps } from 'vue'
+import type { PropType } from 'vue'
 import { useRouter } from 'vue-router'
+import useDeleteDriver from '@/composables/config/useDeleteDriver'
+import { useDriverStatus, useNodeStartStopStatus, dataStatistics } from '@/composables/config/useDriver'
+import { PluginKind } from '@/types/enums'
 import type { DriverItemInList } from '@/types/config'
+import AComWithDesc from '@/components/AComWithDesc.vue'
+import DataStatisticsDrawer from '../../components/dataStatisticsDrawer.vue'
 
 const emit = defineEmits(['deleted', 'updated', 'toggleStatus'])
 const router = useRouter()
@@ -89,6 +101,9 @@ const deleteDriver = async () => {
   await delDriver(props.data)
   emit('deleted')
 }
+
+// dataStatistics
+const { isShowDataStatistics, dataStatisticsVisiable } = dataStatistics()
 </script>
 
 <style lang="scss">

src/views/config/southDriver/components/SouthDriveItemCard.vue

@@ -6,6 +6,9 @@
         <AComWithDesc :content="$t('config.deviceConfig')">
           <i class="iconfont iconsetting" @click.stop="goNodeConfig"></i>
         </AComWithDesc>
+        <AComWithDesc :content="$t('config.dataStatistics')">
+          <i class="iconfont iconstatus" @click.stop="isShowDataStatistics()"></i>
+        </AComWithDesc>
         <AComWithDesc :content="$t('common.delete')">
           <i class="iconfont icondelete" @click.stop="deleteDriver"></i>
         </AComWithDesc>
@@ -40,16 +43,25 @@
       </div> -->
     </div>
   </div>
+
+  <!-- Data Statistics -->
+  <DataStatisticsDrawer
+    v-if="dataStatisticsVisiable"
+    v-model="dataStatisticsVisiable"
+    :type="'driver'"
+    :node-name="data.name"
+  ></DataStatisticsDrawer>
 </template>
 
 <script lang="ts" setup>
-import AComWithDesc from '@/components/AComWithDesc.vue'
-import useDeleteDriver from '@/composables/config/useDeleteDriver'
-import { useDriverStatus, useNodeStartStopStatus } from '@/composables/config/useDriver'
 import type { PropType } from 'vue'
 import { computed, defineEmits, defineProps } from 'vue'
 import { useRouter } from 'vue-router'
+import useDeleteDriver from '@/composables/config/useDeleteDriver'
+import { useDriverStatus, useNodeStartStopStatus, dataStatistics } from '@/composables/config/useDriver'
 import type { DriverItemInList } from '@/types/config'
+import AComWithDesc from '@/components/AComWithDesc.vue'
+import DataStatisticsDrawer from '../../components/dataStatisticsDrawer.vue'
 
 const props = defineProps({
   data: {
@@ -87,6 +99,9 @@ const deleteDriver = async () => {
   emit('deleted')
 }
 const goNodeConfig = () => router.push({ name: 'SouthDriverConfig', params: { node: props.data.name } })
+
+// dataStatistics
+const { isShowDataStatistics, dataStatisticsVisiable } = dataStatistics()
 </script>
 
 <style lang="scss">