From 04524377a94bd0534958693d0521f26b6a34f4af Mon Sep 17 00:00:00 2001
From: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
Date: Mon, 10 Apr 2023 19:58:19 +0200
Subject: [PATCH] [FEATURE] Provide empty states for Findings and Alerts page
 #471 (#494)

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 .../pages/Alerts/containers/Alerts/Alerts.tsx | 37 +++++++-
 .../Alerts/__snapshots__/Alerts.test.tsx.snap | 94 +++++++++++++------
 .../FindingsTable/FindingsTable.tsx           | 28 +++++-
 .../Findings/containers/Findings/Findings.tsx | 21 ++++-
 .../Overview/containers/Overview/Overview.tsx |  2 +
 5 files changed, 145 insertions(+), 37 deletions(-)

diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/public/pages/Alerts/containers/Alerts/Alerts.tsx
index 3482e8fc2..4fe4c03e0 100644
--- a/public/pages/Alerts/containers/Alerts/Alerts.tsx
+++ b/public/pages/Alerts/containers/Alerts/Alerts.tsx
@@ -17,6 +17,7 @@ import {
   EuiSuperDatePicker,
   EuiTitle,
   EuiToolTip,
+  EuiEmptyPrompt,
 } from '@elastic/eui';
 import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter';
 import dateMath from '@elastic/datemath';
@@ -81,6 +82,7 @@ export interface AlertsState {
   loading: boolean;
   timeUnit: TimeUnit;
   dateFormat: string;
+  widgetEmptyMessage: React.ReactNode | undefined;
 }
 
 const groupByOptions = [
@@ -112,6 +114,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
       detectors: {},
       timeUnit: timeUnits.timeUnit,
       dateFormat: timeUnits.dateFormat,
+      widgetEmptyMessage: undefined,
     };
   }
 
@@ -148,7 +151,20 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
     const filteredAlerts = alerts.filter((alert) =>
       moment(alert.last_notification_time).isBetween(moment(startMoment), moment(endMoment))
     );
-    this.setState({ alertsFiltered: true, filteredAlerts: filteredAlerts });
+    this.setState({
+      alertsFiltered: true,
+      filteredAlerts: filteredAlerts,
+      widgetEmptyMessage: filteredAlerts.length ? undefined : (
+        <EuiEmptyPrompt
+          body={
+            <p>
+              <span style={{ display: 'block' }}>No alerts.</span>Adjust the time range to see more
+              results.
+            </p>
+          }
+        />
+      ),
+    });
     renderVisualization(this.generateVisualizationSpec(filteredAlerts), 'alerts-view');
   };
 
@@ -413,6 +429,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
       flyoutData,
       loading,
       recentlyUsedRanges,
