add search in admin dashboard log

src/main/html/webapp/components/admin/settings/logs/logs.js

@@ -3,15 +3,34 @@ import $ from 'jquery';
 
 import template from './logs.stache';
 
-
 export default Control.extend({
-
   "init": function(element, options) {
-
-
     $(element).hide();
     $(element).html(template());
     $(element).fadeIn();
-    $("#log-cloudgene").load("api/v2/admin/server/logs/cloudgene.log");
+
+    // Load log content
+    $("#log-cloudgene").load("api/v2/admin/server/logs/cloudgene.log", function() {
+      // Add search functionality after log is loaded
+      $("#log-search").on("input", function() {
+        const searchText = $(this).val();
+        const logContent = $("#log-cloudgene").text();
+
+        if (searchText) {
+          // Escape special characters in search text
+          const escapedSearch = searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+          const regex = new RegExp(escapedSearch, 'gi');
+
+          // Replace matches with highlighted spans
+          const highlightedContent = logContent.replace(regex, 
+            match => `<span class="highlight">${match}</span>`);
+
+          $("#log-cloudgene").html(highlightedContent);
+        } else {
+          // If search is empty, show original content
+          $("#log-cloudgene").text(logContent);
+        }
+      });
+    });
   }
 });

src/main/html/webapp/components/admin/settings/logs/logs.stache

@@ -1,6 +1,33 @@
 <h2>Logs</h2>
 
-<h4>logs/cloudgene.log</h4>
+<div class="log-container">
+  <input type="text" id="log-search" class="form-control" placeholder="Search in logs...">
+  <h4>logs/cloudgene.log</h4>
+  <pre id="log-cloudgene" class="scrollable-log"></pre>
+</div>
 
-<pre id="log-cloudgene"></pre>
+<style>
+.scrollable-log {
+  max-height: 500px;
+  overflow-y: auto;
+  background-color: #f5f5f5;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.highlight {
+  background-color: yellow;
+  padding: 2px 0;
+}
+
+.log-container {
+  margin: 20px 0;
+}
+
+#log-search {
+  margin-bottom: 15px;
+  width: 300px;
+}
+</style>