[RAC][Observability] Use no data screen for the alerts and cases pages (

#115178) (#115919) Co-authored-by: Chris Cowan <chris@chriscowan.us> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Alejandro Fernández Gómez <alejandro.fernandez@elastic.co> Co-authored-by: Chris Cowan <chris@chriscowan.us>
elastic · Oct 21, 2021 · 79b494e · 79b494e
1 parent 9199b32
commit 79b494e
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 4 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alerts/index.tsx b/x-pack/plugins/observability/public/pages/alerts/index.tsx
@@ -16,9 +16,12 @@ import type { AlertWorkflowStatus } from '../../../common/typings';
 import { ExperimentalBadge } from '../../components/shared/experimental_badge';
 import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
 import { useFetcher } from '../../hooks/use_fetcher';
+import { useHasData } from '../../hooks/use_has_data';
 import { usePluginContext } from '../../hooks/use_plugin_context';
 import { RouteParams } from '../../routes';
 import { callObservabilityApi } from '../../services/call_observability_api';
+import { getNoDataConfig } from '../../utils/no_data_config';
+import { LoadingObservability } from '../overview/loading_observability';
 import { AlertsSearchBar } from './alerts_search_bar';
 import { AlertsTableTGrid } from './alerts_table_t_grid';
 import './styles.scss';
@@ -141,8 +144,25 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
     refetch.current = ref;
   }, []);
 
