Commit Graph

74 Commits

Author SHA1 Message Date
Filip Barl
8f2d47ce4e Time travel redesign (#2651)
* 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.
2017-07-06 16:06:55 +02:00
Simon
6310b48937 Switch to 56px small cols to fit in 6 digit pids 2017-07-05 14:27:34 +02:00
Simon Howe
ba29271053 Prevents 6 digit pids from being truncated in details panel/table mode 2017-07-04 10:42:18 +02:00
Filip Barl
36ee5db1da Improved rendering order of nodes/edges in Graph View (#2623)
* 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.
2017-06-22 11:58:31 +02:00
Filip Barl
eb64d3f09b Make API calls with time travel timestamp (#2600)
* 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.
2017-06-20 12:31:22 +02:00
Filip Barl
b6dfe25499 Time travel control (#2524)
* 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.
2017-06-12 11:22:17 +02:00
Filip Barl
5935a32d0a Canvas zoom control (#2513)
* 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.
2017-05-15 11:49:12 +02:00
Filip Barl
6d270fe78b Fix arrow heads positioning (#2505)
* Fix arrow heads positioning.

* Addressed @foot's comment.

* Beautified the code and added some comments.
2017-05-12 10:39:22 +02:00
jpellizzari
3ec7cc82e6 Added service images widget 2017-05-03 10:31:25 -07:00
Filip Barl
65b9b48b53 Added mixpanel tracking for some basic events (#2462)
* 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
2017-04-27 14:26:07 +02:00
Filip Barl
23fb14d0be Polished the metric selection logic (#2468)
* Polished the metric selection code

* Fixed hovering advantage over pinning.
2017-04-26 16:18:42 +02:00
Filip Barl
82e373777a Increase cloud node thickness in graph view (#2418)
* Unified node shapes rendering templates.

* Addressed @foot's comments (fix shadow thickness across all shapes).

* Made getClipPathDefinition slightly more readable.
2017-04-06 14:44:52 +02:00
Filip Barl
69fd397217 Initial version of the resource view (#2296)
* Added resource view selector button

* Showing resource boxes in the resource view

* Crude CPU resource view prototype

* Improved the viewMode state logic

* Extracted zooming into a separate wrapper component

* Split the layout selectors between graph-view and resource-view

* Proper zooming logic for the resource view

* Moved all node networks utils to selectors

* Improved the zoom caching logic

* Further refactoring of selectors

* Added sticky labels to the resource boxes

* Added panning translation limits in the resource view

* Renamed GridModeSelector -> ViewModeSelector

* Polished the topology resource view selection logic

* Search bar hidden in the resource view

* Added per-layer topology names to the resource view

* Made metric selectors work for the resource view

* Adjusted the viewport selectors

* Renamed viewport selector to canvas (+ maximal zoom fix)

* Showing more useful metric info in the resource box labels

* Fetching only necessary nodes for the resource view

* Refactored the resource view layer component

* Addressed first batch UI comments (from the Scope meeting)

* Switch to deep zooming transform in the resource view to avoid SVG precision errors

* Renamed and moved resource view components

* Polished all the resource view components

* Changing the available metrics selection

* Improved and polished the state transition logic for the resource view

* Separated zoom limits from the zoom active state

* Renaming and bunch of comments

* Addressed all the UI comments (@davkal + @fons)

* Made graph view selectors independent from resource view selectors
2017-03-24 14:51:53 +01:00
jpellizzari
0f86ad1bed Prevent client polling after shutdown 2017-03-20 18:35:04 -07:00
Jordan Pellizzari
c7f6a07838 Changed client tests to use EDGE_ID_SEPARATOR constant 2017-03-19 17:30:26 -07:00
jpellizzari
451f6b29de Changed edge ID separator 2017-03-17 10:55:32 -07:00
Filip Barl
11ce5638c5 Moved nodes-chart-layout.
Moved nodes-chart-zoom.

Moved zoomCache to global state.

Moved nodes-chart-focus.

Fixed some bugs and polished the code.

Keeping track of topology options in zoomCache.

Fixed forceRelayout and circular layout.

Unified graph complexity heuristic criterion.
2017-03-01 12:14:36 +01:00
jpellizzari
f2f474ac80 Change to load contrast theme dynamically 2017-02-21 10:29:43 -08:00
Jordan Pellizzari
341446fa93 Merge pull request #2237 from weaveworks/change-instance
Add logic to remove non-transferrable state when switching Cloud instances
2017-02-20 10:47:45 -08:00
jpellizzari
3d13e916af Added logic to remove non-transferrable state keys when switching Cloud instances 2017-02-20 10:28:01 -08:00
Filip Barl
e5c655aa88 Addressed the comments. 2017-02-20 11:10:44 +01:00
jpellizzari
c9048d8661 Revert "Merge pull request #2204 from weaveworks/contrast-as-component"
This reverts commit 68e8cbf4f6, reversing
changes made to 00408b84e8.

Reverts bug where contrast mode is showing by default
2017-02-14 10:59:34 -08:00
Jordan Pellizzari
63dc4e1b3e Added dynamic contrast-mode toggle 2017-02-13 09:49:55 -08:00
Filip Barl
2b4ba3239c Fixed the node labels bug on Firefox. 2017-02-03 17:06:53 +01:00
Filip Barl
c9ff15f7f3 Re-applied PR #2128 'Graph layout optimizations' 2017-02-03 16:59:25 +01:00
Filip Barl
8eaa12e680 Revert "Graph layout optimizations" 2017-02-02 11:42:12 +01:00
Filip Barl
2a6308bf6c Split the zooming and layout logic in nodes-chart.js between a bunch of selectors 2017-02-01 16:27:23 +01:00
Filip Barl
632e3756c4 Optimized rendering of graph layout and zooming events 2017-02-01 16:27:23 +01:00
Filip Barl
26fc2eed58 Fixed row focusing for the bottom of a scrollable table 2017-01-20 12:36:27 +01:00
Filip Barl
687fb3a201 Maintain focus on hovered node table rows
More sophisticated row focusing

Keeping deleted focused nodes in the table

Fixed focus debouncing
2017-01-20 12:36:27 +01:00
Filip Barl
6888108b83 Made the searching of generic tables work on the UI
Extracted table headers common code on the frontend

Fixed the search matching and extracted further common code in the UI
2017-01-16 12:22:10 +01:00
jpellizzari
62448ee7cb Added debugging/troubleshooting menu; Moved troubleshooting icons 2017-01-05 13:46:51 -08:00
jpellizzari
edf94a4da8 Added control to reset local view state 2017-01-05 13:36:55 -08:00
fbarl
524e2e2e9a Importing lodash util functions explicitly. 2016-12-09 14:03:31 +01:00
Simon Howe
86101764b6 Tweak node/label-sizes to avoid overlap in certain layouts.
- Also permanently enables the label bg (previous was only on hover) to
  aid readibility w/ the (sometimes) smaller labels.
2016-08-17 16:03:47 +02:00
Simon Howe
5846222fe1 Scale node labels with the node's size.
- Within certain bounds. Still have min-label size, mainly effects nodes
  that get really big.
- Set a max size on nodes too, really big ones lose their border.
2016-08-09 14:57:13 +02:00
Simon Howe
d0b99969ea Grid-mode tuning!
- Change scrolling behaviour to lock headers in place
- Enable filtering (hitting enter in the search bar) in grid-mode
- Little more top-margin for k8s (can have 3 topos) + taller rows.
- Trying out rank-color + node.relatives in the grid-mode
- First pass at selecting rows.
  - Needs a bit more a fiddle, colors + click areas
- Store grid sort direction (asc/desc) in url state
- Simplify node selection to one method. (over-ride existing card)
  - Remove clicking on name directly (links) to overlay new cards for now.
- Playing w/ grid-mode-toggle icons and labels
- Improves rendering in ff, change of shortcut keys for grid-mode-toggle
- Playing w/ clearer selection colors for grid-mode
- Slight change to selection-ui
- Fixes showNodeInTopology button visibility on the details-panel
  - Was using an old heuristic. Table-mode allows you to open child cards
    before the parent.
- Make it clear what the default sort is in tables
  - E.g. always show a sorting caret
- Sort grid-mode columns, first meta then metrics
- dancing-nodes rememdy #1: pause updates onRowHover
- Splits relatives out into their own columns
- Take into account scrollbar width for grid-mode col header position
- Tooltips on table column headers
- grid-mode: fixes first column headers (proc/container/c-by-image)
- Disable pause-on-hover, too aggresive
- reduce label column width a bit (33pc -> 25pc) for big tables
- Filter grid-mode onSearchChange
  - Rather than previous behaviour of waiting for an <enter>
- Show label_minor on pseudo nodes, that might not have much other info
- grid-mode: further reduce width of id column.
- Fixes go tests, properly moves parents into node-summary
- Fixes sorting of string columns w/ missing fields.
  - E.g. uptime. Where -1e-10 > '3days' doesn't work.
2016-08-03 08:50:37 +02:00
Simon Howe
fa502ae6ad Removes the combined table-topo-view 2016-08-03 08:46:17 +02:00
Simon Howe
c51e290127 Node grid view
More graphs!

Rank is not support by dagre any longer..

Quick go at using facebook's fixed-data-table

Kind of working, kind of interesting.

Hack on the details-panel table, supports sorting etc already!

No, this one! Hacks on the details panel's table.

Hovering on the table works! (highlights nodes)

wip get sorting going

Working on sorting, not behaving!

Pulling out methods to fns

Kind of demoable

More hacks to make it demoable
2016-08-03 08:37:17 +02:00
Simon Howe
04f4071fd3 Handle loading message for empty topos correctly.
It was showing infinite loading...
2016-07-28 16:28:54 +02:00
Simon Howe
9a0feb3eb0 Adds basic "loading topologies" indicator for initial load.
Which can take a while sometimes.
2016-07-28 16:28:11 +02:00
Simon Howe
6b4b07d0bc Copy paste of MoC controls as initial networks-view legend
Needs a bit of de-dup / customization

oops, bad typo

More fleshing out the structure for network-view

onHover netview-legend: highlight relevant nodes.

And the bool rolls on.

Handle nodes w/ no networks better

Corrects deselect-node when used w/ new network-view behaviour

Net view details "node" can be open when with no nodes selected. Hitting
"esc" from:
 - card 0: network-a
 - card 1: node-a
was not deselecting node-a

Deselect selectedNetwork correctly onEsc

Ooops, trailing ws breaks linting.

Adds NodeNetworksOverlay stub

Expands on NodeNetworksOverlay stub and adds arcs and colors

Expand and collapse networks legend

Open arc for network circle, shift for stack

Show our base hue range in the debug bar too..

Was trying to smooth out our hue selector but turned out to be tricky..

Uniquify random data generator!
2016-06-06 16:23:44 +02:00
Simon Howe
af3f18b933 Don't draw svg labels when we don't need them.
Having the DOM nodes w/ display:none is still expensive. We only need
them briefly for svg export.
2016-05-11 18:08:59 +02:00
David Kaltschmidt
d1609658bf Apply search as filter 2016-05-11 18:08:59 +02:00
David Kaltschmidt
5a325e46fa Search on canvas
* adds a search field next to the topologies
* highlight results on canvas as you type
* non-matching nodes are grayed out
* "prefix:" limits search to field label
2016-05-11 18:08:59 +02:00
David Kaltschmidt
62ed88cf16 Close details panel when node was removed via control 2016-04-21 18:34:51 +02:00
Simon Howe
0a9f26bb60 Adds a shortcut panel! 2016-04-07 18:33:56 +02:00
Simon Howe
432ea920fe Terminology change from lock -> pin
In meetings etc the term pin is more often used.
2016-04-04 17:48:44 +02:00
Simon Howe
9d968a789b Tidying up MoC
- no rand ids, org code
- Fixes tests, no .includes in jest for now
- Small comment on moc stuff
- Patch up differences after MoC rebase
2016-04-04 17:48:44 +02:00
Simon Howe
319fe31356 Show metrics that are available for displayed nodes.
- change color to bg
- show "x" to remove the metric.
- Small debugToolbar enhancements.
2016-04-04 17:48:41 +02:00