Fixed oas query (#1076 )

Fix acceptance tests failures caused by fetch 50 and a race in the tests (#1074 )
* #run_acceptance_tests * Wait 4 seconds after filter submission #run_acceptance_tests * Revert "Wait 4 seconds after filter submission #run_acceptance_tests" This reverts commit 3c20ccfcec. * Upgrade Basenine version to `v0.8.2` #run_acceptance_tests * #run_acceptance_tests * Revert "Revert "Wait 4 seconds after filter submission #run_acceptance_tests"" This reverts commit f0c595150d. * Reduce the delay to 2 seconds #run_acceptance_tests * Use `cy.wait()` instead of `setTimeout` * #run_acceptance_tests * Increase it to 4 seconds #run_acceptance_tests * #run_acceptance_tests * Wait for a second and pause the stream to preserve the DOM #run_acceptance_tests * Wait in a better place #run_acceptance_tests * Wait `pause-icon` to disappear #run_acceptance_tests * Wait one more second #run_acceptance_tests * Fix `setup.sh` * #run_acceptance_tests * Fix the place of `npm i` call * #run_acceptance_tests * Fix the other workflow as well #run_acceptance_tests * Fix the workflows once more * #run_acceptance_tests * Don't ignore `*/cypress/support` #run_acceptance_tests * Do `npm i` in `setup.sh` #run_acceptance_tests * Wait for at least 4 seconds #run_acceptance_tests * #run_acceptance_tests * Fix #run_acceptance_tests * Comment #run_acceptance_tests * Fix `{alt+enter}` to `{ctrl+enter}` and update the `checkFilter` and `deeperCheck` method signatures #run_acceptance_tests * #run_acceptance_tests * #run_acceptance_tests * Extract it to a function #run_acceptance_tests * Remove `cypress-wait-until` * Revert `.gitignore` #run_acceptance_tests
2026-02-15 02:19:54 +00:00 · 2022-05-11 15:36:46 +03:00 · 2022-05-11 13:14:01 +03:00 · 2022-05-11 09:42:47 +03:00 · 2022-05-10 13:49:46 +03:00 · 2022-05-10 13:27:41 +03:00
18 changed files with 234 additions and 103 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -55,4 +55,4 @@ tap/extensions/*/expect
 *.editorconfig

 # Ignore *.log files
-*.log
+*.log
--- a/4
+++ b/4
@@ -94,8 +94,8 @@ RUN go build -ldflags="-extldflags=-static -s -w \
    -X 'github.com/up9inc/mizu/agent/pkg/version.Ver=${VER}'" -o mizuagent .

 # Download Basenine executable, verify the sha1sum
-ADD https://github.com/up9inc/basenine/releases/download/v0.8.1/basenine_linux_${GOARCH} ./basenine_linux_${GOARCH}
-ADD https://github.com/up9inc/basenine/releases/download/v0.8.1/basenine_linux_${GOARCH}.sha256 ./basenine_linux_${GOARCH}.sha256
+ADD https://github.com/up9inc/basenine/releases/download/v0.8.2/basenine_linux_${GOARCH} ./basenine_linux_${GOARCH}
+ADD https://github.com/up9inc/basenine/releases/download/v0.8.2/basenine_linux_${GOARCH}.sha256 ./basenine_linux_${GOARCH}.sha256

 RUN shasum -a 256 -c basenine_linux_"${GOARCH}".sha256 && \
    chmod +x ./basenine_linux_"${GOARCH}" && \
--- a/acceptanceTests/cypress/integration/tests/UiTest.js
+++ b/acceptanceTests/cypress/integration/tests/UiTest.js
@@ -65,70 +65,70 @@ it('right side sanity test', function () {
 checkIllegalFilter('invalid filter');

 checkFilter({
-    name: 'http',
+    filter: 'http',
    leftSidePath: '> :nth-child(1) > :nth-child(1)',
    leftSideExpectedText: 'HTTP',
    rightSidePath: '[title=HTTP]',
    rightSideExpectedText: 'Hypertext Transfer Protocol -- HTTP/1.1',
-    applyByEnter: true
+    applyByCtrlEnter: true
 });

 checkFilter({
-    name: 'response.status == 200',
+    filter: 'response.status == 200',
    leftSidePath: '[title="Status Code"]',
    leftSideExpectedText: '200',
    rightSidePath: '> :nth-child(2) [title="Status Code"]',
    rightSideExpectedText: '200',
-    applyByEnter: false
+    applyByCtrlEnter: false
 });

 if (Cypress.env('shouldCheckSrcAndDest')) {
    serviceMapCheck();

    checkFilter({
-        name: 'src.name == ""',
+        filter: 'src.name == ""',
        leftSidePath: '[title="Source Name"]',
        leftSideExpectedText: '[Unresolved]',
        rightSidePath: '> :nth-child(2) [title="Source Name"]',
        rightSideExpectedText: '[Unresolved]',
-        applyByEnter: false
+        applyByCtrlEnter: false
    });

    checkFilter({
-        name: `dst.name == "httpbin.mizu-tests"`,
+        filter: `dst.name == "httpbin.mizu-tests"`,
        leftSidePath: '> :nth-child(3) > :nth-child(2) > :nth-child(3) > :nth-child(2)',
        leftSideExpectedText: 'httpbin.mizu-tests',
        rightSidePath: '> :nth-child(2) > :nth-child(2) > :nth-child(2) > :nth-child(3) > :nth-child(2)',
        rightSideExpectedText: 'httpbin.mizu-tests',
-        applyByEnter: false
+        applyByCtrlEnter: false
    });
 }

 checkFilter({
-    name: 'request.method == "GET"',
+    filter: 'request.method == "GET"',
    leftSidePath: '> :nth-child(3) > :nth-child(1) > :nth-child(1) > :nth-child(2)',
    leftSideExpectedText: 'GET',
    rightSidePath: '> :nth-child(2) > :nth-child(2) > :nth-child(1) > :nth-child(1) > :nth-child(2)',
    rightSideExpectedText: 'GET',
-    applyByEnter: true
+    applyByCtrlEnter: true
 });

 checkFilter({
-    name: 'request.path == "/get"',
+    filter: 'request.path == "/get"',
    leftSidePath: '> :nth-child(3) > :nth-child(1) > :nth-child(2) > :nth-child(2)',
    leftSideExpectedText: '/get',
    rightSidePath: '> :nth-child(2) > :nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(2)',
    rightSideExpectedText: '/get',
-    applyByEnter: false
+    applyByCtrlEnter: false
 });

 checkFilter({
-    name: 'src.ip == "127.0.0.1"',
+    filter: 'src.ip == "127.0.0.1"',
    leftSidePath: '[title="Source IP"]',
    leftSideExpectedText: '127.0.0.1',
    rightSidePath: '> :nth-child(2) [title="Source IP"]',
    rightSideExpectedText: '127.0.0.1',
-    applyByEnter: false
+    applyByCtrlEnter: false
 });

 checkFilterNoResults('request.method == "POST"');
@@ -182,17 +182,19 @@ function checkIllegalFilter(illegalFilterName) {

 function checkFilter(filterDetails) {
    const {
-        name,
+        filter,
        leftSidePath,
        rightSidePath,
        rightSideExpectedText,
        leftSideExpectedText,
-        applyByEnter
+        applyByCtrlEnter
    } = filterDetails;

    const entriesForDeeperCheck = 5;

-    it(`checking the filter: ${name}`, function () {
+    it(`checking the filter: ${filter}`, function () {
+        waitForFetch50AndPause();
+
        cy.get('#total-entries').should('not.have.text', '0').then(number => {
            const totalEntries = number.text();

@@ -200,21 +202,23 @@ function checkFilter(filterDetails) {
                const element = elem[0];
                const entryId = getEntryId(element.id);
                // checks the hover on the last entry (the only one in DOM at the beginning)
-                leftOnHoverCheck(entryId, leftSidePath, name);
+                leftOnHoverCheck(entryId, leftSidePath, filter);

                cy.get('.w-tc-editor-text').clear();
                // applying the filter with alt+enter or with the button
-                cy.get('.w-tc-editor-text').type(`${name}${applyByEnter ? '{alt+enter}' : ''}`);
+                cy.get('.w-tc-editor-text').type(`${filter}${applyByCtrlEnter ? '{ctrl+enter}' : ''}`);
                cy.get('.w-tc-editor').should('have.attr', 'style').and('include', Cypress.env('greenFilterColor'));
-                if (!applyByEnter)
+                if (!applyByCtrlEnter)
                    cy.get('[type="submit"]').click();

+                waitForFetch50AndPause();
+
                // only one entry in DOM after filtering, checking all checks on it
                leftTextCheck(entryId, leftSidePath, leftSideExpectedText);
-                leftOnHoverCheck(entryId, leftSidePath, name);
+                leftOnHoverCheck(entryId, leftSidePath, filter);

                rightTextCheck(rightSidePath, rightSideExpectedText);
-                rightOnHoverCheck(rightSidePath, name);
+                rightOnHoverCheck(rightSidePath, filter);
                checkRightSideResponseBody();
            });

@@ -228,7 +232,7 @@ function checkFilter(filterDetails) {
            });

            // making the other 3 checks on the first X entries (longer time for each check)
-            deeperCheck(leftSidePath, rightSidePath, name, leftSideExpectedText, rightSideExpectedText, entriesForDeeperCheck);
+            deeperCheck(leftSidePath, rightSidePath, filter, rightSideExpectedText, entriesForDeeperCheck);

            // reloading then waiting for the entries number to load
            resizeToNormalMizu();
@@ -238,7 +242,14 @@ function checkFilter(filterDetails) {
    });
 }

-function deeperCheck(leftSidePath, rightSidePath, filterName, leftSideExpectedText, rightSideExpectedText, entriesNumToCheck) {
+function waitForFetch50AndPause() {
+    // wait half a second and pause the stream to preserve the DOM
+    cy.wait(500);
+    cy.get('#pause-icon').click();
+    cy.get('#pause-icon').should('not.be.visible');
+}
+
+function deeperCheck(leftSidePath, rightSidePath, filterName, rightSideExpectedText, entriesNumToCheck) {
    cy.get(`#list [id^=entry]`).each((element, index) => {
        if (index < entriesNumToCheck) {
            const entryId = getEntryId(element[0].id);
--- a/agent/go.mod
+++ b/agent/go.mod
@@ -20,7 +20,7 @@ require (
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
 	github.com/orcaman/concurrent-map v1.0.0
 	github.com/stretchr/testify v1.7.0
-	github.com/up9inc/basenine/client/go v0.0.0-20220508080324-c66c4e1b9337
+	github.com/up9inc/basenine/client/go v0.0.0-20220509204026-c37adfc587f4
 	github.com/up9inc/mizu/logger v0.0.0
 	github.com/up9inc/mizu/shared v0.0.0
 	github.com/up9inc/mizu/tap v0.0.0
--- a/agent/go.sum
+++ b/agent/go.sum
@@ -683,8 +683,8 @@ github.com/ugorji/go v1.2.6/go.mod h1:anCg0y61KIhDlPZmnH+so+RQbysYVyDko0IMgJv0Nn
 github.com/ugorji/go/codec v1.1.7/go.mod h1:Ax+UKWsSmolVDwsd+7N3ZtXu+yMGCf907BLYF3GoBXY=
 github.com/ugorji/go/codec v1.2.6 h1:7kbGefxLoDBuYXOms4yD7223OpNMMPNPZxXk5TvFcyQ=
 github.com/ugorji/go/codec v1.2.6/go.mod h1:V6TCNZ4PHqoHGFZuSG1W8nrCzzdgA2DozYxWFFpvxTw=
-github.com/up9inc/basenine/client/go v0.0.0-20220508080324-c66c4e1b9337 h1:eRXRZnojrZyhbiSuGHl0EPvFtWvx1ZMrsY/bSoBzYNE=
-github.com/up9inc/basenine/client/go v0.0.0-20220508080324-c66c4e1b9337/go.mod h1:SvJGPoa/6erhUQV7kvHBwM/0x5LyO6XaG2lUaCaKiUI=
+github.com/up9inc/basenine/client/go v0.0.0-20220509204026-c37adfc587f4 h1:nNOrU1HVH0fnaG7GNhxCc8kNPVL035Iix7ihUF6lZT8=
+github.com/up9inc/basenine/client/go v0.0.0-20220509204026-c37adfc587f4/go.mod h1:SvJGPoa/6erhUQV7kvHBwM/0x5LyO6XaG2lUaCaKiUI=
 github.com/vishvananda/netns v0.0.0-20211101163701-50045581ed74 h1:gga7acRE695APm9hlsSMoOoE65U4/TcqNj90mc69Rlg=
 github.com/vishvananda/netns v0.0.0-20211101163701-50045581ed74/go.mod h1:DD4vA1DwXk04H54A1oHXtwZmA0grkVMdPxx/VGLCah0=
 github.com/wI2L/jsondiff v0.1.1 h1:r2TkoEet7E4JMO5+s1RCY2R0LrNPNHY6hbDeow2hRHw=
--- a/agent/pkg/oas/oas_generator.go
+++ b/agent/pkg/oas/oas_generator.go
@@ -104,7 +104,7 @@ func (g *defaultOasGenerator) runGenerator() {
 	g.dbMutex.Lock()
 	defer g.dbMutex.Unlock()
 	logger.Log.Infof("Querying DB for OAS generator with query '%s'", g.entriesQuery)
-	if err := g.dbConn.Query("", g.entriesQuery, dataChan, metaChan); err != nil {
+	if err := g.dbConn.Query("latest", g.entriesQuery, dataChan, metaChan); err != nil {
 		logger.Log.Errorf("Query mode call failed: %v", err)
 	}

--- a/agent/pkg/up9/main.go
+++ b/agent/pkg/up9/main.go
@@ -327,7 +327,7 @@ BasenineReconnect:
 	go handleMetaChannel(&wg, connection, meta)
 	wg.Add(2)

-	if err = connection.Query("", query, data, meta); err != nil {
+	if err = connection.Query("latest", query, data, meta); err != nil {
 		logger.Log.Errorf("Query mode call failed: %v", err)
 		connection.Close()
 		time.Sleep(shared.BasenineReconnectInterval * time.Second)
--- a/ui-common/src/components.scss
+++ b/ui-common/src/components.scss
@@ -0,0 +1,22 @@
+.subSectionHeader{
+    position: relative;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 15px;
+    color: $font-color;
+    &::after{
+      content: "";
+      border: 1px solid #E9EBF8;
+      transform: rotate(180deg);
+      position: absolute;
+      left: 0px;
+      right: -100%;
+      top: 100%;
+      bottom: 0%;
+      width: 100%;
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: strech;
+    }
+}
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
@@ -1,34 +1,67 @@
@import "../../variables.module"
+@import "../../components"
+
+.closeIcon
+  position: absolute
+  right: 20px
+  top: 20px

 .modalContainer
  display: flex
+  height: calc(100% - 110px)
+  background: #F0F5FF
+  padding: 0 15px
+  padding-bottom: 25px
+
+.headerContainer
  width: 100%
-  height: 100%
+  background: white
+  display: flex
+  align-items: center
+  margin-bottom: 15px
+
+.headerSection
+  display: flex
+  align-content: center
+  align-items: center
+  margin-left: 35px
+  margin-bottom: 25px
+  margin-top: 25px
+
+  & .title
+    font-size: 28px
+    color: $blue-gray
+    font-weight: 600
+    margin-right: 35px
+
+  & .actions

 .graphSection
  flex: 85%

 .filterSection
-  flex: 15%
  height: 100%
+  display: none
+
+  &.show
+    display: inline-block

  .filters table
    margin-top: 0px

-    tr
-      border-style: none
-
    td
-      color: #8f9bb2
+      color: $light-gray
      font-size: 11px
      font-weight: 600
-      padding-top: 2px
-      padding-bottom: 2px
+      padding-top: 5px
+      padding-bottom: 5px
+    th
+      font-size: 12px

 .colorBlock
  display: inline-block
-  height: 15px
-  width: 50px
+  height: 12px
+  width: 22px

 .filterWrapper
  height: 100%
@@ -36,29 +69,35 @@
  flex-direction: column
  margin-right: 10px
  width: 100%
+  border-radius: 4px

 .servicesFilterSearch
-  width: calc(100% - 10px)
-  max-width: 300px
+  width: -moz-available
+  width: -webkit-fill-available
+  width: fill-available
+  max-width: 200px
  box-shadow: 0px 1px 5px #979797
  margin-left: 10px
  margin-bottom: 5px
+  margin-top: 10px
+  margin-right: 10px
+
+.protocolsFilterList, .servicesFilter
+  background: white
+  padding: 10px
+  border-radius: 4px
+  user-select: none

 .servicesFilter
-  margin-top: 15px
+  margin-top: 10px
  height: 100%
  overflow: hidden
+  border-radius: 4px

  & .servicesFilterList
-    overflow-y: auto
-    height: calc(100% - 30px - 5px)
+    height: calc(100% - 30px - 52px)

-.separtorLine
-  margin-top: 10px
-  border: 1px solid #E9EBF8
-
-.closeIcon
-  cursor: pointer
-  user-select: none
-  margin-top: -15px
-  margin-right: 5px
+.totalSelected
+  font-size: 12px
+  color: $light-blue-color
+  font-weight: 700
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
@@ -8,6 +8,8 @@ import debounce from 'lodash/debounce';
 import ServiceMapOptions from './ServiceMapOptions'
 import { useCommonStyles } from "../../helpers/commonStyle";
 import refreshIcon from "assets/refresh.svg";
+import filterIcon from "assets/filter-icon.svg";
+import filterIconClicked from "assets/filter-icon-clicked.svg";
 import closeIcon from "assets/close.svg"
 import styles from './ServiceMapModal.module.sass'
 import SelectList from "../UI/SelectList";
@@ -23,14 +25,14 @@ const modalStyle = {
    transform: 'translate(-50%, 0%)',
    width: '89vw',
    height: '82vh',
-    bgcolor: 'background.paper',
+    bgcolor: '#F0F5FF',
    borderRadius: '5px',
    boxShadow: 24,
    p: 4,
    color: '#000',
-    padding: "25px 15px"
+    padding: "1px 1px",
+    paddingBottom: "15px"
 };
-
 interface LegentLabelProps {
    color: string,
    name: string
@@ -45,14 +47,11 @@ const LegentLabel: React.FC<LegentLabelProps> = ({ color, name }) => {
    </React.Fragment>
 }

-const protocols = [
-    { key: "HTTP", value: "HTTP", component: <LegentLabel color="#205cf5" name="HTTP" /> },
-    { key: "HTTP/2", value: "HTTP/2", component: <LegentLabel color='#244c5a' name="HTTP/2" /> },
-    { key: "gRPC", value: "gRPC", component: <LegentLabel color='#244c5a' name="gRPC" /> },
-    { key: "GQL", value: "GQL", component: <LegentLabel color='#e10098' name="GQL" /> },
-    { key: "AMQP", value: "AMQP", component: <LegentLabel color='#ff6600' name="AMQP" /> },
-    { key: "KAFKA", value: "KAFKA", component: <LegentLabel color='#000000' name="KAFKA" /> },
-    { key: "REDIS", value: "REDIS", component: <LegentLabel color='#a41e11' name="REDIS" /> },]
+type ProtocolType = {
+    key: string;
+    value: string;
+    component: JSX.Element;
+};


 interface ServiceMapModalProps {
@@ -66,11 +65,12 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
    const commonClasses = useCommonStyles();
    const [isLoading, setIsLoading] = useState<boolean>(true);
    const [graphData, setGraphData] = useState<GraphData>({ nodes: [], edges: [] });
-    const [checkedProtocols, setCheckedProtocols] = useState(protocols.map(x => x.key))
+    const [checkedProtocols, setCheckedProtocols] = useState([])
    const [checkedServices, setCheckedServices] = useState([])
    const [serviceMapApiData, setServiceMapApiData] = useState<ServiceMapGraph>({ edges: [], nodes: [] })
    const [servicesSearchVal, setServicesSearchVal] = useState("")
    const [graphOptions, setGraphOptions] = useState(ServiceMapOptions);
+    const [isFilterClicked, setIsFilterClicked] = useState(true)

    const getServiceMapData = useCallback(async () => {
        try {
@@ -113,15 +113,23 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
            },
        }
    }
-    const mapToKeyValForFilter = (arr) => arr.map(mapNodesDatatoGraph)
+    const mapToKeyValForFilter = useCallback((arr) => arr.map(mapNodesDatatoGraph)
        .map((edge) => { return { key: edge.label, value: edge.label } })
-        .sort((a, b) => { return a.key.localeCompare(b.key) });
+        .sort((a, b) => { return a.key.localeCompare(b.key) }), [])
+
+    const getProtocolsForFilter = useMemo(() => {
+        return serviceMapApiData.edges.reduce<ProtocolType[]>((returnArr, currentValue, currentIndex, array) => {
+            if (!returnArr.find(prot => prot.key === currentValue.protocol.abbr))
+                returnArr.push({ key: currentValue.protocol.abbr, value: currentValue.protocol.abbr, component: <LegentLabel color={currentValue.protocol.backgroundColor} name={currentValue.protocol.abbr} /> })
+            return returnArr
+        }, new Array<ProtocolType>())
+    }, [serviceMapApiData])

    const getServicesForFilter = useMemo(() => {
        const resolved = mapToKeyValForFilter(serviceMapApiData.nodes?.filter(x => x.resolved))
        const unResolved = mapToKeyValForFilter(serviceMapApiData.nodes?.filter(x => !x.resolved))
        return [...resolved, ...unResolved]
-    }, [serviceMapApiData])
+    }, [mapToKeyValForFilter, serviceMapApiData.nodes])

    useEffect(() => {
        const newGraphData: GraphData = {
@@ -142,10 +150,17 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
    }

    useEffect(() => {
-        if (checkedServices.length == 0)
+        if (checkedServices.length === 0)
            setCheckedServices(getServicesForFilter.map(x => x.key).filter(serviceName => !Utils.isIpAddress(serviceName)))
+        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [getServicesForFilter])

+    useEffect(() => {
+        if (checkedProtocols.length === 0) {
+            setCheckedProtocols(getProtocolsForFilter.map(x => x.key))
+        }
+    }, [getProtocolsForFilter])
+
    useEffect(() => {
        getServiceMapData()
    }, [getServiceMapData])
@@ -173,19 +188,52 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
            BackdropProps={{ timeout: 500 }}>
            <Fade in={isOpen}>
                <Box sx={modalStyle}>
+                    <div className={styles.closeIcon}>
+                        <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }}></img>
+                    </div>
+                    <div className={styles.headerContainer}>
+                        <div className={styles.headerSection}>
+                            <span className={styles.title}>Services</span>
+                            <Button size="medium"
+                                variant="contained"
+                                startIcon={<img src={isFilterClicked ? filterIconClicked : filterIcon} className="custom" alt="refresh" style={{ height: "26px", width: "26px" }}></img>}
+                                className={commonClasses.outlinedButton + " " + commonClasses.imagedButton + ` ${isFilterClicked ? commonClasses.clickedButton : ""}`}
+                                onClick={() => setIsFilterClicked(prevState => !prevState)}
+                                style={{ textTransform: 'unset' }}>
+                                Filter
+                            </Button >
+                            <Button style={{ marginLeft: "2%", textTransform: 'unset' }}
+                                startIcon={<img src={refreshIcon} className="custom" alt="refresh"></img>}
+                                size="medium"
+                                variant="contained"
+                                className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
+                                onClick={refreshServiceMap}
+                            >
+                                Refresh
+                            </Button>
+                        </div>
+                    </div>
+
                    <div className={styles.modalContainer}>
-                        <div className={styles.filterSection}>
+                        <div className={styles.filterSection + ` ${isFilterClicked ? styles.show : ""}`}>
                            <Resizeable minWidth={170} maxWidth={320}>
                                <div className={styles.filterWrapper}>
                                    <div className={styles.protocolsFilterList}>
-                                        <SelectList items={protocols} checkBoxWidth="5%" tableName={"Protocols"} multiSelect={true}
+                                        <h3 className={styles.subSectionHeader} style={{ marginLeft: "10px" }}>
+                                            PROTOCOLS
+                                            <span className={styles.totalSelected}>&nbsp;({checkedProtocols.length})</span>
+                                        </h3>
+                                        <SelectList items={getProtocolsForFilter} checkBoxWidth="5%" tableName={"All"} multiSelect={true}
                                            checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters} />
                                    </div>
-                                    <div className={styles.separtorLine}></div>
                                    <div className={styles.servicesFilter}>
-                                        <input className={commonClasses.textField + ` ${styles.servicesFilterSearch}`} placeholder="search service" value={servicesSearchVal} onChange={(event) => setServicesSearchVal(event.target.value)} />
+                                        <h3 className={styles.subSectionHeader} style={{ marginLeft: "10px" }}>
+                                            SERVICES
+                                            <span className={styles.totalSelected}>&nbsp;({checkedServices.length})</span>
+                                        </h3>
+                                        <input className={commonClasses.textField + ` ${styles.servicesFilterSearch}`} placeholder="Search" value={servicesSearchVal} onChange={(event) => setServicesSearchVal(event.target.value)} />
                                        <div className={styles.servicesFilterList}>
-                                            <SelectList items={getServicesForFilter} tableName={"Services"} tableClassName={styles.filters} multiSelect={true} searchValue={servicesSearchVal}
+                                            <SelectList items={getServicesForFilter} tableName={"All"} tableClassName={styles.filters} multiSelect={true} searchValue={servicesSearchVal}
                                                checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} />
                                        </div>
                                    </div>
@@ -194,16 +242,6 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                        </div>
                        <div className={styles.graphSection}>
                            <div style={{ display: "flex", justifyContent: "space-between" }}>
-                                <Button style={{ marginLeft: "3%" }}
-                                    startIcon={<img src={refreshIcon} className="custom" alt="refresh" style={{ marginRight: "8%" }}></img>}
-                                    size="medium"
-                                    variant="contained"
-                                    className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
-                                    onClick={refreshServiceMap}
-                                >
-                                    Refresh
-                                </Button>
-                                <img src={closeIcon} alt="close" onClick={() => onClose()} className={styles.closeIcon}></img>
                            </div>
                            {isLoading && <div className={spinnerStyle.spinnerContainer}>
                                <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
--- a/ui-common/src/components/ServiceMapModal/assets/filter-icon-clicked.svg
+++ b/ui-common/src/components/ServiceMapModal/assets/filter-icon-clicked.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 8L10.6667 12.6667V18H13.3333V12.6667L18 8V6H6V8Z" stroke="white"/>
+</svg>
--- a/ui-common/src/components/ServiceMapModal/assets/filter-icon.svg
+++ b/ui-common/src/components/ServiceMapModal/assets/filter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 8L10.6667 12.6667V18H13.3333V12.6667L18 8V6H6V8Z" stroke="#205CF5"/>
+</svg>
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
@@ -245,13 +245,18 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
      {tappingStatus && isShowStatusBar && <StatusBar disabled={ws?.current?.readyState !== WebSocket.OPEN} isDemoBannerView={isDemoBannerView}/>}
      <div className={TrafficViewerStyles.TrafficPageHeader}>
        <div className={TrafficViewerStyles.TrafficPageStreamStatus}>
-          <img className={TrafficViewerStyles.playPauseIcon}
-               style={{visibility: wsReadyState === WebSocket.OPEN ? "visible" : "hidden"}} alt="pause"
-               src={pauseIcon} onClick={toggleConnection}/>
-          <img className={TrafficViewerStyles.playPauseIcon}
+          <img id="pause-icon"
+               className={TrafficViewerStyles.playPauseIcon}
+               style={{visibility: wsReadyState === WebSocket.OPEN ? "visible" : "hidden"}}
+               alt="pause"
+               src={pauseIcon}
+               onClick={toggleConnection}/>
+          <img id="play-icon"
+               className={TrafficViewerStyles.playPauseIcon}
               style={{position: "absolute", visibility: wsReadyState === WebSocket.OPEN ? "hidden" : "visible"}}
               alt="play"
-               src={playIcon} onClick={toggleConnection}/>
+               src={playIcon}
+               onClick={toggleConnection}/>
          <div className={TrafficViewerStyles.connectionText}>
            {getConnectionTitle()}
            {getConnectionIndicator()}
--- a/ui-common/src/components/UI/SelectList.tsx
+++ b/ui-common/src/components/UI/SelectList.tsx
@@ -72,7 +72,9 @@ const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], mul
    const tableHead = multiSelect ? <tr style={{ borderBottomWidth: "2px" }}>
        <th style={{ width: checkBoxWidth }}><Checkbox data-cy="checkbox-all" checked={headerChecked}
            onToggle={(isChecked) => toggleAll(isChecked)} /></th>
-        <th>{tableName}</th>
+        <th>
+            {tableName}
+        </th>
    </tr> :
        <tr style={{ borderBottomWidth: "2px" }}>
            <th>{tableName}</th>
--- a/ui-common/src/components/UI/style/Resizeable.module.sass
+++ b/ui-common/src/components/UI/style/Resizeable.module.sass
@@ -5,7 +5,6 @@
    align-items: center
    display: flex
    overflow: hidden
-    border-right: 1px solid $blue-color
    height: 100%
    width: 100%
    padding-right: 3px
--- a/ui-common/src/helpers/commonStyle.ts
+++ b/ui-common/src/helpers/commonStyle.ts
@@ -1,4 +1,5 @@
-import {makeStyles} from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
+import variables from "../variables.module.scss"

 // @ts-ignore
 export const useCommonStyles = makeStyles(() => ({
@@ -9,11 +10,10 @@ export const useCommonStyles = makeStyles(() => ({
        fontSize: 12,
        padding: "9px 12px",
        borderRadius: "6px ! important",
-
        "&:hover": {
            backgroundColor: "#205cf5",
        },
-        "&:disabled":{
+        "&:disabled": {
            backgroundColor: "rgba(0, 0, 0, 0.26)"
        }
    },
@@ -25,12 +25,17 @@ export const useCommonStyles = makeStyles(() => ({
        padding: "8px 12px",
        border: "1px #205cf5 solid",
        borderRadius: "6px ! important",
-
        "&:hover": {
            backgroundColor: "transparent",
        },
    },
-
+    clickedButton: {
+        color: "white",
+        backgroundColor: "#205cf5",
+        "&:hover": {
+            backgroundColor: "#205cf5",
+        },
+    },
    imagedButton: {
        padding: "1px 14px"
    },
@@ -46,7 +51,7 @@ export const useCommonStyles = makeStyles(() => ({
        height: "30px",
        boxSizing: "border-box"
    },
-    modal :{
+    modal: {
        position: 'absolute',
        top: '40%',
        left: '50%',
--- a/ui-common/src/hooks/WindowDimensionsHook.tsx
+++ b/ui-common/src/hooks/WindowDimensionsHook.tsx
@@ -14,11 +14,11 @@ export function useRequestTextByWidth(windowWidth){
    let responseText = "Response: "
    let elapsedTimeText = "Elapsed Time: "

-    if (windowWidth < 1078) {
+    if (windowWidth < 1436) {
        requestText = ""
        responseText = ""
        elapsedTimeText = ""
-    } else if (windowWidth < 1356) {
+    } else if (windowWidth < 1700) {
        requestText = "Req: "
        responseText = "Res: "
        elapsedTimeText = "ET: "
@@ -38,6 +38,6 @@ export default function useWindowDimensions() {
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
-
+    
    return windowDimensions;
 }
--- a/ui-common/src/variables.module.scss
+++ b/ui-common/src/variables.module.scss
@@ -7,6 +7,10 @@ $blue-color: #205CF5;
 $light-blue-color: #BCCEFD;
 $success-color: #27AE60;
 $failure-color: #EB5757;
+
+$header-section-color : #fbfcfe;
+$content-section-color: #f8f9fc;
+
 $blue-gray: #494677;
 $light-gray: #8F9BB2;
Author	SHA1	Message	Date
RoyUP9	2fac0009ea	Fixed oas query (#1076 )	2022-05-11 15:36:46 +03:00
M. Mert Yıldıran	36d59ede07	Fix acceptance tests failures caused by fetch 50 and a race in the tests (#1074 ) * #run_acceptance_tests * Wait 4 seconds after filter submission #run_acceptance_tests * Revert "Wait 4 seconds after filter submission #run_acceptance_tests" This reverts commit `3c20ccfcec`. * Upgrade Basenine version to `v0.8.2` #run_acceptance_tests * #run_acceptance_tests * Revert "Revert "Wait 4 seconds after filter submission #run_acceptance_tests"" This reverts commit `f0c595150d`. * Reduce the delay to 2 seconds #run_acceptance_tests * Use `cy.wait()` instead of `setTimeout` * #run_acceptance_tests * Increase it to 4 seconds #run_acceptance_tests * #run_acceptance_tests * Wait for a second and pause the stream to preserve the DOM #run_acceptance_tests * Wait in a better place #run_acceptance_tests * Wait `pause-icon` to disappear #run_acceptance_tests * Wait one more second #run_acceptance_tests * Fix `setup.sh` * #run_acceptance_tests * Fix the place of `npm i` call * #run_acceptance_tests * Fix the other workflow as well #run_acceptance_tests * Fix the workflows once more * #run_acceptance_tests * Don't ignore `/cypress/support` #run_acceptance_tests Do `npm i` in `setup.sh` #run_acceptance_tests * Wait for at least 4 seconds #run_acceptance_tests * #run_acceptance_tests * Fix #run_acceptance_tests * Comment #run_acceptance_tests * Fix `{alt+enter}` to `{ctrl+enter}` and update the `checkFilter` and `deeperCheck` method signatures #run_acceptance_tests * #run_acceptance_tests * #run_acceptance_tests * Extract it to a function #run_acceptance_tests * Remove `cypress-wait-until` * Revert `.gitignore` #run_acceptance_tests	2022-05-11 13:14:01 +03:00
AmitUp9	ac53508ad7	TRA-4513_grpc heading overlap request size (#1075 ) * screen resolution changes * fix window width to not overlap between headlines	2022-05-11 09:42:47 +03:00
leon-up9	e24c18254c	UI/servicemap-dynamic-protocol-filters (#1072 ) * filters visble on click * servicemap layout * headers added Icon changed * flex removed , we have max size for filter * selection only from edges * caption changed * removed duplicated code * changes Co-authored-by: Leon <>	2022-05-10 13:49:46 +03:00
leon-up9	b2830f133f	UI/Service-map-GUI-improvements (#1055 ) * filters visble on click * servicemap layout * headers added Icon changed * flex removed , we have max size for filter * added mixins * search input caption * PR commemts * changed colors to variables * lint fix small buttom style fix Co-authored-by: Leon <>	2022-05-10 13:27:41 +03:00