Remove discover implement embeddable dashboard on aws module (#6494)

* Migrated visualization to embeddables

* Remove old visualizations aws

* Remove overview-aws imports

* Add Date Picker

* Add aws agent dashboard

* Remove old aws agent dashboard

* revert

* Revert "Remove overview-aws imports"

This reverts commit fd0a62c.

* Revert "Remove old aws agent dashboard"

This reverts commit 357bae1.

* Remove prop unnecessary

* Change legend position

* Add loading spinner, no result, sample data warning

* feat(aws): use data source on Dashboard and Events tabs

* render of overview or agent dashboard

* Add unsubscribe use-data-source

* Fix DiscoverNoResults render with date change

* Change imports

* Update dashboard.tsx

* Removed unnecessary aws in tabFilters in common-data.js

* Conditional rendering sampledatawarning

* Conditional rendering sampledatawarning

* Update styles.scss

plugins/main/common/constants.ts

@@ -233,6 +233,7 @@ export const DATA_SOURCE_FILTER_CONTROLLED_MITRE_ATTACK_RULE_ID =
   'hidden-mitre-attack-rule-id';
 export const DATA_SOURCE_FILTER_CONTROLLED_VIRUSTOTAL_RULE_GROUP =
   'virustotal-rule-group';
+export const DATA_SOURCE_FILTER_CONTROLLED_AWS_RULE_GROUP = 'aws-rule-group';
 export const DATA_SOURCE_FILTER_CONTROLLED_FIM_RULE_GROUP = 'fim-rule-group';
 
 

plugins/main/public/components/common/data-source/hooks/use-data-source.ts

@@ -83,10 +83,9 @@ export function useDataSource<T extends tParsedIndexPattern, K extends PatternDa
   };
 
   useEffect(() => {
-    init();
-  }, []);
 
