Refactor BaseEntryDetails struct and display the source and destination ports in the UI

This commit is contained in:
M. Mert Yildiran
2021-08-21 02:47:08 +03:00
parent ccb924f507
commit 3dff8b48f7
7 changed files with 56 additions and 21 deletions

View File

@@ -3,6 +3,7 @@ package controllers
import ( import (
"encoding/json" "encoding/json"
"fmt" "fmt"
"log"
"mizuserver/pkg/database" "mizuserver/pkg/database"
"mizuserver/pkg/models" "mizuserver/pkg/models"
"mizuserver/pkg/providers" "mizuserver/pkg/providers"
@@ -221,7 +222,7 @@ func GetEntry(c *gin.Context) {
"msg": "Can't get entry details", "msg": "Can't get entry details",
}) })
} }
fmt.Printf("entryData: %+v\n", entryData) log.Printf("entryData: %+v\n", entryData)
// fullEntryWithPolicy := models.FullEntryWithPolicy{} // fullEntryWithPolicy := models.FullEntryWithPolicy{}
// if err := models.GetEntry(&entryData, &fullEntryWithPolicy); err != nil { // if err := models.GetEntry(&entryData, &fullEntryWithPolicy); err != nil {
// c.JSON(http.StatusInternalServerError, map[string]interface{}{ // c.JSON(http.StatusInternalServerError, map[string]interface{}{

View File

