Handle invalid date range expressions

elastic · Nov 25, 2020 · 0e31368 · 0e31368
1 parent 12d1e76
commit 0e31368
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/...pplications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx b/...pplications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { memo, useMemo, useState, useCallback } from 'react';
+import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 import url from 'url';
 import { encode } from 'rison-node';
@@ -25,6 +25,7 @@ import { TimeRange, esKuery } from '../../../../../../../../../../../src/plugins
 import { LogStream } from '../../../../../../../../../infra/public';
 import { Agent } from '../../../../../types';
 import { useStartServices } from '../../../../../hooks';
+import { DEFAULT_DATE_RANGE } from './constants';
 import { DatasetFilter } from './filter_dataset';
 import { LogLevelFilter } from './filter_log_level';
 import { LogQueryBar } from './query_bar';
@@ -64,8 +65,8 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(({ agen
       const { min, max } = data.query.timefilter.timefilter.calculateBounds(timeRange);
       return min && max
         ? {
-            startTimestamp: min.valueOf(),
-            endTimestamp: max.valueOf(),
+            start: min.valueOf(),
+            end: max.valueOf(),
           }
         : undefined;
     },
@@ -85,15 +86,35 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(({ agen
     [getDateRangeTimestamps, updateState]
   );
 
-  const dateRangeTimestamps = useMemo(
-    () =>
+  const [dateRangeTimestamps, setDateRangeTimestamps] = useState<{ start: number; end: number }>(
+    getDateRangeTimestamps({
+      from: state.start,
+      to: state.end,
+    }) ||
       getDateRangeTimestamps({
-        from: state.start,
-        to: state.end,
-      }),
-    [getDateRangeTimestamps, state.end, state.start]
+        from: DEFAULT_DATE_RANGE.start,
+        to: DEFAULT_DATE_RANGE.end,
+      })!
   );
 
+  // Attempts to parse for timestamps when start/end date expressions change
+  // If invalid date expressions, set expressions back to default
+  // Otherwise set the new timestamps
+  useEffect(() => {
+    const timestampsFromDateRange = getDateRangeTimestamps({
+      from: state.start,
+      to: state.end,
+    });
+    if (!timestampsFromDateRange) {
+      tryUpdateDateRange({
+        from: DEFAULT_DATE_RANGE.start,
+        to: DEFAULT_DATE_RANGE.end,
+      });
+    } else {
+      setDateRangeTimestamps(timestampsFromDateRange);
+    }
+  }, [state.start, state.end, getDateRangeTimestamps, tryUpdateDateRange]);
+
   // Query validation helper
   const isQueryValid = useCallback((testQuery: string) => {
     try {
@@ -241,8 +262,8 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(({ agen
         <EuiPanel paddingSize="none">
           <LogStream
             height="100%"
-            startTimestamp={dateRangeTimestamps!.startTimestamp}
-            endTimestamp={dateRangeTimestamps!.endTimestamp}
+            startTimestamp={dateRangeTimestamps.start}
+            endTimestamp={dateRangeTimestamps.end}
             query={logStreamQuery}
           />
         </EuiPanel>

diff --git a/...lic/applications/fleet/sections/agents/agent_details_page/components/agent_logs/index.tsx b/...lic/applications/fleet/sections/agents/agent_details_page/components/agent_logs/index.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import {
   createStateContainer,
   syncState,
@@ -38,6 +38,8 @@ const AgentLogsConnected = AgentLogsUrlStateHelper.connect<AgentLogsProps, 'stat
 
 export const AgentLogs: React.FunctionComponent<Pick<AgentLogsProps, 'agent'>> = memo(
   ({ agent }) => {
+    const [isSyncReady, setIsSyncReady] = useState<boolean>(false);
+
     useEffect(() => {
       const stateStorage = createKbnUrlStateStorage();
       const { start, stop } = syncState({
@@ -46,6 +48,7 @@ export const AgentLogs: React.FunctionComponent<Pick<AgentLogsProps, 'agent'>> =
         stateStorage,
       });
       start();
+      setIsSyncReady(true);
 
       return () => {
         stop();
@@ -55,7 +58,7 @@ export const AgentLogs: React.FunctionComponent<Pick<AgentLogsProps, 'agent'>> =
 
     return (
       <AgentLogsUrlStateHelper.Provider value={stateContainer}>
-        <AgentLogsConnected agent={agent} />
+        {isSyncReady ? <AgentLogsConnected agent={agent} /> : null}
       </AgentLogsUrlStateHelper.Provider>
     );
   }