Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 00:49:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 106

ManageQueriesPage: Table loading state

Browse source 
Improve UI handling of queries loading state in ManageQueriesPage
This commit is contained in:
gillespi314 2021-08-10 16:54:21 -05:00 committed by GitHub
parent d51493274d
commit fce0f16c25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
View file

@ -14,6 +14,7 @@ import paths from "router/paths";
import permissionUtils from "utilities/permissions";
import Button from "components/buttons/Button";
import Spinner from "components/loaders/Spinner";
import QueriesListError from "./components/QueriesListError";
import QueriesListWrapper from "./components/QueriesListWrapper";
import RemoveQueryModal from "./components/RemoveQueryModal";
@ -25,7 +26,7 @@ interface IRootState {
};
entities: {
queries: {
isLoading: boolean;
loading: boolean;
data: IQuery[];
errors: any;
};
@ -61,6 +62,17 @@ const ManageQueriesPage = (): JSX.Element => {
dispatch(queryActions.loadAll());
}, [dispatch]);
const loadingQueries = useSelector(
(state: IRootState) => state.entities.queries.loading
);
const [isLoading, setIsLoading] = useState<boolean>(true);
useEffect(() => {
setIsLoading(loadingQueries);
}, [loadingQueries]);
useEffect(() => {
setIsLoading(true);
}, []);
const queries = useSelector((state: IRootState) => state.entities.queries);
const queriesList = Object.values(queries.data);
const queriesErrors = queries.errors;
@ -134,7 +146,11 @@ const ManageQueriesPage = (): JSX.Element => {
)}
</div>
<div>
{true && renderTable(onRemoveQueryClick, queriesList, queriesErrors)}
{!isLoading ? (
renderTable(onRemoveQueryClick, queriesList, queriesErrors)
) : (
<Spinner />
)}
</div>
{showRemoveQueryModal && (
<RemoveQueryModal

40
frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx
View file

@ -21,18 +21,24 @@ interface IRootState {
};
entities: {
queries: {
isLoading: boolean;
loading: boolean;
data: IQuery[];
};
};
}
const QueriesListWrapper = (props: IQueriesListWrapperProps): JSX.Element => {
const { onRemoveQueryClick, queriesList } = props;
const QueriesListWrapper = (
listProps: IQueriesListWrapperProps
): JSX.Element | null => {
const { onRemoveQueryClick, queriesList } = listProps;
const loadingTableData = useSelector(
(state: IRootState) => state.entities.queries.isLoading
const loadingQueries = useSelector(
(state: IRootState) => state.entities.queries.loading
);
const [isLoading, setIsLoading] = useState<boolean>(true);
useEffect(() => {
setIsLoading(loadingQueries);
}, [loadingQueries]);
const currentUser = useSelector((state: IRootState) => state.auth.user);
const isOnlyObserver = permissionUtils.isOnlyObserver(currentUser);
@ -41,15 +47,15 @@ const QueriesListWrapper = (props: IQueriesListWrapperProps): JSX.Element => {
const [searchString, setSearchString] = useState<string>("");
useEffect(() => {
setFilteredQueries(queriesList);
}, [queriesList]);
useEffect(() => {
setFilteredQueries(() => {
return queriesList.filter((query) => {
return query.name.toLowerCase().includes(searchString.toLowerCase());
});
});
setFilteredQueries(
!searchString
? queriesList
: queriesList.filter((query) => {
return query.name
.toLowerCase()
.includes(searchString.toLowerCase());
})
);
}, [queriesList, searchString, setFilteredQueries]);
const onQueryChange = useCallback(
@ -85,13 +91,13 @@ const QueriesListWrapper = (props: IQueriesListWrapperProps): JSX.Element => {
const tableHeaders = generateTableHeaders(isOnlyObserver);
return (
return !isLoading ? (
<div className={`${baseClass}`}>
<TableContainer
resultsTitle={"queries"}
columns={tableHeaders}
data={filteredQueries}
isLoading={loadingTableData}
isLoading={isLoading}
defaultSortHeader={"query"}
defaultSortDirection={"desc"}
showMarkAllPages={false}
@ -107,7 +113,7 @@ const QueriesListWrapper = (props: IQueriesListWrapperProps): JSX.Element => {
emptyComponent={NoQueriesComponent}
/>
</div>
);
) : null;
};
export default QueriesListWrapper;