feat: Extend LogViewer to support scrollable search (#10005)

docs/release-notes/log-search-improvement.rst

@@ -0,0 +1,7 @@
+:orphan:
+
+**Improvements**
+
+-  Logs: Add a seperate pane for log search results, and clicking on the search result would bring
+   user to the position of the log, where user can view the logs before and after. Also enables
+   searching with Regex.

webui/react/package.json

@@ -42,7 +42,7 @@
     "fp-ts": "^2.16.5",
     "fuse.js": "^7.0.0",
     "hermes-parallel-coordinates": "^0.6.17",
-    "hew": "npm:@hpe.com/hew@^0.6.48",
+    "hew": "npm:@hpe.com/hew@^0.6.50",
     "humanize-duration": "^3.28.0",
     "immutable": "^4.3.0",
     "io-ts": "^2.2.21",

webui/react/src/pages/TrialDetails/LogViewer.module.scss

@@ -0,0 +1,42 @@
+.options {
+  border-bottom: var(--theme-stroke-width) solid var(--theme-stage-border);
+  margin-bottom: var(--spacing-md);
+  padding-block: var(--spacing-md);
+}
+.base {
+  background-color: var(--theme-stage);
+  color: var(--theme-stage-on);
+  position: relative;
+
+  .logs {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--theme-font-family-code);
+    font-size: 12px;
+    height: 100%;
+    min-height: 150px;
+    overflow-y: auto;
+    padding: var(--spacing-md);
+
+    & > div {
+      flex: 1;
+    }
+  }
+  .buttons {
+    bottom: var(--spacing-xl-3);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+    position: absolute;
+    right: var(--spacing-xl-3);
+
+    button {
+      background-color: var(--theme-float);
+      border-color: var(--theme-float-border);
+      box-shadow: var(--theme-elevation);
+      color: var(--theme-float-on);
+      transition: opacity 0.2s linear;
+      user-select: none;
+    }
+  }
+}