Skip to content

Add traffic type selector to cluster traffic graph#26548

Open
aaronmgn wants to merge 1 commit into
masterfrom
issue-25916
Open

Add traffic type selector to cluster traffic graph#26548
aaronmgn wants to merge 1 commit into
masterfrom
issue-25916

Conversation

@aaronmgn

@aaronmgn aaronmgn commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Description

This started as a single Show selector on the cluster traffic graph and turned into a small rework of the graph's controls. What's in it:

  • Traffic type selector. A Show dropdown on the System Overview graph switches between the incoming (input_indexed) and outgoing (output) views. Each view plots its own series, so the two data types are never mixed. The dropdown only renders on the Open overview graph; the enterprise license graphs use the same component without the new handler and are unchanged.
  • Both controls now use the common Select. The Days control was a Bootstrap Input type="select"; it and the new Show control are now the react-select-based components/common/Select. react-select fires onChange even when you re-pick the value that's already selected, so both handlers return early on a no-op instead of pushing redundant state updates or telemetry.
  • Select gained compact and searchable props. compact sizes the control to its content and trims the gap between the value and the chevron, for short fixed-option selects that would otherwise stretch to fill their container. searchable maps to react-select's isSearchable and is off for these fixed lists. Both default to the old behavior, so existing Selects are untouched.
  • Zoom/Reset moved out of the plot into a real button. It used to be a Plotly updatemenus button drawn inside the chart. Now it's a normal Button backed by a new useTrafficGraphZoom hook. The hook owns the zoom state: it fits the y-axis to the data when a license limit dwarfs the traffic, tracks drag-zooms, and returns both to the initial view through Plotly's uirevision. The button is disabled when there's nothing to zoom or reset.
  • GenericPlot can now report a reset. Added an onZoomReset callback so the hook hears about Plotly's own double-click autorange reset, and swapped the hand-rolled Axis type on the relayout handler for Plotly's PlotRelayoutEvent.

Smaller pieces that came with it: a TRAFFIC_GRAPH_TYPE_CHANGED telemetry event, shared TrafficType label and section maps in Graph/types.ts, and a bit of top margin on the plot so the "Licensed traffic limit" annotation stops getting clipped.

Motivation and Context

Fixes #25916.

Since 7.1 the graph plots input_indexed, which pre-upgrade buckets don't have, so older history disappeared from the UI. The outgoing view brings it back. Incoming stays the default.

The control rework came out of doing that cleanly. The two dropdowns needed to sit side by side and stay visually consistent, which the Bootstrap select couldn't manage, and moving the zoom logic into a hook made it testable instead of a config blob buried in the Plotly layout.

How Has This Been Tested?

New and expanded unit tests cover the default view, switching traffic types, the day selector, the useTrafficGraphZoom state machine, the new Select props, and the GenericPlot reset path. yarn tsgo, yarn lint and yarn test pass. I also verified it by hand against a database holding buckets written by a real 7.0.9 instance: incoming shows only post-upgrade traffic, outgoing shows the full month.

Tested Graylog Open + Various license types.

Screenshots (if appropriate):

Daily usage license scenario:
2026-07-06 08 31 16

Daily raw:
2026-07-06 08 41 14

Open:
2026-07-06 08 21 11

Types of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have requested a documentation update.
  • I have read the CONTRIBUTING document.

@aaronmgn aaronmgn requested a review from patrickmann July 2, 2026 05:07
@aaronmgn aaronmgn self-assigned this Jul 2, 2026
@aaronmgn aaronmgn requested a review from AntonEbel July 2, 2026 08:18
@AntonEbel

Copy link
Copy Markdown
Contributor

I think mixing the two input types could cause confusion for the user. Perhaps a better option in Open would be to offer a selection of input types, as described here. But that's for @tellistone to decide.

@tellistone

Copy link
Copy Markdown

Yeah, I think having a button on the graph to select what it shows would be best. Using a different type of data like this, in some edge cases, might be misleading (which is not a good idea for something as heavily scrutinized as license usage).

@patrickmann patrickmann removed their request for review July 3, 2026 09:24
@aaronmgn aaronmgn changed the title Fall back to input traffic for buckets without input_indexed Add traffic type selector to cluster traffic graph Jul 3, 2026
@aaronmgn

aaronmgn commented Jul 3, 2026

Copy link
Copy Markdown
Contributor Author

Reworked: the fallback is gone, replaced by a Show selector that switches the graph between the incoming (input_indexed) and outgoing (output) views.

@AntonEbel AntonEbel requested a review from a team July 6, 2026 12:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Historical "Incoming traffic" information missing in UI (7.1.0)

3 participants