Commit Graph

275 Commits

Author SHA1 Message Date
David Kaltschmidt
c7cd11bf1a Extracted footer into own component, moved pause into icon 2016-03-07 16:55:51 +01: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
b3c5dc0513 Merge pull request #1120 from weaveworks/node-borders
Adjust node borders
2016-03-07 15:13:25 +01:00
David Kaltschmidt
f8850058b6 Simplify cloud selection 2016-03-07 15:12:51 +01:00
David Kaltschmidt
9163846c5a Review feedback for node borders 2016-03-07 13:44:29 +01:00
David Kaltschmidt
53d873124f Adjust node borders
* increase stack node borders by 0.5px (fixes #1080)
* space out stacks in contrast mode (fixes #1020)
* fix cloud border stroke-width setting (exlude from CSS styling)
* adjust cloud border for contrast mode
2016-03-04 11:50:25 +01:00
David Kaltschmidt
833b78c2e7 Fix embedded logo size
* CSS transform is ignored in Safari, using SVG transform instead

Fixes #1071
2016-03-01 16:12:38 +01:00
David
9fa3b1936b Merge pull request #1027 from weaveworks/555-svg-export
SVG export button
2016-02-25 14:09:34 +01:00
David Kaltschmidt
f411b9c437 Review feedback 2016-02-25 14:02:32 +01:00
David Kaltschmidt
4ad74183b1 Inline styles in cloned svg sub tree, skip default styles 2016-02-25 10:14:34 +01:00
David Kaltschmidt
cdf2c21057 Replace Show More buttons with carets w/ counts 2016-02-24 18:58:26 +01:00
David Kaltschmidt
bd821c159e Inject weavescope logo into exported SVG 2016-02-24 17:03:27 +01:00
Simon Howe
2ecb2bd4cb Center align "SHOW MORE" labels in details panel 2016-02-23 17:32:05 +01:00
Simon Howe
24d06d534f Gentle perspective in the nodestacks.
- They get a little bit smaller as they go down.
- Small tweak for shape stacks + high contrast mode.
2016-02-22 12:42:37 +01:00
Simon Howe
a34d9c97b8 Adds node-shapes to the canvas
- circle
- rect (w/ radius)
- fluffy cloud shape
- hexagons
- stacks
2016-02-22 12:42:36 +01:00
David Kaltschmidt
20b3c4286d Improve contrast of default view
* expand contrast between text styles
* remove low opacity from footer
2016-02-18 12:35:09 +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
David Kaltschmidt
5c2a80d573 Fixes status icon regression 2016-02-15 16:40:56 +00:00
David
04b05c1a7b Merge pull request #954 from weaveworks/contrast-mode
High contrast mode switch
2016-02-15 16:21:40 +00:00
David Kaltschmidt
531068179c High contrast mode switch
* added button to the bottom right to switch to higher contrast,
* suitable for projectors
* increased contrast between background and text colors
* thicker strokes around chart elements
* ensure yellow details panel backgrounds are darker
2016-02-15 16:20:40 +00:00
David Kaltschmidt
a80d04afe5 Refactored Show-expand, added styles 2016-02-09 12:12:52 -08:00
David Kaltschmidt
88fb9fe4de Highlight topologies with no border
* removed background from sidebar items
2016-02-08 12:21:43 +01:00
David Kaltschmidt
c3878eb649 No borders for topology links
* added .btn-opacity to control opacity for buttons on hover/selected
  state

* increased contrast in topology link labels

* removed dark background from status to not confuse with topo links
2016-02-08 10:43:05 +01:00
David Kaltschmidt
4890220984 Highlight selected topology 2016-02-05 16:56:39 +01:00
David Kaltschmidt
7d73590ced Enable metric feeder also for health overflow items
* tried activating it for child tables too, but that became quite CPU
  intensive, and feed intervals became out of sync (host CPU < container
  CPU, which is hard to believe)
2016-02-04 17:17:11 +01:00
Simon Howe
3c23bd950a Fixes some fields overflowing badly.
The Chrome guys have implmeneted a new change (in Chrome 48) in the CSS
flexbox spec, min-width now defaults to auto instead of 0. "auto" has
some complicated behaviour described in the table here:
https://drafts.csswg.org/css-flexbox/#min-size-auto

This results in a very long min-width (I don't understand why). So we
have to let the browser know it can make it smaller if it wants to,
which in this case would be great.

Here's another person's experience with the issue.
 - https://code.google.com/p/chromium/issues/detail?id=551336
2016-02-01 15:12:52 +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
b2774ed981 Fixes scope from crashing with "long" edges.
Long edges are those w/ a lot of points on them. Which can pop up in
heavily connected layouts.
2016-01-18 18:06:02 +01:00
Simon Howe
921a7b723f More Terminal-UI and code post review fixes. 2015-12-10 19:43:46 +01:00
Simon Howe
fe6e8973c4 UI Review feedback
- Adds more spacing between term and details windows
- Make the terminal status-overlay a bit smaller
- No period at the end of titles.
- Space out terminal button controls.
- Revise some of the terminal status prompts.
- Fixes terminal resizing.
- Flexbox was being very laggy on chrome. We can get away w/ absolute
  positioning in this case easily. Snappier.
2015-12-10 12:53:06 +00: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
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
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
c0e7ade9e9 Add x to close details panel again
Fixes #667
2015-11-13 15:29:23 +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
Paul Bellamy
510870e2f9 Add Sparklines to the UI based on Metrics.
- basic sparklines rendering for load
- Graphs are normalized so they all render on the y-axis.
- Time-axis is fixed to 15-seconds, so that data fills in correctly when data is insufficient
- Move load scalar behind sparkline
- add title to sparklines, showing timespan, samples, etc
2015-11-11 17:24:29 +00: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
5c086aeeb3 show message if topology is empty 2015-11-03 18:27:23 +01:00
David
a557769b78 Merge pull request #494 from weaveworks/474-toomanynodes
Show message in UI when topology too big to render
2015-09-18 17:20:57 +02:00
David Kaltschmidt
74840169a5 changed topo max nodes text, fade in topo 2015-09-16 15:39:53 +02:00
David Kaltschmidt
6be8b1648a fix truncate issue on details panel 2015-09-16 13:09:55 +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
38fa82dee4 animate status bar, add Loading text 2015-09-15 16:38:31 +02:00
David Kaltschmidt
3a42ec48ea style tweaks for sidebar 2015-09-15 15:28:48 +02:00
David Kaltschmidt
8483492eb7 New sidebar in the bottom left
* status bar (fixes #207)
* moved topology options to sidebar
* render topology option like snackbar
* upgrade material-ui to 0.11
2015-09-15 15:03:18 +02:00
David Kaltschmidt
396ebdd13e pseudo nodes should be equally blurred 2015-09-11 14:46:07 +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