[Vulnerabilities dashboards] Add global vulnerabilities dashboards

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Support for Wazuh 4.8.0
 - Added remember server address check [#5791](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5791)
 - Added the ssl_agent_ca configuration to the SSL Settings form [#6083](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6083)
+- Added global vulnerabilities dashboards [#5896](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5896)
 
 ## Wazuh v4.7.1 - OpenSearch Dashboards 2.8.0 - Revision 00
 

plugins/main/opensearch_dashboards.json

@@ -8,6 +8,8 @@
   "requiredPlugins": [
     "navigation",
     "data",
+    "dashboard",
+    "embeddable",
     "discover",
     "inspector",
     "visualizations",

plugins/main/public/components/common/hooks/use-filter-manager.ts

@@ -11,23 +11,36 @@
  */
 import { getDataPlugin } from '../../../kibana-services';
 import { useState, useEffect, useMemo } from 'react';
-import { Filter } from 'src/plugins/data/public';
+import { Filter } from '../../../../../../src/plugins/data/public';
 import _ from 'lodash';
+import { FilterManager } from '../../../../../../src/plugins/data/public';
+import { Subscription } from 'rxjs';
 
-export const useFilterManager = () => {
-  const filterManager = useMemo(() => getDataPlugin().query.filterManager, []);
+type tUseFilterManagerReturn = {
+  filterManager: FilterManager;
+  filters: Filter[];
+};
+
+export const useFilterManager = (): tUseFilterManagerReturn => {
+  const filterManager = getDataPlugin().query.filterManager;
   const [filters, setFilters] = useState<Filter[]>(filterManager.getFilters());
 
   useEffect(() => {
-    const subscription = filterManager.getUpdates$().subscribe(() => {
-      const newFilters = filterManager.getFilters();
-      if (!_.isEqual(filters, newFilters)) {
-        setFilters(newFilters);
-      }
-    });
+    const subscriptions = new Subscription();
+
+    subscriptions.add(
+      filterManager.getUpdates$().subscribe({
+        next: () => {
+          const newFilters = filterManager.getFilters();
+          setFilters(newFilters);
+        },
+      })
+    );
+
     return () => {
-      subscription.unsubscribe();
+      subscriptions.unsubscribe();
     };
-  }, []);
+  }, [filterManager]);
+
   return { filterManager, filters };
 };

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

@@ -21,7 +21,8 @@ import ButtonModuleExploreAgent from '../../../controllers/overview/components/o
 import { ButtonModuleGenerateReport } from '../modules/buttons';
 import { OfficePanel } from '../../overview/office-panel';
 import { GitHubPanel } from '../../overview/github-panel';
-import { withModuleNotForAgent } from '../hocs';
+import { DashboardVuls, InventoryVuls } from '../../overview/vulnerabilities'
+import { withModuleNotForAgent, withModuleTabLoader } from '../hocs';
 
 const DashboardTab = {
   id: 'dashboard',
@@ -130,18 +131,22 @@ export const ModulesDefaults = {
     availableFor: ['manager', 'agent'],
   },
   vuls: {
-    init: 'inventory',
+    init: 'dashboard',
     tabs: [
+      {
+        id: 'dashboard',
+        name: 'Dashboard',
+        component: withModuleNotForAgent(DashboardVuls),
+      },
       {
         id: 'inventory',
         name: 'Inventory',
-        buttons: [ButtonModuleExploreAgent],
-        component: MainVuls,
+        component: withModuleNotForAgent(InventoryVuls),
       },
       EventsTab,
     ],
     buttons: ['settings'],
-    availableFor: ['manager', 'agent'],
+    availableFor: ['manager'],
   },
   mitre: {
     init: 'dashboard',

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

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

plugins/main/public/components/overview/vulnerabilities/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/vulnerabilities/common/components/no_results.tsx

@@ -0,0 +1,198 @@
+/*
+ * 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, { Fragment } from 'react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+
+import {
+  EuiCallOut,
+  EuiCode,
+  EuiDescriptionList,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+interface Props {
+  timeFieldName?: string;
+  queryLanguage?: string;
+}
+
+export const DiscoverNoResults = ({ timeFieldName, queryLanguage }: Props) => {
+  let timeFieldMessage;
+
+  if (timeFieldName) {
+    timeFieldMessage = (
+      <Fragment>
+        <EuiSpacer size="xl" />
+
+        <EuiText>
+          <h2 data-test-subj="discoverNoResultsTimefilter">
+            <FormattedMessage
+              id="discover.noResults.expandYourTimeRangeTitle"
+              defaultMessage="Expand your time range"
+            />
+          </h2>
+
+          <p>
+            <FormattedMessage
+              id="discover.noResults.queryMayNotMatchTitle"
+              defaultMessage="One or more of the indices you&rsquo;re looking at contains a date field. Your query may
+                  not match anything in the current time range, or there may not be any data at all in
+                  the currently selected time range. You can try changing the time range to one which contains data."
+            />
+          </p>
+        </EuiText>
+      </Fragment>
+    );
+  }
+
+  let luceneQueryMessage;
+
+  if (queryLanguage === 'lucene') {
+    const searchExamples = [
+      {
+        description: <EuiCode>200</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.anyField200StatusCodeExampleTitle"
+                defaultMessage="Find requests that contain the number 200, in any field"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+      {
+        description: <EuiCode>status:200</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.statusField200StatusCodeExampleTitle"
+                defaultMessage="Find 200 in the status field"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+      {
+        description: <EuiCode>status:[400 TO 499]</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.400to499StatusCodeExampleTitle"
+                defaultMessage="Find all status codes between 400-499"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+      {
+        description: <EuiCode>status:[400 TO 499] AND extension:PHP</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.400to499StatusCodeWithPhpExtensionExampleTitle"
+                defaultMessage="Find status codes 400-499 with the extension php"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+      {
+        description: <EuiCode>status:[400 TO 499] AND (extension:php OR extension:html)</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.400to499StatusCodeWithPhpOrHtmlExtensionExampleTitle"
+                defaultMessage="Find status codes 400-499 with the extension php or html"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+    ];
+
+    luceneQueryMessage = (
+      <Fragment>
+        <EuiSpacer size="xl" />
+
+        <EuiText>
+          <h3>
+            <FormattedMessage
+              id="discover.noResults.searchExamples.refineYourQueryTitle"
+              defaultMessage="Refine your query"
+            />
+          </h3>
+
+          <p>
+            <FormattedMessage
+              id="discover.noResults.searchExamples.howTosearchForWebServerLogsDescription"
+              defaultMessage="The search bar at the top uses OpenSearch&rsquo;s support for Lucene {queryStringSyntaxLink}.
+                Here are some examples of how you can search for web server logs that have been parsed into a few fields."
+            />
+          </p>
+        </EuiText>
+
+        <EuiSpacer size="m" />
+
+        <EuiDescriptionList type="column" listItems={searchExamples} />
+
+        <EuiSpacer size="xl" />
+      </Fragment>
+    );
+  }
+
+  return (
+    <I18nProvider>
+      <EuiPanel hasBorder={false} hasShadow={false} color="transparent">
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
+              defaultMessage="No results match your search criteria"
+            />
+          }
+          color="warning"
+          iconType="help"
+          data-test-subj="discoverNoResults"
+        />
+        {timeFieldMessage}
+        {luceneQueryMessage}
+      </EuiPanel>
+    </I18nProvider>
+  );
+};

plugins/main/public/components/overview/vulnerabilities/common/constants.ts

@@ -0,0 +1 @@
+export const VULNERABILITIES_INDEX_PATTERN_ID = 'wazuh-states-vulnerabilities';

plugins/main/public/components/overview/vulnerabilities/dashboards/index.ts

@@ -0,0 +1,2 @@
+export * from './overview';
+export * from './inventory';

plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/config/index.ts

@@ -0,0 +1,28 @@
+import { EuiDataGridColumn } from "@elastic/eui";
+
+export const inventoryTableDefaultColumns: EuiDataGridColumn[] = [
+    {
+      id: 'package.name',
+    },
+    {
+      id: 'package.version',
+    },
+    {
+      id: 'package.architecture',
+    },
+    {
+      id: 'vulnerability.severity',
+    },
+    {
+      id: 'vulnerability.id',
+    },
+    {
+      id: 'vulnerability.score.version',
+    },
+    {
+      id: 'vulnerability.score.base',
+    },
+    {
+      id: 'event.created',
+    }
+  ]

plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/index.tsx

@@ -0,0 +1 @@
+export * from './inventory';

plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.scss

@@ -0,0 +1,14 @@
+.vulsInventoryContainer {
+    height: calc(100vh - 104px);
+}
+
+
+.headerIsExpanded .vulsInventoryContainer {
+    height: calc(100vh - 153px);
+}
+
+.vulsInventoryContainer .euiDataGrid--fullScreen {
+    height: calc(100vh - 49px);
+    bottom: 0;
+    top: auto;
+}