Update dashboards

[gdiazlo]

Description

Following the release of our integrations' documentation, we want to incorporate the new dashboards into our main application.

Functional requirements

• Users must be able to visualize and interact with the new dashboards
• Users must be able to interact with the search bar and get dashboard contents updated
• Users must be able to interact with the time selector of a visualization and all visualization of the dashboard must update with the new selection
• Users without the appropriate roles should not be able to view a dashboard

Non-functional requirements

• All dashboards must update to changes of the search bar
• All dashboards must have matching colors for the same information
• All dashboards must have limited the amount of information they can display, so there is no overflow of legends or lines
• All titles and texts must use the i18n framework if possible
• All queries must take into account the size of the information they are going to display, to limit the max amount of information when it makes sense, in order to preserve the responsiveness of the dashboard
• All queries must be documented in the dashboard implementation guide

Implementation restrictions

• Update the dashboards' implementation guide
• Use built-in styles and components
• We must clean the current design, introducing the appropriate guards and tests to ensure the correct rendering even if the available data is not correct

Plan

• Create dashboards definitions
  • [Update dashboards] Update security events dashboard #5838
  • [Update dashboards] Create malware detection dashboard #5898
  • [Update dashboards] Create Log data analysis dashboard #5909
  • [Update dashboards] Update integrity monitoring dashboard #5911
  • [Update dashboards] Global vulnerabilities dashboards #5763
    https://documentation.wazuh.com/4.3/_images/screenshot-05-Wazuh-Vulnerability-Detection1.png
  • [Update dashboards] Update security configuration assessment dashboard #5930
  • [Update dashboards] Create incident response dashboard #5933
  • [Update dashboards] Update regulatory compliance dashboard #5938
  • [Update dashboards] Update cloud security dashboard #5940
  • [Update dashboards] Update containers security dashboard #5941
• Update dashboards implementation with the new definitions
• Change the display order of tabs in all modules #6066
• Remove new dashboards of integrity monitoring, security events and Amazon AWS #6071
• Add graph to docker dashboard #6074
• Remove new dashboard of PCI DSS #6079
• After implementing the dashboard log data analysis in our plugin, we will have to develop a flyout when clicking on the data in the table.
• After implementing the dashboard integrity monitoring in our plugin, we will have to develop a flyout when clicking on the data in the table.
• Add the necessary changes to make easier the dashboard customization
• Add all the related visualizations to the dashboard (to see and decide which visualizations will be added to the definitive dashboard)
• Create a update dashboard guide to use in the next dashboards updates

[Machi3mfl]

Research

• Research about implementation cost on dashboard upgrade

Current dashboard implementations

components involved in rendering visualizations in dashboards:

• WzVisualize (public/components/visualize/wz-visualize.js)
• KibanaVis (public/kibana-integrations/kibana-vis.js)

All these components are custom react components

sequenceDiagram

(some) Dashboard->>WzVisualize: use wz-visualize to render the visualizations
WzVisualize-->>KibanaVis: load the visualizations for the current dashboard
loop 
    KibanaVis->>KibanaVis: WzVisualize uses the KibanaVis depending on the number of vis defined for the dashboard
end
Note right of KibanaVis: The KibanaVis component receives the vis ID to get the vis definition

Loading

The dashboard configurations are defined in (public/components/visualize/visualizations.js)

For instance:

export const visualizations = {
  general: {
    rows: [
      {
        height: 360,
        vis: [
          {
            title: 'Alerts evolution - Top 5 agents',
            id: 'Wazuh-App-Overview-General-Alerts-evolution-Top-5-agents',
            width: 70
          },
          {
            title: 'Top MITRE ATT&CKS',
            id: 'Wazuh-App-Overview-General-Alerts-Top-Mitre',
            width: 40
          }
        ]
      }
    ]
  },
]

The visualizations are definitions are the server-side: /server/integration-files/visualizations

For instance (The security events dashboard - without agent pinned):