@@ -99,6 +99,10 @@ type MizuEntry struct {
Path string `json:"path" gorm:"column:path"` Path string `json:"path" gorm:"column:path"`
ResolvedSource string `json:"resolvedSource,omitempty" gorm:"column:resolvedSource"` ResolvedSource string `json:"resolvedSource,omitempty" gorm:"column:resolvedSource"`
ResolvedDestination string `json:"resolvedDestination,omitempty" gorm:"column:resolvedDestination"` ResolvedDestination string `json:"resolvedDestination,omitempty" gorm:"column:resolvedDestination"`
SourceIp string `json:"sourceIp,omitempty" gorm:"column:sourceIp"`
DestinationIp string `json:"destinationIp,omitempty" gorm:"column:destinationIp"`
SourcePort string `json:"sourcePort,omitempty" gorm:"column:sourcePort"`
DestinationPort string `json:"destinationPort,omitempty" gorm:"column:destinationPort"`
IsOutgoing bool `json:"isOutgoing,omitempty" gorm:"column:isOutgoing"` IsOutgoing bool `json:"isOutgoing,omitempty" gorm:"column:isOutgoing"`
EstimatedSizeBytes int `json:"-" gorm:"column:estimatedSizeBytes"` EstimatedSizeBytes int `json:"-" gorm:"column:estimatedSizeBytes"`
} }
@@ -107,12 +111,16 @@ type BaseEntryDetails struct {
Id string `json:"id,omitempty"` Id string `json:"id,omitempty"`
Protocol Protocol `json:"protocol,omitempty"` Protocol Protocol `json:"protocol,omitempty"`
Url string `json:"url,omitempty"` Url string `json:"url,omitempty"`
RequestSenderIp string `json:"requestSenderIp,omitempty"` RequestSenderIp string `json:"request_sender_ip,omitempty"`
Service string `json:"service,omitempty"` Service string `json:"service,omitempty"`
Path string `json:"path,omitempty"` Summary string `json:"summary,omitempty"`
StatusCode int `json:"statusCode,omitempty"` StatusCode int `json:"status_code,omitempty"`
Method string `json:"method,omitempty"` Method string `json:"method,omitempty"`
Timestamp int64 `json:"timestamp,omitempty"` Timestamp int64 `json:"timestamp,omitempty"`
SourceIp string `json:"source_ip,omitempty"`
DestinationIp string `json:"destination_ip,omitempty"`
SourcePort string `json:"source_port,omitempty"`
DestinationPort string `json:"destination_port,omitempty"`
IsOutgoing bool `json:"isOutgoing,omitempty"` IsOutgoing bool `json:"isOutgoing,omitempty"`
Latency int64 `json:"latency,omitempty"` Latency int64 `json:"latency,omitempty"`
Rules ApplicableRules `json:"rules,omitempty"` Rules ApplicableRules `json:"rules,omitempty"`
@@ -133,7 +141,7 @@ func (bed *BaseEntryDetails) UnmarshalData(entry *MizuEntry) error {
bed.Id = entry.EntryId bed.Id = entry.EntryId
bed.Url = entryUrl bed.Url = entryUrl
bed.Service = service bed.Service = service
bed.Path = entry.Path bed.Summary = entry.Path
bed.StatusCode = entry.Status bed.StatusCode = entry.Status
bed.Method = entry.Method bed.Method = entry.Method
bed.Timestamp = entry.Timestamp bed.Timestamp = entry.Timestamp

View File

@@ -127,6 +127,10 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, entryId string, resolve
Path: request["url"].(string), Path: request["url"].(string),
ResolvedSource: resolvedSource, ResolvedSource: resolvedSource,
ResolvedDestination: resolvedDestination, ResolvedDestination: resolvedDestination,
SourceIp: item.ConnectionInfo.ClientIP,
DestinationIp: item.ConnectionInfo.ServerIP,
SourcePort: item.ConnectionInfo.ClientPort,
DestinationPort: item.ConnectionInfo.ServerPort,
IsOutgoing: item.ConnectionInfo.IsOutgoing, IsOutgoing: item.ConnectionInfo.IsOutgoing,
} }
} }
@@ -138,10 +142,14 @@ func (d dissecting) Summarize(entry *api.MizuEntry) *api.BaseEntryDetails {
Url: entry.Url, Url: entry.Url,
RequestSenderIp: entry.RequestSenderIp, RequestSenderIp: entry.RequestSenderIp,
Service: entry.Service, Service: entry.Service,
Path: entry.Path, Summary: entry.Path,
StatusCode: entry.Status, StatusCode: entry.Status,
Method: entry.Method, Method: entry.Method,
Timestamp: entry.Timestamp, Timestamp: entry.Timestamp,
SourceIp: entry.SourceIp,
DestinationIp: entry.DestinationIp,
SourcePort: entry.SourcePort,
DestinationPort: entry.DestinationPort,
IsOutgoing: entry.IsOutgoing, IsOutgoing: entry.IsOutgoing,
Latency: 0, Latency: 0,
Rules: api.ApplicableRules{ Rules: api.ApplicableRules{

View File

@@ -9,7 +9,7 @@ interface EndpointPathProps {
export const EndpointPath: React.FC<EndpointPathProps> = ({method, path}) => { export const EndpointPath: React.FC<EndpointPathProps> = ({method, path}) => {
return <div className={styles.container}> return <div className={styles.container}>
{method && <span className={`${miscStyles.protocol} ${miscStyles.method}`}>{method}</span>} {method && <span title="Method" className={`${miscStyles.protocol} ${miscStyles.method}`}>{method}</span>}
{path && <div title={path} className={styles.path}>{path}</div>} {path && <div title="Summary" className={styles.path}>{path}</div>}
</div> </div>
}; };

View File

@@ -13,13 +13,16 @@ import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
interface HAREntry { interface HAREntry {
protocol: ProtocolInterface, protocol: ProtocolInterface,
method?: string, method?: string,
path: string, summary: string,
service: string, service: string,
id: string, id: string,
statusCode?: number; status_code?: number;
url?: string; url?: string;
isCurrentRevision?: boolean;
timestamp: Date; timestamp: Date;
source_ip: string,
source_port: string,
destination_ip: string,
destination_port: string,
isOutgoing?: boolean; isOutgoing?: boolean;
latency: number; latency: number;
rules: Rules; rules: Rules;
@@ -37,7 +40,7 @@ interface HAREntryProps {
} }
export const HarEntry: React.FC<HAREntryProps> = ({entry, setFocusedEntryId, isSelected}) => { export const HarEntry: React.FC<HAREntryProps> = ({entry, setFocusedEntryId, isSelected}) => {
const classification = getClassification(entry.statusCode) const classification = getClassification(entry.status_code)
let ingoingIcon; let ingoingIcon;
let outgoingIcon; let outgoingIcon;
switch(classification) { switch(classification) {
@@ -74,23 +77,29 @@ export const HarEntry: React.FC<HAREntryProps> = ({entry, setFocusedEntryId, isS
style={{border: isSelected ? `1px ${entry.protocol.background_color} solid` : "1px transparent solid"}} style={{border: isSelected ? `1px ${entry.protocol.background_color} solid` : "1px transparent solid"}}
> >
<Protocol protocol={entry.protocol}/> <Protocol protocol={entry.protocol}/>
{entry.statusCode && <div> {entry.status_code && <div>
<StatusCode statusCode={entry.statusCode}/> <StatusCode statusCode={entry.status_code}/>
</div>} </div>}
<div className={styles.endpointServiceContainer}> <div className={styles.endpointServiceContainer}>
<EndpointPath method={entry.method} path={entry.path}/> <EndpointPath method={entry.method} path={entry.summary}/>
<div className={styles.service}> <div className={styles.service}>
{entry.service} <span title="Service Name">{entry.service}</span>
</div> </div>
</div> </div>
<div className={styles.directionContainer}> <div className={styles.directionContainer}>
<span className={styles.port} title="Source Port">{entry.source_port}</span>
{entry.isOutgoing ? {entry.isOutgoing ?
<img src={outgoingIcon} alt="outgoing traffic" title="outgoing"/> <img src={outgoingIcon} alt="Outgoing traffic" title="Outgoing"/>
: :
<img src={ingoingIcon} alt="ingoing traffic" title="ingoing"/> <img src={ingoingIcon} alt="Ingoing traffic" title="Ingoing"/>
} }
<span className={styles.port} title="Destination Port">{entry.destination_port}</span>
</div>
<div className={styles.timestamp}>
<span title="Timestamp">
{new Date(+entry.timestamp)?.toLocaleString()}
</span>
</div> </div>
<div className={styles.timestamp}>{new Date(+entry.timestamp)?.toLocaleString()}</div>
</div> </div>
</> </>
}; };

View File

@@ -16,7 +16,11 @@ const StatusCode: React.FC<HAREntryProps> = ({statusCode}) => {
const classification = getClassification(statusCode) const classification = getClassification(statusCode)
return <span className={`${styles[classification]} ${styles.base}`}>{statusCode}</span> return <span
title="Status Code"
className={`${styles[classification]} ${styles.base}`}>
{statusCode}
</span>
}; };
export function getClassification(statusCode: number): string { export function getClassification(statusCode: number): string {

View File

@@ -63,3 +63,8 @@
border-right: 1px solid $data-background-color border-right: 1px solid $data-background-color
padding: 4px padding: 4px
padding-right: 12px padding-right: 12px
.port
font-size: 12px
color: $secondary-font-color
margin: 5px