[SIEM] Histogram Consistency & Loading Updates

[MichaelMarcialis]

With the upcoming release of the redesigned overview page, I've noticed some consistency issues between histograms and had some concerns with the existing loading states for each. This ticket is meant to capture these issues in the hopes of correcting them before the 7.6 release.

CCing @andrew-goldstein and @angorayc, as these requested changes could have implications on the overview page redesign.

• Histogram bar interval (bar counts and widths) consistency
  Depending on the time range and data being shown, each histogram can potentially present the user with different bar intervals (bar counts and widths) than other histograms on the page. These bar intervals may also change when the user changes the stack dimension for the data. Apparently, these bar intervals are being set dynamically depending on the data being shown. I believe this is at the detriment to the user when we are presenting more than one histogram on a page at a time (such as the new overview page). In these situations, it makes more sense to present the user with the same bar intervals between charts, so it is easier to read and understand. Can we make the bar intervals a consistent 32 bars across the board for now and revisit if users take issue with this in the future?

  • @spong: Resolved as part of [SIEM] [Detection Engine] Fixes histogram intervals  #55969. Note: depending on the timerange the user selects, an extra interval may be created to deal with any remainder so we don't exclude any data. That said, the intervals will remain consistent across all histograms, so the ability to compare one with another will remain intact. Also of note, I recently discovered that there's actually some histogram settings in Kibana Advanced Settings that we can make use of, so we may want to explore using those.

• Histogram x-axis tick placement consistency
  It appears that the signals histograms correctly shows the x-axis tick marks in between the bars (showing the beginning and ending of histogram interval bar's range). However, all other SIEM histograms show the ticks on the bars, which I believe is indicative of a traditional bar chart, not a histogram.

 Are we able to have the histogram ticks placement be consistent between histograms and also position them to always appear in between the bars?

• Improve loading states
  All SIEM histograms appear to use the EuiLoadingContent component for their loading state. This is odd, as these histograms are not text-only content. Can we swap this out for something better, until I'm able to craft a loading patterns guide for consistent loading states across the SIEM app? I'm thinking something like:


  • Spinner on initial page load


    Show nothing but panel title and a vertically/horizontally centered EuiLoadingSpinner on intial load.

  • Progress bar on panel for data refreshes
    It's unnecessary to obscure content during a data refresh. In this case, rather than using a loading overlay as we have in the past, I think it would make more sense to use the EuiProgress component (absolutely positioned on the top of the panel), as shown in the EUI docs.

• Correct color usage
  @MikePaquette correctly noted that some of the color usage for our histogram is incorrect and particularly noticeable in dark mode. This includes the colors being used for column hover, axes, ticks, labels and possibly others. I believe the fix is simply to use the Elastic Charts theme provided by EUI (https://elastic.github.io/eui/#/elastic-charts/creating-charts). Can we apply this theme and see if this corrects our color issues?

Example of inconsistent bar intervals and ticks:

Example of incorrect color usage:

[elasticmachine]

Pinging @elastic/siem (Team:SIEM)

[spong]

@MichaelMarcialis -- @patrykkopycinski and I were able to address all of the above except Histogram x-axis tick placement consistency as part of 7.6.

Having spent some more time with the histograms it looks like we've got a bit of flexibility around tick placement, so that's good news. 🙂

Do you want to keep this open for tracking this remaining task, or should be move it to #55753 and close this issue?

[MichaelMarcialis]

@MichaelMarcialis -- @patrykkopycinski and I were able to address all of the above except Histogram x-axis tick placement consistency as part of 7.6.

Having spent some more time with the histograms it looks like we've got a bit of flexibility around tick placement, so that's good news. 🙂

Do you want to keep this open for tracking this remaining task, or should be move it to #55753 and close this issue?

I say let's either keep this ticket open or spin off as a separate issue. I'd like to keep it out of #55753, as it is not strictly a detection issue. Whichever you and @patrykkopycinski prefer.

[spong]

Sounds good -- we can just keep this one open with updating the x-axis tick placement as the last remaining task. Thanks @MichaelMarcialis!