Ui/TRA-4586_add-insertion-filter-to-settings-page (#1127)

* working query input

* removed prop

* splited to diffrent events

* export alias

* PR comments

Co-authored-by: Leon <>

acceptanceTests/Makefile

@@ -1,2 +1,3 @@
 test: ## Run acceptance tests.
+	@npm install cypress@10.0.1 -y
 	@go test ./... -timeout 1h -v

acceptanceTests/cypress.config.js

@@ -0,0 +1,31 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  watchForFileChanges: false,
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  video: false,
+  screenshotOnRunFailure: false,
+  defaultCommandTimeout: 6000,
+  env: {
+    testUrl: 'http://localhost:8899/',
+    redactHeaderContent: 'User-Header[REDACTED]',
+    redactBodyContent: '{ "User": "[REDACTED]" }',
+    regexMaskingBodyContent: '[REDACTED]',
+    greenFilterColor: 'rgb(210, 250, 210)',
+    redFilterColor: 'rgb(250, 214, 220)',
+    bodyJsonClass: '.hljs',
+    mizuWidth: 1920,
+    normalMizuHeight: 1080,
+    hugeMizuHeight: 3500,
+  },
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    // setupNodeEvents(on, config) {
+    //   return require('./cypress/plugins/index.js')(on, config)
+    // },
+    specPattern: 'cypress/e2e/tests/*.js',
+    supportFile: false
+  },
+})

acceptanceTests/cypress.json

@@ -1,34 +0,0 @@
-{
-  "watchForFileChanges":false,
-  "viewportWidth": 1920,
-  "viewportHeight": 1080,
-  "video": false,
-  "screenshotOnRunFailure": false,
-  "defaultCommandTimeout": 6000,
-  "testFiles": [
-    "tests/GuiPort.js",
-    "tests/MultipleNamespaces.js",
-    "tests/Redact.js",
-    "tests/NoRedact.js",
-    "tests/Regex.js",
-    "tests/RegexMasking.js",
-    "tests/IgnoredUserAgents.js",
-    "tests/UiTest.js",
-    "tests/Redis.js",
-    "tests/Rabbit.js",
-    "tests/serviceMapFunction.js"
-  ],
-
-  "env": {
-    "testUrl": "http://localhost:8899/",
-    "redactHeaderContent": "User-Header[REDACTED]",
-    "redactBodyContent": "{ \"User\": \"[REDACTED]\" }",
-    "regexMaskingBodyContent": "[REDACTED]",
-    "greenFilterColor": "rgb(210, 250, 210)",
-    "redFilterColor": "rgb(250, 214, 220)",
-    "bodyJsonClass": ".hljs",
-    "mizuWidth": 1920,
-    "normalMizuHeight": 1080,
-    "hugeMizuHeight": 3500
-  }
-}

acceptanceTests/cypress/e2e/testHelpers/TrafficHelper.js

@@ -4,8 +4,6 @@ export const valueTabs = {
     none: null
 }
 
-const maxEntriesInDom = 13;
-
 export function isValueExistsInElement(shouldInclude, content, domPathToContainer){
     it(`should ${shouldInclude ? '' : 'not'} include '${content}'`, function () {
         cy.get(domPathToContainer).then(htmlText => {

acceptanceTests/extensions_test.go

@@ -105,7 +105,7 @@ func TestRedis(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/Redis.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/Redis.js\"")
 }
 
 func TestAmqp(t *testing.T) {
@@ -236,5 +236,5 @@ func TestAmqp(t *testing.T) {
 		ch.Close()
 	}
 
-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/Rabbit.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/Rabbit.js\"")
 }

acceptanceTests/tap_test.go

@@ -78,7 +78,7 @@ func basicTapTest(t *testing.T, shouldCheckSrcAndDest bool, extraArgs... string)
 				expectedPodsStr += fmt.Sprintf("Name:%vNamespace:%v", expectedPods[i].Name, expectedPods[i].Namespace)
 			}
 
-			RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec  \"cypress/integration/tests/UiTest.js\" --env entriesCount=%d,arrayDict=%v,shouldCheckSrcAndDest=%v",
+			RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/UiTest.js\" --env entriesCount=%d,arrayDict=%v,shouldCheckSrcAndDest=%v",
 				entriesCount, expectedPodsStr, shouldCheckSrcAndDest))
 		})
 	}
