Feat(north, south): support edit node name

src/api/config.ts

@@ -93,8 +93,7 @@ export const deleteDriver = (node: string) => {
   return http.delete('/node', { data: { name: node } })
 }
 
-// USELESS
-export const updateDriver = (data: { id: number; name: string }) => {
+export const updateDriver = (data: { name: string; new_name: string }) => {
   return http.put('/node', data)
 }
 

src/composables/config/useDriver.ts

@@ -167,12 +167,12 @@ export const useNodeDebugLogLevel = () => {
 
 export const useDriverName = () => {
   const isNotSupportRemoveNode = computed(() => (nodeName: string) => {
-    const nodeNameLowerCase = nodeName.toLocaleLowerCase()
+    const nodeNameLowerCase = nodeName?.toLocaleLowerCase()
     const whiteList = ['data-stream-processing', 'monitor']
     return whiteList.includes(nodeNameLowerCase)
   })
 
-  const isMonitorNode = (nodeName: string) => nodeName.toLowerCase() === 'monitor'
+  const isMonitorNode = (nodeName: string) => nodeName?.toLowerCase() === 'monitor'
 
   return {
     isNotSupportRemoveNode,

src/composables/config/useNodeList.ts

@@ -52,7 +52,7 @@ export const useFillNodeListStatusData = () => {
         const itemStatusData: DriverStateData = {
           running: !itemStatus ? 1 : itemStatus.running,
           link: !itemStatus ? 0 : itemStatus.link,
-          rtt: Number(itemStatus.rtt) || 0,
+          rtt: Number(itemStatus?.rtt) || 0,
         }
         const node = Object.assign(item, itemStatusData)
         return Promise.resolve(node)

src/composables/config/useNorthDriver.ts

@@ -33,6 +33,17 @@ export default (autoLoad = true, needRefreshStatus = false) => {
 
   let refreshStatusTimer: undefined | number
 
+  const showDialog = ref(false)
+  const showEditDialog = ref(false)
+  const editDriverData: Ref<{ name: string }> = ref({ name: '' })
+  const addConfig = () => {
+    showDialog.value = true
+  }
+  const editDialog = (node: DriverItemInList) => {
+    showEditDialog.value = true
+    editDriverData.value = { name: node.name }
+  }
+
   const nodePlugin = computed(
     () => (nodeName: string) => northDriverList.value.find((item: DriverItemInList) => item.name === nodeName)?.plugin,
   )
@@ -62,6 +73,11 @@ export default (autoLoad = true, needRefreshStatus = false) => {
     getNorthDriverList()
   }, 500)
 
+  const reloadDriverList = () => {
+    getNorthDriverList()
+    editDriverData.value = { name: '' }
+  }
+
   const startTimer = () => {
     refreshStatusTimer = window.setInterval(async () => {
       northDriverList.value = await fillNodeListStatusData(northDriverList.value)
@@ -144,12 +160,19 @@ export default (autoLoad = true, needRefreshStatus = false) => {
     isListLoading,
     getNorthDriverList,
     dbGetNorthDriverList,
+    reloadDriverList,
     isMQTTPugin,
     nodePlugin,
     goGroupPage,
     goNodeConfig,
     modifyNodeLogLevel,
     deleteDriver,
     sortDataByKey,
+
+    addConfig,
+    showDialog,
+    editDialog,
+    showEditDialog,
+    editDriverData,
   }
 }

src/composables/config/useSouthDriver.ts

@@ -28,6 +28,18 @@ export default (autoLoad = true, needRefreshStatus = false) => {
   const southDriverList: Ref<Array<DriverItemInList>> = ref([])
   const isListLoading: Ref<boolean> = ref(false)
 
+  // add | edit driver
+  const showDialog = ref(false)
+  const showEditDialog = ref(false)
+  const editDriverData: Ref<{ name: string }> = ref({ name: '' })
+  const addConfig = () => {
+    showDialog.value = true
+  }
+  const editDialog = (node: DriverItemInList) => {
+    showEditDialog.value = true
+    editDriverData.value = { name: node.name }
+  }
+
   const pageController = computed({
     get: () => store.state.paginationData,
     set: (val) => {
@@ -159,6 +171,11 @@ export default (autoLoad = true, needRefreshStatus = false) => {
     dbGetSouthDriverList()
   }
 
+  const reloadDriverList = () => {
+    getSouthDriverList()
+    editDriverData.value = { name: '' }
+  }
+
   if (autoLoad) {
     getSouthDriverList()
   }
@@ -183,10 +200,18 @@ export default (autoLoad = true, needRefreshStatus = false) => {
     isListLoading,
     getSouthDriverList,
     dbGetSouthDriverList,
+    reloadDriverList,
+
     goGroupPage,
     goNodeConfig,
     modifyNodeLogLevel,
     deleteDriver,
     sortDataByKey,
+
+    addConfig,
+    showDialog,
+    editDialog,
+    showEditDialog,
+    editDriverData,
   }
 }

src/i18n/config.ts

@@ -27,6 +27,10 @@ export default {
     zh: '添加应用',
     en: 'Add App',
   },
+  editApp: {
+    zh: '编辑应用',
+    en: 'Edit App',
+  },
   workStatus: {
     zh: '工作状态',
     en: 'Status',
@@ -107,6 +111,10 @@ export default {
     zh: '新增设备',
     en: 'New Device',
   },
+  editDevice: {
+    zh: '编辑设备',
+    en: 'Edit Device',
+  },
   addr: {
     zh: '地址',
     en: 'Addr',

src/views/config/components/EditNodeNameDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="showDialog" :width="500" custom-class="common-dialog" :title="$t('common.edit')" :z-index="2000">
+  <el-dialog v-model="showDialog" :width="500" custom-class="common-dialog" :title="dialogTitle" :z-index="2000">
     <emqx-form ref="formCom" :model="form" :rules="rules" @submit.prevent>
       <emqx-form-item prop="name" :label="$t('common.name')" required>
         <emqx-input v-model.trim="form.name" />
@@ -23,30 +23,45 @@ import { ElDialog } from 'element-plus'
 import { useI18n } from 'vue-i18n'
 import { updateDriver } from '@/api/config'
 import { EmqxMessage } from '@emqx/emqx-ui'
+import { DriverDirection } from '@/types/enums'
+import { cloneDeep } from 'lodash'
 
 const { t } = useI18n()
 const props = defineProps({
   modelValue: {
     type: Boolean,
     required: true,
   },
+  type: {
+    type: Number as PropType<DriverDirection>,
+    required: true,
+  },
+  nodeName: {
+    type: String,
+    required: true,
+  },
   node: {
-    type: Object as PropType<{ id: number; name: string }>,
+    type: Object as PropType<{ name: string }>,
     required: true,
   },
 })
 const emit = defineEmits(['update:modelValue', 'updated'])
 
 const form = ref({
-  id: 0,
   name: '',
 })
 const formCom = ref()
+
 const rules = computed(() => {
   return {
     name: [{ required: true, message: t('config.nameRequired') }],
   }
 })
+
+const dialogTitle = computed(() =>
+  props.type === DriverDirection.North ? t('config.editApp') : t('config.editDevice'),
+)
+
 const isSubmitting = ref(false)
 
 const showDialog = computed({
@@ -60,16 +75,17 @@ watch(showDialog, (val) => {
   if (!val) {
     formCom.value.resetField()
   } else {
-    form.value = props.node
+    form.value = cloneDeep(props.node)
   }
 })
 
 const submit = async () => {
   try {
     await formCom.value.validate()
     isSubmitting.value = true
-    await updateDriver(form.value)
-    EmqxMessage.success(t('common.submitSuccess'))
+
+    await updateDriver({ name: props.nodeName, new_name: form.value.name })
+    EmqxMessage.success(t('common.updateSuccess'))
     showDialog.value = false
     emit('updated')
   } catch (error) {