Adapt the reporting to the rendering of dashboards

plugins/main/public/components/common/hooks/use-reporting-communicate-search-context.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { updateReportingCommunicateSearchContext } from '../../../redux/actions/reportingActions';
+import { IIndexPattern } from '../../../../../../src/plugins/data/public';
+/**
+ * WORKAROUND: this hook stores the search context to be used by the Generate report button of
+ * module dashboards
+ * @param context
+ */
+export function useReportingCommunicateSearchContext(context: {
+  isSearching: boolean;
+  totalResults: number;
+  indexPattern: IIndexPattern;
+  filters: any;
+  time: any;
+  query: any;
+}) {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(updateReportingCommunicateSearchContext(context));
+    return () => dispatch(updateReportingCommunicateSearchContext(null));
+  }, [JSON.stringify(context)]);
+}

plugins/main/public/components/common/modules/buttons/generate_report.tsx

@@ -16,48 +16,65 @@ import { getUiSettings } from '../../../../kibana-services';
 import { ReportingService } from '../../../../react-services';
 import $ from 'jquery';
 import { WzButton } from '../../../common/buttons';
+import { connect } from 'react-redux';
 
+const mapStateToProps = state => ({
+  dataSourceSearchContext: state.reportingReducers.dataSourceSearchContext,
+});
 
