web interface refactor flow filter

web/client/src/App.tsx

@@ -17,12 +17,13 @@ interface IState {
   flows: Flow[]
   flow: Flow | null
   wsStatus: 'open' | 'close' | 'connecting'
+  filterInvalid: boolean
 }
 
 const wsReconnIntervals = [1, 1, 2, 2, 4, 4, 8, 8, 16, 16, 32, 32]
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IProps {}
+interface IProps { }
 
 class App extends React.Component<IProps, IState> {
   private connMgr: ConnectionManager
@@ -43,6 +44,7 @@ class App extends React.Component<IProps, IState> {
       flows: this.flowMgr.showList(),
       flow: null,
       wsStatus: 'close',
+      filterInvalid: false,
     }
 
     this.ws = null
@@ -163,10 +165,15 @@ class App extends React.Component<IProps, IState> {
           <div>
             <Form.Control
               size="sm" placeholder="Filter"
+              style={{ width: '350px' }}
+              isInvalid={this.state.filterInvalid}
               onChange={(e) => {
                 const value = e.target.value
-                this.flowMgr.changeFilterLazy(value, () => {
+                this.flowMgr.changeFilterLazy(value, (err) => {
-                  this.setState({ flows: this.flowMgr.showList() })
+                  this.setState({
+                    filterInvalid: err ? true : false,
+                    flows: this.flowMgr.showList()
+                  })
                 })
               }}
             >

web/client/src/lib/flow.ts

@@ -262,10 +262,36 @@ export class Flow {
   }
 }
 
+class FlowFilter {
+  private keyword: string | RegExp | undefined
+
+  constructor(text: string) {
+    text = text.trim()
+    if (!text) return
+
+    // regexp
+    if (text.startsWith('/') && text.endsWith('/')) {
+      text = text.slice(1, text.length - 1).trim()
+      if (!text) return
+      this.keyword = new RegExp(text)
+    }
+    // string
+    else {
+      this.keyword = text
+    }
+  }
+
+  match(flow: Flow): boolean {
+    if (!this.keyword) return true
+    if (this.keyword instanceof RegExp) return this.keyword.test(flow.request.url)
+    return flow.request.url.includes(this.keyword)
+  }
+}
+
 export class FlowManager {
   private items: Flow[]
   private _map: Map<string, Flow>
-  private filterText: string
+  private flowFilter: FlowFilter | undefined
   private filterTimer: number | null
   private num: number
   private max: number
@@ -273,7 +299,6 @@ export class FlowManager {
   constructor() {
     this.items = []
     this._map = new Map()
-    this.filterText = ''
     this.filterTimer = null
     this.num = 0
 
@@ -281,27 +306,8 @@ export class FlowManager {
   }
 
   showList() {
-    let text = this.filterText
+    if (!this.flowFilter) return this.items
-    if (text) text = text.trim()
+    return this.items.filter(item => (this.flowFilter as FlowFilter).match(item))
-    if (!text) return this.items
-
-    // regexp
-    if (text.startsWith('/') && text.endsWith('/')) {
-      text = text.slice(1, text.length - 1).trim()
-      if (!text) return this.items
-      try {
-        const reg = new RegExp(text)
-        return this.items.filter(item => {
-          return reg.test(item.request.url)
-        })
-      } catch (err) {
-        return this.items
-      }
-    }
-
-    return this.items.filter(item => {
-      return item.request.url.includes(text)
-    })
   }
 
   add(item: Flow) {
@@ -320,18 +326,23 @@ export class FlowManager {
   }
 
   changeFilter(text: string) {
-    this.filterText = text
+    this.flowFilter = new FlowFilter(text)
   }
 
-  changeFilterLazy(text: string, callback: () => void) {
+  changeFilterLazy(text: string, callback: (err: any) => void) {
     if (this.filterTimer) {
       clearTimeout(this.filterTimer)
       this.filterTimer = null
     }
 
     this.filterTimer = setTimeout(() => {
-      this.filterText = text
+      try {
-      callback()
+        this.changeFilter(text)
+        callback(null)
+      } catch (err) {
+        this.changeFilter('')
+        callback(err)
+      }
     }, 300) as any
   }