HOTFIX: Fix TLS icon position

HOTFIX: Fix TLS icon position #patch
Merge branch 'main' into hotfix/TRA-4451_fix_TLS_icon_position
2026-02-15 18:39:58 +00:00 · 2022-03-31 11:28:33 +03:00 · 2022-03-30 17:20:39 +03:00 · 2022-03-30 17:14:56 +03:00 · 2022-03-30 17:13:56 +03:00 · 2022-03-30 17:03:21 +03:00
23 changed files with 3976 additions and 1016 deletions
--- a/agent/pkg/api/main.go
+++ b/agent/pkg/api/main.go
@@ -183,6 +183,7 @@ func resolveIP(connectionInfo *tapApi.ConnectionInfo) (resolvedSource string, re
 			}
 		} else {
 			resolvedSource = resolvedSourceObject.FullAddress
+			namespace = resolvedSourceObject.Namespace
 		}

 		unresolvedDestination := fmt.Sprintf("%s:%s", connectionInfo.ServerIP, connectionInfo.ServerPort)
@@ -194,7 +195,11 @@ func resolveIP(connectionInfo *tapApi.ConnectionInfo) (resolvedSource string, re
 			}
 		} else {
 			resolvedDestination = resolvedDestinationObject.FullAddress
-			namespace = resolvedDestinationObject.Namespace
+			// Overwrite namespace (if it was set according to the source)
+			// Only overwrite if non-empty
+			if resolvedDestinationObject.Namespace != "" {
+				namespace = resolvedDestinationObject.Namespace
+			}
 		}
 	}
 	return resolvedSource, resolvedDestination, namespace
