diff --git a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
index 6c52aaeda88a..a45056ddd46f 100644
--- a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
+++ b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
@@ -25,12 +25,15 @@ import TooltipWrapper from "components/TooltipWrapper/TooltipWrapper";
import QueryAutomationsStatusIndicator from "pages/queries/ManageQueriesPage/components/QueryAutomationsStatusIndicator/QueryAutomationsStatusIndicator";
import DataError from "components/DataError/DataError";
import LogDestinationIndicator from "components/LogDestinationIndicator/LogDestinationIndicator";
+import CustomLink from "components/CustomLink";
+import InfoBanner from "components/InfoBanner";
import QueryReport from "../components/QueryReport/QueryReport";
import NoResults from "../components/NoResults/NoResults";
import {
DEFAULT_SORT_HEADER,
DEFAULT_SORT_DIRECTION,
+ QUERY_REPORT_RESULTS_LIMIT,
} from "./QueryDetailsPageConfig";
interface IQueryDetailsPageProps {
@@ -151,6 +154,8 @@ const QueryDetailsPage = ({
const isLoading = isStoredQueryLoading || isQueryReportLoading;
const isApiError = storedQueryError || queryReportError;
+ const isClipped =
+ queryReport && queryReport.results.length >= QUERY_REPORT_RESULTS_LIMIT;
const renderHeader = () => {
const canEditQuery =
@@ -232,6 +237,25 @@ const QueryDetailsPage = ({
);
};
+ const renderClippedBanner = () => (
+
+ }
+ >
+
+ Report clipped. A sample of this query's results is included
+ below. You can still use query automations to complete this report in
+ your log destination.
+
+
+ );
+
const renderReport = () => {
const disabledCachingGlobally = true; // TODO: Update accordingly to config?.server_settings.query_reports_disabled
const discardDataEnabled = true; // TODO: Update accordingly to storedQuery?.discard_data
@@ -270,6 +294,7 @@ const QueryDetailsPage = ({
{renderHeader()}
+ {isClipped && renderClippedBanner()}
{renderReport()}
diff --git a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPageConfig.tsx b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPageConfig.tsx
index 10cc329d00f9..05ef2ba60479 100644
--- a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPageConfig.tsx
+++ b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPageConfig.tsx
@@ -11,3 +11,5 @@ export type QueryDetailsPageQueryParams = Record<
export const DEFAULT_SORT_HEADER = "host_name";
export const DEFAULT_SORT_DIRECTION = "asc";
+
+export const QUERY_REPORT_RESULTS_LIMIT = 1000;
diff --git a/frontend/pages/queries/details/QueryDetailsPage/_styles.scss b/frontend/pages/queries/details/QueryDetailsPage/_styles.scss
index a48b33570658..383dec03c304 100644
--- a/frontend/pages/queries/details/QueryDetailsPage/_styles.scss
+++ b/frontend/pages/queries/details/QueryDetailsPage/_styles.scss
@@ -1,4 +1,9 @@
.query-details-page {
+ &__wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: $pad-large;
+ }
&__title-bar {
display: flex;
justify-content: space-between;
diff --git a/frontend/pages/queries/details/components/QueryReport/_styles.scss b/frontend/pages/queries/details/components/QueryReport/_styles.scss
index 6ca33cb40bdd..5d914ea30275 100644
--- a/frontend/pages/queries/details/components/QueryReport/_styles.scss
+++ b/frontend/pages/queries/details/components/QueryReport/_styles.scss
@@ -1,7 +1,5 @@
.query-report {
&__wrapper {
- margin-top: $pad-large;
-
.host_id__header {
width: 95px; // Min width for 6 digits host IDs
}