@@ -135,7 +135,7 @@ func TestTapGuiPort(t *testing.T) {
 				}
 			}
 
-			RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec \"cypress/integration/tests/GuiPort.js\" --env name=%v,namespace=%v,port=%d",
+			RunCypressTests(t, fmt.Sprintf("npx cypress run --spec \"cypress/e2e/tests/GuiPort.js\" --env name=%v,namespace=%v,port=%d",
 				"httpbin", "mizu-tests", guiPort))
 		})
 	}
@@ -182,7 +182,7 @@ func TestTapAllNamespaces(t *testing.T) {
 		return
 	}
 
-	RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec  \"cypress/integration/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
+	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
 		expectedPods[0].Name, expectedPods[1].Name, expectedPods[2].Name, expectedPods[0].Namespace, expectedPods[1].Namespace, expectedPods[2].Namespace))
 }
 
@@ -231,7 +231,7 @@ func TestTapMultipleNamespaces(t *testing.T) {
 		return
 	}
 
-	RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec  \"cypress/integration/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
+	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
 		expectedPods[0].Name, expectedPods[1].Name, expectedPods[2].Name, expectedPods[0].Namespace, expectedPods[1].Namespace, expectedPods[2].Namespace))
 }
 
@@ -277,7 +277,7 @@ func TestTapRegex(t *testing.T) {
 		return
 	}
 
-	RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec  \"cypress/integration/tests/Regex.js\" --env name=%v,namespace=%v",
+	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/Regex.js\" --env name=%v,namespace=%v",
 		expectedPods[0].Name, expectedPods[0].Namespace))
 }
 
@@ -376,7 +376,7 @@ func TestTapRedact(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/Redact.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/Redact.js\"")
 }
 
 func TestTapNoRedact(t *testing.T) {
@@ -426,7 +426,7 @@ func TestTapNoRedact(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/NoRedact.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/NoRedact.js\"")
 }
 
 func TestTapRegexMasking(t *testing.T) {
@@ -479,7 +479,7 @@ func TestTapRegexMasking(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress@9.5.4 run --spec \"cypress/integration/tests/RegexMasking.js\"")
+	RunCypressTests(t, "npx cypress run --spec \"cypress/e2e/tests/RegexMasking.js\"")
 
 }
 
@@ -541,7 +541,7 @@ func TestTapIgnoredUserAgents(t *testing.T) {
 		}
 	}
 
-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/IgnoredUserAgents.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/IgnoredUserAgents.js\"")
 }
 
 func TestTapDumpLogs(t *testing.T) {

ui-common/src/components/TrafficViewer/Filters.tsx

@@ -1,36 +1,43 @@
-import React, {useRef, useState} from "react";
+import React, { FC, useEffect, useMemo, useRef, useState } from "react";
 import styles from '../style/Filters.module.sass';
-import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider} from "@material-ui/core";
+import { Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider, debounce } from "@material-ui/core";
 import CodeEditor from '@uiw/react-textarea-code-editor';
 import MenuBookIcon from '@material-ui/icons/MenuBook';
-import {SyntaxHighlighter} from "../UI/SyntaxHighlighter/index";
+import { SyntaxHighlighter } from "../UI/SyntaxHighlighter/index";
 import filterUIExample1 from "assets/filter-ui-example-1.png"
 import filterUIExample2 from "assets/filter-ui-example-2.png"
 import variables from '../../variables.module.scss';
-import {useRecoilState, useRecoilValue} from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import queryAtom from "../../recoil/query";
 import useKeyPress from "../../hooks/useKeyPress"
 import shortcutsKeyboard from "../../configs/shortcutsKeyboard"
-import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
+import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
 
 
 interface FiltersProps {
-    backgroundColor: string
     reopenConnection: any;
 }
 
