feat(new-webui): Add placeholder text to log viewer links for clp-s. #974
Conversation
WalkthroughThe changes standardize the prop name from Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SearchResultsTable
participant Message
participant LogViewerLink
User->>SearchResultsTable: View search results
SearchResultsTable->>Message: Render Message with fileText (conditional value)
Message->>LogViewerLink: Pass fileText prop
LogViewerLink->>User: Render link with fileText as display text
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
components/log-viewer-webui/client/src/config/index.ts(1 hunks)components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx(2 hunks)components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/index.tsx(2 hunks)components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/typings.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}`: - Prefer `false == ` rather than `!`.
**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}: - Preferfalse == <expression>rather than!<expression>.
components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/index.tsxcomponents/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsxcomponents/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/typings.tsxcomponents/log-viewer-webui/client/src/config/index.ts
🧬 Code Graph Analysis (1)
components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/typings.tsx (2)
components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/utils.ts (1)
getStreamId(28-28)components/log-viewer-webui/client/src/config/index.ts (2)
CLP_STORAGE_ENGINES(22-22)SETTINGS_STORAGE_ENGINE(23-23)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: lint-check (ubuntu-latest)
- GitHub Check: lint-check (macos-latest)
🔇 Additional comments (7)
components/log-viewer-webui/client/src/config/index.ts (2)
17-19: LGTM! Clean conditional logic.The ternary operator correctly determines the stream type based on the storage engine. The logic is clear and follows the expected behaviour for different storage engines.
1-1:✅ Verification successful
Verify the settings.json file structure.
The import assumes a specific structure in the settings.json file with a
ClpStorageEngineproperty. Ensure this file exists and has the expected structure.
🏁 Script executed:
#!/bin/bash # Description: Verify settings.json exists and contains ClpStorageEngine property # Expected: Find settings.json file and check its structure fd "settings.json" --type f --exec cat {}Length of output: 1552
Confirmed:
settings.jsonincludes the expectedClpStorageEngineproperty.
- The file at
components/log-viewer-webui/client/settings.jsonexists and itspublicsection contains"ClpStorageEngine": "clp", matching the import inconfig/index.ts.components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx (1)
14-14: LGTM! Consistent prop renaming.The prop renaming from
filePathtofileTextis consistently applied across the interface definition, JSDoc comments, parameter destructuring, and JSX rendering. The change aligns well with the new functionality where the text may not always represent a file path.Also applies to: 23-23, 29-29, 47-47
components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/index.tsx (1)
14-14: LGTM! Consistent prop renaming throughout the component.The prop renaming is properly applied across all areas: interface definition, JSDoc documentation, parameter destructuring, and prop passing to the child component. The changes maintain consistency with the LogViewerLink component updates.
Also applies to: 24-24, 32-32, 50-50
components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/typings.tsx (3)
5-8: LGTM! Clean imports from the config module.The imports correctly bring in the necessary constants from the configuration module to implement the conditional logic.
55-59: Verify the placeholder text matches the PR requirements.The conditional logic correctly distinguishes between storage engines, but the placeholder text " Original file" has a leading space. Ensure this spacing is intentional and matches the design requirements.
According to the PR objectives, the placeholder should display "Original File" (with capital 'F'). The current implementation shows " Original file" (with lowercase 'f' and leading space). Please confirm if this matches the intended design.
56-57: LGTM! Correct conditional logic implementation.The conditional logic properly checks if the storage engine is CLP and uses the original file path when true, otherwise falls back to the placeholder text. This correctly implements the feature requirements.
| CLP_S = "clp-s", | ||
| } | ||
|
|
||
| const SETTINGS_STORAGE_ENGINE = settings.ClpStorageEngine as CLP_STORAGE_ENGINES; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding runtime validation for the type assertion.
The type assertion as CLP_STORAGE_ENGINES could fail at runtime if the settings file contains an invalid value. Consider adding validation to ensure the value is one of the enum members.
-const SETTINGS_STORAGE_ENGINE = settings.ClpStorageEngine as CLP_STORAGE_ENGINES;
+const SETTINGS_STORAGE_ENGINE = (() => {
+ const engine = settings.ClpStorageEngine;
+ if (false == Object.values(CLP_STORAGE_ENGINES).includes(engine as CLP_STORAGE_ENGINES)) {
+ throw new Error(`Invalid storage engine: ${engine}. Must be one of: ${Object.values(CLP_STORAGE_ENGINES).join(", ")}`);
+ }
+ return engine as CLP_STORAGE_ENGINES;
+})();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const SETTINGS_STORAGE_ENGINE = settings.ClpStorageEngine as CLP_STORAGE_ENGINES; | |
| // before: | |
| // const SETTINGS_STORAGE_ENGINE = settings.ClpStorageEngine as CLP_STORAGE_ENGINES; | |
| const SETTINGS_STORAGE_ENGINE = (() => { | |
| const engine = settings.ClpStorageEngine; | |
| if (false == Object.values(CLP_STORAGE_ENGINES).includes(engine as CLP_STORAGE_ENGINES)) { | |
| throw new Error( | |
| `Invalid storage engine: ${engine}. ` + | |
| `Must be one of: ${Object.values(CLP_STORAGE_ENGINES).join(", ")}` | |
| ); | |
| } | |
| return engine as CLP_STORAGE_ENGINES; | |
| })(); |
🤖 Prompt for AI Agents
In components/log-viewer-webui/client/src/config/index.ts at line 12, the type
assertion to CLP_STORAGE_ENGINES may cause runtime errors if the settings value
is invalid. Add a runtime check to verify that settings.ClpStorageEngine is a
valid member of the CLP_STORAGE_ENGINES enum before assigning it to
SETTINGS_STORAGE_ENGINE. If the value is invalid, handle the error
appropriately, such as by throwing an error or falling back to a default enum
value.
| fileText={ | ||
| CLP_STORAGE_ENGINES.CLP === SETTINGS_STORAGE_ENGINE ? | ||
| record.orig_file_path : | ||
| " Original file" |
There was a problem hiding this comment.
Is the leading space intended?
There was a problem hiding this comment.
yes it looks better with it. I tried both
There was a problem hiding this comment.
left one question
also i believe this depends on #967 so let's merge 967 first
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}`: - Prefer `false == ` rather than `!`.
**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}: - Preferfalse == <expression>rather than!<expression>.
components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: build (macos-latest)
- GitHub Check: lint-check (macos-latest)
- GitHub Check: lint-check (ubuntu-latest)
🔇 Additional comments (3)
components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx (3)
13-17: Consistent prop renaming – looks good.The interface now correctly uses
fileTextinstead of the oldfilePath, matching the higher-level component updates. No other adjustments are needed here.
28-32: Destructuring update is correct.The component signature now pulls in
fileTextinstead offilePath. This matches the interface and downstream usage.
46-48: Rendering the placeholder text – approved.The placeholder
fileTextis now displayed alongside the icon, aligning with the old UI behaviour forclp-s.
| /** | ||
| * Render a link to the log viewer with open file. | ||
| * Render a link to the log viewer. | ||
| * | ||
| * @param props | ||
| * @param props.filePath | ||
| * @param props.fileText | ||
| * @param props.logEventIdx | ||
| * @param props.streamId | ||
| * @return | ||
| */ |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
JSDoc @param missing description.
You’ve updated the tag to @param props.fileText, but there’s no accompanying description. Consider adding a brief note to explain what fileText represents (e.g. the link label).
🤖 Prompt for AI Agents
In
components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx
around lines 19 to 27, the JSDoc @param tag for props.fileText lacks a
description. Add a concise explanation for fileText, such as "the link label
text," to clarify its purpose in the component's documentation.
This PR should be merged after #967 , since there is new support for determining clp-s vs. clp in that PR
Description
Clp-s does not currently have file path stored, at least according to old webui. Instead we show placeholder "Original File". Previously text was blank. Now matches old webui
Checklist
breaking change.
Validation performed
Text is rendered
Summary by CodeRabbit
Refactor
filePathtofileTextin relevant components for improved clarity.fileTextprop.Style