--- a/tap/passive_tapper.go
+++ b/tap/passive_tapper.go
@@ -112,7 +112,7 @@ func UpdateTapTargets(newTapTargets []v1.Pod) {

 	tapTargets = newTapTargets

-	packetSourceManager.UpdatePods(tapTargets)
+	packetSourceManager.UpdatePods(tapTargets, !*nodefrag, mainPacketInputChan)

 	if tlsTapperInstance != nil {
 		if err := tlstapper.UpdateTapTargets(tlsTapperInstance, &tapTargets, *procfs); err != nil {
@@ -198,12 +198,8 @@ func initializePacketSources() error {
 	}

 	var err error
-	if packetSourceManager, err = source.NewPacketSourceManager(*procfs, *fname, *iface, *servicemesh, tapTargets, behaviour); err != nil {
-		return err
-	} else {
-		packetSourceManager.ReadPackets(!*nodefrag, mainPacketInputChan)
-		return nil
-	}
+	packetSourceManager, err = source.NewPacketSourceManager(*procfs, *fname, *iface, *servicemesh, tapTargets, behaviour, !*nodefrag, mainPacketInputChan)
+	return err
 }

 func initializePassiveTapper(opts *TapOpts, outputItems chan *api.OutputChannelItem) (*tcpStreamMap, *tcpAssembler) {
--- a/tap/source/packet_source_manager.go
+++ b/tap/source/packet_source_manager.go
@@ -24,7 +24,7 @@ type PacketSourceManager struct {
 }

 func NewPacketSourceManager(procfs string, filename string, interfaceName string,
-	mtls bool, pods []v1.Pod, behaviour TcpPacketSourceBehaviour) (*PacketSourceManager, error) {
+	mtls bool, pods []v1.Pod, behaviour TcpPacketSourceBehaviour, ipdefrag bool, packets chan<- TcpPacketInfo) (*PacketSourceManager, error) {
 	hostSource, err := newHostPacketSource(filename, interfaceName, behaviour)
 	if err != nil {
 		return nil, err
@@ -43,7 +43,7 @@ func NewPacketSourceManager(procfs string, filename string, interfaceName string
 		behaviour: behaviour,
 	}

-	sourceManager.UpdatePods(pods)
+	go hostSource.readPackets(ipdefrag, packets)
 	return sourceManager, nil
 }

@@ -64,16 +64,16 @@ func newHostPacketSource(filename string, interfaceName string,
 	return source, nil
 }

-func (m *PacketSourceManager) UpdatePods(pods []v1.Pod) {
+func (m *PacketSourceManager) UpdatePods(pods []v1.Pod, ipdefrag bool, packets chan<- TcpPacketInfo) {
 	if m.config.mtls {
-		m.updateMtlsPods(m.config.procfs, pods, m.config.interfaceName, m.config.behaviour)
+		m.updateMtlsPods(m.config.procfs, pods, m.config.interfaceName, m.config.behaviour, ipdefrag, packets)
 	}

 	m.setBPFFilter(pods)
 }

 func (m *PacketSourceManager) updateMtlsPods(procfs string, pods []v1.Pod,
-	interfaceName string, behaviour TcpPacketSourceBehaviour) {
+	interfaceName string, behaviour TcpPacketSourceBehaviour, ipdefrag bool, packets chan<- TcpPacketInfo) {

 	relevantPids := m.getRelevantPids(procfs, pods)
 	logger.Log.Infof("Updating mtls pods (new: %v) (current: %v)", relevantPids, m.sources)
@@ -90,6 +90,7 @@ func (m *PacketSourceManager) updateMtlsPods(procfs string, pods []v1.Pod,
 			source, err := newNetnsPacketSource(procfs, pid, interfaceName, behaviour)

 			if err == nil {
+				go source.readPackets(ipdefrag, packets)
 				m.sources[pid] = source
 			}
 		}
@@ -153,12 +154,6 @@ func (m *PacketSourceManager) setBPFFilter(pods []v1.Pod) {
 	}
 }

-func (m *PacketSourceManager) ReadPackets(ipdefrag bool, packets chan<- TcpPacketInfo) {
-	for _, src := range m.sources {
-		go src.readPackets(ipdefrag, packets)
-	}
-}
-
 func (m *PacketSourceManager) Close() {
 	for _, src := range m.sources {
 		src.close()
--- a/ui-common/package.json
+++ b/ui-common/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@up9/mizu-common",
-  "version": "1.0.139",
+  "version": "1.0.147",
  "description": "Made with create-react-library",
  "author": "",
  "license": "MIT",
@@ -27,7 +27,7 @@
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "node-sass": "^6.0.0",
-    "react":"^17.0.2",
+    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "recoil": "^0.5.2",
    "react-copy-to-clipboard": "^5.0.3",
@@ -77,7 +77,7 @@
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-sass": "^1.2.10",
    "rollup-plugin-scss": "^3.0.0",
-    "react":"^17.0.2",
+    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.2.4"
  },
--- a/ui-common/src/components/OasModal/OasModal.tsx
+++ b/ui-common/src/components/OasModal/OasModal.tsx
@@ -1,4 +1,4 @@
-import { Box, Fade, FormControl, MenuItem, Modal, Backdrop, ListSubheader } from "@material-ui/core";
+import { Box, Fade, FormControl, MenuItem, Modal, Backdrop } from "@material-ui/core";
 import { useCallback, useEffect, useState } from "react";
 import { RedocStandalone } from "redoc";
 import closeIcon from "assets/closeIcon.svg";
@@ -7,7 +7,6 @@ import style from './OasModal.module.sass';
 import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { TOAST_CONTAINER_ID } from "../../configs/Consts";
 import { Select } from "../UI/Select";


@@ -25,68 +24,44 @@ const modalStyle = {
  color: '#000',
 };

-const ipAddressWithPortRegex = new RegExp('([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}):([0-9]{1,5})');

 const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService }) => {
  const [oasServices, setOasServices] = useState([] as string[])
  const [selectedServiceName, setSelectedServiceName] = useState("");
  const [selectedServiceSpec, setSelectedServiceSpec] = useState(null);
-  const [resolvedServices, setResolvedServices] = useState([]);
-  const [unResolvedServices, setUnResolvedServices] = useState([]);

-  const onSelectedOASService = useCallback(async (selectedService) => {
-    if (!!selectedService) {
-      setSelectedServiceName(selectedService);
-      if (oasServices.length === 0) {
-        return
-      }
-      try {
-        const data = await getOasByService(selectedService);
-        setSelectedServiceSpec(data);
-      } catch (e) {
-        toast.error("Error occurred while fetching service OAS spec", { containerId: TOAST_CONTAINER_ID });
-        console.error(e);
-      }
-    }
-  }, [oasServices.length])
-
-  const resolvedArrayBuilder = useCallback(async (services) => {
-    const resServices = [];
-    const unResServices = [];
-    services.forEach(s => {
-      if (ipAddressWithPortRegex.test(s)) {
-        unResServices.push(s);
-      }
-      else {
-        resServices.push(s);
-      }
-    });
-
-    resServices.sort();
-    unResServices.sort();
-    if (resServices.length > 0) {
-      onSelectedOASService(resServices[0]);
+  const onSelectedOASService = async (selectedService) => {
+    if (oasServices.length === 0) {
+      setSelectedServiceSpec(null);
+      setSelectedServiceName("");
+      return
    }
    else {
-      onSelectedOASService(unResServices[0]);
+      setSelectedServiceName(selectedService ? selectedService : oasServices[0]);
    }
-
-    setResolvedServices(resServices);
-    setUnResolvedServices(unResServices);
-  }, [onSelectedOASService])
+    try {
+      const data = await getOasByService(selectedService ? selectedService : oasServices[0]);
+      setSelectedServiceSpec(data);
+      } catch (e) {
+        toast.error("Error occurred while fetching service OAS spec");
+        console.error(e);
+      }  
+  };

  useEffect(() => {
    (async () => {
      try {
        const services = await getOasServices();
-        resolvedArrayBuilder(services);
        setOasServices(services);
      } catch (e) {
        console.error(e);
      }
    })();
-  }, [openModal, resolvedArrayBuilder]);
+  }, [openModal]);

+  useEffect(() => {
+    onSelectedOASService(null);
+  },[oasServices])

  return (
    <Modal
@@ -104,36 +79,29 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
        <Box sx={modalStyle}>
          <div className={style.boxContainer}>
            <div className={style.selectHeader}>
-              <div><img src={openApiLogo} alt="openApi" className={style.openApilogo} /></div>
-              <div className={style.title}>OpenApi </div>
+              <div><img src={openApiLogo} alt="openAPI" className={style.openApilogo} /></div>
+              <div className={style.title}>OpenAPI</div>
            </div>
            <div style={{ cursor: "pointer" }}>
              <img src={closeIcon} alt="close" onClick={handleCloseModal} />
            </div>
          </div>
          <div className={style.selectContainer} >
-            <FormControl>
-              <Select
-                labelId="service-select-label"
-                id="service-select"
-                value={selectedServiceName}
-                onChangeCb={onSelectedOASService}
-              >
-                <ListSubheader disableSticky={true}>Resolved</ListSubheader>
-                {resolvedServices.map((service) => (
-                  <MenuItem key={service} value={service}>
-                    {service}
-                  </MenuItem>
-                ))}
-                <ListSubheader disableSticky={true}>UnResolved</ListSubheader>
-                {unResolvedServices.map((service) => (
-                  <MenuItem key={service} value={service}>
-                    {service}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </div>
+              <FormControl>
+                <Select
+                  labelId="service-select-label"
+                  id="service-select"
+                  value={selectedServiceName}
+                  onChangeCb={onSelectedOASService}
+                >
+                  {oasServices.map((service) => (
+                    <MenuItem key={service} value={service}>
+                      {service}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </div>
          <div className={style.borderLine}></div>
          <div className={style.redoc}>
            {selectedServiceSpec && <RedocStandalone
--- a/ui-common/src/components/TrafficViewer/EntryDetailed.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryDetailed.tsx
@@ -118,15 +118,11 @@ export const EntryDetailed = () => {
            } catch (error) {
                if (error.response?.data?.type) {
                    toast[error.response.data.type](`Entry[${focusedEntryId}]: ${error.response.data.msg}`, {
-                        position: "bottom-right",
                        theme: "colored",
                        autoClose: error.response.data.autoClose,
-                        hideProgressBar: false,
-                        closeOnClick: true,
-                        pauseOnHover: true,
-                        draggable: true,
                        progress: undefined,
-                    }, { containerId: TOAST_CONTAINER_ID });
+                        containerId: TOAST_CONTAINER_ID
+                    });
                }
                console.error(error);
            }
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass
@@ -66,8 +66,10 @@
  margin-top: -60px

 .capture img
-  height: 20px
+  height: 14px
  z-index: 1000
+  margin-top: 12px
+  margin-left: -2px

 .endpointServiceContainer
  display: flex
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
@@ -4,7 +4,7 @@ import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
 import styles from './EntryListItem.module.sass';
 import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode";
 import Protocol, {ProtocolInterface} from "../../UI/Protocol"
-import eBPFLogo from 'assets/ebpf.png';
+import eBPFLogo from 'assets/lock.svg';
 import {Summary} from "../../UI/Summary";
 import Queryable from "../../UI/Queryable";
 import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
@@ -140,8 +140,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>


    const isStatusCodeEnabled = ((entry.proto.name === "http" && "status" in entry) || entry.status !== 0);
-    let endpointServiceContainer = "10px";
-    if (!isStatusCodeEnabled) endpointServiceContainer = "20px";

    return <React.Fragment>
        <div
@@ -178,7 +176,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
            {isStatusCodeEnabled && <div>
                <StatusCode statusCode={entry.status} statusQuery={entry.statusQuery}/>
            </div>}
-            <div className={styles.endpointServiceContainer} style={{paddingLeft: endpointServiceContainer}}>
+            <div className={styles.endpointServiceContainer} style={{paddingLeft: 10}}>
                <Summary method={entry.method} methodQuery={entry.methodQuery} summary={entry.summary} summaryQuery={entry.summaryQuery}/>
                <div className={styles.resolvedName}>
                    <Queryable
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/ebpf.png
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/ebpf.png
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/lock.svg
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/lock.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33333 6.36364H8.66667V6.36011H10.6667V6.36364H11C11.2778 6.36364 11.5139 6.45644 11.7083 6.64205C11.9028 6.82765 12 7.05303 12 7.31818V13.0455C12 13.3106 11.9028 13.536 11.7083 13.7216C11.5139 13.9072 11.2778 14 11 14H1C0.722222 14 0.486111 13.9072 0.291666 13.7216C0.0972223 13.536 0 13.3106 0 13.0455V7.31818C0 7.05303 0.0972223 6.82765 0.291666 6.64205C0.486111 6.45644 0.722222 6.36364 1 6.36364H1.33333V4.45455C1.33333 3.23485 1.79167 2.1875 2.70833 1.3125C3.625 0.4375 4.72222 0 6 0C7.27778 0 8.375 0.4375 9.29167 1.3125C9.92325 1.91538 10.3373 2.60007 10.5337 3.36658L8.59659 3.85085C8.48731 3.40176 8.25026 3.00309 7.88542 2.65483C7.36458 2.15767 6.73611 1.90909 6 1.90909C5.26389 1.90909 4.63542 2.15767 4.11458 2.65483C3.59375 3.15199 3.33333 3.75189 3.33333 4.45455V6.36364Z" fill="#BCCEFD"/>
+</svg>
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
@@ -186,15 +186,12 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
          break;
        case "toast":
          toast[message.data.type](message.data.text, {
-            position: "bottom-right",
            theme: "colored",
            autoClose: message.data.autoClose,
-            hideProgressBar: false,
-            closeOnClick: true,
            pauseOnHover: true,
-            draggable: true,
            progress: undefined,
-          }, { containerId: TOAST_CONTAINER_ID });
+            containerId: TOAST_CONTAINER_ID
+          });
          break;
        case "queryMetadata":
          setQueriedCurrent(queriedCurrent + message.data.current);
--- a/ui-common/src/components/TrafficViewer/assets/ebpf.png
+++ b/ui-common/src/components/TrafficViewer/assets/ebpf.png
--- a/ui-common/src/components/UI/Protocol.tsx
+++ b/ui-common/src/components/UI/Protocol.tsx
@@ -54,7 +54,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal}) => {
                    backgroundColor: protocol.backgroundColor,
                    color: protocol.foregroundColor,
                    fontSize: protocol.fontSize,
-                    marginRight: "-20px",
+                    marginRight: "-6px",
                }}
                title={protocol.longName}
            >
--- a/ui-common/src/components/UI/SyntaxHighlighter/index.module.sass
+++ b/ui-common/src/components/UI/SyntaxHighlighter/index.module.sass
@@ -0,0 +1,39 @@
+.highlighterContainer
+    &.fitScreen
+        pre
+            max-height: 90vh
+            overflow: auto
+
+    pre
+        code
+            font-size: 0.75rem
+
+            &:first-child
+                margin-right: 0.75rem
+                background: #F7F9FC
+
+                .react-syntax-highlighter-line-number
+                    color: rgb(98, 126, 247)
+
+
+
+            &:last-child
+                display: block
+
+    code.hljs
+        white-space: pre-wrap
+
+    code.hljs:before
+        counter-reset: listing
+
+.hljsMarkerLine
+    counter-increment: listing
+
+.hljsMarkerLine:before
+    content: counter(listing) "  "
+    display: inline-block
+    width: 3rem
+    padding-left: auto
+    margin-left: auto
+    text-align: right
+    opacity: .5
--- a/ui-common/src/components/UI/SyntaxHighlighter/index.scss
+++ b/ui-common/src/components/UI/SyntaxHighlighter/index.scss
@@ -1,49 +0,0 @@
-.highlighterContainer {
-    &.fitScreen {
-        pre {
-            max-height: 90vh;
-            overflow: auto;
-        }
-    }
-
-    pre {
-        code {
-            font-size: 0.75rem;
-
-            &:first-child {
-                margin-right: 0.75rem;
-                background: #F7F9FC;
-
-                .react-syntax-highlighter-line-number {
-                    color: rgb(98, 126, 247);
-                }
-            }
-
-            &:last-child {
-                display: block;
-            }
-        }
-    }
-}
-
-code.hljs {
-    white-space: pre-wrap;
-}
-
-code.hljs:before {
-    counter-reset: listing;
-}
-
-code.hljs .hljs-marker-line {
-    counter-increment: listing;
-}
-
-code.hljs .hljs-marker-line:before {
-    content: counter(listing) "  ";
-    display: inline-block;
-    width: 3rem;
-    padding-left: auto;
-    margin-left: auto;
-    text-align: right;
-    opacity: .5;
-}
--- a/ui-common/src/components/UI/SyntaxHighlighter/index.tsx
+++ b/ui-common/src/components/UI/SyntaxHighlighter/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Lowlight from 'react-lowlight'
 import 'highlight.js/styles/atom-one-light.css'
-import './index.scss';
+import styles from './index.module.sass';

 import xml from 'highlight.js/lib/languages/xml'
 import json from 'highlight.js/lib/languages/json'
@@ -37,11 +37,11 @@ export const SyntaxHighlighter: React.FC<Props> = ({
    const markers = showLineNumbers ? code.split("\n").map((item, i) => {
        return {
            line: i + 1,
-            className: 'hljs-marker-line'
+            className: styles.hljsMarkerLine
        }
    }) : [];

-    return <div style={{fontSize: ".75rem"}}><Lowlight language={language ? language : ""} value={code} markers={markers}/></div>;
+    return <div style={{fontSize: ".75rem"}} className={styles.highlighterContainer}><Lowlight language={language ? language : ""} value={code} markers={markers}/></div>;
 };

 export default SyntaxHighlighter;
--- a/ui-common/src/components/UI/style/StatusCode.module.sass
+++ b/ui-common/src/components/UI/style/StatusCode.module.sass
@@ -9,7 +9,7 @@
    text-align: center
    line-height: 22px
    font-weight: 600
-    margin-left: 8px
+    margin-left: 3px

 .neutral
    background: gray
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,7 +13,7 @@
    "@types/jest": "^26.0.22",
    "@types/node": "^12.20.10",
    "@uiw/react-textarea-code-editor": "^1.4.12",
-    "@up9/mizu-common": "1.0.139",
+    "@up9/mizu-common": "1.0.147",
    "axios": "^0.25.0",
    "core-js": "^3.20.2",
    "craco-babel-loader": "^1.0.3",
--- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
+++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
 import { Button } from "@material-ui/core";
-import Api,{getWebsocketUrl} from "../../../helpers/api";
+import Api, { MizuWebsocketURL } from "../../../helpers/api";
 import debounce from 'lodash/debounce';
 import {useSetRecoilState, useRecoilState} from "recoil";
 import {useCommonStyles} from "../../../helpers/commonStyle"
@@ -44,7 +44,7 @@ const trafficViewerApi = {...api}
                                className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
                                style={{ marginRight: 25, textTransform: 'unset' }}
                                onClick={handleOpenOasModal}>
-                                OpenApi Specs
+                                OpenAPI Specs
                              </Button>}
                              {window["isServiceMapEnabled"] && <Button
                                startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>}
@@ -65,7 +65,7 @@ const trafficViewerApi = {...api}

  return (
  <>
-      <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={getWebsocketUrl()} isCloseWebSocket={!openWebSocket}
+      <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={MizuWebsocketURL} isCloseWebSocket={!openWebSocket}
                     trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal} isDemoBannerView={false}/>
  </>
  );
--- a/ui/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/ui/src/components/ServiceMapModal/ServiceMapModal.tsx
@@ -100,6 +100,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
    const commonClasses = useCommonStyles();
    const [isLoading, setIsLoading] = useState<boolean>(true);
    const [graphData, setGraphData] = useState<GraphData>({ nodes: [], edges: [] });
+    const [graphOptions, setGraphOptions] = useState(ServiceMapOptions);

    const getServiceMapData = useCallback(async () => {
        try {
@@ -149,6 +150,14 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
        // eslint-disable-next-line
    }, [isOpen])

+    useEffect(() => {
+        if(graphData?.nodes?.length === 0) return;
+        let options = {...graphOptions};
+        options.physics.barnesHut.avoidOverlap = graphData?.nodes?.length > 10 ? 0 : 1;
+        setGraphOptions(options);
+        // eslint-disable-next-line
+    },[graphData?.nodes?.length])
+
    useEffect(() => {
        getServiceMapData();
        return () => setGraphData({ nodes: [], edges: [] })
@@ -180,7 +189,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
                        <div style={{ display: "flex", justifyContent: "space-between" }}>
                            <div>
                                <Button
-                                    startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight: "8%" }}></img>}
+                                    startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight: "8%" }}/>}
                                    size="medium"
                                    variant="contained"
                                    className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
@@ -189,20 +198,20 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
                                    Refresh
                                </Button>
                            </div>
-                            <img src={close} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}></img>
+                            <img src={close} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}/>
                        </div>
                        <Graph
                            graph={graphData}
