Refactor(*): refactor the apis, to avoid triggering the same api multiple times

src/composables/config/useAddGroup.ts

@@ -4,7 +4,6 @@ import useNodeList from './useNodeList'
 import { addGroup, updateGroup } from '@/api/config'
 import { EmqxMessage } from '@emqx/emqx-ui'
 import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
 import { useNodePluginInfo } from './usePluginInfo'
 
 export default () => {
@@ -15,7 +14,6 @@ export default () => {
   })
 
   const { t } = useI18n()
-  const route = useRoute()
 
   const formCom = ref()
   const groupForm = ref(createRawForm())
@@ -86,8 +84,7 @@ export default () => {
   }
 
   // get node plugin schema
-  const node = computed(() => route.params.node.toString())
-  const { getNodePluginInfo } = useNodePluginInfo(node.value)
+  const { getNodePluginInfo } = useNodePluginInfo()
 
   const getPluginConfigInfo = async () => {
     const data = await getNodePluginInfo()

src/composables/config/useDriver.ts

@@ -1,4 +1,5 @@
 import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
 import { sendCommandToNode, updateNodeLogLevelToDebug } from '@/api/config'
 import { getStatisticByType } from '@/api/statistics'
 import type { DriverItemInList } from '@/types/config'
@@ -180,6 +181,21 @@ export const useDriverName = () => {
   }
 }
 