-export const ButtonModuleGenerateReport = ({agent, moduleID, disabledReport}) => {
-  const action = useAsyncAction(async () => {
-    const reportingService = new ReportingService();
-    const isDarkModeTheme = getUiSettings().get('theme:darkMode');
-    if (isDarkModeTheme) {
+export const ButtonModuleGenerateReport = connect(mapStateToProps)(
+  ({ agent, moduleID, dataSourceSearchContext }) => {
+    const disabledReport = ![
+      !dataSourceSearchContext?.isSearching,
+      dataSourceSearchContext?.totalResults,
+      dataSourceSearchContext?.indexPattern,
+    ].every(Boolean);
+    const totalResults = dataSourceSearchContext?.totalResults;
+    const action = useAsyncAction(async () => {
+      const reportingService = new ReportingService();
+      const isDarkModeTheme = getUiSettings().get('theme:darkMode');
+      if (isDarkModeTheme) {
+        //Patch to fix white text in dark-mode pdf reports
+        const defaultTextColor = '#DFE5EF';
 
-      //Patch to fix white text in dark-mode pdf reports
-      const defaultTextColor = '#DFE5EF';
+        //Patch to fix dark backgrounds in visualizations dark-mode pdf reports
+        const $labels = $('.euiButtonEmpty__text, .echLegendItem');
+        const $vizBackground = $('.echChartBackground');
+        const defaultVizBackground = $vizBackground.css('background-color');
 
-      //Patch to fix dark backgrounds in visualizations dark-mode pdf reports
-      const $labels = $('.euiButtonEmpty__text, .echLegendItem');
-      const $vizBackground = $('.echChartBackground');
-      const defaultVizBackground = $vizBackground.css('background-color');
-
-      try {
-        $labels.css('color', 'black');
-        $vizBackground.css('background-color', 'transparent');
-        await reportingService.startVis2Png(moduleID, agent?.id || false)
-        $vizBackground.css('background-color', defaultVizBackground);
-        $labels.css('color', defaultTextColor);
-      } catch (e) {
-        $labels.css('color', defaultTextColor);
-        $vizBackground.css('background-color', defaultVizBackground);
+        try {
+          $labels.css('color', 'black');
+          $vizBackground.css('background-color', 'transparent');
+          await reportingService.startVis2Png(moduleID, agent?.id || false);
+          $vizBackground.css('background-color', defaultVizBackground);
+          $labels.css('color', defaultTextColor);
+        } catch (e) {
+          $labels.css('color', defaultTextColor);
+          $vizBackground.css('background-color', defaultVizBackground);
+        }
+      } else {
+        await reportingService.startVis2Png(moduleID, agent?.id || false);
       }
-    } else {
-      await reportingService.startVis2Png(moduleID, agent?.id || false)
-    }
-  }, [agent]);
-
-  return (
-    <WzButton
-      buttonType='empty'
-      iconType='document'
-      isLoading={action.running}
-      onClick={action.run}
-      isDisabled={disabledReport}
-      tooltip={disabledReport ? {position: 'top', content: 'No results match for this search criteria.'} : undefined}
-    >
-      Generate report
-    </WzButton>
-  )
-}
+    }, [agent]);
 
+    return (
+      <WzButton
+        buttonType='empty'
+        iconType='document'
+        isLoading={action.running}
+        onClick={action.run}
+        isDisabled={disabledReport}
+        tooltip={
+          disabledReport && totalResults === 0
+            ? {
+                position: 'top',
+                content: 'No results match for this search criteria.',
+              }
+            : undefined
+        }
+      >
+        Generate report
+      </WzButton>
+    );
+  },
+);

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

@@ -30,6 +30,14 @@ import { getAngularModule, getCore } from '../../../kibana-services';
 import { compose } from 'redux';
 import { withGlobalBreadcrumb } from '../hocs';
 import { endpointSummary } from '../../../utils/applications';
+import {
+  AlertsDataSource,
+  AlertsDataSourceRepository,
+  PatternDataSource,
+  tParsedIndexPattern,
+  useDataSource,
+} from '../data-source';
+import { useAsyncAction } from '../hooks';
 
 export class MainModuleAgent extends Component {
   props!: {
@@ -61,43 +69,6 @@ export class MainModuleAgent extends Component {
     this.router = $injector.get('$route');
   }
 
-  async startReport() {
-    this.setState({ loadingReport: true });
-    const syscollectorFilters: any[] = [];
-    const agent =
-      (
-        this.props.agent ||
-        store.getState().appStateReducers.currentAgentData ||
-        {}
-      ).id || false;
-    if (this.props.section === 'syscollector' && agent) {
-      syscollectorFilters.push(this.filterHandler.managerQuery(agent, true));
-      syscollectorFilters.push(this.filterHandler.agentQuery(agent));
-    }
-    await this.reportingService.startVis2Png(
-      this.props.section,
-      agent,
-      syscollectorFilters.length ? syscollectorFilters : null,
-    );
-    this.setState({ loadingReport: false });
-  }
-
-  renderReportButton() {
-    return (
-      this.props.section === 'syscollector' && (
-        <EuiFlexItem grow={false} style={{ marginRight: 4, marginTop: 6 }}>
-          <EuiButtonEmpty
-            iconType='document'
-            isLoading={this.state.loadingReport}
-            onClick={async () => this.startReport()}
-          >
-            Generate report
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      )
-    );
-  }
-
   renderTitle() {
     return (
       <EuiFlexGroup>
@@ -123,7 +94,14 @@ export class MainModuleAgent extends Component {
               </span>
             </EuiFlexItem>
             <EuiFlexItem />
-            {this.renderReportButton()}
+            {this.props.section === 'syscollector' && (
+              <EuiFlexItem
+                grow={false}
+                style={{ marginRight: 4, marginTop: 6 }}
+              >
+                <GenerateSyscollectorReportButton agent={this.props.agent} />
+              </EuiFlexItem>
+            )}
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -253,3 +231,41 @@ export default compose(
     }
   }),
 )(MainModuleAgent);
+
+const GenerateSyscollectorReportButton = ({ agent }) => {
+  const {
+    dataSource,
+    fetchFilters,
+    isLoading: isDataSourceLoading,
+  } = useDataSource<tParsedIndexPattern, PatternDataSource>({
+    repository: new AlertsDataSourceRepository(), // this makes only works with alerts index pattern
+    DataSource: AlertsDataSource,
+  });
+
+  const action = useAsyncAction(async () => {
+    const reportingService = new ReportingService();
+    const agentID =
+      (agent || store.getState().appStateReducers.currentAgentData || {}).id ||
+      false;
+    await reportingService.startVis2Png('syscollector', agentID, {
+      indexPattern: dataSource.indexPattern,
+      query: { query: '', language: 'kuery' },
+      filters: fetchFilters,
+      time: {
+        from: 'now-1d/d',
+        to: 'now',
+      },
+    });
+  }, [dataSource]);
+
+  return (
+    <EuiButtonEmpty
+      iconType='document'
+      isLoading={action.running}
+      isDisabled={isDataSourceLoading}
+      onClick={action.run}
+    >
+      Generate report
+    </EuiButtonEmpty>
+  );
+};

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

@@ -156,7 +156,7 @@ export const ModulesDefaults = {
         id: 'dashboard',
         name: 'Dashboard',
         component: DashboardGoogleCloud,
-        buttons: [ButtonModuleExploreAgent],
+        buttons: [ButtonModuleExploreAgent, ButtonModuleGenerateReport],
       },
       renderDiscoverTab({
         tableColumns: googleCloudColumns,

plugins/main/public/components/common/search-bar/search-bar-service.ts

@@ -34,7 +34,7 @@ function parseQueryString() {
 /**
  * Get the forceNow query parameter
  */
-function getForceNow() {
+export function getForceNow() {
   const forceNow = parseQueryString().forceNow as string;
   if (!forceNow) {
     return;
@@ -90,7 +90,7 @@ export const search = async (
             gte: dateMath.parse(from).toISOString(),
             /* roundUp: true is used to transform the osd dateform to a generic date format
               For instance: the "This week" date range in the date picker.
-              To: now/w 
+              To: now/w
               From: now/w
               Without the roundUp the to and from date will be the same and the search will return no results or error
 

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

@@ -24,6 +24,7 @@ import {
 } from '../../../common/data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 
 const plugins = getPlugins();
 
@@ -54,6 +55,18 @@ const DashboardAWSComponents: React.FC = ({}) => {
 
   const { query, dateRangeFrom, dateRangeTo } = searchBarProps;
 
+  useReportingCommunicateSearchContext({
+    isSearching: isDataSourceLoading,
+    totalResults: results?.hits?.total ?? 0,
+    indexPattern: dataSource?.indexPattern,
+    filters: fetchFilters,
+    query: query,
+    time: {
+      from: dateRangeFrom,
+      to: dateRangeTo,
+    },
+  });
+
   useEffect(() => {
     if (isDataSourceLoading) {
       return;

plugins/main/public/components/overview/docker/dashboards/dashboard.tsx

@@ -24,6 +24,7 @@ import {
 } from '../../../common/data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 
 const plugins = getPlugins();
 
@@ -54,6 +55,18 @@ const DashboardDockerComponent: React.FC = ({}) => {
 
   const { query, dateRangeFrom, dateRangeTo } = searchBarProps;
 
+  useReportingCommunicateSearchContext({
+    isSearching: isDataSourceLoading,
+    totalResults: results?.hits?.total ?? 0,
+    indexPattern: dataSource?.indexPattern,
+    filters: fetchFilters,
+    query: query,
+    time: {
+      from: dateRangeFrom,
+      to: dateRangeTo,
+    },
+  });
+
   useEffect(() => {
     if (isDataSourceLoading) {
       return;

plugins/main/public/components/overview/fim/dashboard/dashboard.tsx

@@ -24,6 +24,7 @@ import {
 } from '../../../common/data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 
 const plugins = getPlugins();
 
@@ -54,6 +55,18 @@ const DashboardFIMComponent: React.FC = ({}) => {
 
   const { query, dateRangeFrom, dateRangeTo } = searchBarProps;
 
+  useReportingCommunicateSearchContext({
+    isSearching: isDataSourceLoading,
+    totalResults: results?.hits?.total ?? 0,
+    indexPattern: dataSource?.indexPattern,
+    filters: fetchFilters,
+    query: query,
+    time: {
+      from: dateRangeFrom,
+      to: dateRangeTo,
+    },
+  });
+
   useEffect(() => {
     if (isDataSourceLoading) {
       return;

plugins/main/public/components/overview/google-cloud/dashboards/dashboard.tsx

@@ -23,6 +23,7 @@ import {
 import { AlertsGoogleCloudDataSource } from '../../../common/data-source/pattern/alerts/alerts-google-cloud/alerts-google-cloud-data-source';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
+import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 
 const plugins = getPlugins();
 
@@ -53,6 +54,18 @@ const DashboardGoogleCloudComponent: React.FC = () => {
 
   const { query, dateRangeFrom, dateRangeTo } = searchBarProps;
 
+  useReportingCommunicateSearchContext({
+    isSearching: isDataSourceLoading,
+    totalResults: results?.hits?.total ?? 0,
+    indexPattern: dataSource?.indexPattern,
+    filters: fetchFilters,
+    query: query,
+    time: {
+      from: dateRangeFrom,
+      to: dateRangeTo,
+    },
+  });
+
   useEffect(() => {
     if (isDataSourceLoading) {
       return;
@@ -101,8 +114,8 @@ const DashboardGoogleCloudComponent: React.FC = () => {
             <DiscoverNoResults />
           ) : null}
           {dataSource && results?.hits?.total > 0 ? (
-          <>
-            <SampleDataWarning />
+            <>
+              <SampleDataWarning />
               <div className='google-cloud-dashboard-responsive'>
                 <DashboardByRenderer
                   input={{