Add support for viewing search results in context for text logs (clp-text). #489

junhaoliao · 2024-07-22T07:24:54Z

Description

These hyperlinks redirect users to the Log Viewer WebUI, which will:

Submit an IR extraction job to the backend.
As the job is being submitted, the state / any error message is displayed in the web view.
Automatically redirect users to YScope's Log Viewer which opens the extracted file in IR format for further analysis.

This integration streamlines the workflow, making it easier for users to navigate from search results to detailed log analysis.

Validation performed

Built and started the CLP package.
Compressed sample log files.
Started a sample search with search string "1" in the CLP WebUI (http://localhost:4000).
Clicked on any results and observed a new browser tab was opened which displayed the loading state of the IR extraction job.
When the job finished, YScope's Log Viewer was loaded with the log message selected in Step 4 being centered in a segment of log messages.

junhaoliao · 2024-07-23T07:09:38Z

components/log-viewer-webui/client/webpack.config.js

@@ -22,6 +22,14 @@ const plugins = [
 ];

 const config = {
+    devServer: {
+        proxy: [


Proxy added to avoid CORS issues during development.

junhaoliao · 2024-07-23T07:11:10Z

components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/index.jsx

@@ -77,6 +78,12 @@ const SearchResultsTable = ({
        }
    };

+    const handleSearchResultClick = (ev) => {
+        const {orig_file_id: origFileId, log_event_ix: logEventIx} = ev.currentTarget.dataset;
+        window.open(`${Meteor.settings.public.LogViewerWebuiClientUrl


In the future, we can open the Log Viewer in a split pane so users can see both the CLP search results and the log context at the same time. For the MVP, we can open the Log Viewer WebUI client in a new tab. Feel free to object.

junhaoliao · 2024-07-23T20:28:07Z

hey @haiqi96 , could you help triage this review?

haiqi96 · 2024-07-24T00:33:53Z

hey @haiqi96 , could you help triage this review?

The change looks reasonable to me, didn't notice any obvious issue

junhaoliao · 2024-07-24T22:03:00Z

components/clp-package-utils/clp_package_utils/scripts/start_clp.py

@@ -786,6 +786,7 @@ def start_webui(instance_id: str, clp_config: CLPConfig, mounts: CLPDockerMounts
        },
        "public": {
            "ClpStorageEngine": clp_config.package.storage_engine,
+            "LogViewerWebuiClientUrl": f"http://{clp_config.log_viewer_webui.host}:{clp_config.log_viewer_webui.port}",


maybe just LogViewerWebuiUrl?

junhaoliao · 2024-07-24T22:05:02Z

components/log-viewer-webui/client/src/App.jsx

 /**
 * Renders the main application.
 *
 * @return {JSX.Element}
 */
 const App = () => {
    return (
-        <h1>Hello world!</h1>
+        <CssVarsProvider modeStorageKey={"uiTheme"}>


create a const for string "uiTheme"

components/log-viewer-webui/client/src/api/query.js

junhaoliao · 2024-07-24T22:06:58Z

components/webui/settings.json

@@ -13,6 +13,7 @@
    "AggregationResultsCollectionName": "aggregation-results",
    "ClpStorageEngine": "clp",
    "CompressionJobsCollectionName": "compression-jobs",
+    "LogViewerWebuiClientUrl": "http://localhost:8080",


ditto https://github.com/y-scope/clp/pull/489/files#r1690512024

components/log-viewer-webui/client/webpack.config.js

components/log-viewer-webui/client/package.json

kirkrodrigues · 2024-07-24T22:24:10Z

components/log-viewer-webui/client/src/ui/QueryState.jsx

How about QueryStatus.jsx?

kirkrodrigues · 2024-07-24T22:24:31Z

components/log-viewer-webui/client/src/ui/QueryState.jsx

+ *
+ * @return {React.ReactElement}
+ */
+const Query = () => {


Can we name this the same as the file?

components/log-viewer-webui/client/src/ui/Loading.jsx

components/log-viewer-webui/client/src/ui/QueryState.jsx

components/log-viewer-webui/client/public/index.html

components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/index.jsx

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

…ever applicable.

…_LOAD_STATE` as indices.

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

…yperlinked log message text approach.

…o React components.

…rflow in x-direction.

…ot yet supported.

kirkrodrigues

A few more suggestions.

components/clp-package-utils/clp_package_utils/scripts/start_clp.py

components/log-viewer-webui/client/src/typings/query.js

kirkrodrigues · 2024-07-27T01:57:50Z

components/log-viewer-webui/client/src/typings/query.js

+ *
+ * @enum {QueryLoadState}
+ */
+const QUERY_LOAD_STATE = Object.freeze({


QUERY_LOADING_STATES?

kirkrodrigues · 2024-07-27T01:58:03Z

components/log-viewer-webui/client/src/typings/query.js

+/**
+ * Descriptions for query states.
+ */
+const QUERY_STATE_DESCRIPTIONS = Object.freeze({


QUERY_LOADING_STATE_DESCRIPTIONS?

kirkrodrigues · 2024-07-27T01:58:22Z

components/log-viewer-webui/client/src/typings/query.js

+/**
+ * @typedef {number} QueryLoadState
+ */
+let enumQueryLoadState;


enumQueryLoadingState?

components/webui/imports/ui/SearchView/SearchResults/SearchResultsTable/index.jsx

components/log-viewer-webui/client/src/ui/QueryStatus.jsx

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

…ggestions from code review Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

kirkrodrigues

For the PR title, how about:

Add support for viewing search results in context for text logs (clp-text).

…text). (y-scope#489)

junhaoliao added 6 commits July 22, 2024 03:18

Add initial code.

0007fb4

Reformat code.

c6d89d9

Reformat code.

44c15eb

Add loading state UI to log-viewer-webui-client.

17bcd11

Display Axios error when any.

420126a

Set logEventIdx cursor position.

a6bf9d2

junhaoliao commented Jul 23, 2024

View reviewed changes

Add LogViewerWebuiClientUrl setting override in start-clp.py.

c1f6e19

junhaoliao changed the title ~~WIP - Add hyperlinks to CLP WebUI search results for IR extraction and Log Viewer integration.~~ Add hyperlinks to CLP WebUI search results for IR extraction and Log Viewer integration. Jul 23, 2024

junhaoliao requested a review from kirkrodrigues July 23, 2024 07:15

Reformat code.

18b9411

junhaoliao changed the title ~~Add hyperlinks to CLP WebUI search results for IR extraction and Log Viewer integration.~~ Add hyperlinks to CLP WebUI search results for viewing log context in Log Viewer. Jul 23, 2024

Avoid CSS-in-JS by moving styles to a separate stylesheet.

f684c09

Merge branch 'main' into pr-489

2b6d83a

junhaoliao commented Jul 24, 2024

View reviewed changes

components/log-viewer-webui/client/src/api/query.js Outdated Show resolved Hide resolved

junhaoliao commented Jul 24, 2024

View reviewed changes

kirkrodrigues requested changes Jul 25, 2024

View reviewed changes

junhaoliao and others added 8 commits July 25, 2024 14:26

Rename LogViewerWebuiClientUrl -> LogViewerWebuiUrl.

ba61aa6

Break HTML tag into two lines.

302ac3a

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

Refactor theme key to use constants.

7eed866

Apply docs / prompts suggestions from code review.

d8c6b42

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

Rename stepNumber -> stepIndicatorText.

8c860e5

Rename ix -> idx; msg_ix -> log_event_idx; use camelCase wher…

c81aef8

…ever applicable.

Refactor Axios error reporting code for clearness.

d6a5e9b

Log axios error object together with the error message.

fb6c7b6

junhaoliao and others added 6 commits July 25, 2024 18:30

Move QUERY_STATE_DESCRIPTIONS into api/query.js and use enum `QUERY…

ae526eb

…_LOAD_STATE` as indices.

Update components/log-viewer-webui/client/src/ui/Loading.jsx

6568b5a

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

Rename Query/QueryState -> QueryStatus.

3f6d40f

Add extra button for opening up Log Viewer, instead of the previous h…

50b9f70

…yperlinked log message text approach.

Add href to <a/> and remove onclick handler.

46d8a7a

Move React state setter usages from api submission functions back int…

db770f7

…o React components.

junhaoliao requested a review from kirkrodrigues July 26, 2024 04:45

junhaoliao changed the title ~~Add hyperlinks to CLP WebUI search results for viewing log context in Log Viewer.~~ Add redirect links to CLP WebUI search results for log context viewing with Log Viewer. Jul 26, 2024

junhaoliao added 3 commits July 26, 2024 00:47

Add space before !important.

ec84389

Hide horizontal scrollbar in search result content if it does not ove…

af59797

…rflow in x-direction.

Hide "Go to the log context" button for clp-s where "Extract IR" is n…

8bb0e84

…ot yet supported.

kirkrodrigues requested changes Jul 27, 2024

View reviewed changes

kirkrodrigues reviewed Jul 27, 2024

View reviewed changes

components/log-viewer-webui/client/src/ui/QueryStatus.jsx Show resolved Hide resolved

junhaoliao and others added 4 commits July 27, 2024 13:19

Reformat code - apply suggestions from code review.

2b52fd5

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

Add early return statement in erroneous URL parameter case - Apply su…

a48588f

…ggestions from code review Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

Docs / Prompts improvement - Apply suggestions from code review

4cf54ad

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

Rename QUERY_LOAD_STATE -> QUERY_LOADING_STATES.

a270ff4

junhaoliao requested a review from kirkrodrigues July 27, 2024 17:48

kirkrodrigues approved these changes Jul 28, 2024

View reviewed changes

junhaoliao changed the title ~~Add redirect links to CLP WebUI search results for log context viewing with Log Viewer.~~ Add support for viewing search results in context for text logs (clp-text). Jul 28, 2024

junhaoliao merged commit 2c99375 into y-scope:main Jul 28, 2024
4 checks passed

junhaoliao mentioned this pull request Oct 23, 2024

log-viewer-webui: Update yscope-log-viewer to the latest version (which uses clp-ffi-js). #562

Merged

jackluo923 pushed a commit to jackluo923/clp that referenced this pull request Dec 4, 2024

Add support for viewing search results in context for text logs (clp-…

e9d5b2b

…text). (y-scope#489)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for viewing search results in context for text logs (clp-text). #489

Add support for viewing search results in context for text logs (clp-text). #489

junhaoliao commented Jul 22, 2024 •

edited

Loading

junhaoliao Jul 23, 2024

junhaoliao Jul 23, 2024

junhaoliao commented Jul 23, 2024

haiqi96 commented Jul 24, 2024

junhaoliao Jul 24, 2024

kirkrodrigues Jul 25, 2024

junhaoliao Jul 24, 2024

junhaoliao Jul 24, 2024

kirkrodrigues Jul 24, 2024

kirkrodrigues Jul 24, 2024

kirkrodrigues left a comment

kirkrodrigues Jul 27, 2024

kirkrodrigues Jul 27, 2024

kirkrodrigues Jul 27, 2024

kirkrodrigues left a comment

Add support for viewing search results in context for text logs (clp-text). #489

Add support for viewing search results in context for text logs (clp-text). #489

Conversation

junhaoliao commented Jul 22, 2024 • edited Loading

Description

Validation performed

Choose a reason for hiding this comment

Choose a reason for hiding this comment

junhaoliao commented Jul 23, 2024

haiqi96 commented Jul 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kirkrodrigues left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kirkrodrigues left a comment

Choose a reason for hiding this comment

junhaoliao commented Jul 22, 2024 •

edited

Loading