From 8118569460d14104f6a80b815df8715f16037360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=2E=20Mert=20Y=C4=B1ld=C4=B1ran?= <mehmet@up9.com>
Date: Thu, 18 Nov 2021 20:21:51 +0300
Subject: [PATCH] Show the source and destination IP in the entry feed (#485)

---
 .../EntryListItem/EntryListItem.module.sass   | 11 +++++++--
 .../EntryListItem/EntryListItem.tsx           | 24 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/EntryListItem/EntryListItem.module.sass b/ui/src/components/EntryListItem/EntryListItem.module.sass
index d8e5295d5..5cf3ed227 100644
--- a/ui/src/components/EntryListItem/EntryListItem.module.sass
+++ b/ui/src/components/EntryListItem/EntryListItem.module.sass
@@ -84,7 +84,14 @@
   padding: 4px
   padding-left: 12px
 
-.port
+.tcpInfo
   font-size: 12px
   color: $secondary-font-color
-  margin: 5px
+  margin-top: 5px
+  margin-bottom: 5px
+
+.port
+  margin-right: 5px
+
+.ip
+  margin-left: 5px
diff --git a/ui/src/components/EntryListItem/EntryListItem.tsx b/ui/src/components/EntryListItem/EntryListItem.tsx
index e9346d6c5..29da5bcdf 100644
--- a/ui/src/components/EntryListItem/EntryListItem.tsx
+++ b/ui/src/components/EntryListItem/EntryListItem.tsx
@@ -171,7 +171,17 @@ export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, style
             }
             <div className={styles.separatorRight}>
                 <span
-                    className={`queryable ${styles.port}`}
+                    className={`queryable ${styles.tcpInfo} ${styles.ip}`}
+                    title="Source IP"
+                    onClick={() => {
+                        updateQuery(`src.ip == "${entry.sourceIp}"`)
+                    }}
+                >
+                    {entry.sourceIp}
+                </span>
+                <span className={`${styles.tcpInfo}`}>:</span>
+                <span
+                    className={`queryable ${styles.tcpInfo} ${styles.port}`}
                     title="Source Port"
                     onClick={() => {
                         updateQuery(`src.port == "${entry.sourcePort}"`)
@@ -199,7 +209,17 @@ export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, style
                     />
                 }
                 <span
-                    className={`queryable ${styles.port}`}
+                    className={`queryable ${styles.tcpInfo} ${styles.ip}`}
+                    title="Destination IP"
+                    onClick={() => {
+                        updateQuery(`dst.ip == "${entry.destinationIp}"`)
+                    }}
+                >
+                    {entry.destinationIp}
+                </span>
+                <span className={`${styles.tcpInfo}`}>:</span>
+                <span
+                    className={`queryable ${styles.tcpInfo} ${styles.port}`}
                     title="Destination Port"
                     onClick={() => {
                         updateQuery(`dst.port == "${entry.destinationPort}"`)