-                            options={ServiceMapOptions}
+                            options={graphOptions}
                        />
                        <div className='legend-scale'>
                            <ul className='legend-labels'>
-                                <li><span style={{ background: '#205cf5' }}></span>HTTP</li>
-                                <li><span style={{ background: '#244c5a' }}></span>HTTP/2</li>
-                                <li><span style={{ background: '#244c5a' }}></span>gRPC</li>
-                                <li><span style={{ background: '#ff6600' }}></span>AMQP</li>
-                                <li><span style={{ background: '#000000' }}></span>KAFKA</li>
-                                <li><span style={{ background: '#a41e11' }}></span>REDIS</li>
+                                <li><span style={{ background: '#205cf5' }}/>HTTP</li>
+                                <li><span style={{ background: '#244c5a' }}/>HTTP/2</li>
+                                <li><span style={{ background: '#244c5a' }}/>gRPC</li>
+                                <li><span style={{ background: '#ff6600' }}/>AMQP</li>
+                                <li><span style={{ background: '#000000' }}/>KAFKA</li>
+                                <li><span style={{ background: '#a41e11' }}/>REDIS</li>
                            </ul>
                        </div>
                    </div>}
@@ -211,4 +220,4 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
        </Modal>
    );

-}
+}
--- a/ui/src/components/ServiceMapModal/ServiceMapOptions.ts
+++ b/ui/src/components/ServiceMapModal/ServiceMapOptions.ts
@@ -148,7 +148,7 @@ const ServiceMapOptions = {
            springLength: 180,
            springConstant: 0.04,
            damping: 0.2,
-            avoidOverlap: 1
+            avoidOverlap: 0
        },
    },
    layout: {
@@ -171,4 +171,4 @@ const ServiceMapOptions = {
    },
 };

