- 
- Phoning home...
-
+ - There are currently no results to your query. Please wait while we talk - to more hosts. -
-
-
- );
-};
-
-export default QueryEditor;
diff --git a/frontend/pages/queries/QueryPage/screens/test.js b/frontend/pages/queries/QueryPage/screens/test.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
new file mode 100644
index 0000000000..be52bd6ad3
--- /dev/null
+++ b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
@@ -0,0 +1,241 @@
+import React, { useContext, useEffect } from "react";
+import { useQuery } from "react-query";
+import { InjectedRouter, Params } from "react-router/lib/Router";
+import { useErrorHandler } from "react-error-boundary";
+
+import PATHS from "router/paths";
+import { AppContext } from "context/app";
+import { QueryContext } from "context/query";
+import useTeamIdParam from "hooks/useTeamIdParam";
+
+import {
+ IGetQueryResponse,
+ ISchedulableQuery,
+} from "interfaces/schedulable_query";
+
+import queryAPI from "services/entities/queries";
+
+import Spinner from "components/Spinner/Spinner";
+import Button from "components/buttons/Button";
+import BackLink from "components/BackLink";
+import MainContent from "components/MainContent";
+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 CachedDetails from "../components/CachedDetails/CachedDetails";
+import NoResults from "../components/NoResults/NoResults";
+
+interface IQueryDetailsPageProps {
+ router: InjectedRouter; // v3
+ params: Params;
+ location: {
+ pathname: string;
+ query: { team_id?: string };
+ search: string;
+ };
+}
+
+const baseClass = "query-details-page";
+
+const QueryDetailsPage = ({
+ router,
+ params: { id: paramsQueryId },
+ location,
+}: IQueryDetailsPageProps): JSX.Element => {
+ const queryId = paramsQueryId ? parseInt(paramsQueryId, 10) : null;
+
+ const {
+ currentTeamName: teamNameForQuery,
+ teamIdForApi: apiTeamIdForQuery,
+ } = useTeamIdParam({
+ location,
+ router,
+ includeAllTeams: true,
+ includeNoTeam: false,
+ });
+
+ const handlePageError = useErrorHandler();
+ const {
+ isGlobalAdmin,
+ isGlobalMaintainer,
+ isAnyTeamMaintainerOrTeamAdmin,
+ isObserverPlus,
+ isAnyTeamObserverPlus,
+ config,
+ filteredQueriesPath,
+ } = useContext(AppContext);
+ const {
+ lastEditedQueryName,
+ lastEditedQueryDescription,
+ lastEditedQueryObserverCanRun,
+ setLastEditedQueryId,
+ setLastEditedQueryName,
+ setLastEditedQueryDescription,
+ setLastEditedQueryBody,
+ setLastEditedQueryObserverCanRun,
+ setLastEditedQueryFrequency,
+ setLastEditedQueryLoggingType,
+ setLastEditedQueryMinOsqueryVersion,
+ setLastEditedQueryPlatforms,
+ } = useContext(QueryContext);
+
+ // Title that shows up on browser tabs (e.g., Query details | Discover TLS certificates | Fleet for osquery)
+ document.title = `Query details | ${lastEditedQueryName} | Fleet for osquery`;
+
+ // disabled on page load so we can control the number of renders
+ // else it will re-populate the context on occasion
+ const {
+ isLoading: isStoredQueryLoading,
+ data: storedQuery,
+ error: storedQueryError,
+ } = useQuery
-
-
+
+ {!isLoading && !isApiError && (
+
+
+ )}
+ {!isLoading && !isApiError && (
+
+
+ + {lastEditedQueryName} +
++ {lastEditedQueryDescription} +
+
+
+ {(lastEditedQueryObserverCanRun ||
+ isObserverPlus ||
+ isAnyTeamObserverPlus ||
+ canEditQuery) && (
+
+
+
+
+ )}
+
+
+ )}
+
+ );
+ };
+
+ 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
+ const loggingSnapshot = storedQuery?.logging === "snapshot";
+ const disabledCaching =
+ disabledCachingGlobally || discardDataEnabled || !loggingSnapshot;
+ const emptyCache = true; // TODO: Update with API response
+ const errorsOnly = true; // TODO: Update with API response
+
+ // Loading state
+ if (isLoading) {
+ return
+
+ Automations:
+
+
+
+ Log destination:{" "}
+
+
+ {renderHeader()}
+ {renderReport()}
+
+ TODO
;
+};
+
+export default CachedDetails;
diff --git a/frontend/pages/queries/details/components/CachedDetails/index.ts b/frontend/pages/queries/details/components/CachedDetails/index.ts
new file mode 100644
index 0000000000..b50b73552b
--- /dev/null
+++ b/frontend/pages/queries/details/components/CachedDetails/index.ts
@@ -0,0 +1 @@
+export { default } from "./CachedDetails";
diff --git a/frontend/pages/queries/details/components/NoResults/NoResults.tsx b/frontend/pages/queries/details/components/NoResults/NoResults.tsx
new file mode 100644
index 0000000000..7897facb23
--- /dev/null
+++ b/frontend/pages/queries/details/components/NoResults/NoResults.tsx
@@ -0,0 +1,116 @@
+import React from "react";
+
+import differenceInSeconds from "date-fns/differenceInSeconds";
+import formatDistance from "date-fns/formatDistance";
+import add from "date-fns/add";
+
+import TooltipWrapper from "components/TooltipWrapper/TooltipWrapper";
+import EmptyTable from "components/EmptyTable/EmptyTable";
+
+interface INoResultsProps {
+ queryInterval?: number;
+ queryUpdatedAt?: string;
+ disabledCaching: boolean;
+ disabledCachingGlobally: boolean;
+ discardDataEnabled: boolean;
+ loggingSnapshot: boolean;
+ errorsOnly: boolean;
+}
+
+const baseClass = "no-results";
+
+const NoResults = ({
+ queryInterval,
+ queryUpdatedAt,
+ disabledCaching,
+ disabledCachingGlobally,
+ discardDataEnabled,
+ loggingSnapshot,
+ errorsOnly,
+}: INoResultsProps): JSX.Element => {
+ // Returns how many seconds it takes to expect a cached update
+ const secondsCheckbackTime = () => {
+ const secondsSinceUpdate = queryUpdatedAt
+ ? differenceInSeconds(new Date(), new Date(queryUpdatedAt))
+ : 0;
+ const secondsUpdateWaittime = (queryInterval || 0) + 60;
+ return secondsUpdateWaittime - secondsSinceUpdate;
+ };
+
+ // Update status of collecting cached results
+ const collectingResults = secondsCheckbackTime() > 0;
+
+ // Converts seconds takes to update to human readable format
+ const readableCheckbackTime = formatDistance(
+ add(new Date(), { seconds: secondsCheckbackTime() }),
+ new Date()
+ );
+
+ // Collecting results state
+ if (collectingResults) {
+ const collectingResultsInfo = () =>
+ `Fleet is collecting query results. Check back in about ${readableCheckbackTime}.`;
+
+ return (
+ - Query reports are globally disabled in organization settings.
- This query has Discard data enabled.
- The logging setting for this query is not Snapshot.
{renderScreen()}
+
+
+
+
+
+ {renderScreen()}
+