working through filters UI and experience.

Signed-off-by: Dave Shanley <dave@quobix.com>
pb33f · Jun 14, 2023 · a248b53 · a248b53
1 parent 1cae7db
commit a248b53
Show file tree

Hide file tree

Showing 19 changed files with 573 additions and 124 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -17,7 +17,7 @@
     "vite-tsconfig-paths": "^4.2.0"
   },
   "dependencies": {
-    "@pb33f/ranch": "^0.3.3",
+    "@pb33f/ranch": "^0.3.4",
     "@pb33f/saddlebag": "^0.1.0",
     "@shoelace-style/shoelace": "^2.4.0",
     "@stomp/stompjs": "^7.0.0",

diff --git a/ui/src/components/controls/controls.component.css.ts b/ui/src/components/controls/controls.component.css.ts
@@ -6,25 +6,10 @@ export default css`
    margin:5px auto;
   }
 
-  sl-button.report {
-   
-  }
-  
   sl-icon.gear {
     font-size: 1.7rem;
     padding-top:6px;
   }
-
-  sl-icon.report  {
-    font-size: 1.4rem;
-    display: inline-block;
-    //padding-top:6px;
-  }
-  
-  label {
-    display: block;
-    padding-bottom: 10px;
-  }
   
   
   sl-drawer::part(panel) {
@@ -45,9 +30,5 @@ export default css`
     font-family: var(--font-stack);
   }
   
-  hr {
-    margin-top: 30px;
-    margin-bottom: 30px;
-  }
   
 `
diff --git a/ui/src/components/controls/controls.component.ts b/ui/src/components/controls/controls.component.ts
@@ -1,7 +1,7 @@
 import {customElement, query, state} from "lit/decorators.js";
 import {LitElement} from "lit";
 import {html} from "lit";
-import {ControlsResponse, ReportResponse, WiretapConfig, WiretapControls} from "@/model/controls";
+import {ControlsResponse, ReportResponse, WiretapConfig, WiretapControls, WiretapFilters} from "@/model/controls";
 import localforage from "localforage";
 import {Bus, BusCallback, Channel, CommandResponse, GetBus, Message, Subscription} from "@pb33f/ranch";
 import controlsComponentCss from "./controls.component.css";
@@ -13,7 +13,7 @@ import sharedCss from "@/components/shared.css";
 import {
     ChangeDelayCommand, RequestReportCommand,
     WiretapControlsChannel, WiretapControlsKey,
-    WiretapControlsStore,
+    WiretapControlsStore, WiretapFiltersStore,
     WiretapHttpTransactionStore, WiretapReportChannel
 } from "@/model/constants";
 
@@ -27,8 +27,12 @@ export class WiretapControlsComponent extends LitElement {
 
     private readonly _bus: Bus;
 
-    @query('sl-drawer')
-    drawer: SlDrawer;
+    @query('#controls-drawer')
+    controlsDrawer: SlDrawer;
+
+    @query('#filters-drawer')
+    filtersDrawer: SlDrawer;
+
 
     @query("#global-delay")
     delayInput: SlInput;
@@ -45,6 +49,10 @@ export class WiretapControlsComponent extends LitElement {
     private readonly _wiretapReportChannel: Channel;
     private readonly _storeManager: BagManager;
     private readonly _controlsStore: Bag<WiretapControls>;
+    private readonly _filtersStore: Bag<WiretapFilters>;
+
+    @state()
+    private filters: WiretapFilters;
 
     constructor() {
         super();
@@ -53,12 +61,12 @@ export class WiretapControlsComponent extends LitElement {
         this._bus = GetBus();
         this._storeManager = GetBagManager();
         this._controlsStore = this._storeManager.getBag(WiretapControlsStore);
+        this._filtersStore = this._storeManager.getBag(WiretapFiltersStore);
         this._wiretapControlsChannel = this._bus.getChannel(WiretapControlsChannel);
         this._wiretapReportChannel = this._bus.getChannel(WiretapReportChannel);
         this._wiretapControlsSubscription = this._wiretapControlsChannel.subscribe(this.controlUpdateHandler());
         this._wiretapReportSubscription = this._wiretapReportChannel.subscribe(this.reportHandler());
 
-
         this.loadControlStateFromStorage().then((controls: WiretapControls) => {
             if (!controls) {
                 this._controls = {
@@ -70,12 +78,18 @@ export class WiretapControlsComponent extends LitElement {
             // get the delay from the backend.
             this.changeGlobalDelay(-1) // -1 won't update anything, but will return the current delay
         });
+
+
     }
 
     async loadControlStateFromStorage(): Promise<WiretapControls> {
         return localforage.getItem<WiretapControls>(WiretapControlsStore);
     }
 
+
+
+
+
     controlUpdateHandler(): BusCallback<CommandResponse> {
         return (msg: Message<CommandResponse<ControlsResponse>>) => {
             const delay = msg.payload.payload.config.globalAPIDelay;
@@ -121,8 +135,12 @@ export class WiretapControlsComponent extends LitElement {
         });
     }
 
-    openControls() {
-        this.drawer.show();
+    openSettings() {
+        this.controlsDrawer.show();
+    }
+
+    openFilters() {
+        this.filtersDrawer.show();
     }
 
     sendReportRequest() {
@@ -139,7 +157,8 @@ export class WiretapControlsComponent extends LitElement {
     }
 
     closeControls() {
-        this.drawer.hide()
+        this.controlsDrawer.hide()
+        this.filtersDrawer.hide()
     }
 
     handleGlobalDelayChange(event) {
@@ -158,23 +177,25 @@ export class WiretapControlsComponent extends LitElement {
     render() {
 
         return html`
