feat(network): filter

src/Console/Console.js

@@ -88,10 +88,10 @@ export default class Console extends Tool {
     return this
   }
   filter(filter) {
-    const $searchKeyword = this._$searchKeyword
+    const $filterText = this._$filterText
     const logger = this._logger
 
-    $searchKeyword.text(filter)
+    $filterText.text(filter)
     logger.setOption('filter', trim(filter))
   }
   destroy() {
@@ -149,8 +149,8 @@ export default class Console extends Tool {
           <span class="level" data-level="info">Info</span>
           <span class="level" data-level="warning">Warning</span>
           <span class="level" data-level="error">Error</span>
-          <span class="search-keyword"></span>
-          <span class="icon-filter search"></span>
+          <span class="filter-text"></span>
+          <span class="icon-filter filter"></span>
           <span class="icon-copy icon-disabled copy"></span>
         </div>
         <div class="logs-container"></div>
@@ -176,7 +176,7 @@ export default class Console extends Tool {
       _$inputContainer,
       _$input,
       _$inputBtns,
-      _$searchKeyword: $el.find(c('.search-keyword')),
+      _$filterText: $el.find(c('.filter-text')),
     })
   }
   _initLogger() {
@@ -244,7 +244,7 @@ export default class Console extends Tool {
         }
         logger.setOption('level', level)
       })
-      .on('click', c('.search'), () => {
+      .on('click', c('.filter'), () => {
         LunaModal.prompt('Filter').then((filter) => {
           if (isNull(filter)) return
           this.filter(filter)

src/Console/Console.scss

@@ -39,7 +39,7 @@
         color: var(--select-foreground);
       }
     }
-    .search-keyword {
+    .filter-text {
       white-space: nowrap;
       position: absolute;
       line-height: 20px;

src/Network/Network.js

@@ -14,6 +14,9 @@ import MediaQuery from 'licia/MediaQuery'
 import { getType } from './util'
 import copy from 'licia/copy'
 import extend from 'licia/extend'
+import trim from 'licia/trim'
+import isNull from 'licia/isNull'
+import LunaModal from 'luna-modal'
 import { curlStr } from './util'
 
 export default class Network extends Tool {
@@ -256,6 +259,7 @@ export default class Network extends Tool {
   }
   _bindEvent() {
     const $control = this._$control
+    const $filterText = this._$filterText
     const requestDataGrid = this._requestDataGrid
 
     const self = this
@@ -265,6 +269,14 @@ export default class Network extends Tool {
       .on('click', c('.show-detail'), this._showDetail)
       .on('click', c('.copy-curl'), this._copyCurl)
       .on('click', c('.record'), this._toggleRecording)
+      .on('click', c('.filter'), () => {
+        LunaModal.prompt('Filter').then((filter) => {
+          if (isNull(filter)) return
+
+          $filterText.text(filter)
+          requestDataGrid.setOption('filter', trim(filter))
+        })
+      })
 
     requestDataGrid.on('select', (node) => {
       const id = $(node.container).data('id')
@@ -330,6 +342,8 @@ export default class Network extends Tool {
           <span class="icon-clear clear-request"></span>
           <span class="icon-eye icon-disabled show-detail"></span>
           <span class="icon-copy icon-disabled copy-curl"></span>
+          <span class="filter-text"></span>
+          <span class="icon-filter filter"></span>
         </div>
         <div class="requests"></div>
       </div>
@@ -339,5 +353,6 @@ export default class Network extends Tool {
     this._$detail = $el.find(c('.detail'))
     this._$requests = $el.find(c('.requests'))
     this._$control = $el.find(c('.control'))
+    this._$filterText = $el.find(c('.filter-text'))
   }
 }

src/Network/Network.scss

@@ -22,6 +22,19 @@
     .icon-copy {
       right: 23px;
     }
+    .icon-filter {
+      right: 46px;
+    }
+    .filter-text {
+      white-space: nowrap;
+      position: absolute;
+      line-height: 20px;
+      max-width: 80px;
+      overflow: hidden;
+      right: 88px;
+      font-size: $font-size;
+      text-overflow: ellipsis;
+    }
     .icon-record {
       left: 0;
       &.recording {
@@ -129,6 +142,12 @@
         .icon-copy {
           right: 0;
         }
+        .icon-filter {
+          right: 23px;
+        }
+        .filter-text {
+          right: 55px;
+        }
       }
     }
     .detail {