69fd397217
* 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
Scope UI
Getting Started (using local node)
- You need nodejs 4.2.2 and a running
weavescopecontainer - Setup:
npm install - Develop:
BACKEND_HOST=<dockerhost-ip> npm startand then openhttp://localhost:4042/
This will start a webpack-dev-server that serves the UI and proxies API requests to the container.
Getting Started (using node in a container)
- You need a running
weavescopecontainer - Develop:
make WEBPACK_SERVER_HOST=<dockerhost-ip> client-startand then openhttp://<dockerhost-ip>:4042/
This will start a webpack-dev-server that serves the UI from the UI build container and proxies API requests to the weavescope container.
Test Production Bundles Locally
- Build:
npm run build, output will be inbuild/ - Serve files from
build/:BACKEND_HOST=<dockerhost-ip> npm run start-productionand then openhttp://localhost:4042/
Coding
This directory has a .eslintrc, make sure your editor supports linter hints.
To run a linter, you also run npm run lint.
Logging
To enable logging in the console, activate it via localStorage in the dev tools console:
localStorage["debug"] = "scope:*"
The Scope UI uses debug for logging, e.g.,:
const debug = require('debug')('scope:app-store');
debug('Store log message');
Gotchas
Got a blank screen when loading http://localhost:4042?
Make sure you are accessing the right machine:
If you're running npm start on a virtual machine with IP 10.0.0.8, you need to point your browser to http://10.0.0.8:4042.
Also, you may need to manually configure the virtual machine to expose ports 4041 (webpack-dev-server) and 4042 (express proxy).