github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 18:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #125 from weaveworks/linting

Browse Source 
Added linter and formatted tabs to 2 spaces
This commit is contained in:
David
2015-05-28 17:25:38 +02:00
parent 1fbc48f855 7d1ee40a2b
commit 784c1e0e75
34 changed files with 1690 additions and 1511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile
View File

@@ -51,6 +51,11 @@ client-test: client/test/*
-v $(shell pwd)/client/test:/home/weave/test \
$(SCOPE_UI_BUILD_IMAGE) npm test
client-lint:
docker run -ti -v $(shell pwd)/client/app:/home/weave/app \
-v $(shell pwd)/client/test:/home/weave/test \
$(SCOPE_UI_BUILD_IMAGE) npm run lint
$(SCOPE_UI_BUILD_EXPORT): client/Dockerfile client/gulpfile.js client/package.json
docker build -t $(SCOPE_UI_BUILD_IMAGE) client
docker save $(SCOPE_UI_BUILD_IMAGE):latest > $@

9
client/.editorconfig
View File

@@ -9,7 +9,7 @@ root = true
# Change these settings to your own preference
indent_style = space
indent_size = 4
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
@@ -20,10 +20,3 @@ insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[package.json]
indent_style = space
indent_size = 2
[bower.json]
indent_style = space
indent_size = 2

1
client/.eslintignore Normal file
View File

@@ -0,0 +1 @@
app/**/__tests__/*.js

213
client/.eslintrc Normal file
View File

@@ -0,0 +1,213 @@
{
"parser": "babel-eslint",
"plugins": [
"react",
"jasmine"
],
"env": {
"browser": true,
"node": true
},
"ecmaFeatures": {
"arrowFunctions": true,
"blockBindings": true,
"classes": true,
"defaultParams": true,
"destructuring": true,
"forOf": true,
"generators": false,
"modules": true,
"objectLiteralComputedProperties": true,
"objectLiteralDuplicateProperties": false,
"objectLiteralShorthandMethods": true,
"objectLiteralShorthandProperties": true,
"spread": true,
"superInFunctions": true,
"templateStrings": true,
"jsx": true
},
"rules": {
/**
* Strict mode
*/
// babel inserts "use strict"; for us
// http://eslint.org/docs/rules/strict
"strict": [2, "never"],
/**
* ES6
*/
"no-var": 2, // http://eslint.org/docs/rules/no-var
/**
* Variables
*/
"no-shadow": 2, // http://eslint.org/docs/rules/no-shadow
"no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names
"no-unused-vars": [2, { // http://eslint.org/docs/rules/no-unused-vars
"vars": "local",
"args": "after-used"
}],
"no-use-before-define": 2, // http://eslint.org/docs/rules/no-use-before-define
/**
* Possible errors
*/
"comma-dangle": [2, "never"], // http://eslint.org/docs/rules/comma-dangle
"no-cond-assign": [2, "always"], // http://eslint.org/docs/rules/no-cond-assign
"no-console": 1, // http://eslint.org/docs/rules/no-console
"no-debugger": 1, // http://eslint.org/docs/rules/no-debugger
"no-alert": 1, // http://eslint.org/docs/rules/no-alert
"no-constant-condition": 1, // http://eslint.org/docs/rules/no-constant-condition
"no-dupe-keys": 2, // http://eslint.org/docs/rules/no-dupe-keys
"no-duplicate-case": 2, // http://eslint.org/docs/rules/no-duplicate-case
"no-empty": 2, // http://eslint.org/docs/rules/no-empty
"no-ex-assign": 2, // http://eslint.org/docs/rules/no-ex-assign
"no-extra-boolean-cast": 0, // http://eslint.org/docs/rules/no-extra-boolean-cast
"no-extra-semi": 2, // http://eslint.org/docs/rules/no-extra-semi
"no-func-assign": 2, // http://eslint.org/docs/rules/no-func-assign
"no-inner-declarations": 2, // http://eslint.org/docs/rules/no-inner-declarations
"no-invalid-regexp": 2, // http://eslint.org/docs/rules/no-invalid-regexp
"no-irregular-whitespace": 2, // http://eslint.org/docs/rules/no-irregular-whitespace
"no-obj-calls": 2, // http://eslint.org/docs/rules/no-obj-calls
"no-reserved-keys": 2, // http://eslint.org/docs/rules/no-reserved-keys
"no-sparse-arrays": 2, // http://eslint.org/docs/rules/no-sparse-arrays
"no-unreachable": 2, // http://eslint.org/docs/rules/no-unreachable
"use-isnan": 2, // http://eslint.org/docs/rules/use-isnan
"block-scoped-var": 2, // http://eslint.org/docs/rules/block-scoped-var
/**
* Best practices
*/
"consistent-return": 2, // http://eslint.org/docs/rules/consistent-return
"curly": [2, "multi-line"], // http://eslint.org/docs/rules/curly
"default-case": 2, // http://eslint.org/docs/rules/default-case
"dot-notation": [2, { // http://eslint.org/docs/rules/dot-notation
"allowKeywords": true
}],
"eqeqeq": 2, // http://eslint.org/docs/rules/eqeqeq
"guard-for-in": 2, // http://eslint.org/docs/rules/guard-for-in
"no-caller": 2, // http://eslint.org/docs/rules/no-caller
"no-else-return": 2, // http://eslint.org/docs/rules/no-else-return
"no-eq-null": 2, // http://eslint.org/docs/rules/no-eq-null
"no-eval": 2, // http://eslint.org/docs/rules/no-eval
"no-extend-native": 2, // http://eslint.org/docs/rules/no-extend-native
"no-extra-bind": 2, // http://eslint.org/docs/rules/no-extra-bind
"no-fallthrough": 2, // http://eslint.org/docs/rules/no-fallthrough
"no-floating-decimal": 2, // http://eslint.org/docs/rules/no-floating-decimal
"no-implied-eval": 2, // http://eslint.org/docs/rules/no-implied-eval
"no-lone-blocks": 2, // http://eslint.org/docs/rules/no-lone-blocks
"no-loop-func": 2, // http://eslint.org/docs/rules/no-loop-func
"no-multi-str": 2, // http://eslint.org/docs/rules/no-multi-str
"no-native-reassign": 2, // http://eslint.org/docs/rules/no-native-reassign
"no-new": 2, // http://eslint.org/docs/rules/no-new
"no-new-func": 2, // http://eslint.org/docs/rules/no-new-func
"no-new-wrappers": 2, // http://eslint.org/docs/rules/no-new-wrappers
"no-octal": 2, // http://eslint.org/docs/rules/no-octal
"no-octal-escape": 2, // http://eslint.org/docs/rules/no-octal-escape
"no-param-reassign": 2, // http://eslint.org/docs/rules/no-param-reassign
"no-proto": 2, // http://eslint.org/docs/rules/no-proto
"no-redeclare": 2, // http://eslint.org/docs/rules/no-redeclare
"no-return-assign": 2, // http://eslint.org/docs/rules/no-return-assign
"no-script-url": 2, // http://eslint.org/docs/rules/no-script-url
"no-self-compare": 2, // http://eslint.org/docs/rules/no-self-compare
"no-sequences": 2, // http://eslint.org/docs/rules/no-sequences
"no-throw-literal": 2, // http://eslint.org/docs/rules/no-throw-literal
"no-with": 2, // http://eslint.org/docs/rules/no-with
"radix": 2, // http://eslint.org/docs/rules/radix
"vars-on-top": 2, // http://eslint.org/docs/rules/vars-on-top
"wrap-iife": [2, "any"], // http://eslint.org/docs/rules/wrap-iife
"yoda": 2, // http://eslint.org/docs/rules/yoda
/**
* Style
*/
"indent": [2, 2], // http://eslint.org/docs/rules/
"brace-style": [2, // http://eslint.org/docs/rules/brace-style
"1tbs", {
"allowSingleLine": true
}],
"quotes": [
2, "single", "avoid-escape" // http://eslint.org/docs/rules/quotes
],
"camelcase": [2, { // http://eslint.org/docs/rules/camelcase
"properties": "never"
}],
"comma-spacing": [2, { // http://eslint.org/docs/rules/comma-spacing
"before": false,
"after": true
}],
"comma-style": [2, "last"], // http://eslint.org/docs/rules/comma-style
"eol-last": 2, // http://eslint.org/docs/rules/eol-last
"func-names": 0, // http://eslint.org/docs/rules/func-names
"key-spacing": [2, { // http://eslint.org/docs/rules/key-spacing
"beforeColon": false,
"afterColon": true
}],
"new-cap": [2, { // http://eslint.org/docs/rules/new-cap
"newIsCap": true
}],
"no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines
"max": 2
}],
"no-nested-ternary": 2, // http://eslint.org/docs/rules/no-nested-ternary
"no-new-object": 2, // http://eslint.org/docs/rules/no-new-object
"no-spaced-func": 2, // http://eslint.org/docs/rules/no-spaced-func
"no-trailing-spaces": 2, // http://eslint.org/docs/rules/no-trailing-spaces
"no-wrap-func": 2, // http://eslint.org/docs/rules/no-wrap-func
"no-underscore-dangle": 0, // http://eslint.org/docs/rules/no-underscore-dangle
"one-var": [2, "never"], // http://eslint.org/docs/rules/one-var
"padded-blocks": [2, "never"], // http://eslint.org/docs/rules/padded-blocks
"semi": [2, "always"], // http://eslint.org/docs/rules/semi
"semi-spacing": [2, { // http://eslint.org/docs/rules/semi-spacing
"before": false,
"after": true
}],
"space-after-keywords": 2, // http://eslint.org/docs/rules/space-after-keywords
"space-before-blocks": 2, // http://eslint.org/docs/rules/space-before-blocks
"space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren
"space-infix-ops": 2, // http://eslint.org/docs/rules/space-infix-ops
"space-return-throw-case": 2, // http://eslint.org/docs/rules/space-return-throw-case
"spaced-line-comment": 2, // http://eslint.org/docs/rules/spaced-line-comment
/**
* JSX style
*/
"react/display-name": 0,
"react/jsx-boolean-value": 2,
"react/jsx-quotes": [2, "double"],
"react/jsx-no-undef": 2,
"react/jsx-sort-props": 0,
"react/jsx-sort-prop-types": 0,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/no-did-mount-set-state": [2, "allow-in-func"],
"react/no-did-update-set-state": 2,
"react/no-multi-comp": 2,
"react/no-unknown-property": 2,
"react/prop-types": 0,
"react/react-in-jsx-scope": 2,
"react/self-closing-comp": 2,
"react/wrap-multilines": 2,
"react/sort-comp": [2, {
"order": [
"displayName",
"mixins",
"statics",
"propTypes",
"getDefaultProps",
"getInitialState",
"componentWillMount",
"componentDidMount",
"componentWillReceiveProps",
"shouldComponentUpdate",
"componentWillUpdate",
"componentWillUnmount",
"/^on.+$/",
"/^get.+$/",
"/^render.+$/",
"render"
]
}]
}
}

21
client/.jshintrc
View File

@@ -1,21 +0,0 @@
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"jquery": true
}

3
client/.yo-rc.json
View File

@@ -1,3 +0,0 @@
{
"generator-mocha": {}
}

50
client/app/index.html
View File

@@ -1,33 +1,33 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Weave Scope</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8">
<title>Weave Scope</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- build:css styles/vendor.css -->
<!-- endbuild -->
<!-- build:css styles/vendor.css -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrap">
<div id="app"></div>
</div>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrap">
<div id="app"></div>
</div>
<!-- @ifdef DEBUG -->
<script>window.WS_URL = 'ws://localhost:4040';</script>
<!-- @endif -->
<!-- @ifdef DEBUG -->
<script>window.WS_URL = 'ws://localhost:4040';</script>
<!-- @endif -->
<!-- build:js scripts/bundle.js -->
<script src="scripts/bundle.js"></script>
<!-- endbuild -->
</body>
<!-- build:js scripts/bundle.js -->
<script src="scripts/bundle.js"></script>
<!-- endbuild -->
</body>
</html>

170
client/app/scripts/actions/app-actions.js
View File

