diff --git a/ui/src/components/Filters.tsx b/ui/src/components/Filters.tsx index c7188c2a5..691ce556a 100644 --- a/ui/src/components/Filters.tsx +++ b/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) => void; pathFilter: string setPathFilter: (val: string) => void; + ws: any + openWebSocket: (query: string) => void; } -export const Filters: React.FC = ({methodsFilter, setMethodsFilter, statusFilter, setStatusFilter, pathFilter, setPathFilter}) => { +export const Filters: React.FC = ({methodsFilter, setMethodsFilter, statusFilter, setStatusFilter, pathFilter, setPathFilter, ws, openWebSocket}) => { return
- - - +
; }; @@ -102,18 +102,39 @@ const StatusTypesFilter: React.FC = ({statusFilter, setS ; }; -interface PathFilterProps { - pathFilter: string; - setPathFilter: (val: string) => void; +interface QueryFormProps { + ws: any + openWebSocket: (query: string) => void; } -const PathFilter: React.FC = ({pathFilter, setPathFilter}) => { +class QueryForm extends React.Component { + constructor(props) { + super(props); + this.state = {value: ''}; - return -
Path
-
- setPathFilter(e.target.value)}/> -
-
; -}; + 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 ( +
+ + +
+ ); + } +} diff --git a/ui/src/components/TrafficPage.tsx b/ui/src/components/TrafficPage.tsx index 3e9b2911b..eb68d9afa 100644 --- a/ui/src/components/TrafficPage.tsx +++ b/ui/src/components/TrafficPage.tsx @@ -67,8 +67,9 @@ export const TrafficPage: React.FC = ({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 = ({setAnalyzeStatus, onTLS useEffect(() => { (async () => { - openWebSocket(); + openWebSocket(""); try{ const tapStatusResponse = await api.tapStatus(); setTappingStatus(tapStatusResponse); @@ -184,7 +185,7 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus, onTLS - {entries.length > 0 &&
+ {
= ({setAnalyzeStatus, onTLS setStatusFilter={setStatusFilter} pathFilter={pathFilter} setPathFilter={setPathFilter} + ws={ws.current} + openWebSocket={openWebSocket} />