init tls entries capture time (#1042)

Co-authored-by: Leon <>

.github/workflows/acceptance_tests.yml

@@ -8,6 +8,9 @@ on:
     branches:
       - 'develop'
 
+env:
+  MIZU_CI_IMAGE: mizu/ci:0.0
+
 jobs:
   run-acceptance-tests:
     name: Run acceptance tests
@@ -21,6 +24,19 @@ jobs:
       - name: Check out code into the Go module directory
         uses: actions/checkout@v2
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Build
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: false
+          load: true
+          tags: ${{ env.MIZU_CI_IMAGE }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
       - name: Setup acceptance test
         run: ./acceptanceTests/setup.sh
 

.github/workflows/acceptance_tests_on_pr.yml

@@ -2,6 +2,9 @@ name: Acceptance tests on PR
 
 on: push
 
+env:
+  MIZU_CI_IMAGE: mizu/ci:0.0
+
 concurrency:
   group: acceptance-tests-on-pr-${{ github.ref }}
   cancel-in-progress: true
@@ -21,6 +24,19 @@ jobs:
       - name: Check out code into the Go module directory
         uses: actions/checkout@v2
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Build
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: false
+          load: true
+          tags: ${{ env.MIZU_CI_IMAGE }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
       - name: Setup acceptance test
         run: ./acceptanceTests/setup.sh
 

acceptanceTests/setup.sh

@@ -57,11 +57,16 @@ kubectl expose deployment rabbitmq --type=LoadBalancer --port=5672 -n mizu-tests
 echo "Starting proxy"
 kubectl proxy --port=8080 &
 
-echo "Setting minikube docker env"
-eval $(minikube docker-env)
+if [[ -z "${CI}" ]]; then
+  echo "Setting env var of mizu ci image"
+  export MIZU_CI_IMAGE="mizu/ci:0.0"
+  echo "Build agent image"
+  docker build -t "${MIZU_CI_IMAGE}" .
+else
+  echo "not building docker image in CI because it is created as separate step"
+fi
 
-echo "Build agent image"
-docker build -t mizu/ci:0.0 .
+minikube image load "${MIZU_CI_IMAGE}"
 
 echo "Build cli"
 cd cli && make build GIT_BRANCH=ci SUFFIX=ci

acceptanceTests/testsUtils.go

@@ -212,9 +212,10 @@ func DeleteKubeFile(kubeContext string, namespace string, filename string) error
 }
 
 func getDefaultCommandArgs() []string {
+	agentImageValue := os.Getenv("MIZU_CI_IMAGE")
 	setFlag := "--set"
 	telemetry := "telemetry=false"
-	agentImage := "agent-image=mizu/ci:0.0"
+	agentImage := fmt.Sprintf("agent-image=%s", agentImageValue)
 	imagePullPolicy := "image-pull-policy=IfNotPresent"
 	headless := "headless=true"
 

agent/pkg/api/socket_routes.go

@@ -123,22 +123,23 @@ func SendToSocket(socketId int, message []byte) error {
 		return fmt.Errorf("socket %v is disconnected", socketId)
 	}
 
-	var sent = false
-	time.AfterFunc(time.Second*5, func() {
-		if !sent {
-			logger.Log.Error("socket timed out")
-			socketCleanup(socketId, socketObj)
-		}
-	})
-
 	socketObj.lock.Lock() // gorilla socket panics from concurrent writes to a single socket
-	err := socketObj.connection.WriteMessage(1, message)
-	socketObj.lock.Unlock()
-	sent = true
+	defer socketObj.lock.Unlock()
 
-	if err != nil {
-		return fmt.Errorf("failed to write message to socket %v, err: %w", socketId, err)
+	if connectedWebsockets[socketId] == nil {
+		return fmt.Errorf("socket %v is disconnected", socketId)
 	}
+
+	if err := socketObj.connection.SetWriteDeadline(time.Now().Add(time.Second * 10)); err != nil {
+		socketCleanup(socketId, socketObj)
+		return fmt.Errorf("error setting timeout to socket %v, err: %v", socketId, err)
+	}
+
+	if err := socketObj.connection.WriteMessage(websocket.TextMessage, message); err != nil {
+		socketCleanup(socketId, socketObj)
+		return fmt.Errorf("failed to write message to socket %v, err: %v", socketId, err)
+	}
+
 	return nil
 }
 

agent/pkg/oas/oas_generator.go

@@ -142,17 +142,18 @@ func (g *defaultOasGenerator) runGenerator() {
 
 func (g *defaultOasGenerator) handleEntry(mizuEntry *api.Entry) {
 	if mizuEntry.Protocol.Name == "http" {
+		dest := mizuEntry.Destination.Name
+		if dest == "" {
+			logger.Log.Debugf("OAS: Unresolved entry %d", mizuEntry.Id)
+			return
+		}
+
 		entry, err := har.NewEntry(mizuEntry.Request, mizuEntry.Response, mizuEntry.StartTime, mizuEntry.ElapsedTime)
 		if err != nil {
 			logger.Log.Warningf("Failed to turn MizuEntry %d into HAR Entry: %s", mizuEntry.Id, err)
 			return
 		}
 
-		dest := mizuEntry.Destination.Name
-		if dest == "" {
-			dest = mizuEntry.Destination.IP + ":" + mizuEntry.Destination.Port
-		}
-
 		entryWSource := &EntryWithSource{
 			Entry:       *entry,
 			Source:      mizuEntry.Source.Name,

tap/tlstapper/tls_poller.go

@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"net"
 	"sync"
+	"time"
 
 	"encoding/binary"
 	"encoding/hex"
@@ -165,9 +166,13 @@ func (p *tlsPoller) startNewTlsReader(chunk *tlsChunk, ip net.IP, port uint16, k
 func dissect(extension *api.Extension, reader *tlsReader, isRequest bool, tcpid *api.TcpID,
 	tlsEmitter *tlsEmitter, options *api.TrafficFilteringOptions, reqResMatcher api.RequestResponseMatcher) {
 	b := bufio.NewReader(reader)
+	
+	timer := api.SuperTimer{
+		CaptureTime: time.Now(),
+	}
 
 	err := extension.Dissector.Dissect(b, reader.progress, api.Ebpf, isRequest, tcpid, &api.CounterPair{},
-		&api.SuperTimer{}, &api.SuperIdentifier{}, tlsEmitter, options, reqResMatcher)
+		&timer, &api.SuperIdentifier{}, tlsEmitter, options, reqResMatcher)
 
 	if err != nil {
 		logger.Log.Warningf("Error dissecting TLS %v - %v", tcpid, err)

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

@@ -78,15 +78,8 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
             const serviceMapData: ServiceMapGraph = await getServiceMapDataApi()
             setServiceMapApiData(serviceMapData)
             const newGraphData: GraphData = { nodes: [], edges: [] }
-
-            if (serviceMapData.nodes) {
-                newGraphData.nodes = serviceMapData.nodes.map(mapNodesDatatoGraph)
-            }
-
-            if (serviceMapData.edges) {
-                newGraphData.edges = serviceMapData.edges.map(mapEdgesDatatoGraph)
-            }
-
+            newGraphData.nodes = serviceMapData.nodes.map(mapNodesDatatoGraph)
+            newGraphData.edges = serviceMapData.edges.map(mapEdgesDatatoGraph)
             setGraphData(newGraphData)
         } catch (ex) {
             toast.error("An error occurred while loading Mizu Service Map, see console for mode details", { containerId: TOAST_CONTAINER_ID });
@@ -124,27 +117,32 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
         .sort((a, b) => { return a.key.localeCompare(b.key) });
 
     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])
 
-    const filterServiceMap = (newProtocolsFilters?: any[], newServiceFilters?: string[]) => {
-        const filterProt = newProtocolsFilters || checkedProtocols
-        const filterService = newServiceFilters || checkedServices
-        setCheckedProtocols(filterProt)
-        setCheckedServices(filterService)
+    useEffect(() => {
         const newGraphData: GraphData = {
-            nodes: serviceMapApiData.nodes?.map(mapNodesDatatoGraph).filter(node => filterService.includes(node.label)),
-            edges: serviceMapApiData.edges?.filter(edge => filterProt.includes(edge.protocol.abbr)).map(mapEdgesDatatoGraph)
+            nodes: serviceMapApiData.nodes?.map(mapNodesDatatoGraph).filter(node => checkedServices.includes(node.label)),
+            edges: serviceMapApiData.edges?.filter(edge => checkedProtocols.includes(edge.protocol.abbr)).map(mapEdgesDatatoGraph)
         }
         setGraphData(newGraphData);
+    }, [checkedServices, checkedProtocols, serviceMapApiData])
+
+    const onProtocolsChange = (newProtocolsFiltersnewProt) => {
+        const filterProt = newProtocolsFiltersnewProt || checkedProtocols
+        setCheckedProtocols(filterProt)
+    }
+
+    const onServiceChanges = (newServiceFilters) => {
+        const filterService = newServiceFilters || checkedServices
+        setCheckedServices([...filterService])
     }
 
     useEffect(() => {
-        if (checkedServices.length > 0) return // only after refresh
-        filterServiceMap(checkedProtocols, getServicesForFilter.map(x => x.key).filter(serviceName => !Utils.isIpAddress(serviceName)))
+        if (checkedServices.length == 0)
+            setCheckedServices(getServicesForFilter.map(x => x.key).filter(serviceName => !Utils.isIpAddress(serviceName)))
     }, [getServicesForFilter])
 
     useEffect(() => {
@@ -176,18 +174,18 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                 <Box sx={modalStyle}>
                     <div className={styles.modalContainer}>
                         <div className={styles.filterSection}>
-                            <Resizeable minWidth={170}>
+                            <Resizeable minWidth={170} maxWidth={320}>
                                 <div className={styles.filterWrapper}>
                                     <div className={styles.protocolsFilterList}>
                                         <SelectList items={protocols} checkBoxWidth="5%" tableName={"Protocols"} multiSelect={true}
-                                            checkedValues={checkedProtocols} setCheckedValues={filterServiceMap} tableClassName={styles.filters} />
+                                            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)} />
                                         <div className={styles.servicesFilterList}>
                                             <SelectList items={getServicesForFilter} tableName={"Services"} tableClassName={styles.filters} multiSelect={true} searchValue={servicesSearchVal}
-                                                checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={(newServicesForFilter) => filterServiceMap(null, newServicesForFilter)} />
+                                                checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} />
                                         </div>
                                     </div>
                                 </div>

ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts

@@ -67,11 +67,11 @@ const ServiceMapOptions = {
             color: '#343434',
             size: 12, // px
             face: 'arial',
-            background: 'none',
+            background: 'rgba(255,255,255,0.7)',
             strokeWidth: 2, // px
             strokeColor: '#ffffff',
             align: 'horizontal',
-            multi: false,
+            multi: false
         },
         labelHighlightBold: true,
         selectionWidth: 1,

ui-common/src/components/UI/Resizeable.tsx

@@ -5,9 +5,10 @@ import styles from './style/Resizeable.module.sass'
 export interface Props {
     children
     minWidth: number
+    maxWidth?: number
 }
 
-const Resizeable: React.FC<Props> = ({ children, minWidth }) => {
+const Resizeable: React.FC<Props> = ({ children, minWidth, maxWidth }) => {
     const resizeble = useRef(null)
     let mousePos = { x: 0, y: 0 }
     let elementDimention = { w: 0, h: 0 }
@@ -47,14 +48,11 @@ const Resizeable: React.FC<Props> = ({ children, minWidth }) => {
     };
 
     return (
-        <React.Fragment>
-            <div className={styles.resizable} ref={resizeble} style={{ width: elemWidth }}>
-                {children}
-                <div className={`${styles.resizer} ${styles.resizerRight}`} onMouseDown={mouseDownHandler}></div>
-                {/* <div className={`${styles.resizer} ${styles.resizerB}`} onMouseDown={mouseDownHandler}></div> -- FutureUse*/}
-            </div>
-
-        </React.Fragment>
+        <div className={styles.resizable} ref={resizeble} style={{ width: elemWidth, maxWidth: maxWidth }}>
+            {children}
+            <div className={`${styles.resizer} ${styles.resizerRight}`} onMouseDown={mouseDownHandler}></div>
+            {/* <div className={`${styles.resizer} ${styles.resizerB}`} onMouseDown={mouseDownHandler}></div> -- FutureUse*/}
+        </div>
     );
 };
 

ui-common/src/components/style/LoadingOverlay.module.sass

@@ -8,6 +8,7 @@
     align-items: center
     justify-content: center
     background-color: rgba(25, 25, 25, 0.5)
+    z-index: 1000
 
 .loadingOverlaySpinner
     width: 60px

ui/src/index.sass

@@ -139,6 +139,7 @@ button
 
 ::-webkit-scrollbar
   width: 6px
+  height: 6px
 
 ::-webkit-scrollbar-thumb
   background-color: $light-blue-color