feat(flow): support for viewing metrics of rules

Author: Kinplemelon

src/components/Metrics/OverviewMetrics.vue

@@ -109,7 +109,7 @@
       </el-row>
     </div>
     <!-- Chilren Stats -->
-    <div class="metric-block" v-if="showChildrenStats && !isFlowNode">
+    <div class="metric-block" v-if="showChildrenStats">
       <div class="block-hd">
         <p class="block-title">
           {{ tl('action') }}

src/views/Flow/components/NodeDrawer.vue

@@ -196,7 +196,7 @@ const { isBridgeType } = useFlowNode()
 const { getFormDataByType, isUsingSchemaBridgeType, checkFormIsEmpty } = useNodeForm()
 const withOutMetricsTypes: Record<FlowNodeType, Array<string>> = {
   [FlowNodeType.Input]: [SourceType.Event, SourceType.Message, SourceTypeAllMsgsAndEvents],
-  [FlowNodeType.Default]: [ProcessingType.Filter, ProcessingType.Function],
+  [FlowNodeType.Default]: [ProcessingType.Filter],
   [FlowNodeType.Output]: [SinkType.Console, SinkType.RePub],
 }
 const withMetrics = computed(() => {

src/views/Flow/components/metrics/NodeMetrics.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="node-metrics">
+  <div class="node-metrics" v-if="!infoLoading">
     <BridgeItemOverview
-      v-if="!infoLoading"
+      v-if="node?.type && node?.type !== FlowNodeType.Default"
       :bridge-id="id"
       :bridge-msg="bridgeInfo"
       :is-source="isSource"
       @reconnect="loadBridgeInfo"
     />
+    <RuleItemOverview
+      v-if="node?.type && node?.data?.rulesUsed?.[0] && node?.type === FlowNodeType.Default"
+      :rule-id="node.data.rulesUsed[0]"
+    />
   </div>
 </template>
 
@@ -16,6 +20,7 @@ import useHandleActionItem from '@/hooks/Rule/action/useHandleActionItem'
 import useHandleSourceItem from '@/hooks/Rule/action/useHandleSourceItem'
 import { BridgeItem } from '@/types/rule'
 import BridgeItemOverview from '@/views/RuleEngine/Bridge/Components/BridgeItemOverview.vue'
+import RuleItemOverview from '@/views/RuleEngine/Rule/components/RuleItemOverview.vue'
 import { Node } from '@vue-flow/core'
 import { Ref, computed, defineProps, onMounted, provide, ref } from 'vue'
 

src/views/RuleEngine/Rule/components/RuleItemOverview.vue

@@ -87,19 +87,15 @@ export default defineComponent({
 </script>
 
 <script setup lang="ts">
-import { defineProps, PropType } from 'vue'
-import { RuleItem } from '@/types/rule'
-import InfoTooltip from '@/components/InfoTooltip.vue'
 import { queryRuleMetrics, resetRuleMetrics } from '@/api/ruleengine'
+import InfoTooltip from '@/components/InfoTooltip.vue'
 import OverviewMetrics from '@/components/Metrics/OverviewMetrics.vue'
-import { lowerCase } from 'lodash'
-import { useRuleMetrics } from '@/hooks/useMetrics'
 import useI18nTl from '@/hooks/useI18nTl'
+import { useRuleMetrics } from '@/hooks/useMetrics'
+import { lowerCase } from 'lodash'
+import { defineProps } from 'vue'
 
 const props = defineProps({
-  ruleMsg: {
-    type: Object as PropType<RuleItem>,
-  },
   ruleId: {
     type: String,
     required: true,