Fixing acceptance tests (#900)

* Define `Capture` type and expect it as an argument in `Dissect` method

* Add an indicator for the  eBPF sourced entries

* Fix the Go lint error

* Fix the logic in the UI

* Update the expected JSONs

* Add TODOs

* Add `UndefinedCapture` constant

* Define `CaptureTypes` enum

.gitignore

@@ -48,3 +48,8 @@ cypress.env.json
 # Ignore test data in extensions
 tap/extensions/*/bin
 tap/extensions/*/expect
+
+# UI folders to ignore
+**/node_modules/**
+**/dist/**
+*.editorconfig

acceptanceTests/cypress/integration/testHelpers/StatusBarHelper.js

@@ -1,8 +1,7 @@
 const columns = {podName : 1, namespace : 2, tapping : 3};
-const greenStatusImageSrc = '/static/media/success.662997eb.svg';
 
 function getDomPathInStatusBar(line, column) {
-    return `.expandedStatusBar > :nth-child(2) > > :nth-child(2) > :nth-child(${line}) > :nth-child(${column})`;
+    return `[data-cy="expandedStatusBar"] > :nth-child(2) > > :nth-child(2) > :nth-child(${line}) > :nth-child(${column})`;
 }
 
 export function checkLine(line, expectedValues) {
@@ -12,14 +11,14 @@ export function checkLine(line, expectedValues) {
 
         cy.get(getDomPathInStatusBar(line, columns.namespace)).invoke('text').then(namespaceValue => {
             expect(namespaceValue).to.equal(expectedValues.namespace);
-            cy.get(getDomPathInStatusBar(line, columns.tapping)).children().should('have.attr', 'src', greenStatusImageSrc);
+            cy.get(getDomPathInStatusBar(line, columns.tapping)).children().should('have.attr', 'src').and("match", /success.*\.svg/);
         });
     });
 }
 
 export function findLineAndCheck(expectedValues) {
-    cy.get('.expandedStatusBar > :nth-child(2) > > :nth-child(2) > > :nth-child(1)').then(pods => {
-        cy.get('.expandedStatusBar > :nth-child(2) > > :nth-child(2) > > :nth-child(2)').then(namespaces => {
+    cy.get('[data-cy="expandedStatusBar"] > :nth-child(2) > > :nth-child(2) > > :nth-child(1)').then(pods => {
+        cy.get('[data-cy="expandedStatusBar"] > :nth-child(2) > > :nth-child(2) > > :nth-child(2)').then(namespaces => {
             // organizing namespaces array
             const podObjectsArray = Object.values(pods ?? {});
             const namespacesObjectsArray = Object.values(namespaces ?? {});

acceptanceTests/cypress/integration/testHelpers/TrafficHelper.js

@@ -45,7 +45,7 @@ export function leftTextCheck(entryNum, path, expectedText) {
 
 export function leftOnHoverCheck(entryNum, path, filterName) {
     cy.get(`#list #entry-${entryNum} ${path}`).trigger('mouseover');
-    cy.get(`#list #entry-${entryNum} .Queryable-Tooltip`).invoke('text').should('match', new RegExp(filterName));
+    cy.get(`#list #entry-${entryNum} [data-cy='QueryableTooltip']`).invoke('text').should('match', new RegExp(filterName));
 }
 
 export function rightTextCheck(path, expectedText) {
@@ -54,7 +54,7 @@ export function rightTextCheck(path, expectedText) {
 
 export function rightOnHoverCheck(path, expectedText) {
     cy.get(`#rightSideContainer ${path}`).trigger('mouseover');
-    cy.get(`#rightSideContainer .Queryable-Tooltip`).invoke('text').should('match', new RegExp(expectedText));
+    cy.get(`#rightSideContainer [data-cy='QueryableTooltip']`).invoke('text').should('match', new RegExp(expectedText));
 }
 
 export function checkThatAllEntriesShown() {

acceptanceTests/cypress/integration/tests/GuiPort.js

@@ -8,6 +8,6 @@ it('check', function () {
     cy.visit(`http://localhost:${port}`);
     cy.wait('@statusTap').its('response.statusCode').should('match', /^2\d{2}/);
 
-    cy.get('.podsCount').trigger('mouseover');
+    cy.get(`[data-cy="expandedStatusBar"]`).trigger('mouseover',{force: true});
     findLineAndCheck(getExpectedDetailsDict(podName, namespace));
 });

acceptanceTests/cypress/integration/tests/MultipleNamespaces.js

@@ -2,7 +2,7 @@ import {findLineAndCheck, getExpectedDetailsDict} from '../testHelpers/StatusBar
 
 it('opening', function () {
     cy.visit(Cypress.env('testUrl'));
-    cy.get('.podsCount').trigger('mouseover');
+    cy.get(`[data-cy="podsCountText"]`).trigger('mouseover');
 });
 
 [1, 2, 3].map(doItFunc);

acceptanceTests/cypress/integration/tests/Regex.js

@@ -3,9 +3,9 @@ import {getExpectedDetailsDict, checkLine} from '../testHelpers/StatusBarHelper'
 
 it('opening', function () {
     cy.visit(Cypress.env('testUrl'));
-    cy.get('.podsCount').trigger('mouseover');
+    cy.get(`[data-cy="podsCountText"]`).trigger('mouseover');
 
-    cy.get('.expandedStatusBar > :nth-child(2) > > :nth-child(2) >').should('have.length', 1); // one line
+    cy.get('[data-cy="expandedStatusBar"] > :nth-child(2) > > :nth-child(2) >').should('have.length', 1); // one line
 
     checkLine(1, getExpectedDetailsDict(Cypress.env('name'), Cypress.env('namespace')));
 });

acceptanceTests/cypress/integration/tests/UiTest.js

@@ -26,7 +26,7 @@ it('opening mizu', function () {
 verifyMinimumEntries();
 
 it('top bar check', function () {
-    cy.get('.podsCount').trigger('mouseover');
+    cy.get(`[data-cy="podsCountText"]`).trigger('mouseover');
     podsArray.map(findLineAndCheck);
     cy.reload();
 });
@@ -205,6 +205,7 @@ function checkFilter(filterDetails){
             // checks the hover on the last entry (the only one in DOM at the beginning)
             leftOnHoverCheck(totalEntries - 1, leftSidePath, name);
 
+            cy.get('.w-tc-editor-text').clear();
             // applying the filter with alt+enter or with the button
             cy.get('.w-tc-editor-text').type(`${name}${applyByEnter ? '{alt+enter}' : ''}`);
             cy.get('.w-tc-editor').should('have.attr', 'style').and('include', Cypress.env('greenFilterColor'));

agent/main.go

@@ -16,6 +16,7 @@ import (
 
 	"github.com/gin-contrib/static"
 	"github.com/gin-gonic/gin"
+	"github.com/up9inc/mizu/agent/pkg/dependency"
 	"github.com/up9inc/mizu/agent/pkg/elastic"
 	"github.com/up9inc/mizu/agent/pkg/middlewares"
 	"github.com/up9inc/mizu/agent/pkg/models"
@@ -55,6 +56,7 @@ const (
 )
 
 func main() {
+	initializeDependencies()
 	logLevel := determineLogLevel()
 	logger.InitLoggerStd(logLevel)
 	flag.Parse()
@@ -203,10 +205,12 @@ func runInHarReaderMode() {
 
 func enableExpFeatureIfNeeded() {
 	if config.Config.OAS {
-		oas.GetOasGeneratorInstance().Start()
+		oasGenerator := dependency.GetInstance(dependency.OasGeneratorDependency).(oas.OasGenerator)
+		oasGenerator.Start()
 	}
 	if config.Config.ServiceMap {
-		servicemap.GetInstance().Enable()
+		serviceMapGenerator := dependency.GetInstance(dependency.ServiceMapGeneratorDependency).(servicemap.ServiceMap)
+		serviceMapGenerator.Enable()
 	}
 	elastic.GetInstance().Configure(config.Config.Elastic)
 }
@@ -385,3 +389,8 @@ 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() })
+}

agent/pkg/api/main.go

@@ -11,6 +11,7 @@ import (
 	"strings"
 	"time"
 
+	"github.com/up9inc/mizu/agent/pkg/dependency"
 	"github.com/up9inc/mizu/agent/pkg/elastic"
 	"github.com/up9inc/mizu/agent/pkg/har"
 	"github.com/up9inc/mizu/agent/pkg/holder"
@@ -151,7 +152,8 @@ func startReadingChannel(outputItems <-chan *tapApi.OutputChannelItem, extension
 				entryWSource.Destination = mizuEntry.Destination.IP + ":" + mizuEntry.Destination.Port
 			}
 
-			oas.GetOasGeneratorInstance().PushEntry(&entryWSource)
+			oasGenerator := dependency.GetInstance(dependency.OasGeneratorDependency).(oas.OasGeneratorSink)
+			oasGenerator.PushEntry(&entryWSource)
 		}
 
 		data, err := json.Marshal(mizuEntry)
@@ -163,7 +165,9 @@ func startReadingChannel(outputItems <-chan *tapApi.OutputChannelItem, extension
 
 		connection.SendText(string(data))
 
-		servicemap.GetInstance().NewTCPEntry(mizuEntry.Source, mizuEntry.Destination, &item.Protocol)
+		serviceMapGenerator := dependency.GetInstance(dependency.ServiceMapGeneratorDependency).(servicemap.ServiceMapSink)
+		serviceMapGenerator.NewTCPEntry(mizuEntry.Source, mizuEntry.Destination, &item.Protocol)
+
 		elastic.GetInstance().PushEntry(mizuEntry)
 	}
 }

agent/pkg/controllers/oas_controller.go

@@ -5,13 +5,15 @@ import (
 
 	"github.com/chanced/openapi"
 	"github.com/gin-gonic/gin"
+	"github.com/up9inc/mizu/agent/pkg/dependency"
 	"github.com/up9inc/mizu/agent/pkg/oas"
 	"github.com/up9inc/mizu/shared/logger"
 )
 
 func GetOASServers(c *gin.Context) {
 	m := make([]string, 0)
-	oas.GetOasGeneratorInstance().ServiceSpecs.Range(func(key, value interface{}) bool {
+	oasGenerator := dependency.GetInstance(dependency.OasGeneratorDependency).(oas.OasGenerator)
+	oasGenerator.GetServiceSpecs().Range(func(key, value interface{}) bool {
 		m = append(m, key.(string))
 		return true
 	})
@@ -20,7 +22,8 @@ func GetOASServers(c *gin.Context) {
 }
 
 func GetOASSpec(c *gin.Context) {
-	res, ok := oas.GetOasGeneratorInstance().ServiceSpecs.Load(c.Param("id"))
+	oasGenerator := dependency.GetInstance(dependency.OasGeneratorDependency).(oas.OasGenerator)
+	res, ok := oasGenerator.GetServiceSpecs().Load(c.Param("id"))
 	if !ok {
 		c.JSON(http.StatusNotFound, gin.H{
 			"error":     true,
@@ -48,7 +51,9 @@ func GetOASSpec(c *gin.Context) {
 
 func GetOASAllSpecs(c *gin.Context) {
 	res := map[string]*openapi.OpenAPI{}
-	oas.GetOasGeneratorInstance().ServiceSpecs.Range(func(key, value interface{}) bool {
+
+	oasGenerator := dependency.GetInstance(dependency.OasGeneratorDependency).(oas.OasGenerator)
+	oasGenerator.GetServiceSpecs().Range(func(key, value interface{}) bool {
 		svc := key.(string)
 		gen := value.(*oas.SpecGen)
 		spec, err := gen.GetSpec()

agent/pkg/controllers/oas_controller_test.go

@@ -4,36 +4,43 @@ import (
 	"net/http/httptest"
 	"testing"
 
+	"github.com/up9inc/mizu/agent/pkg/dependency"
 	"github.com/up9inc/mizu/agent/pkg/oas"
 
 	"github.com/gin-gonic/gin"
 )
 
 func TestGetOASServers(t *testing.T) {
+	dependency.RegisterGenerator(dependency.OasGeneratorDependency, func() interface{} { return oas.GetDefaultOasGeneratorInstance() })
+
 	recorder := httptest.NewRecorder()
 	c, _ := gin.CreateTestContext(recorder)
-	oas.GetOasGeneratorInstance().Start()
-	oas.GetOasGeneratorInstance().ServiceSpecs.Store("some", oas.NewGen("some"))
+	oas.GetDefaultOasGeneratorInstance().Start()
+	oas.GetDefaultOasGeneratorInstance().GetServiceSpecs().Store("some", oas.NewGen("some"))
 
 	GetOASServers(c)
 	t.Logf("Written body: %s", recorder.Body.String())
 }
 
 func TestGetOASAllSpecs(t *testing.T) {
+	dependency.RegisterGenerator(dependency.OasGeneratorDependency, func() interface{} { return oas.GetDefaultOasGeneratorInstance() })
+
 	recorder := httptest.NewRecorder()
 	c, _ := gin.CreateTestContext(recorder)
-	oas.GetOasGeneratorInstance().Start()
-	oas.GetOasGeneratorInstance().ServiceSpecs.Store("some", oas.NewGen("some"))
+	oas.GetDefaultOasGeneratorInstance().Start()
+	oas.GetDefaultOasGeneratorInstance().GetServiceSpecs().Store("some", oas.NewGen("some"))
 
 	GetOASAllSpecs(c)
 	t.Logf("Written body: %s", recorder.Body.String())
 }
 
 func TestGetOASSpec(t *testing.T) {
+	dependency.RegisterGenerator(dependency.OasGeneratorDependency, func() interface{} { return oas.GetDefaultOasGeneratorInstance() })
+
 	recorder := httptest.NewRecorder()
 	c, _ := gin.CreateTestContext(recorder)
-	oas.GetOasGeneratorInstance().Start()
-	oas.GetOasGeneratorInstance().ServiceSpecs.Store("some", oas.NewGen("some"))
+	oas.GetDefaultOasGeneratorInstance().Start()
+	oas.GetDefaultOasGeneratorInstance().GetServiceSpecs().Store("some", oas.NewGen("some"))
 
 	c.Params = []gin.Param{{Key: "id", Value: "some"}}
 

agent/pkg/controllers/service_map_controller.go

@@ -3,6 +3,7 @@ package controllers
 import (
 	"net/http"
 
+	"github.com/up9inc/mizu/agent/pkg/dependency"
 	"github.com/up9inc/mizu/agent/pkg/servicemap"
 
 	"github.com/gin-gonic/gin"
@@ -13,8 +14,9 @@ type ServiceMapController struct {
 }
 
 func NewServiceMapController() *ServiceMapController {
+	serviceMapGenerator := dependency.GetInstance(dependency.ServiceMapGeneratorDependency).(servicemap.ServiceMap)
 	return &ServiceMapController{
-		service: servicemap.GetInstance(),
+		service: serviceMapGenerator,
 	}
 }
 

agent/pkg/controllers/service_map_controller_test.go

@@ -7,6 +7,7 @@ import (
 	"net/http/httptest"
 	"testing"
 
+	"github.com/up9inc/mizu/agent/pkg/dependency"
 	"github.com/up9inc/mizu/agent/pkg/servicemap"
 
 	"github.com/gin-gonic/gin"
@@ -57,9 +58,11 @@ type ServiceMapControllerSuite struct {
 }
 
 func (s *ServiceMapControllerSuite) SetupTest() {
+	dependency.RegisterGenerator(dependency.ServiceMapGeneratorDependency, func() interface{} { return servicemap.GetDefaultServiceMapInstance() })
+
 	s.c = NewServiceMapController()
 	s.c.service.Enable()
-	s.c.service.NewTCPEntry(TCPEntryA, TCPEntryB, ProtocolHttp)
+	s.c.service.(servicemap.ServiceMapSink).NewTCPEntry(TCPEntryA, TCPEntryB, ProtocolHttp)
 
 	s.w = httptest.NewRecorder()
 	s.g, _ = gin.CreateTestContext(s.w)

agent/pkg/dependency/container.go

@@ -0,0 +1,11 @@
+package dependency
+
+var typeIntializerMap = make(map[DependencyContainerType]func() interface{}, 0)
+
+func RegisterGenerator(name DependencyContainerType, fn func() interface{}) {
+	typeIntializerMap[name] = fn
+}
+
+func GetInstance(name DependencyContainerType) interface{} {
+	return typeIntializerMap[name]()
+}

agent/pkg/dependency/type_names.go

@@ -0,0 +1,8 @@
+package dependency
+
+type DependencyContainerType string
+
+const (
+	ServiceMapGeneratorDependency = "ServiceMapGeneratorDependency"
+	OasGeneratorDependency        = "OasGeneratorDependency"
+)

agent/pkg/oas/feeder_test.go

@@ -147,9 +147,9 @@ func feedEntry(entry *har.Entry, source string, isSync bool, file string) {
 
 	ews := EntryWithSource{Entry: *entry, Source: source, Destination: u.Host, Id: uint(0)}
 	if isSync {
-		GetOasGeneratorInstance().entriesChan <- ews // blocking variant, right?
+		GetDefaultOasGeneratorInstance().entriesChan <- ews // blocking variant, right?
 	} else {
-		GetOasGeneratorInstance().PushEntry(&ews)
+		GetDefaultOasGeneratorInstance().PushEntry(&ews)
 	}
 }
 

agent/pkg/oas/oas_generator.go

@@ -12,18 +12,38 @@ import (
 
 var (
 	syncOnce sync.Once
-	instance *oasGenerator
+	instance *defaultOasGenerator
 )
 
-func GetOasGeneratorInstance() *oasGenerator {
+type OasGeneratorSink interface {
+	PushEntry(entryWithSource *EntryWithSource)
+}
+
+type OasGenerator interface {
+	Start()
+	Stop()
+	IsStarted() bool
+	Reset()
+	GetServiceSpecs() *sync.Map
+}
+
+type defaultOasGenerator struct {
+	started      bool
+	ctx          context.Context
+	cancel       context.CancelFunc
+	serviceSpecs *sync.Map
+	entriesChan  chan EntryWithSource
+}
+
+func GetDefaultOasGeneratorInstance() *defaultOasGenerator {
 	syncOnce.Do(func() {
-		instance = newOasGenerator()
+		instance = NewDefaultOasGenerator()
 		logger.Log.Debug("OAS Generator Initialized")
 	})
 	return instance
 }
 
-func (g *oasGenerator) Start() {
+func (g *defaultOasGenerator) Start() {
 	if g.started {
 		return
 	}
@@ -31,12 +51,12 @@ func (g *oasGenerator) Start() {
 	g.cancel = cancel
 	g.ctx = ctx
 	g.entriesChan = make(chan EntryWithSource, 100) // buffer up to 100 entries for OAS processing
-	g.ServiceSpecs = &sync.Map{}
+	g.serviceSpecs = &sync.Map{}
 	g.started = true
-	go instance.runGenerator()
+	go g.runGenerator()
 }
 
-func (g *oasGenerator) Stop() {
+func (g *defaultOasGenerator) Stop() {
 	if !g.started {
 		return
 	}
@@ -45,11 +65,11 @@ func (g *oasGenerator) Stop() {
 	g.started = false
 }
 
-func (g *oasGenerator) IsStarted() bool {
+func (g *defaultOasGenerator) IsStarted() bool {
 	return g.started
 }
 
-func (g *oasGenerator) runGenerator() {
+func (g *defaultOasGenerator) runGenerator() {
 	for {
 		select {
 		case <-g.ctx.Done():
@@ -67,11 +87,11 @@ func (g *oasGenerator) runGenerator() {
 				logger.Log.Errorf("Failed to parse entry URL: %v, err: %v", entry.Request.URL, err)
 			}
 
-			val, found := g.ServiceSpecs.Load(entryWithSource.Destination)
+			val, found := g.serviceSpecs.Load(entryWithSource.Destination)
 			var gen *SpecGen
 			if !found {
 				gen = NewGen(u.Scheme + "://" + entryWithSource.Destination)
-				g.ServiceSpecs.Store(entryWithSource.Destination, gen)
+				g.serviceSpecs.Store(entryWithSource.Destination, gen)
 			} else {
 				gen = val.(*SpecGen)
 			}
@@ -92,11 +112,11 @@ func (g *oasGenerator) runGenerator() {
 	}
 }
 
-func (g *oasGenerator) Reset() {
-	g.ServiceSpecs = &sync.Map{}
+func (g *defaultOasGenerator) Reset() {
+	g.serviceSpecs = &sync.Map{}
 }
 
-func (g *oasGenerator) PushEntry(entryWithSource *EntryWithSource) {
+func (g *defaultOasGenerator) PushEntry(entryWithSource *EntryWithSource) {
 	if !g.started {
 		return
 	}
@@ -107,12 +127,16 @@ func (g *oasGenerator) PushEntry(entryWithSource *EntryWithSource) {
 	}
 }
 
-func newOasGenerator() *oasGenerator {
-	return &oasGenerator{
+func (g *defaultOasGenerator) GetServiceSpecs() *sync.Map {
+	return g.serviceSpecs
+}
+
+func NewDefaultOasGenerator() *defaultOasGenerator {
+	return &defaultOasGenerator{
 		started:      false,
 		ctx:          nil,
 		cancel:       nil,
-		ServiceSpecs: nil,
+		serviceSpecs: nil,
 		entriesChan:  nil,
 	}
 }
@@ -123,11 +147,3 @@ type EntryWithSource struct {
 	Entry       har.Entry
 	Id          uint
 }
-
-type oasGenerator struct {
-	started      bool
-	ctx          context.Context
-	cancel       context.CancelFunc
-	ServiceSpecs *sync.Map
-	entriesChan  chan EntryWithSource
-}

agent/pkg/oas/specgen_test.go

@@ -2,10 +2,6 @@ package oas
 
 import (
 	"encoding/json"
-	"github.com/chanced/openapi"
-	"github.com/op/go-logging"
-	"github.com/up9inc/mizu/shared/logger"
-	"github.com/wI2L/jsondiff"
 	"io/ioutil"
 	"os"
 	"regexp"
@@ -13,6 +9,11 @@ import (
 	"testing"
 	"time"
 
+	"github.com/chanced/openapi"
+	"github.com/op/go-logging"
+	"github.com/up9inc/mizu/shared/logger"
+	"github.com/wI2L/jsondiff"
+
 	"github.com/up9inc/mizu/agent/pkg/har"
 )
 
@@ -47,14 +48,14 @@ func TestEntries(t *testing.T) {
 		t.Log(err)
 		t.FailNow()
 	}
-	GetOasGeneratorInstance().Start()
+	GetDefaultOasGeneratorInstance().Start()
 	loadStartingOAS("test_artifacts/catalogue.json", "catalogue")
 	loadStartingOAS("test_artifacts/trcc.json", "trcc-api-service")
 
 	go func() {
 		for {
 			time.Sleep(1 * time.Second)
-			GetOasGeneratorInstance().ServiceSpecs.Range(func(key, val interface{}) bool {
+			GetDefaultOasGeneratorInstance().GetServiceSpecs().Range(func(key, val interface{}) bool {
 				svc := key.(string)
 				t.Logf("Getting spec for %s", svc)
 				gen := val.(*SpecGen)
@@ -76,7 +77,7 @@ func TestEntries(t *testing.T) {
 	waitQueueProcessed()
 
 	svcs := strings.Builder{}
-	GetOasGeneratorInstance().ServiceSpecs.Range(func(key, val interface{}) bool {
+	GetDefaultOasGeneratorInstance().GetServiceSpecs().Range(func(key, val interface{}) bool {
 		gen := val.(*SpecGen)
 		svc := key.(string)
 		svcs.WriteString(svc + ",")
@@ -98,7 +99,7 @@ func TestEntries(t *testing.T) {
 		return true
 	})
 
-	GetOasGeneratorInstance().ServiceSpecs.Range(func(key, val interface{}) bool {
+	GetDefaultOasGeneratorInstance().GetServiceSpecs().Range(func(key, val interface{}) bool {
 		svc := key.(string)
 		gen := val.(*SpecGen)
 		spec, err := gen.GetSpec()
@@ -122,8 +123,8 @@ func TestEntries(t *testing.T) {
 }
 
 func TestFileSingle(t *testing.T) {
-	GetOasGeneratorInstance().Start()
-	GetOasGeneratorInstance().Reset()
+	GetDefaultOasGeneratorInstance().Start()
+	GetDefaultOasGeneratorInstance().Reset()
 	// loadStartingOAS()
 	file := "test_artifacts/params.har"
 	files := []string{file}
@@ -135,7 +136,7 @@ func TestFileSingle(t *testing.T) {
 
 	waitQueueProcessed()
 
-	GetOasGeneratorInstance().ServiceSpecs.Range(func(key, val interface{}) bool {
+	GetDefaultOasGeneratorInstance().GetServiceSpecs().Range(func(key, val interface{}) bool {
 		svc := key.(string)
 		gen := val.(*SpecGen)
 		spec, err := gen.GetSpec()
@@ -191,7 +192,7 @@ func TestFileSingle(t *testing.T) {
 func waitQueueProcessed() {
 	for {
 		time.Sleep(100 * time.Millisecond)
-		queue := len(GetOasGeneratorInstance().entriesChan)
+		queue := len(GetDefaultOasGeneratorInstance().entriesChan)
 		logger.Log.Infof("Queue: %d", queue)
 		if queue < 1 {
 			break
@@ -221,7 +222,7 @@ func loadStartingOAS(file string, label string) {
 	gen := NewGen(label)
 	gen.StartFromSpec(doc)
 
-	GetOasGeneratorInstance().ServiceSpecs.Store(label, gen)
+	GetDefaultOasGeneratorInstance().GetServiceSpecs().Store(label, gen)
 }
 
 func TestEntriesNegative(t *testing.T) {

agent/pkg/oas/tree_test.go

@@ -1,9 +1,10 @@
 package oas
 
 import (
-	"github.com/chanced/openapi"
 	"strings"
 	"testing"
+
+	"github.com/chanced/openapi"
 )
 
 func TestTree(t *testing.T) {

agent/pkg/resolver/loader.go

@@ -10,7 +10,7 @@ import (
 	restclient "k8s.io/client-go/rest"
 )
 
-func NewFromInCluster(errOut chan error, namesapce string) (*Resolver, error) {
+func NewFromInCluster(errOut chan error, namespace string) (*Resolver, error) {
 	config, err := restclient.InClusterConfig()
 	if err != nil {
 		return nil, err
@@ -19,5 +19,5 @@ func NewFromInCluster(errOut chan error, namesapce string) (*Resolver, error) {
 	if err != nil {
 		return nil, err
 	}
-	return &Resolver{clientConfig: config, clientSet: clientset, nameMap: cmap.New(), serviceMap: cmap.New(), errOut: errOut, namespace: namesapce}, nil
+	return &Resolver{clientConfig: config, clientSet: clientset, nameMap: cmap.New(), serviceMap: cmap.New(), errOut: errOut, namespace: namespace}, nil
 }

agent/pkg/resolver/resolver.go

@@ -168,11 +168,13 @@ func (resolver *Resolver) watchServices(ctx context.Context) error {
 
 func (resolver *Resolver) saveResolvedName(key string, resolved string, namespace string, eventType watch.EventType) {
 	if eventType == watch.Deleted {
+		resolver.nameMap.Remove(resolved)
 		resolver.nameMap.Remove(key)
 		logger.Log.Infof("setting %s=nil", key)
 	} else {
 
 		resolver.nameMap.Set(key, &ResolvedObjectInfo{FullAddress: resolved, Namespace: namespace})
+		resolver.nameMap.Set(resolved, &ResolvedObjectInfo{FullAddress: resolved, Namespace: namespace})
 		logger.Log.Infof("setting %s=%s", key, resolved)
 	}
 }

agent/pkg/servicemap/servicemap.go

@@ -13,28 +13,31 @@ const (
 	UnresolvedNodeName = "unresolved"
 )
 
-var instance *serviceMap
+var instance *defaultServiceMap
 var once sync.Once
 
-func GetInstance() ServiceMap {
+func GetDefaultServiceMapInstance() *defaultServiceMap {
 	once.Do(func() {
-		instance = newServiceMap()
+		instance = NewDefaultServiceMapGenerator()
 		logger.Log.Debug("Service Map Initialized")
 	})
 	return instance
 }
 
-type serviceMap struct {
+type defaultServiceMap struct {
 	enabled          bool
 	graph            *graph
 	entriesProcessed int
 }
 
+type ServiceMapSink interface {
+	NewTCPEntry(source *tapApi.TCP, destination *tapApi.TCP, protocol *tapApi.Protocol)
+}
+
 type ServiceMap interface {
 	Enable()
 	Disable()
 	IsEnabled() bool
-	NewTCPEntry(source *tapApi.TCP, destination *tapApi.TCP, protocol *tapApi.Protocol)
 	GetStatus() ServiceMapStatus
 	GetNodes() []ServiceMapNode
 	GetEdges() []ServiceMapEdge
@@ -44,8 +47,8 @@ type ServiceMap interface {
 	Reset()
 }
 
-func newServiceMap() *serviceMap {
-	return &serviceMap{
+func NewDefaultServiceMapGenerator() *defaultServiceMap {
+	return &defaultServiceMap{
 		enabled:          false,
 		entriesProcessed: 0,
 		graph:            newDirectedGraph(),
@@ -105,12 +108,12 @@ func newEdgeData(p *tapApi.Protocol) *edgeData {
 	}
 }
 
-func (s *serviceMap) nodeExists(k key) (*nodeData, bool) {
+func (s *defaultServiceMap) nodeExists(k key) (*nodeData, bool) {
 	n, ok := s.graph.Nodes[k]
 	return n, ok
 }
 
-func (s *serviceMap) addNode(k key, e *tapApi.TCP) (*nodeData, bool) {
+func (s *defaultServiceMap) addNode(k key, e *tapApi.TCP) (*nodeData, bool) {
 	nd, exists := s.nodeExists(k)
 	if !exists {
 		s.graph.Nodes[k] = newNodeData(len(s.graph.Nodes)+1, e)
@@ -119,7 +122,7 @@ func (s *serviceMap) addNode(k key, e *tapApi.TCP) (*nodeData, bool) {
 	return nd, false
 }
 
-func (s *serviceMap) addEdge(u, v *entryData, p *tapApi.Protocol) {
+func (s *defaultServiceMap) addEdge(u, v *entryData, p *tapApi.Protocol) {
 	if n, ok := s.addNode(u.key, u.entry); !ok {
 		n.count++
 	}
@@ -156,20 +159,20 @@ func (s *serviceMap) addEdge(u, v *entryData, p *tapApi.Protocol) {
 	s.entriesProcessed++
 }
 
-func (s *serviceMap) Enable() {
+func (s *defaultServiceMap) Enable() {
 	s.enabled = true
 }
 
-func (s *serviceMap) Disable() {
+func (s *defaultServiceMap) Disable() {
 	s.Reset()
 	s.enabled = false
 }
 
-func (s *serviceMap) IsEnabled() bool {
+func (s *defaultServiceMap) IsEnabled() bool {
 	return s.enabled
 }
 
-func (s *serviceMap) NewTCPEntry(src *tapApi.TCP, dst *tapApi.TCP, p *tapApi.Protocol) {
+func (s *defaultServiceMap) NewTCPEntry(src *tapApi.TCP, dst *tapApi.TCP, p *tapApi.Protocol) {
 	if !s.IsEnabled() {
 		return
 	}
@@ -206,7 +209,7 @@ func (s *serviceMap) NewTCPEntry(src *tapApi.TCP, dst *tapApi.TCP, p *tapApi.Pro
 	s.addEdge(srcEntry, dstEntry, p)
 }
 
-func (s *serviceMap) GetStatus() ServiceMapStatus {
+func (s *defaultServiceMap) GetStatus() ServiceMapStatus {
 	status := ServiceMapDisabled
 	if s.IsEnabled() {
 		status = ServiceMapEnabled
@@ -220,7 +223,7 @@ func (s *serviceMap) GetStatus() ServiceMapStatus {
 	}
 }
 
-func (s *serviceMap) GetNodes() []ServiceMapNode {
+func (s *defaultServiceMap) GetNodes() []ServiceMapNode {
 	var nodes []ServiceMapNode
 	for i, n := range s.graph.Nodes {
 		nodes = append(nodes, ServiceMapNode{
@@ -233,7 +236,7 @@ func (s *serviceMap) GetNodes() []ServiceMapNode {
 	return nodes
 }
 
-func (s *serviceMap) GetEdges() []ServiceMapEdge {
+func (s *defaultServiceMap) GetEdges() []ServiceMapEdge {
 	var edges []ServiceMapEdge
 	for u, m := range s.graph.Edges {
 		for v := range m {
@@ -260,15 +263,15 @@ func (s *serviceMap) GetEdges() []ServiceMapEdge {
 	return edges
 }
 
-func (s *serviceMap) GetEntriesProcessedCount() int {
+func (s *defaultServiceMap) GetEntriesProcessedCount() int {
 	return s.entriesProcessed
 }
 
-func (s *serviceMap) GetNodesCount() int {
+func (s *defaultServiceMap) GetNodesCount() int {
 	return len(s.graph.Nodes)
 }
 
-func (s *serviceMap) GetEdgesCount() int {
+func (s *defaultServiceMap) GetEdgesCount() int {
 	var count int
 	for u, m := range s.graph.Edges {
 		for v := range m {
@@ -280,7 +283,7 @@ func (s *serviceMap) GetEdgesCount() int {
 	return count
 }
 
-func (s *serviceMap) Reset() {
+func (s *defaultServiceMap) Reset() {
 	s.entriesProcessed = 0
 	s.graph = newDirectedGraph()
 }

agent/pkg/servicemap/servicemap_test.go

@@ -80,21 +80,21 @@ var (
 type ServiceMapDisabledSuite struct {
 	suite.Suite
 
-	instance ServiceMap
+	instance *defaultServiceMap
 }
 
 type ServiceMapEnabledSuite struct {
 	suite.Suite
 
-	instance ServiceMap
+	instance *defaultServiceMap
 }
 
 func (s *ServiceMapDisabledSuite) SetupTest() {
-	s.instance = GetInstance()
+	s.instance = GetDefaultServiceMapInstance()
 }
 
 func (s *ServiceMapEnabledSuite) SetupTest() {
-	s.instance = GetInstance()
+	s.instance = GetDefaultServiceMapInstance()
 	s.instance.Enable()
 }
 
@@ -107,7 +107,7 @@ func (s *ServiceMapDisabledSuite) TestServiceMapInstance() {
 func (s *ServiceMapDisabledSuite) TestServiceMapSingletonInstance() {
 	assert := s.Assert()
 
-	instance2 := GetInstance()
+	instance2 := GetDefaultServiceMapInstance()
 
 	assert.NotNil(s.instance)
 	assert.NotNil(instance2)

tap/api/api.go

@@ -48,6 +48,16 @@ type Extension struct {
 	Dissector Dissector
 }
 
+type Capture string
+
+const (
+	UndefinedCapture Capture = ""
+	Pcap             Capture = "pcap"
+	Envoy            Capture = "envoy"
+	Linkerd          Capture = "linkerd"
+	Ebpf             Capture = "ebpf"
+)
+
 type ConnectionInfo struct {
 	ClientIP   string
 	ClientPort string
@@ -84,6 +94,7 @@ type RequestResponsePair struct {
 // `Protocol` is modified in the later stages of data propagation. Therefore it's not a pointer.
 type OutputChannelItem struct {
 	Protocol       Protocol
+	Capture        Capture
 	Timestamp      int64
 	ConnectionInfo *ConnectionInfo
 	Pair           *RequestResponsePair
@@ -102,7 +113,7 @@ type SuperIdentifier struct {
 type Dissector interface {
 	Register(*Extension)
 	Ping()
-	Dissect(b *bufio.Reader, isClient bool, tcpID *TcpID, counterPair *CounterPair, superTimer *SuperTimer, superIdentifier *SuperIdentifier, emitter Emitter, options *TrafficFilteringOptions, reqResMatcher RequestResponseMatcher) error
+	Dissect(b *bufio.Reader, capture Capture, isClient bool, tcpID *TcpID, counterPair *CounterPair, superTimer *SuperTimer, superIdentifier *SuperIdentifier, emitter Emitter, options *TrafficFilteringOptions, reqResMatcher RequestResponseMatcher) error
 	Analyze(item *OutputChannelItem, resolvedSource string, resolvedDestination string, namespace string) *Entry
 	Summarize(entry *Entry) *BaseEntry
 	Represent(request map[string]interface{}, response map[string]interface{}) (object []byte, bodySize int64, err error)
@@ -132,6 +143,7 @@ func (e *Emitting) Emit(item *OutputChannelItem) {
 type Entry struct {
 	Id                     uint                   `json:"id"`
 	Protocol               Protocol               `json:"proto"`
+	Capture                Capture                `json:"capture"`
 	Source                 *TCP                   `json:"src"`
 	Destination            *TCP                   `json:"dst"`
 	Namespace              string                 `json:"namespace,omitempty"`
@@ -162,6 +174,7 @@ type EntryWrapper struct {
 type BaseEntry struct {
 	Id             uint            `json:"id"`
 	Protocol       Protocol        `json:"proto,omitempty"`
+	Capture        Capture         `json:"capture"`
 	Summary        string          `json:"summary,omitempty"`
 	SummaryQuery   string          `json:"summaryQuery,omitempty"`
 	Status         int             `json:"status"`

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/expect3/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/expect4/amqp/\* expect

tap/extensions/amqp/helpers.go

@@ -94,7 +94,7 @@ type AMQPWrapper struct {
 	Details interface{} `json:"details"`
 }
 
-func emitAMQP(event interface{}, _type string, method string, connectionInfo *api.ConnectionInfo, captureTime time.Time, emitter api.Emitter) {
+func emitAMQP(event interface{}, _type string, method string, connectionInfo *api.ConnectionInfo, captureTime time.Time, emitter api.Emitter, capture api.Capture) {
 	request := &api.GenericMessage{
 		IsRequest:   true,
 		CaptureTime: captureTime,
@@ -108,6 +108,7 @@ func emitAMQP(event interface{}, _type string, method string, connectionInfo *ap
 	}
 	item := &api.OutputChannelItem{
 		Protocol:       protocol,
+		Capture:        capture,
 		Timestamp:      captureTime.UnixNano() / int64(time.Millisecond),
 		ConnectionInfo: connectionInfo,
 		Pair: &api.RequestResponsePair{

tap/extensions/amqp/main.go

@@ -39,7 +39,7 @@ func (d dissecting) Ping() {
 
 const amqpRequest string = "amqp_request"
 
-func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, superIdentifier *api.SuperIdentifier, emitter api.Emitter, options *api.TrafficFilteringOptions, _reqResMatcher api.RequestResponseMatcher) error {
+func (d dissecting) Dissect(b *bufio.Reader, capture api.Capture, isClient bool, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, superIdentifier *api.SuperIdentifier, emitter api.Emitter, options *api.TrafficFilteringOptions, _reqResMatcher api.RequestResponseMatcher) error {
 	r := AmqpReader{b}
 
 	var remaining int
@@ -113,11 +113,11 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 			case *BasicPublish:
 				eventBasicPublish.Body = f.Body
 				superIdentifier.Protocol = &protocol
-				emitAMQP(*eventBasicPublish, amqpRequest, basicMethodMap[40], connectionInfo, superTimer.CaptureTime, emitter)
+				emitAMQP(*eventBasicPublish, amqpRequest, basicMethodMap[40], connectionInfo, superTimer.CaptureTime, emitter, capture)
 			case *BasicDeliver:
 				eventBasicDeliver.Body = f.Body
 				superIdentifier.Protocol = &protocol
-				emitAMQP(*eventBasicDeliver, amqpRequest, basicMethodMap[60], connectionInfo, superTimer.CaptureTime, emitter)
+				emitAMQP(*eventBasicDeliver, amqpRequest, basicMethodMap[60], connectionInfo, superTimer.CaptureTime, emitter, capture)
 			}
 
 		case *MethodFrame:
@@ -138,7 +138,7 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 					Arguments:  m.Arguments,
 				}
 				superIdentifier.Protocol = &protocol
-				emitAMQP(*eventQueueBind, amqpRequest, queueMethodMap[20], connectionInfo, superTimer.CaptureTime, emitter)
+				emitAMQP(*eventQueueBind, amqpRequest, queueMethodMap[20], connectionInfo, superTimer.CaptureTime, emitter, capture)
 
 			case *BasicConsume:
 				eventBasicConsume := &BasicConsume{
@@ -151,7 +151,7 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 					Arguments:   m.Arguments,
 				}
 				superIdentifier.Protocol = &protocol
-				emitAMQP(*eventBasicConsume, amqpRequest, basicMethodMap[20], connectionInfo, superTimer.CaptureTime, emitter)
+				emitAMQP(*eventBasicConsume, amqpRequest, basicMethodMap[20], connectionInfo, superTimer.CaptureTime, emitter, capture)
 
 			case *BasicDeliver:
 				eventBasicDeliver.ConsumerTag = m.ConsumerTag
@@ -171,7 +171,7 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 					Arguments:  m.Arguments,
 				}
 				superIdentifier.Protocol = &protocol
-				emitAMQP(*eventQueueDeclare, amqpRequest, queueMethodMap[10], connectionInfo, superTimer.CaptureTime, emitter)
+				emitAMQP(*eventQueueDeclare, amqpRequest, queueMethodMap[10], connectionInfo, superTimer.CaptureTime, emitter, capture)
 
 			case *ExchangeDeclare:
 				eventExchangeDeclare := &ExchangeDeclare{
@@ -185,7 +185,7 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 					Arguments:  m.Arguments,
 				}
 				superIdentifier.Protocol = &protocol
-				emitAMQP(*eventExchangeDeclare, amqpRequest, exchangeMethodMap[10], connectionInfo, superTimer.CaptureTime, emitter)
+				emitAMQP(*eventExchangeDeclare, amqpRequest, exchangeMethodMap[10], connectionInfo, superTimer.CaptureTime, emitter, capture)
 
 			case *ConnectionStart:
 				eventConnectionStart := &ConnectionStart{
@@ -196,7 +196,7 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 					Locales:          m.Locales,
 				}
 				superIdentifier.Protocol = &protocol
-				emitAMQP(*eventConnectionStart, amqpRequest, connectionMethodMap[10], connectionInfo, superTimer.CaptureTime, emitter)
+				emitAMQP(*eventConnectionStart, amqpRequest, connectionMethodMap[10], connectionInfo, superTimer.CaptureTime, emitter, capture)
 
 			case *ConnectionClose:
 				eventConnectionClose := &ConnectionClose{
@@ -206,7 +206,7 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 					MethodId:  m.MethodId,
 				}
 				superIdentifier.Protocol = &protocol
-				emitAMQP(*eventConnectionClose, amqpRequest, connectionMethodMap[50], connectionInfo, superTimer.CaptureTime, emitter)
+				emitAMQP(*eventConnectionClose, amqpRequest, connectionMethodMap[50], connectionInfo, superTimer.CaptureTime, emitter, capture)
 			}
 
 		default:
@@ -222,6 +222,7 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, resolvedSource string,
 	reqDetails["method"] = request["method"]
 	return &api.Entry{
 		Protocol: protocol,
+		Capture:  item.Capture,
 		Source: &api.TCP{
 			Name: resolvedSource,
 			IP:   item.ConnectionInfo.ClientIP,
@@ -283,6 +284,7 @@ func (d dissecting) Summarize(entry *api.Entry) *api.BaseEntry {
 	return &api.BaseEntry{
 		Id:             entry.Id,
 		Protocol:       entry.Protocol,
+		Capture:        entry.Capture,
 		Summary:        summary,
 		SummaryQuery:   summaryQuery,
 		Status:         0,

tap/extensions/amqp/main_test.go

@@ -122,7 +122,7 @@ func TestDissect(t *testing.T) {
 			DstPort: "2",
 		}
 		reqResMatcher := dissector.NewResponseRequestMatcher()
-		err = dissector.Dissect(bufferClient, true, tcpIDClient, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
+		err = dissector.Dissect(bufferClient, api.Pcap, true, tcpIDClient, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
 		if err != nil && err != io.EOF && err != io.ErrUnexpectedEOF {
 			panic(err)
 		}
@@ -140,7 +140,7 @@ func TestDissect(t *testing.T) {
 			SrcPort: "2",
 			DstPort: "1",
 		}
-		err = dissector.Dissect(bufferServer, false, tcpIDServer, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
+		err = dissector.Dissect(bufferServer, api.Pcap, false, tcpIDServer, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
 		if err != nil && err != io.EOF && err != io.ErrUnexpectedEOF {
 			panic(err)
 		}

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/expect3/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/expect4/http/\* expect

tap/extensions/http/handlers.go

@@ -47,7 +47,7 @@ func replaceForwardedFor(item *api.OutputChannelItem) {
 	item.ConnectionInfo.ClientPort = ""
 }
 
-func handleHTTP2Stream(http2Assembler *Http2Assembler, tcpID *api.TcpID, superTimer *api.SuperTimer, emitter api.Emitter, options *api.TrafficFilteringOptions, reqResMatcher *requestResponseMatcher) error {
+func handleHTTP2Stream(http2Assembler *Http2Assembler, capture api.Capture, tcpID *api.TcpID, superTimer *api.SuperTimer, emitter api.Emitter, options *api.TrafficFilteringOptions, reqResMatcher *requestResponseMatcher) error {
 	streamID, messageHTTP1, isGrpc, err := http2Assembler.readMessage()
 	if err != nil {
 		return err
@@ -104,13 +104,14 @@ func handleHTTP2Stream(http2Assembler *Http2Assembler, tcpID *api.TcpID, superTi
 		} else {
 			item.Protocol = http2Protocol
 		}
+		item.Capture = capture
 		filterAndEmit(item, emitter, options)
 	}
 
 	return nil
 }
 
-func handleHTTP1ClientStream(b *bufio.Reader, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, options *api.TrafficFilteringOptions, reqResMatcher *requestResponseMatcher) (switchingProtocolsHTTP2 bool, req *http.Request, err error) {
+func handleHTTP1ClientStream(b *bufio.Reader, capture api.Capture, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, options *api.TrafficFilteringOptions, reqResMatcher *requestResponseMatcher) (switchingProtocolsHTTP2 bool, req *http.Request, err error) {
 	req, err = http.ReadRequest(b)
 	if err != nil {
 		return
@@ -147,12 +148,13 @@ func handleHTTP1ClientStream(b *bufio.Reader, tcpID *api.TcpID, counterPair *api
 			ServerPort: tcpID.DstPort,
 			IsOutgoing: true,
 		}
+		item.Capture = capture
 		filterAndEmit(item, emitter, options)
 	}
 	return
 }
 
-func handleHTTP1ServerStream(b *bufio.Reader, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, options *api.TrafficFilteringOptions, reqResMatcher *requestResponseMatcher) (switchingProtocolsHTTP2 bool, err error) {
+func handleHTTP1ServerStream(b *bufio.Reader, capture api.Capture, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, options *api.TrafficFilteringOptions, reqResMatcher *requestResponseMatcher) (switchingProtocolsHTTP2 bool, err error) {
 	var res *http.Response
 	res, err = http.ReadResponse(b, nil)
 	if err != nil {
@@ -190,6 +192,7 @@ func handleHTTP1ServerStream(b *bufio.Reader, tcpID *api.TcpID, counterPair *api
 			ServerPort: tcpID.SrcPort,
 			IsOutgoing: false,
 		}
+		item.Capture = capture
 		filterAndEmit(item, emitter, options)
 	}
 	return

tap/extensions/http/main.go

@@ -86,7 +86,7 @@ func (d dissecting) Ping() {
 	log.Printf("pong %s", http11protocol.Name)
 }
 
-func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, superIdentifier *api.SuperIdentifier, emitter api.Emitter, options *api.TrafficFilteringOptions, _reqResMatcher api.RequestResponseMatcher) error {
+func (d dissecting) Dissect(b *bufio.Reader, capture api.Capture, isClient bool, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, superIdentifier *api.SuperIdentifier, emitter api.Emitter, options *api.TrafficFilteringOptions, _reqResMatcher api.RequestResponseMatcher) error {
 	reqResMatcher := _reqResMatcher.(*requestResponseMatcher)
 
 	var err error
@@ -121,7 +121,7 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 		}
 
 		if isHTTP2 {
-			err = handleHTTP2Stream(http2Assembler, tcpID, superTimer, emitter, options, reqResMatcher)
+			err = handleHTTP2Stream(http2Assembler, capture, tcpID, superTimer, emitter, options, reqResMatcher)
 			if err == io.EOF || err == io.ErrUnexpectedEOF {
 				break
 			} else if err != nil {
@@ -130,7 +130,7 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 			superIdentifier.Protocol = &http11protocol
 		} else if isClient {
 			var req *http.Request
-			switchingProtocolsHTTP2, req, err = handleHTTP1ClientStream(b, tcpID, counterPair, superTimer, emitter, options, reqResMatcher)
+			switchingProtocolsHTTP2, req, err = handleHTTP1ClientStream(b, capture, tcpID, counterPair, superTimer, emitter, options, reqResMatcher)
 			if err == io.EOF || err == io.ErrUnexpectedEOF {
 				break
 			} else if err != nil {
@@ -157,11 +157,12 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 						ServerPort: tcpID.DstPort,
 						IsOutgoing: true,
 					}
+					item.Capture = capture
 					filterAndEmit(item, emitter, options)
 				}
 			}
 		} else {
-			switchingProtocolsHTTP2, err = handleHTTP1ServerStream(b, tcpID, counterPair, superTimer, emitter, options, reqResMatcher)
+			switchingProtocolsHTTP2, err = handleHTTP1ServerStream(b, capture, tcpID, counterPair, superTimer, emitter, options, reqResMatcher)
 			if err == io.EOF || err == io.ErrUnexpectedEOF {
 				break
 			} else if err != nil {
@@ -259,6 +260,7 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, resolvedSource string,
 	httpPair, _ := json.Marshal(item.Pair)
 	return &api.Entry{
 		Protocol: item.Protocol,
+		Capture:  item.Capture,
 		Source: &api.TCP{
 			Name: resolvedSource,
 			IP:   item.ConnectionInfo.ClientIP,
@@ -291,6 +293,7 @@ func (d dissecting) Summarize(entry *api.Entry) *api.BaseEntry {
 	return &api.BaseEntry{
 		Id:             entry.Id,
 		Protocol:       entry.Protocol,
+		Capture:        entry.Capture,
 		Summary:        summary,
 		SummaryQuery:   summaryQuery,
 		Status:         status,

tap/extensions/http/main_test.go

@@ -124,7 +124,7 @@ func TestDissect(t *testing.T) {
 			DstPort: "2",
 		}
 		reqResMatcher := dissector.NewResponseRequestMatcher()
-		err = dissector.Dissect(bufferClient, true, tcpIDClient, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
+		err = dissector.Dissect(bufferClient, api.Pcap, true, tcpIDClient, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
 		if err != nil && err != io.EOF && err != io.ErrUnexpectedEOF {
 			panic(err)
 		}
@@ -142,7 +142,7 @@ func TestDissect(t *testing.T) {
 			SrcPort: "2",
 			DstPort: "1",
 		}
-		err = dissector.Dissect(bufferServer, false, tcpIDServer, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
+		err = dissector.Dissect(bufferServer, api.Pcap, false, tcpIDServer, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
 		if err != nil && err != io.EOF && err != io.ErrUnexpectedEOF {
 			panic(err)
 		}

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/expect3/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/expect4/kafka/\* expect

tap/extensions/kafka/main.go

@@ -35,7 +35,7 @@ func (d dissecting) Ping() {
 	log.Printf("pong %s", _protocol.Name)
 }
 
-func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, superIdentifier *api.SuperIdentifier, emitter api.Emitter, options *api.TrafficFilteringOptions, _reqResMatcher api.RequestResponseMatcher) error {
+func (d dissecting) Dissect(b *bufio.Reader, capture api.Capture, isClient bool, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, superIdentifier *api.SuperIdentifier, emitter api.Emitter, options *api.TrafficFilteringOptions, _reqResMatcher api.RequestResponseMatcher) error {
 	reqResMatcher := _reqResMatcher.(*requestResponseMatcher)
 	for {
 		if superIdentifier.Protocol != nil && superIdentifier.Protocol != &_protocol {
@@ -49,7 +49,7 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 			}
 			superIdentifier.Protocol = &_protocol
 		} else {
-			err := ReadResponse(b, tcpID, counterPair, superTimer, emitter, reqResMatcher)
+			err := ReadResponse(b, capture, tcpID, counterPair, superTimer, emitter, reqResMatcher)
 			if err != nil {
 				return err
 			}
@@ -68,6 +68,7 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, resolvedSource string,
 	}
 	return &api.Entry{
 		Protocol: _protocol,
+		Capture:  item.Capture,
 		Source: &api.TCP{
 			Name: resolvedSource,
 			IP:   item.ConnectionInfo.ClientIP,
@@ -190,6 +191,7 @@ func (d dissecting) Summarize(entry *api.Entry) *api.BaseEntry {
 	return &api.BaseEntry{
 		Id:             entry.Id,
 		Protocol:       entry.Protocol,
+		Capture:        entry.Capture,
 		Summary:        summary,
 		SummaryQuery:   summaryQuery,
 		Status:         status,

tap/extensions/kafka/main_test.go

@@ -123,7 +123,7 @@ func TestDissect(t *testing.T) {
 		}
 		reqResMatcher := dissector.NewResponseRequestMatcher()
 		reqResMatcher.SetMaxTry(10)
-		err = dissector.Dissect(bufferClient, true, tcpIDClient, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
+		err = dissector.Dissect(bufferClient, api.Pcap, true, tcpIDClient, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
 		if err != nil && err != io.EOF && err != io.ErrUnexpectedEOF {
 			log.Println(err)
 		}
@@ -141,7 +141,7 @@ func TestDissect(t *testing.T) {
 			SrcPort: "2",
 			DstPort: "1",
 		}
-		err = dissector.Dissect(bufferServer, false, tcpIDServer, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
+		err = dissector.Dissect(bufferServer, api.Pcap, false, tcpIDServer, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
 		if err != nil && err != io.EOF && err != io.ErrUnexpectedEOF {
 			log.Println(err)
 		}

tap/extensions/kafka/response.go

@@ -16,7 +16,7 @@ type Response struct {
 	CaptureTime   time.Time   `json:"captureTime"`
 }
 
-func ReadResponse(r io.Reader, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, reqResMatcher *requestResponseMatcher) (err error) {
+func ReadResponse(r io.Reader, capture api.Capture, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, reqResMatcher *requestResponseMatcher) (err error) {
 	d := &decoder{reader: r, remain: 4}
 	size := d.readInt32()
 
@@ -258,6 +258,7 @@ func ReadResponse(r io.Reader, tcpID *api.TcpID, counterPair *api.CounterPair, s
 
 	item := &api.OutputChannelItem{
 		Protocol:       _protocol,
+		Capture:        capture,
 		Timestamp:      reqResPair.Request.CaptureTime.UnixNano() / int64(time.Millisecond),
 		ConnectionInfo: connectionInfo,
 		Pair: &api.RequestResponsePair{

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/expect3/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/expect4/redis/\* expect

tap/extensions/redis/handlers.go

@@ -6,7 +6,7 @@ import (
 	"github.com/up9inc/mizu/tap/api"
 )
 
-func handleClientStream(tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, request *RedisPacket, reqResMatcher *requestResponseMatcher) error {
+func handleClientStream(capture api.Capture, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, request *RedisPacket, reqResMatcher *requestResponseMatcher) error {
 	counterPair.Lock()
 	counterPair.Request++
 	requestCounter := counterPair.Request
@@ -23,6 +23,7 @@ func handleClientStream(tcpID *api.TcpID, counterPair *api.CounterPair, superTim
 
 	item := reqResMatcher.registerRequest(ident, request, superTimer.CaptureTime)
 	if item != nil {
+		item.Capture = capture
 		item.ConnectionInfo = &api.ConnectionInfo{
 			ClientIP:   tcpID.SrcIP,
 			ClientPort: tcpID.SrcPort,
@@ -35,7 +36,7 @@ func handleClientStream(tcpID *api.TcpID, counterPair *api.CounterPair, superTim
 	return nil
 }
 
-func handleServerStream(tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, response *RedisPacket, reqResMatcher *requestResponseMatcher) error {
+func handleServerStream(capture api.Capture, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, emitter api.Emitter, response *RedisPacket, reqResMatcher *requestResponseMatcher) error {
 	counterPair.Lock()
 	counterPair.Response++
 	responseCounter := counterPair.Response
@@ -52,6 +53,7 @@ func handleServerStream(tcpID *api.TcpID, counterPair *api.CounterPair, superTim
 
 	item := reqResMatcher.registerResponse(ident, response, superTimer.CaptureTime)
 	if item != nil {
+		item.Capture = capture
 		item.ConnectionInfo = &api.ConnectionInfo{
 			ClientIP:   tcpID.DstIP,
 			ClientPort: tcpID.DstPort,

tap/extensions/redis/main.go

@@ -34,7 +34,7 @@ func (d dissecting) Ping() {
 	log.Printf("pong %s", protocol.Name)
 }
 
-func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, superIdentifier *api.SuperIdentifier, emitter api.Emitter, options *api.TrafficFilteringOptions, _reqResMatcher api.RequestResponseMatcher) error {
+func (d dissecting) Dissect(b *bufio.Reader, capture api.Capture, isClient bool, tcpID *api.TcpID, counterPair *api.CounterPair, superTimer *api.SuperTimer, superIdentifier *api.SuperIdentifier, emitter api.Emitter, options *api.TrafficFilteringOptions, _reqResMatcher api.RequestResponseMatcher) error {
 	reqResMatcher := _reqResMatcher.(*requestResponseMatcher)
 	is := &RedisInputStream{
 		Reader: b,
@@ -48,9 +48,9 @@ func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, co
 		}
 
 		if isClient {
-			err = handleClientStream(tcpID, counterPair, superTimer, emitter, redisPacket, reqResMatcher)
+			err = handleClientStream(capture, tcpID, counterPair, superTimer, emitter, redisPacket, reqResMatcher)
 		} else {
-			err = handleServerStream(tcpID, counterPair, superTimer, emitter, redisPacket, reqResMatcher)
+			err = handleServerStream(capture, tcpID, counterPair, superTimer, emitter, redisPacket, reqResMatcher)
 		}
 
 		if err != nil {
@@ -71,6 +71,7 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, resolvedSource string,
 	}
 	return &api.Entry{
 		Protocol: protocol,
+		Capture:  item.Capture,
 		Source: &api.TCP{
 			Name: resolvedSource,
 			IP:   item.ConnectionInfo.ClientIP,
@@ -113,6 +114,7 @@ func (d dissecting) Summarize(entry *api.Entry) *api.BaseEntry {
 	return &api.BaseEntry{
 		Id:             entry.Id,
 		Protocol:       entry.Protocol,
+		Capture:        entry.Capture,
 		Summary:        summary,
 		SummaryQuery:   summaryQuery,
 		Status:         status,

tap/extensions/redis/main_test.go

@@ -123,7 +123,7 @@ func TestDissect(t *testing.T) {
 			DstPort: "2",
 		}
 		reqResMatcher := dissector.NewResponseRequestMatcher()
-		err = dissector.Dissect(bufferClient, true, tcpIDClient, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
+		err = dissector.Dissect(bufferClient, api.Pcap, true, tcpIDClient, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
 		if err != nil && reflect.TypeOf(err) != reflect.TypeOf(&ConnectError{}) && err != io.EOF && err != io.ErrUnexpectedEOF {
 			log.Println(err)
 		}
@@ -141,7 +141,7 @@ func TestDissect(t *testing.T) {
 			SrcPort: "2",
 			DstPort: "1",
 		}
-		err = dissector.Dissect(bufferServer, false, tcpIDServer, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
+		err = dissector.Dissect(bufferServer, api.Pcap, false, tcpIDServer, counterPair, &api.SuperTimer{}, superIdentifier, emitter, options, reqResMatcher)
 		if err != nil && reflect.TypeOf(err) != reflect.TypeOf(&ConnectError{}) && err != io.EOF && err != io.ErrUnexpectedEOF {
 			log.Println(err)
 		}

tap/tcp_reader.go

@@ -95,7 +95,8 @@ func (h *tcpReader) Close() {
 func (h *tcpReader) run(wg *sync.WaitGroup) {
 	defer wg.Done()
 	b := bufio.NewReader(h)
-	err := h.extension.Dissector.Dissect(b, h.isClient, h.tcpID, h.counterPair, h.superTimer, h.parent.superIdentifier, h.emitter, filteringOptions, h.reqResMatcher)
+	// TODO: Add api.Pcap, api.Envoy and api.Linkerd distinction by refactoring NewPacketSourceManager method
+	err := h.extension.Dissector.Dissect(b, api.Pcap, h.isClient, h.tcpID, h.counterPair, h.superTimer, h.parent.superIdentifier, h.emitter, filteringOptions, h.reqResMatcher)
 	if err != nil {
 		_, err = io.Copy(ioutil.Discard, b)
 		if err != nil {

tap/tlstapper/tls_poller.go

@@ -158,7 +158,7 @@ func dissect(extension *api.Extension, reader *tlsReader, isRequest bool, tcpid
 	emitter api.Emitter, options *api.TrafficFilteringOptions, reqResMatcher api.RequestResponseMatcher) {
 	b := bufio.NewReader(reader)
 
-	err := extension.Dissector.Dissect(b, isRequest, tcpid, &api.CounterPair{},
+	err := extension.Dissector.Dissect(b, api.Ebpf, isRequest, tcpid, &api.CounterPair{},
 		&api.SuperTimer{}, &api.SuperIdentifier{}, emitter, options, reqResMatcher)
 
 	if err != nil {

ui-common/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

ui-common/.eslintignore

@@ -0,0 +1,6 @@
+build/
+dist/
+src/
+node_modules/
+.snapshots/
+*.min.js

ui-common/.eslintrc

@@ -0,0 +1,34 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "standard",
+    "standard-react",
+    "plugin:prettier/recommended",
+    "prettier/standard",
+    "prettier/react",
+    "plugin:@typescript-eslint/eslint-recommended"
+  ],
+  "env": {
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "legacyDecorators": true,
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "16"
+    }
+  },
+  "rules": {
+    "space-before-function-paren": 0,
+    "react/prop-types": 0,
+    "react/jsx-handler-names": 0,
+    "react/jsx-fragments": 0,
+    "react/no-unused-prop-types": 0,
+    "import/export": 0
+  }
+}

ui-common/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

ui-common/.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - 12
+  - 10

ui-common/README.md

@@ -0,0 +1,30 @@
+# mizu-common
+
+> Made with create-react-library
+
+[![NPM](https://img.shields.io/npm/v/liraz-test.svg)](https://www.npmjs.com/package/liraz-test) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save @up9/mizu-common
+```
+
+## Usage
+
+```tsx
+import React, { Component } from 'react'
+
+import MyComponent from 'l@up9/mizu-common'
+import '@up9/mizu-common/dist/index.css'
+
+class Example extends Component {
+  render() {
+    return <MyComponent />
+  }
+}
+```
+
+## License
+
+MIT © [](https://github.com/)

ui-common/example/README.md

@@ -0,0 +1,5 @@
+This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+It is linked to the liraz-test package in the parent directory for development purposes.
+
+You can run `npm install` and then `npm start` to test your package.

ui-common/example/craco.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  webpack: {
+      configure: (webpackConfig) => {
+          const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
+              (plugin) => plugin.options && plugin.options.ignoreOrder != null,
+          );
+          if(instanceOfMiniCssExtractPlugin)
+              instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
+
+          return webpackConfig;
+      }
+  }
+}

ui-common/example/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@up9/mizu-common-example",
+  "homepage": ".",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "craco start",
+    "comment-start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
+    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
+    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
+    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
+  },
+  "dependencies": {
+    "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
+    "@testing-library/react": "file:../node_modules/@testing-library/react",
+    "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
+    "@types/jest": "file:../node_modules/@types/jest",
+    "@types/node": "file:../node_modules/@types/node",
+    "@types/react": "file:../node_modules/@types/react",
+    "@types/react-dom": "file:../node_modules/@types/react-dom",
+    "@up9/mizu-common": "file:..",
+    "react": "file:../node_modules/react",
+    "react-dom": "file:../node_modules/react-dom"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+    "@craco/craco": "^6.4.3",
+    "eslint": "^7.11.0",
+    "node-sass": "^6.0.0",
+    "recoil": "^0.5.2",
+    "react-scripts": "^4.0.3"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

ui-common/example/public/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>@up9/mizu-common</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

ui-common/example/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "@up9/mizu-common",
+  "name": "@up9/mizu-common",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

ui-common/example/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

ui-common/example/src/App.tsx

@@ -0,0 +1,25 @@
+import TrafficViewer,{useWS, DEFAULT_QUERY} from '@up9/mizu-common';
+import "@up9/mizu-common/dist/index.css"
+import {useEffect} from 'react';
+import Api, {getWebsocketUrl} from "./api";
+
+const api = Api.getInstance()
+
+const App = () => {
+  const {message,error,isOpen, openSocket, closeSocket, sendQueryWhenWsOpen} = useWS(getWebsocketUrl())
+  const trafficViewerApi = {...api, webSocket:{open : openSocket, close: closeSocket, sendQueryWhenWsOpen: sendQueryWhenWsOpen}}
+  sendQueryWhenWsOpen(DEFAULT_QUERY);
+
+  useEffect(() => {
+    return () =>{
+      closeSocket()
+    }
+  },[])
+
+  return <>
+    <TrafficViewer message={message} error={error} isWebSocketOpen={isOpen}
+                   trafficViewerApiProp={trafficViewerApi} ></TrafficViewer>
+  </>
+}
+
+export default App

ui-common/example/src/api.js

@@ -0,0 +1,124 @@
+import * as axios from "axios";
+
+export const MizuWebsocketURL = process.env.REACT_APP_OVERRIDE_WS_URL ? process.env.REACT_APP_OVERRIDE_WS_URL :
+    window.location.protocol === 'https:' ? `wss://${window.location.host}/ws` : `ws://${window.location.host}/ws`;
+
+export const FormValidationErrorType = "formError";
+
+const CancelToken = axios.CancelToken;
+
+const apiURL = process.env.REACT_APP_OVERRIDE_API_URL ? process.env.REACT_APP_OVERRIDE_API_URL : `${window.location.origin}/`;
+
+let token = null
+let client = null
+let source = null
+
+export default class Api {
+    static instance;
+
+    static getInstance() {
+        if (!Api.instance) {
+            Api.instance = new Api();
+        }
+        return Api.instance;
+    }
+
+    constructor() {
+        token = localStorage.getItem("token");
+
+        client = this.getAxiosClient();
+        source = null;
+    }
+
+    tapStatus = async () => {
+        const response = await client.get("/status/tap");
+        return response.data;
+    }
+
+
+    analyzeStatus = async () => {
+        const response = await client.get("/status/analyze");
+        return response.data;
+    }
+
+    getEntry = async (id, query) => {
+        const response = await client.get(`/entries/${id}?query=${query}`);
+        return response.data;
+    }
+
+    fetchEntries = async (leftOff, direction, query, limit, timeoutMs) => {
+        const response = await client.get(`/entries/?leftOff=${leftOff}&direction=${direction}&query=${query}&limit=${limit}&timeoutMs=${timeoutMs}`).catch(function (thrown) {
+            console.error(thrown.message);
+            return {};
+        });
+        return response.data;
+    }
+
+    getRecentTLSLinks = async () => {
+        const response = await client.get("/status/recentTLSLinks");
+        return response.data;
+    }
+
+    getOasServices = async () => {
+        const response = await client.get("/oas");
+        return response.data;
+    }
+
+    getOasByService = async (selectedService) => {
+        const response = await client.get(`/oas/${selectedService}`);
+        return response.data;
+    }
+
+    validateQuery = async (query) => {
+        if (source) {
+            source.cancel();
+        }
+        source = CancelToken.source();
+
+        const form = new FormData();
+        form.append('query', query)
+        const response = await client.post(`/query/validate`, form, {
+            cancelToken: source.token
+        }).catch(function (thrown) {
+            if (!axios.isCancel(thrown)) {
+                console.error('Validate error', thrown.message);
+            }
+        });
+
+        if (!response) {
+            return null;
+        }
+
+        return response.data;
+    }
+
+    persistToken = (tk) => {
+        token = tk;
+        client = this.getAxiosClient();
+        localStorage.setItem('token', token);
+    }
+
+    getAxiosClient = () => {
+        const headers = {
+            Accept: "application/json"
+        }
+
+        if (token) {
+            headers['x-session-token'] = `${token}`; // we use `x-session-token` instead of `Authorization` because the latter is reserved by kubectl proxy, making mizu view not work
+        }
+        return axios.create({
+            baseURL: apiURL,
+            timeout: 31000,
+            headers
+        });
+    }
+}
+
+export function getWebsocketUrl(){
+    let websocketUrl = MizuWebsocketURL;
+    if (token) {
+      websocketUrl += `/${token}`;
+    }
+
+    return websocketUrl;
+}

ui-common/example/src/index.css

@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

ui-common/example/src/index.tsx

@@ -0,0 +1,7 @@
+import './index.css'
+
+import ReactDOM from 'react-dom'
+import App from './App'
+
+
+ReactDOM.render(<App />, document.getElementById('root'))

ui-common/example/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

ui-common/example/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

ui-common/example/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "esnext",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": false,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+  
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "exmaple"
+  ]
+}

ui-common/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@up9/mizu-common",
+  "version": "1.0.128",
+  "description": "Made with create-react-library",
+  "author": "",
+  "license": "MIT",
+  "repository": "/mizu-common",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.tsx",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prepare": "run-s build",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint .",
+    "predeploy": "cd example && npm install && npm run build",
+    "deploy": "gh-pages -d example/build"
+  },
+  "peerDependencies": {
+    "@craco/craco": "^6.4.3",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "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"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.14.179",
+    "@uiw/react-textarea-code-editor": "^1.4.12",
+    "axios": "^0.25.0",
+    "core-js": "^3.20.2",
+    "highlight.js": "^11.3.1",
+    "json-beautify": "^1.1.1",
+    "jsonpath": "^1.1.1",
+    "marked": "^4.0.10",
+    "material-ui-popup-state": "^2.0.0",
+    "mobx": "^6.3.10",
+    "moment": "^2.29.1",
+    "node-fetch": "^3.1.1",
+    "numeral": "^2.0.6",
+    "protobuf-decoder": "^0.1.0",
+    "react-graph-vis": "^1.0.7",
+    "react-lowlight": "^3.0.0",
+    "react-router-dom": "^6.2.1",
+    "react-scrollable-feed-virtualized": "^1.4.9",
+    "react-syntax-highlighter": "^15.4.3",
+    "react-toastify": "^8.0.3",
+    "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"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@svgr/rollup": "^6.2.1",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "cross-env": "^7.0.2",
+    "env-cmd": "^10.0.1",
+    "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.4",
+    "rollup-plugin-import-css": "^3.0.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-sass": "^1.2.10",
+    "rollup-plugin-scss": "^3.0.0",
+    "react":"^17.0.2",
+    "react-dom": "^17.0.2",
+    "typescript": "^4.2.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "files": [
+    "dist"
+  ]
+}

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

@@ -0,0 +1,86 @@
+import {Button} from "@material-ui/core";
+import React from "react";
+import logo_up9 from "logo_up9.svg";
+import {makeStyles} from "@material-ui/core/styles";
+import { Tooltip } from "../UI";
+
+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>
+        <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>
+        </Tooltip>
+    </div>);
+}

ui-common/src/components/AnalyzeButton/logo_up9.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="prefix__logo" width="148" height="88" viewBox="0 0 148 88">
+    <defs>
+        <style>
+            .prefix__cls-1{fill:#070047}.prefix__cls-2{fill:#fff}.prefix__cls-4{fill:#8f9bb2}
+        </style>
+    </defs>
+    <g id="prefix__Group_4690_2_">
+        <path id="prefix__Path_2985_1_" d="M0 62.1a7.832 7.832 0 0 0 3.928 6.786l31.405 18.071a7.866 7.866 0 0 0 7.84 0L74.563 68.9a7.823 7.823 0 0 0 3.928-6.784v-36.2a7.828 7.828 0 0 0-3.926-6.782L43.175 1.052a7.869 7.869 0 0 0-7.86.006L3.914 19.217A7.827 7.827 0 0 0 0 25.994z" class="prefix__cls-1" transform="translate(0 -.004)"/>
+        <path id="prefix__Path_2986_2_" d="M55.987 134.68a.976.976 0 0 1-.008 1.7l-4.4 2.482-.033-.02-6.832 3.948a1.966 1.966 0 0 1-1.966 0l-8.83-5.09A7.818 7.818 0 0 1 30 130.927v-29.356a7.813 7.813 0 0 1 3.979-6.8l.443-.25a.984.984 0 0 1 1.339.369.964.964 0 0 1 .127.482v36.187a.979.979 0 0 0 .488.845l4.909 2.855a.984.984 0 0 0 .981 0l.063-.035a.977.977 0 0 0 0-1.7l-3.994-2.3a.978.978 0 0 1-.49-.847V93.654a1.955 1.955 0 0 1 .995-1.7l3.429-1.936a.986.986 0 0 1 1.339.369.962.962 0 0 1 .127.48v36.187a.978.978 0 0 0 .49.847z" class="prefix__cls-2" transform="translate(-24.126 -72.289)"/>
+        <path id="prefix__Path_2987_2_" d="M117.554 80.338a.981.981 0 0 1-.366-1.338.969.969 0 0 1 .37-.368l9.788-5.733a.981.981 0 0 0 .484-.846V37.572a1.961 1.961 0 0 0-2.951-1.694l-8.823 5.148-4.891 2.767a1.962 1.962 0 0 0-.995 1.707v36.849a.982.982 0 0 0 .49.85l12.246 7.086a1.965 1.965 0 0 0 1.991-.016l3.46-2.076a.983.983 0 0 0-.018-1.694zM116.532 47.6l3.924-2.356a.98.98 0 0 1 1.484.842v22.619a.982.982 0 0 1-.5.854l-3.924 2.224a.984.984 0 0 1-1.339-.37.97.97 0 0 1-.127-.484V48.447a1 1 0 0 1 .482-.847z" class="prefix__cls-2" transform="translate(-88.598 -28.638)"/>
+        <path id="prefix__Path_2988_2_" d="M133.819 43.492V77.9a.979.979 0 0 1-.49.848l-7.858 4.545a.978.978 0 0 0 0 1.693l10.8 6.235a.977.977 0 0 1 0 1.693l-20.607 11.9a.978.978 0 0 0 0 1.7l12.279 7.01a7.87 7.87 0 0 0 7.8 0l26.5-15.161a5.871 5.871 0 0 0 2.957-5.094V62.723a7.825 7.825 0 0 0-3.92-6.778L136.762 41.8a1.959 1.959 0 0 0-2.943 1.7zm24.037 42.144L140.684 75.7a1.957 1.957 0 0 1-.977-1.693V60.981a.983.983 0 0 1 1.472-.848l14.239 8.237a7.826 7.826 0 0 1 3.91 6.772v9.647a.979.979 0 0 1-.979.98.968.968 0 0 1-.493-.133z" transform="translate(-92.625 -33.401)" style="fill:#627ef7"/>
+        <path id="prefix__Path_2989_2_" d="M60.346 291.555l-4.4 2.491-.033-.02-6.832 3.963a1.963 1.963 0 0 1-1.968 0l-8.835-5.111a7.826 7.826 0 0 1-2.853-2.851l4.938-2.851a1 1 0 0 0 .37.384l4.909 2.865a.981.981 0 0 0 .981 0l.063-.035a.982.982 0 0 0 0-1.7l-3.986-2.306a.981.981 0 0 1-.352-.352l5.86-3.382a.99.99 0 0 0 .378.4l11.764 6.8a.981.981 0 0 1-.006 1.7z" class="prefix__cls-4" transform="translate(-28.493 -227.445)"/>
+        <path id="prefix__Path_2991_2_" d="M164.463 248.2a5.858 5.858 0 0 1-2.193 2.207l-26.5 15.2a7.854 7.854 0 0 1-7.8 0l-12.279-7.026a.983.983 0 0 1 0-1.7l16.187-9.375 4.419-2.559a.98.98 0 0 0 0-1.7l-4.419-2.557-6.392-3.69a.98.98 0 0 1 0-1.7l6.385-3.7 1.472-.854a.968.968 0 0 0 .333-.321z" transform="translate(-92.637 -185.485)" style="fill:#3b4c95"/>
+        <path id="prefix__Path_2992_2_" d="M128.9 265.267l-.525.313-2.933 1.762a1.965 1.965 0 0 1-1.991.016l-12.244-7.082a1.021 1.021 0 0 1-.206-.161.928.928 0 0 1-.151-.2v-.006l2.692-1.555 4.445-2.567a.762.762 0 0 0-.094.084.6.6 0 0 0-.08.092.035.035 0 0 0-.012.018.479.479 0 0 0-.055.084.316.316 0 0 0-.02.035c-.01.02-.02.039-.027.059a.369.369 0 0 0-.023.059.378.378 0 0 0-.022.067.08.08 0 0 0-.01.035.729.729 0 0 0-.018.09.974.974 0 0 0 .482 1l10.274 5.872.507.288a.979.979 0 0 1 .366 1.335 1 1 0 0 1-.355.362z" class="prefix__cls-4" transform="translate(-89.145 -205.825)"/>
+    </g>
+    <g id="prefix__Group_4695" data-name="Group 4695" transform="translate(72.538 19.232)">
+        <g id="prefix__Group_4694" data-name="Group 4694">
+            <g id="prefix__Group_4691" data-name="Group 4691">
+                <path id="prefix__Path_2993" d="M394.794 158.1a9.4 9.4 0 0 1-6.626-2.728 9.4 9.4 0 0 1-1.987-2.937 9.248 9.248 0 0 1-.74-3.687v-31.142a3.92 3.92 0 0 1 3.916-3.916h4.455a3.92 3.92 0 0 1 3.916 3.916v28.2h.54v-28.2a3.92 3.92 0 0 1 3.916-3.916h4.507a3.92 3.92 0 0 1 3.916 3.916v36.577a3.92 3.92 0 0 1-3.916 3.916z" class="prefix__cls-2" data-name="Path 2993" transform="translate(-382.507 -110.753)"/>
+                <path id="prefix__Path_2994" d="M394.648 104.564a.979.979 0 0 1 .979.979v36.577a.979.979 0 0 1-.979.979h-11.9a6.454 6.454 0 0 1-4.547-1.866 6.447 6.447 0 0 1-1.367-2.025 6.291 6.291 0 0 1-.5-2.524v-31.141a.979.979 0 0 1 .979-.979h4.455a.979.979 0 0 1 .979.979v30.162a.979.979 0 0 0 .979.979h4.457a.979.979 0 0 0 .979-.979v-30.162a.979.979 0 0 1 .979-.979h4.507m0-5.874h-4.508a6.832 6.832 0 0 0-4.186 1.429 6.819 6.819 0 0 0-4.186-1.429h-4.455a6.861 6.861 0 0 0-6.853 6.853v31.141a12.147 12.147 0 0 0 .983 4.856 12.29 12.29 0 0 0 11.3 7.433h11.9a6.861 6.861 0 0 0 6.853-6.853v-36.577a6.861 6.861 0 0 0-6.853-6.853z" class="prefix__cls-1" data-name="Path 2994" transform="translate(-370.46 -98.69)"/>
+            </g>
+            <g id="prefix__Group_4692" data-name="Group 4692" transform="translate(22.447)">
+                <path id="prefix__Path_2995" d="M504.016 158.1a3.92 3.92 0 0 1-3.916-3.916v-36.578a3.92 3.92 0 0 1 3.916-3.916h11.848a9.332 9.332 0 0 1 3.64.73 9.635 9.635 0 0 1 2.978 1.964 9.144 9.144 0 0 1 2.054 3.015 9.312 9.312 0 0 1 .73 3.642v9.62a9.235 9.235 0 0 1-.74 3.687 9.48 9.48 0 0 1-5.024 4.985 9.3 9.3 0 0 1-3.638.73h-3.478v12.118a3.92 3.92 0 0 1-3.916 3.916zm8.911-28.374v-3.746h-.54v3.746z" class="prefix__cls-2" data-name="Path 2995" transform="translate(-497.163 -110.753)"/>
+                <path id="prefix__Path_2996" d="M503.8 104.564a6.351 6.351 0 0 1 2.5.5 6.709 6.709 0 0 1 2.078 1.367 6.157 6.157 0 0 1 1.392 2.05 6.358 6.358 0 0 1 .5 2.5v9.62a6.3 6.3 0 0 1-.5 2.524 6.536 6.536 0 0 1-1.392 2.05 6.453 6.453 0 0 1-2.078 1.394 6.358 6.358 0 0 1-2.5.5h-5.436a.979.979 0 0 0-.979.979v14.072a.979.979 0 0 1-.979.979h-4.455a.979.979 0 0 1-.979-.979v-36.577a.979.979 0 0 1 .979-.979H503.8m-5.434 16.036h4.457a.979.979 0 0 0 .979-.979v-7.662a.979.979 0 0 0-.979-.979h-4.457a.979.979 0 0 0-.979.979v7.662a.979.979 0 0 0 .979.979m5.434-21.91h-11.847a6.861 6.861 0 0 0-6.853 6.853v36.577a6.861 6.861 0 0 0 6.853 6.853h4.455a6.861 6.861 0 0 0 6.853-6.853v-9.181h.54a12.337 12.337 0 0 0 8.729-3.613 12.423 12.423 0 0 0 2.632-3.873 12.164 12.164 0 0 0 .981-4.854v-9.62a12.217 12.217 0 0 0-.961-4.78 12.067 12.067 0 0 0-2.714-3.981 12.589 12.589 0 0 0-3.881-2.563 12.193 12.193 0 0 0-4.786-.965z" class="prefix__cls-1" data-name="Path 2996" transform="translate(-485.1 -98.69)"/>
+            </g>
+            <g id="prefix__Group_4693" data-name="Group 4693" transform="translate(44.421)">
+                <path id="prefix__Path_2997" d="M621.68 158.107a9.331 9.331 0 0 1-9.35-9.35V144.9a3.92 3.92 0 0 1 3.916-3.916h1.038a9.008 9.008 0 0 1-2.26-1.7 9.676 9.676 0 0 1-1.954-2.931 9.249 9.249 0 0 1-.74-3.687v-9.62a9.328 9.328 0 0 1 9.35-9.35h6.415a9.332 9.332 0 0 1 3.64.73 9.613 9.613 0 0 1 2.978 1.964 9.127 9.127 0 0 1 2.054 3.015 9.316 9.316 0 0 1 .732 3.642v25.707a9.287 9.287 0 0 1-.73 3.638 9.113 9.113 0 0 1-2.054 3.015 9.66 9.66 0 0 1-2.98 1.966 9.308 9.308 0 0 1-3.638.73h-6.417zm3.478-12.289v-3.746h-1.747a3.905 3.905 0 0 1 1.208 2.825v.92zm0-16.085v-3.746h-.54v3.746z" class="prefix__cls-2" data-name="Path 2997" transform="translate(-609.391 -110.761)"/>
+                <path id="prefix__Path_2998" d="M616.024 104.564a6.351 6.351 0 0 1 2.5.5 6.708 6.708 0 0 1 2.078 1.367 6.157 6.157 0 0 1 1.392 2.05 6.358 6.358 0 0 1 .5 2.5v25.707a6.344 6.344 0 0 1-.5 2.5 6.157 6.157 0 0 1-1.392 2.05 6.709 6.709 0 0 1-2.078 1.367 6.358 6.358 0 0 1-2.5.5h-6.415a6.393 6.393 0 0 1-6.413-6.413v-3.857a.979.979 0 0 1 .979-.979h4.455a.979.979 0 0 1 .979.979v2.878a.979.979 0 0 0 .979.979h4.457a.979.979 0 0 0 .979-.979v-7.662a.979.979 0 0 0-.979-.979h-5.436a6.344 6.344 0 0 1-2.5-.5 6.133 6.133 0 0 1-2.05-1.394 6.769 6.769 0 0 1-1.367-2.05 6.291 6.291 0 0 1-.5-2.524v-9.62a6.393 6.393 0 0 1 6.413-6.413h6.415m-5.432 16.029h4.457a.979.979 0 0 0 .979-.979v-7.662a.979.979 0 0 0-.979-.979h-4.457a.979.979 0 0 0-.979.979v7.662a.979.979 0 0 0 .979.979m5.436-21.909h-6.415a12.268 12.268 0 0 0-12.289 12.287v9.62a12.147 12.147 0 0 0 .983 4.856 12.629 12.629 0 0 0 1.281 2.287 6.841 6.841 0 0 0-2.264 5.085v3.857a12.268 12.268 0 0 0 12.287 12.289h6.415a12.2 12.2 0 0 0 4.784-.963 12.579 12.579 0 0 0 3.879-2.559 12.047 12.047 0 0 0 2.714-3.981 12.233 12.233 0 0 0 .963-4.785v-25.707a12.234 12.234 0 0 0-.961-4.782 12.066 12.066 0 0 0-2.714-3.981 12.623 12.623 0 0 0-3.881-2.563 12.233 12.233 0 0 0-4.782-.961z" class="prefix__cls-1" data-name="Path 2998" transform="translate(-597.32 -98.69)"/>
+            </g>
+        </g>
+    </g>
+    <g id="prefix__Group_4697" data-name="Group 4697" transform="translate(78.412 25.106)">
+        <g id="prefix__Group_4696" data-name="Group 4696">
+            <path id="prefix__Path_2999" d="M419.753 129.669v36.577a.979.979 0 0 1-.979.979h-11.9a6.454 6.454 0 0 1-4.547-1.866 6.447 6.447 0 0 1-1.367-2.025 6.292 6.292 0 0 1-.5-2.524v-31.141a.979.979 0 0 1 .979-.979h4.455a.979.979 0 0 1 .979.979v30.162a.979.979 0 0 0 .979.979h4.457a.979.979 0 0 0 .979-.979v-30.162a.979.979 0 0 1 .979-.979h4.507a.979.979 0 0 1 .979.979z" class="prefix__cls-2" data-name="Path 2999" transform="translate(-400.46 -128.69)"/>
+            <path id="prefix__Path_3000" d="M534.393 135.1v9.62a6.3 6.3 0 0 1-.5 2.524 6.535 6.535 0 0 1-1.392 2.05 6.453 6.453 0 0 1-2.077 1.394 6.358 6.358 0 0 1-2.5.5h-5.436a.979.979 0 0 0-.979.979v14.076a.979.979 0 0 1-.979.979h-4.455a.979.979 0 0 1-.979-.979v-36.574a.979.979 0 0 1 .979-.979h11.848a6.351 6.351 0 0 1 2.5.5 6.708 6.708 0 0 1 2.077 1.367 6.157 6.157 0 0 1 1.392 2.05 6.358 6.358 0 0 1 .501 2.493zm-6.466 8.643v-7.662a.979.979 0 0 0-.979-.979h-4.457a.979.979 0 0 0-.979.979v7.662a.979.979 0 0 0 .979.979h4.457a.979.979 0 0 0 .979-.977z" class="prefix__cls-2" data-name="Path 3000" transform="translate(-492.653 -128.69)"/>
+            <path id="prefix__Path_3001" d="M646.623 135.1v25.71a6.345 6.345 0 0 1-.5 2.5 6.158 6.158 0 0 1-1.392 2.05 6.71 6.71 0 0 1-2.078 1.367 6.358 6.358 0 0 1-2.5.5h-6.415a6.393 6.393 0 0 1-6.413-6.413v-3.857a.979.979 0 0 1 .979-.979h4.455a.979.979 0 0 1 .979.979v2.878a.979.979 0 0 0 .979.979h4.457a.979.979 0 0 0 .979-.979v-7.662a.979.979 0 0 0-.979-.979h-5.436a6.344 6.344 0 0 1-2.5-.5 6.133 6.133 0 0 1-2.05-1.394 6.77 6.77 0 0 1-1.367-2.05 6.292 6.292 0 0 1-.5-2.524V135.1a6.393 6.393 0 0 1 6.413-6.413h6.415a6.351 6.351 0 0 1 2.5.5 6.709 6.709 0 0 1 2.078 1.367 6.157 6.157 0 0 1 1.392 2.05 6.359 6.359 0 0 1 .504 2.496zm-6.466 8.643v-7.662a.979.979 0 0 0-.979-.979h-4.457a.979.979 0 0 0-.979.979v7.662a.979.979 0 0 0 .979.979h4.457a.979.979 0 0 0 .979-.976z" class="prefix__cls-2" data-name="Path 3001" transform="translate(-582.908 -128.69)"/>
+        </g>
+    </g>
+</svg>

ui-common/src/components/OasModal/OasModal.module.sass

@@ -25,5 +25,4 @@
 
 .redoc
     height: 98%
-    overflow-y: scroll
-
+    overflow-y: scroll

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

@@ -1,13 +1,13 @@
 import { Box, Fade, FormControl, MenuItem, Modal, Backdrop, ListSubheader } from "@material-ui/core";
 import { useCallback, useEffect, useState } from "react";
 import { RedocStandalone } from "redoc";
-import Api from "../../helpers/api";
-import { Select } from "../UI/Select";
-import closeIcon from "../assets/closeIcon.svg";
+import closeIcon from "assets/closeIcon.svg";
 import { toast } from 'react-toastify';
 import style from './OasModal.module.sass';
-import openApiLogo from '../assets/openApiLogo.png'
+import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
+import React from "react";
+import { Select } from "../UI/Select";
 
 const modalStyle = {
   position: 'absolute',
@@ -23,10 +23,9 @@ const modalStyle = {
   color: '#000',
 };
 
-const api = Api.getInstance();
 const ipAddressWithPortRegex = new RegExp('([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}):([0-9]{1,5})');
 
-const OasModal = ({ openModal, handleCloseModal }) => { 
+const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService}) => { 
   const [oasServices, setOasServices] = useState([] as string[])
   const [selectedServiceName, setSelectedServiceName] = useState("");
   const [selectedServiceSpec, setSelectedServiceSpec] = useState(null);
@@ -40,7 +39,7 @@ const OasModal = ({ openModal, handleCloseModal }) => {
         return
       }
       try {
-        const data = await api.getOasByService(selectedService);
+        const data = await getOasByService(selectedService);
         setSelectedServiceSpec(data);
       } catch (e) {
         toast.error("Error occurred while fetching service OAS spec");
@@ -71,7 +70,7 @@ const OasModal = ({ openModal, handleCloseModal }) => {
   useEffect(() => {
     (async () => {
       try {
-        const services = await api.getOasServices();
+        const services = await getOasServices();
         resolvedArrayBuilder(services);
         setOasServices(services);
       } catch (e) {
@@ -107,7 +106,7 @@ const OasModal = ({ openModal, handleCloseModal }) => {
                       id="service-select"
                       placeholder="Show OAS"
                       value={selectedServiceName}
-                      onChange={onSelectedOASService}
+                      onChangeCb={onSelectedOASService}
                     >
                       <ListSubheader disableSticky={true}>Resolved</ListSubheader>
                       {resolvedServices.map((service) => (
@@ -140,4 +139,4 @@ const OasModal = ({ openModal, handleCloseModal }) => {
   );
 };
 
-export default OasModal;
+export default OasModal;

ui-common/src/components/OasModal/assets/closeIcon.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 11C20.5 16.2467 16.2467 20.5 11 20.5C5.75329 20.5 1.5 16.2467 1.5 11C1.5 5.75329 5.75329 1.5 11 1.5C16.2467 1.5 20.5 5.75329 20.5 11Z" stroke="#2B3560"/>
+<path d="M14.4762 9.05338L13.1448 7.7219L11.1528 9.71382L9.16091 7.7219L7.82943 9.05338L9.82135 11.0453L7.83226 13.0344L9.16374 14.3659L11.1528 12.3768L13.1419 14.3659L14.4734 13.0344L12.4843 11.0453L14.4762 9.05338Z" fill="#627EF7"/>
+</svg>

ui-common/src/components/OasModal/redocThemeOptions.ts

@@ -0,0 +1,35 @@
+export const redocThemeOptions = {    
+       theme:{
+         codeBlock:{
+           backgroundColor:"#11171a",
+         },
+         colors:{
+           responses:{
+             error:{
+               tabTextColor:"#1b1b29"
+             },
+             info:{
+               tabTextColor:"#1b1b29",
+             },
+             success:{
+               tabTextColor:"#0c0b1a"
+             },
+           },
+           text:{
+             primary:"#1b1b29",
+             secondary:"#4d4d4d"
+           }
+         },
+         rightPanel:{
+           backgroundColor:"#253237",
+         },
+         sidebar:{
+           backgroundColor:"#ffffff"
+         },
+         typography:{
+           code:{
+             color:"#0c0b1a"
+           }
+         }
+       }
+     }

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

@@ -1,11 +1,11 @@
 import {Snackbar} from "@material-ui/core";
 import MuiAlert from "@material-ui/lab/Alert";
 import React, {useEffect} from "react";
-import Api from "../../helpers/api";
+import { RecoilState, useRecoilValue } from "recoil";
+import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
+import TrafficViewerApi from "../TrafficViewer/TrafficViewerApi";
 import './TLSWarning.sass';
 
-const api = Api.getInstance();
-
 interface TLSWarningProps {
     showTLSWarning: boolean
     setShowTLSWarning: (show: boolean) => void
@@ -17,10 +17,12 @@ interface TLSWarningProps {
 
 export const TLSWarning: React.FC<TLSWarningProps>  = ({showTLSWarning, setShowTLSWarning, addressesWithTLS, setAddressesWithTLS, userDismissedTLSWarning, setUserDismissedTLSWarning}) => {
 
+    const trafficViewerApi = useRecoilValue(TrafficViewerApiAtom as RecoilState<TrafficViewerApi>)
     useEffect(() => {
         (async () => {
             try {
-                const recentTLSLinks = await api.getRecentTLSLinks();
+                const getRecentTLSLinksFunc = trafficViewerApi?.getRecentTLSLinks ? trafficViewerApi?.getRecentTLSLinks : function(){}
+                const recentTLSLinks = await getRecentTLSLinksFunc();
                 if (recentTLSLinks?.length > 0) {
                     setAddressesWithTLS(new Set(recentTLSLinks));
                     setShowTLSWarning(true);
@@ -29,7 +31,7 @@ export const TLSWarning: React.FC<TLSWarningProps>  = ({showTLSWarning, setShowT
                 console.error(e);
             }
         })();
-    }, [setShowTLSWarning, setAddressesWithTLS]);
+    }, [setShowTLSWarning, setAddressesWithTLS,trafficViewerApi]);
 
     return (<Snackbar open={showTLSWarning && !userDismissedTLSWarning}>
         <MuiAlert classes={{filledWarning: 'customWarningStyle'}} elevation={6} variant="filled"

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

@@ -1,15 +1,17 @@
 import React, {useCallback, useEffect, useMemo, useState} from "react";
-import styles from './style/EntriesList.module.sass';
+import styles from '../style/EntriesList.module.sass';
 import ScrollableFeedVirtualized from "react-scrollable-feed-virtualized";
 import Moment from 'moment';
 import {EntryItem} from "./EntryListItem/EntryListItem";
-import down from "./assets/downImg.svg";
-import spinner from './assets/spinner.svg';
-import Api from "../helpers/api";
-import {useRecoilState, useRecoilValue} from "recoil";
-import entriesAtom from "../recoil/entries";
-import wsConnectionAtom, {WsConnectionStatus} from "../recoil/wsConnection";
-import queryAtom from "../recoil/query";
+import down from "assets/downImg.svg";
+import spinner from 'assets/spinner.svg';
+
+import {RecoilState, useRecoilState, useRecoilValue} from "recoil";
+import entriesAtom from "../../recoil/entries";
+import wsConnectionAtom, {WsConnectionStatus} from "../../recoil/wsConnection";
+import queryAtom from "../../recoil/query";
+import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi";
+import TrafficViewerApi from "./TrafficViewerApi";
 
 interface EntriesListProps {
     listEntryREF: any;
@@ -25,7 +27,6 @@ interface EntriesListProps {
     setNoMoreDataTop: (flag: boolean) => void;
     leftOffTop: number;
     setLeftOffTop: (leftOffTop: number) => void;
-    ws: any;
     openWebSocket: (query: string, resetEntries: boolean) => void;
     leftOffBottom: number;
     truncatedTimestamp: number;
@@ -33,14 +34,13 @@ interface EntriesListProps {
     scrollableRef: any;
 }
 
-const api = Api.getInstance();
-
-export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, setQueriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, leftOffTop, setLeftOffTop, ws, openWebSocket, leftOffBottom, truncatedTimestamp, setTruncatedTimestamp, scrollableRef}) => {
+export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, setQueriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, leftOffTop, setLeftOffTop, openWebSocket, leftOffBottom, truncatedTimestamp, setTruncatedTimestamp, scrollableRef}) => {
 
     const [entries, setEntries] = useRecoilState(entriesAtom);
     const wsConnection = useRecoilValue(wsConnectionAtom);
     const query = useRecoilValue(queryAtom);
     const isWsConnectionClosed = wsConnection === WsConnectionStatus.Closed;
+    const trafficViewerApi = useRecoilValue(TrafficViewerApiAtom as RecoilState<TrafficViewerApi>)
 
     const [loadMoreTop, setLoadMoreTop] = useState(false);
     const [isLoadingTop, setIsLoadingTop] = useState(false);
@@ -68,7 +68,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBro
             return;
         }
         setIsLoadingTop(true);
-        const data = await api.fetchEntries(leftOffTop, -1, query, 100, 3000);
+        const data = await trafficViewerApi.fetchEntries(leftOffTop, -1, query, 100, 3000);
         if (!data || data.data === null || data.meta === null) {
             setNoMoreDataTop(true);
             setIsLoadingTop(false);
@@ -104,7 +104,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBro
 
     const scrollbarVisible = scrollableRef.current?.childWrapperRef.current.clientHeight > scrollableRef.current?.wrapperRef.current.clientHeight;
 
-    return <>
+    return <React.Fragment>
             <div className={styles.list}>
                 <div id="list" ref={listEntryREF} className={styles.list}>
                     {isLoadingTop && <div className={styles.spinnerContainer}>
@@ -124,7 +124,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBro
                         title="Fetch old records"
                         className={`${styles.btnOld} ${!scrollbarVisible && leftOffTop > 0 ? styles.showButton : styles.hideButton}`}
                         onClick={(_) => {
-                            ws.close();
+                            trafficViewerApi.webSocket.close()
                             getOldEntries();
                         }}>
                         <img alt="down" src={down} />
@@ -152,5 +152,5 @@ export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBro
                     {startTime !== 0 && <div>Started listening at <span style={{marginRight: 5, fontWeight: 600, fontSize: 13}}>{Moment(truncatedTimestamp ? truncatedTimestamp : startTime).utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}</span></div>}
                 </div>
             </div>
-    </>;
+    </React.Fragment>;
 };

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

@@ -2,13 +2,15 @@ import React, {useEffect, useState} from "react";
 import EntryViewer from "./EntryDetailed/EntryViewer";
 import {EntryItem} from "./EntryListItem/EntryListItem";
 import {makeStyles} from "@material-ui/core";
-import Protocol from "./UI/Protocol"
-import Queryable from "./UI/Queryable";
+import Protocol from "../UI/Protocol"
+import Queryable from "../UI/Queryable";
 import {toast} from "react-toastify";
-import {useRecoilValue} from "recoil";
-import focusedEntryIdAtom from "../recoil/focusedEntryId";
-import Api from "../helpers/api";
-import queryAtom from "../recoil/query";
+import {RecoilState, useRecoilState, useRecoilValue} from "recoil";
+import focusedEntryIdAtom from "../../recoil/focusedEntryId";
+import trafficViewerApi from "../../recoil/TrafficViewerApi";
+import TrafficViewerApi from "./TrafficViewerApi";
+import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
+import queryAtom from "../../recoil/query/atom";
 
 const useStyles = makeStyles(() => ({
     entryTitle: {
@@ -78,12 +80,14 @@ const EntrySummary: React.FC<any> = ({entry}) => {
     />;
 };
 
-const api = Api.getInstance();
+
 
 export const EntryDetailed = () => {
 
     const focusedEntryId = useRecoilValue(focusedEntryIdAtom);
+    const trafficViewerApi = useRecoilValue(TrafficViewerApiAtom as RecoilState<TrafficViewerApi>)
     const query = useRecoilValue(queryAtom);
+
     const [entryData, setEntryData] = useState(null);
 
     useEffect(() => {
@@ -91,7 +95,7 @@ export const EntryDetailed = () => {
         setEntryData(null);
         (async () => {
             try {
-                const entryData = await api.getEntry(focusedEntryId, query);
+                const entryData = await trafficViewerApi.getEntry(focusedEntryId, query);
                 setEntryData(entryData);
             } catch (error) {
                 if (error.response?.data?.type) {
@@ -112,7 +116,7 @@ export const EntryDetailed = () => {
         // eslint-disable-next-line
     }, [focusedEntryId]);
 
-    return <>
+    return <React.Fragment>
         {entryData && <EntryTitle
             protocol={entryData.protocol}
             data={entryData.data}
@@ -120,7 +124,7 @@ export const EntryDetailed = () => {
             elapsedTime={entryData.data.elapsedTime}
         />}
         {entryData && <EntrySummary entry={entryData.base}/>}
-        <>
+        <React.Fragment>
             {entryData && <EntryViewer
                 representation={entryData.representation}
                 isRulesEnabled={entryData.isRulesEnabled}
@@ -132,6 +136,6 @@ export const EntryDetailed = () => {
                 elapsedTime={entryData.data.elapsedTime}
                 color={entryData.protocol.backgroundColor}
             />}
-        </>
-    </>
+        </React.Fragment>
+    </React.Fragment>
 };

ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.module.sass

@@ -1,4 +1,4 @@
-@import '../../variables.module'
+@import '../../../variables.module'
 
 .title
     display: flex

ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx

@@ -1,10 +1,10 @@
 import styles from "./EntrySections.module.sass";
 import React, {useState} from "react";
-import {SyntaxHighlighter} from "../UI/SyntaxHighlighter/index";
-import CollapsibleContainer from "../UI/CollapsibleContainer";
-import FancyTextDisplay from "../UI/FancyTextDisplay";
-import Queryable from "../UI/Queryable";
-import Checkbox from "../UI/Checkbox";
+import {SyntaxHighlighter} from "../../UI/SyntaxHighlighter/index";
+import CollapsibleContainer from "../../UI/CollapsibleContainer";
+import FancyTextDisplay from "../../UI/FancyTextDisplay";
+import Queryable from "../../UI/Queryable";
+import Checkbox from "../../UI/Checkbox";
 import ProtobufDecoder from "protobuf-decoder";
 import {default as jsonBeautify} from "json-beautify";
 import {default as xmlBeautify} from "xml-formatter";
@@ -288,7 +288,7 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({titl
     return <React.Fragment>
         {
             arrayToIterate && arrayToIterate.length > 0 ?
-                <>
+                <React.Fragment>
                 <EntrySectionContainer title={title} color={color}>
                     <table>
                         <tbody>
@@ -296,7 +296,7 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({titl
                                     return (
                                         <EntryPolicySectionContainer key={index} label={rule.Name} matched={matched && (rule.Type === 'slo' ? rule.ResponseTime >= latency : true)? "Success" : "Failure"}>
                                             {
-                                                <>
+                                                <React.Fragment>
                                                     {
                                                         rule.Key &&
                                                         <tr className={styles.dataValue}><td><b>Key:</b></td> <td>{rule.Key}</td></tr>
@@ -325,7 +325,7 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({titl
                                                         rule.Value &&
                                                         <tr className={styles.dataValue}><td><b>Value:</b></td> <td>{rule.Value}</td></tr>
                                                     }
-                                                </>
+                                                </React.Fragment>
                                             }
                                         </EntryPolicySectionContainer>
                                     )
@@ -335,7 +335,7 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({titl
                         </tbody>
                     </table>
                 </EntrySectionContainer>
-                </> : <span className={styles.noRules}>No rules could be applied to this request.</span>
+                </React.Fragment> : <span className={styles.noRules}>No rules could be applied to this request.</span>
         }
     </React.Fragment>
 }

ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.module.sass

@@ -1,4 +1,4 @@
-@import "../../variables.module"
+@import "../../../variables.module"
 
 .Entry
     font-family: "Source Sans Pro", Lucida Grande, Tahoma, sans-serif

ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import styles from './EntryViewer.module.sass';
-import Tabs from "../UI/Tabs";
+import Tabs from "../../UI/Tabs";
 import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "./EntrySections";
 
 enum SectionTypes {
@@ -30,7 +30,7 @@ const SectionsRepresentation: React.FC<any> = ({data, color}) => {
         }
     }
 
-    return <>{sections}</>;
+    return <React.Fragment>{sections}</React.Fragment>;
 }
 
 const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rulesMatched, contractStatus, requestReason, responseReason, contractContent, elapsedTime, color}) => {
@@ -43,7 +43,7 @@ const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rule
 
     // Don't fail even if `representation` is an empty string
     if (!representation) {
-        return <></>;
+        return <React.Fragment></React.Fragment>;
     }
 
     const {request, response} = JSON.parse(representation);

ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass

@@ -1,4 +1,4 @@
-@import '../../variables.module'
+@import '../../../variables.module'
 
 .row
   display: flex
@@ -62,6 +62,13 @@
   width: 185px
   text-align: left
 
+.capture
+  margin-top: -60px
+
+.capture img
+  height: 20px
+  z-index: 1000
+
 .endpointServiceContainer
   display: flex
   flex-direction: column

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

@@ -2,19 +2,20 @@ import React from "react";
 import Moment from 'moment';
 import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
 import styles from './EntryListItem.module.sass';
-import StatusCode, {getClassification, StatusCodeClassification} from "../UI/StatusCode";
-import Protocol, {ProtocolInterface} from "../UI/Protocol"
-import {Summary} from "../UI/Summary";
-import Queryable from "../UI/Queryable";
-import ingoingIconSuccess from "../assets/ingoing-traffic-success.svg"
-import ingoingIconFailure from "../assets/ingoing-traffic-failure.svg"
-import ingoingIconNeutral from "../assets/ingoing-traffic-neutral.svg"
-import outgoingIconSuccess from "../assets/outgoing-traffic-success.svg"
-import outgoingIconFailure from "../assets/outgoing-traffic-failure.svg"
-import outgoingIconNeutral from "../assets/outgoing-traffic-neutral.svg"
+import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode";
+import Protocol, {ProtocolInterface} from "../../UI/Protocol"
+import eBPFLogo from '../assets/ebpf.png';
+import {Summary} from "../../UI/Summary";
+import Queryable from "../../UI/Queryable";
+import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
+import ingoingIconFailure from "assets/ingoing-traffic-failure.svg"
+import ingoingIconNeutral from "assets/ingoing-traffic-neutral.svg"
+import outgoingIconSuccess from "assets/outgoing-traffic-success.svg"
+import outgoingIconFailure from "assets/outgoing-traffic-failure.svg"
+import outgoingIconNeutral from "assets/outgoing-traffic-neutral.svg"
 import {useRecoilState} from "recoil";
-import focusedEntryIdAtom from "../../recoil/focusedEntryId";
-import queryAtom from "../../recoil/query";
+import focusedEntryIdAtom from "../../../recoil/focusedEntryId";
+import queryAtom from "../../../recoil/query";
 
 interface TCPInterface {
     ip: string
@@ -24,6 +25,7 @@ interface TCPInterface {
 
 interface Entry {
     proto: ProtocolInterface,
+    capture: string,
     method?: string,
     methodQuery?: string,
     summary: string,
@@ -52,6 +54,14 @@ interface EntryProps {
     headingMode: boolean;
 }
 
+enum CaptureTypes {
+    UndefinedCapture = "",
+    Pcap = "pcap",
+    Envoy = "envoy",
+    Linkerd = "linkerd",
+    Ebpf = "ebpf",
+}
+
 export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) => {
 
     const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
@@ -133,7 +143,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
     let endpointServiceContainer = "10px";
     if (!isStatusCodeEnabled) endpointServiceContainer = "20px";
 
-    return <>
+    return <React.Fragment>
         <div
             id={`entry-${entry.id.toString()}`}
             className={`${styles.row}
@@ -154,6 +164,17 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
                 protocol={entry.proto}
                 horizontal={false}
             /> : null}
+            {/* TODO: Update the code below once we have api.Pcap, api.Envoy and api.Linkerd distinction in the backend */}
+            {entry.capture === CaptureTypes.Ebpf ? <div className={styles.capture}>
+                <Queryable
+                    query={`capture == "${entry.capture}"`}
+                    displayIconOnMouseOver={true}
+                    flipped={false}
+                    style={{position: "absolute"}}
+                >
+                    <img src={eBPFLogo} alt="eBPF"/>
+                </Queryable>
+            </div> : null}
             {isStatusCodeEnabled && <div>
                 <StatusCode statusCode={entry.status} statusQuery={entry.statusQuery}/>
             </div>}