+  const { hasAnyData, isAllRequestsComplete } = useHasData();
+
+  // If there is any data, set hasData to true otherwise we need to wait till all the data is loaded before setting hasData to true or false; undefined indicates the data is still loading.
+  const hasData = hasAnyData === true || (isAllRequestsComplete === false ? undefined : false);
+
+  if (!hasAnyData && !isAllRequestsComplete) {
+    return <LoadingObservability />;
+  }
+
+  const noDataConfig = getNoDataConfig({
+    hasData,
+    basePath: core.http.basePath,
+    docsLink: core.docLinks.links.observability.guide,
+  });
+
   return (
     <ObservabilityPageTemplate
+      noDataConfig={noDataConfig}
+      data-test-subj={noDataConfig ? 'noDataPage' : undefined}
       pageHeader={{
         pageTitle: (
           <>

diff --git a/x-pack/plugins/observability/public/pages/cases/all_cases.tsx b/x-pack/plugins/observability/public/pages/cases/all_cases.tsx
@@ -16,16 +16,35 @@ import { usePluginContext } from '../../hooks/use_plugin_context';
 import { useReadonlyHeader } from '../../hooks/use_readonly_header';
 import { casesBreadcrumbs } from './links';
 import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
+import { useHasData } from '../../hooks/use_has_data';
+import { LoadingObservability } from '../overview/loading_observability';
+import { getNoDataConfig } from '../../utils/no_data_config';
 
 export const AllCasesPage = React.memo(() => {
   const userPermissions = useGetUserCasesPermissions();
-  const { ObservabilityPageTemplate } = usePluginContext();
+  const { core, ObservabilityPageTemplate } = usePluginContext();
   useReadonlyHeader();
-
   useBreadcrumbs([casesBreadcrumbs.cases]);
 
+  const { hasAnyData, isAllRequestsComplete } = useHasData();
+
+  if (!hasAnyData && !isAllRequestsComplete) {
+    return <LoadingObservability />;
+  }
+
+  // If there is any data, set hasData to true otherwise we need to wait till all the data is loaded before setting hasData to true or false; undefined indicates the data is still loading.
+  const hasData = hasAnyData === true || (isAllRequestsComplete === false ? undefined : false);
+
+  const noDataConfig = getNoDataConfig({
+    hasData,
+    basePath: core.http.basePath,
+    docsLink: core.docLinks.links.observability.guide,
+  });
+
   return userPermissions == null || userPermissions?.read ? (
     <ObservabilityPageTemplate
+      data-test-subj={noDataConfig ? 'noDataPage' : undefined}
+      noDataConfig={noDataConfig}
       pageHeader={{
         pageTitle: <>{i18n.PAGE_TITLE}</>,
       }}

diff --git a/x-pack/test/functional/page_objects/observability_page.ts b/x-pack/test/functional/page_objects/observability_page.ts
@@ -11,7 +11,6 @@ import { FtrProviderContext } from '../ftr_provider_context';
 
 export function ObservabilityPageProvider({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
-  const find = getService('find');
 
   return {
     async expectCreateCaseButtonEnabled() {
@@ -32,6 +31,10 @@ export function ObservabilityPageProvider({ getService, getPageObjects }: FtrPro
       await testSubjects.missingOrFail('case-callout-e41900b01c9ef0fa81dd6ff326083fb3');
     },
 
+    async expectNoDataPage() {
+      await testSubjects.existOrFail('noDataPage');
+    },
+
     async expectCreateCase() {
       await testSubjects.existOrFail('case-creation-form-steps');
     },
@@ -47,7 +50,7 @@ export function ObservabilityPageProvider({ getService, getPageObjects }: FtrPro
     },
 
     async expectForbidden() {
-      const h2 = await find.byCssSelector('body', 20000);
+      const h2 = await testSubjects.find('no_feature_permissions', 20000);
       const text = await h2.getVisibleText();
       expect(text).to.contain('Kibana feature privileges required');
     },

diff --git a/x-pack/test/functional/services/observability/alerts/common.ts b/x-pack/test/functional/services/observability/alerts/common.ts
@@ -66,6 +66,10 @@ export function ObservabilityAlertsCommonProvider({
     return await testSubjects.existOrFail(ALERTS_TABLE_CONTAINER_SELECTOR);
   };
 
+  const getNoDataPageOrFail = async () => {
+    return await testSubjects.existOrFail('noDataPage');
+  };
+
   const getNoDataStateOrFail = async () => {
     return await testSubjects.existOrFail('tGridEmptyState');
   };
@@ -193,6 +197,7 @@ export function ObservabilityAlertsCommonProvider({
     getCopyToClipboardButton,
     getFilterForValueButton,
     copyToClipboardButtonExists,
+    getNoDataPageOrFail,
     getNoDataStateOrFail,
     getTableCells,
     getTableCellsInRows,

diff --git a/x-pack/test/observability_functional/apps/observability/alerts/add_to_case.ts b/x-pack/test/observability_functional/apps/observability/alerts/add_to_case.ts
@@ -17,9 +17,11 @@ export default ({ getService, getPageObjects }: FtrProviderContext) => {
 
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
+      await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
     });
 
     after(async () => {
+      await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
       await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');
     });
 

diff --git a/x-pack/test/observability_functional/apps/observability/alerts/index.ts b/x-pack/test/observability_functional/apps/observability/alerts/index.ts
@@ -38,7 +38,22 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');
     });
 
+    describe('With no data', () => {
+      it('Shows the no data screen', async () => {
+        await observability.alerts.common.getNoDataPageOrFail();
+      });
+    });
+
     describe('Alerts table', () => {
+      before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
+        await observability.alerts.common.navigateToTimeWithData();
+      });
+
+      after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
+      });
+
       it('Renders the table', async () => {
         await observability.alerts.common.getTableOrFail();
       });

diff --git a/x-pack/test/observability_functional/apps/observability/alerts/workflow_status.ts b/x-pack/test/observability_functional/apps/observability/alerts/workflow_status.ts
@@ -21,11 +21,13 @@ export default ({ getService }: FtrProviderContext) => {
 
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
+      await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
       await observability.alerts.common.navigateToTimeWithData();
     });
 
     after(async () => {
       await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');
+      await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
     });
 
     it('is filtered to only show "open" alerts by default', async () => {

diff --git a/...st/observability_functional/apps/observability/feature_controls/observability_security.ts b/...st/observability_functional/apps/observability/feature_controls/observability_security.ts
@@ -31,8 +31,14 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       await esArchiver.unload('x-pack/test/functional/es_archives/cases/default');
     });
 
+    it('Shows the no data page on load', async () => {
+      await PageObjects.common.navigateToActualUrl('observabilityCases');
+      await PageObjects.observability.expectNoDataPage();
+    });
+
     describe('observability cases all privileges', () => {
       before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
         await observability.users.setTestUserRole(
           observability.users.defineBasicObservabilityRole({
             observabilityCases: ['all'],
@@ -42,6 +48,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       });
 
       after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
         await observability.users.restoreDefaultTestUserRole();
       });
 
@@ -83,6 +90,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
 
     describe('observability cases read-only privileges', () => {
       before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
         await observability.users.setTestUserRole(
           observability.users.defineBasicObservabilityRole({
             observabilityCases: ['read'],
@@ -92,6 +100,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       });
 
       after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
         await observability.users.restoreDefaultTestUserRole();
       });