Fix memoization of data transform for query API results (#2790)

This commit is contained in:
gillespi314 2021-11-04 11:48:46 -05:00 committed by GitHub
parent 660796bf72
commit 136b0450c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 19 deletions

View file

@ -0,0 +1 @@
* Fix memoization of query table data on manage queries page

View file

@ -1,8 +1,14 @@
import React, { useContext, useCallback, useEffect, useState } from "react";
import React, {
useContext,
useCallback,
useEffect,
useMemo,
useState,
} from "react";
import { useDispatch } from "react-redux";
import { useQuery } from "react-query";
import { push } from "react-router-redux";
import { memoize, pick } from "lodash";
import { pick } from "lodash";
import { AppContext } from "context/app";
import { performanceIndicator } from "fleet/helpers";
@ -67,10 +73,9 @@ const PLATFORM_FILTER_OPTIONS = [
},
];
const memoizedSqlTables = memoize(sqlTools.parseSqlTables);
const getPlatforms = (queryString: string): string[] =>
sqlTools
.listCompatiblePlatforms(memoizedSqlTables(queryString))
.listCompatiblePlatforms(sqlTools.parseSqlTables(queryString))
.filter((p: string) => PLATFORMS.includes(p));
const enhanceQuery = (q: IQuery) => {
@ -99,33 +104,41 @@ const ManageQueriesPage = (): JSX.Element => {
);
const {
data: fleetQueriesByPlatform,
data: fleetQueries,
error: fleetQueriesError,
isLoading: isLoadingFleetQueries,
refetch: refetchFleetQueries,
} = useQuery<IFleetQueriesResponse, Error, IQueriesByPlatform>(
} = useQuery<IFleetQueriesResponse, Error, IQuery[]>(
"fleet queries by platform",
() => fleetQueriesAPI.loadAll(),
{
// refetchOnMount: false,
// refetchOnReconnect: false,
// refetchOnWindowFocus: false,
select: (data: IFleetQueriesResponse) =>
data.queries.reduce(
(dictionary: IQueriesByPlatform, q) => {
const queryEntry = enhanceQuery(q);
dictionary.all.push(queryEntry);
queryEntry.platforms.forEach((platform) =>
dictionary[platform]?.push(queryEntry)
);
return dictionary;
},
{ all: [], darwin: [], linux: [], windows: [] }
),
select: (data: IFleetQueriesResponse) => data.queries,
}
);
const fleetQueriesByPlatform = useMemo(() => {
const emptyDictionary: IQueriesByPlatform = {
all: [],
darwin: [],
linux: [],
windows: [],
};
const queriesByPlatform = fleetQueries?.reduce(
(dict: IQueriesByPlatform, q: IQuery) => {
const query = enhanceQuery(q);
dict.all.push(query);
query.platforms.forEach((platform) => dict[platform]?.push(query));
return dict;
},
emptyDictionary
);
return queriesByPlatform || emptyDictionary;
}, [fleetQueries]);
useEffect(() => {
if (!isLoadingFleetQueries && fleetQueriesByPlatform) {
let queriesList = fleetQueriesByPlatform[selectedPlatform];