-            <sl-button @click=${this.openControls} variant="default" size="medium"  class="gear" circle outline>
+            <sl-button @click=${this.openFilters} variant="default" size="medium" class="gear" circle outline>
+                <sl-icon name="funnel" label="filters" class="gear"></sl-icon>
+            </sl-button>
+            <sl-button @click=${this.openSettings} variant="default" size="medium" class="gear" circle outline>
                 <sl-icon name="gear" label="controls" class="gear"></sl-icon>
             </sl-button>
-            <sl-drawer label="wiretap controls" class="drawer-focus">
-                <label>Global API Delay (MS)</label>
-                <sl-input @sl-change=${this.handleGlobalDelayChange} value=${this._controls?.globalDelay}
-                          placeholder="size" size="medium" type="number" id="global-delay">
-                    <sl-icon name="hourglass-split" slot="prefix"></sl-icon>
-                </sl-input>
-                <hr/>
-                <sl-button @click=${this.wipeData} variant="danger" outline>Reset State</sl-button>
-                <hr/>
-                <sl-button @click=${this.sendReportRequest}  outline>
-                    <sl-icon name="save" slot="prefix"></sl-icon>Download Session Data</sl-button>
+            <sl-drawer label="wiretap controls" class="drawer-focus" id="controls-drawer">
                 <a id="downloadReport" style="display:none"></a>
+                <wiretap-controls-settings globalDelay=${this._controls?.globalDelay}
+                    @globalDelayChanged=${this.handleGlobalDelayChange}
+                    @wipeData=${this.wipeData}
+                    @requestReport=${this.sendReportRequest}></wiretap-controls-settings>
                 <sl-button @click=${this.closeControls} slot="footer" variant="primary" outline>Close</sl-button>
             </sl-drawer>
+            
+              <sl-drawer label="wiretap filters" class="drawer-focus" id="filters-drawer">
+                   <wiretap-controls-filters filters=${this.filters}></wiretap-controls-filters>
+                  <sl-button @click=${this.closeControls} slot="footer" variant="primary" outline>Close</sl-button>
+            </sl-drawer>
         `
     }
 }
diff --git a/ui/src/components/controls/filters.component.css.ts b/ui/src/components/controls/filters.component.css.ts
@@ -0,0 +1,79 @@
+
+import {css} from "lit";
+
+export default css`
+
+  .label-on-left {
+    --label-width: 5rem;
+    --gap-width: 1rem;
+  }
+
+  .label-on-left + .label-on-left {
+    margin-top: var(--sl-spacing-medium);
+  }
+
+  .label-on-left::part(form-control) {
+    display: grid;
+    grid: auto / var(--label-width) 1fr;
+    gap: var(--sl-spacing-3x-small) var(--gap-width);
+    align-items: center;
+    font-family: var(--font-stack);
+  }
+
+  .label-on-left::part(form-control-label) {
+    text-align: right;
+  }
+
+  .label-on-left::part(form-control-help-text) {
+    grid-column-start: 2;
+  }
+
+  hr {
+    margin-bottom: 20px;
+    margin-top: 20px;
+  }
+  
+  .keywords {
+    border: 1px dashed var(--secondary-color-dimmer);
+    padding: 5px;
+    min-height: 40px;
+    margin-top: 20px;
+  }
+
+  .chains {
+    border: 1px dashed var(--primary-color-lowalpha);
+    padding: 5px;
+    min-height: 40px;
+    margin-top: 20px;
+  }
+  
+  .keyword {
+    transition: var(--sl-transition-fast) opacity;
+  }
+  
+  .keyword::part(base) {
+    font-family: var(--font-stack);
+    border: 1px dashed var(--secondary-color);
+    margin-bottom: 5px;
+  }
+
+  .chain {
+    transition: var(--sl-transition-fast) opacity;
+  }
+
+  .chain::part(base) {
+    font-family: var(--font-stack);
+    border: 1px dashed var(--primary-color);
+    margin-bottom: 5px;
+  }
+  
+  p {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  
+  .chain-input::part(base) {
+    --sl-input-border-color: var(--primary-color);
+  }
+  
+`