@@ -1,97 +1,103 @@
var AppDispatcher = require('../dispatcher/app-dispatcher');
var ActionTypes = require('../constants/action-types');
let ActionTypes;
let AppDispatcher;
let AppStore;
let RouterUtils;
let WebapiUtils;
module.exports = {
clickCloseDetails: function() {
AppDispatcher.dispatch({
type: ActionTypes.CLICK_CLOSE_DETAILS
});
RouterUtils.updateRoute();
},
clickCloseDetails: function() {
AppDispatcher.dispatch({
type: ActionTypes.CLICK_CLOSE_DETAILS
});
RouterUtils.updateRoute();
},
clickGrouping: function(grouping) {
AppDispatcher.dispatch({
type: ActionTypes.CLICK_GROUPING,
grouping: grouping
});
RouterUtils.updateRoute();
WebapiUtils.getNodesDelta(AppStore.getCurrentTopologyUrl());
},
clickGrouping: function(grouping) {
AppDispatcher.dispatch({
type: ActionTypes.CLICK_GROUPING,
grouping: grouping
});
RouterUtils.updateRoute();
WebapiUtils.getNodesDelta(AppStore.getCurrentTopologyUrl());
},
clickNode: function(nodeId) {
AppDispatcher.dispatch({
type: ActionTypes.CLICK_NODE,
nodeId: nodeId
});
RouterUtils.updateRoute();
WebapiUtils.getNodeDetails(AppStore.getCurrentTopologyUrl(), AppStore.getSelectedNodeId());
},
clickNode: function(nodeId) {
AppDispatcher.dispatch({
type: ActionTypes.CLICK_NODE,
nodeId: nodeId
});
RouterUtils.updateRoute();
WebapiUtils.getNodeDetails(AppStore.getCurrentTopologyUrl(), AppStore.getSelectedNodeId());
},
clickTopology: function(topologyId) {
AppDispatcher.dispatch({
type: ActionTypes.CLICK_TOPOLOGY,
topologyId: topologyId
});
RouterUtils.updateRoute();
WebapiUtils.getNodesDelta(AppStore.getCurrentTopologyUrl());
},
clickTopology: function(topologyId) {
AppDispatcher.dispatch({
type: ActionTypes.CLICK_TOPOLOGY,
topologyId: topologyId
});
RouterUtils.updateRoute();
WebapiUtils.getNodesDelta(AppStore.getCurrentTopologyUrl());
},
enterNode: function(nodeId) {
AppDispatcher.dispatch({
type: ActionTypes.ENTER_NODE,
nodeId: nodeId
});
},
enterNode: function(nodeId) {
AppDispatcher.dispatch({
type: ActionTypes.ENTER_NODE,
nodeId: nodeId
});
},
hitEsc: function() {
AppDispatcher.dispatch({
type: ActionTypes.HIT_ESC_KEY
});
RouterUtils.updateRoute();
},
hitEsc: function() {
AppDispatcher.dispatch({
type: ActionTypes.HIT_ESC_KEY
});
RouterUtils.updateRoute();
},
leaveNode: function(nodeId) {
AppDispatcher.dispatch({
type: ActionTypes.LEAVE_NODE,
nodeId: nodeId
});
},
leaveNode: function(nodeId) {
AppDispatcher.dispatch({
type: ActionTypes.LEAVE_NODE,
nodeId: nodeId
});
},
receiveNodeDetails: function(details) {
AppDispatcher.dispatch({
type: ActionTypes.RECEIVE_NODE_DETAILS,
details: details
});
},
receiveNodeDetails: function(details) {
AppDispatcher.dispatch({
type: ActionTypes.RECEIVE_NODE_DETAILS,
details: details
});
},
receiveNodesDelta: function(delta) {
AppDispatcher.dispatch({
type: ActionTypes.RECEIVE_NODES_DELTA,
delta: delta
});
},
receiveNodesDelta: function(delta) {
AppDispatcher.dispatch({
type: ActionTypes.RECEIVE_NODES_DELTA,
delta: delta
});
},
receiveTopologies: function(topologies) {
AppDispatcher.dispatch({
type: ActionTypes.RECEIVE_TOPOLOGIES,
topologies: topologies
});
WebapiUtils.getNodesDelta(AppStore.getCurrentTopologyUrl());
WebapiUtils.getNodeDetails(AppStore.getCurrentTopologyUrl(), AppStore.getSelectedNodeId());
},
receiveTopologies: function(topologies) {
AppDispatcher.dispatch({
type: ActionTypes.RECEIVE_TOPOLOGIES,
topologies: topologies
});
WebapiUtils.getNodesDelta(AppStore.getCurrentTopologyUrl());
WebapiUtils.getNodeDetails(AppStore.getCurrentTopologyUrl(), AppStore.getSelectedNodeId());
},
route: function(state) {
AppDispatcher.dispatch({
state: state,
type: ActionTypes.ROUTE_TOPOLOGY
});
WebapiUtils.getNodesDelta(AppStore.getCurrentTopologyUrl());
WebapiUtils.getNodeDetails(AppStore.getCurrentTopologyUrl(), AppStore.getSelectedNodeId());
}
route: function(state) {
AppDispatcher.dispatch({
state: state,
type: ActionTypes.ROUTE_TOPOLOGY
});
WebapiUtils.getNodesDelta(AppStore.getCurrentTopologyUrl());
WebapiUtils.getNodeDetails(AppStore.getCurrentTopologyUrl(), AppStore.getSelectedNodeId());
}
};
// breaking circular deps
// require below export to break circular dep
var RouterUtils = require('../utils/router-utils');
var WebapiUtils = require('../utils/web-api-utils');
var AppStore = require('../stores/app-store');
AppDispatcher = require('../dispatcher/app-dispatcher');
ActionTypes = require('../constants/action-types');
RouterUtils = require('../utils/router-utils');
WebapiUtils = require('../utils/web-api-utils');
AppStore = require('../stores/app-store');

104
client/app/scripts/charts/node.js
View File