@@ -304,6 +325,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
                 </Queryable>
             </div>
         </div>
-    </>
+    </React.Fragment>
 
 }

ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-failure.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5175 11.1465C16.8392 10.8869 17 10.4434 17 10C17 9.55657 16.8392 9.11314 16.5175 8.85348L12.5425 5.64459C13.2682 5.23422 14.1067 5 15 5C17.7614 5 20 7.23858 20 10C20 12.7614 17.7614 15 15 15C14.1067 15 13.2682 14.7658 12.5425 14.3554L16.5175 11.1465Z" fill="#BCCEFD"/>
+<path d="M16 10C16 10.3167 15.8749 10.6335 15.6247 10.8189L10.1706 14.8624C9.65543 15.2444 9 14.7858 9 14.0435V5.95652C9 5.21417 9.65543 4.75564 10.1706 5.13758L15.6247 9.18106C15.8749 9.36653 16 9.68326 16 10Z" fill="#EB5757"/>
+<path d="M0 10C0 8.89543 0.895431 8 2 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H2C0.895431 12 0 11.1046 0 10Z" fill="#EB5757"/>
+</svg>

ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-neutral.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5175 11.1465C16.8392 10.8869 17 10.4434 17 10C17 9.55657 16.8392 9.11314 16.5175 8.85348L12.5425 5.64459C13.2682 5.23422 14.1067 5 15 5C17.7614 5 20 7.23858 20 10C20 12.7614 17.7614 15 15 15C14.1067 15 13.2682 14.7658 12.5425 14.3554L16.5175 11.1465Z" fill="#BCCEFD"/>
+<path d="M16 10C16 10.3167 15.8749 10.6335 15.6247 10.8189L10.1706 14.8624C9.65543 15.2444 9 14.7858 9 14.0435V5.95652C9 5.21417 9.65543 4.75564 10.1706 5.13758L15.6247 9.18106C15.8749 9.36653 16 9.68326 16 10Z" fill="gray"/>
+<path d="M0 10C0 8.89543 0.895431 8 2 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H2C0.895431 12 0 11.1046 0 10Z" fill="gray"/>
+</svg>

ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-success.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5175 11.1465C16.8392 10.8869 17 10.4434 17 10C17 9.55657 16.8392 9.11314 16.5175 8.85348L12.5425 5.64459C13.2682 5.23422 14.1067 5 15 5C17.7614 5 20 7.23858 20 10C20 12.7614 17.7614 15 15 15C14.1067 15 13.2682 14.7658 12.5425 14.3554L16.5175 11.1465Z" fill="#BCCEFD"/>
+<path d="M16 10C16 10.3167 15.8749 10.6335 15.6247 10.8189L10.1706 14.8624C9.65543 15.2444 9 14.7858 9 14.0435V5.95652C9 5.21417 9.65543 4.75564 10.1706 5.13758L15.6247 9.18106C15.8749 9.36653 16 9.68326 16 10Z" fill="#27AE60"/>
+<path d="M0 10C0 8.89543 0.895431 8 2 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H2C0.895431 12 0 11.1046 0 10Z" fill="#27AE60"/>
+</svg>

ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-failure.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 15C17.7614 15 20 12.7615 20 10C20 7.23861 17.7614 5.00003 15 5.00003C13.3642 5.00003 11.9118 5.78558 10.9996 7.00003H14C15.6569 7.00003 17 8.34318 17 10C17 11.6569 15.6569 13 14 13H10.9996C11.9118 14.2145 13.3642 15 15 15Z" fill="#BCCEFD"/>
+<rect x="4" y="8.00003" width="12" height="4" rx="2" fill="#EB5757"/>
+<path d="M5.96244e-08 10C6.34015e-08 9.68329 0.125088 9.36656 0.375266 9.18109L5.82939 5.13761C6.34457 4.75567 7 5.2142 7 5.95655L7 14.0435C7 14.7859 6.34457 15.2444 5.82939 14.8625L0.375266 10.819C0.125088 10.6335 5.58474e-08 10.3168 5.96244e-08 10Z" fill="#EB5757"/>
+</svg>

ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-neutral.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 15C17.7614 15 20 12.7615 20 10C20 7.23861 17.7614 5.00003 15 5.00003C13.3642 5.00003 11.9118 5.78558 10.9996 7.00003H14C15.6569 7.00003 17 8.34318 17 10C17 11.6569 15.6569 13 14 13H10.9996C11.9118 14.2145 13.3642 15 15 15Z" fill="#BCCEFD"/>
+<rect x="4" y="8.00003" width="12" height="4" rx="2" fill="gray"/>
+<path d="M5.96244e-08 10C6.34015e-08 9.68329 0.125088 9.36656 0.375266 9.18109L5.82939 5.13761C6.34457 4.75567 7 5.2142 7 5.95655L7 14.0435C7 14.7859 6.34457 15.2444 5.82939 14.8625L0.375266 10.819C0.125088 10.6335 5.58474e-08 10.3168 5.96244e-08 10Z" fill="gray"/>
+</svg>

ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-success.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 15C17.7614 15 20 12.7615 20 10C20 7.23861 17.7614 5.00003 15 5.00003C13.3642 5.00003 11.9118 5.78558 10.9996 7.00003H14C15.6569 7.00003 17 8.34318 17 10C17 11.6569 15.6569 13 14 13H10.9996C11.9118 14.2145 13.3642 15 15 15Z" fill="#BCCEFD"/>
+<rect x="4" y="8.00003" width="12" height="4" rx="2" fill="#27AE60"/>
+<path d="M5.96244e-08 10C6.34015e-08 9.68329 0.125088 9.36656 0.375266 9.18109L5.82939 5.13761C6.34457 4.75567 7 5.2142 7 5.95655L7 14.0435C7 14.7859 6.34457 15.2444 5.82939 14.8625L0.375266 10.819C0.125088 10.6335 5.58474e-08 10.3168 5.96244e-08 10Z" fill="#27AE60"/>
+</svg>

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

