Add support for viewing search results in context for text logs (clp-text). #489
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import axios, {AxiosError} from "axios"; | ||
|
|
||
|
|
||
| /** | ||
| * @typedef {number} QueryLoadState | ||
| */ | ||
| let enumQueryLoadState; | ||
| /** | ||
| * Enum of query loading state. | ||
| * | ||
| * @enum {QueryLoadState} | ||
| */ | ||
| const QUERY_LOAD_STATE = Object.freeze({ | ||
| SUBMITTING: (enumQueryLoadState = 0), | ||
| WAITING: ++enumQueryLoadState, | ||
|
|
||
| LOADING: ++enumQueryLoadState, | ||
| }); | ||
|
|
||
| /** | ||
| * Submits a job to extract a segment of the original file, which contains a given log event index, | ||
| * into CLP's IR format for viewing in the Log Viewer. | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * | ||
| * @param {number|string} origFileId The ID of the original file to extract IR from | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * @param {number} logEventIx The index of the log event | ||
|
There was a problem hiding this comment. Let's use |
||
| * @param {Function} onQueryStateChange Callback to set query state. | ||
| * @param {Function} onErrorMsg Callback to set error message. | ||
| */ | ||
| const submitExtractIrJob = async (origFileId, logEventIx, onQueryStateChange, onErrorMsg) => { | ||
|
There was a problem hiding this comment. This method has side-effects (setting query state, changing the URL) that (1) aren't obvious from its name and (2) don't really seem specific to the api "module". Perhaps its better to simplify this method to just submitting the POST request and do the rest in the |
||
| try { | ||
| const {data} = await axios.post("/query/extract-ir", { | ||
| msg_ix: logEventIx, | ||
| orig_file_id: origFileId, | ||
|
There was a problem hiding this comment. I missed this in the previous PR, but why are we using snake_case for these? I think the only place we actually need to use snake_case is when inserting the row into database, right? There was a problem hiding this comment. In a similar vein, There was a problem hiding this comment.
Right, I was using the webui code as an example but forgot the search query args are directly insert into the DB. Will update accordingly. |
||
| }); | ||
|
|
||
| onQueryStateChange(QUERY_LOAD_STATE.LOADING); | ||
|
|
||
| const innerLogEventIx = logEventIx - data.begin_msg_ix + 1; | ||
|
There was a problem hiding this comment. Should this be |
||
| window.location = `/log-viewer/index.html?filePath=/ir/${data.path}` + | ||
| `#logEventIdx=${innerLogEventIx}`; | ||
| } catch (e) { | ||
| let errorMsg = "Unknown error."; | ||
| if (e instanceof AxiosError) { | ||
| errorMsg = e.message; | ||
| if ("undefined" !== typeof e.response) { | ||
| errorMsg = e.response.data.message ?? e.response.statusText; | ||
| } | ||
|
There was a problem hiding this comment. This reads as if we're going to append to There was a problem hiding this comment.
Right, depending on whether the request was sent successfully and whether the server returns a valid response, we pick the error message (from one of the 3 places) that best represents the error. Let's continue the discussion with these as references:
Sure There was a problem hiding this comment. If we're obsessed enough with syntactic sugar, we can write it as (only if it doesn't give us more "?" when reading the code; pun intended lol There was a problem hiding this comment. 😛 I think in this case, fewer "?" is better, lol. |
||
| } | ||
| onErrorMsg(errorMsg); | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
| }; | ||
|
|
||
| export { | ||
| QUERY_LOAD_STATE, | ||
| submitExtractIrJob, | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| .loading-sheet { | ||
| height: 100%; | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .loading-progress-container { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .loading-stepper-container { | ||
| display: flex; | ||
| flex-grow: 1; | ||
|
|
||
| align-items: center; | ||
| } | ||
|
|
||
| .loading-stepper { | ||
| --Stepper-verticalGap: 2rem!important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import { | ||
| Box, | ||
| LinearProgress, | ||
| Sheet, | ||
| Step, | ||
| StepIndicator, | ||
| Stepper, | ||
| Typography, | ||
| } from "@mui/joy"; | ||
|
|
||
| import "./Loading.css"; | ||
|
|
||
|
|
||
| /** | ||
| * Descriptions for query states. | ||
| */ | ||
| const QUERY_STATE_DESCRIPTIONS = Object.freeze([ | ||
|
There was a problem hiding this comment. Can we move this into the query.js and use the enums as indices (so that they don't go out of sync)? |
||
| { | ||
| label: "Submitting query Job", | ||
| description: "Parsing arguments and submitting job to the server.", | ||
| }, | ||
| { | ||
| label: "Waiting for job To finish", | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| description: "The job is running. Waiting for the job to finish.", | ||
| }, | ||
| { | ||
| label: "Loading up Log Viewer", | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| description: "The query has been completed and the results are being loaded.", | ||
| }, | ||
| ]); | ||
|
|
||
|
|
||
| /** | ||
| * Renders a step with a label and a description text. | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * | ||
| * @param {object} props | ||
| * @param {string} props.description | ||
| * @param {boolean} props.isActive | ||
| * @param {boolean} props.isError whether an error message should be shown instead of a step. | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * @param {string} props.label | ||
| * @param {number} props.stepNumber | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * @return {React.ReactElement} | ||
| */ | ||
| const LoadingStep = ({ | ||
| description, | ||
| isActive, | ||
| isError, | ||
| label, | ||
| stepNumber, | ||
| }) => { | ||
| let color = "danger"; | ||
| if (false === isError) { | ||
| color = isActive ? | ||
| "primary" : | ||
| "neutral"; | ||
| } | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| return ( | ||
| <Step | ||
| indicator={ | ||
| <StepIndicator | ||
| color={color} | ||
| variant={isActive ? | ||
| "solid" : | ||
| "outlined"} | ||
| > | ||
| {stepNumber} | ||
| </StepIndicator> | ||
| } | ||
| > | ||
| <Typography | ||
| color={color} | ||
| level={"title-lg"} | ||
| > | ||
| {label} | ||
| </Typography> | ||
| <Typography level={"body-sm"}> | ||
| {description} | ||
| </Typography> | ||
| </Step> | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * Displays status of a pending query job. | ||
| * | ||
| * @param {object} props | ||
| * @param {QueryLoadState} props.currentState | ||
| * @param {string} props.errorMsg | ||
| * @return {React.ReactElement} | ||
| */ | ||
| const Loading = ({currentState, errorMsg}) => { | ||
| const steps = []; | ||
| QUERY_STATE_DESCRIPTIONS.forEach((state, index) => { | ||
| const isActive = (currentState === index); | ||
| steps.push( | ||
| <LoadingStep | ||
| description={state.description} | ||
| isActive={isActive} | ||
| isError={false} | ||
| key={index} | ||
| label={state.label} | ||
| stepNumber={index + 1}/> | ||
| ); | ||
| if (isActive && null !== errorMsg) { | ||
| steps.push( | ||
| <LoadingStep | ||
| description={errorMsg} | ||
| isActive={isActive} | ||
| isError={true} | ||
| key={`${index}-error`} | ||
| label={"Error"} | ||
| stepNumber={"X"}/> | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <Sheet className={"loading-sheet"}> | ||
| <Box className={"loading-progress-container"}> | ||
| <LinearProgress | ||
| determinate={null !== errorMsg} | ||
| color={null === errorMsg ? | ||
| "primary" : | ||
| "danger"}/> | ||
| </Box> | ||
| <Box className={"loading-stepper-container"}> | ||
| <Stepper | ||
| className={"loading-stepper"} | ||
| orientation={"vertical"} | ||
| size={"lg"} | ||
| > | ||
| {steps} | ||
| </Stepper> | ||
| </Box> | ||
| </Sheet> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Loading; | ||
|
There was a problem hiding this comment. How about |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { | ||
| useEffect, | ||
| useRef, | ||
| useState, | ||
| } from "react"; | ||
|
|
||
| import { | ||
| QUERY_LOAD_STATE, | ||
| submitExtractIrJob, | ||
| } from "../api/query.js"; | ||
| import Loading from "./Loading.jsx"; | ||
|
|
||
|
|
||
| /** | ||
| * Submits queries and renders the query states. | ||
| * | ||
| * @return {React.ReactElement} | ||
| */ | ||
| const Query = () => { | ||
|
There was a problem hiding this comment. Can we name this the same as the file? |
||
| const [queryState, setQueryState] = useState(QUERY_LOAD_STATE.SUBMITTING); | ||
| const [errorMsg, setErrorMsg] = useState(null); | ||
| const isFirstRun = useRef(true); | ||
|
|
||
| useEffect(() => { | ||
| if (false === isFirstRun.current) { | ||
| return; | ||
| } | ||
| isFirstRun.current = false; | ||
|
|
||
| const searchParams = new URLSearchParams(window.location.search); | ||
| const origFileId = searchParams.get("origFileId"); | ||
| const logEventIx = searchParams.get("logEventIx"); | ||
| if (null === origFileId || null === logEventIx) { | ||
| const error = "Non-IR-Extraction queries are not supported at the moment. " + | ||
| "Either origFileId or logEventIx is missing from the URL parameters."; | ||
junhaoliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| console.error(error); | ||
| setErrorMsg(error); | ||
| } | ||
|
|
||
| submitExtractIrJob(origFileId, Number(logEventIx), setQueryState, setErrorMsg).then(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Loading | ||
| currentState={queryState} | ||
| errorMsg={errorMsg}/> | ||
| ); | ||
| }; | ||
|
|
||
| export default Query; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe just
LogViewerWebuiUrl?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sg