[Security Solution]: Incorrect color code is displaying on Alert treemap for medium risk score.

[ghost]

Describe the bug:
Incorrect color code is displaying on Alert treemap for medium risk score.

Build Details:

VERSION : 8.4.0 BC5
BUILD: 55374
COMMIT: f12954223a8ad66bbbf77becc4f0557ffd1c92c3

Preconditions

1. Kibana should be running.
2. Multiple alerts should be available.

Steps to Reproduce

1. Navigate to Timelines tab.
2. Now, bulk select the timelines.
3. Now, click on refresh button.
4. Observe that selected timelines are not refreshing while user refresh the timeline table.

Actual Result
Incorrect color code is displaying on Alert treemap for medium risk score.

Expected Result
Correct color code should display on Alert treemap for medium risk score.

What's Working:
Yellow color code should be available for risk score between (22 - 47)

Correct color code for each alerts is mentioned on the below doc:
https://security-docs_2280.docs-preview.app.elstc.co/guide/en/security/master/visualize-alerts.html

Screenshot:

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[andrew-goldstein]

Thanks for creating this issue @samratbhadra-qasource!

The component is currently working as-designed; the color breakpoints used by the treemap align with the values in the Rule Configuration page, per in the animated gif below:

The selection in the animated gif above defaults to Low. The next color change breakpoints happen at:

• Medium / Yellow 47
• High / Orange 73
• Critical / Red 99

as shown in the following (composite) screenshot:

To verify the treemap is currently aligned with the breakpoints above, a response containing one alert for each risk score in the range of 0 through 99 was simulated with the following code:

Click me - Simulated response to reproduce 139195

  const getBucket = (riskScore: number) => ({
    key: `Bucket ${riskScore}`,
    doc_count: 1,
    maxRiskSubAggregation: {
      value: riskScore,
    },
    stackByField1: {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'example-host',
          doc_count: 1,
        },
      ],
    },
  });

  const alertsData: AlertSearchResponse<unknown, AlertsTreeMapAggregation> = {
    took: 1,
    timeout: false,
    _shards: {
      total: 1,
      successful: 1,
      skipped: 0,
      failed: 0,
    },
    hits: {
      total: {
        value: 100,
        relation: 'eq',
      },
      max_score: null,
      hits: [],
    },
    aggregations: {
      stackByField0: {
        buckets: [...Array(100).keys()].map(getBucket),
      },
    },
  };

Given the simulated response above, the treemap displays the expected color at each of the breakpoints, per the screenshot below:

Above: With mock data, the treemap displays the expected colors at the current breakpoints

Why are the treemap color breakpoints aligned with the rule configuration page?

The treemap color breakpoints are aligned with the rule configuration page to ensure that, by default, the color of the alert in the treemap matches the color selection in the rule configuration page.

Next steps: please consider opening a documentation issue

@samratbhadra-qasource we will close this issue because the code is working as intended, but please consider opening a documentation issue, because the correct color mappings are:

• Green: (0 - 46)
• Yellow: (47 - 72)
• Orange: (73 - 98)
• Red: (99+)

Thank you!

[ghost]

Hi @andrew-goldstein

Thanks for confirming the behavior.
We have opened a documentation issue at #2341

Thanks!