export default [
  {
    _id: 'Wazuh-App-Overview-General-Agents-status',
    _source: {
      title: 'Agents status',
      visState: JSON.stringify({
        title: 'Agents Status',
        type: 'histogram',
        params: {
          type: 'histogram',
          grid: { categoryLines: false, style: { color: '#eee' } },
          categoryAxes: [
            {
              id: 'CategoryAxis-1',
              type: 'category',
              position: 'bottom',
              show: true,
              style: {},
              scale: { type: 'linear' },
              labels: { show: true, filter: true, truncate: 100 },
              title: {},
            },
          ],
          valueAxes: [
            {
              id: 'ValueAxis-1',
              name: 'LeftAxis-1',
              type: 'value',
              position: 'left',
              show: true,
              style: {},
              scale: { type: 'linear', mode: 'normal' },
              labels: { show: true, rotate: 0, filter: false, truncate: 100 },
              title: { text: 'Count' },
            },
          ],
          seriesParams: [
            {
              show: true,
              mode: 'normal',
              type: 'line',
              drawLinesBetweenPoints: true,
              showCircles: true,
              interpolate: 'cardinal',
              lineWidth: 3.5,
              data: { id: '4', label: 'Unique count of id' },
              valueAxis: 'ValueAxis-1',
            },
          ],
          addTooltip: true,
          addLegend: true,
          legendPosition: 'right',
          times: [],
          addTimeMarker: false,
        },
        aggs: [
          {
            id: '2',
            enabled: true,
            type: 'date_histogram',
            interval: '1ms',
            schema: 'segment',
            params: {
              field: 'timestamp',
              interval: '1ms',
              customInterval: '2h',
              min_doc_count: 1,
              extended_bounds: {},
            },
          },
          {
            id: '3',
            enabled: true,
            type: 'terms',
            schema: 'group',
            params: { field: 'status', size: 5, order: 'desc', orderBy: '_term' },
          },
          {
            id: '4',
            enabled: true,
            type: 'cardinality',
            schema: 'metric',
            params: { field: 'id' },
          },
        ],
      }),
      uiStateJSON: JSON.stringify({
        vis: { colors: { active: UI_COLOR_AGENT_STATUS.active, disconnected: UI_COLOR_AGENT_STATUS.disconnected, pending: UI_COLOR_AGENT_STATUS.pending, never_connected: UI_COLOR_AGENT_STATUS.never_connected } },
      }),
      description: '',
      version: 1,
      kibanaSavedObjectMeta: {
        searchSourceJSON: JSON.stringify({
          index: 'wazuh-monitoring',
          filter: [],
          query: { query: '', language: 'lucene' },
        }),
      },
    },
    _type: 'visualization',
  },

Related docs

• Dashboard
• Visualizations editor
• Import saved objects via API

[chantal-kelm]

Section in Wazuh Web	Name	ID	Section in monolith plugin	Changes	Design	New dashboard
Endpoint security	Security Configuration Assessment	security-configuration-assessment	Modules > Security Configuration Assessment	RENAME Configuration assessment	Design	New dashboard
Endpoint security	Policy monitoring	policy-monitoring	Modules > Policy monitoring	RENAME to Malware detection (this is rootcheck now)	Design	New dashboard
Endpoint security	Integrity monitoring	integrity-monitoring	Modules > Integrity monitoring	RENAME to File integrity monitoring	Design	New dashboard
Endpoint security	System auditing	system-auditing	Modules > System auditing	DELETE
Endpoint security	OpenSCAP	openscap	Modules > OpenSCAP	DELETE
Endpoint security	CIS-CAT	ciscat	Modules > CIS-CAT	DELETE
Threat intelligence	Security events	security-events	Modules > Security events	RENAME Threat hunting	Design	New dashboard
Threat intelligence	Vulnerabilities	vulnerabilities	Modules > Vulnerabilities	RENAME to Vulnerability detection		New dashboard
Threat intelligence	MITRE ATT&CK	mitre-attack	Modules > MITRE ATT&CK
Threat intelligence	Virustotal	virustotal	Modules > Virustotal
Security operations	PCI DSS	pci-dss	Modules > PCI DSS		Design	New dashboard
Security operations	GDPR	gdpr	Modules > GDPR
Security operations	HIPAA	hipaa	Modules > HIPAA
Security operations	NIST 800-53	nist-800-53	Modules > NIST 800-53
Security operations	TSC	tsc	Modules > TSC
Security operations	IT Hygiene	it-hygiene	Agents > {agent_id} -> Inventory
Security operations	Osquery	osquery	Modules > Osquery	DELETE
Cloud security	AWS	amazon-web-services	Modules > AWS		Design	New dashboard
Cloud security	Google Cloud	google-cloud	Modules > Google Cloud
Cloud security	GitHub	github	Modules > GitHub
Cloud security	Office365	office365	Modules > Office365
Cloud security	Docker listener	docker-listener	Modules > Docker listener	RENAME to Docker	Design	New dashboard

[chantal-kelm]

It has been decided to remove the new integrity monitoring, security events, Amazon AWS and PCI DSS dashboards for now, as we will continue to work on them in the future.
We have also decided to add the top 5 images graph to the new docker dashboard.