From 919c51b9202342e0c705fedc815499be121838a3 Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Tue, 2 Feb 2021 11:06:27 -0500
Subject: [PATCH] ui: display ICMP in cross-segment issues report

---
 .../report-components/SecurityReport.js       | 38 ++++++++++---------
 .../src/styles/pages/report/ReportPage.scss   |  9 +++++
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js
index f8c8fa192..1d6072ece 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js
@@ -458,8 +458,10 @@ class ReportPageComponent extends AuthComponent {
       <li key={crossSegmentIssueOverview}>
         {crossSegmentIssueOverview}
         <CollapsibleWellComponent>
-          <ul>
-            {crossSegmentIssue['issues'].map(issue => this.generateCrossSegmentIssueListItem(issue))}
+          <ul className='cross-segment-issues'>
+            {crossSegmentIssue['issues'].map(
+              issue => this.generateCrossSegmentIssueListItem(issue)
+            )}
           </ul>
         </CollapsibleWellComponent>
       </li>
@@ -485,26 +487,28 @@ class ReportPageComponent extends AuthComponent {
   generateCrossSegmentMultiHostMessage(issue) {
     return (
       <li key={issue['source'] + issue['target']}>
-        {
-          Object.keys(issue['services']).length > 0 ?
-            this.generateCrossSegmentServiceMessage(issue) :
-            this.generateCrossSegmentPingMessage(issue)
-        }
+        IP {issue['source']} ({issue['hostname']}) was able to communicate with
+        IP {issue['target']} using:
+        <ul>
+          {issue['icmp'] && <li key='icmp'>ICMP</li>}
+          {this.generateCrossSegmentServiceListItems(issue)}
+        </ul>
       </li>
     );
   }
 
-  generateCrossSegmentServiceMessage(issue) {
-    return (
-      `IP ${issue['source']} (${issue['hostname']}) connected to IP ${issue['target']}`
-        + ` using the services: ${Object.keys(issue['services']).join(', ')}`
-    );
-  }
+  generateCrossSegmentServiceListItems(issue) {
+    let service_list_items = [];
 
-  generateCrossSegmentPingMessage(issue) {
-    return (
-      `IP ${issue['source']} (${issue['hostname']}) successfully pinged IP ${issue['target']}`
-    );
+    for (const [service, info] of Object.entries(issue['services'])) {
+      service_list_items.push(
+        <li key={service}>
+          <span className='cross-segment-service'>{service}</span> ({info['display_name']})
+        </li>
+      );
+    }
+
+    return service_list_items;
   }
 
   generateShellshockPathListBadges(paths) {
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/report/ReportPage.scss b/monkey/monkey_island/cc/ui/src/styles/pages/report/ReportPage.scss
index 5fb8252fe..088e012f3 100644
--- a/monkey/monkey_island/cc/ui/src/styles/pages/report/ReportPage.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/report/ReportPage.scss
@@ -76,3 +76,12 @@ div.report-wrapper .nav-tabs > .nav-item > a:hover:not(.active),  .nav-tabs > .n
     text-decoration: none;
     background-color: $light-gray;
 }
+
+ul.cross-segment-issues {
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+}
+span.cross-segment-service {
+    text-transform: uppercase;
+}