Commit Graph

50 Commits

Author SHA1 Message Date
Simon Howe
fe2bfe2ffa Use the familiar ALLCAPS for topo name in show-in-topo button 2016-11-04 10:07:08 +01:00
Simon Howe
4da2a82602 Add label to show-in-topo button 2016-11-03 13:11:54 +01:00
Simon Howe
30bca04e5d Revert "Bring shapes into the details panel and use them for view-in-topo"
This reverts commit 1bf54130ffb4e6c83f0bd816f7a037f819d561ac.
2016-11-03 11:10:07 +01:00
Simon Howe
dc61317ba5 Bring shapes into the details panel and use them for view-in-topo
(click on shape/title to view it in its topo)
2016-11-03 11:10:07 +01:00
David Kaltschmidt
51bb6263bc Add support for table based controls
* if a node table has `controls` they will be rendered in a row
* controls need the to be of the same structure as node-level controls
* control errors are not shown
2016-08-18 22:28:01 +01:00
Simon Howe
fc2fcfb298 Adds support for filtering node/table by relatives
Now that they are available in the summary data.
2016-08-09 18:20:43 +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
David Kaltschmidt
0573a20f07 Store table matches in table object 2016-05-11 18:08:59 +02:00
David Kaltschmidt
749571ebe9 Review feedback
* Fix node-details-test for search
* Label spacing and matched text truncation
* Delete pinned search on backspace, add hint for metrics, escape % in URL
* Fix text-bg on node highlight
* Added tests for search-utils
* Fix matching of other topologies, added comment re quick clear
* s/cx/classnames/
* Ignore MoC keys when search in focus, blur on Esc
* Fixes search term highlighting on-hover
* Fix SVG exports
* Fine-tuned search item rendering
* Fixed search highlighting in the details panel
* Dont throb node on hover
* Hotkey for search: '/'
* Keep focus on search when tabbing away from the browser
* bring hovered node to top
* background for search results on hover
* fixed height for foreign object to prevent layout glitches
* Dont blur focused nodes on search
* More robust metric matchers
* More meaningful search hints
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
c265a57672 Show truncation warning on click, reworded 2016-05-11 16:55:57 +02:00
David Kaltschmidt
645f2ca9f4 Add hint that a section may be truncated 2016-05-11 13:05:19 +02:00
David Kaltschmidt
96aae9bc99 Migrate from Flux to Redux
* better state visibility
* pure state changes
* state debug panel (show: crtl-h, move: ctrl-w)
2016-04-27 17:21:46 +02:00
Tom Wilkie
9eda27822c Show k8s labels and container env vars in the details panel. (#1342)
* Show k8s labels and container env vars in the details panel.

* Add show more bar to the env vars and labels

* React key was in the wrong place; empty tables render section labels.
2016-04-20 08:18:03 +01:00
Tom Wilkie
d237f52a90 Ensure connection rows have unique IDs. (#1245)
* Ensure connection rows have unique IDs.

This adds new types for connections tables.

* UI support for new connection table rows

* Parameterized node Id key for connections table

* also s/node_id/nodeId, and s/topology_id/topologyId in connections
* table

* Added comment about nodeIdKey

* Review feedback:
2016-04-11 14:40:50 +01:00
David Kaltschmidt
d520cffec7 Performance tweaks
Add debug.html to show toolbar

Perfjankie test runner

Playing w/ the pure mixin for perf. improvements

* Works well! Smoother zooming/panning when things have settled.
* Extract node movement to node-container, make nodes pure

Extracted node chart elements into own components

Keep control objects immutable while in components

Keep layout state objects alive

Made other components pure, removed mixin from stateless components

Remove font size adjustment from scaling

Fix zoomscale

Move node transform to node

* makes more sense there because the coords are rounded in the container

dynamic coords precision based on topology size

Make edge points immutable

Remove nodes maximum for layout engine

Dont send all canvas state down to next component

moving layout handling back to nodes-chart.js

Omit some props for edges/nodes, dont animate edges on low precision

Moved AppStore access out of lower components
2016-04-05 15:45:13 +02:00
Paul Bellamy
80dc714c1e rename LabelMajor to Label 2016-03-29 14:00:11 +01:00
David Kaltschmidt
e4270f69b7 Upgraded dev deps and linted JS according to latest airbnb rules 2016-03-15 18:09:45 +01:00
David Kaltschmidt
7b77210108 Render connection table as nodes table
Also:
- Make metadata fields sortable as numbers
- Sort by selected metadata column
2016-03-03 15:53:15 +00:00
David Kaltschmidt
f411b9c437 Review feedback 2016-02-25 14:02:32 +01:00
David Kaltschmidt
7dfb126e31 Docker Labels Component
* moved to bottom of details panel in its own section
* show all labels (no expand/collapse)
* label vs value width 1:1
2016-02-15 17:09:40 +00:00
Paul Bellamy
0a292f530c move docker labels into their own table of the details panel 2016-02-03 10:29:28 +00:00
Simon Howe
2c74196c1c Fixes host node/details panel color mismatch
- 'label_major' has been changed to 'label' in the details api response.
- getNodeColorDark was giving up too early if a rank wasn't provided.
  The topo diagram which uses getNodeColor will select a color even w/
  no rank. Hosts don't have ranks at the mo.
2016-01-29 11:26:59 +01:00
Simon Howe
c43abd6075 Reconcile some details-panel stuff after the rebase. 2016-01-19 16:31:17 +00:00
Paul Bellamy
bf13a824d4 render detail status section for metadata or metrics 2016-01-19 16:47:49 +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
5b390994b8 Fix node controls so they behave independently across nodes
If one node was busy performing an action, any other nodes controls
would also be in a 'blocked and waiting' state.
2016-01-05 19:17:10 +01:00
Simon Howe
4b33e32276 Fixes small ES2015 errors introduced while rebasing. 2015-12-01 14:37:14 +01: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
Tom Wilkie
f5aafb7a05 Don't apply filters to node endpoints & update details panel logic such that node which dissappear from the topology (eg when they are stopped) don't dissapear from the details panel. 2015-11-30 09:33:41 +00:00
David Kaltschmidt
13a2eec05d Loading details header now has node color 2015-11-24 18:49:49 +01:00
David Kaltschmidt
e60d64da27 Show a spinner while node details are loading 2015-11-24 18:41:56 +01:00
David Kaltschmidt
bf9b5bf947 Procedural color creation for nodes
* color hue is based on the first 2 letters of node rank
* color lightness is based on the first 2 letters of node label
2015-11-20 14:47:05 +01:00
David Kaltschmidt
0cae3541fa Use rank to determine color in details 2015-11-20 13:01:09 +01:00
David Kaltschmidt
bfd633fe85 Fix render issues in Safari
* remove text shadow on node labels (left artifacts on zoom)
* wrap details header to avoid background color using padding

Fixes #439
2015-11-18 13:00:28 +01:00
David Kaltschmidt
027c7aead3 Cleaned up node-details-table jsx mess 2015-11-16 15:49:04 +01:00
David Kaltschmidt
17f31cdb32 Control bar below node details header 2015-11-09 17:48:36 +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
3fd98df8ac add row keys to keep react happy 2015-09-02 18:05:26 +02:00
David Kaltschmidt
9b8a314742 Trim long container names and labels in details
fixes #418
2015-09-02 17:45:07 +02:00
David Kaltschmidt
2e50f6ae76 add test to check for detail pane titles 2015-09-02 16:00:28 +02:00
David Kaltschmidt
eb8a56bb1f show N/A if node disappears on remove 2015-06-11 19:19:54 +02:00
David Kaltschmidt
0f5e55db53 Display a n/a header in details if nodes are gone
fixes #193
2015-06-11 14:06:20 +02:00
David Kaltschmidt
215a1b4f84 set and unset window title for details
fixes #42
2015-05-29 15:47:51 +02:00
David Kaltschmidt
2720b17ab1 position tools absolute, extract truncate class
fixes #124
2015-05-29 15:05:07 +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
Tom Wilkie
d50e827fd5 Intial commit 2015-05-19 10:02:02 +00:00