-export const Filters: React.FC<FiltersProps> = ({backgroundColor, reopenConnection}) => {
+export const Filters: React.FC<FiltersProps> = ({ reopenConnection }) => {
+    const [query, setQuery] = useRecoilState(queryAtom);
+    const api: any = useRecoilValue(TrafficViewerApiAtom)
+
     return <div className={styles.container}>
         <QueryForm
-            backgroundColor={backgroundColor}
+            query={query}
             reopenConnection={reopenConnection}
-        />
+            onQueryChange={(query) => { setQuery(query?.trim()); }} validateQuery={api?.validateQuery} />
     </div>;
 };
 
+type OnQueryChange = { valid: boolean, message: string, query: string }
+
 interface QueryFormProps {
-    backgroundColor: string
+    reopenConnection?: any;
-    reopenConnection: any;
+    query: string
+    onQueryChange?: (query: string) => void
+    validateQuery: (query: string) => Promise<{ valid: boolean, message: string }>;
+    onValidationChanged?: (event: OnQueryChange) => void
 }
 
 export const modalStyle = {
@@ -47,20 +54,57 @@ export const modalStyle = {
     color: '#000',
 };
 
-export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, reopenConnection}) => {
+export const CodeEditorWrap: FC<QueryFormProps> = ({ query, onQueryChange, validateQuery, onValidationChanged }) => {
+    const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
+    const handleQueryChange = useMemo(
+        () =>
+            debounce(async (query: string) => {
+                if (!query) {
+                    setQueryBackgroundColor("#f5f5f5");
+                    onValidationChanged && onValidationChanged({ query: query, message: "", valid: true })
+                } else {
+                    const data = await validateQuery(query);
+                    if (!data) {
+                        return;
+                    }
+                    if (data.valid) {
+                        setQueryBackgroundColor("#d2fad2");
+                    } else {
+                        setQueryBackgroundColor("#fad6dc");
+                    }
+                    onValidationChanged && onValidationChanged({ query: query, message: data.message, valid: data.valid })
+                }
+            }, 500),
+        [onValidationChanged, validateQuery]
+    ) as (query: string) => void;
+
+    useEffect(() => {
+        handleQueryChange(query);
+    }, [query, handleQueryChange]);
+
+    return <CodeEditor
+        value={query}
+        language="py"
+        placeholder="Mizu Filter Syntax"
+        onChange={(event) => onQueryChange(event.target.value)}
+        padding={8}
+        style={{
+            fontSize: 14,
+            backgroundColor: `${queryBackgroundColor}`,
+            fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
+        }}
+    />
+}
+
+export const QueryForm: React.FC<QueryFormProps> = ({ validateQuery, reopenConnection, query, onQueryChange, onValidationChanged }) => {
 
     const formRef = useRef<HTMLFormElement>(null);
-    const [query, setQuery] = useRecoilState(queryAtom);
 
     const [openModal, setOpenModal] = useState(false);
 
     const handleOpenModal = () => setOpenModal(true);
     const handleCloseModal = () => setOpenModal(false);
 
-    const handleChange = async (e) => {
-        setQuery(e.target.value.trim());
-    }
-
     const handleSubmit = (e) => {
         reopenConnection();
         e.preventDefault();
@@ -86,18 +130,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, reopenConn
                     }}
                 >
                     <label>
-                        <CodeEditor
+                        <CodeEditorWrap validateQuery={validateQuery} query={query} onQueryChange={onQueryChange} onValidationChanged={onValidationChanged} />
-                            value={query}
-                            language="py"
-                            placeholder="Mizu Filter Syntax"
-                            onChange={handleChange}
-                            padding={8}
-                            style={{
-                                fontSize: 14,
-                                backgroundColor: `${backgroundColor}`,
-                                fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
-                            }}
-                        />
                     </label>
                 </Grid>
                 <Grid item xs={4}>

ui-common/src/components/TrafficViewer/TrafficViewer.tsx

@@ -1,24 +1,23 @@
-import React, {useEffect, useMemo, useRef, useState} from "react";
+import React, { useEffect, useRef, useState } from "react";
-import {Filters} from "./Filters";
+import { Filters } from "./Filters";
-import {EntriesList} from "./EntriesList";
+import { EntriesList } from "./EntriesList";
-import {makeStyles} from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
 import TrafficViewerStyles from "./TrafficViewer.module.sass";
 import styles from '../style/EntriesList.module.sass';
-import {EntryDetailed} from "./EntryDetailed";
+import { EntryDetailed } from "./EntryDetailed";
 import playIcon from 'assets/run.svg';
 import pauseIcon from 'assets/pause.svg';
 import variables from '../../variables.module.scss';
-import {ToastContainer} from 'react-toastify';
+import { ToastContainer } from 'react-toastify';
-import debounce from 'lodash/debounce';
+import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import {RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
 import entriesAtom from "../../recoil/entries";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 import queryAtom from "../../recoil/query";
 import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
 import TrafficViewerApi from "./TrafficViewerApi";
-import {StatusBar} from "../UI/StatusBar";
+import { StatusBar } from "../UI/StatusBar";
 import tappingStatusAtom from "../../recoil/tappingStatus/atom";
-import {TOAST_CONTAINER_ID} from "../../configs/Consts";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";
 import leftOffTopAtom from "../../recoil/leftOffTop";
 import { DEFAULT_LEFTOFF, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS } from '../../hooks/useWS';
 
@@ -70,34 +69,12 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
   const [isSnappedToBottom, setIsSnappedToBottom] = useState(true);
   const [wsReadyState, setWsReadyState] = useState(0);
 
-  const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
-
   const setLeftOffTop = useSetRecoilState(leftOffTopAtom);
   const scrollableRef = useRef(null);
 
-  const handleQueryChange = useMemo(
-    () =>
-      debounce(async (query: string) => {
-        if (!query) {
-          setQueryBackgroundColor("#f5f5f5");
-        } else {
-          const data = await trafficViewerApiProp.validateQuery(query);
-          if (!data) {
-            return;
-          }
-          if (data.valid) {
-            setQueryBackgroundColor("#d2fad2");
-          } else {
-            setQueryBackgroundColor("#fad6dc");
-          }
-        }
-      }, 500),
-    []
-  ) as (query: string) => void;
 
-  useEffect(() => {
+
-    handleQueryChange(query);
+
-  }, [query, handleQueryChange]);
 
   useEffect(() => {
     if(shouldCloseWebSocket){
@@ -262,7 +239,6 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
       {<div className={TrafficViewerStyles.TrafficPageContainer}>
         <div className={TrafficViewerStyles.TrafficPageListContainer}>
           <Filters
-            backgroundColor={queryBackgroundColor}
             reopenConnection={reopenConnection}
           />
           <div className={styles.container}>

ui-common/src/components/UI/index.ts

@@ -9,6 +9,5 @@ import { InformationIcon, Link } from "./InformationIcon";
 import SelectList from "./SelectList";
 import NoDataMessage from "./NoDataMessage";
 
-
+export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link };
-export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link }
+export { StatusBar }
-export { StatusBar }

ui-common/src/components/UI/style/SelectList.module.sass

@@ -3,7 +3,7 @@
 
 .selectListTable
     user-select: none // when resizble moved we get unwanted beheviour
-    height: 100%
+    height: calc(100% - 53px)
 
     table
         width: 100%

ui-common/src/index.tsx

@@ -5,6 +5,7 @@ import useWS, { DEFAULT_LEFTOFF } from './hooks/useWS';
 import OasModal from './components/OasModal/OasModal';
 import { ServiceMapModal } from './components/ServiceMapModal/ServiceMapModal';
 
+export { CodeEditorWrap as QueryForm } from './components/TrafficViewer/Filters';
 export { UI, StatusBar, OasModal, ServiceMapModal }
 export { useWS, DEFAULT_LEFTOFF }
 export default TrafficViewer;

ui-common/src/recoil/TrafficViewerApi/atom.ts

@@ -3,7 +3,7 @@ import TrafficViewerApi from "../../components/TrafficViewer/TrafficViewerApi";
 
 const TrafficViewerApiAtom = atom({
     key: "TrafficViewerApiAtom",
-    default: {} as TrafficViewerApi
+    default: {}
 });
 
 export default TrafficViewerApiAtom;