Commit Graph

46 Commits

Author SHA1 Message Date
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
Simon Howe
a104962aa2 Simple metric selection clicking!
Locks onto a metric after you mouseout.
2016-04-04 17:48:40 +02:00
Simon Howe
ef1c69eb2a Basic hover to select metric 2016-04-04 17:48:40 +02:00
David Kaltschmidt
d7507cf67c Pause Button
* pauses topology and details panel updates
* buffers requests
* un-pause plays back the buffered requests
* automatically un-pauses when topology is changed, or other node is
  clicked (then discards buffer)

Fixes #1025
2016-03-07 15:26:22 +01:00
David Kaltschmidt
9dafaef9a9 Force-relayout button
* new button in footer
* when clicked, forces a relayout that could help with degraded graphs
* sets a store flag that will be unset on next nodes delta update
* fixes #863
2016-02-24 15:55:36 +01:00
David Kaltschmidt
8f83a73072 Split samples and feed metrics right away
* also increase sparkline feed to 60 secs
* and keep historic max
2016-02-04 16:56:07 +01:00
David Kaltschmidt
64f08dcf96 Metric feeder as higher order component to feed sparklines data 2016-02-03 16:25:54 +01: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
David Kaltschmidt
d39fd847b7 Details Panel UI Redesign
Refactored nodedetails to support multiple data sets, probably broke some tests
  Allow api requests to out-of-view topologies
  Fix ESC behavior with details panel
  Stack details panel like cards
  Details pain side-by-side
  Details panel piles
  Fix node details table header styles
  Render load and not-found captions like relatives
  Fix topology click action
  Make node detail tables sortable
  Grouped metrics for details health
  Group metrics in same style
  Link node details children
  Fix scroll issues on double-details
  Fix DESC sort order for node details table
  Save selected node labels in state - allows rendering of node labels from other topologies before details are loaded
  Change detail card UX, newest one at top, pile at bottom
  Details panel one pile w/ animation
  Sort details table nodes by metadata too
  Animate sidepanel from children too
  Fix radial layout
  Dont set origin if a node was already selected, suppresses animation
  stack effect: shift top cards to the left, shrink lower cards vertically
  Clear details card stack if sibling is selected
  Check if node is still selected on API response
  Make detail table sorters robust against non-uniform metadata
  Dont show scrollbar all the time, fix sort icon issue
  Button to show topology for relative
  Overflow metrics for details panel health
  Fix JS error when no metrics are available for container image details
  Column-based rendering of node details table
  Fix JS tests
  Review feedback (UI)
2016-01-19 16:47:05 +01:00
Simon Howe
3b2af2ae6c Terminal UI for pipes
- term.js
- Add eslintignore
- Fix color and es2015 after rebase
- Fix JS test, probably deleted during conflict resolution
- Moves terminal close button to top-right of window
- Consitent w/ details window.
- Changes padding of details window close button so both close buttons
  are horizonally aligned.
- Terminal resizes w/ browser window.
- No longer can drag window around.
- Add tiny big of padding between term and node-details.
- Playing w/ terminal placement.  This one's more drawer-like.
- Send DELETE when we close a terminal window.
- Dont lint or bable JS vendor files
- Ignore ctags 'tags' files.
- Adds popping out terminal out into a new browser window.
- Simplify code as now we've just a single terminal window.
- ESC is back to close the terminal, then the details panel.
- Fixes bug w/ slow response to closing the details panel.
- Moving away from "drawer-style" for terminal size and position to a
  simple window.
- Just gotta handle the case for refreshing a popped out terminal.
- Stop terminal text being auto-deselected.
- window resizes will still deselect.
- Adds state.connected to react.scu check.
- Don't delete pipe when browser closes
- To allow for nicer refresh flows
- scope-app will time out pipe after a while.
- Keep terminal-open/closed state in the url.
- shouldComponentUpdate fix to prevent deselection of text has been
  rolled back so gotta come up w/ another way to handle that...