-  const init = async () => {
+    let subscription;
+    (async () => {
     setIsLoading(true);
     const factory = injectedFactory || new PatternDataSourceFactory();
     const patternsData = await repository.getAll();
@@ -104,7 +103,7 @@ export function useDataSource<T extends tParsedIndexPattern, K extends PatternDa
       initialFetchFilters
     );
     // what the filters update
-    dataSourceFilterManager.getUpdates$().subscribe({
+    subscription = dataSourceFilterManager.getUpdates$().subscribe({
       next: () => {
         // this is necessary to remove the hidden filters from the filter manager and not show them in the search bar
         dataSourceFilterManager.setFilters(dataSourceFilterManager.getFilters());
@@ -116,7 +115,9 @@ export function useDataSource<T extends tParsedIndexPattern, K extends PatternDa
     setFetchFilters(dataSourceFilterManager.getFetchFilters());
     setDataSourceFilterManager(dataSourceFilterManager);
     setIsLoading(false);
-  };
+  })();
+    return () => subscription.unsubscribe();
+  }, []);
 
   if (isLoading) {
     return {

plugins/main/public/components/common/data-source/pattern/alerts/alerts-aws/alerts-aws-data-source.ts

@@ -0,0 +1,24 @@
+import { tFilter } from '../../../index';
+import { DATA_SOURCE_FILTER_CONTROLLED_AWS_RULE_GROUP } from '../../../../../../../common/constants';
+import { AlertsDataSource } from '../alerts-data-source';
+
+const AWS_GROUP_KEY = 'rule.groups';
+const AWS_GROUP_VALUE = 'amazon';
+
+export class AlertsAWSDataSource extends AlertsDataSource {
+  constructor(id: string, title: string) {
+    super(id, title);
+  }
+
+  getRuleGroupsFilter() {
+    return super.getRuleGroupsFilter(
+      AWS_GROUP_KEY,
+      AWS_GROUP_VALUE,
+      DATA_SOURCE_FILTER_CONTROLLED_AWS_RULE_GROUP,
+    );
+  }
+
+  getFixedFilters(): tFilter[] {
+    return [...this.getRuleGroupsFilter(), ...super.getFixedFilters()];
+  }
+}

plugins/main/public/components/common/data-source/pattern/alerts/alerts-aws/index.ts

@@ -0,0 +1 @@
+export * from './alerts-aws-data-source';

plugins/main/public/components/common/data-source/pattern/alerts/index.ts

@@ -1,6 +1,7 @@
 export * from './alerts-fim';
 export * from './alerts-data-source-repository';
 export * from './alerts-data-source';
+export * from './alerts-aws';
 export * from './vulnerabilities';
 export * from './mitre-attack';
 export * from './virustotal';

plugins/main/public/components/common/modules/modules-defaults.tsx

@@ -11,6 +11,7 @@
  */
 import { Dashboard } from './dashboard';
 import { MainSca } from '../../agents/sca';
+import { DashboardAWS } from '../../overview/amazon-web-services/dashboards';
 import { MainMitre } from './main-mitre';
 import { ModuleMitreAttackIntelligence } from '../../overview/mitre/intelligence';
 import { MainFim } from '../../agents/fim';
@@ -52,6 +53,7 @@ import { MitreAttackDataSource } from '../data-source/pattern/alerts/mitre-attac
 import {
   AlertsDataSource,
   AlertsVulnerabilitiesDataSource,
+  AlertsAWSDataSource,
   VirusTotalDataSource,
   AlertsFIMDataSource,
 } from '../data-source';
@@ -128,8 +130,16 @@ export const ModulesDefaults = {
   aws: {
     init: 'dashboard',
     tabs: [
-      DashboardTab,
-      renderDiscoverTab(DEFAULT_INDEX_PATTERN, amazonWebServicesColumns),
+      {
+        id: 'dashboard',
+        name: 'Dashboard',
+        buttons: [ButtonModuleExploreAgent, ButtonModuleGenerateReport],
+        component: DashboardAWS,
+      },
+      renderDiscoverTab({
+        tableColumns: amazonWebServicesColumns,
+        DataSource: AlertsAWSDataSource,
+      }),
     ],
     availableFor: ['manager', 'agent'],
   },

plugins/main/public/components/overview/amazon-web-services/dashboards/dashboard.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from 'react';
+import useSearchBar from '../../../common/search-bar/use-search-bar';
+import { compose } from 'redux';
+import { getPlugins } from '../../../../kibana-services';
+import { ViewMode } from '../../../../../../../src/plugins/embeddable/public';
+import { getDashboardPanels } from './dashboard_panels';
+import { I18nProvider } from '@osd/i18n/react';
+import { SearchResponse } from '../../../../../../../src/core/server';
+import './styles.scss';
+import { withErrorBoundary } from '../../../common/hocs';
+import { IndexPattern } from '../../../../../../../src/plugins/data/common';
+import { SampleDataWarning } from '../../../visualize/components';
+import {
+  ErrorFactory,
+  ErrorHandler,
+  HttpError,
+} from '../../../../react-services/error-management';
+import {
+  AlertsDataSourceRepository,
+  PatternDataSource,
+  tParsedIndexPattern,
+  useDataSource,
+  AlertsAWSDataSource,
+} from '../../../common/data-source';
+import { DiscoverNoResults } from '../../../common/no-results/no-results';
+import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+
+const plugins = getPlugins();
+
+const SearchBar = getPlugins().data.ui.SearchBar;
+
+const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
+
+const DashboardAWSComponents: React.FC = ({}) => {
+  const {
+    filters,
+    dataSource,
+    fetchFilters,
+    isLoading: isDataSourceLoading,
+    fetchData,
+    setFilters,
+  } = useDataSource<tParsedIndexPattern, PatternDataSource>({
+    DataSource: AlertsAWSDataSource,
+    repository: new AlertsDataSourceRepository(),
+  });
+
+  const [results, setResults] = useState<SearchResponse>({} as SearchResponse);
+
+  const { searchBarProps } = useSearchBar({
+    indexPattern: dataSource?.indexPattern as IndexPattern,
+    filters,
+    setFilters,
+  });
+
+  const { query, dateRangeFrom, dateRangeTo } = searchBarProps;
+
+  useEffect(() => {
+    if (isDataSourceLoading) {
+      return;
+    }
+    fetchData({
+      query,
+      dateRange: {
+        from: dateRangeFrom,
+        to: dateRangeTo,
+      },
+    })
+      .then(results => setResults(results))
+      .catch(error => {
+        const searchError = ErrorFactory.create(HttpError, {
+          error,
+          message: 'Error fetching data',
+        });
+        ErrorHandler.handleError(searchError);
+      });
+  }, [
+    JSON.stringify(fetchFilters),
+    JSON.stringify(query),
+    JSON.stringify(dateRangeFrom),
+    JSON.stringify(dateRangeTo),
+  ]);
+  return (
+    <>
+      <I18nProvider>
+        <>
+          {isDataSourceLoading && !dataSource ? (
+            <LoadingSpinner />
+          ) : (
+            <div className='wz-search-bar hide-filter-control'>
+              <SearchBar
+                appName='aws-searchbar'
+                {...searchBarProps}
+                showDatePicker={true}
+                showQueryInput={true}
+                showQueryBar={true}
+              />
+            </div>
+          )}
+          {dataSource && results?.hits?.total === 0 ? (
+            <DiscoverNoResults />
+          ) : null}
+          {!isDataSourceLoading && dataSource && results?.hits?.total > 0 ? (
+            <>
+              <SampleDataWarning />
+              <div className='aws-dashboard-responsive'>
+                <DashboardByRenderer
+                  input={{
+                    viewMode: ViewMode.VIEW,
+                    panels: getDashboardPanels(
+                      dataSource?.id,
+                      Boolean(dataSource?.getPinnedAgentFilter()?.length),
+                    ),
+                    isFullScreenMode: false,
+                    filters: fetchFilters || [],
+                    useMargins: true,
+                    id: 'aws-dashboard-tab',
+                    timeRange: {
+                      from: dateRangeFrom,
+                      to: dateRangeTo,
+                    },
+                    title: 'AWS dashboard',
+                    description: 'Dashboard of the AWS',
+                    query: query,
+                    refreshConfig: {
+                      pause: false,
+                      value: 15,
+                    },
+                    hidePanelTitles: false,
+                  }}
+                />
+              </div>
+            </>
+          ) : null}
+        </>
+      </I18nProvider>
+    </>
+  );
+};
+
+export const DashboardAWS = compose(withErrorBoundary)(DashboardAWSComponents);