refactor(paging): correct logic for filter

src/hooks/Rule/rule/useRule.ts

@@ -232,19 +232,24 @@ export const useRuleUtils = (): {
   }
 }
 
+export const SourceServerType = {
+  MQTTBroker: BridgeType.MQTT,
+}
+
 /**
  * Unlike RuleInputType, the action here is specific to what type of action it is.
  */
 export const RuleSourceType = {
   Message: 'message',
   Event: 'event',
-  MQTTBroker: BridgeType.MQTT,
+  ...SourceServerType,
 }
 export const useRuleInputs = (): {
   getBridgeIdFromInput: (input: string) => string
   detectInputType: (from: string) => string
   isBridgeType: (type: string) => boolean
   isNotBridgeSourceTypes: Array<string>
+  sourceServerOptList: Array<{ value: string; label: string }>
   sourceOptList: Array<{ value: string; label: string }>
   getRuleSourceIcon: (type: string) => string
 } => {
@@ -272,6 +277,11 @@ export const useRuleInputs = (): {
     return ret || specificType
   }
 
+  const sourceServerOptList = Object.entries(SourceServerType).map(([, value]) => ({
+    value,
+    label: getTypeLabel(value),
+  }))
+
   const sourceOptList = Object.entries(RuleSourceType).map(([, value]) => ({
     value,
     label: getTypeLabel(value),
@@ -335,6 +345,7 @@ export const useRuleInputs = (): {
     detectInputType,
     isBridgeType,
     isNotBridgeSourceTypes,
+    sourceServerOptList,
     sourceOptList,
     getRuleSourceIcon,
   }

src/hooks/usePaging.ts

@@ -11,7 +11,7 @@ interface PageMeta {
 
 export interface FilterItem {
   key: string
-  value: string
+  value: string | boolean
 }
 
 interface SortFrom {
@@ -46,14 +46,22 @@ export default (): {
     chunkList()
   }
 
+  const checkValue = (filterValue: string | boolean, value: any) => {
+    if (typeof filterValue === 'string') {
+      const reg = new RegExp(filterValue, 'i')
+      return reg.test(value)
+    }
+    return filterValue === value
+  }
+
   const filterList = (filters: Array<FilterItem> = []) => {
     latestFiltersString = JSON.stringify(filters)
     if (filters.length === 0) {
       listAfterFilter.value = totalData.value
     } else {
-      listAfterFilter.value = totalData.value.filter((item) =>
-        filters.every(({ key, value }) => item[key]?.indexOf && item[key].indexOf(value) > -1),
-      )
+      listAfterFilter.value = totalData.value.filter((item) => {
+        return filters.every(({ key, value: filterValue }) => checkValue(filterValue, item[key]))
+      })
     }
   }
 

src/i18n/RuleEngine.js

@@ -1089,6 +1089,10 @@ export default {
     zh: '关联规则',
     en: 'Associated Rules',
   },
+  viewRules: {
+    zh: '查看规则',
+    en: 'View Rules',
+  },
   directDispatch: {
     zh: '直接派发',
     en: 'Direct Dispatch',

src/views/RuleEngine/components/ActionAndSourceFilterForm.vue

@@ -87,6 +87,7 @@
 import { SEARCH_FORM_RES_PROPS as colProps } from '@/common/constants'
 import { titleCase } from '@/common/tools'
 import useBridgeTypeValue from '@/hooks/Rule/bridge/useBridgeTypeValue'
+import { useRuleInputs } from '@/hooks/Rule/rule/useRule'
 import useActionAndSourceStatus from '@/hooks/Rule/useActionAndSourceStatus'
 import useI18nTl from '@/hooks/useI18nTl'
 import { ConnectionStatus } from '@/types/enum'
@@ -123,9 +124,10 @@ const showMoreQuery = ref(false)
 const filterParams: Ref<ActionAndSourceFilterParams> = ref(createRawFilterParams())
 
 const { egressBridgeTypeList: actionTypeList } = useBridgeTypeValue()
+const { sourceServerOptList } = useRuleInputs()
 const typeOptList = [
   { value: NOT_SPECIFIC_TYPE, label: t('Base.all') },
-  ...(props.type === 'action' ? actionTypeList : []),
+  ...(props.type === 'source' ? sourceServerOptList : actionTypeList),
 ]
 
 const { statusOptList } = useActionAndSourceStatus()

src/views/RuleEngine/components/ActionAndSourceList.vue

@@ -26,13 +26,6 @@
           <TargetItemStatus type="action" :target="row" />
         </template>
       </el-table-column>
-      <el-table-column :label="tl('associatedRules')" :min-width="120">
-        <template #default="{ row }">
-          <router-link :to="ruleFilterRoute(row.id)">
-            {{ row.rules?.length || 0 }}
-          </router-link>
-        </template>
-      </el-table-column>
       <el-table-column prop="enable" :label="$t('Base.isEnabled')" :min-width="92" sortable>
         <template #default="{ row }">
           <OperateWebhookAssociatedPopover
@@ -64,6 +57,23 @@
           {{ dateFormat(row.last_modified_at) }}
         </template>
       </el-table-column>
+      <el-table-column :label="tl('associatedRules')" :min-width="120">
+        <template #default="{ row }">
+          <router-link
+            v-for="item in row.rules"
+            :to="{ name: 'rule-detail', params: { id: item } }"
+            target="_blank"
+            :key="item"
+          >
+            <el-tag size="small" type="info">{{ item }}</el-tag>
+          </router-link>
+          <div class="view-rules-link">
+            <router-link :to="ruleFilterRoute(row.id)">
+              {{ `${tl('viewRules')} (${row.rules?.length || 0})` }}
+            </router-link>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column :label="$t('Base.operation')" :min-width="168">
         <template #default="{ row }">
           <TableButton
@@ -113,6 +123,7 @@
 
 <script setup lang="ts">
 import { dateFormat } from '@/common/tools'
+import CommonPagination from '@/components/commonPagination.vue'
 import useActionList from '@/hooks/Rule/action/useActionList'
 import useHandleActionItem from '@/hooks/Rule/action/useHandleActionItem'
 import useHandleSourceItem from '@/hooks/Rule/action/useHandleSourceItem'
@@ -300,4 +311,10 @@ const {
 const direction = isSource.value ? BridgeDirection.Ingress : BridgeDirection.Egress
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.view-rules-link {
+  margin-top: 2px;
+  margin-left: 4px;
+  font-size: 12px;
+}
+</style>