- Fixes terminal text-selection again.
- Make pipes work for non-raw terminals too.
- Move document.title updating somewhere more sensible.
- Pass rawTty prop along to all terminals.
- Don't render react root into doc.body
- Reconnect the websocket if we lose it.
- First, slightly rough, attempt at displaying if pipe has been deleted
- Refactor controlPipe structure in the AppStore/hash.
- Merge controlPipeId, controlPipeRaw, controlPipeStatus into a single object.
- Adds a status bar to the terminal window.
- Error handling in popout working again.
- Don't show terminal cursor when not connected.
- Simplify controlPipe status and error handling.
- Don't keep the status in the hash.
- Use special new action receiveControlPipeFromParams rather than
  adding lots of branching to receiveControlPipe.
- You can reload a terminal but it doesn't exist in history stack.
- Pull out terminal into its own entry point!
- Fixes prod webpack build
- Fixes terminal-app websocket path when running on prod.
- Fixes old terminals appearing when closing a terminal.
- History hacking wasn't working, this is a little simpler.
2015-12-10 12:52:44 +00:00
David Kaltschmidt
6b445466ef Move JS to ES2015
Refactored mixins into utils

ES2015 module exports

ES2015-style imports

WIP Fixing tests

Fixes tests after es2015 code migrations.

We we're require()ing an ES2015 module[1]. Have to make sure you account
for the .default in this case.

[1] We had to use ES5 `require` in Jest:
(https://github.com/babel/babel-jest/issues/16)
2015-12-01 14:35:22 +01:00
David Kaltschmidt
abcb94b1f1 UI for controls.
- Make backend address configurable via env variable
- `BACKEND_HOST=1.2.3.4:4040 npm start` points the frontend to the app on that server. Just for development
- Render control icons
  - removed close x for details panel
  - added control icons in its space
  - closing of panel still works by clicking on same node, or background
- Dont allow control while pending
- Render and auto-dismiss control error
- Make tests pass
2015-11-06 17:44:28 +00:00
David Kaltschmidt
27caf0af41 Add dropdown field for topology options, save topology option in url state
- fix nodes reset after topology option change
- set topology on click
- explicitly set default topology options
- set default topo options when topos are received
- prevent JS error on too many nodes layout abort
2015-09-07 14:25:49 +00:00
David Kaltschmidt
1dccca2be7 fixed action name typo and added test 2015-08-28 13:10:58 +02:00
Tom Wilkie
bd217b10db 'Trying to reconnect..' in UI even though its connected 2015-08-25 09:51:32 +00:00
David Kaltschmidt
3728682878 Removed unused grouping and explorer code 2015-06-16 18:28:19 +02:00
David Kaltschmidt
c87cc872ee clear nodes cache when websocket closes connection
* also show reconnection status

fixes #162
2015-06-15 18:10:02 +02:00
David Kaltschmidt
033b4572ae removed unused topologies.js, fixes #146 2015-06-11 19:32:40 +02:00
Tom Wilkie
96abd00918 Plumb through the application version in the UI. 2015-06-03 13:22:15 +00:00
David Kaltschmidt
9c3db34d49 highlight edges and connected nodes on edge hover 2015-05-29 18:00:35 +02:00
David Kaltschmidt
7d1ee40a2b Fixed lint errors in all js files
- Also added linter configuration, and make linter fail on error
- fixing ES6 errors and added ES6 transformer
- gulp target to try local build
- linted gulpfile
- cant hook into gulp lint yet, because gulp does currently not support
  ES6 which some rules demand, since gulp cant transpile itself, we have a
  chicken and egg problem.
- ES6 transpiler for test runner
- removed old linter config
- adapted editorconfig to reflect linter config
2015-05-28 15:07:13 +00:00
David Kaltschmidt
42a3f57e11 Added linter for js
- use global stricts
- use airbnb linter rules
- gulp lint target
- make target client-lint
2015-05-28 15:06:46 +00:00
David Kaltschmidt
99c76dc4c8 fix indentation to 2 spaces in js/less/html 2015-05-28 15:05:01 +00:00
David Kaltschmidt
cda51ef696 grouping switch for topologies
fixes #24
2015-05-19 10:05:06 +00:00
Tom Wilkie
d50e827fd5 Intial commit 2015-05-19 10:02:02 +00:00