+export const useDriverInfo = (node?: Record<string, any>) => {
+  const route = useRoute()
+
+  const nodePlugin = computed(() => {
+    return node?.plugin || route.params?.plugin?.toString() || ''
+  })
+
+  const isMQTTPugin = computed(() => nodePlugin.value && nodePlugin.value.toLocaleLowerCase() === 'mqtt')
+
+  return {
+    nodePlugin,
+    isMQTTPugin,
+  }
+}
+
 export const useListShowType = () => {
   const store = useStore()
 

src/composables/config/useDriverDialog.ts

@@ -40,8 +40,8 @@ export default (type: DriverDirection) => {
     driverForm.value = createRawDriverForm()
   }
 
-  const { goNodeConfig: goNorthNodeConfig } = useNorthDriver()
-  const { goNodeConfig: goSouthNodeConfig } = useSouthDriver()
+  const { goNodeConfig: goNorthNodeConfig } = useNorthDriver(false)
+  const { goNodeConfig: goSouthNodeConfig } = useSouthDriver(false)
 
   const goNodeConfigPage = () => {
     const { name } = driverForm.value

src/composables/config/useGroupList.ts

@@ -23,6 +23,7 @@ export default () => {
   const groupList: Ref<Array<GroupDataInTable>> = ref([])
   const isListLoading = ref(false)
 
+  // for upload tags
   const { nodePluginInfo } = useAddTag()
 
   // download | import | export

src/composables/config/useNorthDriver.ts

@@ -44,11 +44,6 @@ export default (autoLoad = true, needRefreshStatus = false) => {
     editDriverData.value = { name: node.name }
   }
 
-  const nodePlugin = computed(
-    () => (nodeName: string) => northDriverList.value.find((item: DriverItemInList) => item.name === nodeName)?.plugin,
-  )
-  const isMQTTPugin = computed(() => (plugin: string | undefined) => plugin && plugin.toLocaleLowerCase() === 'mqtt')
-
   const getNorthDriverList = async () => {
     try {
       isListLoading.value = true
@@ -126,6 +121,7 @@ export default (autoLoad = true, needRefreshStatus = false) => {
         name: 'NorthDriverGroup',
         params: {
           node: node.name,
+          plugin: node.plugin,
         },
       })
     }
@@ -164,8 +160,6 @@ export default (autoLoad = true, needRefreshStatus = false) => {
     getNorthDriverList,
     dbGetNorthDriverList,
     reloadDriverList,
-    isMQTTPugin,
-    nodePlugin,
     goGroupPage,
     goNodeConfig,
     modifyNodeLogLevel,

src/composables/config/usePluginInfo.ts

@@ -6,32 +6,24 @@ import type { PluginInfo } from '@/types/config'
 import { DriverDirection } from '@/types/enums'
 import { useNodeMsgMap } from './useNodeList'
 import { useGetPluginMsgIdMap } from './usePlugin'
-import { useTemplateListMap } from '@/composables/config/useTemplateList'
 
-export const useTemplatePluginInfo = (template?: string) => {
+export const useTemplatePluginInfo = (plugin?: string) => {
   const route = useRoute()
 
-  const { getAllTemplates, templateListMap } = useTemplateListMap()
   const templatePluginInfo: Ref<PluginInfo> = ref({} as PluginInfo)
 
-  const templateName = computed(() => template || route.params.template.toString())
-
-  const templatePlugin = computed(() => {
-    const tem = templateListMap.value.find(({ name }) => name === templateName.value)
-    return tem?.plugin || ''
+  const pluginName = computed(() => {
+    return plugin || route.params?.plugin?.toString() || ''
   })
 
   // Limit the type of tag
   const { pluginMsgIdMap, initMsgIdMap } = useGetPluginMsgIdMap()
   const getTemplatePluginInfo = async () => {
     try {
-      await getAllTemplates()
       await initMsgIdMap()
 
-      const pluginName = templatePlugin.value
-      const nodePluginToLower = pluginName.toLocaleLowerCase()
-
-      const schemaName = pluginMsgIdMap[pluginName]?.schema || nodePluginToLower
+      const nodePluginToLower = pluginName.value.toLocaleLowerCase()
+      const schemaName = pluginMsgIdMap[pluginName.value]?.schema || nodePluginToLower
 
       const { data } = await queryPluginConfigInfo(schemaName)
       templatePluginInfo.value = data || {}
@@ -47,22 +39,22 @@ export const useTemplatePluginInfo = (template?: string) => {
   }
 }
 
-export const useNodePluginInfo = (node?: string) => {
+export const useNodePluginInfo = (plugin?: string) => {
   const route = useRoute()
 
+  const pluginName = computed(() => {
+    return plugin || route.params?.plugin?.toString() || ''
+  })
+
   const nodePluginInfo: Ref<PluginInfo> = ref({} as PluginInfo)
-  const { getNodeMsgById, initMap } = useNodeMsgMap(DriverDirection.South, false)
   const { pluginMsgIdMap, initMsgIdMap } = useGetPluginMsgIdMap()
 
-  const nodeName = computed(() => node || route.params.node.toString())
   const getNodePluginInfo = async () => {
     try {
-      await initMap()
       await initMsgIdMap()
-      const pluginName = getNodeMsgById(nodeName.value).plugin
-      const nodePluginToLower = pluginName.toLocaleLowerCase()
 
-      const schemaName = pluginMsgIdMap[pluginName]?.schema || nodePluginToLower
+      const nodePluginToLower = pluginName.value.toLocaleLowerCase()
+      const schemaName = pluginMsgIdMap[pluginName.value]?.schema || nodePluginToLower
 
       const { data } = await queryPluginConfigInfo(schemaName)
       nodePluginInfo.value = data || {}

src/composables/config/useSouthDriver.ts

@@ -154,6 +154,7 @@ export default (autoLoad = true, needRefreshStatus = false) => {
       name: 'SouthDriverGroup',
       params: {
         node: node.name,
+        plugin: node.plugin,
       },
     })
   }

src/composables/config/useTemplateGroupList.ts

@@ -25,6 +25,7 @@ export default () => {
   const groupList: Ref<Array<GroupDataInTable>> = ref([])
   const isListLoading = ref(false)
 
+  // for upload tags
   const { pluginInfo } = useTemplateAddTag()
 
   // download | import | export
@@ -52,7 +53,7 @@ export default () => {
   // selected groups
   const groupCheckedList = computed(() => {
     const checkedList: Array<GroupDataInTable> = groupList.value.filter(({ checked }) => checked)
-    const newCheckedList: Array<GroupData> = OmitArrayFields(checkedList, ['checked'])
+    const newCheckedList: Array<GroupData> = checkedList.length ? OmitArrayFields(checkedList, ['checked']) : []
     return newCheckedList
   })
 

src/composables/config/useTemplateList.ts

@@ -54,18 +54,18 @@ export default () => {
   }
 
   const goGroupPage = (rowData: RawTemplateData) => {
-    const { name } = rowData
+    const { name, plugin } = rowData
     router.push({
       name: 'TemplateGroup',
       params: {
         template: name,
+        plugin,
       },
     })
   }
   const editTemplate = (rowData: RawTemplateData) => {
     // TODO
     isEditTemplate.value = true
-    console.log('row', rowData)
   }
 
   const removeTemplate = async (rowData: RawTemplateData) => {

src/router/routes.ts

@@ -60,7 +60,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: { hiddenBreadcrumb: true },
       },
       {
-        path: ':node',
+        path: ':node/:plugin',
         name: 'NorthDriverGroup',
         component: () => import('@/views/config/northDriver/Group.vue'),
         meta: { title: 'config.groupList' },
@@ -99,7 +99,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: { title: 'config.deviceConfig' },
       },
       {
-        path: ':node',
+        path: ':node/:plugin',
         name: 'SouthDriverGroupG',
         component: () => import('@/components/LayoutContent.vue'),
         meta: { title: 'config.groupList' },
@@ -146,7 +146,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: { hiddenBreadcrumb: true },
       },
       {
-        path: ':template',
+        path: ':template/:plugin',
         name: 'TemplateGroupG',
         component: () => import('@/components/LayoutContent.vue'),
         meta: { title: 'config.groupList' },

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

@@ -19,7 +19,6 @@
           <emqx-option v-for="{ name } in deviceList" :key="name" :value="name" :label="name" />
         </emqx-select>
       </emqx-form-item>
-
       <emqx-form-item prop="group" :label="$t('config.group')">
         <emqx-select
           v-model="subscriptionForm.group"
@@ -30,8 +29,7 @@
           <emqx-option v-for="{ name } in groupList" :key="name" :value="name" :label="name" />
         </emqx-select>
       </emqx-form-item>
-
-      <emqx-form-item v-if="isMQTTPugin(nodePlugin(currentNode))" :label="$t('config.topic')">
+      <emqx-form-item v-if="isMQTTPugin" :label="$t('config.topic')">
         <emqx-input v-model="subscriptionForm.topic" />
       </emqx-form-item>
     </emqx-form>
@@ -50,7 +48,7 @@
 import { computed, defineProps, defineEmits, watch } from 'vue'
 import { ElDialog, ElAlert } from 'element-plus'
 import { useAddSubscription } from '@/composables/config/useSubscription'
-import useNorthDriver from '@/composables/config/useNorthDriver'
+import { useDriverInfo } from '@/composables/config/useDriver'
 
 const props = defineProps({
   modelValue: {
@@ -85,7 +83,7 @@ const {
   submitData,
 } = useAddSubscription(props)
 
-const { isMQTTPugin, nodePlugin } = useNorthDriver()
+const { isMQTTPugin } = useDriverInfo()
 
 const submit = async () => {
   await submitData()