vmui/logs: fix query and limit update issue (#7294)

### Describe Your Changes

Fixes issues with incorrect updating of query and limit fields, and
resolves the problem where the display tab resets.

Related issue: #7279 and #7290

### Checklist

The following checks are **mandatory**:

- [ ] My change adheres [VictoriaMetrics contributing
guidelines](https://docs.victoriametrics.com/contributing/).

---------

Signed-off-by: hagen1778 <roman@victoriametrics.com>
Co-authored-by: Zakhar Bessarab <z.bessarab@victoriametrics.com>
This commit is contained in:
Yury Molodov 2024-10-25 09:32:20 +02:00 committed by GitHub
parent 372ce74d62
commit dd89745a34
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 9 deletions

View file

@ -28,7 +28,7 @@ const ExploreLogs: FC = () => {
const [limit, setLimit] = useStateSearchParams(defaultLimit, "limit"); const [limit, setLimit] = useStateSearchParams(defaultLimit, "limit");
const [query, setQuery] = useStateSearchParams("*", "query"); const [query, setQuery] = useStateSearchParams("*", "query");
const [tmpQuery, setTmpQuery] = useState(""); const [isUpdatingQuery, setIsUpdatingQuery] = useState(false);
const [period, setPeriod] = useState<TimeParams>(periodState); const [period, setPeriod] = useState<TimeParams>(periodState);
const [queryError, setQueryError] = useState<ErrorTypes | string>(""); const [queryError, setQueryError] = useState<ErrorTypes | string>("");
@ -70,26 +70,28 @@ const ExploreLogs: FC = () => {
const handleApplyFilter = (val: string) => { const handleApplyFilter = (val: string) => {
setQuery(prev => `_stream: ${val === "other" ? "{}" : val} AND (${prev})`); setQuery(prev => `_stream: ${val === "other" ? "{}" : val} AND (${prev})`);
setIsUpdatingQuery(true);
}; };
const handleUpdateQuery = useCallback(() => { const handleUpdateQuery = () => {
if (isLoading || dataLogHits.isLoading) { if (isLoading || dataLogHits.isLoading) {
abortController.abort && abortController.abort(); abortController.abort && abortController.abort();
dataLogHits.abortController.abort && dataLogHits.abortController.abort(); dataLogHits.abortController.abort && dataLogHits.abortController.abort();
} else { } else {
setQuery(tmpQuery);
handleRunQuery(); handleRunQuery();
} }
}, [isLoading, dataLogHits.isLoading]); };
useEffect(() => { useEffect(() => {
if (query) handleRunQuery(); if (!query) return;
handleRunQuery();
}, [periodState]); }, [periodState]);
useEffect(() => { useEffect(() => {
if (!isUpdatingQuery) return;
handleRunQuery(); handleRunQuery();
setTmpQuery(query); setIsUpdatingQuery(false);
}, [query]); }, [query, isUpdatingQuery]);
useEffect(() => { useEffect(() => {
!hideChart && fetchLogHits(period); !hideChart && fetchLogHits(period);
@ -98,10 +100,10 @@ const ExploreLogs: FC = () => {
return ( return (
<div className="vm-explore-logs"> <div className="vm-explore-logs">
<ExploreLogsHeader <ExploreLogsHeader
query={tmpQuery} query={query}
error={queryError} error={queryError}
limit={limit} limit={limit}
onChange={setTmpQuery} onChange={setQuery}
onChangeLimit={handleChangeLimit} onChangeLimit={handleChangeLimit}
onRun={handleUpdateQuery} onRun={handleUpdateQuery}
isLoading={isLoading || dataLogHits.isLoading} isLoading={isLoading || dataLogHits.isLoading}

View file

@ -15,6 +15,8 @@ according to [these docs](https://docs.victoriametrics.com/victorialogs/quicksta
## tip ## tip
* BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): fix various glitches with updating query responses. The issue was introduced in [v0.36.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v0.36.0-victorialogs). See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/7279).
## [v0.37.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v0.37.0-victorialogs) ## [v0.37.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v0.37.0-victorialogs)
Released at 2024-10-18 Released at 2024-10-18