You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@storm.apache.org by ka...@apache.org on 2017/02/10 03:41:56 UTC
[4/6] storm git commit: STORM-2344 Adding Flux File Viewer to Nimbus
UI
STORM-2344 Adding Flux File Viewer to Nimbus UI
Adding apache license and link to Storm Homepage
Adding links from storm nimbus homepage
Adding License for Javascript libraries. Using min js for esprima
Adding license files
Project: http://git-wip-us.apache.org/repos/asf/storm/repo
Commit: http://git-wip-us.apache.org/repos/asf/storm/commit/d6c3145b
Tree: http://git-wip-us.apache.org/repos/asf/storm/tree/d6c3145b
Diff: http://git-wip-us.apache.org/repos/asf/storm/diff/d6c3145b
Branch: refs/heads/master
Commit: d6c3145b6c64c23c58fecce24dd15d02670cebf2
Parents: a7cdfef
Author: ambud <as...@gmail.com>
Authored: Sat Feb 4 13:32:16 2017 -0800
Committer: ambud <as...@gmail.com>
Committed: Thu Feb 9 15:04:34 2017 -0600
----------------------------------------------------------------------
LICENSE | 102 ++++++++++-
storm-core/src/ui/public/css/style.css | 7 +
storm-core/src/ui/public/flux.html | 157 ++++++++++++++++
storm-core/src/ui/public/images/bolt.png | Bin 0 -> 6019 bytes
storm-core/src/ui/public/images/flux.png | Bin 0 -> 5328 bytes
storm-core/src/ui/public/images/spout.png | Bin 0 -> 5255 bytes
storm-core/src/ui/public/index.html | 7 +-
storm-core/src/ui/public/js/cytoscape-dagre.js | 192 ++++++++++++++++++++
storm-core/src/ui/public/js/cytoscape.min.js | 63 +++++++
storm-core/src/ui/public/js/dagre.min.js | 6 +
storm-core/src/ui/public/js/esprima.min.js | 2 +
storm-core/src/ui/public/js/js-yaml.min.js | 3 +
12 files changed, 537 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/storm/blob/d6c3145b/LICENSE
----------------------------------------------------------------------
diff --git a/LICENSE b/LICENSE
index f8ee6e6..8569bf7 100644
--- a/LICENSE
+++ b/LICENSE
@@ -283,6 +283,106 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS "AS IS" AND ANY EXPRESS OR IM
-----------------------------------------------------------------------
+For js-yaml.min.js (storm-core/src/ui/public/js/)
+
+(The MIT License)
+
+Copyright (C) 2011-2015 by Vitaly Puzrin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----------------------------------------------------------------------
+
+For dagre.min.js (storm-core/src/ui/public/js/)
+
+Copyright (c) 2012-2014 Chris Pettitt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----------------------------------------------------------------------
+
+For cytoscape.min.js and cytoscape-dagre.js (storm-core/src/ui/public/js/)
+
+Copyright (c) 2016 The Cytoscape Consortium
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the \u201cSoftware\u201d), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED \u201cAS IS\u201d, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----------------------------------------------------------------------
+
+For esprima.js (storm-core/src/ui/public/js/)
+
+Copyright JS Foundation and other contributors, https://js.foundation/
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+ * Redistributions of source code must retain the above copyright
+ notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+-----------------------------------------------------------------------
+
For arbor.js and arbor-graphics.js (storm-core/src/ui/public/js/)
Copyright (c) 2011 Samizdat Drafting Co.
@@ -586,4 +686,4 @@ THE SOFTWARE.
This product bundles PMML Sample Files, which are available under a
-"3-clause BSD" license. For details, see http://dmg.org/documents/dmg-pmml-license-2016.pdf.
\ No newline at end of file
+"3-clause BSD" license. For details, see http://dmg.org/documents/dmg-pmml-license-2016.pdf.
http://git-wip-us.apache.org/repos/asf/storm/blob/d6c3145b/storm-core/src/ui/public/css/style.css
----------------------------------------------------------------------
diff --git a/storm-core/src/ui/public/css/style.css b/storm-core/src/ui/public/css/style.css
index c4c41fd..f52ad41 100644
--- a/storm-core/src/ui/public/css/style.css
+++ b/storm-core/src/ui/public/css/style.css
@@ -19,6 +19,13 @@
display: none;
}
+#ui-flux img {
+ width: 50px;
+ padding: 0.5em;
+ padding-top: 1em;
+ float:right;
+}
+
#ui-user {
text-align: right;
padding: 0.5em;
http://git-wip-us.apache.org/repos/asf/storm/blob/d6c3145b/storm-core/src/ui/public/flux.html
----------------------------------------------------------------------
diff --git a/storm-core/src/ui/public/flux.html b/storm-core/src/ui/public/flux.html
new file mode 100644
index 0000000..25ff787
--- /dev/null
+++ b/storm-core/src/ui/public/flux.html
@@ -0,0 +1,157 @@
+<html>
+<head>
+ <!--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+<meta charset="UTF-8">
+ <title>Storm Flux Viewer</title>
+ <style>
+ body {
+ font-family: helvetica;
+ font-size: 16px;
+ }
+
+ textarea {
+ font-size: 16px;
+ }
+
+ .cy {
+ width: 49%;
+ height: 80%;
+ z-index: 999;
+ float: left;
+ border: 1px solid black;
+ }
+ </style>
+ <script src="/js/jquery-1.11.1.min.js"></script>
+ <script src="/js/cytoscape.min.js"></script>
+ <script src="/js/dagre.min.js"></script>
+ <script src="/js/cytoscape-dagre.js"></script>
+
+ <script src="/js/esprima.min.js"></script>
+ <script src="/js/js-yaml.min.js"></script>
+ <script type="text/javascript">
+ function toCytoscapeGraph(doc) {
+ var nodes = [];
+ for(i in doc.bolts) {
+ var e = doc.bolts[i];
+ e.type='bolt';
+ nodes[e.id] = e;
+ }
+ for(i in doc.spouts) {
+ var e = doc.spouts[i];
+ e.type='spout';
+ nodes[e.id] = e;
+ }
+ var nNodes = [];
+ for(i in nodes) {
+ var node = nodes[i];
+ nNodes.push({data:{id:i, class:node.className, type:node.type}});
+ }
+ var edges = [];
+ for(i in doc.streams) {
+ var e = doc.streams[i];
+ edges.push({ data:{source:e.from, target:e.to, label: e.grouping.type}});
+ }
+ var graph = { nodes:nNodes, edges:edges }
+ return graph
+ }
+
+ function parseAndRender() {
+ var input = document.getElementById('taInput').value;
+ var doc = jsyaml.load(input);
+ if(doc==null){
+ return;
+ }
+ var graph = toCytoscapeGraph(doc)
+
+ $(function(){
+
+ var cy = window.cy = cytoscape({
+ container: document.getElementById('cy'),
+
+ boxSelectionEnabled: false,
+ autounselectify: true,
+
+ layout: {
+ name: 'dagre'
+ },
+
+ style: [
+ {
+ selector: 'node',
+ style: {
+ 'content': 'data(id)',
+ 'text-valign': 'bottom'
+ }
+ },
+
+ {
+ selector: '[type=\'spout\']',
+ style: {
+ 'content': 'data(id)',
+ 'text-valign': 'bottom',
+ 'height': 100,
+ 'width': 100,
+ 'background-image': '/images/spout.png'
+ }
+ },
+
+ {
+ selector: '[type=\'bolt\']',
+ style: {
+ 'content': 'data(id)',
+ 'text-valign': 'bottom',
+ 'height': 100,
+ 'width': 100,
+ 'background-image': '/images/bolt.png'
+ }
+ },
+
+ {
+ selector: 'edge',
+ style: {
+ 'content': 'data(label)',
+ 'curve-style': 'haystack',
+ 'haystack-radius': 0,
+ 'width': 5,
+ 'opacity': 0.5,
+ 'line-color': 'black'
+ }
+ }
+ ],
+
+ elements: graph});
+ });
+ }
+ </script>
+</head>
+<body>
+ <h1><a href="/">Storm UI</a></h1>
+ <h3>Flux Topology Viewer<button style="float:right" onclick="parseAndRender()">Refresh</button></h3>
+ <div id="input">
+ <textarea id="taInput" class="cy" onchange="parseAndRender()"># YAML Definition</textarea>
+ </div>
+
+ <div id="cy" class="cy" >
+ </div>
+
+ <script type="text/javascript">
+ parseAndRender();
+ </script>
+
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/storm/blob/d6c3145b/storm-core/src/ui/public/images/bolt.png
----------------------------------------------------------------------
diff --git a/storm-core/src/ui/public/images/bolt.png b/storm-core/src/ui/public/images/bolt.png
new file mode 100644
index 0000000..06b5893
Binary files /dev/null and b/storm-core/src/ui/public/images/bolt.png differ
http://git-wip-us.apache.org/repos/asf/storm/blob/d6c3145b/storm-core/src/ui/public/images/flux.png
----------------------------------------------------------------------
diff --git a/storm-core/src/ui/public/images/flux.png b/storm-core/src/ui/public/images/flux.png
new file mode 100644
index 0000000..97016b1
Binary files /dev/null and b/storm-core/src/ui/public/images/flux.png differ
http://git-wip-us.apache.org/repos/asf/storm/blob/d6c3145b/storm-core/src/ui/public/images/spout.png
----------------------------------------------------------------------
diff --git a/storm-core/src/ui/public/images/spout.png b/storm-core/src/ui/public/images/spout.png
new file mode 100644
index 0000000..691f235
Binary files /dev/null and b/storm-core/src/ui/public/images/spout.png differ
http://git-wip-us.apache.org/repos/asf/storm/blob/d6c3145b/storm-core/src/ui/public/index.html
----------------------------------------------------------------------
diff --git a/storm-core/src/ui/public/index.html b/storm-core/src/ui/public/index.html
index 90f9edb..69081d4 100644
--- a/storm-core/src/ui/public/index.html
+++ b/storm-core/src/ui/public/index.html
@@ -40,7 +40,12 @@
<div class="col-md-9">
<h1><a href="/">Storm UI</a></h1>
</div>
- <div id="ui-user" class="col-md-3"></div>
+ <div id="ui-user" class="col-md-2"></div>
+ <div id="ui-flux" class="col-md-1">
+ <a href="/flux.html">
+ <img src="/images/flux.png" alt="Storm Flux YAML Viewer">
+ </a>
+ </div>
</div>
<div class="row">
<div class="col-md-12">
http://git-wip-us.apache.org/repos/asf/storm/blob/d6c3145b/storm-core/src/ui/public/js/cytoscape-dagre.js
----------------------------------------------------------------------
diff --git a/storm-core/src/ui/public/js/cytoscape-dagre.js b/storm-core/src/ui/public/js/cytoscape-dagre.js
new file mode 100644
index 0000000..c93288b
--- /dev/null
+++ b/storm-core/src/ui/public/js/cytoscape-dagre.js
@@ -0,0 +1,192 @@
+;(function(){ 'use strict';
+
+ // registers the extension on a cytoscape lib ref
+ var register = function( cytoscape, dagre ){
+ if( !cytoscape || !dagre ){ return; } // can't register if cytoscape unspecified
+
+ var isFunction = function(o){ return typeof o === 'function'; };
+
+ // default layout options
+ var defaults = {
+ // dagre algo options, uses default value on undefined
+ nodeSep: undefined, // the separation between adjacent nodes in the same rank
+ edgeSep: undefined, // the separation between adjacent edges in the same rank
+ rankSep: undefined, // the separation between adjacent nodes in the same rank
+ rankDir: undefined, // 'TB' for top to bottom flow, 'LR' for left to right
+ minLen: function( edge ){ return 1; }, // number of ranks to keep between the source and target of the edge
+ edgeWeight: function( edge ){ return 1; }, // higher weight edges are generally made shorter and straighter than lower weight edges
+
+ // general layout options
+ fit: true, // whether to fit to viewport
+ padding: 30, // fit padding
+ animate: false, // whether to transition the node positions
+ animationDuration: 500, // duration of animation in ms if enabled
+ animationEasing: undefined, // easing of animation if enabled
+ boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
+ ready: function(){}, // on layoutready
+ stop: function(){} // on layoutstop
+ };
+
+ // constructor
+ // options : object containing layout options
+ function DagreLayout( options ){
+ var opts = this.options = {};
+ for( var i in defaults ){ opts[i] = defaults[i]; }
+ for( var i in options ){ opts[i] = options[i]; }
+ }
+
+ // runs the layout
+ DagreLayout.prototype.run = function(){
+ var options = this.options;
+ var layout = this;
+
+ var cy = options.cy; // cy is automatically populated for us in the constructor
+ var eles = options.eles;
+
+ var getVal = function( ele, val ){
+ return isFunction(val) ? val.apply( ele, [ ele ] ) : val;
+ };
+
+ var bb = options.boundingBox || { x1: 0, y1: 0, w: cy.width(), h: cy.height() };
+ if( bb.x2 === undefined ){ bb.x2 = bb.x1 + bb.w; }
+ if( bb.w === undefined ){ bb.w = bb.x2 - bb.x1; }
+ if( bb.y2 === undefined ){ bb.y2 = bb.y1 + bb.h; }
+ if( bb.h === undefined ){ bb.h = bb.y2 - bb.y1; }
+
+ var g = new dagre.graphlib.Graph({
+ multigraph: true,
+ compound: true
+ });
+
+ var gObj = {};
+ var setGObj = function( name, val ){
+ if( val != null ){
+ gObj[ name ] = val;
+ }
+ };
+
+ setGObj( 'nodesep', options.nodeSep );
+ setGObj( 'edgesep', options.edgeSep );
+ setGObj( 'ranksep', options.rankSep );
+ setGObj( 'rankdir', options.rankDir );
+
+ g.setGraph( gObj );
+
+ g.setDefaultEdgeLabel(function() { return {}; });
+ g.setDefaultNodeLabel(function() { return {}; });
+
+ // add nodes to dagre
+ var nodes = eles.nodes();
+ for( var i = 0; i < nodes.length; i++ ){
+ var node = nodes[i];
+ var nbb = node.boundingBox();
+
+ g.setNode( node.id(), {
+ width: nbb.w,
+ height: nbb.h,
+ name: node.id()
+ } );
+
+ // console.log( g.node(node.id()) );
+ }
+
+ // set compound parents
+ for( var i = 0; i < nodes.length; i++ ){
+ var node = nodes[i];
+
+ if( node.isChild() ){
+ g.setParent( node.id(), node.parent().id() );
+ }
+ }
+
+ // add edges to dagre
+ var edges = eles.edges().stdFilter(function( edge ){
+ return !edge.source().isParent() && !edge.target().isParent(); // dagre can't handle edges on compound nodes
+ });
+ for( var i = 0; i < edges.length; i++ ){
+ var edge = edges[i];
+
+ g.setEdge( edge.source().id(), edge.target().id(), {
+ minlen: getVal( edge, options.minLen ),
+ weight: getVal( edge, options.edgeWeight ),
+ name: edge.id()
+ }, edge.id() );
+
+ // console.log( g.edge(edge.source().id(), edge.target().id(), edge.id()) );
+ }
+
+ dagre.layout( g );
+
+ var gNodeIds = g.nodes();
+ for( var i = 0; i < gNodeIds.length; i++ ){
+ var id = gNodeIds[i];
+ var n = g.node( id );
+
+ cy.getElementById(id).scratch().dagre = n;
+ }
+
+ var dagreBB;
+
+ if( options.boundingBox ){
+ dagreBB = { x1: Infinity, x2: -Infinity, y1: Infinity, y2: -Infinity };
+ nodes.forEach(function( node ){
+ var dModel = node.scratch().dagre;
+
+ dagreBB.x1 = Math.min( dagreBB.x1, dModel.x );
+ dagreBB.x2 = Math.max( dagreBB.x2, dModel.x );
+
+ dagreBB.y1 = Math.min( dagreBB.y1, dModel.y );
+ dagreBB.y2 = Math.max( dagreBB.y2, dModel.y );
+ });
+
+ dagreBB.w = dagreBB.x2 - dagreBB.x1;
+ dagreBB.h = dagreBB.y2 - dagreBB.y1;
+ } else {
+ dagreBB = bb;
+ }
+
+ var constrainPos = function( p ){
+ if( options.boundingBox ){
+ var xPct = (p.x - dagreBB.x1) / dagreBB.w;
+ var yPct = (p.y - dagreBB.y1) / dagreBB.h;
+
+ return {
+ x: bb.x1 + xPct * bb.w,
+ y: bb.y1 + yPct * bb.h
+ };
+ } else {
+ return p;
+ }
+ };
+
+ nodes.layoutPositions(layout, options, function(){
+ var dModel = this.scratch().dagre;
+
+ return constrainPos({
+ x: dModel.x,
+ y: dModel.y
+ });
+ });
+
+ return this; // chaining
+ };
+
+ cytoscape('layout', 'dagre', DagreLayout);
+
+ };
+
+ if( typeof module !== 'undefined' && module.exports ){ // expose as a commonjs module
+ module.exports = register;
+ }
+
+ if( typeof define !== 'undefined' && define.amd ){ // expose as an amd/requirejs module
+ define('cytoscape-dagre', function(){
+ return register;
+ });
+ }
+
+ if( typeof cytoscape !== 'undefined' && typeof dagre !== 'undefined' ){ // expose to global cytoscape (i.e. window.cytoscape)
+ register( cytoscape, dagre );
+ }
+
+})();