@@ -1,28 +1,28 @@
 import React, {useRef, useState} from "react";
-import styles from './style/Filters.module.sass';
+import styles from '../style/Filters.module.sass';
 import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider} from "@material-ui/core";
 import CodeEditor from '@uiw/react-textarea-code-editor';
 import MenuBookIcon from '@material-ui/icons/MenuBook';
-import {SyntaxHighlighter} from "./UI/SyntaxHighlighter/index";
-import filterUIExample1 from "./assets/filter-ui-example-1.png"
-import filterUIExample2 from "./assets/filter-ui-example-2.png"
-import variables from '../variables.module.scss';
-import {useRecoilState} from "recoil";
-import queryAtom from "../recoil/query";
-import useKeyPress from "../hooks/useKeyPress"
-import shortcutsKeyboard from "../configs/shortcutsKeyboard"
+import {SyntaxHighlighter} from "../UI/SyntaxHighlighter/index";
+import filterUIExample1 from "assets/filter-ui-example-1.png"
+import filterUIExample2 from "assets/filter-ui-example-2.png"
+import variables from '../../variables.module.scss';
+import {useRecoilState, useRecoilValue} from "recoil";
+import queryAtom from "../../recoil/query";
+import useKeyPress from "../../hooks/useKeyPress"
+import shortcutsKeyboard from "../../configs/shortcutsKeyboard"
+import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
+
 
 interface FiltersProps {
     backgroundColor: string
-    ws: any
     openWebSocket: (query: string, resetEntries: boolean) => void;
 }
 
