[FEATURE] Add loading state for all tables visualizations on overview page (#237) (#238)

* [FEATURE] Add loading state for all tables/visualizations on Overview page #118

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Add loading state for all tables/visualizations on Overview page #118

Signed-off-by: Jovan Cvetkovic <[email protected]>

Signed-off-by: Jovan Cvetkovic <[email protected]>
(cherry picked from commit b5f752b)

Co-authored-by: Jovan Cvetkovic <[email protected]>

Author: opensearch-trigger-bot[bot]

public/app.scss

@@ -44,3 +44,5 @@ $euiTextColor: $euiColorDarkestShade !default;
 .state-accordion:hover {
   text-decoration: none;
 }
+
+@import "./components/Charts/ChartContainer.scss";

public/components/Charts/ChartContainer.scss

@@ -0,0 +1,21 @@
+.chart-view-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .chart-view-container-mask {
+    width: 100%;
+    height: 100%;
+    background: white;
+    opacity: 0.5;
+    position: absolute;
+  }
+
+  .chart-view-container-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+}

public/components/Charts/ChartContainer.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { EuiLoadingChart } from '@elastic/eui';
+
+interface ChartContainerProps {
+  loading?: boolean;
+  chartViewId: string;
+}
+
+export const ChartContainer: React.FC<ChartContainerProps> = ({ chartViewId, loading = false }) => {
+  return (
+    <div className="chart-view-container">
+      {loading && (
+        <>
+          <EuiLoadingChart size="xl" className="chart-view-container-loading" />
+          <div className="chart-view-container-mask"></div>
+        </>
+      )}
+      <div id={chartViewId}></div>
+    </div>
+  );
+};

public/pages/Overview/components/Widgets/DetectorsWidget.tsx

