webui: Improve UI of links for viewing search results in context. (y-…

…scope#515)
Bill-hbrhbr · Aug 19, 2024 · e1f3f2a · e1f3f2a
1 parent 86299ca
commit e1f3f2a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/...ents/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/SearchResultsTable.scss b/...ents/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/SearchResultsTable.scss
@@ -50,3 +50,12 @@
   word-break: break-word;
 }
 
+.search-results-file-link {
+  margin-top: 0.25rem;
+
+  color: grey;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
diff --git a/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/index.jsx b/components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/index.jsx
@@ -5,10 +5,10 @@ import Table from "react-bootstrap/Table";
 import dayjs from "dayjs";
 
 import {
+    faFileLines,
     faSort,
     faSortDown,
     faSortUp,
-    faSquareUpRight,
 } from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
@@ -125,10 +125,6 @@ const SearchResultsTable = ({
                                 Log message
                             </div>
                         </th>
-                        {isExtractIrSupported &&
-                            <th className={"search-results-th"}>
-                                <div className={"search-results-table-header"}>&nbsp;</div>
-                            </th>}
                     </tr>
                 </thead>
                 <tbody>
@@ -143,20 +139,23 @@ const SearchResultsTable = ({
                                 <pre className={"search-results-content search-results-message"}>
                                     {result.message}
                                 </pre>
+                                {isExtractIrSupported &&
+                                    <div className={"search-results-file-link"}>
+                                        <FontAwesomeIcon icon={faFileLines}/>
+                                        {" "}
+                                        <a
+                                            className={"search-results-file-link"}
+                                            rel={"noopener noreferrer"}
+                                            target={"_blank"}
+                                            title={"View log event in context"}
+                                            href={`${Meteor.settings.public.LogViewerWebuiUrl
+                                            }?origFileId=${result.orig_file_id}` +
+                                            `&logEventIdx=${result.log_event_ix}`}
+                                        >
+                                            {result.orig_file_path}
+                                        </a>
+                                    </div>}
                             </td>
-                            {isExtractIrSupported &&
-                                <td>
-                                    <a
-                                        rel={"noopener noreferrer"}
-                                        target={"_blank"}
-                                        title={"View log event in context"}
-                                        href={`${Meteor.settings.public.LogViewerWebuiUrl
-                                        }?origFileId=${result.orig_file_id}` +
-                                        `&logEventIdx=${result.log_event_ix}`}
-                                    >
-                                        <FontAwesomeIcon icon={faSquareUpRight}/>
-                                    </a>
-                                </td>}
                         </tr>
                     ))}
                 </tbody>