Adapt the UI to the new filtering system

ui/src/components/Filters.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from './style/Filters.module.sass';
 import {FilterSelect} from "./UI/FilterSelect";
-import {TextField} from "@material-ui/core";
+import {TextField, Button} from "@material-ui/core";
 import {ALL_KEY} from "./UI/Select";
 
 interface FiltersProps {
@@ -11,14 +11,14 @@ interface FiltersProps {
     setStatusFilter: (methods: Array<string>) => void;
     pathFilter: string
     setPathFilter: (val: string) => void;
+    ws: any
+    openWebSocket: (query: string) => void;
 }
 
-export const Filters: React.FC<FiltersProps> = ({methodsFilter, setMethodsFilter, statusFilter, setStatusFilter, pathFilter, setPathFilter}) => {
+export const Filters: React.FC<FiltersProps> = ({methodsFilter, setMethodsFilter, statusFilter, setStatusFilter, pathFilter, setPathFilter, ws, openWebSocket}) => {
 
     return <div className={styles.container}>
-        <MethodFilter methodsFilter={methodsFilter} setMethodsFilter={setMethodsFilter}/>
-        <StatusTypesFilter statusFilter={statusFilter} setStatusFilter={setStatusFilter}/>
-        <PathFilter pathFilter={pathFilter} setPathFilter={setPathFilter}/>
+        <QueryForm ws={ws} openWebSocket={openWebSocket}/>
     </div>;
 };
 
@@ -102,18 +102,39 @@ const StatusTypesFilter: React.FC<StatusTypesFilterProps> = ({statusFilter, setS
     </FilterContainer>;
 };
 
-interface PathFilterProps {
-    pathFilter: string;
-    setPathFilter: (val: string) => void;
+interface QueryFormProps {
+    ws: any
+    openWebSocket: (query: string) => void;
 }
 
-const PathFilter: React.FC<PathFilterProps> = ({pathFilter, setPathFilter}) => {
+class QueryForm extends React.Component<QueryFormProps, { value: string }> {
+    constructor(props) {
+        super(props);
+        this.state = {value: ''};
 
-    return <FilterContainer>
-        <div className={styles.filterLabel}>Path</div>
-        <div>
-            <TextField value={pathFilter} variant="outlined" className={styles.filterText} style={{minWidth: '150px'}} onChange={(e: any) => setPathFilter(e.target.value)}/>
-        </div>
-    </FilterContainer>;
-};
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
 
+    handleChange(event) {
+        this.setState({value: event.target.value});
+    }
+
+    handleSubmit(event) {
+        this.props.ws.close()
+        this.props.openWebSocket(this.state.value)
+        // alert('A name was submitted: ' + this.state.value);
+        event.preventDefault();
+    }
+
+    render() {
+    return (
+        <form onSubmit={this.handleSubmit}>
+        <label>
+            <TextField value={this.state.value} onChange={this.handleChange} variant="outlined" className={styles.filterText} style={{minWidth: '450px'}} placeholder="Mizu Filter Syntax"/>
+        </label>
+        <Button type="submit" variant="contained" style={{marginLeft: "10px"}}>Apply</Button>
+        </form>
+    );
+    }
+}

ui/src/components/TrafficPage.tsx

@@ -67,8 +67,9 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
 
     const listEntry = useRef(null);
 
-    const openWebSocket = () => {
-        ws.current = new WebSocket(MizuWebsocketURL);
+    const openWebSocket = (query) => {
+        var url = MizuWebsocketURL + "?q=" + query;
+        ws.current = new WebSocket(url);
         ws.current.onopen = () => setConnection(ConnectionStatus.Connected);
         ws.current.onclose = () => setConnection(ConnectionStatus.Closed);
     }
@@ -110,7 +111,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
 
     useEffect(() => {
         (async () => {
-            openWebSocket();
+            openWebSocket("");
             try{
                 const tapStatusResponse = await api.tapStatus();
                 setTappingStatus(tapStatusResponse);
@@ -184,7 +185,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                     </div>
                 </div>
             </div>
-            {entries.length > 0 && <div className="TrafficPage-Container">
+            {<div className="TrafficPage-Container">
                 <div className="TrafficPage-ListContainer">
                     <Filters methodsFilter={methodsFilter}
                                 setMethodsFilter={setMethodsFilter}
@@ -192,6 +193,8 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                                 setStatusFilter={setStatusFilter}
                                 pathFilter={pathFilter}
                                 setPathFilter={setPathFilter}
+                                ws={ws.current}
+                                openWebSocket={openWebSocket}
                     />
                     <div className={styles.container}>
                         <EntriesList entries={entries}

ui/src/components/style/Filters.module.sass

@@ -29,8 +29,8 @@
   input
     padding: 4px 12px
     background: $main-background-color
-    border-radius: 12px
-    font-size: 12px
+    border-radius: 4px
+    font-size: 14px
     border: 1px solid #BCC6DD
   fieldset
     border: none

ui/src/index.sass

@@ -31,11 +31,13 @@ button
   &:not(.MuiFab-root)
     &.MuiButtonBase-root
       box-sizing: border-box
-      font-weight: 500
+      font-weight: 600
       line-height: 1
-      border-radius: 20px
+      border-radius: 4px
       letter-spacing: 0.02857em
-      text-transform: uppercase
+      background-color: $blue-color
+      color: #fff
+      text-transform: none
       img:not(.custom)
         max-width: 13px
         max-height: 13px