From f467a1446849da4cd8f0bf20e935554e21a2fd39 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <jacob@fleetdm.com>
Date: Mon, 9 Oct 2023 14:38:43 -0700
Subject: [PATCH] implement infobanner when report is clipped

---
 .../QueryDetailsPage/QueryDetailsPage.tsx     | 25 +++++++++++++++++++
 .../QueryDetailsPageConfig.tsx                |  2 ++
 .../details/QueryDetailsPage/_styles.scss     |  5 ++++
 .../components/QueryReport/_styles.scss       |  2 --
 4 files changed, 32 insertions(+), 2 deletions(-)

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 = () => (
+    <InfoBanner
+      color="yellow"
+      cta={
+        <CustomLink
+          url="https://www.fleetdm.com/support"
+          text="Get help"
+          newTab
+        />
+      }
+    >
+      <div>
+        <b>Report clipped.</b> A sample of this query&apos;s results is included
+        below. You can still use query automations to complete this report in
+        your log destination.
+      </div>
+    </InfoBanner>
+  );
+
   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 = ({
     <MainContent className={baseClass}>
       <div className={`${baseClass}__wrapper`}>
         {renderHeader()}
+        {isClipped && renderClippedBanner()}
         {renderReport()}
       </div>
     </MainContent>
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
     }