[Logs UI] Show navigation bar while loading source configurati… (#59997)

This moves the navigation bar and the source configuration loading indicator such that the bar is immediately visible and usable even before the source configuration has finished loading. closes #56728
elastic · Mar 12, 2020 · cf5ba6f · cf5ba6f
1 parent cf5c801
commit cf5ba6f
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 54 deletions.
diff --git a/...ck/plugins/infra/public/components/source_configuration/source_configuration_settings.tsx b/...ck/plugins/infra/public/components/source_configuration/source_configuration_settings.tsx
@@ -41,6 +41,7 @@ export const SourceConfigurationSettings = ({
     source,
     sourceExists,
     isLoading,
+    isUninitialized,
     updateSourceConfiguration,
   } = useContext(Source.Context);
 
@@ -83,10 +84,10 @@ export const SourceConfigurationSettings = ({
     source,
   ]);
 
-  if (!source) {
+  if ((isLoading || isUninitialized) && !source) {
     return <SourceLoadingPage />;
   }
-  if (!source.configuration) {
+  if (!source?.configuration) {
     return null;
   }
 

diff --git a/x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_module.tsx b/x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_module.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 
 import { useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { useModuleStatus } from './log_analysis_module_status';
@@ -146,6 +146,27 @@ export const useLogAnalysisModule = <JobType extends string>({
     sourceId,
   ]);
 
+  useEffect(() => {
+    dispatchModuleStatus({
+      type: 'updatedSourceConfiguration',
+      spaceId,
+      sourceId,
+      sourceConfiguration: {
+        timestampField,
+        indexPattern: indices.join(','),
+        bucketSpan: moduleDescriptor.bucketSpan,
+      },
+    });
+  }, [
+    dispatchModuleStatus,
+    indices,
+    moduleDescriptor.bucketSpan,
+    sourceConfiguration,
+    sourceId,
+    spaceId,
+    timestampField,
+  ]);
+
   return {
     cleanUpAndSetUpModule,
     cleanUpModule,

diff --git a/x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_module_status.tsx b/x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_module_status.tsx
@@ -329,18 +329,14 @@ const getSetupStatus = <JobType extends string>(
       ) {
         return setupStatus;
       } else if (
-        setupStatus === 'skippedButUpdatable' ||
-        (jobDefinition &&
-          !isJobRevisionCurrent(
-            jobId,
-            jobDefinition.config.custom_settings.job_revision || 0
-          )(jobSummaries))
+        jobDefinition &&
+        !isJobRevisionCurrent(
+          jobId,
+          jobDefinition.config.custom_settings.job_revision || 0
+        )(jobSummaries)
       ) {
         return 'skippedButUpdatable';
-      } else if (
-        setupStatus === 'skippedButReconfigurable' ||
-        !isJobConfigurationConsistent(jobId, sourceConfiguration)(jobSummaries)
-      ) {
+      } else if (!isJobConfigurationConsistent(jobId, sourceConfiguration)(jobSummaries)) {
         return 'skippedButReconfigurable';
       } else if (setupStatus === 'hiddenAfterSuccess') {
         return setupStatus;

diff --git a/x-pack/plugins/infra/public/containers/source/source.tsx b/x-pack/plugins/infra/public/containers/source/source.tsx
@@ -142,6 +142,10 @@ export const useSource = ({ sourceId }: { sourceId: string }) => {
     ]
   );
 
+  const isUninitialized = useMemo(() => loadSourceRequest.state === 'uninitialized', [
+    loadSourceRequest.state,
+  ]);
+
   const sourceExists = useMemo(() => (source ? !!source.version : undefined), [source]);
 
   const logIndicesExist = useMemo(() => source && source.status && source.status.logIndicesExist, [
@@ -162,6 +166,7 @@ export const useSource = ({ sourceId }: { sourceId: string }) => {
     logIndicesExist,
     isLoading,
     isLoadingSource: loadSourceRequest.state === 'pending',
+    isUninitialized,
     hasFailedLoadingSource: loadSourceRequest.state === 'rejected',
     loadSource,
     loadSourceFailureMessage:

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_content.tsx
@@ -6,7 +6,6 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { useEffect } from 'react';
-
 import { isSetupStatusWithResults } from '../../../../common/log_analysis';
 import { LoadingPage } from '../../../components/loading_page';
 import {
@@ -15,12 +14,23 @@ import {
   MissingSetupPrivilegesPrompt,
   MlUnavailablePrompt,
 } from '../../../components/logging/log_analysis_setup';
+import { SourceErrorPage } from '../../../components/source_error_page';
+import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useLogAnalysisCapabilitiesContext } from '../../../containers/logs/log_analysis';
+import { useSourceContext } from '../../../containers/source';
 import { LogEntryCategoriesResultsContent } from './page_results_content';
 import { LogEntryCategoriesSetupContent } from './page_setup_content';
 import { useLogEntryCategoriesModuleContext } from './use_log_entry_categories_module';
 
 export const LogEntryCategoriesPageContent = () => {
+  const {
+    hasFailedLoadingSource,
+    isLoadingSource,
+    isUninitialized,
+    loadSource,
+    loadSourceFailureMessage,
+  } = useSourceContext();
+
   const {
     hasLogAnalysisCapabilites,
     hasLogAnalysisReadCapabilities,
@@ -40,7 +50,11 @@ export const LogEntryCategoriesPageContent = () => {
     }
   }, [fetchJobStatus, fetchModuleDefinition, hasLogAnalysisReadCapabilities]);
 
-  if (!hasLogAnalysisCapabilites) {
+  if (isLoadingSource || isUninitialized) {
+    return <SourceLoadingPage />;
+  } else if (hasFailedLoadingSource) {
+    return <SourceErrorPage errorMessage={loadSourceFailureMessage ?? ''} retry={loadSource} />;
+  } else if (!hasLogAnalysisCapabilites) {
     return <MlUnavailablePrompt />;
   } else if (!hasLogAnalysisReadCapabilities) {
     return <MissingResultsPrivilegesPrompt />;

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx
@@ -6,7 +6,6 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { useEffect } from 'react';
-
 import { isSetupStatusWithResults } from '../../../../common/log_analysis';
 import { LoadingPage } from '../../../components/loading_page';
 import {
@@ -15,12 +14,23 @@ import {
   MissingSetupPrivilegesPrompt,
   MlUnavailablePrompt,
 } from '../../../components/logging/log_analysis_setup';
+import { SourceErrorPage } from '../../../components/source_error_page';
+import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useLogAnalysisCapabilitiesContext } from '../../../containers/logs/log_analysis';
+import { useSourceContext } from '../../../containers/source';
 import { LogEntryRateResultsContent } from './page_results_content';
 import { LogEntryRateSetupContent } from './page_setup_content';
 import { useLogEntryRateModuleContext } from './use_log_entry_rate_module';
 
 export const LogEntryRatePageContent = () => {
+  const {
+    hasFailedLoadingSource,
+    isLoadingSource,
+    isUninitialized,
+    loadSource,
+    loadSourceFailureMessage,
+  } = useSourceContext();
+
   const {
     hasLogAnalysisCapabilites,
     hasLogAnalysisReadCapabilities,
@@ -36,7 +46,11 @@ export const LogEntryRatePageContent = () => {
     }
   }, [fetchJobStatus, fetchModuleDefinition, hasLogAnalysisReadCapabilities]);
 
-  if (!hasLogAnalysisCapabilites) {
+  if (isLoadingSource || isUninitialized) {
+    return <SourceLoadingPage />;
+  } else if (hasFailedLoadingSource) {
+    return <SourceErrorPage errorMessage={loadSourceFailureMessage ?? ''} retry={loadSource} />;
+  } else if (!hasLogAnalysisCapabilites) {
     return <MlUnavailablePrompt />;
   } else if (!hasLogAnalysisReadCapabilities) {
     return <MissingResultsPrivilegesPrompt />;

diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -15,10 +15,7 @@ import { HelpCenterContent } from '../../components/help_center_content';
 import { AppNavigation } from '../../components/navigation/app_navigation';
 import { RoutedTabs } from '../../components/navigation/routed_tabs';
 import { ColumnarPage } from '../../components/page';
-import { SourceErrorPage } from '../../components/source_error_page';
-import { SourceLoadingPage } from '../../components/source_loading_page';
 import { useLogAnalysisCapabilitiesContext } from '../../containers/logs/log_analysis';
-import { useSourceContext } from '../../containers/source';
 import { RedirectWithQueryParams } from '../../utils/redirect_with_query_params';
 import { LogEntryCategoriesPage } from './log_entry_categories';
 import { LogEntryRatePage } from './log_entry_rate';
@@ -27,7 +24,6 @@ import { StreamPage } from './stream';
 
 export const LogsPageContent: React.FunctionComponent = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
-  const source = useSourceContext();
   const logAnalysisCapabilities = useLogAnalysisCapabilitiesContext();
 
   const streamTab = {
@@ -68,35 +64,22 @@ export const LogsPageContent: React.FunctionComponent = () => {
         ]}
         readOnlyBadge={!uiCapabilities?.logs?.save}
       />
-      {source.isLoadingSource ||
-      (!source.isLoadingSource && !source.hasFailedLoadingSource && source.source === undefined) ? (
-        <SourceLoadingPage />
-      ) : source.hasFailedLoadingSource ? (
-        <SourceErrorPage
-          errorMessage={source.loadSourceFailureMessage || ''}
-          retry={source.loadSource}
+      <AppNavigation aria-label={pageTitle}>
+        <RoutedTabs
+          tabs={
+            logAnalysisCapabilities.hasLogAnalysisCapabilites
+              ? [streamTab, logRateTab, logCategoriesTab, settingsTab]
+              : [streamTab, settingsTab]
+          }
         />
-      ) : (
-        <>
-          <AppNavigation aria-label={pageTitle}>
-            <RoutedTabs
-              tabs={
-                logAnalysisCapabilities.hasLogAnalysisCapabilites
-                  ? [streamTab, logRateTab, logCategoriesTab, settingsTab]
-                  : [streamTab, settingsTab]
-              }
-            />
-          </AppNavigation>
-
-          <Switch>
-            <Route path={streamTab.pathname} component={StreamPage} />
-            <Route path={logRateTab.pathname} component={LogEntryRatePage} />
-            <Route path={logCategoriesTab.pathname} component={LogEntryCategoriesPage} />
-            <Route path={settingsTab.pathname} component={LogsSettingsPage} />
-            <RedirectWithQueryParams from={'/analysis'} to={logRateTab.pathname} exact />
-          </Switch>
-        </>
-      )}
+      </AppNavigation>
+      <Switch>
+        <Route path={streamTab.pathname} component={StreamPage} />
+        <Route path={logRateTab.pathname} component={LogEntryRatePage} />
+        <Route path={logCategoriesTab.pathname} component={LogEntryCategoriesPage} />
+        <Route path={settingsTab.pathname} component={LogsSettingsPage} />
+        <RedirectWithQueryParams from={'/analysis'} to={logRateTab.pathname} exact />
+      </Switch>
     </ColumnarPage>
   );
 };

diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx
@@ -4,14 +4,30 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useContext } from 'react';
-
-import { Source } from '../../../containers/source';
+import React from 'react';
+import { SourceErrorPage } from '../../../components/source_error_page';
+import { SourceLoadingPage } from '../../../components/source_loading_page';
+import { useSourceContext } from '../../../containers/source';
 import { LogsPageLogsContent } from './page_logs_content';
 import { LogsPageNoIndicesContent } from './page_no_indices_content';
 
 export const StreamPageContent: React.FunctionComponent = () => {
-  const { logIndicesExist } = useContext(Source.Context);
+  const {
+    hasFailedLoadingSource,
+    isLoadingSource,
+    isUninitialized,
+    loadSource,
+    loadSourceFailureMessage,
+    logIndicesExist,
+  } = useSourceContext();
 
-  return <>{logIndicesExist ? <LogsPageLogsContent /> : <LogsPageNoIndicesContent />}</>;
+  if (isLoadingSource || isUninitialized) {
+    return <SourceLoadingPage />;
+  } else if (hasFailedLoadingSource) {
+    return <SourceErrorPage errorMessage={loadSourceFailureMessage ?? ''} retry={loadSource} />;
+  } else if (logIndicesExist) {
+    return <LogsPageLogsContent />;
+  } else {
+    return <LogsPageNoIndicesContent />;
+  }
 };