@@ -1,63 +1,61 @@
var _ = require('lodash');
var React = require('react');
var tweenState = require('react-tween-state');
const React = require('react');
const tweenState = require('react-tween-state');
var NodeColorMixin = require('../mixins/node-color-mixin');
const NodeColorMixin = require('../mixins/node-color-mixin');
var Node = React.createClass({
mixins: [
NodeColorMixin,
tweenState.Mixin
],
const Node = React.createClass({
mixins: [
NodeColorMixin,
tweenState.Mixin
],
getInitialState: function() {
return {
x: 0,
y: 0
};
},
getInitialState: function() {
return {
x: 0,
y: 0
};
},
componentWillMount: function() {
// initial node position when rendered the first time
this.setState({
x: this.props.dx,
y: this.props.dy
});
},
componentWillMount: function() {
// initial node position when rendered the first time
this.setState({
x: this.props.dx,
y: this.props.dy
});
},
componentWillReceiveProps: function(nextProps) {
// animate node transition to next position
this.tweenState('x', {
easing: tweenState.easingTypes.easeInOutQuad,
duration: 500,
endValue: nextProps.dx
});
this.tweenState('y', {
easing: tweenState.easingTypes.easeInOutQuad,
duration: 500,
endValue: nextProps.dy
});
},
componentWillReceiveProps: function(nextProps) {
// animate node transition to next position
this.tweenState('x', {
easing: tweenState.easingTypes.easeInOutQuad,
duration: 500,
endValue: nextProps.dx
});
this.tweenState('y', {
easing: tweenState.easingTypes.easeInOutQuad,
duration: 500,
endValue: nextProps.dy
});
},
render: function() {
var transform = "translate(" + this.getTweeningValue('x') + "," + this.getTweeningValue('y') + ")";
var scale = this.props.scale;
var textOffsetX = 0;
var textOffsetY = scale(0.5) + 18;
var textAngle = _.isUndefined(this.props.angle) ? 0 : -1 * (this.props.angle * 180 / Math.PI - 90);
var color = this.getNodeColor(this.props.label);
var className = this.props.highlighted ? "node highlighted" : "node";
render: function() {
const transform = 'translate(' + this.getTweeningValue('x') + ',' + this.getTweeningValue('y') + ')';
const scale = this.props.scale;
const textOffsetX = 0;
const textOffsetY = scale(0.5) + 18;
const color = this.getNodeColor(this.props.label);
const className = this.props.highlighted ? 'node highlighted' : 'node';
return (
<g className={className} transform={transform} onClick={this.props.onClick} id={this.props.id}>
<circle r={scale(0.5)} className="border" stroke={color}></circle>
<circle r={scale(0.45)} className="shadow"></circle>
<circle r={Math.max(2, scale(0.125))} className="node"></circle>
<text className="node-label" textAnchor="middle" x={textOffsetX} y={textOffsetY}>{this.props.label}</text>
<text className="node-sublabel" textAnchor="middle" x={textOffsetX} y={textOffsetY + 17}>{this.props.subLabel}</text>
</g>
);
}
return (
<g className={className} transform={transform} onClick={this.props.onClick} id={this.props.id}>
<circle r={scale(0.5)} className="border" stroke={color}></circle>
<circle r={scale(0.45)} className="shadow"></circle>
<circle r={Math.max(2, scale(0.125))} className="node"></circle>
<text className="node-label" textAnchor="middle" x={textOffsetX} y={textOffsetY}>{this.props.label}</text>
<text className="node-sublabel" textAnchor="middle" x={textOffsetX} y={textOffsetY + 17}>{this.props.subLabel}</text>
</g>
);
}
});
module.exports = Node;

435
client/app/scripts/charts/nodes-chart.js
View File

@@ -1,234 +1,231 @@
var _ = require('lodash');
var d3 = require('d3');
var React = require('react');
const _ = require('lodash');
const d3 = require('d3');
const React = require('react');
var NodesLayout = require('./nodes-layout');
var Node = require('./node');
const NodesLayout = require('./nodes-layout');
const Node = require('./node');
var MAX_NODES = 100;
var MARGINS = {
top: 130,
left: 40,
right: 40,
bottom: 0
const MARGINS = {
top: 130,
left: 40,
right: 40,
bottom: 0
};
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
const line = d3.svg.line()
.interpolate('basis')
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
var NodesChart = React.createClass({
const NodesChart = React.createClass({
getInitialState: function() {
return {
nodes: {},
edges: {},
nodeScale: 1,
translate: "0,0",
scale: 1,
hasZoomed: false
};
},
getInitialState: function() {
return {
nodes: {},
edges: {},
nodeScale: 1,
translate: '0,0',
scale: 1,
hasZoomed: false
};
},
initNodes: function(topology, prevNodes) {
var centerX = this.props.width / 2;
var centerY = this.props.height / 2;
var nodes = {};
componentWillMount: function() {
this.updateGraphState(this.props);
},
_.each(topology, function(node, id) {
nodes[id] = prevNodes[id] || {};
_.defaults(nodes[id], {
x: centerX,
y: centerY,
textAnchor: 'start'
});
_.assign(nodes[id], {
id: id,
label: node.label_major,
subLabel: node.label_minor,
degree: _.size(node.adjacency)
});
}, this);
componentDidMount: function() {
this.zoom = d3.behavior.zoom()
.scaleExtent([0.1, 2])
.on('zoom', this.zoomed);
return nodes;
},
d3.select('.nodes-chart')
.call(this.zoom);
},
initEdges: function(topology, nodes) {
var edges = {};
_.each(topology, function(node) {
_.each(node.adjacency, function(adjacent) {
var edge = [node.id, adjacent],
edgeId = edge.join('-');
if (!edges[edgeId]) {
var source = nodes[edge[0]];
var target = nodes[edge[1]];
if(!source || !target) {
console.error("Missing edge node", edge[0], source, edge[1], target);
}
edges[edgeId] = {
id: edgeId,
value: 1,
source: source,
target: target
};
}
});
}, this);
return edges;
},
getNodes: function(nodes, scale) {
return _.map(nodes, function (node) {
var highlighted = _.includes(this.props.highlightedNodes, node.id);
return (
<Node
highlighted={highlighted}
onClick={this.props.onNodeClick}
key={node.id}
id={node.id}
label={node.label}
subLabel={node.subLabel}
scale={scale}
dx={node.x}
dy={node.y}
/>
);
}, this);
},
getEdges: function(edges, scale) {
return _.map(edges, function(edge) {
return (
<path className="link" d={line(edge.points)} key={edge.id} />
);
});
},
getTopologyFingerprint: function(topology) {
var nodes = _.keys(topology).sort();
var fingerprint = [];
_.each(topology, function(node) {
fingerprint.push(node.id);
if (node.adjacency) {
fingerprint.push(node.adjacency.join(','));
}
});
return fingerprint.join(';');
},
updateGraphState: function(props) {
var nodes = this.initNodes(props.nodes, this.state.nodes);
var edges = this.initEdges(props.nodes, nodes);
var expanse = Math.min(props.height, props.width);
var nodeSize = expanse / 2;
var n = _.size(props.nodes);
var nodeScale = d3.scale.linear().range([0, nodeSize/Math.pow(n, 0.7)]);
var layoutId = 'layered node chart';
console.time(layoutId);
var graph = NodesLayout.doLayout(
nodes,
edges,
props.width,
props.height,
nodeScale,
MARGINS
);
console.timeEnd(layoutId);
// adjust layout based on viewport
var xFactor = (props.width - MARGINS.left - MARGINS.right) / graph.width;
var yFactor = props.height / graph.height;
var zoomFactor = Math.min(xFactor, yFactor);
var zoomScale = this.state.scale;
if(this.zoom && !this.state.hasZoomed && zoomFactor > 0 && zoomFactor < 1) {
zoomScale = zoomFactor;
// saving in d3's behavior cache
this.zoom.scale(zoomFactor);
}
this.setState({
nodes: nodes,
edges: edges,
nodeScale: nodeScale,
scale: zoomScale
});
},
componentWillMount: function() {
this.updateGraphState(this.props);
},
componentDidMount: function() {
this.zoom = d3.behavior.zoom()
.scaleExtent([0.1, 2])
.on('zoom', this.zoomed);
d3.select('.nodes-chart')
.call(this.zoom);
},
componentWillUnmount: function() {
// undoing .call(zoom)
d3.select('.nodes-chart')
.on("mousedown.zoom", null)
.on("onwheel", null)
.on("onmousewheel", null)
.on("dblclick.zoom", null)
.on("touchstart.zoom", null);
},
componentWillReceiveProps: function(nextProps) {
if (this.getTopologyFingerprint(nextProps.nodes) !== this.getTopologyFingerprint(this.props.nodes)) {
this.setState({
nodes: {},
edges: {}
});
}
this.updateGraphState(nextProps);
},
zoomed: function() {
this.setState({
hasZoomed: true,
translate: d3.event.translate,
scale: d3.event.scale
});
},
render: function() {
var nodeElements = this.getNodes(this.state.nodes, this.state.nodeScale);
var edgeElements = this.getEdges(this.state.edges, this.state.nodeScale);
var transform = 'translate(' + this.state.translate + ')' +
' scale(' + this.state.scale + ')';
return (
<svg width="100%" height="100%" className="nodes-chart">
<g className="canvas" transform={transform}>
<g className="edges">
{edgeElements}
</g>
<g className="nodes">
{nodeElements}
</g>
</g>
</svg>
);
componentWillReceiveProps: function(nextProps) {
if (this.getTopologyFingerprint(nextProps.nodes) !== this.getTopologyFingerprint(this.props.nodes)) {
this.setState({
nodes: {},
edges: {}
});
}
this.updateGraphState(nextProps);
},
componentWillUnmount: function() {
// undoing .call(zoom)
d3.select('.nodes-chart')
.on('mousedown.zoom', null)
.on('onwheel', null)
.on('onmousewheel', null)
.on('dblclick.zoom', null)
.on('touchstart.zoom', null);
},
getTopologyFingerprint: function(topology) {
const fingerprint = [];
_.each(topology, function(node) {
fingerprint.push(node.id);
if (node.adjacency) {
fingerprint.push(node.adjacency.join(','));
}
});
return fingerprint.join(';');
},
getGraphNodes: function(nodes, scale) {
return _.map(nodes, function(node) {
const highlighted = _.includes(this.props.highlightedNodes, node.id);
return (
<Node
highlighted={highlighted}
onClick={this.props.onNodeClick}
key={node.id}
id={node.id}
label={node.label}
subLabel={node.subLabel}
scale={scale}
dx={node.x}
dy={node.y}
/>
);
}, this);
},
getGraphEdges: function(edges) {
return _.map(edges, function(edge) {
return (
<path className="link" d={line(edge.points)} key={edge.id} />
);
});
},
render: function() {
const nodeElements = this.getGraphNodes(this.state.nodes, this.state.nodeScale);
const edgeElements = this.getGraphEdges(this.state.edges, this.state.nodeScale);
const transform = 'translate(' + this.state.translate + ')' +
' scale(' + this.state.scale + ')';
return (
<svg width="100%" height="100%" className="nodes-chart">
<g className="canvas" transform={transform}>
<g className="edges">
{edgeElements}
</g>
<g className="nodes">
{nodeElements}
</g>
</g>
</svg>
);
},
initNodes: function(topology, prevNodes) {
const centerX = this.props.width / 2;
const centerY = this.props.height / 2;
const nodes = {};
_.each(topology, function(node, id) {
nodes[id] = prevNodes[id] || {};
_.defaults(nodes[id], {
x: centerX,
y: centerY,
textAnchor: 'start'
});
_.assign(nodes[id], {
id: id,
label: node.label_major,
subLabel: node.label_minor,
degree: _.size(node.adjacency)
});
}, this);
return nodes;
},
initEdges: function(topology, nodes) {
const edges = {};
_.each(topology, function(node) {
_.each(node.adjacency, function(adjacent) {
const edge = [node.id, adjacent];
const edgeId = edge.join('-');
if (!edges[edgeId]) {
const source = nodes[edge[0]];
const target = nodes[edge[1]];
if (!source || !target) {
console.error('Missing edge node', edge[0], source, edge[1], target);
}
edges[edgeId] = {
id: edgeId,
value: 1,
source: source,
target: target
};
}
});
}, this);
return edges;
},
updateGraphState: function(props) {
const nodes = this.initNodes(props.nodes, this.state.nodes);
const edges = this.initEdges(props.nodes, nodes);
const expanse = Math.min(props.height, props.width);
const nodeSize = expanse / 2;
const n = _.size(props.nodes);
const nodeScale = d3.scale.linear().range([0, nodeSize / Math.pow(n, 0.7)]);
const layoutId = 'layered node chart';
console.time(layoutId);
const graph = NodesLayout.doLayout(
nodes,
edges,
props.width,
props.height,
nodeScale,
MARGINS
);
console.timeEnd(layoutId);
// adjust layout based on viewport
const xFactor = (props.width - MARGINS.left - MARGINS.right) / graph.width;
const yFactor = props.height / graph.height;
const zoomFactor = Math.min(xFactor, yFactor);
let zoomScale = this.state.scale;
if (this.zoom && !this.state.hasZoomed && zoomFactor > 0 && zoomFactor < 1) {
zoomScale = zoomFactor;
// saving in d3's behavior cache
this.zoom.scale(zoomFactor);
}
this.setState({
nodes: nodes,
edges: edges,
nodeScale: nodeScale,
scale: zoomScale
});
},
zoomed: function() {
this.setState({
hasZoomed: true,
translate: d3.event.translate,
scale: d3.event.scale
});
}
});
module.exports = NodesChart;

122
client/app/scripts/charts/nodes-layout.js
View File

@@ -1,73 +1,73 @@
var dagre = require('dagre');
var _ = require('lodash');
const dagre = require('dagre');
const _ = require('lodash');
var MAX_NODES = 100;
const MAX_NODES = 100;
var doLayout = function(nodes, edges, width, height, scale, margins) {
var offsetX = 0 + margins.left;
var offsetY = 0 + margins.top;
var g = new dagre.graphlib.Graph({});
const doLayout = function(nodes, edges, width, height, scale, margins) {
let offsetX = 0 + margins.left;
let offsetY = 0 + margins.top;
const g = new dagre.graphlib.Graph({});
if (_.size(nodes) > MAX_NODES) {
console.error('Too many nodes for graph layout engine. Limit: ' + MAX_NODES);
return;
}
if (_.size(nodes) > MAX_NODES) {
console.error('Too many nodes for graph layout engine. Limit: ' + MAX_NODES);
return null;
}
// configure node margins
// configure node margins
g.setGraph({
nodesep: scale(2.5),
ranksep: scale(2.5)
g.setGraph({
nodesep: scale(2.5),
ranksep: scale(2.5)
});
// add nodes and edges to layout engine
_.each(nodes, function(node) {
g.setNode(node.id, {id: node.id, width: scale(0.75), height: scale(0.75)});
});
_.each(edges, function(edge) {
const virtualNodes = edge.source.id === edge.target.id ? 1 : 0;
g.setEdge(edge.source.id, edge.target.id, {id: edge.id, minlen: virtualNodes});
});
dagre.layout(g);
const graph = g.graph();
// shifting graph coordinates to center
if (graph.width < width) {
offsetX = (width - graph.width) / 2 + margins.left;
}
if (graph.height < height) {
offsetY = (height - graph.height) / 2 + margins.top;
}
// apply coordinates to nodes and edges
g.nodes().forEach(function(id) {
const node = nodes[id];
const graphNode = g.node(id);
node.x = graphNode.x + offsetX;
node.y = graphNode.y + offsetY;
});
g.edges().forEach(function(id) {
const graphEdge = g.edge(id);
const edge = edges[graphEdge.id];
_.each(graphEdge.points, function(point) {
point.x += offsetX;
point.y += offsetY;
});
edge.points = graphEdge.points;
});
// add nodes and edges to layout engine
// return object with width and height of layout
_.each(nodes, function(node) {
g.setNode(node.id, {id: node.id, width: scale(0.75), height: scale(0.75)});
});
_.each(edges, function(edge) {
var virtualNodes = edge.source.id === edge.target.id ? 1 : 0;
g.setEdge(edge.source.id, edge.target.id, {id: edge.id, minlen: virtualNodes});
});
dagre.layout(g);
var graph = g.graph();
// shifting graph coordinates to center
if (graph.width < width) {
offsetX = (width - graph.width) / 2 + margins.left;
}
if (graph.height < height) {
offsetY = (height - graph.height) / 2 + margins.top;
}
// apply coordinates to nodes and edges
g.nodes().forEach(function(id) {
var node = nodes[id];
var graphNode = g.node(id);
node.x = graphNode.x + offsetX;
node.y = graphNode.y + offsetY;
});
g.edges().forEach(function(id) {
var graphEdge = g.edge(id);
var edge = edges[graphEdge.id];
_.each(graphEdge.points, function(point) {
point.x += offsetX;
point.y += offsetY;
});
edge.points = graphEdge.points;
});
// return object with width and height of layout
return graph;
return graph;
};
module.exports = {
doLayout: doLayout
doLayout: doLayout
};

115
client/app/scripts/components/app.js
View File

@@ -1,79 +1,76 @@
/** @jsx React.DOM */
const React = require('react');
var React = require('react');
var _ = require('lodash');
var Logo = require('./logo');
var AppStore = require('../stores/app-store');
var Groupings = require('./groupings.js');
var Status = require('./status.js');
var Topologies = require('./topologies.js');
var WebapiUtils = require('../utils/web-api-utils');
var AppActions = require('../actions/app-actions');
var Details = require('./details');
var Nodes = require('./nodes');
var RouterUtils = require('../utils/router-utils');
const Logo = require('./logo');
const AppStore = require('../stores/app-store');
const Groupings = require('./groupings.js');
const Status = require('./status.js');
const Topologies = require('./topologies.js');
const WebapiUtils = require('../utils/web-api-utils');
const AppActions = require('../actions/app-actions');
const Details = require('./details');
const Nodes = require('./nodes');
const RouterUtils = require('../utils/router-utils');
var ESC_KEY_CODE = 27;
const ESC_KEY_CODE = 27;
function getStateFromStores() {
return {
currentTopology: AppStore.getCurrentTopology(),
connectionState: AppStore.getConnectionState(),
currentGrouping: AppStore.getCurrentGrouping(),
selectedNodeId: AppStore.getSelectedNodeId(),
nodeDetails: AppStore.getNodeDetails(),
nodes: AppStore.getNodes(),
topologies: AppStore.getTopologies()
}
return {
currentTopology: AppStore.getCurrentTopology(),
connectionState: AppStore.getConnectionState(),
currentGrouping: AppStore.getCurrentGrouping(),
selectedNodeId: AppStore.getSelectedNodeId(),
nodeDetails: AppStore.getNodeDetails(),
nodes: AppStore.getNodes(),
topologies: AppStore.getTopologies()
};
}
var App = React.createClass({
const App = React.createClass({
getInitialState: function() {
return getStateFromStores();
},
getInitialState: function() {
return getStateFromStores();
},
componentDidMount: function() {
AppStore.on(AppStore.CHANGE_EVENT, this.onChange);
window.addEventListener('keyup', this.onKeyPress);
componentDidMount: function() {
AppStore.on(AppStore.CHANGE_EVENT, this.onChange);
window.addEventListener('keyup', this.onKeyPress);
RouterUtils.getRouter().start({hashbang: true});
WebapiUtils.getTopologies();
},
RouterUtils.getRouter().start({hashbang: true});
WebapiUtils.getTopologies();
},
onChange: function() {
this.setState(getStateFromStores());
},
onChange: function() {
this.setState(getStateFromStores());
},
onKeyPress: function(ev) {
if (ev.keyCode === ESC_KEY_CODE) {
AppActions.hitEsc();
}
},
onKeyPress: function(ev) {
if (ev.keyCode === ESC_KEY_CODE) {
AppActions.hitEsc();
}
},
render: function() {
var showingDetails = this.state.selectedNodeId;
render: function() {
const showingDetails = this.state.selectedNodeId;
return (
<div>
{showingDetails && <Details nodes={this.state.nodes}
nodeId={this.state.selectedNodeId}
details={this.state.nodeDetails} /> }
return (
<div>
{showingDetails && <Details nodes={this.state.nodes}
nodeId={this.state.selectedNodeId}
details={this.state.nodeDetails} /> }
<div className="header">
<Logo />
<Topologies topologies={this.state.topologies} currentTopology={this.state.currentTopology} />
<Groupings active={this.state.currentGrouping} currentTopology={this.state.currentTopology} />
<Status connectionState={this.state.connectionState} />
</div>
<div className="header">
<Logo />
<Topologies topologies={this.state.topologies} currentTopology={this.state.currentTopology} />
<Groupings active={this.state.currentGrouping} currentTopology={this.state.currentTopology} />
<Status connectionState={this.state.connectionState} />
</div>
<Nodes nodes={this.state.nodes} />
</div>
);
}
<Nodes nodes={this.state.nodes} />
</div>
);
}
});

49
client/app/scripts/components/details.js
View File

@@ -1,34 +1,31 @@
/** @jsx React.DOM */
const React = require('react');
const mui = require('material-ui');
const Paper = mui.Paper;
var React = require('react');
var _ = require('lodash');
var mui = require('material-ui');
var Paper = mui.Paper;
var IconButton = mui.IconButton;
const AppActions = require('../actions/app-actions');
const NodeDetails = require('./node-details');
var AppActions = require('../actions/app-actions');
var NodeDetails = require('./node-details');
const Details = React.createClass({
var Details = React.createClass({
render: function() {
return (
<div id="details">
<Paper zDepth={3}>
<div className="details-tools">
<span className="fa fa-close" onClick={this.handleClickClose} />
</div>
<NodeDetails details={this.props.details} />
</Paper>
</div>
);
},
handleClickClose: function(ev) {
ev.preventDefault();
AppActions.clickCloseDetails();
},
handleClickClose: function(ev) {
ev.preventDefault();
AppActions.clickCloseDetails();
}
render: function() {
return (
<div id="details">
<Paper zDepth={3}>
<div className="details-tools">
<span className="fa fa-close" onClick={this.handleClickClose} />
</div>
<NodeDetails details={this.props.details} />
</Paper>
</div>
);
}
});
module.exports = Details;
module.exports = Details;

146
client/app/scripts/components/explorer.js
View File

@@ -1,95 +1,87 @@
/** @jsx React.DOM */
const React = require('react');
const _ = require('lodash');
var React = require('react');
var _ = require('lodash');
const NodesChart = require('../charts/nodes-chart');
const NodeDetails = require('./node-details');
var NodesChart = require('../charts/nodes-chart');
var NodeDetails = require('./node-details');
const marginBottom = 64;
const marginTop = 64;
const marginLeft = 36;
const marginRight = 36;
var marginBottom = 64;
var marginTop = 64;
var marginLeft = 36;
var marginRight = 36;
const Explorer = React.createClass({
var Explorer = React.createClass({
getInitialState: function() {
return {
layout: 'solar',
width: window.innerWidth - marginLeft - marginRight,
height: window.innerHeight - marginBottom - marginTop
};
},
getInitialState: function() {
return {
layout: 'solar',
width: window.innerWidth - marginLeft - marginRight,
height: window.innerHeight - marginBottom - marginTop
};
},
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
},
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
},
getSubTopology: function(topology) {
const subTopology = {};
const nodeSet = [];
setDimensions: function() {
this.setState({
height: window.innerHeight - marginBottom - marginTop,
width: window.innerWidth - marginLeft - marginRight
});
},
_.each(this.props.expandedNodes, function(nodeId) {
if (topology[nodeId]) {
subTopology[nodeId] = topology[nodeId];
nodeSet = _.union(subTopology[nodeId].adjacency, nodeSet);
_.each(subTopology[nodeId].adjacency, function(adjacentId) {
const node = _.assign({}, topology[adjacentId]);
handleResize: function() {
this.setDimensions();
},
subTopology[adjacentId] = node;
});
}
});
getSubTopology: function(topology) {
var subTopology = {};
var nodeSet = [];
// weed out edges
_.each(subTopology, function(node) {
node.adjacency = _.intersection(node.adjacency, nodeSet);
});
_.each(this.props.expandedNodes, function(nodeId) {
if (topology[nodeId]) {
subTopology[nodeId] = topology[nodeId];
nodeSet = _.union(subTopology[nodeId].adjacency, nodeSet);
_.each(subTopology[nodeId].adjacency, function(adjacentId) {
var node = _.assign({}, topology[adjacentId]);
return subTopology;
},
subTopology[adjacentId] = node;
});
}
});
render: function() {
const subTopology = this.getSubTopology(this.props.nodes);
// weed out edges
_.each(subTopology, function(node) {
node.adjacency = _.intersection(node.adjacency, nodeSet);
});
return (
<div id="explorer">
<NodeDetails details={this.props.details} />
<div className="graph">
<NodesChart
layout={this.state.layout}
nodes={subTopology}
highlightedNodes={this.props.expandedNodes}
width={this.state.width}
height={this.state.height}
context="explorer"
/>
</div>
</div>
);
},
return subTopology;
},
setDimensions: function() {
this.setState({
height: window.innerHeight - marginBottom - marginTop,
width: window.innerWidth - marginLeft - marginRight
});
},
onNodeClick: function(ev) {
var nodeId = ev.currentTarget.id;
AppActions.clickNode(nodeId);
},
render: function() {
var subTopology = this.getSubTopology(this.props.nodes);
return (
<div id="explorer">
<NodeDetails details={this.props.details} />
<div className="graph">
<NodesChart
onNodeClick={this.onNodeClick}
layout={this.state.layout}
nodes={subTopology}
highlightedNodes={this.props.expandedNodes}
width={this.state.width}
height={this.state.height}
context="explorer"
/>
</div>
</div>
);
}
handleResize: function() {
this.setDimensions();
}
});
module.exports = Explorer;
module.exports = Explorer;

99
client/app/scripts/components/groupings.js
View File

@@ -1,67 +1,64 @@
/** @jsx React.DOM */
const React = require('react');
const _ = require('lodash');
var React = require('react');
var _ = require('lodash');
const AppActions = require('../actions/app-actions');
var AppActions = require('../actions/app-actions');
var AppStore = require('../stores/app-store');
var GROUPINGS = [{
id: 'none',
iconClass: 'fa fa-th',
needsTopology: false
const GROUPINGS = [{
id: 'none',
iconClass: 'fa fa-th',
needsTopology: false
}, {
id: 'grouped',
iconClass: 'fa fa-th-large',
needsTopology: 'grouped_url'
id: 'grouped',
iconClass: 'fa fa-th-large',
needsTopology: 'grouped_url'
}];
var Groupings = React.createClass({
const Groupings = React.createClass({
onGroupingClick: function(ev) {
ev.preventDefault();
AppActions.clickGrouping(ev.currentTarget.getAttribute('rel'));
},
onGroupingClick: function(ev) {
ev.preventDefault();
AppActions.clickGrouping(ev.currentTarget.getAttribute('rel'));
},
isGroupingSupportedByTopology: function(topology, grouping) {
return !grouping.needsTopology || topology && topology[grouping.needsTopology];
},
getGroupingsSupportedByTopology: function(topology) {
return _.filter(GROUPINGS, _.partial(this.isGroupingSupportedByTopology, topology));
},
getGroupingsSupportedByTopology: function(topology) {
return _.filter(GROUPINGS, _.partial(this.isGroupingSupportedByTopology, topology));
},
renderGrouping: function(grouping, activeGroupingId) {
let className = 'groupings-item';
const isSupportedByTopology = this.isGroupingSupportedByTopology(this.props.currentTopology, grouping);
renderGrouping: function(grouping, activeGroupingId) {
var className = "groupings-item",
isSupportedByTopology = this.isGroupingSupportedByTopology(this.props.currentTopology, grouping);
if (grouping.id === activeGroupingId) {
className += ' groupings-item-active';
} else if (!isSupportedByTopology) {
className += ' groupings-item-disabled';
} else {
className += ' groupings-item-default';
}
if (grouping.id === activeGroupingId) {
className += " groupings-item-active";
} else if (!isSupportedByTopology) {
className += " groupings-item-disabled";
} else {
className += " groupings-item-default";
}
return (
<div className={className} key={grouping.id} rel={grouping.id} onClick={isSupportedByTopology && this.onGroupingClick}>
<span className={grouping.iconClass} />
</div>
);
},
return (
<div className={className} key={grouping.id} rel={grouping.id} onClick={isSupportedByTopology && this.onGroupingClick}>
<span className={grouping.iconClass} />
</div>
);
},
render: function() {
const activeGrouping = this.props.active;
const isGroupingSupported = _.size(this.getGroupingsSupportedByTopology(this.props.currentTopology)) > 1;
render: function() {
var activeGrouping = this.props.active,
isGroupingSupported = _.size(this.getGroupingsSupportedByTopology(this.props.currentTopology)) > 1;
return (
<div className="groupings">
{isGroupingSupported && GROUPINGS.map(function(grouping) {
return this.renderGrouping(grouping, activeGrouping);
}, this)}
</div>
);
},
return (
<div className="groupings">
{isGroupingSupported && GROUPINGS.map(function(grouping) {
return this.renderGrouping(grouping, activeGrouping);
}, this)}
</div>
);
}
isGroupingSupportedByTopology: function(topology, grouping) {
return !grouping.needsTopology || topology && topology[grouping.needsTopology];
}
});

122
client/app/scripts/components/logo.js
View File

@@ -1,67 +1,65 @@
/** @jsx React.DOM */
const React = require('react');
var React = require('react');
const Logo = React.createClass({
var Logo = React.createClass({
render: function() {
return (
<div className="logo">
<svg width="100%" height="100%" viewBox="0 0 1089 217">
<path fill="#32324B" d="M114.937,118.165l75.419-67.366c-5.989-4.707-12.71-8.52-19.981-11.211l-55.438,49.52V118.165z"/>
<path fill="#32324B" d="M93.265,108.465l-20.431,18.25c1.86,7.57,4.88,14.683,8.87,21.135l11.561-10.326V108.465z"/>
<path fill="#00D2FF" d="M155.276,53.074V35.768C151.815,35.27,148.282,35,144.685,35c-3.766,0-7.465,0.286-11.079,0.828v36.604
L155.276,53.074z"/>
<path fill="#00D2FF" d="M155.276,154.874V82.133l-21.671,19.357v80.682c3.614,0.543,7.313,0.828,11.079,0.828
c4.41,0,8.723-0.407,12.921-1.147l58.033-51.838c1.971-6.664,3.046-13.712,3.046-21.015c0-3.439-0.254-6.817-0.708-10.132
L155.276,154.874z"/>
<path fill="#FF4B19" d="M155.276,133.518l58.14-51.933c-2.77-6.938-6.551-13.358-11.175-19.076l-46.965,41.951V133.518z"/>
<path fill="#FF4B19" d="M133.605,123.817l-18.668,16.676V41.242c-8.086,3.555-15.409,8.513-21.672,14.567V162.19
c4.885,4.724,10.409,8.787,16.444,12.03l23.896-21.345V123.817z"/>
<polygon fill="#32324B" points="325.563,124.099 339.389,72.22 357.955,72.22 337.414,144.377 315.556,144.377 303.311,95.79
291.065,144.377 269.207,144.377 248.666,72.22 267.232,72.22 281.058,124.099 294.752,72.22 311.869,72.22 "/>
<path fill="#32324B" d="M426.429,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
c0-24.622,15.406-37.395,35.025-37.395c21.726,0,33.182,15.933,33.182,37.263v3.819h-49.772c0,8.031,3.291,18.17,16.327,18.17
c7.242,0,12.904-3.555,14.353-10.27L426.429,120.676z M408.654,99.608c-0.659-10.008-7.11-13.694-14.484-13.694
c-8.427,0-14.879,5.135-15.801,13.694H408.654z"/>
<path fill="#32324B" d="M480.628,97.634v-2.502c0-5.662-2.37-9.351-13.036-9.351c-13.298,0-13.694,7.375-13.694,9.877h-17.117
c0-10.666,4.477-24.359,31.338-24.359c25.676,0,30.285,12.771,30.285,23.174v39.766c0,2.897,0.131,5.267,0.395,7.11l0.527,3.028
h-18.172v-7.241c-5.134,5.134-12.245,8.163-22.384,8.163c-14.221,0-25.018-8.296-25.018-22.648c0-16.59,15.67-20.146,21.99-21.199
L480.628,97.634z M480.628,111.195l-6.979,1.054c-3.819,0.658-8.427,1.315-11.192,1.843c-3.029,0.527-5.662,1.186-7.637,2.765
c-1.844,1.449-2.765,3.425-2.765,5.926c0,2.107,0.79,8.69,10.666,8.69c5.793,0,10.928-2.105,13.693-4.872
c3.556-3.555,4.214-8.032,4.214-11.587V111.195z"/>
<polygon fill="#32324B" points="549.495,144.377 525.399,144.377 501.698,72.221 521.186,72.221 537.775,127.392 554.499,72.221
573.459,72.221 "/>
<path fill="#32324B" d="M641.273,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
c0-24.622,15.406-37.395,35.025-37.395c21.726,0,33.182,15.933,33.182,37.263v3.819h-49.772c0,8.031,3.291,18.17,16.327,18.17
c7.242,0,12.904-3.555,14.354-10.27L641.273,120.676z M623.498,99.608c-0.659-10.008-7.109-13.694-14.483-13.694
c-8.428,0-14.88,5.135-15.802,13.694H623.498z"/>
<path fill="#32324B" d="M682.976,80.873c-7.524,0-16.896,2.376-16.896,10.692c0,17.952,46.201,1.452,46.201,30.229
c0,9.637-5.676,22.309-30.229,22.309c-19.009,0-27.721-9.636-28.249-22.44h11.881c0.264,7.788,5.147,13.332,17.688,13.332
c14.52,0,17.952-6.204,17.952-12.54c0-13.332-24.421-7.788-37.753-15.181c-4.885-2.771-8.316-7.128-8.316-15.048
c0-11.616,10.824-20.461,27.853-20.461c20.989,0,27.193,12.145,27.589,20.196h-11.484
C698.685,83.381,691.556,80.873,682.976,80.873z"/>
<path fill="#32324B" d="M756.233,134.994c10.429,0,17.953-5.939,19.009-16.632h10.957c-1.98,17.028-13.597,25.74-29.966,25.74
c-18.744,0-32.076-12.012-32.076-35.905c0-23.76,13.464-36.433,32.209-36.433c16.104,0,27.721,8.712,29.568,25.213h-10.956
c-1.452-11.353-9.24-16.104-18.877-16.104c-12.012,0-20.856,8.448-20.856,27.324C735.245,127.471,744.485,134.994,756.233,134.994z
"/>
<path fill="#32324B" d="M830.418,144.103c-19.141,0-32.341-12.145-32.341-36.169c0-23.893,13.2-36.169,32.341-36.169
c19.009,0,32.209,12.145,32.209,36.169C862.627,132.091,849.427,144.103,830.418,144.103z M830.418,134.994
c12.145,0,21.12-7.392,21.12-27.061c0-19.536-8.976-27.061-21.12-27.061c-12.276,0-21.253,7.393-21.253,27.061
C809.165,127.603,818.142,134.994,830.418,134.994z"/>
<path fill="#32324B" d="M888.629,72.688v10.692c3.96-6.732,12.54-11.616,22.969-11.616c19.009,0,30.757,12.673,30.757,36.169
c0,23.629-12.145,36.169-31.152,36.169c-10.429,0-18.745-4.224-22.573-11.22v35.641h-10.824V72.688H888.629z M910.409,134.994
c12.145,0,20.857-7.392,20.857-27.061c0-19.536-8.713-27.061-20.857-27.061c-12.275,0-21.912,7.393-21.912,27.061
C888.497,127.603,898.134,134.994,910.409,134.994z"/>
<path fill="#32324B" d="M1016.801,119.022c-1.452,12.408-10.032,25.08-30.229,25.08c-18.745,0-32.341-12.804-32.341-36.037
c0-21.912,13.464-36.301,32.209-36.301c19.8,0,30.757,14.784,30.757,38.018h-51.878c0.265,13.332,5.809,25.212,21.385,25.212
c11.484,0,18.217-7.128,19.141-16.104L1016.801,119.022z M1005.448,101.201c-1.056-14.916-9.636-20.328-19.272-20.328
c-10.824,0-19.141,7.26-20.46,20.328H1005.448z"/>
</svg>
</div>
);
}
render: function() {
return (
<div className="logo">
<svg width="100%" height="100%" viewBox="0 0 1089 217">
<path fill="#32324B" d="M114.937,118.165l75.419-67.366c-5.989-4.707-12.71-8.52-19.981-11.211l-55.438,49.52V118.165z"/>
<path fill="#32324B" d="M93.265,108.465l-20.431,18.25c1.86,7.57,4.88,14.683,8.87,21.135l11.561-10.326V108.465z"/>
<path fill="#00D2FF" d="M155.276,53.074V35.768C151.815,35.27,148.282,35,144.685,35c-3.766,0-7.465,0.286-11.079,0.828v36.604
L155.276,53.074z"/>
<path fill="#00D2FF" d="M155.276,154.874V82.133l-21.671,19.357v80.682c3.614,0.543,7.313,0.828,11.079,0.828
c4.41,0,8.723-0.407,12.921-1.147l58.033-51.838c1.971-6.664,3.046-13.712,3.046-21.015c0-3.439-0.254-6.817-0.708-10.132
L155.276,154.874z"/>
<path fill="#FF4B19" d="M155.276,133.518l58.14-51.933c-2.77-6.938-6.551-13.358-11.175-19.076l-46.965,41.951V133.518z"/>
<path fill="#FF4B19" d="M133.605,123.817l-18.668,16.676V41.242c-8.086,3.555-15.409,8.513-21.672,14.567V162.19
c4.885,4.724,10.409,8.787,16.444,12.03l23.896-21.345V123.817z"/>
<polygon fill="#32324B" points="325.563,124.099 339.389,72.22 357.955,72.22 337.414,144.377 315.556,144.377 303.311,95.79
291.065,144.377 269.207,144.377 248.666,72.22 267.232,72.22 281.058,124.099 294.752,72.22 311.869,72.22 "/>
<path fill="#32324B" d="M426.429,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
c0-24.622,15.406-37.395,35.025-37.395c21.726,0,33.182,15.933,33.182,37.263v3.819h-49.772c0,8.031,3.291,18.17,16.327,18.17
c7.242,0,12.904-3.555,14.353-10.27L426.429,120.676z M408.654,99.608c-0.659-10.008-7.11-13.694-14.484-13.694
c-8.427,0-14.879,5.135-15.801,13.694H408.654z"/>
<path fill="#32324B" d="M480.628,97.634v-2.502c0-5.662-2.37-9.351-13.036-9.351c-13.298,0-13.694,7.375-13.694,9.877h-17.117
c0-10.666,4.477-24.359,31.338-24.359c25.676,0,30.285,12.771,30.285,23.174v39.766c0,2.897,0.131,5.267,0.395,7.11l0.527,3.028
h-18.172v-7.241c-5.134,5.134-12.245,8.163-22.384,8.163c-14.221,0-25.018-8.296-25.018-22.648c0-16.59,15.67-20.146,21.99-21.199
L480.628,97.634z M480.628,111.195l-6.979,1.054c-3.819,0.658-8.427,1.315-11.192,1.843c-3.029,0.527-5.662,1.186-7.637,2.765
c-1.844,1.449-2.765,3.425-2.765,5.926c0,2.107,0.79,8.69,10.666,8.69c5.793,0,10.928-2.105,13.693-4.872
c3.556-3.555,4.214-8.032,4.214-11.587V111.195z"/>
<polygon fill="#32324B" points="549.495,144.377 525.399,144.377 501.698,72.221 521.186,72.221 537.775,127.392 554.499,72.221
573.459,72.221 "/>
<path fill="#32324B" d="M641.273,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
c0-24.622,15.406-37.395,35.025-37.395c21.726,0,33.182,15.933,33.182,37.263v3.819h-49.772c0,8.031,3.291,18.17,16.327,18.17
c7.242,0,12.904-3.555,14.354-10.27L641.273,120.676z M623.498,99.608c-0.659-10.008-7.109-13.694-14.483-13.694
c-8.428,0-14.88,5.135-15.802,13.694H623.498z"/>
<path fill="#32324B" d="M682.976,80.873c-7.524,0-16.896,2.376-16.896,10.692c0,17.952,46.201,1.452,46.201,30.229
c0,9.637-5.676,22.309-30.229,22.309c-19.009,0-27.721-9.636-28.249-22.44h11.881c0.264,7.788,5.147,13.332,17.688,13.332
c14.52,0,17.952-6.204,17.952-12.54c0-13.332-24.421-7.788-37.753-15.181c-4.885-2.771-8.316-7.128-8.316-15.048
c0-11.616,10.824-20.461,27.853-20.461c20.989,0,27.193,12.145,27.589,20.196h-11.484
C698.685,83.381,691.556,80.873,682.976,80.873z"/>
<path fill="#32324B" d="M756.233,134.994c10.429,0,17.953-5.939,19.009-16.632h10.957c-1.98,17.028-13.597,25.74-29.966,25.74
c-18.744,0-32.076-12.012-32.076-35.905c0-23.76,13.464-36.433,32.209-36.433c16.104,0,27.721,8.712,29.568,25.213h-10.956
c-1.452-11.353-9.24-16.104-18.877-16.104c-12.012,0-20.856,8.448-20.856,27.324C735.245,127.471,744.485,134.994,756.233,134.994z
"/>
<path fill="#32324B" d="M830.418,144.103c-19.141,0-32.341-12.145-32.341-36.169c0-23.893,13.2-36.169,32.341-36.169
c19.009,0,32.209,12.145,32.209,36.169C862.627,132.091,849.427,144.103,830.418,144.103z M830.418,134.994
c12.145,0,21.12-7.392,21.12-27.061c0-19.536-8.976-27.061-21.12-27.061c-12.276,0-21.253,7.393-21.253,27.061
C809.165,127.603,818.142,134.994,830.418,134.994z"/>
<path fill="#32324B" d="M888.629,72.688v10.692c3.96-6.732,12.54-11.616,22.969-11.616c19.009,0,30.757,12.673,30.757,36.169
c0,23.629-12.145,36.169-31.152,36.169c-10.429,0-18.745-4.224-22.573-11.22v35.641h-10.824V72.688H888.629z M910.409,134.994
c12.145,0,20.857-7.392,20.857-27.061c0-19.536-8.713-27.061-20.857-27.061c-12.275,0-21.912,7.393-21.912,27.061
C888.497,127.603,898.134,134.994,910.409,134.994z"/>
<path fill="#32324B" d="M1016.801,119.022c-1.452,12.408-10.032,25.08-30.229,25.08c-18.745,0-32.341-12.804-32.341-36.037
c0-21.912,13.464-36.301,32.209-36.301c19.8,0,30.757,14.784,30.757,38.018h-51.878c0.265,13.332,5.809,25.212,21.385,25.212
c11.484,0,18.217-7.128,19.141-16.104L1016.801,119.022z M1005.448,101.201c-1.056-14.916-9.636-20.328-19.272-20.328
c-10.824,0-19.141,7.26-20.46,20.328H1005.448z"/>
</svg>
</div>
);
}
});
module.exports = Logo;
module.exports = Logo;

51
client/app/scripts/components/node-details-table.js
View File

@@ -1,34 +1,31 @@
/** @jsx React.DOM */
const React = require('react');
var React = require('react');
var _ = require('lodash');
const NodeDetailsTable = React.createClass({
var NodeDetailsTable = React.createClass({
render: function() {
const isNumeric = this.props.isNumeric;
render: function() {
var isNumeric = this.props.isNumeric;
return (
<div className="node-details-table">
<h4 className="node-details-table-title">
{this.props.title}
</h4>
return (
<div className="node-details-table">
<h4 className="node-details-table-title">
{this.props.title}
</h4>
{this.props.rows.map(function(row) {
return (
<div className="node-details-table-row">
<div className="node-details-table-row-key">{row.key}</div>
{isNumeric && <div className="node-details-table-row-value-scalar">{row.value_major}</div>}
{isNumeric && <div className="node-details-table-row-value-unit">{row.value_minor}</div>}
{!isNumeric && <div className="node-details-table-row-value-major">{row.value_major}</div>}
{!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor">{row.value_minor}</div>}
</div>
);
})}
</div>
);
}
{this.props.rows.map(function(row) {
return (
<div className="node-details-table-row">
<div className="node-details-table-row-key">{row.key}</div>
{isNumeric && <div className="node-details-table-row-value-scalar">{row.value_major}</div>}
{isNumeric && <div className="node-details-table-row-value-unit">{row.value_minor}</div>}
{!isNumeric && <div className="node-details-table-row-value-major">{row.value_major}</div>}
{!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor">{row.value_minor}</div>}
</div>
);
})}
</div>
);
}
});
module.exports = NodeDetailsTable;
module.exports = NodeDetailsTable;

67
client/app/scripts/components/node-details.js
View File

@@ -1,46 +1,43 @@
/** @jsx React.DOM */
const React = require('react');
var React = require('react');
var _ = require('lodash');
const NodeDetailsTable = require('./node-details-table');
const NodeColorMixin = require('../mixins/node-color-mixin');
var NodeDetailsTable = require('./node-details-table');
var NodeColorMixin = require('../mixins/node-color-mixin');
const NodeDetails = React.createClass({
var NodeDetails = React.createClass({
mixins: [
NodeColorMixin
],
mixins: [
NodeColorMixin
],
render: function() {
const node = this.props.details;
render: function() {
var node = this.props.details;
if (!node) {
return <div className="node-details" />;
}
if (!node) {
return <div className="node-details" />;
}
const style = {
'background-color': this.getNodeColorDark(node.label_major)
};
var style = {
"background-color": this.getNodeColorDark(node.label_major)
};
return (
<div className="node-details">
<div className="node-details-header" style={style}>
<h2 className="node-details-header-label">
{node.label_major}
</h2>
<div className="node-details-header-label-minor">{node.label_minor}</div>
</div>
return (
<div className="node-details">
<div className="node-details-header" style={style}>
<h2 className="node-details-header-label">
{node.label_major}
</h2>
<div className="node-details-header-label-minor">{node.label_minor}</div>
</div>
<div className="node-details-content">
{this.props.details.tables.map(function(table) {
return <NodeDetailsTable title={table.title} rows={table.rows} isNumeric={table.numeric} />;
})}
</div>
</div>
);
}
<div className="node-details-content">
{this.props.details.tables.map(function(table) {
return <NodeDetailsTable title={table.title} rows={table.rows} isNumeric={table.numeric} />;
})}
</div>
</div>
);
}
});
module.exports = NodeDetails;
module.exports = NodeDetails;

91
client/app/scripts/components/nodes.js
View File

@@ -1,60 +1,57 @@
/** @jsx React.DOM */
const React = require('react');
var React = require('react');
const NodesChart = require('../charts/nodes-chart');
const AppActions = require('../actions/app-actions');
var NodesChart = require('../charts/nodes-chart');
var AppActions = require('../actions/app-actions');
const navbarHeight = 160;
const marginTop = 0;
var navbarHeight = 160;
var marginTop = 0;
var marginLeft = 0;
const Nodes = React.createClass({
var Nodes = React.createClass({
getInitialState: function() {
return {
width: window.innerWidth,
height: window.innerHeight - navbarHeight - marginTop
};
},
getInitialState: function() {
return {
width: window.innerWidth,
height: window.innerHeight - navbarHeight - marginTop
};
},
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
},
onNodeClick: function(ev) {
AppActions.clickNode(ev.currentTarget.id);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
},
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
},
onNodeClick: function(ev) {
AppActions.clickNode(ev.currentTarget.id);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
},
render: function() {
return (
<div id="nodes">
<NodesChart
onNodeClick={this.onNodeClick}
nodes={this.props.nodes}
width={this.state.width}
height={this.state.height}
context="view"
/>
</div>
);
},
setDimensions: function() {
this.setState({
height: window.innerHeight - navbarHeight - marginTop,
width: window.innerWidth
});
},
handleResize: function() {
this.setDimensions();
},
handleResize: function() {
this.setDimensions();
},
render: function() {
return (
<div id="nodes">
<NodesChart
onNodeClick={this.onNodeClick}
nodes={this.props.nodes}
width={this.state.width}
height={this.state.height}
context="view"
/>
</div>
);
}
setDimensions: function() {
this.setState({
height: window.innerHeight - navbarHeight - marginTop,
width: window.innerWidth
});
}
});
module.exports = Nodes;
module.exports = Nodes;

38
client/app/scripts/components/status.js
View File

@@ -1,27 +1,25 @@
/** @jsx React.DOM */
const React = require('react');
var React = require('react');
const Status = React.createClass({
var Status = React.createClass({
renderConnectionState: function() {
return (
<div className="status-connection">
<span className="status-icon fa fa-exclamation-circle" />
<span className="status-label">Scope is disconnected</span>
</div>
);
},
renderConnectionState: function() {
return (
<div className="status-connection">
<span className="status-icon fa fa-exclamation-circle" />
<span className="status-label">Scope is disconnected</span>
</div>
);
},
render: function() {
const isDisconnected = this.props.connectionState === 'disconnected';
render: function() {
var isDisconnected = this.props.connectionState === 'disconnected';
return (
<div className="status">
{isDisconnected && this.renderConnectionState()}
</div>
);
}
return (
<div className="status">
{isDisconnected && this.renderConnectionState()}
</div>
);
}
});

78
client/app/scripts/components/topologies.js
View File

@@ -1,50 +1,48 @@
/** @jsx React.DOM */
const React = require('react');
const _ = require('lodash');
var React = require('react');
var _ = require('lodash');
const AppActions = require('../actions/app-actions');
const AppStore = require('../stores/app-store');
var AppActions = require('../actions/app-actions');
var AppStore = require('../stores/app-store');
const Topologies = React.createClass({
var Topologies = React.createClass({
onTopologyClick: function(ev) {
ev.preventDefault();
AppActions.clickTopology(ev.currentTarget.getAttribute('rel'));
},
onTopologyClick: function(ev) {
ev.preventDefault();
AppActions.clickTopology(ev.currentTarget.getAttribute('rel'));
},
renderTopology: function(topology) {
const isActive = topology.name === this.props.currentTopology.name;
const className = isActive ? 'topologies-item topologies-item-active' : 'topologies-item';
const topologyId = AppStore.getTopologyIdForUrl(topology.url);
const title = ['Topology: ' + topology.name,
'Nodes: ' + topology.stats.node_count,
'Connections: ' + topology.stats.node_count].join('\n');
renderTopology: function(topology, active) {
var isActive = topology.name === this.props.currentTopology.name,
className = isActive ? "topologies-item topologies-item-active" : "topologies-item",
topologyId = AppStore.getTopologyIdForUrl(topology.url),
title = ['Topology: ' + topology.name,
'Nodes: ' + topology.stats.node_count,
'Connections: ' + topology.stats.node_count].join('\n');
return (
<div className={className} key={topologyId} rel={topologyId} onClick={this.onTopologyClick}>
<div title={title}>
<div className="topologies-item-label">
{topology.name}
</div>
</div>
</div>
);
},
return (
<div className={className} key={topologyId} rel={topologyId} onClick={this.onTopologyClick}>
<div title={title}>
<div className="topologies-item-label">
{topology.name}
</div>
</div>
</div>
);
},
render: function() {
const topologies = _.sortBy(this.props.topologies, function(topology) {
return topology.name;
});
render: function() {
var topologies = _.sortBy(this.props.topologies, function(topology) {
return topology.name;
});
return (
<div className="topologies">
{this.props.currentTopology && topologies.map(function(topology) {
return this.renderTopology(topology);
}, this)}
</div>
);
}
return (
<div className="topologies">
{this.props.currentTopology && topologies.map(function(topology) {
return this.renderTopology(topology);
}, this)}
</div>
);
}
});

26
client/app/scripts/constants/action-types.js
View File

@@ -1,16 +1,16 @@
var keymirror = require('keymirror');
const keymirror = require('keymirror');
module.exports = keymirror({
CLICK_CLOSE_DETAILS: null,
CLICK_GROUPING: null,
CLICK_NODE: null,
CLICK_TOPOLOGY: null,
ENTER_NODE: null,
HIT_ESC_KEY: null,
LEAVE_NODE: null,
RECEIVE_NODE_DETAILS: null,
RECEIVE_NODES: null,
RECEIVE_NODES_DELTA: null,
RECEIVE_TOPOLOGIES: null,
ROUTE_TOPOLOGY: null
CLICK_CLOSE_DETAILS: null,
CLICK_GROUPING: null,
CLICK_NODE: null,
CLICK_TOPOLOGY: null,
ENTER_NODE: null,
HIT_ESC_KEY: null,
LEAVE_NODE: null,
RECEIVE_NODE_DETAILS: null,
RECEIVE_NODES: null,
RECEIVE_NODES_DELTA: null,
RECEIVE_TOPOLOGIES: null,
ROUTE_TOPOLOGY: null
});

21
client/app/scripts/constants/topologies.js
View File

@@ -1,13 +1,12 @@
module.exports = [
{
url: '/api/topology/applications',
name: 'Applications',
stats: {}
},
{
url: '/api/topology/hosts',
name: 'Hosts',
stats: {}
}
{
url: '/api/topology/applications',
name: 'Applications',
stats: {}
},
{
url: '/api/topology/hosts',
name: 'Hosts',
stats: {}
}
];

12
client/app/scripts/dispatcher/app-dispatcher.js
View File

@@ -1,12 +1,12 @@
var flux = require('flux');
var _ = require('lodash');
const flux = require('flux');
const _ = require('lodash');
var AppDispatcher = new flux.Dispatcher();
const AppDispatcher = new flux.Dispatcher();
AppDispatcher.dispatch = _.wrap(flux.Dispatcher.prototype.dispatch, function(func) {
var args = Array.prototype.slice.call(arguments, 1);
// console.log(args[0]);
func.apply(this, args);
const args = Array.prototype.slice.call(arguments, 1);
// console.log(args[0]);
func.apply(this, args);
});
module.exports = AppDispatcher;

12
client/app/scripts/main.js
View File

@@ -1,11 +1,7 @@
/**
* @jsx React.DOM
*/
const React = require('react');
var React = require('react');
var App = require('./components/app.js');
const App = require('./components/app.js');
React.render(
<App/>,
document.getElementById('app'));
<App/>,
document.getElementById('app'));

34
client/app/scripts/mixins/node-color-mixin.js
View File

@@ -1,27 +1,27 @@
var d3 = require('d3');
const d3 = require('d3');
var colors = d3.scale.category20();
const colors = d3.scale.category20();
// make sure the internet always gets the same color
var internetLabel = "the Internet";
const internetLabel = 'the Internet';
colors(internetLabel);
var NodeColorMixin = {
getNodeColor: function(text) {
return colors(text);
},
getNodeColorDark: function(text) {
var color = d3.rgb(colors(text));
var hsl = color.hsl();
const NodeColorMixin = {
getNodeColor: function(text) {
return colors(text);
},
getNodeColorDark: function(text) {
const color = d3.rgb(colors(text));
let hsl = color.hsl();
// ensure darkness
// if (hsl.l > 0.5) {
hsl = hsl.darker();
// }
// ensure darkness
// if (hsl.l > 0.5) {
hsl = hsl.darker();
// }
return hsl.toString();
}
return hsl.toString();
}
};
module.exports = NodeColorMixin;
module.exports = NodeColorMixin;

92
client/app/scripts/stores/__tests__/app-store-test.js
View File

@@ -1,61 +1,61 @@
describe('AppStore', function() {
const ActionTypes = require('../../constants/action-types');
let AppStore;
let registeredCallback;
var ActionTypes = require('../../constants/action-types');
var AppStore, registeredCallback;
// actions
// actions
const ClickTopologyAction = {
type: ActionTypes.CLICK_TOPOLOGY,
topologyId: 'topo1'
};
var ClickTopologyAction = {
type: ActionTypes.CLICK_TOPOLOGY,
topologyId: 'topo1'
};
const ClickGroupingAction = {
type: ActionTypes.CLICK_GROUPING,
grouping: 'grouped'
};
var ClickGroupingAction = {
type: ActionTypes.CLICK_GROUPING,
grouping: 'grouped'
};
const ReceiveTopologiesAction = {
type: ActionTypes.RECEIVE_TOPOLOGIES,
topologies: [{
url: '/topo1',
grouped_url: '/topo1grouped',
name: 'Topo1'
}]
};
var ReceiveTopologiesAction = {
type: ActionTypes.RECEIVE_TOPOLOGIES,
topologies: [{
url: '/topo1',
grouped_url: '/topo1grouped',
name: 'Topo1'
}]
};
beforeEach(function() {
AppStore = require('../app-store');
registeredCallback = AppStore.registeredCallback;
});
beforeEach(function() {
AppStore = require('../app-store');
registeredCallback = AppStore.registeredCallback;
});
// topology tests
// topology tests
it('init with no topologies', function() {
const topos = AppStore.getTopologies();
expect(topos.length).toBe(0);
expect(AppStore.getCurrentTopology()).toBeUndefined();
});
it('init with no topologies', function() {
var topos = AppStore.getTopologies();
expect(topos.length).toBe(0);
expect(AppStore.getCurrentTopology()).toBeUndefined();
});
it('get current topology', function() {
registeredCallback(ClickTopologyAction);
registeredCallback(ReceiveTopologiesAction);
it('get current topology', function() {
registeredCallback(ClickTopologyAction);
registeredCallback(ReceiveTopologiesAction);
expect(AppStore.getTopologies().length).toBe(1);
expect(AppStore.getCurrentTopology().name).toBe('Topo1');
expect(AppStore.getCurrentTopologyUrl()).toBe('/topo1');
});
expect(AppStore.getTopologies().length).toBe(1);
expect(AppStore.getCurrentTopology().name).toBe('Topo1');
expect(AppStore.getCurrentTopologyUrl()).toBe('/topo1');
});
it('get grouped topology', function() {
registeredCallback(ClickTopologyAction);
registeredCallback(ReceiveTopologiesAction);
registeredCallback(ClickGroupingAction);
expect(AppStore.getTopologies().length).toBe(1);
expect(AppStore.getCurrentTopology().name).toBe('Topo1');
expect(AppStore.getCurrentTopologyUrl()).toBe('/topo1grouped');
});
it('get grouped topology', function() {
registeredCallback(ClickTopologyAction);
registeredCallback(ReceiveTopologiesAction);
registeredCallback(ClickGroupingAction);
expect(AppStore.getTopologies().length).toBe(1);
expect(AppStore.getCurrentTopology().name).toBe('Topo1');
expect(AppStore.getCurrentTopologyUrl()).toBe('/topo1grouped');
});
});

306
client/app/scripts/stores/app-store.js
View File

@@ -1,187 +1,183 @@
const EventEmitter = require('events').EventEmitter;
const _ = require('lodash');
const assign = require('object-assign');
var EventEmitter = require('events').EventEmitter;
var _ = require('lodash');
var assign = require('object-assign');
var AppDispatcher = require('../dispatcher/app-dispatcher');
var ActionTypes = require('../constants/action-types');
// Initial values
var connectionState = 'disconnected';
var currentGrouping = 'none';
var currentTopologyId = 'applications';
var mouseOverNode = null;
var nodes = {};
var nodeDetails = null;
var selectedNodeId = null;
var topologies = [];
// Store API
var AppStore = assign({}, EventEmitter.prototype, {
CHANGE_EVENT: 'change',
getAppState: function() {
return {
topologyId: currentTopologyId,
grouping: this.getCurrentGrouping(),
selectedNodeId: this.getSelectedNodeId()
};
},
getConnectionState: function() {
return connectionState;
},
getCurrentTopology: function() {
return _.find(topologies, function(topology) {
return isUrlForTopologyId(topology.url, currentTopologyId);
});
},
getCurrentTopologyUrl: function() {
var topology = this.getCurrentTopology();
if (topology) {
return topology.grouped_url && currentGrouping == 'grouped' ? topology.grouped_url : topology.url;
}
},
getCurrentGrouping: function() {
return currentGrouping;
},
getNodeDetails: function() {
return nodeDetails;
},
getNodes: function() {
return nodes;
},
getSelectedNodeId: function() {
return selectedNodeId;
},
getTopologies: function() {
return topologies;
},
getTopologyIdForUrl: function(url) {
return url.split('/').pop();
}
});
const AppDispatcher = require('../dispatcher/app-dispatcher');
const ActionTypes = require('../constants/action-types');
// Helpers
function isUrlForTopologyId(url, topologyId) {
return _.endsWith(url, topologyId);
return _.endsWith(url, topologyId);
}
// Initial values
let connectionState = 'disconnected';
let currentGrouping = 'none';
let currentTopologyId = 'applications';
let mouseOverNode = null;
let nodes = {};
let nodeDetails = null;
let selectedNodeId = null;
let topologies = [];
// Store API
const AppStore = assign({}, EventEmitter.prototype, {
CHANGE_EVENT: 'change',
getAppState: function() {
return {
topologyId: currentTopologyId,
grouping: this.getCurrentGrouping(),
selectedNodeId: this.getSelectedNodeId()
};
},
getConnectionState: function() {
return connectionState;
},
getCurrentTopology: function() {
return _.find(topologies, function(topology) {
return isUrlForTopologyId(topology.url, currentTopologyId);
});
},
getCurrentTopologyUrl: function() {
const topology = this.getCurrentTopology();
if (topology) {
return topology.grouped_url && currentGrouping === 'grouped' ? topology.grouped_url : topology.url;
}
},
getCurrentGrouping: function() {
return currentGrouping;
},
getNodeDetails: function() {
return nodeDetails;
},
getNodes: function() {
return nodes;
},
getSelectedNodeId: function() {
return selectedNodeId;
},
getTopologies: function() {
return topologies;
},
getTopologyIdForUrl: function(url) {
return url.split('/').pop();
}
});
// Store Dispatch Hooks
AppStore.registeredCallback = function(payload) {
switch (payload.type) {
switch (payload.type) {
case ActionTypes.CLICK_CLOSE_DETAILS:
selectedNodeId = null;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.CLICK_CLOSE_DETAILS:
selectedNodeId = null;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.CLICK_GROUPING:
if (payload.grouping !== currentGrouping) {
currentGrouping = payload.grouping;
nodes = {};
AppStore.emit(AppStore.CHANGE_EVENT);
}
break;
case ActionTypes.CLICK_GROUPING:
if (payload.grouping !== currentGrouping) {
currentGrouping = payload.grouping;
nodes = {};
AppStore.emit(AppStore.CHANGE_EVENT);
}
break;
case ActionTypes.CLICK_NODE:
selectedNodeId = payload.nodeId;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.CLICK_NODE:
selectedNodeId = payload.nodeId;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.CLICK_TOPOLOGY:
if (payload.topologyId !== currentTopologyId) {
currentTopologyId = payload.topologyId;
nodes = {};
}
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.CLICK_TOPOLOGY:
if (payload.topologyId !== currentTopologyId) {
currentTopologyId = payload.topologyId;
nodes = {};
}
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.ENTER_NODE:
mouseOverNode = payload.nodeId;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.ENTER_NODE:
mouseOverNode = payload.nodeId;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.HIT_ESC_KEY:
nodeDetails = null;
selectedNodeId = null;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.HIT_ESC_KEY:
nodeDetails = null;
selectedNodeId = null;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.LEAVE_NODE:
mouseOverNode = null;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.LEAVE_NODE:
mouseOverNode = null;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.RECEIVE_NODE_DETAILS:
nodeDetails = payload.details;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.RECEIVE_NODE_DETAILS:
nodeDetails = payload.details;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.RECEIVE_NODES_DELTA:
console.log('RECEIVE_NODES_DELTA',
'remove', _.size(payload.delta.remove),
'update', _.size(payload.delta.update),
'add', _.size(payload.delta.add));
case ActionTypes.RECEIVE_NODES_DELTA:
console.log('RECEIVE_NODES_DELTA',
'remove', _.size(payload.delta.remove),
'update', _.size(payload.delta.update),
'add', _.size(payload.delta.add));
connectionState = "connected";
connectionState = 'connected';
// nodes that no longer exist
_.each(payload.delta.remove, function(nodeId) {
// in case node disappears before mouseleave event
if (mouseOverNode === nodeId) {
mouseOverNode = null;
}
delete nodes[nodeId];
});
// nodes that no longer exist
_.each(payload.delta.remove, function(nodeId) {
// in case node disappears before mouseleave event
if (mouseOverNode === nodeId) {
mouseOverNode = null;
}
delete nodes[nodeId];
});
// update existing nodes
_.each(payload.delta.update, function(node) {
nodes[node.id] = node;
});
// update existing nodes
_.each(payload.delta.update, function(node) {
nodes[node.id] = node;
});
// add new nodes
_.each(payload.delta.add, function(node) {
nodes[node.id] = node;
});
// add new nodes
_.each(payload.delta.add, function(node) {
nodes[node.id] = node;
});
AppStore.emit(AppStore.CHANGE_EVENT);
break;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.RECEIVE_TOPOLOGIES:
topologies = payload.topologies;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.RECEIVE_TOPOLOGIES:
topologies = payload.topologies;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.ROUTE_TOPOLOGY:
nodes = {};
currentTopologyId = payload.state.topologyId;
currentGrouping = payload.state.grouping;
selectedNodeId = payload.state.selectedNodeId;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
case ActionTypes.ROUTE_TOPOLOGY:
nodes = {};
currentTopologyId = payload.state.topologyId;
currentGrouping = payload.state.grouping;
selectedNodeId = payload.state.selectedNodeId;
AppStore.emit(AppStore.CHANGE_EVENT);
break;
default:
break;
default:
break;
}
}
};
AppStore.dispatchToken = AppDispatcher.register(AppStore.registeredCallback);

40
client/app/scripts/utils/router-utils.js
View File

@@ -1,31 +1,29 @@
const page = require('page');
var page = require('page');
const AppActions = require('../actions/app-actions');
const AppStore = require('../stores/app-store');
var AppActions = require('../actions/app-actions');
var AppStore = require('../stores/app-store');
function updateRoute() {
const state = AppStore.getAppState();
const stateUrl = JSON.stringify(state);
const dispatch = false;
page('/', function(ctx) {
updateRoute();
page.show('/state/' + stateUrl, state, dispatch);
}
page('/', function() {
updateRoute();
});
page('/state/:state', function(ctx) {
var state = JSON.parse(ctx.params.state);
AppActions.route(state);
const state = JSON.parse(ctx.params.state);
AppActions.route(state);
});
function updateRoute() {
var state = AppStore.getAppState();
var stateUrl = JSON.stringify(state);
var dispatch = false;
page.show('/state/' + stateUrl, state, dispatch);
}
module.exports = {
getRouter: function() {
return page;
},
getRouter: function() {
return page;
},
updateRoute: updateRoute
};
updateRoute: updateRoute
};

93
client/app/scripts/utils/web-api-utils.js
View File

@@ -1,68 +1,69 @@
var reqwest = require('reqwest');
const reqwest = require('reqwest');
var AppActions = require('../actions/app-actions');
const AppActions = require('../actions/app-actions');
var WS_URL = window.WS_URL || 'ws://' + location.host;
const WS_URL = window.WS_URL || 'ws://' + location.host;
var socket;
var reconnectTimer = 0;
var currentUrl = null;
var updateFrequency = '5s';
var topologyTimer = 0;
let socket;
let reconnectTimer = 0;
let currentUrl = null;
let updateFrequency = '5s';
let topologyTimer = 0;
function createWebsocket(topologyUrl) {
if (socket) {
socket.onclose = null;
socket.close();
}
if (socket) {
socket.onclose = null;
socket.close();
}
socket = new WebSocket(WS_URL + topologyUrl + '/ws?t=' + updateFrequency);
socket = new WebSocket(WS_URL + topologyUrl + '/ws?t=' + updateFrequency);
socket.onclose = function() {
clearTimeout(reconnectTimer);
socket = null;
socket.onclose = function() {
clearTimeout(reconnectTimer);
socket = null;
reconnectTimer = setTimeout(function() {
createWebsocket(topologyUrl);
}, 5000);
}
reconnectTimer = setTimeout(function() {
createWebsocket(topologyUrl);
}, 5000);
};
socket.onmessage = function(event) {
var msg = JSON.parse(event.data);
if (msg.add || msg.remove || msg.update) {
AppActions.receiveNodesDelta(msg);
}
};
socket.onmessage = function(event) {
const msg = JSON.parse(event.data);
if (msg.add || msg.remove || msg.update) {
AppActions.receiveNodesDelta(msg);
}
};
currentUrl = topologyUrl;
currentUrl = topologyUrl;
}
function getTopologies() {
clearTimeout(topologyTimer);
reqwest('/api/topology', function(res) {
AppActions.receiveTopologies(res);
topologyTimer = setTimeout(getTopologies, 10000);
});
clearTimeout(topologyTimer);
reqwest('/api/topology', function(res) {
AppActions.receiveTopologies(res);
topologyTimer = setTimeout(getTopologies, 10000);
});
}
function getNodeDetails(topologyUrl, nodeId) {
if (topologyUrl && nodeId) {
var url = [topologyUrl, nodeId].join('/');
reqwest(url, function(res) {
AppActions.receiveNodeDetails(res.node);
});
}
if (topologyUrl && nodeId) {
const url = [topologyUrl, nodeId].join('/');
reqwest(url, function(res) {
AppActions.receiveNodeDetails(res.node);
});
}
}
module.exports = {
getNodeDetails: getNodeDetails,
getNodeDetails: getNodeDetails,
getTopologies: getTopologies,
getTopologies: getTopologies,
getNodesDelta: function(topologyUrl) {
if (topologyUrl && topologyUrl !== currentUrl) {
createWebsocket(topologyUrl);
}
}
};
getNodesDelta: function(topologyUrl) {
if (topologyUrl && topologyUrl !== currentUrl) {
createWebsocket(topologyUrl);
}
}
}

378
client/app/styles/main.less
View File

@@ -5,10 +5,10 @@
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400);
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* weave company colours */
@@ -35,250 +35,248 @@ html, body {
/* Space out content a bit */
body {
background: linear-gradient(30deg, @background-color 0%, @background-secondary-color 100%);
color: @text-color;
line-height: 150%;
background: linear-gradient(30deg, @background-color 0%, @background-secondary-color 100%);
color: @text-color;
line-height: 150%;
}
#app {
}
.header {
position: absolute;
top: 32px;
width: 100%;
height: 80px;
z-index: 20;
position: absolute;
top: 32px;
width: 100%;
height: 80px;
z-index: 20;
}
.logo {
margin: -8px 0 0 64px;
height: 64px;
width: 250px;
float: left;
margin: -8px 0 0 64px;
height: 64px;
width: 250px;
float: left;
}
.topologies,
.groupings {
float: left;
margin-top: 7px;
margin-left: 48px;
float: left;
margin-top: 7px;
margin-left: 48px;
}
.topologies {
&-icon {
font-size: 12px;
color: @text-secondary-color;
margin-right: 16px;
position: relative;
top: -1px;
&-icon {
font-size: 12px;
color: @text-secondary-color;
margin-right: 16px;
position: relative;
top: -1px;
}
.topologies-item {
margin: 8px 16px 6px 0;
cursor: pointer;
display: inline-block;
&-label {
color: @text-secondary-color;
font-size: 15px;
text-transform: uppercase;
}
.topologies-item {
margin: 8px 16px 6px 0;
cursor: pointer;
display: inline-block;
&-label {
color: @text-secondary-color;
font-size: 15px;
text-transform: uppercase;
}
&-active, &:hover {
.topologies-item-label {
color: @text-color;
}
}
&-active, &:hover {
.topologies-item-label {
color: @text-color;
}
}
}
}
.groupings {
&-item {
font-size: 15px;
margin: 8px 12px 6px 0;
cursor: pointer;
display: inline-block;
color: @text-tertiary-color;
&-item {
font-size: 15px;
margin: 8px 12px 6px 0;
cursor: pointer;
display: inline-block;
color: @text-tertiary-color;
&-disabled {
color: @text-tertiary-color;
cursor: default;
}
&-default:hover,
&-active {
color: @text-color;
}
&-disabled {
color: @text-tertiary-color;
cursor: default;
}
&-default:hover,
&-active {
color: @text-color;
}
}
}
.status {
float: right;
margin-top: 14px;
margin-right: 64px;
float: right;
margin-top: 14px;
margin-right: 64px;
&-icon {
font-size: 16px;
position: relative;
top: 1px;
color: @text-secondary-color;
}
&-icon {
font-size: 16px;
position: relative;
top: 1px;
color: @text-secondary-color;
}
&-label {
margin-left: 0.5em;
}
&-label {
margin-left: 0.5em;
}
}
#nodes {
svg {
position: absolute;
top: 0px;
}
svg {
position: absolute;
top: 0px;
}
text {
font-size: 14px;
font-family: Roboto;
fill: @text-secondary-color;
text-shadow: 0 2px 0 @white, 2px 0 0 @white, 0 -2px 0 @white, -2px 0 0 @white;
text {
font-size: 14px;
font-family: Roboto;
fill: @text-secondary-color;
text-shadow: 0 2px 0 @white, 2px 0 0 @white, 0 -2px 0 @white, -2px 0 0 @white;
&.node-label {
fill: @text-color;
}
&.node-sublabel {
font-size: 12px;
fill: @text-secondary-color;
}
}
g.node {
cursor: pointer;
}
.link {
stroke: @text-secondary-color;
stroke-width: 1.5px;
fill: none;
opacity: 0.5;
}
circle.border {
stroke-width: 3px;
fill: none;
}
circle.shadow {
stroke: none;
fill: @background-secondary-color;
}
circle.node {
&.node-label {
fill: @text-color;
}
&.node-sublabel {
font-size: 12px;
fill: @text-secondary-color;
}
}
g.node {
cursor: pointer;
}
.link {
stroke: @text-secondary-color;
stroke-width: 1.5px;
fill: none;
opacity: 0.5;
}
circle.border {
stroke-width: 3px;
fill: none;
}
circle.shadow {
stroke: none;
fill: @background-secondary-color;
}
circle.node {
fill: @text-color;
}
}
#details {
position: absolute;
z-index: 1024;
display: block;
right: 36px;
top: 24px;
bottom: 48px;
width: 32em;
position: absolute;
z-index: 1024;
display: block;
right: 36px;
top: 24px;
bottom: 48px;
width: 32em;
.details-tools {
float: right;
padding: 16px 24px;
color: @white;
.details-tools {
float: right;
padding: 16px 24px;
color: @white;
span {
cursor: pointer;
&:hover {
color: white;
}
}
span {
cursor: pointer;
&:hover {
color: white;
}
}
}
}
.mui-paper, .mui-paper-container {
height: 100%;
height: 100%;
}
.node-details {
height: 100%;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.86);
&-header {
padding: 24px 36px 24px 36px;
&-label {
color: white;
margin-bottom: 0;
&-minor {
font-size: 120%;
color: @white;
}
}
}
&-content {
position: absolute;
top: 115px;
bottom: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.86);
padding: 0 36px 0 36px;
overflow-y: scroll;
}
&-header {
&-table {
padding: 24px 36px 24px 36px;
margin-bottom: 8px;
&-label {
color: white;
margin-bottom: 0;
&-title {
text-transform: uppercase;
margin-bottom: 0;
color: @text-secondary-color;
font-size: 100%;
}
&-minor {
font-size: 120%;
color: @white;
}
&-row {
white-space: nowrap;
clear: left;
}
&-key {
width: 9em;
float: left;
}
&-value-major {
margin-right: 0.5em;
overflow: hidden;
text-overflow: ellipsis;
}
&-value-scalar {
width: 2em;
text-align: right;
margin-right: 0.5em;
}
&-value-minor,
&-value-unit {
font-size: 95%;
color: @text-secondary-color;
}
}
&-content {
position: absolute;
top: 115px;
bottom: 0;
width: 100%;
padding: 0 36px 0 36px;
overflow-y: scroll;
}
&-table {
margin-bottom: 8px;
&-title {
text-transform: uppercase;
margin-bottom: 0;
color: @text-secondary-color;
font-size: 100%;
}
&-row {
white-space: nowrap;
clear: left;
&-key {
float: left;
width: 9em;
}
&-value-major {
margin-right: 0.5em;
overflow: hidden;
text-overflow: ellipsis;
}
&-value-scalar {
width: 2em;
text-align: right;
margin-right: 0.5em;
}
&-value-minor,
&-value-unit {
font-size: 95%;
color: @text-secondary-color;
}
}
}
}
}

188
client/gulpfile.js
View File

@@ -1,115 +1,143 @@
'use strict';
var gulp = require('gulp');
var connect = require('gulp-connect');
var livereload = require('gulp-livereload');
var browserify = require('browserify');
var del = require('del');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var reactify = require('reactify');
const gulp = require('gulp');
const connect = require('gulp-connect');
const livereload = require('gulp-livereload');
const babelify = require('babelify');
const browserify = require('browserify');
const del = require('del');
const source = require('vinyl-source-stream');
const vbuffer = require('vinyl-buffer');
const reactify = require('reactify');
// load plugins
var $ = require('gulp-load-plugins')();
const $ = require('gulp-load-plugins')();
var isDev = true;
var isProd = false;
gulp.task('styles', function () {
return gulp.src('app/styles/main.less')
.pipe($.if(isDev, $.sourcemaps.init()))
.pipe($.less())
.pipe($.autoprefixer('last 1 version'))
.pipe($.if(isDev, $.sourcemaps.write()))
.pipe($.if(isDev, gulp.dest('.tmp/styles')))
.pipe($.if(isProd, $.csso()))
.pipe($.if(isProd, gulp.dest('dist/styles')))
.pipe($.size())
.pipe(livereload());
gulp.task('styles', function() {
return gulp.src('app/styles/main.less')
.pipe($.if(isDev, $.sourcemaps.init()))
.pipe($.less())
.pipe($.autoprefixer('last 1 version'))
.pipe($.if(isDev, $.sourcemaps.write()))
.pipe($.if(isDev, gulp.dest('.tmp/styles')))
.pipe($.if(isProd, $.csso()))
.pipe($.if(isProd, gulp.dest('dist/styles')))
.pipe($.size())
.pipe(livereload());
});
gulp.task('scripts', function() {
var bundler = browserify('./app/scripts/main.js', {debug: isDev});
bundler.transform(reactify);
const bundler = browserify('./app/scripts/main.js', {debug: isDev});
bundler.transform(reactify);
bundler.transform(babelify);
var stream = bundler.bundle();
const stream = bundler.bundle();
return stream
.pipe(source('bundle.js'))
.pipe($.if(isDev, gulp.dest('.tmp/scripts')))
.pipe($.if(isProd, buffer()))
.pipe($.if(isProd, $.uglify()))
.pipe($.if(isProd, gulp.dest('dist/scripts')))
.pipe(livereload())
.on('error', $.util.log);
return stream
.pipe(source('bundle.js'))
.pipe($.if(isDev, gulp.dest('.tmp/scripts')))
.pipe($.if(isProd, vbuffer()))
.pipe($.if(isProd, $.uglify()))
.on('error', $.util.log)
.pipe($.if(isProd, gulp.dest('dist/scripts')))
.pipe(livereload());
});
gulp.task('html', ['styles', 'scripts'], function () {
return gulp.src('app/*.html')
.pipe($.preprocess())
.pipe(gulp.dest('dist'))
.pipe($.size())
.pipe(livereload());
gulp.task('html', ['styles', 'scripts'], function() {
return gulp.src('app/*.html')
.pipe($.preprocess())
.pipe(gulp.dest('dist'))
.pipe($.size())
.pipe(livereload());
});
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe(gulp.dest('dist/images'))
.pipe($.size());
gulp.task('images', function() {
return gulp.src('app/images/**/*')
.pipe(gulp.dest('dist/images'))
.pipe($.size());
});
gulp.task('fonts', function () {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe($.if(isDev, gulp.dest('.tmp/fonts')))
.pipe($.if(isProd, gulp.dest('dist/fonts')))
.pipe($.size());
gulp.task('fonts', function() {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe($.if(isDev, gulp.dest('.tmp/fonts')))
.pipe($.if(isProd, gulp.dest('dist/fonts')))
.pipe($.size());
});
gulp.task('extras', function () {
return gulp.src(['app/*.*', '!app/*.html'], { dot: true })
.pipe(gulp.dest('dist'));
gulp.task('extras', function() {
return gulp.src(['app/*.*', '!app/*.html'], { dot: true })
.pipe(gulp.dest('dist'));
});
gulp.task('clean', function () {
return del(['.tmp', 'dist']);
gulp.task('clean', function() {
return del(['.tmp', 'dist']);
});
gulp.task('lint', function() {
return gulp.src(['app/**/*.js'])
// eslint() attaches the lint output to the eslint property
// of the file object so it can be used by other modules.
.pipe($.eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe($.eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failOnError last.
.pipe($.eslint.failOnError());
});
gulp.task('production', ['html', 'images', 'fonts', 'extras']);
gulp.task('build', function () {
isDev = false;
isProd = true;
gulp.start('production');
gulp.task('build', function() {
isDev = false;
isProd = true;
gulp.start('production');
});
gulp.task('default', ['clean'], function () {
gulp.start('build');
gulp.task('default', ['clean'], function() {
gulp.start('build');
});
gulp.task('connect', function () {
connect.server({
root: ['.tmp', 'app'],
port: 4041,
middleware: function(connect, o) {
return [(function() {
var url = require('url');
var proxy = require('proxy-middleware');
var options = url.parse('http://localhost:4040/api');
options.route = '/api';
return proxy(options);
})()];
},
livereload: false
});
gulp.task('connect', function() {
const root = isProd ? ['dist'] : ['.tmp', 'app'];
connect.server({
root: root,
port: 4041,
middleware: function() {
return [(function() {
const url = require('url');
const proxy = require('proxy-middleware');
const options = url.parse('http://localhost:4040/api');
options.route = '/api';
return proxy(options);
})()];
},
livereload: false
});
});
gulp.task('serve', ['connect', 'styles', 'scripts', 'fonts']);
gulp.task('watch', ['serve'], function () {
livereload.listen();
gulp.watch('app/styles/**/*.less', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/images/**/*', ['images']);
gulp.task('serve-build', function() {
isDev = false;
isProd = true;
// use local WS api
gulp.src('app/*.html')
.pipe($.preprocess({context: {DEBUG: true} }))
.pipe(gulp.dest('dist'));
gulp.start('connect');
});
gulp.task('watch', ['serve'], function() {
livereload.listen();
gulp.watch('app/styles/**/*.less', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/images/**/*', ['images']);
});

8
client/package.json
View File

@@ -21,16 +21,21 @@
"reqwest": "~1.1.5"
},
"devDependencies": {
"babel-eslint": "^3.1.9",
"babelify": "^6.1.2",
"browserify": "^10.2.0",
"del": "^1.1.1",
"eslint": "^0.21.2",
"eslint-plugin-jasmine": "^1.0.0",
"eslint-plugin-react": "^2.3.0",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.3.0",
"gulp-connect": "^2.2.0",
"gulp-csso": "^1.0.0",
"gulp-eslint": "^0.12.0",
"gulp-filter": "^2.0.2",
"gulp-flatten": "^0.0.4",
"gulp-if": "^1.2.5",
"gulp-jshint": "^1.10.0",
"gulp-less": "^3.0.3",
"gulp-livereload": "^3.8.0",
"gulp-load-plugins": "^0.10.0",
@@ -55,6 +60,7 @@
"vinyl-source-stream": "^1.1.0"
},
"scripts": {
"lint": "gulp lint",
"start": "gulp",
"test": "karma start test/karma.conf.js --single-run"
},

2
client/test/karma.conf.js
View File

@@ -14,7 +14,7 @@ module.exports = function(config) {
},
browserify: {
debug: true,
transform: ['reactify']
transform: ['reactify', 'babelify']
},
reporters: [
'dots'