[Update dashboards] Update `security events` dashboard

[Machi3mfl]

Description

Update the current security events dashboard

Dashboard mock

The dashboard mock serves as a design prototype (the information shown is only an example)

Tasks

• [x] Update visualizations definitions

• [ ] Update colors to create a consistent color palette -> After some research, the following conclusion was reached

• [x] Document the differences between wazuh-kibana-app and integrations dashboard (information shown)

[chantal-kelm]

I did some research and found that Opensearch currently only offers the option to color static data. As we want to put colors to dynamic data I have come up with a solution that when implemented does not work on some types of graphs. We decided not to use the solution as it only works on area charts.

const numberOfDataPoints = 20;
const colors = [
  '#38d1ba',
  '#009ac3',
  '#8335c6',
  '#fc33c9',
  '#d10062',
];
const colorRepetitions = Math.ceil(numberOfDataPoints / colors.length);

export const repeatedColors = [];
for (let i = 0; i < colorRepetitions; i++) {
  repeatedColors.push(...colors);

uiStateJSON: JSON.stringify({
        vis: {
          colors: repeatedColors,
        },
      }),

I am currently investigating why the solution does not work on some chart types.

[chantal-kelm]

🟢 It is on the dashboard 🔴 It is not in the dashboard

Title	Current plugin dashboard	New dashboard
Total marker	🟢	🟢
Level 12 or above alerts marker	🟢	🟢
Authentication failure flag	🟢	🟢
Authentication success flag	🟢	🟢
Alert level evolution	🟢	🔴
Top MITRE ATT&CKS	🟢	🟢	It is the same visualisation that is in the current dashboard but unlike the current dashboard visualisation, this one shows the top 5. Also in the current plugin it is a donut type and in the new dashboard it is a foot type.
Top 5 agents	🟢	🔴
Alerts evolution - Top 5 agents	🟢	🟢
Security Alerts Table	🟢	🟢

Current plugin dashboard

New dashboard