+      widgetEmptyMessage,
     } = this.state;
 
     const {
@@ -505,7 +522,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-            <EuiSpacer size="xxl" />
+            <EuiSpacer size={'m'} />
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiPanel>
@@ -514,7 +531,20 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
                   {this.createGroupByControl()}
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <ChartContainer chartViewId={'alerts-view'} loading={loading} />
+                  {!alerts || alerts.length === 0 ? (
+                    <EuiEmptyPrompt
+                      title={<h2>No alerts</h2>}
+                      body={
+                        <p>
+                          Adjust the time range to see more results or create alert triggers in your{' '}
+                          <EuiLink href={`${location.pathname}#/detectors`}>detectors</EuiLink> to
+                          generate alerts.
+                        </p>
+                      }
+                    />
+                  ) : (
+                    <ChartContainer chartViewId={'alerts-view'} loading={loading} />
+                  )}
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiPanel>
@@ -532,6 +562,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
                 sorting={sorting}
                 selection={selection}
                 loading={loading}
+                message={widgetEmptyMessage}
               />
             </ContentPanel>
           </EuiFlexItem>
diff --git a/public/pages/Alerts/containers/Alerts/__snapshots__/Alerts.test.tsx.snap b/public/pages/Alerts/containers/Alerts/__snapshots__/Alerts.test.tsx.snap
index 08f80250c..ac1a1d036 100644
--- a/public/pages/Alerts/containers/Alerts/__snapshots__/Alerts.test.tsx.snap
+++ b/public/pages/Alerts/containers/Alerts/__snapshots__/Alerts.test.tsx.snap
@@ -707,10 +707,10 @@ exports[`<Alerts /> spec renders the component 1`] = `
               </div>
             </EuiFlexGroup>
             <EuiSpacer
-              size="xxl"
+              size="m"
             >
               <div
-                className="euiSpacer euiSpacer--xxl"
+                className="euiSpacer euiSpacer--m"
               />
             </EuiSpacer>
           </div>
@@ -873,42 +873,76 @@ exports[`<Alerts /> spec renders the component 1`] = `
                       <div
                         className="euiFlexItem"
                       >
-                        <ChartContainer
-                          chartViewId="alerts-view"
-                          loading={true}
+                        <EuiEmptyPrompt
+                          body={
+                            <p>
+                              Adjust the time range to see more results or create alert triggers in your
+                               
+                              <EuiLink
+                                href="/#/detectors"
+                              >
+                                detectors
+                              </EuiLink>
+                               to generate alerts.
+                            </p>
+                          }
+                          title={
+                            <h2>
+                              No alerts
+                            </h2>
+                          }
                         >
                           <div
-                            className="chart-view-container"
+                            className="euiEmptyPrompt"
                           >
-                            <EuiLoadingChart
-                              className="chart-view-container-loading"
-                              size="xl"
+                            <EuiTitle
+                              size="m"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--medium"
+                              >
+                                No alerts
+                              </h2>
+                            </EuiTitle>
+                            <EuiTextColor
+                              color="subdued"
                             >
                               <span
-                                className="euiLoadingChart chart-view-container-loading euiLoadingChart--xLarge"
+                                className="euiTextColor euiTextColor--subdued"
                               >
-                                <span
-                                  className="euiLoadingChart__bar"
-                                />
-                                <span
-                                  className="euiLoadingChart__bar"
-                                />
-                                <span
-                                  className="euiLoadingChart__bar"
-                                />
-                                <span
-                                  className="euiLoadingChart__bar"
-                                />
+                                <EuiSpacer
+                                  size="m"
+                                >
+                                  <div
+                                    className="euiSpacer euiSpacer--m"
+                                  />
+                                </EuiSpacer>
+                                <EuiText>
+                                  <div
+                                    className="euiText euiText--medium"
+                                  >
+                                    <p>
+                                      Adjust the time range to see more results or create alert triggers in your
+                                       
+                                      <EuiLink
+                                        href="/#/detectors"
+                                      >
+                                        <a
+                                          className="euiLink euiLink--primary"
+                                          href="/#/detectors"
+                                          rel="noreferrer"
+                                        >
+                                          detectors
+                                        </a>
+                                      </EuiLink>
+                                       to generate alerts.
+                                    </p>
+                                  </div>
+                                </EuiText>
                               </span>
-                            </EuiLoadingChart>
-                            <div
-                              className="chart-view-container-mask"
-                            />
-                            <div
-                              id="alerts-view"
-                            />
+                            </EuiTextColor>
                           </div>
-                        </ChartContainer>
+                        </EuiEmptyPrompt>
                       </div>
                     </EuiFlexItem>
                   </div>
diff --git a/public/pages/Findings/components/FindingsTable/FindingsTable.tsx b/public/pages/Findings/components/FindingsTable/FindingsTable.tsx
index 53cfd6e53..6b9838d2c 100644
--- a/public/pages/Findings/components/FindingsTable/FindingsTable.tsx
+++ b/public/pages/Findings/components/FindingsTable/FindingsTable.tsx
@@ -12,6 +12,7 @@ import {
   EuiInMemoryTable,
   EuiLink,
   EuiToolTip,
+  EuiEmptyPrompt,
 } from '@elastic/eui';
 import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter';
 import dateMath from '@elastic/datemath';
@@ -48,6 +49,7 @@ interface FindingsTableState {
   flyout: object | undefined;
   flyoutOpen: boolean;
   selectedFinding?: Finding;
+  widgetEmptyMessage: React.ReactNode | undefined;
 }
 
 export default class FindingsTable extends Component<FindingsTableProps, FindingsTableState> {
@@ -59,6 +61,7 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
       flyout: undefined,
       flyoutOpen: false,
       selectedFinding: undefined,
+      widgetEmptyMessage: undefined,
     };
   }
 
@@ -82,7 +85,21 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
     const filteredFindings = findings.filter((finding) =>
       moment(finding.timestamp).isBetween(moment(startMoment), moment(endMoment))
     );
