refactor(exhook): show worst status is status component

emqx · May 7, 2022 · 95da6b1 · 95da6b1
1 parent ad45186
commit 95da6b1
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 24 deletions.
diff --git a/src/hooks/Exhook/useExhookItemStatus.ts b/src/hooks/Exhook/useExhookItemStatus.ts
@@ -0,0 +1,59 @@
+import { ExhookStatus, NodeStatusClass } from '@/types/enum'
+import { Exhook } from '@/types/systemModule'
+import useI18nTl from '../useI18nTl'
+
+export default (): {
+  getTheWorstStatus: (exhook: Exhook) => ExhookStatus
+  statusText: (status: ExhookStatus) => string
+  statusTextClass: (status: ExhookStatus) => NodeStatusClass
+} => {
+  const { t, tl } = useI18nTl('Exhook')
+
+  const getTheWorstStatus = (exhook: Exhook) => {
+    const { node_status } = exhook
+    if (!node_status || node_status.length === 0) {
+      return ExhookStatus.Error
+    }
+    let ret = ExhookStatus.Connected
+    // The order cannot be changed
+
+    const badStatusArr = [
+      ExhookStatus.Connected,
+      ExhookStatus.Connecting,
+      ExhookStatus.Unconnected,
+      ExhookStatus.Disable,
+      ExhookStatus.Error,
+    ]
+    for (const currentBadStatus of badStatusArr) {
+      if (node_status.some(({ status }) => status === currentBadStatus)) {
+        ret = currentBadStatus
+        break
+      }
+    }
+    return ret
+  }
+
+  const statusText = (status: ExhookStatus) =>
+    ({
+      [ExhookStatus.Connected]: t('RuleEngine.connected'),
+      [ExhookStatus.Connecting]: t('RuleEngine.connecting'),
+      [ExhookStatus.Unconnected]: t('RuleEngine.disconnected'),
+      [ExhookStatus.Disable]: tl('disabled'),
+      [ExhookStatus.Error]: tl('error'),
+    }[status] || 'unknown')
+
+  const statusTextClass = (status: ExhookStatus): NodeStatusClass =>
+    ({
+      [ExhookStatus.Connected]: NodeStatusClass.Success,
+      [ExhookStatus.Connecting]: NodeStatusClass.Warning,
+      [ExhookStatus.Unconnected]: NodeStatusClass.Danger,
+      [ExhookStatus.Disable]: NodeStatusClass.Danger,
+      [ExhookStatus.Error]: NodeStatusClass.Danger,
+    }[status] || NodeStatusClass.Danger)
+
+  return {
+    getTheWorstStatus,
+    statusText,
+    statusTextClass,
+  }
+}
diff --git a/src/i18n/Base.js b/src/i18n/Base.js
@@ -399,4 +399,8 @@ export default {
     zh: '是否启用',
     en: 'Enable',
   },
+  rate: {
+    zh: '速率',
+    en: 'Rate',
+  },
 }
diff --git a/src/i18n/Exhook.js b/src/i18n/Exhook.js
@@ -123,4 +123,8 @@ export default {
     zh: '禁用',
     en: 'Disabled',
   },
+  rateUnit: {
+    zh: '次/秒',
+    en: 'time/s',
+  },
 }
diff --git a/src/views/Exhook/Exhook.vue b/src/views/Exhook/Exhook.vue
@@ -84,7 +84,6 @@ import useSortableTable from '@/hooks/useSortableTable'
 import { SortableEvent } from 'sortablejs'
 import ExhookItemStatus from './components/ExhookItemStatus.vue'
 import useMove from '@/hooks/useMove'
-import { ElMessage } from 'element-plus'
 
 const router = useRouter()
 const { t } = useI18n()

