fleet/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOS.tsx
2025-05-06 09:20:03 -04:00

95 lines
2 KiB
TypeScript

/** software/os OS tab */
import React from "react";
import { useQuery } from "react-query";
import { InjectedRouter } from "react-router";
import {
IGetOSVersionsQueryKey,
IOSVersionsResponse,
getOSVersions,
} from "services/entities/operating_systems";
import TableDataError from "components/DataError";
import Spinner from "components/Spinner";
import { SelectedPlatform } from "interfaces/platform";
import SoftwareOSTable from "./SoftwareOSTable";
const baseClass = "software-os";
interface ISoftwareOSProps {
router: InjectedRouter;
isSoftwareEnabled: boolean;
perPage: number;
orderDirection: "asc" | "desc";
orderKey: string;
currentPage: number;
teamId?: number;
platform: SelectedPlatform;
}
const SoftwareOS = ({
router,
isSoftwareEnabled,
perPage,
orderDirection,
orderKey,
currentPage,
teamId,
platform,
}: ISoftwareOSProps) => {
const queryParams = {
page: currentPage,
per_page: perPage,
order_direction: orderDirection,
order_key: orderKey,
platform: platform === "all" ? undefined : platform,
teamId,
};
const { data, isFetching, isLoading, isError } = useQuery<
IOSVersionsResponse,
Error,
IOSVersionsResponse,
IGetOSVersionsQueryKey[]
>(
[
{
scope: "software-os",
...queryParams,
},
],
() => getOSVersions(queryParams),
{
keepPreviousData: true,
staleTime: 30000,
}
);
if (isLoading) {
return <Spinner />;
}
if (isError) {
return <TableDataError verticalPaddingSize="pad-xxxlarge" />;
}
return (
<div className={baseClass}>
<SoftwareOSTable
router={router}
data={data}
isSoftwareEnabled={isSoftwareEnabled}
perPage={perPage}
orderDirection={orderDirection}
orderKey={orderKey}
currentPage={currentPage}
teamId={teamId}
isLoading={isFetching}
platform={platform}
/>
</div>
);
};
export default SoftwareOS;