Ui/Resiszable (#990 )

* fixed toast fixed filter refresh on reload * revarted * sticky selectlist header * apply check to filtered items * grpc filter Bug * should almost fix filtering * working without disabled * handle disabled items * small refactor * almost working with weird jesture * test * servicesFilterList height * fixed to work * refresh margin * after PR notes * remove redunded var * pr review * Pr comments * removed line * removed redundant * nullable check Co-authored-by: Leon <>
Fix screen layout (#993 )
2026-03-07 20:20:55 +00:00 · 2022-04-12 16:27:20 +03:00 · 2022-04-12 11:20:02 +03:00 · 2022-04-12 10:48:50 +03:00 · 2022-04-11 17:26:28 +03:00 · 2022-04-11 15:04:42 +03:00
63 changed files with 951 additions and 792 deletions
--- a/.github/workflows/acceptance_tests.yml
+++ b/.github/workflows/acceptance_tests.yml
@@ -43,7 +43,7 @@ jobs:
        with:
          status: ${{ job.status }}
          notification_title: 'Mizu {workflow} has {status_message}'
-          message_format: '{emoji} *{workflow}* {status_message} during <{run_url}|run>, after commit <{commit_url}|{commit_sha}> by ${{ github.event.head_commit.committer.name }} <${{ github.event.head_commit.committer.email }}> ```${{ github.event.head_commit.message }}```'
+          message_format: '{emoji} *{workflow}* {status_message} during <{run_url}|run>, after commit <{commit_url}|{commit_sha}> by ${{ github.event.head_commit.author.name }} <${{ github.event.head_commit.author.email }}> ```${{ github.event.head_commit.message }}```'
          footer: 'Linked Repo <{repo_url}|{repo}>'
          notify_when: 'failure'
        env:
--- a/agent/go.mod
+++ b/agent/go.mod
@@ -15,6 +15,7 @@ require (
 	github.com/go-playground/validator/v10 v10.10.0
 	github.com/google/uuid v1.3.0
 	github.com/gorilla/websocket v1.4.2
+	github.com/jinzhu/copier v0.3.5
 	github.com/nav-inc/datetime v0.1.3
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
 	github.com/orcaman/concurrent-map v1.0.0
--- a/agent/go.sum
+++ b/agent/go.sum
@@ -428,6 +428,8 @@ github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH
 github.com/inconshreveable/mousetrap v1.0.0 h1:Z8tu5sraLXCXIcARxBp/8cbvlwVa7Z1NHg9XEKhtSvM=
 github.com/inconshreveable/mousetrap v1.0.0/go.mod h1:PxqpIevigyE2G7u3NXJIT2ANytuPF1OarO4DADm73n8=
 github.com/jessevdk/go-flags v1.4.0/go.mod h1:4FA24M0QyGHXBuZZK/XkWh8h0e1EYbRYJSGM75WSRxI=
+github.com/jinzhu/copier v0.3.5 h1:GlvfUwHk62RokgqVNvYsku0TATCF7bAHVwEXoBh3iJg=
+github.com/jinzhu/copier v0.3.5/go.mod h1:DfbEm0FYsaqBcKcFuvmOZb218JkPGtvSHsKg8S8hyyg=
 github.com/jonboulle/clockwork v0.1.0/go.mod h1:Ii8DK3G1RaLaWxj9trq07+26W01tbo22gdxWY5EU2bo=
 github.com/jonboulle/clockwork v0.2.2/go.mod h1:Pkfl5aHPm1nk2H9h0bjmnJD/BcgbGXUBGnn1kMkgxc8=
 github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8HmY=
--- a/agent/main.go
+++ b/agent/main.go
@@ -199,7 +199,7 @@ func runInHarReaderMode() {
 func enableExpFeatureIfNeeded() {
 	if config.Config.OAS {
 		oasGenerator := dependency.GetInstance(dependency.OasGeneratorDependency).(oas.OasGenerator)
-		oasGenerator.Start()
+		oasGenerator.Start(nil)
 	}
 	if config.Config.ServiceMap {
 		serviceMapGenerator := dependency.GetInstance(dependency.ServiceMapGeneratorDependency).(servicemap.ServiceMap)
@@ -371,7 +371,7 @@ func handleIncomingMessageAsTapper(socketConnection *websocket.Conn) {

 func initializeDependencies() {
 	dependency.RegisterGenerator(dependency.ServiceMapGeneratorDependency, func() interface{} { return servicemap.GetDefaultServiceMapInstance() })
-	dependency.RegisterGenerator(dependency.OasGeneratorDependency, func() interface{} { return oas.GetDefaultOasGeneratorInstance(nil) })
+	dependency.RegisterGenerator(dependency.OasGeneratorDependency, func() interface{} { return oas.GetDefaultOasGeneratorInstance() })
 	dependency.RegisterGenerator(dependency.EntriesProvider, func() interface{} { return &entries.BasenineEntriesProvider{} })
 	dependency.RegisterGenerator(dependency.EntriesSocketStreamer, func() interface{} { return &api.BasenineEntryStreamer{} })
 	dependency.RegisterGenerator(dependency.EntryStreamerSocketConnector, func() interface{} { return &api.DefaultEntryStreamerSocketConnector{} })
--- a/agent/pkg/controllers/oas_controller_test.go
+++ b/agent/pkg/controllers/oas_controller_test.go
@@ -58,12 +58,12 @@ func getRecorderAndContext() (*httptest.ResponseRecorder, *gin.Context) {
 		receiveBuffer: bytes.NewBufferString("\n"),
 	}
 	dependency.RegisterGenerator(dependency.OasGeneratorDependency, func() interface{} {
-		return oas.GetDefaultOasGeneratorInstance(dummyConn)
+		return oas.GetDefaultOasGeneratorInstance()
 	})

 	recorder := httptest.NewRecorder()
 	c, _ := gin.CreateTestContext(recorder)
-	oas.GetDefaultOasGeneratorInstance(dummyConn).Start()
-	oas.GetDefaultOasGeneratorInstance(dummyConn).GetServiceSpecs().Store("some", oas.NewGen("some"))
+	oas.GetDefaultOasGeneratorInstance().Start(dummyConn)
+	oas.GetDefaultOasGeneratorInstance().GetServiceSpecs().Store("some", oas.NewGen("some"))
 	return recorder, c
 }
--- a/agent/pkg/oas/oas_generator.go
+++ b/agent/pkg/oas/oas_generator.go
@@ -19,46 +19,57 @@ var (
 )

 type OasGenerator interface {
-	Start()
+	Start(conn *basenine.Connection)
 	Stop()
 	IsStarted() bool
-	Reset()
 	GetServiceSpecs() *sync.Map
+	SetEntriesQuery(query string) bool
 }

 type defaultOasGenerator struct {
-	started      bool
-	ctx          context.Context
-	cancel       context.CancelFunc
-	serviceSpecs *sync.Map
-	dbConn       *basenine.Connection
+	started       bool
+	ctx           context.Context
+	cancel        context.CancelFunc
+	serviceSpecs  *sync.Map
+	dbConn        *basenine.Connection
+	entriesQuery string
 }

-func GetDefaultOasGeneratorInstance(conn *basenine.Connection) *defaultOasGenerator {
+func GetDefaultOasGeneratorInstance() *defaultOasGenerator {
 	syncOnce.Do(func() {
-		if conn == nil {
-			c, err := basenine.NewConnection(shared.BasenineHost, shared.BaseninePort)
-			if err != nil {
-				panic(err)
-			}
-			conn = c
-		}
-
-		instance = NewDefaultOasGenerator(conn)
+		instance = NewDefaultOasGenerator()
 		logger.Log.Debug("OAS Generator Initialized")
 	})
 	return instance
 }

-func (g *defaultOasGenerator) Start() {
+func (g *defaultOasGenerator) Start(conn *basenine.Connection) {
 	if g.started {
 		return
 	}
+
+	if g.dbConn == nil {
+		if conn == nil {
+			logger.Log.Infof("Creating new DB connection for OAS generator to address %s:%s", shared.BasenineHost, shared.BaseninePort)
+			newConn, err := basenine.NewConnection(shared.BasenineHost, shared.BaseninePort)
+			if err != nil {
+				logger.Log.Error("Error connecting to DB for OAS generator, err: %v", err)
+				return
+			}
+
+			conn = newConn
+		}
+
+		g.dbConn = conn
+	}
+
 	ctx, cancel := context.WithCancel(context.Background())
 	g.cancel = cancel
 	g.ctx = ctx
 	g.serviceSpecs = &sync.Map{}
+
 	g.started = true
+
 	go g.runGenerator()
 }

@@ -66,8 +77,15 @@ func (g *defaultOasGenerator) Stop() {
 	if !g.started {
 		return
 	}
+
+	if g.dbConn != nil {
+		g.dbConn.Close()
+		g.dbConn = nil
+	}
+
 	g.cancel()
-	g.Reset()
+	g.reset()
+
 	g.started = false
 }

@@ -76,16 +94,19 @@ func (g *defaultOasGenerator) IsStarted() bool {
 }

 func (g *defaultOasGenerator) runGenerator() {
-	// Make []byte channels to recieve the data and the meta
+	// Make []byte channels to receive the data and the meta
 	dataChan := make(chan []byte)
 	metaChan := make(chan []byte)

-	g.dbConn.Query("", dataChan, metaChan)
+	logger.Log.Infof("Querying DB for OAS generator with query '%s'", g.entriesQuery)
+	g.dbConn.Query(g.entriesQuery, dataChan, metaChan)

 	for {
 		select {
 		case <-g.ctx.Done():
 			logger.Log.Infof("OAS Generator was canceled")
+			close(dataChan)
+			close(metaChan)
 			return

 		case metaBytes, ok := <-metaChan:
@@ -173,7 +194,7 @@ func (g *defaultOasGenerator) getGen(dest string, urlStr string) *SpecGen {
 	return gen
 }

-func (g *defaultOasGenerator) Reset() {
+func (g *defaultOasGenerator) reset() {
 	g.serviceSpecs = &sync.Map{}
 }

@@ -181,12 +202,18 @@ func (g *defaultOasGenerator) GetServiceSpecs() *sync.Map {
 	return g.serviceSpecs
 }

-func NewDefaultOasGenerator(c *basenine.Connection) *defaultOasGenerator {
+func (g *defaultOasGenerator) SetEntriesQuery(query string) bool {
+	changed := g.entriesQuery != query
+	g.entriesQuery = query
+	return changed
+}
+
+func NewDefaultOasGenerator() *defaultOasGenerator {
 	return &defaultOasGenerator{
 		started:      false,
 		ctx:          nil,
 		cancel:       nil,
 		serviceSpecs: nil,
-		dbConn:       c,
+		dbConn:       nil,
 	}
 }
--- a/agent/pkg/oas/oas_generator_test.go
+++ b/agent/pkg/oas/oas_generator_test.go
@@ -3,13 +3,11 @@ package oas
 import (
 	"encoding/json"
 	"github.com/up9inc/mizu/agent/pkg/har"
-	"sync"
 	"testing"
 )

 func TestOASGen(t *testing.T) {
 	gen := new(defaultOasGenerator)
-	gen.serviceSpecs = &sync.Map{}

 	e := new(har.Entry)
 	err := json.Unmarshal([]byte(`{"startedDateTime": "20000101","request": {"url": "https://host/path", "method": "GET"}, "response": {"status": 200}}`), e)
@@ -21,6 +19,9 @@ func TestOASGen(t *testing.T) {
 		Destination: "some",
 		Entry:       *e,
 	}
+
+	dummyConn := GetFakeDBConn(`{"startedDateTime": "20000101","request": {"url": "https://host/path", "method": "GET"}, "response": {"status": 200}}`)
+	gen.Start(dummyConn)
 	gen.handleHARWithSource(ews)
 	g, ok := gen.serviceSpecs.Load("some")
 	if !ok {
@@ -33,4 +34,9 @@ func TestOASGen(t *testing.T) {
 	}
 	specText, _ := json.Marshal(spec)
 	t.Log(string(specText))
+
+	if !gen.IsStarted() {
+		t.Errorf("Should be started")
+	}
+	gen.Stop()
 }
--- a/agent/pkg/oas/specgen_test.go
+++ b/agent/pkg/oas/specgen_test.go
@@ -1,8 +1,10 @@
 package oas

 import (
+	"bytes"
 	"encoding/json"
 	"io/ioutil"
+	"net"
 	"os"
 	"regexp"
 	"strings"
@@ -11,13 +13,22 @@ import (
 	"time"

 	"github.com/chanced/openapi"
-	"github.com/op/go-logging"
 	"github.com/up9inc/mizu/shared/logger"
 	"github.com/wI2L/jsondiff"

+	basenine "github.com/up9inc/basenine/client/go"
 	"github.com/up9inc/mizu/agent/pkg/har"
 )

+func GetFakeDBConn(send string) *basenine.Connection {
+	dummyConn := new(basenine.Connection)
+	dummyConn.Conn = FakeConn{
+		sendBuffer:    bytes.NewBufferString(send),
+		receiveBuffer: bytes.NewBufferString(""),
+	}
+	return dummyConn
+}
+
 // if started via env, write file into subdir
 func outputSpec(label string, spec *openapi.OpenAPI, t *testing.T) string {
 	content, err := json.MarshalIndent(spec, "", "  ")
@@ -43,14 +54,14 @@ func outputSpec(label string, spec *openapi.OpenAPI, t *testing.T) string {
 }

 func TestEntries(t *testing.T) {
-	logger.InitLoggerStd(logging.INFO)
+	//logger.InitLoggerStd(logging.INFO) causes race condition
 	files, err := getFiles("./test_artifacts/")
 	if err != nil {
 		t.Log(err)
 		t.FailNow()
 	}

-	gen := NewDefaultOasGenerator(nil)
+	gen := NewDefaultOasGenerator()
 	gen.serviceSpecs = new(sync.Map)
 	loadStartingOAS("test_artifacts/catalogue.json", "catalogue", gen.serviceSpecs)
 	loadStartingOAS("test_artifacts/trcc.json", "trcc-api-service", gen.serviceSpecs)
@@ -124,7 +135,7 @@ func TestEntries(t *testing.T) {
 }

 func TestFileSingle(t *testing.T) {
-	gen := NewDefaultOasGenerator(nil)
+	gen := NewDefaultOasGenerator()
 	gen.serviceSpecs = new(sync.Map)
 	// loadStartingOAS()
 	file := "test_artifacts/params.har"
@@ -214,7 +225,7 @@ func loadStartingOAS(file string, label string, specs *sync.Map) {
 }

 func TestEntriesNegative(t *testing.T) {
-	gen := NewDefaultOasGenerator(nil)
+	gen := NewDefaultOasGenerator()
 	gen.serviceSpecs = new(sync.Map)
 	files := []string{"invalid"}
 	_, err := feedEntries(files, false, gen)
@@ -225,7 +236,7 @@ func TestEntriesNegative(t *testing.T) {
 }

 func TestEntriesPositive(t *testing.T) {
-	gen := NewDefaultOasGenerator(nil)
+	gen := NewDefaultOasGenerator()
 	gen.serviceSpecs = new(sync.Map)
 	files := []string{"test_artifacts/params.har"}
 	_, err := feedEntries(files, false, gen)
@@ -267,3 +278,17 @@ func TestLoadValid3_1(t *testing.T) {
 		t.FailNow()
 	}
 }
+
+type FakeConn struct {
+	sendBuffer    *bytes.Buffer
+	receiveBuffer *bytes.Buffer
+}
+
+func (f FakeConn) Read(p []byte) (int, error)       { return f.sendBuffer.Read(p) }
+func (f FakeConn) Write(p []byte) (int, error)      { return f.receiveBuffer.Write(p) }
+func (FakeConn) Close() error                       { return nil }
+func (FakeConn) LocalAddr() net.Addr                { return nil }
+func (FakeConn) RemoteAddr() net.Addr               { return nil }
+func (FakeConn) SetDeadline(t time.Time) error      { return nil }
+func (FakeConn) SetReadDeadline(t time.Time) error  { return nil }
+func (FakeConn) SetWriteDeadline(t time.Time) error { return nil }
--- a/agent/pkg/servicemap/servicemap.go
+++ b/agent/pkg/servicemap/servicemap.go
@@ -1,6 +1,7 @@
 package servicemap

 import (
+	"github.com/jinzhu/copier"
 	"sync"

 	"github.com/up9inc/mizu/shared/logger"
@@ -183,8 +184,12 @@ func (s *defaultServiceMap) NewTCPEntry(src *tapApi.TCP, dst *tapApi.TCP, p *tap
 	if len(src.Name) == 0 {
 		srcEntry = &entryData{
 			key:   key(src.IP),
-			entry: src,
+			entry: &tapApi.TCP{},
 		}
+		if err := copier.Copy(srcEntry.entry, src); err != nil {
+			logger.Log.Errorf("Error while copying src entry into src entry data")
+		}
+
 		srcEntry.entry.Name = UnresolvedNodeName
 	} else {
 		srcEntry = &entryData{
@@ -196,8 +201,12 @@ func (s *defaultServiceMap) NewTCPEntry(src *tapApi.TCP, dst *tapApi.TCP, p *tap
 	if len(dst.Name) == 0 {
 		dstEntry = &entryData{
 			key:   key(dst.IP),
-			entry: dst,
+			entry: &tapApi.TCP{},
 		}
+		if err := copier.Copy(dstEntry.entry, dst); err != nil {
+			logger.Log.Errorf("Error while copying dst entry into dst entry data")
+		}
+
 		dstEntry.entry.Name = UnresolvedNodeName
 	} else {
 		dstEntry = &entryData{
@@ -224,7 +233,8 @@ func (s *defaultServiceMap) GetStatus() ServiceMapStatus {
 }

 func (s *defaultServiceMap) GetNodes() []ServiceMapNode {
-	var nodes []ServiceMapNode
+	nodes := []ServiceMapNode{}
+
 	for i, n := range s.graph.Nodes {
 		nodes = append(nodes, ServiceMapNode{
 			Id:       n.id,
@@ -234,11 +244,13 @@ func (s *defaultServiceMap) GetNodes() []ServiceMapNode {
 			Count:    n.count,
 		})
 	}
+
 	return nodes
 }

 func (s *defaultServiceMap) GetEdges() []ServiceMapEdge {
-	var edges []ServiceMapEdge
+	edges := []ServiceMapEdge{}
+
 	for u, m := range s.graph.Edges {
 		for v := range m {
 			for _, p := range s.graph.Edges[u][v].data {
@@ -263,6 +275,7 @@ func (s *defaultServiceMap) GetEdges() []ServiceMapEdge {
 			}
 		}
 	}
+
 	return edges
 }

--- a/agent/pkg/servicemap/servicemap_test.go
+++ b/agent/pkg/servicemap/servicemap_test.go
@@ -403,10 +403,10 @@ func (s *ServiceMapEnabledSuite) TestServiceMap() {
 	assert.Equal(0, status.EdgeCount)

 	// Nodes after reset
-	assert.Equal([]ServiceMapNode(nil), nodes)
+	assert.Equal([]ServiceMapNode{}, nodes)

 	// Edges after reset
-	assert.Equal([]ServiceMapEdge(nil), edges)
+	assert.Equal([]ServiceMapEdge{}, edges)
 }

 func TestServiceMapSuite(t *testing.T) {
--- a/tap/api/api.go
+++ b/tap/api/api.go
@@ -161,7 +161,7 @@ type Entry struct {
 	Capture                Capture                `json:"capture"`
 	Source                 *TCP                   `json:"src"`
 	Destination            *TCP                   `json:"dst"`
-	Namespace              string                 `json:"namespace,omitempty"`
+	Namespace              string                 `json:"namespace"`
 	Outgoing               bool                   `json:"outgoing"`
 	Timestamp              int64                  `json:"timestamp"`
 	StartTime              time.Time              `json:"startTime"`
--- a/tap/extensions/amqp/Makefile
+++ b/tap/extensions/amqp/Makefile
@@ -13,4 +13,4 @@ test-pull-bin:

 test-pull-expect:
 	@mkdir -p expect
-	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect5/amqp/\* expect
+	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect6/amqp/\* expect
--- a/tap/extensions/http/Makefile
+++ b/tap/extensions/http/Makefile
@@ -13,4 +13,4 @@ test-pull-bin:

 test-pull-expect:
 	@mkdir -p expect
-	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect5/http/\* expect
+	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect6/http/\* expect
--- a/tap/extensions/http/http2_assembler.go
+++ b/tap/extensions/http/http2_assembler.go
@@ -28,26 +28,6 @@ const protoMinorHTTP2 = 0

 var maxHTTP2DataLen = 1 * 1024 * 1024 // 1MB

-var grpcStatusCodes = []string{
-	"OK",
-	"CANCELLED",
-	"UNKNOWN",
-	"INVALID_ARGUMENT",
-	"DEADLINE_EXCEEDED",
-	"NOT_FOUND",
-	"ALREADY_EXISTS",
-	"PERMISSION_DENIED",
-	"RESOURCE_EXHAUSTED",
-	"FAILED_PRECONDITION",
-	"ABORTED",
-	"OUT_OF_RANGE",
-	"UNIMPLEMENTED",
-	"INTERNAL",
-	"UNAVAILABLE",
-	"DATA_LOSS",
-	"UNAUTHENTICATED",
-}
-
 type messageFragment struct {
 	headers []hpack.HeaderField
 	data    []byte
@@ -142,18 +122,8 @@ func (ga *Http2Assembler) readMessage() (streamID uint32, messageHTTP1 interface

 	// gRPC detection
 	grpcStatus := headersHTTP1.Get("Grpc-Status")
-	if grpcStatus != "" {
+	if grpcStatus != "" || strings.Contains(headersHTTP1.Get("Content-Type"), "application/grpc") {
 		isGrpc = true
-		status = grpcStatus
-	}
-
-	if strings.Contains(headersHTTP1.Get("Content-Type"), "application/grpc") {
-		isGrpc = true
-		grpcPath := headersHTTP1.Get(":path")
-		pathSegments := strings.Split(grpcPath, "/")
-		if len(pathSegments) > 0 {
-			method = pathSegments[len(pathSegments)-1]
-		}
 	}

 	if method != "" {
--- a/tap/extensions/http/main.go
+++ b/tap/extensions/http/main.go
@@ -248,11 +248,6 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, resolvedSource string,
 	reqDetails["_queryStringMerged"] = mapSliceMergeRepeatedKeys(reqDetails["_queryString"].([]interface{}))
 	reqDetails["queryString"] = mapSliceRebuildAsMap(reqDetails["_queryStringMerged"].([]interface{}))

-	statusCode := int(resDetails["status"].(float64))
-	if item.Protocol.Abbreviation == "gRPC" {
-		resDetails["statusText"] = grpcStatusCodes[statusCode]
-	}
-
 	elapsedTime := item.Pair.Response.CaptureTime.Sub(item.Pair.Request.CaptureTime).Round(time.Millisecond).Milliseconds()
 	if elapsedTime < 0 {
 		elapsedTime = 0
--- a/tap/extensions/kafka/Makefile
+++ b/tap/extensions/kafka/Makefile
@@ -13,4 +13,4 @@ test-pull-bin:

 test-pull-expect:
 	@mkdir -p expect
-	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect5/kafka/\* expect
+	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect6/kafka/\* expect
--- a/tap/extensions/redis/Makefile
+++ b/tap/extensions/redis/Makefile
@@ -13,4 +13,4 @@ test-pull-bin:

 test-pull-expect:
 	@mkdir -p expect
-	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect5/redis/\* expect
+	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect6/redis/\* expect
--- a/ui-common/package.json
+++ b/ui-common/package.json
@@ -26,15 +26,16 @@
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@types/jest": "^26.0.22",
+    "@types/node": "^12.20.10",
    "node-sass": "^6.0.0",
    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "recoil": "^0.5.2",
    "react-copy-to-clipboard": "^5.0.3",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^12.20.10"
+    "react-dom": "^17.0.2",
+    "recoil": "^0.5.2"
  },
  "dependencies": {
+    "@craco/craco": "^6.4.3",
    "@types/lodash": "^4.14.179",
    "@uiw/react-textarea-code-editor": "^1.4.12",
    "axios": "^0.25.0",
@@ -58,8 +59,7 @@
    "redoc": "^2.0.0-rc.59",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.1.1",
-    "xml-formatter": "^2.6.0",
-    "@craco/craco": "^6.4.3"
+    "xml-formatter": "^2.6.0"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.1.3",
@@ -90,4 +90,4 @@
  "files": [
    "dist"
  ]
-}
+}
--- a/ui-common/src/components/OasModal/OasModal.tsx
+++ b/ui-common/src/components/OasModal/OasModal.tsx
@@ -8,6 +8,7 @@ import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
 import { Select } from "../UI/Select";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";


 const modalStyle = {
@@ -43,7 +44,7 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
      const data = await getOasByService(selectedService ? selectedService : oasServices[0]);
      setSelectedServiceSpec(data);
    } catch (e) {
-      toast.error("Error occurred while fetching service OAS spec");
+      toast.error("Error occurred while fetching service OAS spec", { containerId: TOAST_CONTAINER_ID });
      console.error(e);
    }
  };
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
@@ -0,0 +1,58 @@
+@import "../../variables.module"
+
+.modalContainer
+  display: flex
+  width: 100%
+  height: 100%
+
+.graphSection
+  flex: 85%
+
+.filterSection
+  flex: 15%
+  height: 100%
+
+  .filters table
+    margin-top: 0px
+
+    tr
+      border-style: none
+
+    td
+      color: #8f9bb2
+      font-size: 11px
+      font-weight: 600
+      padding-top: 2px
+      padding-bottom: 2px
+
+.colorBlock
+  display: inline-block
+  height: 15px
+  width: 50px
+
+.filterWrapper
+  height: 100%
+  display: flex
+  flex-direction: column
+  margin-right: 10px
+  width: 100%
+
+.servicesFilterSearch
+  width: calc(100% - 10px)
+  max-width: 300px
+  box-shadow: 0px 1px 5px #979797
+  margin-left: 10px
+  margin-bottom: 5px
+
+.servicesFilter
+  margin-top: 15px
+  height: 100%
+  overflow: hidden
+
+  & .servicesFilterList
+    overflow-y: auto
+    height: calc(100% - 30px - 5px)
+
+.separtorLine
+  margin-top: 10px
+  border: 1px solid #E9EBF8
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
@@ -0,0 +1,225 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Box, Fade, Modal, Backdrop, Button } from "@material-ui/core";
+import { toast } from "react-toastify";
+import spinnerStyle from '../UI/style/Spinner.module.sass';
+import spinnerImg from 'assets/spinner.svg';
+import Graph from "react-graph-vis";
+import debounce from 'lodash/debounce';
+import ServiceMapOptions from './ServiceMapOptions'
+import { useCommonStyles } from "../../helpers/commonStyle";
+import refreshIcon from "assets/refresh.svg";
+import closeIcon from "assets/close.svg"
+import styles from './ServiceMapModal.module.sass'
+import SelectList from "../UI/SelectList";
+import { GraphData, ServiceMapGraph } from "./ServiceMapModalTypes"
+import { Utils } from "../../helpers/Utils";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";
+import Resizeable from "../UI/Resizeable"
+
+const modalStyle = {
+    position: 'absolute',
+    top: '6%',
+    left: '50%',
+    transform: 'translate(-50%, 0%)',
+    width: '89vw',
+    height: '82vh',
+    bgcolor: 'background.paper',
+    borderRadius: '5px',
+    boxShadow: 24,
+    p: 4,
+    color: '#000',
+    padding: "25px 15px"
+};
+
+interface LegentLabelProps {
+    color: string,
+    name: string
+}
+
+const LegentLabel: React.FC<LegentLabelProps> = ({ color, name }) => {
+    return <React.Fragment>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <span title={name}>{name}</span>
+            <span style={{ background: color }} className={styles.colorBlock}></span>
+        </div>
+    </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: "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" /> },]
+
+
+interface ServiceMapModalProps {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    getServiceMapDataApi: () => Promise<any>
+}
+
+export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClose, getServiceMapDataApi }) => {
+    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 [checkedServices, setCheckedServices] = useState([])
+    const [serviceMapApiData, setServiceMapApiData] = useState<ServiceMapGraph>({ edges: [], nodes: [] })
+    const [servicesSearchVal, setServicesSearchVal] = useState("")
+    const [graphOptions, setGraphOptions] = useState(ServiceMapOptions);
+
+    const getServiceMapData = useCallback(async () => {
+        try {
+            setIsLoading(true)
+
+            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)
+            }
+
+            setGraphData(newGraphData)
+        } catch (ex) {
+            toast.error("An error occurred while loading Mizu Service Map, see console for mode details", { containerId: TOAST_CONTAINER_ID });
+            console.error(ex);
+        } finally {
+            setIsLoading(false)
+        }
+        // eslint-disable-next-line
+    }, [isOpen])
+
+    const mapNodesDatatoGraph = node => {
+        return {
+            id: node.id,
+            value: node.count,
+            label: (node.entry.name === "unresolved") ? node.name : `${node.entry.name} (${node.name})`,
+            title: "Count: " + node.name,
+            isResolved: node.entry.resolved
+        }
+    }
+
+    const mapEdgesDatatoGraph = edge => {
+        return {
+            from: edge.source.id,
+            to: edge.destination.id,
+            value: edge.count,
+            label: edge.count.toString(),
+            color: {
+                color: edge.protocol.backgroundColor,
+                highlight: edge.protocol.backgroundColor
+            },
+        }
+    }
+    const mapToKeyValForFilter = (arr) => arr.map(mapNodesDatatoGraph)
+        .map((edge) => { return { key: edge.label, value: edge.label } })
+        .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)
+        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)
+        }
+        setGraphData(newGraphData);
+    }
+
+    useEffect(() => {
+        if (checkedServices.length > 0) return // only after refresh
+        filterServiceMap(checkedProtocols, getServicesForFilter.map(x => x.key).filter(serviceName => !Utils.isIpAddress(serviceName)))
+    }, [getServicesForFilter])
+
+    useEffect(() => {
+        getServiceMapData()
+    }, [getServiceMapData])
+
+    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])
+
+    const refreshServiceMap = debounce(() => {
+        getServiceMapData();
+    }, 500);
+
+    return (
+        <Modal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={isOpen}
+            onClose={onClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{ timeout: 500 }}>
+            <Fade in={isOpen}>
+                <Box sx={modalStyle}>
+                    <div className={styles.modalContainer}>
+                        <div className={styles.filterSection}>
+                            <Resizeable minWidth={170}>
+                                <div className={styles.filterWrapper}>
+                                    <div className={styles.protocolsFilterList}>
+                                        <SelectList items={protocols} checkBoxWidth="5%" tableName={"Protocols"} multiSelect={true}
+                                            checkedValues={checkedProtocols} setCheckedValues={filterServiceMap} 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)} />
+                                        </div>
+                                    </div>
+                                </div>
+                            </Resizeable>
+                        </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()} style={{ cursor: "pointer", userSelect: "none" }}></img>
+                            </div>
+                            {isLoading && <div className={spinnerStyle.spinnerContainer}>
+                                <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
+                            </div>}
+                            {!isLoading && <div style={{ height: "100%", width: "100%" }}>
+                                <Graph
+                                    graph={graphData}
+                                    options={graphOptions}
+                                />
+                            </div>
+                            }
+                        </div>
+                    </div>
+                </Box>
+            </Fade>
+        </Modal>
+    );
+}
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModalTypes.ts
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapModalTypes.ts
@@ -0,0 +1,60 @@
+export interface GraphData {
+    nodes: Node[];
+    edges: Edge[];
+}
+
+export interface Node {
+    id: number;
+    value: number;
+    label: string;
+    title?: string;
+    color?: object;
+}
+
+export interface Edge {
+    from: number;
+    to: number;
+    value: number;
+    label: string;
+    title?: string;
+    color?: object;
+}
+
+export interface ServiceMapNode {
+    id: number;
+    name: string;
+    entry: Entry;
+    count: number;
+    resolved: boolean;
+}
+
+export interface ServiceMapEdge {
+    source: ServiceMapNode;
+    destination: ServiceMapNode;
+    count: number;
+    protocol: Protocol;
+}
+
+export interface ServiceMapGraph {
+    nodes: ServiceMapNode[];
+    edges: ServiceMapEdge[];
+}
+
+export interface Entry {
+    ip: string;
+    port: string;
+    name: string;
+}
+
+export interface Protocol {
+    name: string;
+    abbr: string;
+    macro: string;
+    version: string;
+    backgroundColor: string;
+    foregroundColor: string;
+    fontSize: number;
+    referenceLink: string;
+    ports: string[];
+    priority: number;
+}
--- a/ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts
@@ -0,0 +1,83 @@
+const ServiceMapOptions = {
+    physics: {
+        enabled: true,
+        solver: 'barnesHut',
+        barnesHut: {
+            theta: 0.5,
+            gravitationalConstant: -2000,
+            centralGravity: 0.3,
+            springLength: 180,
+            springConstant: 0.04,
+            damping: 0.09,
+            avoidOverlap: 0
+        },
+    },
+    layout: {
+        hierarchical: false,
+        randomSeed: 1 // always on node 1
+    },
+    nodes: {
+        shape: 'dot',
+        chosen: true,
+        color: {
+            background: '#27AE60',
+            border: '#000000',
+            highlight: {
+                background: '#27AE60',
+                border: '#000000',
+            },
+        },
+        font: {
+            color: '#343434',
+            size: 14, // px
+            face: 'arial',
+            background: 'none',
+            strokeWidth: 0, // px
+            strokeColor: '#ffffff',
+            align: 'center',
+            multi: false
+        },
+        borderWidth: 1.5,
+        borderWidthSelected: 2.5,
+        labelHighlightBold: true,
+        opacity: 1,
+        shadow: true,
+    },
+    edges: {
+        chosen: true,
+        dashes: false,
+        arrowStrikethrough: false,
+        arrows: {
+            to: {
+                enabled: true,
+            },
+            middle: {
+                enabled: false,
+            },
+            from: {
+                enabled: false,
+            }
+        },
+        smooth: {
+            enabled: true,
+            type: 'dynamic',
+            roundness: 1.0
+        },
+        font: {
+            color: '#343434',
+            size: 12, // px
+            face: 'arial',
+            background: 'none',
+            strokeWidth: 2, // px
+            strokeColor: '#ffffff',
+            align: 'horizontal',
+            multi: false,
+        },
+        labelHighlightBold: true,
+        selectionWidth: 1,
+        shadow: true,
+    },
+    autoResize: true,
+};
+
+export default ServiceMapOptions
--- a/ui-common/src/components/ServiceMapModal/assets/close.svg
+++ b/ui-common/src/components/ServiceMapModal/assets/close.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.591 9.99997C18.591 14.7446 14.7447 18.5909 10.0001 18.5909C5.25546 18.5909 1.40918 14.7446 1.40918 9.99997C1.40918 5.25534 5.25546 1.40906 10.0001 1.40906C14.7447 1.40906 18.591 5.25534 18.591 9.99997Z" fill="#E9EBF8" stroke="#BCCEFD"/>
+<path d="M13.1604 8.23038L11.95 7.01994L10.1392 8.83078L8.32832 7.01994L7.11789 8.23038L8.92872 10.0412L7.12046 11.8495L8.33089 13.0599L10.1392 11.2517L11.9474 13.0599L13.1579 11.8495L11.3496 10.0412L13.1604 8.23038Z" fill="#205CF5"/>
+</svg>
--- a/ui-common/src/components/ServiceMapModal/assets/refresh.svg
+++ b/ui-common/src/components/ServiceMapModal/assets/refresh.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8337 11.9167H7.69308L7.69416 11.907C7.83561 11.2143 8.11247 10.5564 8.50883 9.97105C9.09865 9.10202 9.92598 8.42097 10.8922 8.00913C11.2193 7.87046 11.5606 7.7643 11.9083 7.69388C12.6297 7.54762 13.3731 7.54762 14.0945 7.69388C15.1312 7.90631 16.0825 8.41908 16.8299 9.1683L18.3639 7.63863C17.6725 6.94707 16.8546 6.39501 15.9546 6.01255C15.4956 5.81823 15.0184 5.67016 14.53 5.57055C13.5223 5.36581 12.4838 5.36581 11.4761 5.57055C10.9873 5.67057 10.5098 5.819 10.0504 6.01363C8.69682 6.58791 7.53808 7.54123 6.71374 8.7588C6.15895 9.5798 5.77099 10.5019 5.57191 11.4725C5.54158 11.6188 5.52533 11.7683 5.50366 11.9167H2.16699L6.50033 16.25L10.8337 11.9167ZM15.167 14.0834H18.3076L18.3065 14.092C18.0234 15.4806 17.205 16.7019 16.0282 17.4915C15.443 17.8882 14.7851 18.1651 14.0923 18.3062C13.3713 18.4525 12.6283 18.4525 11.9072 18.3062C11.2146 18.1648 10.5567 17.8879 9.97133 17.4915C9.68383 17.2971 9.41541 17.0758 9.16966 16.8307L7.63783 18.3625C8.32954 19.0539 9.14791 19.6056 10.0482 19.9875C10.5076 20.1825 10.9875 20.331 11.4728 20.4295C12.4801 20.6344 13.5184 20.6344 14.5257 20.4295C16.4676 20.0265 18.1757 18.8819 19.2869 17.2391C19.8412 16.4187 20.2288 15.4974 20.4277 14.5275C20.4569 14.3813 20.4742 14.2318 20.4959 14.0834H23.8337L19.5003 9.75005L15.167 14.0834Z" fill="#205CF5"/>
+</svg>
--- a/ui-common/src/components/ServiceMapModal/assets/spinner.svg
+++ b/ui-common/src/components/ServiceMapModal/assets/spinner.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#1d3f72" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(275.903 50 50)">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>
--- a/ui-common/src/components/TrafficViewer/EntriesList.tsx
+++ b/ui-common/src/components/TrafficViewer/EntriesList.tsx
@@ -55,7 +55,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({
  const [startTime, setStartTime] = useState(0);
  const [truncatedTimestamp, setTruncatedTimestamp] = useState(0);

-  const leftOffBottom = entries.length > 0 ? entries[entries.length - 1].id : -1;
+  const leftOffBottom = entries.length > 0 ? entries[entries.length - 1].id + 1 : -1;

  useEffect(() => {
    const list = document.getElementById('list').firstElementChild;
@@ -98,6 +98,9 @@ export const EntriesList: React.FC<EntriesListProps> = ({
    setIsLoadingTop(false);

    const newEntries = [...data.data.reverse(), ...entries];
+    if(newEntries.length > 10000) {
+      newEntries.splice(10000, newEntries.length - 10000)
+    }
    setEntries(newEntries);

    setQueriedTotal(data.meta.total);
@@ -126,9 +129,9 @@ export const EntriesList: React.FC<EntriesListProps> = ({
          const entry = message.data;
          if (!focusedEntryId) setFocusedEntryId(entry.id.toString());
          const newEntries = [...entries, entry];
-          if (newEntries.length === 10001) {
-            setLeftOffTop(newEntries[0].entry.id);
-            newEntries.shift();
+          if (newEntries.length > 10000) {
+            setLeftOffTop(newEntries[0].id);
+            newEntries.splice(0, newEntries.length - 10000)
            setNoMoreDataTop(false);
          }
          setEntries(newEntries);
--- a/ui-common/src/components/TrafficViewer/EntryDetailed.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryDetailed.tsx
@@ -89,12 +89,13 @@ const EntryTitle: React.FC<any> = ({ protocol, data, elapsedTime }) => {
    </div>;
 };

-const EntrySummary: React.FC<any> = ({ entry }) => {
+const EntrySummary: React.FC<any> = ({ entry, namespace }) => {
    return <EntryItem
        key={`entry-${entry.id}`}
        entry={entry}
        style={{}}
        headingMode={true}
+        namespace={namespace}
    />;
 };

@@ -140,7 +141,7 @@ export const EntryDetailed = () => {
            data={entryData.data}
            elapsedTime={entryData.data.elapsedTime}
        />}
-        {!isLoading && entryData && <EntrySummary entry={entryData.base} />}
+        {!isLoading && entryData && <EntrySummary entry={entryData.base} namespace={entryData.data.namespace} />}
        <React.Fragment>
            {!isLoading && entryData && <EntryViewer
                representation={entryData.representation}
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
@@ -52,6 +52,7 @@ interface EntryProps {
    entry: Entry;
    style: object;
    headingMode: boolean;
+    namespace?: string;
 }

 enum CaptureTypes {
@@ -62,7 +63,7 @@ enum CaptureTypes {
    Ebpf = "ebpf",
 }

-export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) => {
+export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode, namespace}) => {

    const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
    const [queryState, setQuery] = useRecoilState(queryAtom);
@@ -224,6 +225,19 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
                : ""
            }
            <div className={styles.separatorRight}>
+                {headingMode ? <Queryable
+                        query={`namespace == "${namespace}"`}
+                        displayIconOnMouseOver={true}
+                        flipped={true}
+                        iconStyle={{marginRight: "16px"}}
+                >
+                    <span
+                        className={`${styles.tcpInfo} ${styles.ip}`}
+                        title="Namespace"
+                    >
+                        {namespace}
+                    </span>
+                </Queryable> : null}
                <Queryable
                        query={`src.ip == "${entry.src.ip}"`}
                        displayIconOnMouseOver={true}
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass
@@ -6,7 +6,7 @@
    flex-direction: column
    overflow: hidden
    flex-grow: 1
-    height: calc(100vh - 70px)
+    height: calc(100% - 70px)

    .TrafficPageHeader
        padding: 20px 24px
@@ -16,9 +16,8 @@
        justify-content: space-between

        .TrafficPageStreamStatus
-                display: flex
-                align-items: center
-                
+            display: flex
+            align-items: center

 .TrafficPageHeaderImage
    width: 22px
@@ -113,4 +112,4 @@
 .playPauseIcon
    cursor: pointer
    margin-right: 15px
-    height: 30px
+    height: 30px
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
@@ -201,7 +201,9 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({

  useEffect(() => {
    return () => {
-      ws.current.close();
+      if (ws?.current?.readyState === WebSocket.OPEN) {
+        ws.current.close();
+      }
    };
  }, []);

--- a/ui-common/src/components/UI/NoDataMessage.tsx
+++ b/ui-common/src/components/UI/NoDataMessage.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import circleImg from 'assets/dotted-circle.svg';
+import styles from './style/NoDataMessage.module.sass'
+
+export interface Props {
+    messageText: string;
+}
+
+const NoDataMessage: React.FC<Props> = ({ messageText = "No data found" }) => {
+    return (
+        <div data-cy="noDataMessage" className={styles.messageContainer__noData}>
+            <div className={styles.container}>
+                <img src={circleImg} alt="No data Found"></img>
+                <div className={styles.messageContainer__noDataMessage}>{messageText}</div>
+            </div>
+        </div>
+    );
+};
+
+export default NoDataMessage;
--- a/ui-common/src/components/UI/Radio.tsx
+++ b/ui-common/src/components/UI/Radio.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+export interface Props {
+    checked: boolean;
+    onToggle: (checked: boolean) => any;
+    disabled?: boolean;
+}
+
+const Radio: React.FC<Props> = ({ checked, onToggle, disabled, ...props }) => {
+    return (
+        <div>
+            <input style={!disabled ? { cursor: "pointer" } : {}} type="radio" checked={checked} disabled={disabled} onChange={(event) => onToggle(event.target.checked)} {...props} />
+        </div>
+    );
+};
+
+export default Radio;
--- a/ui-common/src/components/UI/Resizeable.tsx
+++ b/ui-common/src/components/UI/Resizeable.tsx
@@ -0,0 +1,61 @@
+import React, { useRef, useState } from "react";
+
+import styles from './style/Resizeable.module.sass'
+
+export interface Props {
+    children
+    minWidth: number
+}
+
+const Resizeable: React.FC<Props> = ({ children, minWidth }) => {
+    const resizeble = useRef(null)
+    let mousePos = { x: 0, y: 0 }
+    let elementDimention = { w: 0, h: 0 }
+    let isPressed = false
+    const [elemWidth, setElemWidth] = useState(resizeble?.current?.style?.width)
+
+    const mouseDownHandler = function (e) {
+        // Get the current mouse position
+        mousePos = { x: e.clientX, y: e.clientY }
+        isPressed = true
+
+        // Calculate the dimension of element
+        const styles = resizeble.current.getBoundingClientRect();
+        elementDimention = { w: parseInt(styles.width, 10), h: parseInt(styles.height, 10) }
+        // Attach the listeners to `document`
+        window.addEventListener('mousemove', mouseMoveHandler);
+        window.addEventListener('mouseup', mouseUpHandler);
+    };
+
+
+    const mouseMoveHandler = function (e) {
+        if (isPressed) {
+            // How far the mouse has been moved
+            const dx = e.clientX - mousePos.x;
+            const widthEl = elementDimention.w + dx
+
+            if (widthEl >= minWidth)
+                // Adjust the dimension of element
+                setElemWidth(widthEl)
+        }
+    };
+
+    const mouseUpHandler = function () {
+        window.removeEventListener('mousemove', mouseMoveHandler);
+        window.removeEventListener('mouseup', mouseUpHandler);
+        isPressed = false
+    };
+
+    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>
+    );
+};
+
+export default Resizeable;
--- a/ui-common/src/components/UI/SelectList.tsx
+++ b/ui-common/src/components/UI/SelectList.tsx
@@ -0,0 +1,113 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import Radio from "./Radio";
+import styles from './style/SelectList.module.sass'
+import NoDataMessage from "./NoDataMessage";
+import Checkbox from "./Checkbox";
+
+
+export interface Props {
+    items;
+    tableName: string;
+    checkedValues?: string[];
+    multiSelect: boolean;
+    searchValue?: string;
+    setCheckedValues: (newValues) => void;
+    tableClassName?
+    checkBoxWidth?: string
+}
+
+const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], multiSelect = true, searchValue = "", setCheckedValues, tableClassName,
+    checkBoxWidth = 50 }) => {
+    const noItemsMessage = "No items to show";
+    const [headerChecked, setHeaderChecked] = useState(false)
+
+    const filteredValues = useMemo(() => {
+        return items.filter((listValue) => listValue?.value?.includes(searchValue));
+    }, [items, searchValue])
+
+    const filteredValuesKeys = useMemo(() => {
+        return filteredValues.map(x => x.key)
+    }, [filteredValues])
+
+    const toggleValue = (checkedKey) => {
+        if (!multiSelect) {
+            const newCheckedValues = [];
+            newCheckedValues.push(checkedKey);
+            setCheckedValues(newCheckedValues);
+        }
+        else {
+            const newCheckedValues = [...checkedValues];
+            let index = newCheckedValues.indexOf(checkedKey);
+
+            if (index > -1)
+                newCheckedValues.splice(index, 1);
+            else
+                newCheckedValues.push(checkedKey);
+
+            setCheckedValues(newCheckedValues);
+        }
+    }
+
+    useEffect(() => {
+        const setAllChecked = filteredValuesKeys.every(val => checkedValues.includes(val))
+        setHeaderChecked(setAllChecked)
+    }, [filteredValuesKeys, checkedValues])
+
+    const toggleAll = useCallback((shouldCheckAll) => {
+        let newChecked = checkedValues.filter(x => !filteredValuesKeys.includes(x))
+
+        if (shouldCheckAll) {
+            const disabledItems = items.filter(i => i.disabled).map(x => x.key)
+            newChecked = [...filteredValuesKeys, ...newChecked].filter(x => !disabledItems.includes(x))
+        }
+
+        setCheckedValues(newChecked)
+    }, [searchValue, checkedValues, filteredValuesKeys])
+
+    const dataFieldFunc = (listValue) => listValue.component ? listValue.component :
+        <span className={styles.nowrap} title={listValue.value}>
+            {listValue.value}
+        </span>
+
+    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>
+    </tr> :
+        <tr style={{ borderBottomWidth: "2px" }}>
+            <th>{tableName}</th>
+        </tr>
+
+    const tableBody = filteredValues.length === 0 ?
+        <tr>
+            <td colSpan={2}>
+                <NoDataMessage messageText={noItemsMessage} />
+            </td>
+        </tr>
+        :
+        filteredValues?.map(listValue => {
+            return <tr key={listValue.key}>
+                <td style={{ width: checkBoxWidth }}>
+                    {multiSelect && <Checkbox data-cy={"checkbox-" + listValue.value} disabled={listValue.disabled} checked={checkedValues.includes(listValue.key)} onToggle={() => toggleValue(listValue.key)} />}
+                    {!multiSelect && <Radio data-cy={"radio-" + listValue.value} disabled={listValue.disabled} checked={checkedValues.includes(listValue.key)} onToggle={() => toggleValue(listValue.key)} />}
+                </td>
+                <td>
+                    {dataFieldFunc(listValue)}
+                </td>
+            </tr>
+        }
+        )
+
+    return <div className={tableClassName ? tableClassName + ` ${styles.selectListTable}` : ` ${styles.selectListTable}`}>
+        <table cellPadding={5} style={{ borderCollapse: "collapse" }}>
+            <thead>
+                {tableHead}
+            </thead>
+            <tbody>
+                {tableBody}
+            </tbody>
+        </table>
+    </div>
+}
+
+export default SelectList;
--- a/ui-common/src/components/UI/StatusCode.tsx
+++ b/ui-common/src/components/UI/StatusCode.tsx
@@ -37,9 +37,9 @@ export function getClassification(statusCode: number): string {

    // 1 - 16 HTTP/2 (gRPC) status codes
    // 2xx - 5xx HTTP/1.x status codes
-    if ((statusCode >= 200 && statusCode <= 399) || statusCode === 0) {
+    if (statusCode >= 200 && statusCode <= 399) {
        classification = StatusCodeClassification.SUCCESS;
-    } else if (statusCode >= 400 || (statusCode >= 1 && statusCode <= 16)) {
+    } else if (statusCode >= 400) {
        classification = StatusCodeClassification.FAILURE;
    }

--- a/ui-common/src/components/UI/assets/dotted-circle.svg
+++ b/ui-common/src/components/UI/assets/dotted-circle.svg
@@ -0,0 +1,3 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="27.5" cy="27.5" r="27" stroke="#BCCEFD" stroke-dasharray="6 6"/>
+</svg>
--- a/ui-common/src/components/UI/index.ts
+++ b/ui-common/src/components/UI/index.ts
@@ -6,7 +6,9 @@ import Checkbox from "./Checkbox"
 import { StatusBar } from "./StatusBar";
 import CustomModal from "./CustomModal";
 import { InformationIcon } from "./InformationIcon";
+import SelectList from "./SelectList";
+import NoDataMessage from "./NoDataMessage";


-export {LoadingOverlay,Select,Tabs,Tooltip,Checkbox,CustomModal,InformationIcon}
-export {StatusBar}
+export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage }
+export { StatusBar }
--- a/ui-common/src/components/UI/style/NoDataMessage.module.sass
+++ b/ui-common/src/components/UI/style/NoDataMessage.module.sass
@@ -0,0 +1,32 @@
+@import '../../../variables.module'
+
+.messageContainer
+    width: 100%
+    margin-top: 20px
+
+    &__noData
+        display: flex
+        justify-content: space-between
+        flex-direction: column
+        height: 95px
+        margin: 2%
+        align-items: center
+        align-content: center
+        padding-top: 3%
+        padding-bottom: 3%
+
+        & .container
+            display: flex
+            justify-content: space-between
+            flex-direction: column
+            height: 95px
+            margin: 1%
+            align-items: center
+            align-content: center
+
+        &-message
+            font-style: normal
+            font-weight: 600
+            font-size: 12px
+            line-height: 15px
+            color: $light-gray
--- a/ui-common/src/components/UI/style/Resizeable.module.sass
+++ b/ui-common/src/components/UI/style/Resizeable.module.sass
@@ -0,0 +1,29 @@
+@import "../../../variables.module"
+
+.resizable
+    position: relative
+    align-items: center
+    display: flex
+    overflow: hidden
+    border-right: 1px solid $blue-color
+    height: 100%
+    width: 100%
+    padding-right: 3px
+
+.resizer
+    position: absolute
+
+    &Right
+        cursor: col-resize
+        height: 100%
+        right: 0
+        top: 0
+        width: 5px
+
+    // FutureUse
+    &Bottom
+        bottom: 0
+        cursor: row-resize
+        height: 5px
+        left: 0
+        width: 100%
--- a/ui-common/src/components/UI/style/SelectList.module.sass
+++ b/ui-common/src/components/UI/style/SelectList.module.sass
@@ -0,0 +1,33 @@
+@import '../../../variables.module'
+
+.selectListTable
+    overflow: auto
+    height: 100%
+    user-select: none // when resizble moved we get unwanted beheviour
+
+    table
+        width: 100%
+        margin-top: 20px
+        border-collapse: collapse
+
+        th
+            color: $blue-gray
+            text-align: left
+            padding: 10px
+            position: sticky
+            top: 0
+            background: $main-background-color
+
+        tr
+            border-bottom-width: 1px
+            border-bottom-color: $data-background-color
+            border-bottom-style: solid
+            width: 100%
+
+        td
+            color: $light-gray
+            padding: 10px
+            font-size: 16px
+
+.nowrap
+    white-space: nowrap
--- a/ui-common/src/components/UI/style/Spinner.module.sass
+++ b/ui-common/src/components/UI/style/Spinner.module.sass
@@ -1,7 +1,6 @@
-@import "../../variables.module"
+@import "../../../variables.module"

 .spinnerContainer
  display: flex
  justify-content: center
  margin-bottom: 10px
-  
--- a/ui-common/src/helpers/Utils.ts
+++ b/ui-common/src/helpers/Utils.ts
@@ -0,0 +1,6 @@
+const IP_ADDRESS_REGEX = /([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3})(:([0-9]{1,5}))?/
+
+
+export class Utils {
+    static isIpAddress = (address: string): boolean => IP_ADDRESS_REGEX.test(address)
+}
--- a/ui-common/src/index.tsx
+++ b/ui-common/src/index.tsx
@@ -1,10 +1,11 @@
 import TrafficViewer from './components/TrafficViewer/TrafficViewer';
 import * as UI from "./components/UI"
 import { StatusBar } from './components/UI';
-import useWS,{DEFAULT_QUERY} from './hooks/useWS';
-import {AnalyzeButton} from "./components/AnalyzeButton/AnalyzeButton"
+import useWS, { DEFAULT_QUERY } from './hooks/useWS';
+import { AnalyzeButton } from "./components/AnalyzeButton/AnalyzeButton"
 import OasModal from './components/OasModal/OasModal';
+import { ServiceMapModal } from './components/ServiceMapModal/ServiceMapModal';

-export {UI,AnalyzeButton, StatusBar, OasModal}
-export { useWS, DEFAULT_QUERY}
+export { UI, AnalyzeButton, StatusBar, OasModal, ServiceMapModal }
+export { useWS, DEFAULT_QUERY }
 export default TrafficViewer;
--- a/ui/src/App.sass
+++ b/ui/src/App.sass
@@ -6,3 +6,4 @@ body
 .mizuApp
  color: $font-color
  width: 100%
+  height: 100%
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,12 +1,12 @@
-import { useState} from 'react';
+import { useState } from 'react';
 import './App.sass';
-import {Header} from "./components/Header/Header";
-import {TrafficPage} from "./components/Pages/TrafficPage/TrafficPage";
-import { ServiceMapModal } from './components/ServiceMapModal/ServiceMapModal';
-import {useRecoilState} from "recoil";
+import { Header } from "./components/Header/Header";
+import { TrafficPage } from "./components/Pages/TrafficPage/TrafficPage";
+import { ServiceMapModal } from '@up9/mizu-common';
+import { useRecoilState } from "recoil";
 import serviceMapModalOpenAtom from "./recoil/serviceMapModalOpen";
 import oasModalOpenAtom from './recoil/oasModalOpen/atom';
-import {OasModal} from '@up9/mizu-common';
+import { OasModal } from '@up9/mizu-common';
 import Api from './helpers/api';

 const api = Api.getInstance()
@@ -19,20 +19,20 @@ const App = () => {

    return (
        <div className="mizuApp">
-        <Header analyzeStatus={analyzeStatus} />
-        <TrafficPage setAnalyzeStatus={setAnalyzeStatus}/>
-        {window["isServiceMapEnabled"] && <ServiceMapModal
+            <Header analyzeStatus={analyzeStatus} />
+            <TrafficPage setAnalyzeStatus={setAnalyzeStatus} />
+            {window["isServiceMapEnabled"] && <ServiceMapModal
                isOpen={serviceMapModalOpen}
                onOpen={() => setServiceMapModalOpen(true)}
                onClose={() => setServiceMapModalOpen(false)}
+                getServiceMapDataApi={api.serviceMapData} />}
+            {window["isOasEnabled"] && <OasModal
+                getOasServices={api.getOasServices}
+                getOasByService={api.getOasByService}
+                openModal={oasModalOpen}
+                handleCloseModal={() => setOasModalOpen(false)}
            />}
-        {window["isOasEnabled"] && <OasModal
-            getOasServices={api.getOasServices}
-            getOasByService={api.getOasByService}
-            openModal={oasModalOpen}
-            handleCloseModal={() => setOasModalOpen(false)}
-        />}
-    </div>
+        </div>
    );
 }

--- a/ui/src/components/AnalyzeButton/AnalyzeButton.tsx
+++ b/ui/src/components/AnalyzeButton/AnalyzeButton.tsx
@@ -1,86 +0,0 @@
-import {Button} from "@material-ui/core";
-import React from "react";
-import {UI} from "@up9/mizu-common";
-import logo_up9 from "../assets/logo_up9.svg";
-import {makeStyles} from "@material-ui/core/styles";
-
-const useStyles = makeStyles(() => ({
-    tooltip: {
-        backgroundColor: "#3868dc",
-        color: "white",
-        fontSize: 13,
-    },
-}));
-
-interface AnalyseButtonProps {
-    analyzeStatus: any
-}
-
-export const AnalyzeButton: React.FC<AnalyseButtonProps>  = ({analyzeStatus}) => {
-
-    const classes = useStyles();
-
-    const analysisMessage = analyzeStatus?.isRemoteReady ?
-        <span>
-            <table>
-                <tr>
-                    <td>Status</td>
-                    <td><b>Available</b></td>
-                </tr>
-                <tr>
-                    <td>Messages</td>
-                    <td><b>{analyzeStatus?.sentCount}</b></td>
-                </tr>
-            </table>
-        </span> :
-        analyzeStatus?.sentCount > 0 ?
-            <span>
-                <table>
-                    <tr>
-                        <td>Status</td>
-                        <td><b>Processing</b></td>
-                    </tr>
-                    <tr>
-                        <td>Messages</td>
-                        <td><b>{analyzeStatus?.sentCount}</b></td>
-                    </tr>
-                    <tr>
-                        <td colSpan={2}> Please allow a few minutes for the analysis to complete</td>
-                    </tr>
-                </table>
-            </span> :
-            <span>
-                <table>
-                    <tr>
-                        <td>Status</td>
-                        <td><b>Waiting for traffic</b></td>
-                    </tr>
-                    <tr>
-                        <td>Messages</td>
-                        <td><b>{analyzeStatus?.sentCount}</b></td>
-                    </tr>
-                </table>
-            </span>
-
-    return ( <div>
-        <UI.Tooltip title={analysisMessage} isSimple classes={classes}>
-            <div>
-                <Button
-                    style={{fontFamily: "system-ui",
-                        fontWeight: 600,
-                        fontSize: 12,
-                        padding: 8}}
-                    size={"small"}
-                    variant="contained"
-                    color="primary"
-                    startIcon={<img style={{height: 24, maxHeight: "none", maxWidth: "none"}} src={logo_up9} alt={"up9"}/>}
-                    disabled={!analyzeStatus?.isRemoteReady}
-                    onClick={() => {
-                        window.open(analyzeStatus?.remoteUrl)
-                    }}>
-                    Analysis
-                </Button>
-            </div>
-        </UI.Tooltip>
-    </div>);
-}
--- a/ui/src/components/ServiceMapModal/ServiceMapModal.sass
+++ b/ui/src/components/ServiceMapModal/ServiceMapModal.sass
@@ -1,31 +0,0 @@
-@import "../../variables.module"
-
-.legend-scale ul 
-  margin-top: -29px
-  margin-left: -27px
-  padding: 0
-  float: left
-  list-style: none
-
-  li 
-    display: block
-    float: left
-    width: 50px
-    margin-bottom: 6px
-    text-align: center
-    font-size: 80%
-    list-style: none  
-
-ul.legend-labels li span 
-  display: block
-  float: left
-  height: 15px
-  width: 50px  
-
-.legend-source 
-  font-size: 70%
-  color: #999
-  clear: both  
-
-a 
-  color: #777
--- a/ui/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/ui/src/components/ServiceMapModal/ServiceMapModal.tsx
@@ -1,223 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { Box, Fade, Modal, Backdrop, Button } from "@material-ui/core";
-import { toast } from "react-toastify";
-import Api from "../../helpers/api";
-import spinnerStyle from '../style/Spinner.module.sass';
-import './ServiceMapModal.sass';
-import spinnerImg from '../assets/spinner.svg';
-import Graph from "react-graph-vis";
-import debounce from 'lodash/debounce';
-import ServiceMapOptions from './ServiceMapOptions'
-import { useCommonStyles } from "../../helpers/commonStyle";
-import refresh from "../assets/refresh.svg";
-import close from "../assets/close.svg";
-import { TOAST_CONTAINER_ID } from "../../consts";
-
-interface GraphData {
-    nodes: Node[];
-    edges: Edge[];
-}
-
-interface Node {
-    id: number;
-    value: number;
-    label: string;
-    title?: string;
-    color?: object;
-}
-
-interface Edge {
-    from: number;
-    to: number;
-    value: number;
-    label: string;
-    title?: string;
-    color?: object;
-    font?: object;
-}
-
-interface ServiceMapNode {
-    id: number;
-    name: string;
-    entry: Entry;
-    count: number;
-}
-
-interface ServiceMapEdge {
-    source: ServiceMapNode;
-    destination: ServiceMapNode;
-    count: number;
-    protocol: Protocol;
-}
-
-interface ServiceMapGraph {
-    nodes: ServiceMapNode[];
-    edges: ServiceMapEdge[];
-}
-
-interface Entry {
-    ip: string;
-    port: string;
-    name: string;
-}
-
-interface Protocol {
-    name: string;
-    abbr: string;
-    macro: string;
-    version: string;
-    backgroundColor: string;
-    foregroundColor: string;
-    fontSize: number;
-    referenceLink: string;
-    ports: string[];
-    priority: number;
-}
-
-interface ServiceMapModalProps {
-    isOpen: boolean;
-    onOpen: () => void;
-    onClose: () => void;
-}
-
-const modalStyle = {
-    position: 'absolute',
-    top: '6%',
-    left: '50%',
-    transform: 'translate(-50%, 0%)',
-    width: '89vw',
-    height: '82vh',
-    bgcolor: 'background.paper',
-    borderRadius: '5px',
-    boxShadow: 24,
-    p: 4,
-    color: '#000',
-};
-
-const api = Api.getInstance();
-
-export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen, onClose }) => {
-    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 {
-            setIsLoading(true)
-
-            const serviceMapData: ServiceMapGraph = await api.serviceMapData()
-            const newGraphData: GraphData = { nodes: [], edges: [] }
-
-            if (serviceMapData.nodes) {
-                newGraphData.nodes = serviceMapData.nodes.map<Node>(node => {
-                    return {
-                        id: node.id,
-                        value: node.count,
-                        label: (node.entry.name === "unresolved") ? node.name : `${node.entry.name} (${node.name})`,
-                        title: "Count: " + node.name,
-                    }
-                })
-            }
-
-            if (serviceMapData.edges) {
-                newGraphData.edges = serviceMapData.edges.map<Edge>(edge => {
-                    return {
-                        from: edge.source.id,
-                        to: edge.destination.id,
-                        value: edge.count,
-                        label: edge.count.toString(),
-                        color: {
-                            color: edge.protocol.backgroundColor,
-                            highlight: edge.protocol.backgroundColor
-                        },
-                        font: {
-                            color: edge.protocol.backgroundColor,
-                            strokeColor: edge.protocol.backgroundColor
-                        },
-                    }
-                })
-            }
-
-            setGraphData(newGraphData)
-
-        } catch (ex) {
-            toast.error("An error occurred while loading Mizu Service Map, see console for mode details", { containerId: TOAST_CONTAINER_ID });
-            console.error(ex);
-        } finally {
-            setIsLoading(false)
-        }
-        // 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: [] })
-    }, [getServiceMapData])
-
-    const refreshServiceMap = debounce(() => {
-        getServiceMapData();
-    }, 500);
-
-    return (
-        <Modal
-            aria-labelledby="transition-modal-title"
-            aria-describedby="transition-modal-description"
-            open={isOpen}
-            onClose={onClose}
-            closeAfterTransition
-            BackdropComponent={Backdrop}
-            BackdropProps={{
-                timeout: 500,
-            }}
-            style={{ overflow: 'auto' }}
-        >
-            <Fade in={isOpen}>
-                <Box sx={modalStyle}>
-                    {isLoading && <div className={spinnerStyle.spinnerContainer}>
-                        <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
-                    </div>}
-                    {!isLoading && <div style={{ height: "100%", width: "100%" }}>
-                        <div style={{ display: "flex", justifyContent: "space-between" }}>
-                            <div>
-                                <Button
-                                    startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight: "8%" }}/>}
-                                    size="medium"
-                                    variant="contained"
-                                    className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
-                                    onClick={refreshServiceMap}
-                                >
-                                    Refresh
-                                </Button>
-                            </div>
-                            <img src={close} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}/>
-                        </div>
-                        <Graph
-                            graph={graphData}
-                            options={graphOptions}
-                        />
-                        <div className='legend-scale'>
-                            <ul className='legend-labels'>
-                                <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>}
-                </Box>
-            </Fade>
-        </Modal>
-    );
-
-}
--- a/ui/src/components/ServiceMapModal/ServiceMapOptions.ts
+++ b/ui/src/components/ServiceMapModal/ServiceMapOptions.ts
@@ -1,174 +0,0 @@
-
-const minNodeScaling = 10
-const maxNodeScaling = 30
-
-const minEdgeScaling = 1
-const maxEdgeScaling = maxNodeScaling / 2
-
-const minLabelScaling = 11
-const maxLabelScaling = 16
-const selectedNodeColor = "#0C0B1A"
-const selectedNodeBorderColor = "#205CF5"
-const selectedNodeLabelColor = "#205CF5"
-const selectedEdgeLabelColor = "#205CF5"
-
-const customScaling = (min, max, total, value) => {
-    if (max === min) {
-        return 0.5;
-    }
-    else {
-        const scale = 1 / (max - min);
-        return Math.max(0, (value - min) * scale);
-    }
-}
-
-const nodeSelected = (values, id, selected, hovering) => {
-    values.color = selectedNodeColor;
-    values.borderColor = selectedNodeBorderColor;
-    values.borderWidth = 4;
-}
-
-const nodeLabelSelected = (values, id, selected, hovering) => {
-    values.size = values.size + 1;
-    values.color = selectedNodeLabelColor;
-    values.strokeColor = selectedNodeLabelColor;
-    values.strokeWidth = 0.2
-}
-
-const edgeSelected = (values, id, selected, hovering) => {
-    values.opacity = 0.4;
-    values.width = values.width + 1;
-}
-
-const edgeLabelSelected = (values, id, selected, hovering) => {
-    values.size = values.size + 1;
-    values.color = selectedEdgeLabelColor;
-    values.strokeColor = selectedEdgeLabelColor;
-    values.strokeWidth = 0.2
-}
-
-const nodeOptions = {
-    shape: 'dot',
-    chosen: {
-        node: nodeSelected,
-        label: nodeLabelSelected,
-    },
-    color: {
-        background: '#494677',
-        border: selectedNodeColor,
-    },
-    font: {
-        color: selectedNodeColor,
-        size: 11, // px
-        face: 'Roboto',
-        background: '#FFFFFFBF',
-        strokeWidth: 0.2, // px
-        strokeColor: selectedNodeColor,
-        align: 'center',
-        multi: false,
-    },
-    // defines the node min and max sizes when zoom in/out, based on the node value
-    scaling: {
-        min: minNodeScaling,
-        max: maxNodeScaling,
-        // defines the label scaling size in px
-        label: {
-            enabled: true,
-            min: minLabelScaling,
-            max: maxLabelScaling,
-            maxVisible: maxLabelScaling,
-            drawThreshold: 5,
-        },
-        customScalingFunction: customScaling,
-    },
-    borderWidth: 2,
-    labelHighlightBold: true,
-    opacity: 1,
-    shadow: true,
-}
-
-const edgeOptions = {
-    chosen: {
-        edge: edgeSelected,
-        label: edgeLabelSelected,
-    },
-    dashes: false,
-    arrowStrikethrough: false,
-    arrows: {
-        to: {
-            enabled: true,
-        },
-        middle: {
-            enabled: false,
-        },
-        from: {
-            enabled: false,
-        }
-    },
-    smooth: {
-        enabled: true,
-        type: 'dynamic',
-        roundness: 1.0
-    },
-    font: {
-        color: '#000000',
-        size: 11, // px
-        face: 'Roboto',
-        background: '#FFFFFFCC',
-        strokeWidth: 0.2, // px
-        strokeColor: '#000000',
-        align: 'horizontal',
-        multi: false,
-    },
-    scaling: {
-        min: minEdgeScaling,
-        max: maxEdgeScaling,
-        label: {
-            enabled: true,
-            min: minLabelScaling,
-            max: maxLabelScaling,
-            maxVisible: maxLabelScaling,
-            drawThreshold: 5
-        },
-        customScalingFunction: customScaling,
-    },
-    labelHighlightBold: true,
-    selectionWidth: 1,
-    shadow: true,
-}
-
-const ServiceMapOptions = {
-    physics: {
-        enabled: true,
-        solver: 'barnesHut',
-        barnesHut: {
-            theta: 0.5,
-            gravitationalConstant: -2000,
-            centralGravity: 0.4,
-            springLength: 180,
-            springConstant: 0.04,
-            damping: 0.2,
-            avoidOverlap: 0
-        },
-    },
-    layout: {
-        hierarchical: false,
-        randomSeed: 1 // always on node 1
-    },
-    nodes: nodeOptions,
-    edges: edgeOptions,
-    autoResize: true,
-    interaction: {
-        selectable: true,
-        selectConnectedEdges: true,
-        multiselect: true,
-        dragNodes: true,
-        dragView: true,
-        hover: true,
-        hoverConnectedEdges: true,
-        zoomView: true,
-        zoomSpeed: 1,
-    },
-};
-
-export default ServiceMapOptions
--- a/ui/src/components/style/Spinner.module.sass
+++ b/ui/src/components/style/Spinner.module.sass
@@ -1,7 +0,0 @@
-@import "../../variables.module"
-
-.spinnerContainer
-  display: flex
-  justify-content: center
-  margin-bottom: 10px
-  
--- a/ui/src/configs/shortcutsKeyboard.ts
+++ b/ui/src/configs/shortcutsKeyboard.ts
@@ -1,7 +0,0 @@
-const dictionary = {
-    ctrlEnter : [{metaKey : true, code:"Enter"}, {ctrlKey:true, code:"Enter"}], // support Ctrl/command
-    enter : [{code:"Enter"}]
-};
-
-
-export default dictionary;
--- a/ui/src/helpers/api.js
+++ b/ui/src/helpers/api.js
@@ -25,21 +25,11 @@ export default class Api {
        source = null;
    }

-    serviceMapStatus = async () => {
-        const response = await client.get("/servicemap/status");
-        return response.data;
-    }
-
    serviceMapData = async () => {
        const response = await client.get(`/servicemap/get`);
        return response.data;
    }

-    serviceMapReset = async () => {
-        const response = await client.get(`/servicemap/reset`);
-        return response.data;
-    }
-
    tapStatus = async () => {
        const response = await client.get("/status/tap");
        return response.data;
--- a/ui/src/helpers/routes.ts
+++ b/ui/src/helpers/routes.ts
@@ -1,5 +0,0 @@
-export enum RouterRoutes {
-    LOGIN = "/login",
-    SETUP = "/setup",
-    SETTINGS = "/settings"
-}
--- a/ui/src/hooks/useKeyPress.ts
+++ b/ui/src/hooks/useKeyPress.ts
@@ -1,38 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-
-const useKeyPress = (eventConfigs, callback, node = null) => {
-  // implement the callback ref pattern
-  const callbackRef = useRef(callback);
-  useLayoutEffect(() => {
-    callbackRef.current = callback;
-  });
-
-  // handle what happens on key press
-  const handleKeyPress = useCallback(
-    (event) => {
-      
-      // check if one of the key is part of the ones we want
-      if (eventConfigs.some((eventConfig) => Object.keys(eventConfig).every(nameKey => eventConfig[nameKey] === event[nameKey]))) {
-        event.stopPropagation()
-        event.preventDefault();
-        callbackRef.current(event);
-      }
-    },
-    [eventConfigs]
-  );
-
-  useEffect(() => {
-    // target is either the provided node or the document
-    const targetNode = node ?? document;
-    // attach the event listener
-    targetNode &&
-      targetNode.addEventListener("keydown", handleKeyPress);
-
-    // remove the event listener
-    return () =>
-      targetNode &&
-        targetNode.removeEventListener("keydown", handleKeyPress);
-  }, [handleKeyPress, node]);
-};
-
-export default useKeyPress;
--- a/ui/src/index.sass
+++ b/ui/src/index.sass
@@ -1,5 +1,8 @@
@import './variables.module'

+#root
+  height: 100%
+
 html,
 body
  height: 100%
@@ -153,4 +156,4 @@ button

 // enable view elements inside redoc  
 .sc-dwsnSq
-  height: 80vh !important
+  height: 80vh !important
--- a/ui/src/recoil/entPage/atom.ts
+++ b/ui/src/recoil/entPage/atom.ts
@@ -1,8 +0,0 @@
-import { atom } from "recoil"
-
-const entPageAtom = atom({
-    key: "entPageAtom",
-    default: 0
-})
-
-export default entPageAtom
--- a/ui/src/recoil/entPage/index.ts
+++ b/ui/src/recoil/entPage/index.ts
@@ -1,11 +0,0 @@
-import atom from "./atom";
-
-enum Page {
-    Traffic,
-    Setup,
-    Login
-}
-
-export { Page };
-
-export default atom;
--- a/ui/src/recoil/entries/atom.ts
+++ b/ui/src/recoil/entries/atom.ts
@@ -1,8 +0,0 @@
-import { atom } from "recoil";
-
-const entriesAtom = atom({
-    key: "entriesAtom",
-    default: []
-});
-
-export default entriesAtom;
--- a/ui/src/recoil/entries/index.ts
+++ b/ui/src/recoil/entries/index.ts
@@ -1,3 +0,0 @@
-import atom from "./atom";
-
-export default atom
--- a/ui/src/recoil/tappingStatus/atom.ts
+++ b/ui/src/recoil/tappingStatus/atom.ts
@@ -1,9 +0,0 @@
-import { atom } from "recoil";
-import {TappingStatusPod} from "./index";
-
-const tappingStatusAtom = atom({
-    key: "tappingStatusAtom",
-    default: null as TappingStatusPod[]
-});
-
-export default tappingStatusAtom;
--- a/ui/src/recoil/tappingStatus/details.ts
+++ b/ui/src/recoil/tappingStatus/details.ts
@@ -1,22 +0,0 @@
-import {selector} from "recoil";
-import tappingStatusAtom from "./atom";
-
-const tappingStatusDetails = selector({
-    key: 'tappingStatusDetails',
-    get: ({get}) => {
-        const tappingStatus = get(tappingStatusAtom);
-        const uniqueNamespaces = Array.from(new Set(tappingStatus.map(pod => pod.namespace)));
-        const amountOfPods = tappingStatus.length;
-        const amountOfTappedPods = tappingStatus.filter(pod => pod.isTapped).length;
-        const amountOfUntappedPods = amountOfPods - amountOfTappedPods;
-
-        return {
-            uniqueNamespaces,
-            amountOfPods,
-            amountOfTappedPods,
-            amountOfUntappedPods,
-        };
-    },
-});
-
-export default tappingStatusDetails;
--- a/ui/src/recoil/tappingStatus/index.ts
+++ b/ui/src/recoil/tappingStatus/index.ts
@@ -1,17 +0,0 @@
-import atom from "./atom";
-import tappingStatusDetails from './details';
-
-interface TappingStatusPod {
-    name: string;
-    namespace: string;
-    isTapped: boolean;
-}
-
-interface TappingStatus {
-    pods: TappingStatusPod[];
-}
-
-export type {TappingStatus, TappingStatusPod};
-export {tappingStatusDetails};
-
-export default atom;
Author	SHA1	Message	Date
leon-up9	df1fd2c3a7	Ui/Resiszable (#990 ) * fixed toast fixed filter refresh on reload * revarted * sticky selectlist header * apply check to filtered items * grpc filter Bug * should almost fix filtering * working without disabled * handle disabled items * small refactor * almost working with weird jesture * test * servicesFilterList height * fixed to work * refresh margin * after PR notes * remove redunded var * pr review * Pr comments * removed line * removed redundant * nullable check Co-authored-by: Leon <>	2022-04-12 16:27:20 +03:00
lirazyehezkel	f8496c0235	Fix screen layout (#993 ) Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>	2022-04-12 11:20:02 +03:00
Nimrod Gilboa Markevich	2de7107c0a	Use author instead of commiter in slack alerts (#992 )	2022-04-12 10:48:50 +03:00
leon-up9	22e3b3d8b2	ServiceMapModal filters (#981 ) * fixed toast fixed filter refresh on reload * revarted * sticky selectlist header * apply check to filtered items * grpc filter Bug * should almost fix filtering * working without disabled * handle disabled items * small refactor * servicesFilterList height * after PR notes * remove redunded var * pr review Co-authored-by: Leon <>	2022-04-11 17:26:28 +03:00
lirazyehezkel	45611c4c13	TRA-4477 FE holds limit of 10000 entries (#987 ) * FE holds limit of 10000 entries * let to const	2022-04-11 15:04:42 +03:00
RoyUP9	bb425fa6e2	Fixed service map unresolved bug (#986 )	2022-04-11 14:37:53 +03:00
lirazyehezkel	4bc83ebcb5	Fix WS error when switching from settings to traffic viewer (#985 )	2022-04-11 14:21:31 +03:00
M. Mert Yıldıran	bbb44dae79	Fix the unit tests of protocol extensions (#982 )	2022-04-09 06:56:09 -07:00
M. Mert Yıldıran	72a1aba3e5	TRA-4410 Display `namespace` field in the UI (#974 )	2022-04-08 21:16:25 +03:00
RoyUP9	d8fb8ff710	Fix for OAS reset not working (#978 )	2022-04-07 18:14:03 +03:00
Nimrod Gilboa Markevich	f344bd2633	Make minor changes to OasGenerator (#977 ) * Added log message * Remove Reset function from OasGenerator interface, use Stop+Start instead * SetEntriesQuery returns a bool stating whether the query changed	2022-04-07 10:46:30 +03:00
M. Mert Yıldıran	6575495fa5	Remove gRPC related modifications (#958 ) * Remove gRPC related modifications * Remove gRPC status text related modifications as well * Fixing gRPC vertical image detect grpc when content type is 'application/grpc' as well (and not only from the grpc-status) Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>	2022-04-06 18:50:36 +03:00
RoyUP9	cf5c03d45c	Fixed service map returning nil values (#975 )	2022-04-06 13:12:38 +03:00
Nimrod Gilboa Markevich	491da24c63	Add ability to set query in OAS Generator (#964 )	2022-04-06 11:54:55 +03:00
leon-up9	832162ae0f	Ui/Service-map-split-to-ui-common (#966 ) * added serviceModal & selectList & noDataMessage removed leftovers from split * scroll fix * sort by name * search alightment * space removed * margin-bottom * utils class Co-authored-by: Leon <> Co-authored-by: Igor Gov <iggvrv@gmail.com>	2022-04-05 13:23:46 +03:00
lirazyehezkel	866378b451	Mizu cant show more than 10000 entries (#973 )	2022-04-05 12:25:01 +03:00