diff --git a/src/views/Exhook/components/ExhookItemMsg.vue b/src/views/Exhook/components/ExhookItemMsg.vue
@@ -0,0 +1,47 @@
+<template>
+  <el-table-column class="exhook-item-msg" type="expand">
+    <template #default="{ row }">
+      <el-row :gutter="26" v-if="row?.node_status && Array.isArray(row.node_status)">
+        <el-col :span="8" v-for="{ node, status } in row.node_status" :key="node">
+          <el-card>
+            <el-descriptions :title="node" direction="vertical" :column="1" border>
+              <el-descriptions-item :label="tl('status')">
+                {{ statusText(status) }}
+              </el-descriptions-item>
+              <el-descriptions-item :label="t('RuleEngine.success')">
+                {{ getNodeMetrics(row.node).succeed }}
+              </el-descriptions-item>
+              <el-descriptions-item :label="t('RuleEngine.failure')">
+                {{ getNodeMetrics(row.node).failed }}
+              </el-descriptions-item>
+              <el-descriptions-item :label="t('Base.rate')">
+                {{ getNodeMetrics(row.node).rate }} {{ t('Exhook.rateUnit') }}
+              </el-descriptions-item>
+            </el-descriptions>
+          </el-card>
+        </el-col>
+      </el-row>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts" setup>
+import useI18nTl from '@/hooks/useI18nTl'
+import { Exhook } from '@/types/systemModule'
+import { defineProps, PropType } from 'vue'
+import useExhookItemStatus from '@/hooks/Exhook/useExhookItemStatus'
+
+const props = defineProps({
+  exhook: {
+    type: Object as PropType<Exhook>,
+  },
+})
+
+const { tl, t } = useI18nTl('Base')
+const { statusText } = useExhookItemStatus()
+
+const getNodeMetrics = (exhook, node) => {
+  const target = props.exhook?.node_metrics.find((item) => item.node === node)
+  return target ? target : {}
+}
+</script>
diff --git a/src/views/Exhook/components/ExhookItemStatus.vue b/src/views/Exhook/components/ExhookItemStatus.vue
@@ -13,10 +13,7 @@ export default defineComponent({
 import { PropType, defineProps } from 'vue'
 import { Exhook } from '@/types/systemModule'
 import StatusDetailsOfEachNode from '@/components/StatusDetailsOfEachNode.vue'
-import useI18nTl from '@/hooks/useI18nTl'
-import { ExhookStatus, NodeStatusClass } from '@/types/enum'
-
-const { t, tl } = useI18nTl('Exhook')
+import useExhookItemStatus from '@/hooks/Exhook/useExhookItemStatus'
 
 const props = defineProps({
   exhook: {
@@ -29,23 +26,7 @@ const props = defineProps({
   },
 })
 
-const statusText = (status: ExhookStatus) =>
-  ({
-    [ExhookStatus.Connected]: t('RuleEngine.connected'),
-    [ExhookStatus.Connecting]: t('RuleEngine.connecting'),
-    [ExhookStatus.Unconnected]: t('RuleEngine.disconnected'),
-    [ExhookStatus.Disable]: tl('disabled'),
-    [ExhookStatus.Error]: tl('error'),
-  }[status] || 'unknown')
-
-const statusTextClass = (status: ExhookStatus): NodeStatusClass =>
-  ({
-    [ExhookStatus.Connected]: NodeStatusClass.Success,
-    [ExhookStatus.Connecting]: NodeStatusClass.Warning,
-    [ExhookStatus.Unconnected]: NodeStatusClass.Danger,
-    [ExhookStatus.Disable]: NodeStatusClass.Danger,
-    [ExhookStatus.Error]: NodeStatusClass.Danger,
-  }[status] || NodeStatusClass.Danger)
+const { statusText, statusTextClass, getTheWorstStatus } = useExhookItemStatus()
 
 const statusData = computed(() => {
   const { exhook } = props
@@ -59,10 +40,11 @@ const statusData = computed(() => {
           }
         })
       : []
+  const worstStatus = getTheWorstStatus(exhook)
   return {
     details,
-    statusClass: exhook.enable ? NodeStatusClass.Success : NodeStatusClass.Danger,
-    statusLabel: t(`Base.${exhook.enable ? 'enable' : 'disable'}`),
+    statusClass: statusTextClass(worstStatus),
+    statusLabel: statusText(worstStatus),
   }
 })
 </script>