HOTFIX: Fix TLS icon position

HOTFIX: Fix TLS icon position #patch

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

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) {

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()

ui-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up9/mizu-common",
-  "version": "1.0.144",
+  "version": "1.0.147",
   "description": "Made with create-react-library",
   "author": "",
   "license": "MIT",
@@ -90,4 +90,4 @@
   "files": [
     "dist"
   ]
-}
+}

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

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

@@ -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

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}
             >

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

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.144",
+    "@up9/mizu-common": "1.0.147",
     "axios": "^0.25.0",
     "core-js": "^3.20.2",
     "craco-babel-loader": "^1.0.3",
@@ -75,4 +75,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

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"
@@ -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}/>
   </>
   );

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>
     );
 
-}
+}

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

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;
-}