-export default ServiceMapOptions
+export default ServiceMapOptions
--- a/ui/src/helpers/api.js
+++ b/ui/src/helpers/api.js
@@ -3,13 +3,10 @@ import * as axios from "axios";
 export const MizuWebsocketURL = process.env.REACT_APP_OVERRIDE_WS_URL ? process.env.REACT_APP_OVERRIDE_WS_URL :
    window.location.protocol === 'https:' ? `wss://${window.location.host}/ws` : `ws://${window.location.host}/ws`;

-export const FormValidationErrorType = "formError";
-
 const CancelToken = axios.CancelToken;

 const apiURL = process.env.REACT_APP_OVERRIDE_API_URL ? process.env.REACT_APP_OVERRIDE_API_URL : `${window.location.origin}/`;

-let token = ""
 let client = null
 let source = null

@@ -24,8 +21,6 @@ export default class Api {
    }

    constructor() {
-        token = localStorage.getItem("token");
-
        client = this.getAxiosClient();
        source = null;
    }
@@ -125,20 +120,10 @@ export default class Api {
        return response.data;
    }

-    persistToken = (tk) => {
-        token = tk;
-        client = this.getAxiosClient();
-        localStorage.setItem('token', token);
-    }
-
    getAxiosClient = () => {
        const headers = {
            Accept: "application/json"
        }
-
-        if (token) {
-            headers['x-session-token'] = `${token}`; // we use `x-session-token` instead of `Authorization` because the latter is reserved by kubectl proxy, making mizu view not work
-        }
        return axios.create({
            baseURL: apiURL,
            timeout: 31000,
@@ -146,12 +131,3 @@ export default class Api {
        });
    }
 }
