Commit Graph

21 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
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
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
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
Filip Barl
e5c655aa88 Addressed the comments. 2017-02-20 11:10:44 +01: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
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
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
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
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
ab75bb5e41 Move details panel styling dimensions into common constants file.
They are used in a couple of places around the code base.
2016-01-29 13:16:33 +01:00