-export const Filters: React.FC<FiltersProps> = ({backgroundColor, ws, openWebSocket}) => {
+export const Filters: React.FC<FiltersProps> = ({backgroundColor, openWebSocket}) => {
     return <div className={styles.container}>
         <QueryForm
             backgroundColor={backgroundColor}
-            ws={ws}
             openWebSocket={openWebSocket}
         />
     </div>;
@@ -30,7 +30,6 @@ export const Filters: React.FC<FiltersProps> = ({backgroundColor, ws, openWebSoc
 
 interface QueryFormProps {
     backgroundColor: string
-    ws: any
     openWebSocket: (query: string, resetEntries: boolean) => void;
 }
 
@@ -48,10 +47,11 @@ export const modalStyle = {
     color: '#000',
 };
 
-export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWebSocket}) => {
+export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, openWebSocket}) => {
 
     const formRef = useRef<HTMLFormElement>(null);
     const [query, setQuery] = useRecoilState(queryAtom);
+    const trafficViewerApi = useRecoilValue(trafficViewerApiAtom)
 
     const [openModal, setOpenModal] = useState(false);
 
@@ -63,7 +63,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWe
     }
 
     const handleSubmit = (e) => {
-        ws.close();
+        trafficViewerApi.webSocket.close()
         if (query) {
             openWebSocket(`(${query}) and leftOff(-1)`, true);
         } else {
@@ -74,7 +74,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWe
 
     useKeyPress(shortcutsKeyboard.ctrlEnter, handleSubmit, formRef.current);
 
-    return <>
+    return <React.Fragment>
         <form
             ref={formRef}
             onSubmit={handleSubmit}
@@ -314,5 +314,5 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWe
                 </Box>
             </Fade>
         </Modal>
-    </>
+    </React.Fragment>
 }

ui-common/src/components/TrafficViewer/TrafficViewer.module.sass

@@ -19,28 +19,22 @@
                 display: flex
                 align-items: center
                 
-.TrafficPage-Header
-    display: flex
-    height: 2.5%
-    justify-content: space-between
-    align-items: center
-    padding: 18px 15px
 
-.TrafficPage-Header-Image
+.TrafficPageHeaderImage
     width: 22px
     height: 22px
 
-.TrafficPage-Header-Text
+.TrafficPageHeaderText
     margin-left: 10px
     font-family: 'Source Sans Pro', serif
     font-size: 14px
     font-weight: bold
     color: #f7f9fc
 
-.TrafficPage-Header-Actions
+.TrafficPageHeaderActions
     margin-left: auto
 
-.TrafficPage-Header-Actions-Image
+.TrafficPageHeaderActionsImage
     width: 22px
     height: 22px
     cursor: pointer
@@ -48,7 +42,7 @@
     margin-left: auto
     transform: translate(0 ,25%)
 
-.TrafficPage-Viewer
+.TrafficPageViewer
     height: 96.5%
     overflow: auto
 
@@ -63,20 +57,20 @@
     height: calc(100% - 60px)
     overflow: scroll
 
-.TrafficPage-Container
+.TrafficPageContainer
     display: flex
     flex-grow: 1
     overflow: hidden
     background-color: $data-background-color
 
-.TrafficPage-ListContainer
+.TrafficPageListContainer
     display: flex
     flex-grow: 1
     overflow: hidden
     padding-left: 24px
     flex-direction: column
 
-.TrafficPage-DetailContainer
+.TrafficPageDetailContainer
     width: 45vw
     background-color: #171c30
     flex: 0 0 50%
@@ -119,4 +113,4 @@
 .playPauseIcon
     cursor: pointer
     margin-right: 15px
-    height: 30px
+    height: 30px

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

@@ -0,0 +1,340 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Filters } from "./Filters";
+import { EntriesList } from "./EntriesList";
+import { makeStyles } from "@material-ui/core";
+import TrafficViewerStyles from "./TrafficViewer.module.sass";
+import styles from '../style/EntriesList.module.sass';
+import { EntryDetailed } from "./EntryDetailed";
+import playIcon from 'assets/run.svg';
+import pauseIcon from 'assets/pause.svg';
+import variables from '../../variables.module.scss';
+import { toast,ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import debounce from 'lodash/debounce';
+import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import entriesAtom from "../../recoil/entries";
+import focusedEntryIdAtom from "../../recoil/focusedEntryId";
+import websocketConnectionAtom, { WsConnectionStatus } from "../../recoil/wsConnection";
+import queryAtom from "../../recoil/query";
+import { TLSWarning } from "../TLSWarning/TLSWarning";
+import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
+import TrafficViewerApi from "./TrafficViewerApi";
+import { StatusBar } from "../UI/StatusBar";
+import tappingStatusAtom from "../../recoil/tappingStatus/atom";
+
+const useLayoutStyles = makeStyles(() => ({
+  details: {
+    flex: "0 0 50%",
+    width: "45vw",
+    padding: "12px 24px",
+    borderRadius: 4,
+    marginTop: 15,
+    background: variables.headerBackgroundColor,
+  },
+
+  viewer: {
+    display: "flex",
+    overflowY: "auto",
+    height: "calc(100% - 70px)",
+    padding: 5,
+    paddingBottom: 0,
+    overflow: "auto",
+  },
+}));
+
+interface TrafficViewerProps {
+  setAnalyzeStatus?: (status: any) => void;
+  api?: any
+  trafficViewerApiProp: TrafficViewerApi,
+  actionButtons?: JSX.Element,
+  isShowStatusBar?: boolean,
+  webSocketUrl : string
+}
+
+export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus, trafficViewerApiProp, actionButtons,isShowStatusBar,webSocketUrl}) => {
+
+  const classes = useLayoutStyles();
+
+  const [entries, setEntries] = useRecoilState(entriesAtom);
+  const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
+  const [wsConnection, setWsConnection] = useRecoilState(websocketConnectionAtom);
+  const query = useRecoilValue(queryAtom);
+  const setTrafficViewerApiState = useSetRecoilState(trafficViewerApiAtom as RecoilState<TrafficViewerApi>)
+  const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom);
+  const [noMoreDataTop, setNoMoreDataTop] = useState(false);
+  const [isSnappedToBottom, setIsSnappedToBottom] = useState(true);
+
+  const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
+
+  const [queriedCurrent, setQueriedCurrent] = useState(0);
+  const [queriedTotal, setQueriedTotal] = useState(0);
+  const [leftOffBottom, setLeftOffBottom] = useState(0);
+  const [leftOffTop, setLeftOffTop] = useState(null);
+  const [truncatedTimestamp, setTruncatedTimestamp] = useState(0);
+
+  const [startTime, setStartTime] = useState(0);
+  const scrollableRef = useRef(null);
+
+  const [showTLSWarning, setShowTLSWarning] = useState(false);
+  const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false);
+  const [addressesWithTLS, setAddressesWithTLS] = useState(new Set<string>());
+
+  const handleQueryChange = useMemo(
+    () =>
+      debounce(async (query: string) => {
+        if (!query) {
+          setQueryBackgroundColor("#f5f5f5");
+        } else {
+          const data = await trafficViewerApiProp.validateQuery(query);
+          if (!data) {
+            return;
+          }
+          if (data.valid) {
+            setQueryBackgroundColor("#d2fad2");
+          } else {
+            setQueryBackgroundColor("#fad6dc");
+          }
+        }
+      }, 500),
+    []
+  ) as (query: string) => void;
+
+  useEffect(() => {
+    handleQueryChange(query);
+  }, [query, handleQueryChange]);
+
+  const ws = useRef(null);
+
+  const listEntry = useRef(null);
+  const openWebSocket = (query: string, resetEntries: boolean) => {
+    if (resetEntries) {
+      setFocusedEntryId(null);
+      setEntries([]);
+      setQueriedCurrent(0);
+      setLeftOffTop(null);
+      setNoMoreDataTop(false);
+    }
+    ws.current = new WebSocket(webSocketUrl);
+    ws.current.onopen = () => {
+      setWsConnection(WsConnectionStatus.Connected);
+      sendQueryWhenWsOpen(query);
+    }
+    ws.current.onclose = () => {
+      setWsConnection(WsConnectionStatus.Closed);
+    }
+    ws.current.onerror = (event) => {
+      console.error("WebSocket error:", event);
+      if (query) {
+        openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false);
+      } else {
+        openWebSocket(`leftOff(${leftOffBottom})`, false);
+      }
+    }
+  }
+
+  const sendQueryWhenWsOpen = (query) => {
+    setTimeout(() => {
+      if (ws?.current?.readyState === WebSocket.OPEN) {
+        ws.current.send(JSON.stringify({"query": query, "enableFullEntries": false}));
+      } else {
+        sendQueryWhenWsOpen(query);
+      }
+    }, 500)
+  }
+
+  if (ws.current) {
+    ws.current.onmessage = (e) => {
+      if (!e?.data) return;
+      const message = JSON.parse(e.data);
+      switch (message.messageType) {
+        case "entry":
+          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();
+            setNoMoreDataTop(false);
+          }
+          setEntries(newEntries);
+          break;
+        case "status":
+          setTappingStatus(message.tappingStatus);
+          break;
+        case "analyzeStatus":
+          setAnalyzeStatus(message.analyzeStatus);
+          break;
+        case "outboundLink":
+          onTLSDetected(message.Data.DstIP);
+          break;
+        case "toast":
+          toast[message.data.type](message.data.text, {
+            position: "bottom-right",
+            theme: "colored",
+            autoClose: message.data.autoClose,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+          });
+          break;
+        case "queryMetadata":
+          setQueriedCurrent(queriedCurrent + message.data.current);
+          setQueriedTotal(message.data.total);
+          setLeftOffBottom(message.data.leftOff);
+          setTruncatedTimestamp(message.data.truncatedTimestamp);
+          if (leftOffTop === null) {
+            setLeftOffTop(message.data.leftOff - 1);
+          }
+          break;
+        case "startTime":
+          setStartTime(message.data);
+          break;
+        default:
+          console.error(
+            `unsupported websocket message type, Got: ${message.messageType}`
+          );
+      }
+    };
+  }
+
+  useEffect(() => {
+    setTrafficViewerApiState({...trafficViewerApiProp, webSocket : {close : () => ws.current.close()}});
+    (async () => {
+      openWebSocket("leftOff(-1)", true);
+      try{
+        const tapStatusResponse = await trafficViewerApiProp.tapStatus();
+        setTappingStatus(tapStatusResponse);
+        if(setAnalyzeStatus) {
+          const analyzeStatusResponse = await trafficViewerApiProp.analyzeStatus();
+          setAnalyzeStatus(analyzeStatusResponse);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    })()
+    // eslint-disable-next-line
+  }, []);
+
+  const toggleConnection = () => {
+    ws.current.close();
+    if (wsConnection !== WsConnectionStatus.Connected) {
+      if (query) {
+        openWebSocket(`(${query}) and leftOff(-1)`, true);
+      } else {
+        openWebSocket(`leftOff(-1)`, true);
+      }
+      scrollableRef.current.jumpToBottom();
+      setIsSnappedToBottom(true);
+    }
+  }
+
+  const onTLSDetected = (destAddress: string) => {
+    addressesWithTLS.add(destAddress);
+    setAddressesWithTLS(new Set(addressesWithTLS));
+
+    if (!userDismissedTLSWarning) {
+      setShowTLSWarning(true);
+    }
+  };
+
+  const getConnectionIndicator = () => {
+    switch (wsConnection) {
+      case WsConnectionStatus.Connected:
+        return <div className={`${TrafficViewerStyles.indicatorContainer} ${TrafficViewerStyles.greenIndicatorContainer}`}>
+          <div className={`${TrafficViewerStyles.indicator} ${TrafficViewerStyles.greenIndicator}`} />
+        </div>
+      default:
+        return <div className={`${TrafficViewerStyles.indicatorContainer} ${TrafficViewerStyles.redIndicatorContainer}`}>
+          <div className={`${TrafficViewerStyles.indicator} ${TrafficViewerStyles.redIndicator}`} />
+        </div>
+    }
+  }
+
+  const getConnectionTitle = () => {
+    switch (wsConnection) {
+      case WsConnectionStatus.Connected:
+        return "streaming live traffic"
+      default:
+        return "streaming paused";
+    }
+  }
+
+  const onSnapBrokenEvent = () => {
+    setIsSnappedToBottom(false);
+    if (wsConnection === WsConnectionStatus.Connected) {
+      ws.current.close();
+    }
+  }
+
+  return (
+    <div className={TrafficViewerStyles.TrafficPage}>
+      {tappingStatus && isShowStatusBar && <StatusBar />}
+      <div className={TrafficViewerStyles.TrafficPageHeader}>
+        <div className={TrafficViewerStyles.TrafficPageStreamStatus}>
+          <img className={TrafficViewerStyles.playPauseIcon} style={{ visibility: wsConnection === WsConnectionStatus.Connected ? "visible" : "hidden" }} alt="pause"
+            src={pauseIcon} onClick={toggleConnection} />
+          <img className={TrafficViewerStyles.playPauseIcon} style={{ position: "absolute", visibility: wsConnection === WsConnectionStatus.Connected ? "hidden" : "visible" }} alt="play"
+            src={playIcon} onClick={toggleConnection} />
+          <div className={TrafficViewerStyles.connectionText}>
+            {getConnectionTitle()}
+            {getConnectionIndicator()}
+          </div>
+        </div>
+        {actionButtons}
+      </div>
+      {<div className={TrafficViewerStyles.TrafficPageContainer}>
+        <div className={TrafficViewerStyles.TrafficPageListContainer}>
+          <Filters
+            backgroundColor={queryBackgroundColor}
+            openWebSocket={openWebSocket}
+
+          />
+          <div className={styles.container}>
+            <EntriesList
+              listEntryREF={listEntry}
+              onSnapBrokenEvent={onSnapBrokenEvent}
+              isSnappedToBottom={isSnappedToBottom}
+              setIsSnappedToBottom={setIsSnappedToBottom}
+              queriedCurrent={queriedCurrent}
+              setQueriedCurrent={setQueriedCurrent}
+              queriedTotal={queriedTotal}
+              setQueriedTotal={setQueriedTotal}
+              startTime={startTime}
+              noMoreDataTop={noMoreDataTop}
+              setNoMoreDataTop={setNoMoreDataTop}
+              leftOffTop={leftOffTop}
+              setLeftOffTop={setLeftOffTop}
+              openWebSocket={openWebSocket}
+              leftOffBottom={leftOffBottom}
+              truncatedTimestamp={truncatedTimestamp}
+              setTruncatedTimestamp={setTruncatedTimestamp}
+              scrollableRef={scrollableRef}
+            />
+          </div>
+        </div>
+        <div className={classes.details} id="rightSideContainer">
+          {focusedEntryId && <EntryDetailed />}
+        </div>
+      </div>}
+      <TLSWarning showTLSWarning={showTLSWarning}
+        setShowTLSWarning={setShowTLSWarning}
+        addressesWithTLS={addressesWithTLS}
+        setAddressesWithTLS={setAddressesWithTLS}
+        userDismissedTLSWarning={userDismissedTLSWarning}
+        setUserDismissedTLSWarning={setUserDismissedTLSWarning} />
+      <ToastContainer/>
+    </div>
+  );
+};
+
+const MemoiedTrafficViewer = React.memo(TrafficViewer)
+const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, trafficViewerApiProp, actionButtons, isShowStatusBar = true ,webSocketUrl}) => {
+  return <RecoilRoot>
+    <MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
+      trafficViewerApiProp={trafficViewerApiProp} setAnalyzeStatus={setAnalyzeStatus} />
+  </RecoilRoot>
+}
+
+export default TrafficViewerContainer

