220 Commits

Author SHA1 Message Date
Filip Barl
ce97b009da Fixed Time Travel component styles. 2017-10-17 19:16:05 +02:00
Filip Barl
a07e5dd70a Small DOM semantic replacements. 2017-10-17 19:07:14 +02:00
Filip Barl
a369c158a5 Converted some links into buttons. 2017-10-17 19:07:14 +02:00
Filip Barl
0056424357 TimeTravelComponent as a fully styled component. 2017-10-16 20:01:49 +02:00
Bianca Cheng Costanzo
54d96040cf Change back overlays 2017-10-12 14:31:48 +02:00
Bianca Cheng Costanzo
cc4162e55a Changes background gradient to single colour, removes text background 2017-10-11 15:02:40 +02:00
Filip Barl
c0c04c2e2b Replaced react-tooltip with own component. 2017-09-28 13:18:20 +02:00
Filip Barl
569757c1c0 Fixed header elements responsiveness. 2017-08-31 13:50:31 +02:00
Filip Barl
297e21d42c Removed d3-zoom reference in package.json. 2017-08-23 15:04:50 +02:00
Filip Barl
a185ae4e15 Introduced hand cursor and unified ZoomableCanvas usage. 2017-08-23 15:04:50 +02:00
Roland Schilter
0d381a34d6 Link scope-ui graphs clickable to prometheus queries (#2664)
scope-app:
* Adds `-app.metrics-graph` cli flag for configuring the base url to
use for graph links; supports :orgID and :query placeholders
* Assigns query URLs to existing metrics and appends empty metrics if missing

scope-ui:
* Extends <CloudFeature /> with option alwaysShow
* Adds <CloudLink /> to simplify routing when in cloud vs not in cloud
* Links metric graphs in the ui's node details view for all k8s
toplogies and containers so far
* Tracks metric graph click in mixpanel `scope.node.metric.click`
* Uses percentages and MB for CPU/Memory urls
* Passes timetravel timestamp to cortex in deeplink
2017-08-15 18:56:23 +01:00
Filip Barl
596885ed81 Improved the node details time transitioning logic 2017-08-11 13:26:42 +02:00
Filip Barl
1b028e1e04 Add fade out transition to node details panel and activate it when switching the top panel. 2017-08-11 12:41:59 +02:00
Simon Howe
3ab216b6ea Fixes timetravel timestamp input getting truncatated on OSX
Now supports 88:88:88T88:88:88Z!
2017-08-09 17:58:57 +02:00
Filip Barl
322414b51f Polished the nodes chart overlay. 2017-08-08 10:52:54 +01:00
Filip Barl
855d1cbc6b Re-enabled all CSS animations. 2017-08-08 10:52:54 +01:00
Filip Barl
d105e7471c Enabled back some CSS transitions. 2017-08-08 10:52:54 +01:00
Filip Barl
038bbbd5ce Added a semitransparent layer over the background nodes. 2017-08-08 10:52:54 +01:00
Filip Barl
f9e9a8ae4d Shrink timeline height and make years fade out (#2778)
* Shrink timeline height to 55px and make years fade out as hours fade in.

* Address the comments.
2017-08-01 14:17:03 +02:00
Filip Barl
d7c1bfb035 Hide Service UI Configure button only in Scope. (#2766) 2017-07-31 09:50:05 +02:00
Filip Barl
2183a93916 Time Travel 3.0 (#2703)
* Experimental.

* Getting somewhere.

* Good zooming behaviour.

* Working timeline zooming & panning.

* Clickable timestamps.

* Dragging cursor

* Timeline panning buttons.

* Capping at current time.

* Scale limits.

* Better ticks.

* Time tags fading in smoothly.

* Removed seconds.

* Better tick spacing.

* Vertical panning as zooming.

* Organizing the code..

* Replaced d3-zoom with native events.

* Got rid of scaleX

* More code beautified.

* Almost done polishing the code.

* Some cleanup.

* Better request triggers.

* More cleaning up.

* Styled the timestamp input.

* Final cleanup.

* Update yarn.lock

* Zoom tracking.

* Animate timeline translations.

* Fixed the PAUSE button glitch and updating the time control info.

* Opacity fix and timeline arrows removed.

* Fixed the red vertical bar.

* Use preventDefault() on timeline scrolling.
2017-07-27 14:40:20 +02:00
Filip Barl
8f1fdeb477 Make Resource view nodes clickable (#2679)
* Made Resource view nodes clickable.

* Remove selection when clicking on the background.

* Use opacity instead of the blue overlay for selected nodes.
2017-07-25 17:46:17 +02:00
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
Filip Barl
36ee5db1da Improved rendering order of nodes/edges in Graph View (#2623)
* Rendering both nodes and edges from one component.

* Organized the render layers in a more readable manner.

* Rerendering optimization.

* Finer edge rendering layers.

* Moved the constants out of the component file.

* Typo fix.

* Include edge thickness in <Motion /> instead of fade-in effect.
2017-06-22 11:58:31 +02:00
Filip Barl
eb64d3f09b Make API calls with time travel timestamp (#2600)
* Node details fetching reports at proper timestamp.

* Corrected all the relevant timestamps in the UI.

* Renamed some state variables.

* Time travel works for topologies list.

* Added a whole screen overlay for time travel.

* Polished the backend.

* Make time travel work also with the Resource View.

* Fixed the jest tests.

* Fixed the empty view message for resource view.

* Some naming polishing.

* Addressed the comments.
2017-06-20 12:31:22 +02:00
Filip Barl
c4e0be45de Moved pause button back to footer. (#2585) 2017-06-14 11:39:45 +02:00
Filip Barl
b6dfe25499 Time travel control (#2524)
* Hacky working prototype.

* Operate with time.Duration offset instead of fixed timestamp.

* Polished the backend code.

* Made a nicer UI component.

* Small refactorings of the websockets code.

* Fixed the backend tests.

* Better websocketing and smoother transitions

* Small styling refactoring.

* Detecting empty topologies.

* Improved error messaging.

* Addressed some of David's comments.

* Moved nodesDeltaBuffer to a global state to fix the paused status rendering bug.

* Small styling changes

* Changed the websocket global state variables a bit.

* Polishing & refactoring.

* More polishing.

* Final refactoring.

* Addressed a couple of bugs.

* Hidden the timeline control behind Cloud context and a feature flag.

* Addressed most of @davkal's comments.

* Added mixpanel tracking.
2017-06-12 11:22:17 +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
jpellizzari
3ec7cc82e6 Added service images widget 2017-05-03 10:31:25 -07:00
Filip Barl
206a88df41 Calculate viewport dimensions from the scope-app div (#2473)
* Calculate viewport dimensions from the scope-app div.

* Addressed @foot's comments.
2017-04-27 15:36:22 +02:00
Filip Barl
c7bf7df975 Fixed view mode switching keyboard shortcuts (#2471)
* Replaced toggleGridMode with working actions.

* Addressed @foot's comment.
2017-04-26 14:26:47 +02:00
Filip Barl
7c22c97382 Fix node highlight for all shapes (#2430)
* Render highlight with strokes & use non-scaled highlight for stacks.

* Reverted part of the changes made to node stack highlighting.
2017-04-11 09:11:31 +02:00
Filip Barl
9c566562c9 Made view mode selector responsive. (#2421) 2017-04-07 15:04:38 +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
b2f06a63ee Don't reset zoom on refresh layout. (#2407) 2017-03-28 14:30:23 +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
a94006491e Fix help panel fields max height. 2017-03-22 11:53:43 +01:00
jpellizzari
376e6f014e Added edge arrows 2017-03-10 12:10:51 -08:00
Filip Barl
f87909282f Removed the throb animation for search matching. 2017-03-06 12:53:45 +01:00
Filip Barl
e5c655aa88 Addressed the comments. 2017-02-20 11:10:44 +01:00
Filip Barl
5bd8e8f690 Renamed 'subLabel' to 'labelMinor' and removed 'node_count' property. 2017-02-20 10:58:26 +01:00
Simon Howe
047ce43d2a Fixes base font-size of popped out terminal.
Share the rest of the base styles too so the embedded and popped out
terminal are working from a common style base.
2017-02-08 18:08:13 +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
c802c8c6c1 Addressed @foot's UI comments 2017-02-01 16:27:23 +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
jpellizzari
3f6e68230c Split stylesheets to fix contrast bug 2017-01-27 12:08:01 -08:00
jpellizzari
a6412f12b2 Scoped CSS classes inside .scope-app class 2017-01-24 11:33:20 -08:00