Add traffic type selector to cluster traffic graph#26548
Open
aaronmgn wants to merge 1 commit into
Open
Conversation
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. |
|
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). |
Contributor
Author
|
Reworked: the fallback is gone, replaced by a |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This started as a single
Showselector on the cluster traffic graph and turned into a small rework of the graph's controls. What's in it:Showdropdown 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.Select. The Days control was a BootstrapInput type="select"; it and the new Show control are now the react-select-basedcomponents/common/Select. react-select firesonChangeeven 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.Selectgainedcompactandsearchableprops.compactsizes 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.searchablemaps to react-select'sisSearchableand is off for these fixed lists. Both default to the old behavior, so existing Selects are untouched.updatemenusbutton drawn inside the chart. Now it's a normalButtonbacked by a newuseTrafficGraphZoomhook. 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'suirevision. The button is disabled when there's nothing to zoom or reset.GenericPlotcan now report a reset. Added anonZoomResetcallback so the hook hears about Plotly's own double-click autorange reset, and swapped the hand-rolledAxistype on the relayout handler for Plotly'sPlotRelayoutEvent.Smaller pieces that came with it: a
TRAFFIC_GRAPH_TYPE_CHANGEDtelemetry event, sharedTrafficTypelabel and section maps inGraph/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
useTrafficGraphZoomstate machine, the newSelectprops, and theGenericPlotreset path.yarn tsgo,yarn lintandyarn testpass. 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:

Daily raw:

Open:

Types of changes
Checklist: