Add filter options to the context menu

Author: pimterry

src/components/view/view-context-menu-builder.ts

@@ -17,6 +17,7 @@ import {
     snippetExportOptions
 } from '../../model/ui/export';
 import { ContextMenuItem } from '../../model/ui/context-menu';
+import { Filter, HostnameFilter } from '../../model/filters/search-filters';
 
 export class ViewEventContextMenuBuilder {
 
@@ -27,7 +28,8 @@ export class ViewEventContextMenuBuilder {
         private onPin: (event: CollectedEvent) => void,
         private onDelete: (event: CollectedEvent) => void,
         private onBuildRuleFromExchange: (exchange: HttpExchangeView) => void,
-        private onPrepareToResendRequest?: (exchange: HttpExchangeView) => void
+        private onPrepareToResendRequest: (exchange: HttpExchangeView) => void,
+        private onAddFilter: (filter: Filter) => void
     ) {}
 
     private readonly BaseOptions = {
@@ -54,6 +56,26 @@ export class ViewEventContextMenuBuilder {
             if (event.isHttp()) {
                 const menuOptions = [
                     this.BaseOptions.Pin,
+                    {
+                        type: 'submenu',
+                        label: 'Filter traffic like this',
+                        items: [
+                            {
+                                type: 'option',
+                                label: 'Show only this hostname',
+                                callback: () => this.onAddFilter(
+                                    new HostnameFilter(`hostname=${event.request.parsedUrl.hostname}`)
+                                )
+                            },
+                            {
+                                type: 'option',
+                                label: 'Hide this hostname',
+                                callback: () => this.onAddFilter(
+                                    new HostnameFilter(`hostname!=${event.request.parsedUrl.hostname}`)
+                                )
+                            }
+                        ]
+                    },
                     {
                         type: 'option',
                         label: 'Copy Request URL',

src/components/view/view-page.tsx

@@ -13,9 +13,9 @@ import {
 import { observer, disposeOnUnmount, inject } from 'mobx-react';
 import * as portals from 'react-reverse-portal';
 
-import { WithInjected, CollectedEvent, HttpExchangeView, RawTunnel } from '../../types';
+import { WithInjected, CollectedEvent, HttpExchangeView } from '../../types';
 import { NARROW_LAYOUT_BREAKPOINT, styled } from '../../styles';
-import { useHotkeys, isEditable, windowSize, AriaCtrlCmd, Ctrl } from '../../util/ui';
+import { useHotkeys, isEditable, windowSize, AriaCtrlCmd } from '../../util/ui';
 import { debounceComputed } from '../../util/observable';
 import { UnreachableCheck, unreachableCheck } from '../../util/error';
 
@@ -28,7 +28,7 @@ import { RulesStore } from '../../model/rules/rules-store';
 import { AccountStore } from '../../model/account/account-store';
 import { SendStore } from '../../model/send/send-store';
 import { HttpExchange } from '../../model/http/http-exchange';
-import { FilterSet } from '../../model/filters/search-filters';
+import { Filter, FilterSet } from '../../model/filters/search-filters';
 import { buildRuleFromExchange } from '../../model/rules/rule-creation';
 
 import { SplitPane } from '../split-pane';
@@ -254,7 +254,8 @@ class ViewPage extends React.Component<ViewPageProps> {
         this.onPin,
         this.onDelete,
         this.onBuildRuleFromExchange,
-        this.onPrepareToResendRequest
+        this.onPrepareToResendRequest,
+        this.onAddSearchFilter
     );
 
     componentDidMount() {
@@ -500,6 +501,23 @@ class ViewPage extends React.Component<ViewPageProps> {
         this.searchFiltersUnderConsideration = filters;
     }
 
+    @action.bound
+    onAddSearchFilter(filter: Filter) {
+        if (this.searchFiltersUnderConsideration) {
+            this.searchFiltersUnderConsideration = [
+                this.searchFiltersUnderConsideration[0],
+                filter,
+                ...this.searchFiltersUnderConsideration.slice(1)
+            ];
+        }
+
+        this.props.uiStore.activeFilterSet = [
+            this.props.uiStore.activeFilterSet[0],
+            filter,
+            ...this.props.uiStore.activeFilterSet.slice(1)
+        ]
+    }
+
     @action.bound
     onSelected(event: CollectedEvent | undefined) {
         this.props.uiStore.setSelectedEventId(event?.id);

src/model/filters/search-filters.ts

@@ -670,7 +670,7 @@ class ProtocolFilter extends Filter {
     }
 }
 
-class HostnameFilter extends Filter {
+export class HostnameFilter extends Filter {
 
     static filterSyntax = [
         new FixedStringSyntax("hostname"),
@@ -1465,7 +1465,7 @@ class NotFilter extends Filter {
 
     private innerFilter: Filter;
 
-    constructor(private filterValue: string) {
+    constructor(filterValue: string) {
         super(filterValue);
 
         const innerValue = filterValue.slice(4, -1);