* Adjust Firefox zoom sensitivity.
* Animate zooming to make it appear smoother (especially on Firefox).
* Debounced zoom tracking.
* Addressed the comments.
* Experimental.
* Getting somewhere.
* Good zooming behaviour.
* Working timeline zooming & panning.
* Clickable timestamps.
* Dragging cursor
* Timeline panning buttons.
* Capping at current time.
* Scale limits.
* Better ticks.
* Time tags fading in smoothly.
* Removed seconds.
* Better tick spacing.
* Vertical panning as zooming.
* Organizing the code..
* Replaced d3-zoom with native events.
* Got rid of scaleX
* More code beautified.
* Almost done polishing the code.
* Some cleanup.
* Better request triggers.
* More cleaning up.
* Styled the timestamp input.
* Final cleanup.
* Update yarn.lock
* Zoom tracking.
* Animate timeline translations.
* Fixed the PAUSE button glitch and updating the time control info.
* Opacity fix and timeline arrows removed.
* Fixed the red vertical bar.
* Use preventDefault() on timeline scrolling.
* Made Resource view nodes clickable.
* Remove selection when clicking on the background.
* Use opacity instead of the blue overlay for selected nodes.
When the scope-app restarts, it no longer has a
reference to the previous node set. Therefore,
the delta update adds *all* nodes but does not
remove legacy ones.
`reset==true` tells the frontend to start fresh.
Fixes#2708
If the scope-app API unexpectedly restarts, it has no report
at hand (until it gets one from the probe) and sends node
count 0 to the frontend for all topologies. Once the report
arrives, it will send the proper count.
What happened was the frontend did hide Processes for a short
time till the node count recovered. This moved the topology
selection to the always visible Containers (hide_if_empty == false)
while keeping the graph as is.
Once the node count recovers, Processes comes back but the
selection is still at Containers.
We now keep the selected topology visible at all time even if
the API returns a node count of 0. This recovers nicely when
the correct node counts come in. Once the user selects a different
topology while and a backend response arrives, it disappears.
Fixes#2646
* Initial top level control.
* Added the jump buttons.
* Tiny styling adjustments.
* Massive renaming.
* Pause info
* Added slider marks.
* Improved messaging.
* Freeze all updates when paused.
* Repositioned for Configure button.
* Improved the flow.
* Working browsing through slider.
* Small styling.
* Hide time travel button behind the feature flag.
* Fixed actions.
* Elements positioning corner cases.
* Removed nodes delta buffering code.
* Fixed the flow.
* Fixed almost all API call cases.
* Final touches
* Fixed the tests.
* Fix resource view updates when time travelling.
* Added some comments.
* Addressed some of @foot's comments.
While we're there, adopt a consistent ordering for all places that shapes are listed
Order is least sides to most sides, with circle before polygons, and complex shapes (currently just Cloud) after.
On shape choices for topologies:
* Since the k8s logo is a heptagon, we want pods to be heptagons.
* Since triangle is 'a bit weird', we put it on the least-important type, replica sets.
* Pentagons look a little weirder than octogons (it's the lack of symmetry) so we put octogons on the most common (deployments)
* Rendering both nodes and edges from one component.
* Organized the render layers in a more readable manner.
* Rerendering optimization.
* Finer edge rendering layers.
* Moved the constants out of the component file.
* Typo fix.
* Include edge thickness in <Motion /> instead of fade-in effect.
In union option groups, the list of selected ids is encoded as a comma-delimited string.
For example, if 'foo' and 'bar' are selected, the value 'foo,bar' is sent, ie ["foo", "bar"] -> "foo,bar"
Under this scheme, with nothing selected, the empty string should be sent, ie. [] -> ""
Before this change, the frontend code called the "none option" by id 'none'.
There were several issues with this:
* The frontend would send 'none' when nothing was selected, not ''. The backend ignored this as it ignores
junk values in the options, treating them as though they hadn't been given.
* The backend would attempt to set the default value of an option to "nothing selected", ie. [], by sending ''.
The frontend would interpret this as nothing selected, *not even the 'none' option*, which caused a visual bug.
* Everything would break if one of the legitimate options had the id 'none', which could easily happen eg.
if a user had a 'none' k8s namespace. This is perhaps an unusual name, but our code shouldn't break when
a particular arbitary string is used as an input.
With this change, the none option is called '', which fixes all the above problems:
* The frontend encodes [''] as ''
* The frontend decodes '' as [''], and therefore shows the '' option as selected
* The string '' is not a valid k8s namespace name and is a reasonable "prohibited value" for all other use cases.
The backend already couldn't handle a value with this id correctly prior to this change anyway.
* Node details fetching reports at proper timestamp.
* Corrected all the relevant timestamps in the UI.
* Renamed some state variables.
* Time travel works for topologies list.
* Added a whole screen overlay for time travel.
* Polished the backend.
* Make time travel work also with the Resource View.
* Fixed the jest tests.
* Fixed the empty view message for resource view.
* Some naming polishing.
* Addressed the comments.
* Hacky working prototype.
* Operate with time.Duration offset instead of fixed timestamp.
* Polished the backend code.
* Made a nicer UI component.
* Small refactorings of the websockets code.
* Fixed the backend tests.
* Better websocketing and smoother transitions
* Small styling refactoring.
* Detecting empty topologies.
* Improved error messaging.
* Addressed some of David's comments.
* Moved nodesDeltaBuffer to a global state to fix the paused status rendering bug.
* Small styling changes
* Changed the websocket global state variables a bit.
* Polishing & refactoring.
* More polishing.
* Final refactoring.
* Addressed a couple of bugs.
* Hidden the timeline control behind Cloud context and a feature flag.
* Addressed most of @davkal's comments.
* Added mixpanel tracking.
* Added a zoom slider control in the bottom-right corner.
* Made the control vertical and added the buttons.
* Adjusted the styles and borders.
* Trying to fix Webpack
* Hide zoom control when there is no content.
* Polished the code.
* Upgraded Webpack 1.13 -> 2.2
* Made webpack.prodution.config.js work and updated yarn.lock
* Updated a lot of small dependencies.
* Upgraded React
* Bunch of small devDependencies updated.
* Fully updated devDependencies
* Updated optionalDependencies
* Updated everything except D3 zoom.
* Fixed linting error.
* Another update.
* Reverted materialize-css upgrade and applied new eslint rules
* Final fixes to webpack configs.
* Updated yarn.lock again.
* Added mixpanel tracking for bunch of events.
* Changed hitEnter action to pinSearch.
* Moved all the event tracking out of app-actions.js
* Addressed @foot's comment.
* Added more keypress events tracking.
* Disable 'r' keyboard shortcut when Resource View is disabled
This was confusing in demos at KubeCon and DockerCon this year, as
clicking on nodes kept the UI zooming in.
Plus, when asked, users had no idea that double-click meant zoom in.
Fixesweaveworks/service-ui#453