@@ -44,9 +44,14 @@ const getColumns = (
 
 export interface DetectorsWidgetProps extends RouteComponentProps {
   detectorHits: DetectorHit[];
+  loading?: boolean;
 }
 
-export const DetectorsWidget: React.FC<DetectorsWidgetProps> = ({ detectorHits, history }) => {
+export const DetectorsWidget: React.FC<DetectorsWidgetProps> = ({
+  detectorHits,
+  history,
+  loading = false,
+}) => {
   const detectors = detectorHits.map((detectorHit) => ({
     detectorName: detectorHit._source.name,
     id: detectorHit._id,
@@ -76,7 +81,11 @@ export const DetectorsWidget: React.FC<DetectorsWidgetProps> = ({ detectorHits,
 
   return (
     <WidgetContainer title={`Detectors (${detectors.length})`} actions={actions}>
-      <TableWidget columns={getColumns(detectorIdToHit, showDetectorDetails)} items={detectors} />
+      <TableWidget
+        columns={getColumns(detectorIdToHit, showDetectorDetails)}
+        items={detectors}
+        loading={loading}
+      />
     </WidgetContainer>
   );
 };

public/pages/Overview/components/Widgets/RecentAlertsWidget.tsx

@@ -37,9 +37,13 @@ const columns: EuiBasicTableColumn<AlertItem>[] = [
 
 export interface RecentAlertsWidgetProps {
   items: AlertItem[];
+  loading?: boolean;
 }
 
-export const RecentAlertsWidget: React.FC<RecentAlertsWidgetProps> = ({ items }) => {
+export const RecentAlertsWidget: React.FC<RecentAlertsWidgetProps> = ({
+  items,
+  loading = false,
+}) => {
   const [alertItems, setAlertItems] = useState<AlertItem[]>([]);
 
   useEffect(() => {
@@ -61,7 +65,7 @@ export const RecentAlertsWidget: React.FC<RecentAlertsWidgetProps> = ({ items })
       title={`Top ${alertItems.length < 20 ? '' : 20} recent alerts`}
       actions={actions}
     >
-      <TableWidget columns={columns} items={alertItems} />
+      <TableWidget columns={columns} items={alertItems} loading={loading} />
     </WidgetContainer>
   );
 };

public/pages/Overview/components/Widgets/RecentFindingsWidget.tsx

@@ -44,9 +44,13 @@ const columns: EuiBasicTableColumn<FindingItem>[] = [
 
 export interface RecentFindingsWidgetProps {
   items: FindingItem[];
+  loading?: boolean;
 }
 
-export const RecentFindingsWidget: React.FC<RecentFindingsWidgetProps> = ({ items }) => {
+export const RecentFindingsWidget: React.FC<RecentFindingsWidgetProps> = ({
+  items,
+  loading = false,
+}) => {
   const [findingItems, setFindingItems] = useState<FindingItem[]>([]);
 
   useEffect(() => {
@@ -66,7 +70,7 @@ export const RecentFindingsWidget: React.FC<RecentFindingsWidgetProps> = ({ item
       title={`Top ${findingItems.length < 20 ? '' : 20} recent findings`}
       actions={actions}
     >
-      <TableWidget columns={columns} items={findingItems} />
+      <TableWidget columns={columns} items={findingItems} loading={loading} />
     </WidgetContainer>
   );
 };

public/pages/Overview/components/Widgets/Summary.tsx

@@ -11,10 +11,12 @@ import { getOverviewVisualizationSpec, getTimeWithMinPrecision } from '../../uti
 import { AlertItem, FindingItem } from '../../models/interfaces';
 import { createSelectComponent, renderVisualization } from '../../../../utils/helpers';
 import { ROUTES } from '../../../../utils/constants';
+import { ChartContainer } from '../../../../components/Charts/ChartContainer';
 
 export interface SummaryProps {
   findings: FindingItem[];
   alerts: AlertItem[];
+  loading?: boolean;
 }
 
 export interface SummaryData {
@@ -24,7 +26,7 @@ export interface SummaryData {
   logType?: string;
 }
 
-export const Summary: React.FC<SummaryProps> = ({ alerts, findings }) => {
+export const Summary: React.FC<SummaryProps> = ({ alerts, findings, loading = false }) => {
   const [groupBy, setGroupBy] = useState('');
   const [summaryData, setSummaryData] = useState<SummaryData[]>([]);
   const [activeAlerts, setActiveAlerts] = useState(0);
@@ -112,7 +114,7 @@ export const Summary: React.FC<SummaryProps> = ({ alerts, findings }) => {
           </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem>
-          <div id="summary-view" style={{ width: '100%' }}></div>
+          <ChartContainer chartViewId={'summary-view'} loading={loading} />
         </EuiFlexItem>
       </EuiFlexGroup>
     </WidgetContainer>

public/pages/Overview/components/Widgets/TableWidget.tsx

@@ -9,7 +9,7 @@ import { TableWidgetItem, TableWidgetProps } from '../../models/types';
 
 export class TableWidget<T extends TableWidgetItem> extends React.Component<TableWidgetProps<T>> {
   render() {
-    const { columns, items } = this.props;
+    const { columns, items, loading = false } = this.props;
 
     return (
       <EuiInMemoryTable<T>
@@ -18,6 +18,7 @@ export class TableWidget<T extends TableWidgetItem> extends React.Component<Tabl
         items={items}
         itemId={(item: T) => `${item.id}`}
         pagination={{ pageSize: 10, pageSizeOptions: [10] }}
+        loading={loading}
       />
     );
   }

public/pages/Overview/components/Widgets/TopRulesWidget.tsx

@@ -8,14 +8,16 @@ import React, { useEffect } from 'react';
 import { FindingItem } from '../../models/interfaces';
 import { WidgetContainer } from './WidgetContainer';
 import { getTopRulesVisualizationSpec } from '../../utils/helpers';
+import { ChartContainer } from '../../../../components/Charts/ChartContainer';
 
 export interface TopRulesWidgetProps {
   findings: FindingItem[];
+  loading?: boolean;
 }
 
 type RulesCount = { [ruleName: string]: number };
 
-export const TopRulesWidget: React.FC<TopRulesWidgetProps> = ({ findings }) => {
+export const TopRulesWidget: React.FC<TopRulesWidgetProps> = ({ findings, loading = false }) => {
   useEffect(() => {
     const rulesCount: RulesCount = {};
     findings.forEach((finding) => {
@@ -33,7 +35,7 @@ export const TopRulesWidget: React.FC<TopRulesWidgetProps> = ({ findings }) => {
 
   return (
     <WidgetContainer title="Most frequent detection rules">
-      <div id="top-rules-view"></div>
+      <ChartContainer chartViewId={'top-rules-view'} loading={loading} />
     </WidgetContainer>
   );
 };

public/pages/Overview/containers/Overview/Overview.tsx

@@ -36,6 +36,7 @@ export const Overview: React.FC<OverviewProps> = (props) => {
       alerts: [],
     },
   });
+  const [loading, setLoading] = useState(true);
   const context = useContext(CoreServicesContext);
   const services = useContext(ServicesContext);
 
@@ -44,6 +45,7 @@ export const Overview: React.FC<OverviewProps> = (props) => {
       ...state,
       overviewViewModel: { ...overviewViewModel },
     });
+    setLoading(false);
   };
 
   const overviewViewModelActor = useMemo(
@@ -78,6 +80,7 @@ export const Overview: React.FC<OverviewProps> = (props) => {
   };
 
   const onRefresh = async () => {
+    setLoading(true);
     overviewViewModelActor.onRefresh();
   };
 
@@ -121,15 +124,20 @@ export const Overview: React.FC<OverviewProps> = (props) => {
         <Summary
           alerts={state.overviewViewModel.alerts}
           findings={state.overviewViewModel.findings}
+          loading={loading}
         />
       </EuiFlexItem>
 
       <EuiFlexItem>
         <EuiFlexGrid columns={2} gutterSize="m">
-          <RecentAlertsWidget items={state.overviewViewModel.alerts} />
-          <RecentFindingsWidget items={state.overviewViewModel.findings} />
-          <TopRulesWidget findings={state.overviewViewModel.findings} />
-          <DetectorsWidget detectorHits={state.overviewViewModel.detectors} {...props} />
+          <RecentAlertsWidget items={state.overviewViewModel.alerts} loading={loading} />
+          <RecentFindingsWidget items={state.overviewViewModel.findings} loading={loading} />
+          <TopRulesWidget findings={state.overviewViewModel.findings} loading={loading} />
+          <DetectorsWidget
+            detectorHits={state.overviewViewModel.detectors}
+            {...props}
+            loading={loading}
+          />
         </EuiFlexGrid>
       </EuiFlexItem>
     </EuiFlexGroup>