-    this.setState({ findingsFiltered: true, filteredFindings: filteredFindings });
+    this.setState({
+      findingsFiltered: true,
+      filteredFindings: filteredFindings,
+      widgetEmptyMessage:
+        filteredFindings.length || findings.length ? undefined : (
+          <EuiEmptyPrompt
+            body={
+              <p>
+                <span style={{ display: 'block' }}>No findings.</span>Adjust the time range to see
+                more results.
+              </p>
+            }
+          />
+        ),
+    });
     this.props.onFindingsFiltered(filteredFindings);
   };
 
@@ -142,7 +159,13 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
 
   render() {
     const { findings, loading, rules } = this.props;
-    const { findingsFiltered, filteredFindings, flyout, flyoutOpen } = this.state;
+    const {
+      findingsFiltered,
+      filteredFindings,
+      flyout,
+      flyoutOpen,
+      widgetEmptyMessage,
+    } = this.state;
 
     const columns: EuiBasicTableColumn<Finding>[] = [
       {
@@ -285,6 +308,7 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
           sorting={sorting}
           isSelectable={false}
           loading={loading}
+          message={widgetEmptyMessage}
         />
         {flyoutOpen && flyout}
       </div>
diff --git a/public/pages/Findings/containers/Findings/Findings.tsx b/public/pages/Findings/containers/Findings/Findings.tsx
index b76b654e6..2385cafc1 100644
--- a/public/pages/Findings/containers/Findings/Findings.tsx
+++ b/public/pages/Findings/containers/Findings/Findings.tsx
@@ -14,6 +14,8 @@ import {
   EuiSpacer,
   EuiSuperDatePicker,
   EuiTitle,
+  EuiEmptyPrompt,
+  EuiLink,
 } from '@elastic/eui';
 import FindingsTable from '../../components/FindingsTable';
 import FindingsService from '../../../../services/FindingsService';
@@ -37,7 +39,6 @@ import {
 } from '../../../Overview/utils/helpers';
 import { CoreServicesContext } from '../../../../components/core_services';
 import { Finding } from '../../models/interfaces';
-import { Detector } from '../../../../../models/interfaces';
 import { FeatureChannelList } from '../../../../../server/models/interfaces';
 import {
   getNotificationChannels,
@@ -54,6 +55,7 @@ import { NotificationsStart } from 'opensearch-dashboards/public';
 import { DateTimeFilter } from '../../../Overview/models/interfaces';
 import { ChartContainer } from '../../../../components/Charts/ChartContainer';
 import { DataStore } from '../../../../store/DataStore';
+import { Detector } from '../../../../../types';
 
 interface FindingsProps extends RouteComponentProps {
   detectorService: DetectorsService;
@@ -340,7 +342,22 @@ class Findings extends Component<FindingsProps, FindingsState> {
                 {this.createGroupByControl()}
               </EuiFlexItem>
               <EuiFlexItem>
-                <ChartContainer chartViewId={'findings-view'} loading={loading} />
+                {!findings || findings.length === 0 ? (
+                  <EuiEmptyPrompt
+                    title={<h2>No findings</h2>}
+                    body={
+                      <p>
+                        Adjust the time range to see more results or{' '}
+                        <EuiLink href={`${location.pathname}#/create-detector`}>
+                          create a detector
+                        </EuiLink>{' '}
+                        to generate findings.
+                      </p>
+                    }
+                  />
+                ) : (
+                  <ChartContainer chartViewId={'findings-view'} loading={loading} />
+                )}
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>
diff --git a/public/pages/Overview/containers/Overview/Overview.tsx b/public/pages/Overview/containers/Overview/Overview.tsx
index 4ba1c5218..64c21ea4d 100644
--- a/public/pages/Overview/containers/Overview/Overview.tsx
+++ b/public/pages/Overview/containers/Overview/Overview.tsx
@@ -11,6 +11,7 @@ import {
   EuiPopover,
   EuiSuperDatePicker,
   EuiTitle,
+  EuiSpacer,
 } from '@elastic/eui';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import {
@@ -166,6 +167,7 @@ export const Overview: React.FC<OverviewProps> = (props) => {
             />
           </EuiFlexItem>
         </EuiFlexGroup>
+        <EuiSpacer size={'m'} />
       </EuiFlexItem>
       <EuiFlexItem>
         <Summary