Commit Graph

101 Commits

Author SHA1 Message Date
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
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
9fb3099a89 Dont scale graph on resize, only selected nodes 2015-11-12 17:22:33 +01:00
David Kaltschmidt
b6905d136d Undo pan/zoom after unselecting a node 2015-11-12 15:00:06 +01:00
David Kaltschmidt
3ca7415d47 Always center selected node
* dont allow panning while node is selected
* Shift nodes, not canvas on circling selection
* scale nodes on window resize
* Scale selected node to viewable size
2015-11-12 13:59:26 +01:00
David Kaltschmidt
acbf8a665d Upgrade eslint, react and react-motion
* get rid of material-ui
* reduced bundle size by 20%
2015-11-11 15:51:27 +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
af175b62bc Review feedback 2015-11-05 11:02:18 +01:00
David Kaltschmidt
1fe036ab6a Simplified dance heuristics 2015-11-05 11:00:31 +01:00
David Kaltschmidt
83d7a87d43 dont relayout when node dissappears 2015-11-05 11:00:31 +01:00
David Kaltschmidt
47ba0ff2a4 Skip layout when only edges changed 2015-11-05 11:00:31 +01:00
David Kaltschmidt
7306e8fb5f Rewrote nodes-layout to use immutablejs 2015-11-05 11:00:31 +01:00
David Kaltschmidt
e4da515fa1 Refactored doLayout signature 2015-11-05 10:58:13 +01:00
David Kaltschmidt
5c086aeeb3 show message if topology is empty 2015-11-03 18:27:23 +01:00
David Kaltschmidt
2d7e546ae5 Render filtered node count in status bar
* always set updated topology object when received
* track whether route was set on initial load
* removed connection count from status bar (was not deemed important)
* fixed issue where topology option changes did not affect details pane
* only show filtered nodes when count > 0
* clear nodes graph when empty topology is loaded
* also prevent JS error if nodes are hovered over that should be gone
* fixed options sync issue between graph and status bar
* implemented topology options with immutable DS
2015-09-29 08:51:56 +00:00
David Kaltschmidt
a3597c9639 Fix zooming and autoshift
* track panning to not trigger mouse up event
* offset angle for circle
* fixed panning/zooming
* center the center node if radius bigger than screen
2015-09-21 11:44:26 +02:00
David Kaltschmidt
808fc55832 filter loopback adjacents on radial layout
needed to adjust size of nodes, too
2015-09-18 18:08:35 +02:00
David Kaltschmidt
6e3883d07e Dont shift canvas after it has been autoshifted 2015-09-18 18:07:52 +02:00
David
79bf8badd7 Merge pull request #501 from weaveworks/495-cover-nodes
Dont cover other nodes on radial layout
2015-09-18 18:07:00 +02:00
David Kaltschmidt
5b4e084c01 Dont cover other nodes on radial layout
* shift center of radial layout a bit
* shrink blurred nodes
* blow up focused nodes a bit
2015-09-16 21:05:12 +02:00
David Kaltschmidt
438e25df6f s/topology/view/ 2015-09-16 16:29:23 +02:00
David Kaltschmidt
74840169a5 changed topo max nodes text, fade in topo 2015-09-16 15:39:53 +02:00
David Kaltschmidt
7f4673ae4b Show message in UI when topology too big to render 2015-09-16 12:53:33 +02:00
David Kaltschmidt
56d040e3ee WIP track layout aborts 2015-09-16 12:23:31 +02:00
David Kaltschmidt
c1523863c4 Close details on canvas click 2015-09-16 12:12:51 +02:00
David Kaltschmidt
05e21a9d42 take zoom scale into account when shifting canvas 2015-09-16 11:48:09 +02:00
David Kaltschmidt
7b9e1e2867 add node radius to circle radius for canvas shift 2015-09-16 11:30:35 +02:00
David Kaltschmidt
6191999c9e shift canvas up/down if node circle off canvas 2015-09-11 16:39:00 +02:00
David Kaltschmidt
bc7e8f27fc animate shifting of canvas 2015-09-11 16:26:22 +02:00
David Kaltschmidt
afbd1397df shift canvas if selected nodes are hidden 2015-09-11 15:41:26 +02:00
David Kaltschmidt
31f7a97016 setState only once in componentWillReceiveProps
setstate does not set this.state immediately, so successive function
calls cant rely on it
2015-09-11 14:42:10 +02:00
David Kaltschmidt
6c5c2c2c94 ignore previous node state/flush states on topo change 2015-09-11 11:03:59 +02:00
David Kaltschmidt
72c433eb86 make sure circular layouts lots of nodes spreadout 2015-09-10 15:55:07 +02:00
David Kaltschmidt
b49e1f55d2 Use full adjacency also for mouseover nodes 2015-09-10 15:38:03 +02:00
David Kaltschmidt
f764e4415e respect both ways of adjacency for selected node 2015-09-09 18:26:44 +02:00
David Kaltschmidt
2c554fe273 blur nodes that not selected nor adjacent 2015-09-09 18:12:02 +02:00
David Kaltschmidt
f0a5fcc439 highlight selected node and circle adjacent nodes 2015-09-09 16:36:33 +02: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
44e62e3c19 color nodes by rank 2015-09-04 11:31:17 +02:00
David Kaltschmidt
b17d958b07 use immutable objects for storing nodes
makes checking for topology changes easier, which triggers fewer
re-renders
fix JS store tests with Immutables
only update graph if topology changed
2015-09-02 16:00:28 +02:00
David Kaltschmidt
9c7dea8e2f cache render engines for consistent renderings
* one render engine per topology
* improves switching back and forth between topos
* might increase memory use
* roughly fixes #160
2015-08-24 18:19:14 +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
b9563f35d7 Styled pseudonodes pale and remove interaction 2015-06-12 09:23:32 +02:00
David Kaltschmidt
49c1493c79 replaced console.log with debug package 2015-06-11 20:57:13 +02:00
David Kaltschmidt
9c3db34d49 highlight edges and connected nodes on edge hover 2015-05-29 18:00:35 +02:00
David Kaltschmidt
e6f4a8ce71 highlight connected nodes on hover 2015-05-29 16:53:05 +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
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