-
-export function getWebsocketUrl() {
-    let websocketUrl = MizuWebsocketURL;
-    if (token) {
-        websocketUrl += `/${token}`;
-    }
-
-    return websocketUrl;
-}
Author	SHA1	Message	Date
lirazyehezkel	dc0365dfb0	HOTFIX: Fix TLS icon position HOTFIX: Fix TLS icon position #patch	2022-03-31 11:28:33 +03:00
lirazyehezkel	84f641d8fe	Merge branch 'main' into hotfix/TRA-4451_fix_TLS_icon_position	2022-03-30 17:20:39 +03:00
Liraz Yehezkel	ac94554d2f	common versions	2022-03-30 17:14:56 +03:00
Nimrod Gilboa Markevich	2ef6afa395	Hotfix tap issues - restart service mesh tapping when tap targets change, fallback to source namespace (#953 ) * Read from service mesh network namespaces upon update (#944) #patch * Set the entry namespace to the source namespace if the destination is not resolved (#950)	2022-03-30 17:13:56 +03:00
Liraz Yehezkel	697bfef861	TLS icon position	2022-03-30 17:03:21 +03:00
lirazyehezkel	f8c0ddd69a	HOTFIX: [FE] Avoid overlap only for service map including under 10 services HOTFIX: [FE] Avoid overlap only for service map including under 10 services #patch	2022-03-30 15:11:08 +03:00
Liraz Yehezkel	2253737625	Try to avoid overlap only for maps including under 10 services	2022-03-30 13:09:10 +03:00
Igor Gov	4a0294c61a	Hotfix: [FE] Remove user token from websocket Hotfix: Remove token from mizu community #patch Merge pull request #947 from up9inc/hotfix/Remove_token_from_community	2022-03-29 13:01:53 +03:00
Liraz Yehezkel	9053c58146	Remove token from mizu community	2022-03-29 10:25:25 +03:00
Igor Gov	5d5b13fc86	Develop -> main (Release 30.0) Merge pull request #942 from up9inc/develop #major Develop -> main (Release 30.0)	2022-03-28 13:00:15 +03:00
Igor Gov	0a9be1884a	Traffic viewer list item ebpf to lock icon (#939 ) * Traffic viewer changing ebpf to lock icon	2022-03-28 11:10:54 +03:00
Igor Gov	40c745068e	Traffic viewer changing ebpf to lock icon (#938 )	2022-03-28 10:45:52 +03:00
AmitUp9	10dffd9331	TRA-4419 remove headers from OAS select (#936 )	2022-03-28 10:01:57 +03:00
leon-up9	0a800e8d8a	passed containerId in the object config (#935 ) * passed containerId in the object config * pkg version * tmp: run acceptance tests, revert before merge * reverte Co-authored-by: Leon <>	2022-03-27 19:41:51 +03:00
RamiBerm	068a4ff86e	TRA-4422 line numbers fix (#934 ) * fix line numbering in body syntax highlighter * Packages	2022-03-27 16:17:34 +03:00
gadotroee	af61c69fb6	Merge pull request #889 from up9inc/develop develop -> main (Release 29.0) #major	2022-03-13 10:30:12 +02:00
RamiBerm	94dfa68858	Revert "Support stopping oas/servicemesh/telemetry in flight (#867 )" (#868 ) This reverts commit `50c0062db4`.	2022-03-02 09:48:42 +02:00
RamiBerm	50c0062db4	Support stopping oas/servicemesh/telemetry in flight (#867 ) * Update oas_generator.go and servicemap.go * Update oas_generator.go * Update esClient.go * Update servicemap.go	2022-03-01 14:41:23 +02:00
Igor Gov	720969bbe6	Merge pull request #861 from up9inc/develop Develop -> main (28.0) #major	2022-02-27 11:27:05 +02:00