feat(TSC): replace the dashboard on TSC application

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

@@ -43,6 +43,7 @@ import { virustotalColumns } from '../../overview/virustotal/events/virustotal-c
 import { malwareDetectionColumns } from '../../overview/malware-detection/events/malware-detection-columns';
 import { WAZUH_VULNERABILITIES_PATTERN } from '../../../../common/constants';
 import { withVulnerabilitiesStateDataSource } from '../../overview/vulnerabilities/common/hocs/validate-vulnerabilities-states-index-pattern';
+import { DashboardTSC } from '../../overview/tsc/dashboards/dashboard';
 
 const DashboardTab = {
   id: 'dashboard',
@@ -290,7 +291,21 @@ export const ModulesDefaults = {
   },
   tsc: {
     init: 'dashboard',
-    tabs: RegulatoryComplianceTabs(tscColumns),
+    tabs: [
+      {
+        id: 'dashboard',
+        name: 'Dashboard',
+        buttons: [ButtonModuleExploreAgent, ButtonModuleGenerateReport],
+        component: DashboardTSC || withPinnedAgent(DashboardTSC), // TODO: use withPinnedAgent
+      },
+      {
+        id: 'inventory',
+        name: 'Controls',
+        buttons: [ButtonModuleExploreAgent],
+        component: ComplianceTable,
+      },
+      renderDiscoverTab(DEFAULT_INDEX_PATTERN, tscColumns),
+    ],
     availableFor: ['manager', 'agent'],
   },
   syscollector: {

plugins/main/public/components/overview/tsc/common/components/loading_spinner.scss

@@ -0,0 +1,4 @@
+.discoverNoResults {
+  display: flex;
+  align-items: center;
+}

plugins/main/public/components/overview/tsc/common/components/loading_spinner.tsx

@@ -0,0 +1,21 @@
+import './loading_spinner.scss';
+import React from 'react';
+import { EuiTitle, EuiPanel, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+
+export function LoadingSpinner() {
+  return (
+    <EuiPanel hasBorder={false} hasShadow={false} color="transparent" className="discoverNoResults">
+      <EuiEmptyPrompt
+        icon={<EuiLoadingSpinner data-test-subj="loadingSpinner" size="xl" />}
+        title={
+          <EuiTitle size="s" data-test-subj="loadingSpinnerText">
+            <h2>
+              <FormattedMessage id="discover.searchingTitle" defaultMessage="Searching" />
+            </h2>
+          </EuiTitle>
+        }
+      />
+    </EuiPanel>
+  );
+}

plugins/main/public/components/overview/tsc/common/components/no_results.tsx

@@ -0,0 +1,60 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+
+import { EuiCallOut, EuiPanel } from '@elastic/eui';
+
+interface Props {
+  message?: string;
+}
+
+export const DiscoverNoResults = ({ message }: Props) => {
+  return (
+    <I18nProvider>
+      <EuiPanel hasBorder={false} hasShadow={false} color='transparent'>
+        <EuiCallOut
+          title={
+            message ?? (
+              <FormattedMessage
+                id='discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle'
+                defaultMessage='No results match your search criteria'
+              />
+            )
+          }
+          color='warning'
+          iconType='help'
+          data-test-subj='discoverNoResults'
+        />
+      </EuiPanel>
+    </I18nProvider>
+  );
+};

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

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+import { SearchResponse } from '../../../../../../../src/core/server';
+import { getPlugins } from '../../../../kibana-services';
+import { ViewMode } from '../../../../../../../src/plugins/embeddable/public';
+import { getDashboardPanels } from './dashboard_panels';
+import { I18nProvider } from '@osd/i18n/react';
+import useSearchBar from '../../../common/search-bar/use-search-bar';
+import './styles.scss';
+import { withErrorBoundary } from '../../../common/hocs';
+import { DiscoverNoResults } from '../common/components/no_results';
+import { LoadingSpinner } from '../common/components/loading_spinner';
+import { search } from '../../../common/search-bar/search-bar-service';
+import { IndexPattern } from '../../../../../../../src/plugins/data/common';
+import {
+  ErrorFactory,
+  ErrorHandler,
+  HttpError,
+} from '../../../../react-services/error-management';
+import { compose } from 'redux';
+import { DashboardContainerInput } from '../../../../../../../src/plugins/dashboard/public';
+import { SampleDataWarning } from '../../../visualize/components';
+
+const plugins = getPlugins();
+
+const SearchBar = getPlugins().data.ui.SearchBar;
+
+const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
+
+/* The vulnerabilities dashboard is made up of 3 dashboards because the filters need
+a wrapper for visual adjustments, while the Kpi, the Open vs Close visualization and
+the rest of the visualizations have different configurations at the dashboard level. */
+
+const DashboardTSCComponent: React.FC = ({ pinnedAgent }) => {
+  const ALERTS_INDEX_PATTERN_ID = 'wazuh-alerts-*'; // TODO: use the data source
+  const { searchBarProps } = useSearchBar({
+    defaultIndexPatternID: ALERTS_INDEX_PATTERN_ID,
+    onMount: () => {}, // TODO: use data source
+    onUpdate: () => {}, // TODO: use data source
+    onUnMount: () => {}, // TODO: use data source
+  });
+
+  /* This function is responsible for updating the storage filters so that the
+  filters between dashboard and inventory added using visualizations call to actions.
+  Without this feature, filters added using visualizations call to actions are
+  not maintained between dashboard and inventory tabs */
+  const handleFilterByVisualization = (newInput: DashboardContainerInput) => {
+    return; // TODO: adapt to the data source
+    updateFiltersStorage(newInput.filters);
+  };
+
+  // TODO: add the hidden filters: allowed agents and hideManagerAlerts
+  const fetchFilters = searchBarProps.filters;
+
+  const { isLoading, query, indexPatterns } = searchBarProps;
+
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const [results, setResults] = useState<SearchResponse>({} as SearchResponse);
+
+  useEffect(() => {
+    if (!isLoading) {
+      search({
+        indexPattern: indexPatterns?.[0] as IndexPattern,
+        filters: fetchFilters,
+        query,
+      })
+        .then(results => {
+          setResults(results);
+          setIsSearching(false);
+        })
+        .catch(error => {
+          const searchError = ErrorFactory.create(HttpError, {
+            error,
+            message: 'Error fetching vulnerabilities',
+          });
+          ErrorHandler.handleError(searchError);
+          setIsSearching(false);
+        });
+    }
+  }, [JSON.stringify(searchBarProps), JSON.stringify(fetchFilters)]);
+
+  return (
+    <>
+      <I18nProvider>
+        <>
+          {isLoading ? <LoadingSpinner /> : null}
+          {!isLoading ? (
+            <SearchBar
+              appName='pci-dss-searchbar'
+              {...searchBarProps}
+              showDatePicker={false}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
+          ) : null}
+          <SampleDataWarning />
+          {isSearching ? <LoadingSpinner /> : null}
+          {!isLoading && !isSearching && results?.hits?.total === 0 ? (
+            <DiscoverNoResults />
+          ) : null}
+          {!isLoading && !isSearching && results?.hits?.total > 0 ? (
+            <div className='pci-dss-dashboard-responsive'>
+              <DashboardByRenderer
+                input={{
+                  viewMode: ViewMode.VIEW,
+                  panels: getDashboardPanels(
+                    ALERTS_INDEX_PATTERN_ID,
+                    !!pinnedAgent,
+                  ),
+                  isFullScreenMode: false,
+                  filters: fetchFilters ?? [],
+                  useMargins: true,
+                  id: 'vulnerability-detector-dashboard-tab',
+                  timeRange: {
+                    from: searchBarProps.dateRangeFrom,
+                    to: searchBarProps.dateRangeTo,
+                  },
+                  title: 'Vulnerability detector dashboard',
+                  description: 'Dashboard of the Vulnerability detector',
+                  query: searchBarProps.query,
+                  refreshConfig: {
+                    pause: false,
+                    value: 15,
+                  },
+                  hidePanelTitles: false,
+                }}
+                onInputUpdated={handleFilterByVisualization}
+              />
+            </div>
+          ) : null}
+        </>
+      </I18nProvider>
+    </>
+  );
+};
+
+export const DashboardTSC = compose(withErrorBoundary)(DashboardTSCComponent);