Add Protocol struct and make it effect the UI

agent/main.go

@@ -140,9 +140,9 @@ func loadExtensions() {
 		extension.Dissector = dissector
 		log.Printf("Extension Properties: %+v\n", extension)
 		extensions[i] = extension
-		extensionsMap[extension.Name] = extension
+		extensionsMap[extension.Protocol.Name] = extension
-		allOutboundPorts = mergeUnique(allOutboundPorts, extension.OutboundPorts)
+		allOutboundPorts = mergeUnique(allOutboundPorts, extension.Protocol.OutboundPorts)
-		allInboundPorts = mergeUnique(allInboundPorts, extension.InboundPorts)
+		allInboundPorts = mergeUnique(allInboundPorts, extension.Protocol.InboundPorts)
 	}
 	log.Printf("allOutboundPorts: %v\n", allOutboundPorts)
 	log.Printf("allInboundPorts: %v\n", allInboundPorts)

agent/pkg/api/main.go

@@ -111,7 +111,7 @@ func startReadingChannel(outputItems <-chan *tapApi.OutputChannelItem, extension
 
 	for item := range outputItems {
 		fmt.Printf("item: %+v\n", item)
-		extension := extensionsMap[item.Protocol]
+		extension := extensionsMap[item.Protocol.Name]
 		fmt.Printf("extension: %+v\n", extension)
 		// var req *http.Request
 		// marshedReq, _ := json.Marshal(item.Data.Request.Orig)

tap/api/api.go

@@ -7,13 +7,23 @@ import (
 	"time"
 )
 
+type Protocol struct {
+	Name            string   `json:"name"`
+	LongName        string   `json:"long_name"`
+	Abbreviation    string   `json:"abbreviation"`
+	BackgroundColor string   `json:"background_color"`
+	ForegroundColor string   `json:"foreground_color"`
+	FontSize        int8     `json:"font_size"`
+	ReferenceLink   string   `json:"reference_link"`
+	OutboundPorts   []string `json:"outbound_ports"`
+	InboundPorts    []string `json:"inbound_ports"`
+}
+
 type Extension struct {
-	Name          string
+	Protocol  Protocol
-	Path          string
+	Path      string
-	Plug          *plugin.Plugin
+	Plug      *plugin.Plugin
-	InboundPorts  []string
+	Dissector Dissector
-	OutboundPorts []string
-	Dissector     Dissector
 }
 
 type ConnectionInfo struct {
@@ -44,7 +54,7 @@ type RequestResponsePair struct {
 }
 
 type OutputChannelItem struct {
-	Protocol       string
+	Protocol       Protocol
 	Timestamp      int64
 	ConnectionInfo *ConnectionInfo
 	Pair           *RequestResponsePair
@@ -95,6 +105,7 @@ type MizuEntry struct {
 
 type BaseEntryDetails struct {
 	Id              string          `json:"id,omitempty"`
+	Protocol        Protocol        `json:"protocol,omitempty"`
 	Url             string          `json:"url,omitempty"`
 	RequestSenderIp string          `json:"requestSenderIp,omitempty"`
 	Service         string          `json:"service,omitempty"`

tap/extensions/amqp/main.go

@@ -7,20 +7,30 @@ import (
 	"github.com/up9inc/mizu/tap/api"
 )
 
+var protocol api.Protocol = api.Protocol{
+	Name:            "amqp",
+	LongName:        "Advanced Message Queuing Protocol",
+	Abbreviation:    "AMQP",
+	BackgroundColor: "#ff6600",
+	ForegroundColor: "#ffffff",
+	FontSize:        10,
+	ReferenceLink:   "https://www.rabbitmq.com/amqp-0-9-1-reference.html",
+	OutboundPorts:   []string{"5671", "5672"},
+	InboundPorts:    []string{},
+}
+
 func init() {
-	log.Println("Initializing AMQP extension.")
+	log.Println("Initializing AMQP extension...")
 }
 
 type dissecting string
 
 func (d dissecting) Register(extension *api.Extension) {
-	extension.Name = "amqp"
+	extension.Protocol = protocol
-	extension.OutboundPorts = []string{"5671", "5672"}
-	extension.InboundPorts = []string{}
 }
 
 func (d dissecting) Ping() {
-	log.Printf("pong AMQP\n")
+	log.Printf("pong %s\n", protocol.Name)
 }
 
 func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, emitter api.Emitter) {

tap/extensions/http/handlers.go

@@ -4,13 +4,14 @@ import (
 	"bufio"
 	"bytes"
 	"fmt"
-	"github.com/romana/rlog"
 	"io"
 	"io/ioutil"
 	"log"
 	"net/http"
 	"time"
 
+	"github.com/romana/rlog"
+
 	"github.com/up9inc/mizu/tap/api"
 )
 
@@ -66,6 +67,7 @@ func handleHTTP2Stream(grpcAssembler *GrpcAssembler, tcpID *api.TcpID, emitter a
 	}
 
 	if item != nil {
+		item.Protocol = http2Protocol
 		emitter.Emit(item)
 	}
 

tap/extensions/http/main.go

@@ -15,6 +15,30 @@ import (
 var requestCounter uint
 var responseCounter uint
 
+var protocol api.Protocol = api.Protocol{
+	Name:            "http",
+	LongName:        "Hypertext Transfer Protocol -- HTTP/1.0",
+	Abbreviation:    "HTTP",
+	BackgroundColor: "#205cf5",
+	ForegroundColor: "#ffffff",
+	FontSize:        10,
+	ReferenceLink:   "https://www.ietf.org/rfc/rfc1945.txt",
+	OutboundPorts:   []string{"80", "8080", "443"},
+	InboundPorts:    []string{},
+}
+
+var http2Protocol api.Protocol = api.Protocol{
+	Name:            "http",
+	LongName:        "Hypertext Transfer Protocol Version 2 (HTTP/2)",
+	Abbreviation:    "HTTP/2",
+	BackgroundColor: "#244c5a",
+	ForegroundColor: "#ffffff",
+	FontSize:        10,
+	ReferenceLink:   "https://datatracker.ietf.org/doc/html/rfc7540",
+	OutboundPorts:   []string{"80", "8080", "443"},
+	InboundPorts:    []string{},
+}
+
 func init() {
 	log.Println("Initializing HTTP extension.")
 	requestCounter = 0
@@ -23,16 +47,12 @@ func init() {
 
 type dissecting string
 
-const ExtensionName = "http"
-
 func (d dissecting) Register(extension *api.Extension) {
-	extension.Name = ExtensionName
+	extension.Protocol = protocol
-	extension.OutboundPorts = []string{"80", "8080", "443"}
-	extension.InboundPorts = []string{}
 }
 
 func (d dissecting) Ping() {
-	log.Printf("pong HTTP\n")
+	log.Printf("pong %s\n", protocol.Name)
 }
 
 func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, emitter api.Emitter) {
@@ -114,6 +134,7 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, entryId string, resolve
 func (d dissecting) Summarize(entry *api.MizuEntry) *api.BaseEntryDetails {
 	return &api.BaseEntryDetails{
 		Id:              entry.EntryId,
+		Protocol:        protocol,
 		Url:             entry.Url,
 		RequestSenderIp: entry.RequestSenderIp,
 		Service:         entry.Service,

tap/extensions/http/matcher.go

@@ -86,7 +86,7 @@ func (matcher *requestResponseMatcher) registerResponse(ident string, response *
 
 func (matcher *requestResponseMatcher) preparePair(requestHTTPMessage *api.GenericMessage, responseHTTPMessage *api.GenericMessage) *api.OutputChannelItem {
 	return &api.OutputChannelItem{
-		Protocol:       ExtensionName,
+		Protocol:       protocol,
 		Timestamp:      time.Now().UnixNano() / int64(time.Millisecond),
 		ConnectionInfo: nil,
 		Pair: &api.RequestResponsePair{

tap/extensions/kafka/main.go

@@ -7,20 +7,30 @@ import (
 	"github.com/up9inc/mizu/tap/api"
 )
 
+var protocol api.Protocol = api.Protocol{
+	Name:            "kafka",
+	LongName:        "Apache Kafka Protocol",
+	Abbreviation:    "KAFKA",
+	BackgroundColor: "#000000",
+	ForegroundColor: "#ffffff",
+	FontSize:        10,
+	ReferenceLink:   "https://kafka.apache.org/protocol",
+	OutboundPorts:   []string{"9092"},
+	InboundPorts:    []string{},
+}
+
 func init() {
-	log.Println("Initializing Kafka extension.")
+	log.Println("Initializing Kafka extension...")
 }
 
 type dissecting string
 
 func (d dissecting) Register(extension *api.Extension) {
-	extension.Name = "kafka"
+	extension.Protocol = protocol
-	extension.OutboundPorts = []string{"9092"}
-	extension.InboundPorts = []string{}
 }
 
 func (d dissecting) Ping() {
-	log.Printf("pong Kafka\n")
+	log.Printf("pong %s\n", protocol.Name)
 }
 
 func (d dissecting) Dissect(b *bufio.Reader, isClient bool, tcpID *api.TcpID, emitter api.Emitter) {

ui/src/components/HarEntry.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styles from './style/HarEntry.module.sass';
 import StatusCode, {getClassification, StatusCodeClassification} from "./StatusCode";
+import Protocol, {ProtocolInterface} from "./Protocol"
 import {EndpointPath} from "./EndpointPath";
 import ingoingIconSuccess from "./assets/ingoing-traffic-success.svg"
 import ingoingIconFailure from "./assets/ingoing-traffic-failure.svg"
@@ -10,6 +11,7 @@ import outgoingIconFailure from "./assets/outgoing-traffic-failure.svg"
 import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
 
 interface HAREntry {
+    protocol: ProtocolInterface,
     method?: string,
     path: string,
     service: string,
@@ -64,7 +66,14 @@ export const HarEntry: React.FC<HAREntryProps> = ({entry, setFocusedEntryId, isS
         }
     }
     return <>
-        <div id={entry.id} className={`${styles.row} ${isSelected ? styles.rowSelected : backgroundColor}`} onClick={() => setFocusedEntryId(entry.id)}>
+        <div
+            id={entry.id}
+            className={`${styles.row}
+            ${isSelected ? styles.rowSelected : backgroundColor}`}
+            onClick={() => setFocusedEntryId(entry.id)}
+            style={{border: isSelected ? `1px ${entry.protocol.background_color} solid` : "1px transparent solid"}}
+        >
+            <Protocol protocol={entry.protocol}/>
             {entry.statusCode && <div>
                 <StatusCode statusCode={entry.statusCode}/>
             </div>}

ui/src/components/Protocol.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import internal from "stream";
+import styles from './style/Protocol.module.sass';
+
+export interface ProtocolInterface {
+    name: string,
+    long_name: string,
+    abbreviation: string,
+    background_color: string,
+    foreground_color: string,
+    font_size: number,
+    reference_link: string,
+    outbound_ports: string[],
+    inbound_ports: string,
+}
+
+interface ProtocolProps {
+    protocol: ProtocolInterface
+}
+
+const Protocol: React.FC<ProtocolProps> = ({protocol}) => {
+    return <a target="_blank" rel="noopener noreferrer" href={protocol.reference_link}>
+        <span
+            className={`${styles.base}`}
+            style={{
+                backgroundColor: protocol.background_color,
+                color: protocol.foreground_color,
+                fontSize: protocol.font_size,
+            }}
+            title={protocol.long_name}
+        >
+            {protocol.abbreviation}
+        </span>
+    </a>
+};
+
+export default Protocol;

ui/src/components/style/HarEntry.module.sass

@@ -19,17 +19,17 @@
 
 .rowSelected
   border: 1px $blue-color solid
-  border-left: 5px $blue-color solid
+//   border-left: 5px $blue-color solid
   margin-left: 10px
   margin-right: 3px
 
 .ruleSuccessRow
   border: 1px $success-color solid
-  border-left: 5px $success-color solid
+//   border-left: 5px $success-color solid
 
 .ruleFailureRow
   border: 1px $failure-color solid
-  border-left: 5px $failure-color solid
+//   border-left: 5px $failure-color solid
 
 .service
   text-overflow: ellipsis

ui/src/components/style/Protocol.module.sass

@@ -0,0 +1,20 @@
+@import 'variables.module'
+
+.base
+    // border-radius: 4px
+    border-radius: 4px 0 0 4px
+    width: 22px
+    height: 48px
+    font-size: 10px
+    display: inline-block
+    text-align: center
+    line-height: 22px
+    font-weight: 600
+    writing-mode: vertical-lr;
+    // transform: rotate(-180deg);
+    text-orientation: upright;
+    // letter-spacing: 2px;
+    background-color: #000
+    color: #fff
+    margin-left: -8px;
+    margin-bottom: -4px;

ui/src/components/style/StatusCode.module.sass

@@ -9,6 +9,7 @@
     text-align: center
     line-height: 22px
     font-weight: 600
+    margin-left: 8px
 
 .neutral
     background: gray
@@ -20,4 +21,4 @@
 
 .failure
     background: $failure-color
-    color: white
+    color: white