refactor(rule & auth): connection status

src/hooks/useCommonConnectionStatus.ts

@@ -2,27 +2,27 @@ import useI18nTl from '@/hooks/useI18nTl'
 import { ConnectionStatus, NodeStatusClass } from '@/types/enum'
 
 export default (): {
-  getStatusClass: (status: ConnectionStatus) => NodeStatusClass
-  getStatusLabel: (status: ConnectionStatus) => string
+  getStatusClass: (status?: ConnectionStatus) => NodeStatusClass
+  getStatusLabel: (status?: ConnectionStatus) => string
 } => {
   const { tl } = useI18nTl('Base')
 
-  const getStatusClass = (status: ConnectionStatus) => {
+  const getStatusClass = (status?: ConnectionStatus) => {
     const map = {
       [ConnectionStatus.Connected]: NodeStatusClass.Success,
       [ConnectionStatus.Disconnected]: NodeStatusClass.Danger,
       [ConnectionStatus.Connecting]: NodeStatusClass.Warning,
     }
-    return map[status] || NodeStatusClass.Danger
+    return status ? map[status] || NodeStatusClass.Danger : NodeStatusClass.Danger
   }
 
-  const getStatusLabel = (status: ConnectionStatus) => {
+  const getStatusLabel = (status?: ConnectionStatus) => {
     const statusLabelMap = {
       [ConnectionStatus.Connected]: tl('connected'),
       [ConnectionStatus.Disconnected]: tl('disconnected'),
       [ConnectionStatus.Connecting]: tl('connecting'),
     }
-    return statusLabelMap[status] || tl('disconnected')
+    return status ? statusLabelMap[status] || tl('disconnected') : tl('disconnected')
   }
   return {
     getStatusClass,

src/types/common.d.ts

@@ -41,7 +41,7 @@ export type StatusDetailOfEachNode = Array<{
 export interface TargetStatusWithDetail {
   statusClass: NodeStatusClass
   statusLabel: string
-  details: StatusDetailOfEachNode
+  details?: StatusDetailOfEachNode
 }
 
 export type OptionList<T> = Array<{

src/views/APIKey/APIKey.vue

@@ -18,13 +18,6 @@
         </template>
       </el-table-column>
       <el-table-column prop="desc" :label="tl('desc')" />
-      <el-table-column prop="enable" :label="tl('status')">
-        <template #default="{ row }">
-          <span :class="['status', { disabled: !row.enable }]">
-            {{ getKeyStatus(row) }}
-          </span>
-        </template>
-      </el-table-column>
       <el-table-column prop="enable" :label="$t('Base.isEnabled')">
         <template #default="{ row }">
           <el-switch v-model="row.enable" @change="toggleKeyItemEnable(row)" />

src/views/Auth/Authn.vue

@@ -46,7 +46,7 @@
       </el-table-column>
       <el-table-column prop="enable" :label="$t('Auth.status')" :min-width="116">
         <template #default="{ row }">
-          <AuthItemStatus :enable="row.enable" :metrics="row.metrics" />
+          <AuthItemStatus :metrics="row.metrics" />
         </template>
       </el-table-column>
       <el-table-column prop="oper" :label="$t('Base.operation')" :min-width="168">

src/views/Auth/AuthnDetails.vue

@@ -15,7 +15,7 @@
           </div>
           <div>
             <div class="info-tags">
-              <AuthItemStatus is-tag :metrics="authMetrics" :enable="configData.enable" />
+              <AuthItemStatus is-tag :metrics="authMetrics" />
               <el-tag type="info" class="section-status">
                 {{ configData.mechanism }}
               </el-tag>

src/views/Auth/Authz.vue

@@ -45,7 +45,7 @@
       <!-- FIXME: -->
       <el-table-column prop="enable" :label="$t('Auth.status')" :min-width="116">
         <template #default="{ row }">
-          <AuthItemStatus :enable="row.enable" :metrics="row.metrics" />
+          <AuthItemStatus :metrics="row.metrics" />
         </template>
       </el-table-column>
       <el-table-column prop="oper" :label="$t('Base.operation')" :min-width="168">

src/views/Auth/AuthzDetails.vue

@@ -8,7 +8,7 @@
         </div>
         <div>
           <div class="info-tags">
-            <AuthItemStatus is-tag :metrics="authMetrics" :enable="configData.enable" />
+            <AuthItemStatus is-tag :metrics="authMetrics" />
           </div>
         </div>
       </div>

src/views/Auth/components/AuthItemStatus.vue

@@ -12,8 +12,7 @@ export default defineComponent({
 
 <script setup lang="ts">
 import { defineProps, PropType, computed } from 'vue'
-import { ConnectionStatus, NodeStatusClass } from '@/types/enum'
-import useI18nTl from '@/hooks/useI18nTl'
+import { ConnectionStatus } from '@/types/enum'
 import useCommonConnectionStatus from '@/hooks/useCommonConnectionStatus'
 import { Metrics } from 'src/types/auth'
 import StatusDetailsOfEachNode from '@/components/StatusDetailsOfEachNode.vue'
@@ -31,33 +30,21 @@ const props = defineProps({
   },
 })
 
-const { tl } = useI18nTl('Base')
-const { getStatusClass: getConnectionStatusClass, getStatusLabel: getConnectionLabel } =
-  useCommonConnectionStatus()
-
-const getStatusClass = (enable: boolean, status: ConnectionStatus) =>
-  enable ? NodeStatusClass.Success : NodeStatusClass.Danger
-
-const getStatusText = (enable: boolean, status: ConnectionStatus) =>
-  enable ? tl('enable') : tl('disable')
+const { getStatusClass, getStatusLabel } = useCommonConnectionStatus()
 
 const statusData = computed(() => {
-  const { enable, metrics } = props
-  const status: ConnectionStatus =
-    (metrics?.status as ConnectionStatus) || ConnectionStatus.Disconnected
+  const { metrics } = props
   const details =
     metrics?.node_status && Array.isArray(metrics?.node_status)
       ? metrics?.node_status.map(({ node, status }) => ({
           node,
-          statusLabel: getConnectionLabel(status as ConnectionStatus),
-          statusClass: getConnectionStatusClass(status as ConnectionStatus),
+          statusLabel: getStatusLabel(status as ConnectionStatus),
+          statusClass: getStatusClass(status as ConnectionStatus),
         }))
       : []
 
-  const statusLabel = getStatusText(enable, status)
-  const statusClass = getStatusClass(enable, status)
+  const statusLabel = getStatusLabel(metrics?.status)
+  const statusClass = getStatusClass(metrics?.status)
   return { details, statusLabel, statusClass }
 })
 </script>
-
-<style lang="scss"></style>

src/views/RuleEngine/Bridge/Components/BridgeItemStatus.vue

@@ -15,8 +15,6 @@ import { computed, defineProps, PropType } from 'vue'
 import StatusDetailsOfEachNode from '@/components/StatusDetailsOfEachNode.vue'
 import { BridgeItem } from '@/types/rule'
 import useCommonConnectionStatus from '@/hooks/useCommonConnectionStatus'
-import { ConnectionStatus, NodeStatusClass } from '@/types/enum'
-import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   bridge: {
@@ -29,7 +27,6 @@ const props = defineProps({
 })
 
 const { getStatusLabel, getStatusClass } = useCommonConnectionStatus()
-const { t } = useI18n()
 const statusData = computed(() => {
   const { bridge } = props
   const details =
@@ -41,8 +38,8 @@ const statusData = computed(() => {
         }))
       : []
 
-  const statusLabel = t(`Base.${bridge?.enable ? 'enable' : 'disable'}`)
-  const statusClass = !bridge?.enable ? NodeStatusClass.Danger : NodeStatusClass.Success
+  const statusLabel = getStatusLabel(bridge?.status)
+  const statusClass = getStatusClass(bridge?.status)
   return { details, statusLabel, statusClass }
 })
 </script>

src/views/RuleEngine/Bridge/DataBridge.vue

@@ -104,6 +104,7 @@ export default defineComponent({
       try {
         await startStopBridge(row.id, statusToSend)
         M.success(t(sucMessage))
+        listBridge()
       } catch (error) {
         console.error(error)
         row.enable = !row.enable

src/views/RuleEngine/IoT/IoT.vue

@@ -48,12 +48,6 @@
           <el-switch v-model="row.enable" @change="startOrStopRule(row)" />
         </template>
       </el-table-column>
-      <!-- FIXME: -->
-      <el-table-column :label="tl('status')" sortable :min-width="100">
-        <template #default="{ row }">
-          <RuleItemStatus :rule="row" />
-        </template>
-      </el-table-column>
       <el-table-column :label="tl('createdAt')" sortable :min-width="124">
         <template #default="{ row }">
           {{ row.created_at && moment(row.created_at).format('YYYY-MM-DD HH:mm:ss') }}
@@ -88,7 +82,6 @@ import { RuleItem } from '@/types/rule'
 import { ElMessageBox as MB, ElMessage as M } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import TableItemDropDown from './components/TableItemDropDown.vue'
-import RuleItemStatus from './components/RuleItemStatus.vue'
 import CodeView from '@/components/CodeView.vue'
 import useCopyRule from '@/hooks/Rule/rule/useCopyRule'