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
This commit is contained in:
Filip Barl
2017-03-24 14:51:53 +01:00
committed by GitHub
parent 8814e856e0
commit 69fd397217
50 changed files with 1592 additions and 568 deletions

View File

@@ -2,6 +2,7 @@ import debug from 'debug';
import reqwest from 'reqwest';
import trimStart from 'lodash/trimStart';
import defaults from 'lodash/defaults';
import { Map as makeMap } from 'immutable';
import { blurSearch, clearControlError, closeWebsocket, openWebsocket, receiveError,
receiveApiDetails, receiveNodesDelta, receiveNodeDetails, receiveControlError,
@@ -9,6 +10,7 @@ import { blurSearch, clearControlError, closeWebsocket, openWebsocket, receiveEr
receiveControlSuccess, receiveTopologies, receiveNotFound,
receiveNodesForTopology } from '../actions/app-actions';
import { layersTopologyIdsSelector } from '../selectors/resource-view/layout';
import { API_INTERVAL, TOPOLOGY_INTERVAL } from '../constants/timer';
const log = debug('scope:web-api-utils');
@@ -157,13 +159,12 @@ function doRequest(opts) {
}
/**
* Gets nodes for all topologies (for search)
* Does a one-time fetch of all the nodes for a custom list of topologies.
*/
export function getAllNodes(getState, dispatch) {
const state = getState();
const topologyOptions = state.get('topologyOptions');
function getNodesForTopologies(getState, dispatch, topologyIds, topologyOptions = makeMap()) {
// fetch sequentially
state.get('topologyUrlsById')
getState().get('topologyUrlsById')
.filter((_, topologyId) => topologyIds.contains(topologyId))
.reduce((sequence, topologyUrl, topologyId) => sequence.then(() => {
const optionsQuery = buildOptionsQuery(topologyOptions.get(topologyId));
// Trim the leading slash from the url before requesting.
@@ -175,6 +176,28 @@ export function getAllNodes(getState, dispatch) {
Promise.resolve());
}
/**
* Gets nodes for all topologies (for search).
*/
export function getAllNodes(getState, dispatch) {
const state = getState();
const topologyOptions = state.get('topologyOptions');
const topologyIds = state.get('topologyUrlsById').keySeq();
getNodesForTopologies(getState, dispatch, topologyIds, topologyOptions);
}
/**
* One-time update of all the nodes of topologies that appear in the current resource view.
*/
export function getResourceViewNodesSnapshot(getState, dispatch) {
const topologyIds = layersTopologyIdsSelector(getState());
// TODO: Remove the timeout and replace it with normal polling once we figure how to make
// resource view dynamic (from the UI point of view, the challenge is to make it stable).
setTimeout(() => {
getNodesForTopologies(getState, dispatch, topologyIds);
}, 1200);
}
export function getTopologies(options, dispatch, initialPoll) {
// Used to resume polling when navigating between pages in Weave Cloud.
continuePolling = initialPoll === true ? true : continuePolling;
@@ -204,6 +227,8 @@ export function getTopologies(options, dispatch, initialPoll) {
});
}
// TODO: topologyUrl and options are always used for the current topology so they as arguments
// can be replaced by the `state` and then retrieved here internally from selectors.
export function getNodesDelta(topologyUrl, options, dispatch) {
const optionsQuery = buildOptionsQuery(options);
// Only recreate websocket if url changed or if forced (weave cloud instance reload);