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
No known key found for this signature in database
GPG Key ID: D42ADB236521BF7A
7 changed files with 56 additions and 21 deletions

View File

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

View File

@ -99,6 +99,10 @@ type MizuEntry struct {
Path string `json:"path" gorm:"column:path"`
ResolvedSource string `json:"resolvedSource,omitempty" gorm:"column:resolvedSource"`
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"`
EstimatedSizeBytes int `json:"-" gorm:"column:estimatedSizeBytes"`
}
@ -107,12 +111,16 @@ type BaseEntryDetails struct {
Id string `json:"id,omitempty"`
Protocol Protocol `json:"protocol,omitempty"`
Url string `json:"url,omitempty"`
RequestSenderIp string `json:"requestSenderIp,omitempty"`
RequestSenderIp string `json:"request_sender_ip,omitempty"`
Service string `json:"service,omitempty"`
Path string `json:"path,omitempty"`
StatusCode int `json:"statusCode,omitempty"`
Summary string `json:"summary,omitempty"`
StatusCode int `json:"status_code,omitempty"`
Method string `json:"method,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"`
Latency int64 `json:"latency,omitempty"`
Rules ApplicableRules `json:"rules,omitempty"`
@ -133,7 +141,7 @@ func (bed *BaseEntryDetails) UnmarshalData(entry *MizuEntry) error {
bed.Id = entry.EntryId
bed.Url = entryUrl
bed.Service = service
bed.Path = entry.Path
bed.Summary = entry.Path
bed.StatusCode = entry.Status
bed.Method = entry.Method
bed.Timestamp = entry.Timestamp

View File

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

View File

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

View File

@ -13,13 +13,16 @@ import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
interface HAREntry {
protocol: ProtocolInterface,
method?: string,
path: string,
summary: string,
service: string,
id: string,
statusCode?: number;
status_code?: number;
url?: string;
isCurrentRevision?: boolean;
timestamp: Date;
source_ip: string,
source_port: string,
destination_ip: string,
destination_port: string,
isOutgoing?: boolean;
latency: number;
rules: Rules;
@ -37,7 +40,7 @@ interface HAREntryProps {
}
export const HarEntry: React.FC<HAREntryProps> = ({entry, setFocusedEntryId, isSelected}) => {
const classification = getClassification(entry.statusCode)
const classification = getClassification(entry.status_code)
let ingoingIcon;
let outgoingIcon;
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"}}
>
<Protocol protocol={entry.protocol}/>
{entry.statusCode && <div>
<StatusCode statusCode={entry.statusCode}/>
{entry.status_code && <div>
<StatusCode statusCode={entry.status_code}/>
</div>}
<div className={styles.endpointServiceContainer}>
<EndpointPath method={entry.method} path={entry.path}/>
<EndpointPath method={entry.method} path={entry.summary}/>
<div className={styles.service}>
{entry.service}
<span title="Service Name">{entry.service}</span>
</div>
</div>
<div className={styles.directionContainer}>
<span className={styles.port} title="Source Port">{entry.source_port}</span>
{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 className={styles.timestamp}>{new Date(+entry.timestamp)?.toLocaleString()}</div>
</div>
</>
};

View File

@ -16,7 +16,11 @@ const StatusCode: React.FC<HAREntryProps> = ({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 {

View File

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