Added loading indicator to logs and fixed browser history navigation

elastic · Mar 22, 2023 · c44b156 · c44b156
1 parent c4b5531
commit c44b156
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/...nfra/public/observability_logs/log_stream_position_state/src/url_state_storage_service.ts b/...nfra/public/observability_logs/log_stream_position_state/src/url_state_storage_service.ts
@@ -37,7 +37,8 @@ export const updateContextInUrl =
       positionStateKey,
       positionStateInUrlRT.encode({
         position: context.latestPosition ? pickTimeKey(context.latestPosition) : null,
-      })
+      }),
+      { replace: true }
     );
   };
 

diff --git a/...s/infra/public/observability_logs/log_stream_query_state/src/url_state_storage_service.ts b/...s/infra/public/observability_logs/log_stream_query_state/src/url_state_storage_service.ts
@@ -88,7 +88,8 @@ export const updateContextInUrl =
         filters: context.filters,
         timeRange: context.timeRange,
         refreshInterval: context.refreshInterval,
-      })
+      }),
+      { replace: true }
     );
   };
 

diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/logs/logs_tab_content.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/logs/logs_tab_content.tsx
@@ -7,7 +7,7 @@
 
 import React, { useMemo } from 'react';
 import type { Filter } from '@kbn/es-query';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import { SnapshotNode } from '../../../../../../../common/http_api';
 import { LogStream } from '../../../../../../components/log_stream';
 import { useHostsViewContext } from '../../../hooks/use_hosts_view';
@@ -20,7 +20,7 @@ export const LogsTabContent = () => {
   const [filterQuery] = useLogsSearchUrlState();
   const { getDateRangeAsTimestamp } = useUnifiedSearchContext();
   const { from, to } = getDateRangeAsTimestamp();
-  const { hostNodes } = useHostsViewContext();
+  const { hostNodes, loading } = useHostsViewContext();
 
   const hostsFilterQuery = useMemo(() => createHostsFilter(hostNodes), [hostNodes]);
 
@@ -29,6 +29,15 @@ export const LogsTabContent = () => {
     return `${filterQuery.query ? filterQuery.query + ' and ' : ''}${hostsFilterQueryParam}`;
   }, [filterQuery.query, hostNodes]);
 
+  if (loading)
+    return (
+      <EuiFlexGroup style={{ height: 300 }} alignItems="center" justifyContent="spaceAround">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="xl" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+
   return (
     <EuiFlexGroup direction="column" gutterSize="m" data-test-subj="hostsView-logs">
       <EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
@@ -39,18 +48,17 @@ export const LogsTabContent = () => {
           <LogsLinkToStream startTimestamp={from} endTimestamp={to} query={logsLinkToStreamQuery} />
         </EuiFlexItem>
       </EuiFlexGroup>
-      {hostNodes.length ? (
-        <EuiFlexItem>
-          <LogStream
-            height={500}
-            logView={{ type: 'log-view-reference', logViewId: 'default' }}
-            startTimestamp={from}
-            endTimestamp={to}
-            filters={[hostsFilterQuery]}
-            query={filterQuery}
-          />
-        </EuiFlexItem>
-      ) : null}
+
+      <EuiFlexItem>
+        <LogStream
+          height={500}
+          logView={{ type: 'log-view-reference', logViewId: 'default' }}
+          startTimestamp={from}
+          endTimestamp={to}
+          filters={[hostsFilterQuery]}
+          query={filterQuery}
+        />
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };