From 389f03d3ca0b8968428c40f747ad1f099bc1b20c Mon Sep 17 00:00:00 2001
From: Jorge Garcia <jorge.garcia@mulesoft.com>
Date: Wed, 25 Jul 2018 19:12:20 -0300
Subject: [PATCH] Added visual improvements and help. Changed resources to
 relative path.

---
 .classpath                        |  1 -
 pom.xml                           |  2 +-
 src/main/resources/web/index.html | 84 ++++++++++++++++++++++---------
 3 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/.classpath b/.classpath
index 3dd6347..15db930 100644
--- a/.classpath
+++ b/.classpath
@@ -8,5 +8,4 @@
   <classpathentry kind="output" path="target/classes"/>
   <classpathentry kind="con" path="MULE_RUNTIME"/>
   <classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER"/>
-  <classpathentry kind="var" path="M2_REPO/commons-net/commons-net/3.5/commons-net-3.5.jar"/>
 </classpath>
\ No newline at end of file
diff --git a/pom.xml b/pom.xml
index 9c7e1fc..5f412c1 100644
--- a/pom.xml
+++ b/pom.xml
@@ -12,7 +12,7 @@
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 
-		<mule.version>3.8.4</mule.version>
+		<mule.version>3.9.1</mule.version>
     	<mule.tools.version>1.2</mule.tools.version>
 	</properties>
 
diff --git a/src/main/resources/web/index.html b/src/main/resources/web/index.html
index 05cf560..0dd7b64 100644
--- a/src/main/resources/web/index.html
+++ b/src/main/resources/web/index.html
@@ -54,13 +54,17 @@
 .content {
     margin: 0 auto;
     width: 800px;
-    padding: 10px;
     background-repeat: no-repeat;
-    background-position: 760px 22px;
+    background-position: 732px 12px;
     background-image: url(data:image/png;base64,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);
 }
-.content h1 {
-    margin: 30px 0px;
+.content .header {
+    padding-top: 20px;
+    padding-bottom: 30px;
+}
+.content .header h1 {
+    font-weight: bold;
+    font-size: 2em;
 }
 input:disabled {
    background-color: #ccc;
@@ -88,35 +92,51 @@
     border: none;
     border-radius: 2px;
 }
+.helpBox {
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
 #output {
     min-height: 100px;
-    background-color: lightgray;
+    background-color: #F2F2F2;
     margin-top: 6px;
-    border: 1px solid gray;
-    border-radius: 4px;
-    padding: 4px;
+    border: 1px solid #00A0DF;
     font-family: monospace;
 }
 #output .command {
+	color: #00607C;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+#output pre.output {
+    color: #414042;
+    margin-left: 1%;
+    width: 96%;
 }
-#output .output {
-    color: red;
-    margin-bottom: 5px;
+#output textarea.output {
+	color: #414042;
+    margin-left: 1%;
+    width: 96%;
+    background-color: #00000000;
+    border: solid 1px #999;
+    overflow-x: scroll;
+    overflow-y: auto;
+    height: 150px;
 }
 .warn {
     border-color: red;
 }
 		</style>
 		<title>Network connectivity tools</title>
-        <script src="/js/jquery.min.js" type="text/javascript"></script>
-        <script src="/js/toastr.min.js" type="text/javascript"></script>
-        <link href="/css/toastr.min.css" rel="stylesheet" />
+        <script src="js/jquery.min.js" type="text/javascript"></script>
+        <script src="js/toastr.min.js" type="text/javascript"></script>
+        <link href="css/toastr.min.css" rel="stylesheet" />
 	</head>
 	<body>
 		<div class="content">
-			<h1>Network connectivity tools</h1>
+			<div class="header"><h1>Network connectivity tools</h1></div>
 			<form id="theForm" action="#">
-          <div>
+          	  <div>
                 <select name="operation" id="operation">
                     <option value="ping" selected>Ping</option>
                     <option value="traceroute">Traceroute</option>
@@ -125,14 +145,21 @@ <h1>Network connectivity tools</h1>
                     <option value="curl">curl</option>
                 </select>
                 <input name="ip" placeholder="IP Address or Host" type="text" title="IP" id="ip" />
-                <input name="path" placeholder="Path" type="text" title="PATH" id="path" />
                 <input name="port" placeholder="Port" type="text" title="PORT" id="port" />
+                <input name="path" placeholder="Path" type="text" title="PATH" id="path" />
                 <button type="button" id="check">Run</button>
                 <button type="button" id="clean">Clean Console</button>
-          </div>
+              </div>
 			</form>
-            <div id="output">
-            </div>
+			<div>
+			  <div class="helpBox" id="pingHelp">Set an IP Address or Hostname and hit Run</div>
+			  <div class="helpBox" id="tracerouteHelp" style="display: none;">Set an IP Address or Hostname and hit Run</div>	
+			  <div class="helpBox" id="socketHelp" style="display: none;">Set an IP Address or Hostname, the Port and hit Run</div>	
+			  <div class="helpBox" id="dnsHelp" style="display: none;">Set a Hostname and hit Run</div>	
+			  <div class="helpBox" id="curlHelp" style="display: none;">Set an IP Address or Hostname, the Path, the Port and hit Run</div>	
+			</div>
+            <pre id="output">
+            </pre>
 		</div>
         <script type="text/javascript">
             $(document).ready(function() {
@@ -158,23 +185,30 @@ <h1>Network connectivity tools</h1>
                     var operation = e.target.value;
                     var inputs = $("#theForm input").removeClass();
                     inputs.removeAttr( "disabled" );
+                    var helps = $(".helpBox");
+                    helps.hide();
                     switch (operation) {
                       case "ping":
                         $("#path").attr("disabled", true);
                         $("#port").attr("disabled", true);
+                        $("#pingHelp").show();
                         break;
                       case "traceroute":
                         $("#path").attr("disabled", true);
                         $("#port").attr("disabled", true);
+                        $("#tracerouteHelp").show();
                         break;
                       case "socket":
                         $("#path").attr("disabled", true);
+                        $("#socketHelp").show();
                         break;
                       case "dns":
                         $("#path").attr("disabled", true);
                         $("#port").attr("disabled", true);
+                        $("#dnsHelp").show();
                         break;
                       case "curl":
+                    	$("#curlHelp").show();
                         break;
                     default:
 
@@ -213,13 +247,17 @@ <h1>Network connectivity tools</h1>
                         apiurl += '&path=' + path;
                         apiurl += '&port=' + port;
                     }
-                    console.log(operation + " " + ip + " " + path + " " + port);
+                    console.log(operation + " " + ip + " " + port + " " + path );
                     $.ajax({
                         url: apiurl
                     })
                     .done(function(result) {
-                        $("#output").append('<pre class="command">&gt; ' + operation + ' ' + ip + ' ' + path + ' ' + port + '</pre>');
-                        $("#output").append('<pre class="output">' + result + '</pre>');
+                        $("#output").append('<pre class="command">&gt; ' + operation + ' ' + ip + ' ' + port + ' ' + path + '</pre>');
+                        if (operation === 'curl') {
+                        	$("#output").append('<textarea class="output">' + result + '</textarea>');
+                        } else {
+                        	$("#output").append('<pre class="output">' + result + '</pre>');
+                        }
                     })
                     .fail(function() {
                         toastr["error"]("Couldn't complete request", "Error during invocation")