feat: Add status + method click-filters (#80)

* feat: Add status + method click-filters
ghostsecurity · Aug 17, 2023 · f187f5e · f187f5e
1 parent 84757df
commit f187f5e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 6 deletions.
diff --git a/frontend/src/components/Http/GroupedRequestList.vue b/frontend/src/components/Http/GroupedRequestList.vue
@@ -123,6 +123,10 @@ function onDrop(evt: DragEvent, group: Group, next: Request | null) {
   }
 }
 
+function searchMethod(method: string) {
+  emit('criteria-change', new Criteria(`method is ${method}`))
+}
+
 function onSearch(crit: Criteria) {
   emit('criteria-change', crit)
 }
@@ -390,10 +394,10 @@ function actionRequest(action: string, request: Request) {
                       outer.id === selected ? 'bg-polar-night-3' : 'hover:bg-gray-50 dark:hover:bg-polar-night-2',
                       draggingRequest && dropRequest === outer.id ? 'border-b-2 border-aurora-5' : '',
                     ]" @click="selectRequest(outer.inner)">
-                      <div
-                          :class="['left ending truncate text-xs font-semibold text-snow-storm dark:text-polar-night', MethodClass(outer.inner)]">
+                      <a @click.prevent="searchMethod(outer.inner.Method)"
+                         :class="['left ending truncate text-xs font-semibold text-snow-storm dark:text-polar-night', MethodClass(outer.inner)]">
                         {{ outer.inner.Method }}
-                      </div>
+                      </a>
                       <div class="py-1 px-2">
                         <div class="flex">
                           <div class="flex-0 drag-handle m-auto pl-1 pr-3" @click.prevent.stop

diff --git a/frontend/src/components/Http/RequestList.vue b/frontend/src/components/Http/RequestList.vue
@@ -67,6 +67,14 @@ function actionRequest(action: string, r: HttpRequest) {
   }
 }
 
+function searchMethod(method: string) {
+  emit('criteria-change', new Criteria(`method is ${method}`))
+}
+
+function searchStatus(status: number) {
+  emit('criteria-change', new Criteria(`status is ${status}`))
+}
+
 function onSearch(crit: Criteria) {
   emit('criteria-change', crit)
 }
@@ -98,12 +106,12 @@ function onSearch(crit: Criteria) {
               ? 'bg-snow-storm-1 dark:bg-polar-night-3'
               : 'hover:bg-snow-storm-1 dark:hover:bg-polar-night-2',
           ]">
-            <div :class="
+            <div @click="searchMethod(request.Method)" :class="
               'left ending text-xs font-semibold text-snow-storm dark:text-polar-night ' + MethodClass(request)
             ">
               {{ request.Method }}
             </div>
-            <div :class="
+            <div @click="request.Response ?searchStatus(request.Response.StatusCode):null" :class="
               'right ending text-xs font-semibold text-snow-storm dark:text-polar-night ' + StatusClass(request)
             ">
               {{ request.Response ? request.Response.StatusCode : '&nbsp;' }}

diff --git a/frontend/src/lib/Criteria/Criteria.spec.ts b/frontend/src/lib/Criteria/Criteria.spec.ts
@@ -19,6 +19,8 @@ test.each([
         new Rule(Target.Query, Comparison.CONTAINS, 'invalid query'),
         new Rule(Target.Host, Comparison.CONTAINS, 'invalid query'),
         new Rule(Target.Scheme, Comparison.CONTAINS, 'invalid query'),
+        new Rule(Target.Status, Comparison.EQUAL, 'invalid query'),
+        new Rule(Target.Method, Comparison.EQUAL, 'invalid query'),
       ],
       [],
       JoinType.OR,

diff --git a/frontend/src/lib/Criteria/Criteria.ts b/frontend/src/lib/Criteria/Criteria.ts
@@ -1,4 +1,4 @@
-import { Target, Comparison, JoinType, Rule } from './Rule'
+import { Comparison, JoinType, Rule, Target } from './Rule'
 import Ruleset from './Ruleset'
 import Reader from './Reader'
 import { HttpRequest } from '../Http'
@@ -24,6 +24,8 @@ class Criteria {
           new Rule(Target.Query, Comparison.CONTAINS, input),
           new Rule(Target.Host, Comparison.CONTAINS, input),
           new Rule(Target.Scheme, Comparison.CONTAINS, input),
+          new Rule(Target.Status, Comparison.EQUAL, input),
+          new Rule(Target.Method, Comparison.EQUAL, input),
         ],
         [],
         JoinType.OR,
@@ -50,6 +52,8 @@ const targetAliases = new Map<Target, string[]>([
   [Target.Path, ['path']],
   [Target.Query, ['querystring', 'query', 'qs']],
   [Target.Tag, ['tag', 'tags']],
+  [Target.Status, ['status', 'code', 'status_code', 'statuscode']],
+  [Target.Method, ['method', 'verb']],
 ])
 
 const joinAliases = new Map<JoinType, string[]>([

diff --git a/frontend/src/lib/Criteria/Rule.ts b/frontend/src/lib/Criteria/Rule.ts
@@ -14,6 +14,8 @@ enum Target {
     Query = 'query',
     Body = 'body',
     Tag = 'tag',
+    Status = 'status',
+    Method = 'method',
 }
 
 enum JoinType {
@@ -54,6 +56,15 @@ class Rule {
       case Target.Body:
         field = req.Body
         break
+      case Target.Method:
+        field = req.Method.toLowerCase()
+        this.Value = this.Value.toLowerCase()
+        break
+      case Target.Status:
+        if (req.Response) {
+          field = req.Response.StatusCode.toString()
+        }
+        break
       case Target.Tag:
         if ((req.Tags.find(tag => tag === this.Value) !== undefined) === match) {
           return match