ui-common/src/components/TrafficViewer/TrafficViewerApi.ts

@@ -0,0 +1,13 @@
+type TrafficViewerApi = {
+    validateQuery : (query: any) => any
+    tapStatus : () => any
+    analyzeStatus : () => any
+    fetchEntries : (leftOff: any, direction: number, query: any, limit: number, timeoutMs: number) => any
+    getEntry : (entryId : any, query:string) => any
+    getRecentTLSLinks : () => any,
+    webSocket : {
+      close : () => {}
+    }
+  }
+
+  export default TrafficViewerApi

ui-common/src/components/TrafficViewer/assets/downImg.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.82846L7.82843 3.6478e-05L9.24264 1.41425L5 5.65689L4.99997 5.65686L3.58579 4.24268L0.75733 1.41422L2.17154 5.00679e-06L5 2.82846Z" fill="white"/>
+</svg>

ui-common/src/components/TrafficViewer/assets/pause.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30" height="30" rx="15" fill="#F7B202"/>
+<rect x="11" y="9" width="2" height="11" rx="1" fill="white"/>
+<rect x="17" y="9" width="2" height="11" rx="1" fill="white"/>
+</svg>

ui-common/src/components/TrafficViewer/assets/run.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="13.5" stroke="#205CF5" stroke-width="3"/>
+<path d="M20 15C20 15.3167 19.8392 15.6335 19.5175 15.8189L12.5051 19.8624C11.8427 20.2444 11 19.7858 11 19.0435V10.9565C11 10.2142 11.8427 9.75564 12.5051 10.1376L19.5175 14.1811C19.8392 14.3665 20 14.6833 20 15Z" fill="#205CF5"/>
+</svg>

ui-common/src/components/TrafficViewer/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>

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

@@ -0,0 +1,18 @@
+import React from "react";
+
+export interface Props {
+    checked: boolean;
+    onToggle: (checked:boolean) => any;
+    disabled?: boolean;
+}
+
+const Checkbox: React.FC<Props> = ({checked, onToggle, disabled}) => {
+
+    return (
+        <div>
+            <input style={!disabled ? {cursor: "pointer"}: {}} type="checkbox" checked={checked} disabled={disabled} onChange={(event) => onToggle(event.target.checked)}/>
+        </div>
+    );
+};
+
+export default Checkbox;