ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From lpus...@apache.org
Subject [10/71] [abbrv] ambari git commit: AMBARI-21955. Update React version to 15.6.2 to get MIT license. (Sanket Shah via yusaku)
Date Thu, 26 Oct 2017 09:31:24 GMT
http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/scripts/views/TopologyDetailView.jsx
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/views/TopologyDetailView.jsx b/contrib/views/storm/src/main/resources/scripts/views/TopologyDetailView.jsx
deleted file mode 100644
index 136d95f..0000000
--- a/contrib/views/storm/src/main/resources/scripts/views/TopologyDetailView.jsx
+++ /dev/null
@@ -1,1039 +0,0 @@
-/**
- 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.
-*/
-
-define([
-	'jsx!components/Table',
-	'jsx!modules/Table/Pagination',
-	'utils/Utils',
-	'react',
-	'react-dom',
-	'collections/BaseCollection',
-	'models/VTopology',
-	'models/BaseModel',
-	'jsx!containers/TopologyConfiguration',
-	'jsx!containers/TopologyDetailGraph',
-	'jsx!components/Breadcrumbs',
-	'jsx!components/SearchLogs',
-	'jsx!components/BarChart',
-	'jsx!views/RebalanceView',
-	'bootbox',
-	'x-editable',
-	'bootstrap',
-	'bootstrap-switch'
-	],function(Table, Pagination, Utils, React, ReactDOM, BaseCollection, VTopology, BaseModel, TopologyConfiguration, TopologyDetailGraph, Breadcrumbs, SearchLogs, BarChart, RebalanceView, bootbox, XEditable){
-	'use strict';
-
-	return React.createClass({
-		displayName: 'TopologyDetailView',
-		propTypes: {
-			id: React.PropTypes.string.isRequired
-		},
-		getInitialState: function(){
-			this.model = new VTopology({'id': this.props.id});
-			this.spoutCollection = new BaseCollection();
-			this.boltCollection = new BaseCollection();
-			this.lagCollection = new BaseCollection();
-			this.systemFlag = false;
-			this.windowSize = ':all-time';
-			return {
-				model: this.model,
-				graphData: {},
-				logLevels: {},
-				rebalanceModalOpen: false,
-				lagData: [],
-				hideKafkaLagBox: false,
-				workerHostPort: ''
-			};
-		},
-		componentWillMount: function(){
-			$('.loader').show();
-			this.initializeData();
-		},
-		componentDidMount: function(){
-			$(".boot-switch.systemSum").bootstrapSwitch({
-				size: 'small',
-				onSwitchChange: function(event, state){
-					this.systemFlag = state;
-					this.initializeData();
-				}.bind(this)
-			});
-			$("#slideContent").hide();
-			$(".boot-switch.debug").bootstrapSwitch({
-				size: 'small',
-				onSwitchChange: function(event, state){
-					this.debugAction(state);
-				}.bind(this)
-			});
-			$("#lag-graph").hide();
-			$("#kafkaSpout").bootstrapSwitch({
-		    	onSwitchChange: function() {
-		    		$('#lag-graph, #lag-table').slideToggle();
-		    	}
-		    });
-			$('[data-rel="tooltip"]').tooltip();
-			$('.loader').hide();
-		},
-		componentWillUpdate: function(){
-			$('#collapse-spout').off('hidden.bs.collapse');
-			$('#collapse-spout').off('shown.bs.collapse');
-			$('#collapse-bolt').off('hidden.bs.collapse');
-			$('#collapse-bolt').off('shown.bs.collapse');
-			$('#modal-rebalance').off('hidden.bs.modal');
-			this.spoutCollection.getFirstPage().fullCollection.reset([]);
-			this.spouts = this.renderSpouts();
-			this.boltCollection.getFirstPage().fullCollection.reset([]);
-			this.bolts = this.renderBolts();
-		},
-		componentDidUpdate: function(){
-			$('#collapse-spout').on('hidden.bs.collapse', function () {
-				$("#spout-box").toggleClass("fa-compress fa-expand");
-			}).on('shown.bs.collapse', function() {
-				$("#spout-box").toggleClass("fa-compress fa-expand");
-			});
-
-			$('#collapse-bolt').on('hidden.bs.collapse', function () {
-				$("#bolt-box").toggleClass("fa-compress fa-expand");
-			}).on('shown.bs.collapse', function() {
-				$("#bolt-box").toggleClass("fa-compress fa-expand");
-			});
-			$('#modal-rebalance').on('hidden.bs.modal', function (e) {
-			  this.initializeData();
-			  this.setState({"rebalanceModalOpen":false});
-			}.bind(this));
-			if(this.state.rebalanceModalOpen){
-				$('#modal-rebalance').modal("show");
-			}
-			if(this.refs.barChart){
-				ReactDOM.findDOMNode(document.getElementById('lag-graph')).appendChild(this.refs.barChart.legendsEl)
-			}
-		},
-		initializeData: function(){
-			this.model.getData({
-				id: this.model.get('id'),
-				window: this.windowSize,
-				sys: this.systemFlag,
-				success: function(model, response){
-					if(response.error || model.error){
-						Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-					} else {
-						this.model.set(model);
-						this.setState({"model": this.model});
-					}
-				}.bind(this),
-				error: function(model, response, options){
-					Utils.notifyError("Error occured in fetching topology details.");
-				}
-			});
-			this.initializeGraphData();
-			this.initializeLogConfig();
-			this.initializeLagData();
-			this.initializeWorkerData();
-		},
-		initializeGraphData: function(){
-			$('#graphLoader').show();
-			this.model.getGraphData({
-				id: this.model.get('id'),
-				window: this.windowSize,
-				success: function(model, response){
-					if(response.error || model.error){
-						Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-					} else {
-						if(_.isString(model)){
-							model = JSON.parse(model);
-						}
-						this.setState({graphData: model});
-					}
-					$('#graphLoader').hide();
-				}.bind(this),
-				error: function(model, response, options){
-					Utils.notifyError("Error occured in fetching topology visualization data.");
-				}
-			});
-		},
-
-		initializeLogConfig: function() {
-			this.collection = new BaseCollection();
-			this.model.getLogConfig({
-				id: this.model.get('id'),
-				success: function(model, response){
-					if(response.error || model.error){
-						Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-					} else {
-						this.resetLogCollection(model);
-					}
-				}.bind(this),
-				error: function(model, response, options){
-					Utils.notifyError("Error occured in fetching log configuration data.");
-				}
-			});
-		},
-
-		initializeLagData: function(){
-			$('#kafkaLoader').show();
-			this.model.getTopologyLag({
-				id: this.model.get('id'),
-				success: function(model, response){
-					if(response.error || model.error){
-						Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-					} else {
-						if(model && _.keys(model).length > 0){
-							var keys = _.keys(model);
-							var arr = [];
-							for(var i = 0; i < keys.length; i++){
-								var data = model[keys[i]];
-								var topicKeys = _.keys(data.spoutLagResult);
-								for(var j = 0; j < topicKeys.length; j++){
-									var topicName = topicKeys[j];
-									var partitionData = data.spoutLagResult[topicName];
-									var id = _.keys(partitionData);
-									for(var k = 0; k < id.length; k++){
-										var partitionId = id[k];
-										var obj = partitionData[partitionId];
-										obj['spoutId'] = data.spoutId;
-										obj['spoutType'] = data.spoutType;
-										obj['partition'] = partitionId;
-										obj['topic'] = topicName;
-										arr.push(obj);
-									}
-								}
-							}
-							this.resetLagCollection(arr);
-						} else {
-							this.setState({hideKafkaLagBox : true});
-						}
-					}
-					$('#kafkaLoader').hide();
-				}.bind(this)
-			})
-		},
-		initializeWorkerData: function(){
-			this.model.getWorkerHost({
-				id: this.model.get('id'),
-				success: function(model, response){
-					if(response.error || model.error){
-						Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-					} else {
-						var workerHostPortArr = model.hostPortList;
-						var result = '';
-						for(var i = 0; i < workerHostPortArr.length; i++){
-							result += workerHostPortArr[i].host+':'+workerHostPortArr[i].port
-							if(i !== workerHostPortArr.length - 1){
-								result += ', \n';
-							}
-						}
-						this.setState({'workerHostPort': result})
-					}
-				}.bind(this)
-			})
-		},
-		resetLagCollection: function(model){
-			this.lagCollection.reset(model);
-			this.setState({"lagData": model});
-		},
-		getLagColums: function(){
-			var self = this;
-			return [
-				{name: 'spoutId', title: 'Id', tooltip:'Id'},
-				{name: 'topic', title: 'Topic', tooltip:'Topic'},
-				{name: 'partition', title: 'Partition', tooltip:'Partition'},
-				{name: 'logHeadOffset', title: 'Latest Offset', tooltip:'Latest Offset'},
-				{name: 'consumerCommittedOffset', title: 'Spout Committed Offset', tooltip:'Spout Committed Offset'},
-				{name: 'lag', title: 'Lag', tooltip:'Lag'},
-			];
-		},
-		resetLogCollection: function(model) {
-			this.collection.reset();
-			this.setState({logLevels: model.namedLoggerLevels});
-			var keys = _.keys(this.state.logLevels);
-				keys.map(function(key, index) {
-						var obj = this.state.logLevels[key];
-						var model = new BaseModel({
-							logger: key,
-							target_level: obj.target_level,
-							timeout: obj.timeout,
-							timeout_epoch: obj.timeout_epoch
-						});
-						this.collection.add(model);
-				}.bind(this));
-
-			this.collection.add(new BaseModel({
-					logger: 'com.your.organization.LoggerName',
-					target_level: 'ALL',
-					timeout: 30,
-					timeout_epoch: 0,
-					isAdd: true
-			}));
-		},
-
-		renderAccordion: function(type, header, searchField, searchCb, collection, emptyText, columns, toggleCb){
-			return ( 
-				<div className="box">
-					<div className="box-header" data-toggle="collapse" data-target={"#collapse-"+type} aria-expanded="false" aria-controls={"collapse-"+type}>
-						<h4>{header}</h4>
-						<h4 className="box-control">
-							<a href="javascript:void(0);" className="primary">
-								<i className="fa fa-compress" id={type+"-box"} onClick={toggleCb}></i>
-							</a>
-						</h4>
-					</div>
-					<div className="box-body collapse in" id={"collapse-"+type}>
-	                	<div className="input-group col-sm-4">
-							<input type="text"  onKeyUp={searchCb} className="form-control" placeholder={"Search by "+searchField} />
-							<span className="input-group-btn">
-							<button className="btn btn-primary" type="button"><i className="fa fa-search"></i></button>
-							</span>
-						</div>
-		                <Table className="table table-striped" collection={collection} emptyText={emptyText} columns={columns()} />
-						<Pagination collection={collection} />
-		            </div>
-				</div>
-			);
-		},
-		renderSpouts: function(){
-			if(this.state.model.has('spouts')){
-				Utils.ArrayToCollection(this.state.model.get('spouts'), this.spoutCollection);
-				this.spoutCollection.searchFields = ['spoutId'];
-				var searchCb = function(e){
-					var value = e.currentTarget.value;
-					this.spoutCollection.search(value);
-				}.bind(this);
-				var toggleCb = function(e){
-					$("#collapse-spout").collapse('toggle');
-				}
-				return this.renderAccordion('spout', 'Spouts', 'id', searchCb, this.spoutCollection, 'No spouts found !', this.getSpoutColumns, toggleCb);
-			} else {
-				return null;
-			}
-		},
-		getSpoutColumns: function(){
-			var self = this;
-			return [
-				{name: 'spoutId', title: 'Id', tooltip:'The ID assigned to a the Component by the Topology. Click on the name to view the Component\'s page.', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						var topologyId = self.state.model.has('id') ? self.state.model.get('id') : "";
-						return ( <a href={"#!/topology/"+topologyId+"/component/"+this.props.model.get('spoutId')}>{this.props.model.get('spoutId')}</a>);
-					}
-				})},
-				{name: 'executors', title: 'Executors', tooltip:'Executors are threads in a Worker process.'},
-				{name: 'tasks', title: 'Tasks', tooltip:'A Task is an instance of a Bolt or Spout. The number of Tasks is almost always equal to the number of Executors.'},
-				{name: 'emitted', title: 'Emitted', tooltip:'The number of Tuples emitted.'},
-				{name: 'transferred', title: 'Transferred', tooltip:'The number of Tuples emitted that sent to one or more bolts.'},
-				{name: 'completeLatency', title: 'Complete Latency (ms)', tooltip:'The average time a Tuple "tree" takes to be completely processed by the Topology. A value of 0 is expected if no acking is done.'},
-				{name: 'acked', title: 'Acked', tooltip:'The number of Tuple "trees" successfully processed. A value of 0 is expected if no acking is done.'},
-				{name: 'failed', title: 'Failed', tooltip:'The number of Tuple "trees" that were explicitly failed or timed out before acking was completed. A value of 0 is expected if no acking is done.'},
-				{name: 'errorHost', title: 'Error Host:Port', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						return (<span>{this.props.model.has('errorHost') && this.props.model.get('errorHost') !== '' ? this.props.model.get('errorHost')+':'+this.props.model.get('errorPort') : null}</span>);
-					}
-				})},
-				{name: 'lastError', title: 'Last Error'},
-				{name: 'errorTime', title: 'Error Time', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						if(this.props.model.get('errorTime') && this.props.model.get('errorTime') != 0) {
-							var d = new Date(this.props.model.get('errorTime') * 1000),
-							date = d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
-							return (<span>{date}</span>);
-						} else return (<span></span>);
-					}
-				})}
-			];
-		},
-		renderBolts: function(){
-			if(this.state.model.has('bolts')){
-				Utils.ArrayToCollection(this.state.model.get('bolts'), this.boltCollection);
-				this.boltCollection.searchFields = ['boltId'];
-				var searchCb = function(e){
-					var value = e.currentTarget.value;
-					this.boltCollection.search(value);
-				}.bind(this);
-				var toggleCb = function(e){
-					$("#collapse-bolt").collapse('toggle');
-				}
-				return this.renderAccordion('bolt', 'Bolts', 'id', searchCb, this.boltCollection, 'No bolts found !', this.getBoltColumns, toggleCb);
-			} else {
-				return null;
-			}
-		},
-		getBoltColumns: function(){
-			var self = this;
-			return [
-				{name: 'boltId', title: 'Id', tooltip:'The ID assigned to a the Component by the Topology. Click on the name to view the Component\'s page.', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						var topologyId = self.state.model.has('id') ? self.state.model.get('id') : "";
-						return ( <a href={"#!/topology/"+topologyId+"/component/"+this.props.model.get('boltId')}>{this.props.model.get('boltId')}</a>);
-					}
-				})},
-				{name: 'executors', title: 'Executors', tooltip:'Executors are threads in a Worker process.'},
-				{name: 'tasks', title: 'Tasks', tooltip:'A Task is an instance of a Bolt or Spout. The number of Tasks is almost always equal to the number of Executors.'},
-				{name: 'emitted', title: 'Emitted', tooltip:'The number of Tuples emitted.'},
-				{name: 'transferred', title: 'Transferred', tooltip:'The number of Tuples emitted that sent to one or more bolts.'},
-				{name: 'capacity', title: 'Capacity (last 10m)', tooltip:"If this is around 1.0, the corresponding Bolt is running as fast as it can, so you may want to increase the Bolt's parallelism. This is (number executed * average execute latency) / measurement time."},
-				{name: 'executeLatency', title: 'Execute Latency (ms)', tooltip:'The average time a Tuple spends in the execute method. The execute method may complete without sending an Ack for the tuple.'},
-				{name: 'executed', title: 'Executed', tooltip:'The number of incoming Tuples processed.'},
-				{name: 'processLatency', title: 'Process Latency (ms)', tooltip:'The average time it takes to Ack a Tuple after it is first received.  Bolts that join, aggregate or batch may not Ack a tuple until a number of other Tuples have been received.'},
-				{name: 'acked', title: 'Acked', tooltip:'The number of Tuples acknowledged by this Bolt.'},
-				{name: 'failed', title: 'Failed', tooltip:'The number of tuples Failed by this Bolt.'},
-				{name: 'errorHost', title: 'Error Host:Port', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						return (<span>{this.props.model.has('errorHost') && this.props.model.get('errorHost') !== '' ? this.props.model.get('errorHost')+':'+this.props.model.get('errorPort') : null}</span>);
-					}
-				})},
-				{name: 'lastError', title: 'Last Error'},
-				{name: 'errorTime', title: 'Error Time', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						if(this.props.model.get('errorTime') && this.props.model.get('errorTime') != 0) {
-							var d = new Date(this.props.model.get('errorTime') * 1000),
-							date = d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
-							return (<span>{date}</span>);
-						} else return (<span></span>);
-					}
-				})}
-			];
-		},
-		renderWindowOptions: function(){
-			if(this.state.model.has('topologyStats')){
-				return this.state.model.get('topologyStats').map(function(object, i){
-					return ( <option key={i} value={object.window}>{object.windowPretty}</option> );
-				});
-			} else {
-				return null;
-			}
-		},
-		handleWindowChange: function(e){
-			this.windowSize = e.currentTarget.value;
-			this.initializeData();
-		},
-		getLinks: function() {
-			var links = [
-				{link: '#!/dashboard', title: 'Dashboard'},
-				{link: '#!/topology', title: 'Topology Listing'},
-				{link: 'javascript:void(0);', title: this.state.model.has('name') ? this.state.model.get('name') : ""}
-				];
-			return links;
-		},
-
-		addLogLevel: function(e) {
-			var self = this;
-			var id = e.currentTarget.getAttribute('data-name');
-			var namedLoggerLevels = {};
-			var targetLevel = $(e.currentTarget).parent().siblings().find('.target-level').val(),
-				timeout = $(e.currentTarget).parent().siblings().find('.timeout').html(),
-				logger = $(e.currentTarget).parent().siblings().find('.logger').html();
-
-			namedLoggerLevels[logger] = {
-				target_level: targetLevel,
-				reset_level: 'INFO',
-				timeout: parseInt(timeout, 10)
-			};
-
-            var dataObj = {
-				namedLoggerLevels: namedLoggerLevels
-			}
-
-			this.model.saveLogConfig({
-				id: this.model.get('id'),
-				data: JSON.stringify(dataObj),
-				contentType: "application/json",
-              	success: function(model, response, options){
-              		if(response.error || model.error){
-						Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-					} else {
-						this.resetLogCollection(model);
-              			Utils.notifySuccess("Log configuration added successfully.");
-					}
-              	}.bind(this),
-				error: function(model, response, options){
-					Utils.notifyError("Error occured in saving log configuration data.");
-				}
-
-			});
-		},
-		applyLogLevel: function(e) {
-			var self = this;
-			var id = e.currentTarget.getAttribute('data-name');
-			var namedLoggerLevels = {};
-			var targetLevel = $(e.currentTarget).parents('td').siblings().find('.target-level').val(),
-				timeout = $(e.currentTarget).parents('td').siblings().find('.timeout').html(),
-				logger = $(e.currentTarget).parents('td').siblings().find('.logger').html();
-
-			namedLoggerLevels[logger] = {
-				target_level: targetLevel,
-				reset_level: 'INFO',
-				timeout: parseInt(timeout, 10)
-			};
-
-            var dataObj = {
-				namedLoggerLevels: namedLoggerLevels
-			}
-
-			this.model.saveLogConfig({
-				id: this.model.get('id'),
-				data: JSON.stringify(dataObj),
-				contentType: "application/json",
-              	success: function(model, response, options){
-              		if(response.error || model.error){
-						Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-					} else {
-						this.resetLogCollection(model);
-              			Utils.notifySuccess("Log configuration applied successfully.");
-					}
-              	}.bind(this),
-				error: function(model, response, options){
-					Utils.notifyError("Error occured in applying log configuration data.");
-				}
-			});
-		},
-		clearLogLevel: function(e) {
-			var self = this;
-			var id = e.currentTarget.getAttribute('data-name');
-			var namedLoggerLevels = {};
-			var logger = $(e.currentTarget).parents('td').siblings().find('.logger').html();
-
-			namedLoggerLevels[logger] = {
-				target_level: null,
-				reset_level: 'INFO',
-				timeout: 0
-			};
-
-            var dataObj = {
-				namedLoggerLevels: namedLoggerLevels
-			}
-
-			this.model.saveLogConfig({
-				id: this.model.get('id'),
-				data: JSON.stringify(dataObj),
-				contentType: "application/json",
-              	success: function(model, response, options){
-              		if(response.error || model.error){
-						Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-					} else {
-						this.resetLogCollection(model);
-              			Utils.notifySuccess("Log configuration cleared successfully.");
-					}
-              	}.bind(this),
-				error: function(model, response, options){
-					Utils.notifyError("Error occured in clearing log configuration data.");
-				}
-			});
-		},
-		getColumns: function(){
-			var self = this;
-			return [
-				{name: 'logger', title: 'Logger', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						if(this.props.model.get('isAdd'))
-							return (<a href="javascript:void(0)" className="x-editable logger">{this.props.model.get('logger')}</a>);
-						else return (<a href="javascript:void(0)" className="logger">{this.props.model.get('logger')}</a>);
-					},
-					componentDidMount: function() {
-						$(".x-editable").editable({
-							mode: 'inline'
-						});
-					}})
-			    },
-				{name: 'target_level', title: 'Level', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function() {
-						return (
-							<select className="form-control target-level" defaultValue={this.props.model.get('target_level')}>
-								<option value="ALL">ALL</option>
-								<option value="TRACE">TRACE</option>
-								<option value="DEBUG">DEBUG</option>
-								<option value="INFO">INFO</option>
-								<option value="WARN">WARN</option>
-								<option value="ERROR">ERROR</option>
-								<option value="FATAL">FATAL</option>
-								<option value="OFF">OFF</option>
-							</select>
-							);
-					}
-				})},
-				{name: 'timeout', title: 'Timeout', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						return (<a href="javascript:void(0)" className="x-editable timeout">{this.props.model.get('timeout')}</a>);
-					},
-					componentDidMount: function() {
-						$(".x-editable").editable({
-							mode: 'inline'
-						});
-					}})
-			    },
-				{name: 'timeout_epoch', title: 'Expires At', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						if(this.props.model.get('timeout_epoch') != 0) {
-							var d = new Date(this.props.model.get('timeout_epoch')),
-							date = d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
-							return (<span>{date}</span>);
-						} else return (<span></span>);
-
-					}
-					})
-				},
-				{name: 'action', title: 'Action', component: React.createClass({
-					propTypes: {
-						model: React.PropTypes.object.isRequired
-					},
-					render: function(){
-						if(this.props.model.get('isAdd'))
-							return(
-							<a href="javascript:void(0)"  data-name={this.props.model.get('logger')} className="btn btn-primary btn-xs" onClick={self.addLogLevel}><i className="fa fa-plus"></i></a>
-							)
-						else
-						return (
-							<span>
-							<a href="javascript:void(0)" data-name={this.props.model.get('logger')} className="btn btn-success btn-xs" onClick={self.applyLogLevel}><i className="fa fa-check"></i></a>&nbsp;
-							<a href="javascript:void(0)" data-name={this.props.model.get('logger')} className="btn btn-danger btn-xs" onClick={self.clearLogLevel}><i className="fa fa-times"></i></a>
-							</span>
-						);
-					}
-				})}
-			];
-		},
-		toggleSlide: function() {
-			$("#slideContent").slideToggle();
-		},
-		
-		renderStatsRow: function(){
-			var statsArr = this.state.model.get('topologyStats');
-			if(statsArr){
-				return statsArr.map(function(stats, i){
-					return (
-						<tr key={i}>
-							<td>{stats.windowPretty}</td>
-							<td>{stats.emitted}</td>
-							<td>{stats.transferred}</td>
-							<td>{stats.completeLatency}</td>
-							<td>{stats.acked}</td>
-							<td>{stats.failed}</td>
-						</tr>
-					);
-				});
-			}
-		},
-		render: function() {
-			var status = this.state.model.has('status') ? this.state.model.get('status') : null;
-			var workersTotal = this.state.model.has('workersTotal') ? this.state.model.get('workersTotal').toString() : '0';
-			if(this.state.model.get('debug')){
-				$(".boot-switch.debug").bootstrapSwitch('state', true, true);
-			} else {
-				$(".boot-switch.debug").bootstrapSwitch('state', false, true);
-			}
-			return (
-				<div>
-					<Breadcrumbs links={this.getLinks()} />
-					<SearchLogs id={this.model.get('id')}/>
-					<div className="row">
-						<div className="col-sm-12">
-							<div className="box filter">
-								<div className="box-body form-horizontal">
-									<div className="form-group no-margin">
-										<label className="col-sm-1 control-label">Window</label>
-										<div className="col-sm-2">
-											<select className="form-control" onChange={this.handleWindowChange} value={this.windowSize}>
-												{this.renderWindowOptions()}
-											</select>
-										</div>
-										<label className="col-sm-2 control-label">System Summary</label>
-										<div className="col-sm-2">
-											<input className="boot-switch systemSum" type="checkbox" />
-										</div>
-										<label className="col-sm-1 control-label">Debug</label>
-										<div className="col-sm-1">
-											<input className="boot-switch debug" type="checkbox"/>
-										</div>
-										<div className="col-sm-3 text-right">
-											<div className="btn-group" role="group">
-												<button type="button" className="btn btn-primary" onClick={this.handleTopologyActivation} title="Activate" data-rel="tooltip" disabled={status === 'ACTIVE' ? "disabled" : null}>
-													<i className="fa fa-play"></i>
-												</button>
-												<button type="button" className="btn btn-primary" onClick={this.handleTopologyDeactivation} title="Deactivate" data-rel="tooltip" disabled={status === 'INACTIVE' ? "disabled" : null}>
-													<i className="fa fa-stop"></i>
-												</button>
-												<button type="button" className="btn btn-primary" onClick={this.handleTopologyRebalancing} title="Rebalance" data-rel="tooltip" disabled={status === 'REBALANCING' ? "disabled" : null}>
-													<i className="fa fa-balance-scale"></i>
-												</button>
-												<button type="button" className="btn btn-primary" onClick={this.handleTopologyKilling} title="Kill" data-rel="tooltip" disabled={status === 'KILLED' ? "disabled" : null}>
-													<i className="fa fa-ban"></i>
-												</button>
-												<button type="button" className="btn btn-primary" onClick={this.toggleSlide} title="Change Log Level" data-rel="tooltip">
-													<i className="fa fa-file-o"></i>
-												</button>
-											</div>
-										</div>
-									</div>
-									<div className="row" id="slideContent">
-										<div className="col-sm-12">
-											<hr/>
-											<h4 className="col-sm-offset-5">Change Log Level</h4>
-											<p>Modify the logger levels for topology. Note that applying a setting restarts the timer in the workers. To configure the root logger, use the name ROOT.</p>
-											<Table className="table no-margin" collection={this.collection} columns={this.getColumns()}/>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div className="row">
-						<div className="col-sm-5">
-							<div className="summary-tile">
-								<div className="summary-title">Topology Summary</div>
-								<div className="summary-body form-horizontal">
-									<div className="form-group">
-										<label className="col-sm-4 control-label">ID:</label>
-										<div className="col-sm-8">
-										<p className="form-control-static">{this.state.model.get('id')}</p>
-										</div>
-									</div>
-									<div className="form-group">
-										<label className="col-sm-4 control-label">Owner:</label>
-										<div className="col-sm-8">
-										<p className="form-control-static">{this.state.model.get('owner')}</p>
-										</div>
-									</div>
-									<div className="form-group">
-										<label className="col-sm-4 control-label">Status:</label>
-										<div className="col-sm-8">
-										<p className="form-control-static">{this.state.model.get('status')}</p>
-										</div>
-									</div>
-									<div className="form-group">
-										<label className="col-sm-4 control-label">Uptime:</label>
-										<div className="col-sm-8">
-										<p className="form-control-static">{this.state.model.get('uptime')}</p>
-										</div>
-									</div>
-									<div className="form-group">
-										<label className="col-sm-4 control-label">Workers:</label>
-										<div className="col-sm-8">
-										<p className="form-control-static">{this.state.model.get('workersTotal')}</p>
-										</div>
-									</div>
-									<div className="form-group">
-										<label className="col-sm-4 control-label">Executors:</label>
-										<div className="col-sm-8">
-										<p className="form-control-static">{this.state.model.get('executorsTotal')}</p>
-										</div>
-									</div>
-									<div className="form-group">
-										<label className="col-sm-4 control-label">Tasks:</label>
-										<div className="col-sm-8">
-										<p className="form-control-static">{this.state.model.get('tasksTotal')}</p>
-										</div>
-									</div>
-									<div className="form-group">
-										<label className="col-sm-4 control-label">Memory:</label>
-										<div className="col-sm-8">
-										<p className="form-control-static">{this.state.model.get('assignedTotalMem')}</p>
-										</div>
-									</div>
-									<div className="form-group">
-										<label className="col-sm-4 control-label">Worker-Host:Port:</label>
-										<div className="col-sm-8">
-										<p className="form-control-static preformatted">{this.state.workerHostPort}</p>
-										</div>
-									</div>
-
-								</div>
-							</div>
-						</div>
-						<div className="col-sm-7">
-							<div className="stats-tile">
-								<div className="stats-title">Topology Stats</div>
-								<div className="stats-body">
-									<table className="table table-enlarge">
-										<thead>
-											<tr>
-												<th><span data-rel="tooltip" title="The past period of time for which the statistics apply.">Window</span></th>
-												<th><span data-rel="tooltip" title="The number of Tuples emitted.">Emitted</span></th>
-												<th><span data-rel="tooltip" title="The number of Tuples emitted that sent to one or more bolts.">Transferred</span></th>
-												<th><span data-rel="tooltip" title='The average time a Tuple "tree" takes to be completely processed by the Topology. A value of 0 is expected if no acking is done.'>Complete Latency (ms)</span></th>
-												<th><span data-rel="tooltip" title='The number of Tuple "trees" successfully processed. A value of 0 is expected if no acking is done.'>Acked</span></th>
-												<th><span data-rel="tooltip" title='The number of Tuple "trees" that were explicitly failed or timed out before acking was completed. A value of 0 is expected if no acking is done.'>Failed</span></th>
-											</tr>
-										</thead>
-										<tbody>
-											{this.renderStatsRow()}
-										</tbody>
-									</table>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div className="row">
-						<div className="col-sm-12">
-							<div className="inner-loader" id="graphLoader" />
-							<TopologyDetailGraph model={this.state.model} graphData={this.state.graphData}/>
-						</div>
-					</div>
-					{this.state.hideKafkaLagBox ? null : 
-						<div className="row">
-							<div className="col-sm-12">
-								<div className="box">
-									<div className="box-header">
-										<h4>Kafka Spout Lag</h4>
-										<div className="box-control">
-											<input 
-												id="kafkaSpout" 
-												type="checkbox" 
-												data-size="mini" 
-												data-off-color="success" 
-												data-off-text="Table" 
-												data-on-color="info" 
-												data-on-text="Graph" />
-										</div>
-									</div>
-									<div className="box-body">
-										<div className="row">
-											<div className="col-sm-12">
-												<div className="inner-loader" id="kafkaLoader" />
-												<div id="lag-graph">
-													{this.lagCollection.length > 0 ? 
-													<BarChart
-														ref="barChart"
-														width={window != window.parent ? 1100 : 1300}
-														height={400}
-														xAttr="spoutId-partition"
-														yAttr="count"
-														data={this.lagCollection.toJSON().map(function(d){
-															return {
-																'Latest Offset': d.logHeadOffset,
-																'Spout Committed Offset': d.consumerCommittedOffset,
-																'spoutId-partition': d.spoutId+'-'+d.partition
-															};
-														})}
-													/>
-													: null}
-												</div>
-												<div id="lag-table">
-													<Table 
-														className="table table-striped table-bordered" 
-														collection={this.lagCollection} 
-														emptyText="No Data Found." 
-														columns={this.getLagColums()} 
-													/>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					}
-					<div className="row">
-						<div className="col-sm-12">
-							{this.spouts}
-						</div>
-					</div>
-					<div className="row">
-						<div className="col-sm-12">
-							{this.bolts}
-						</div>
-					</div>
-					<div className="row">
-						<div className="col-sm-12">
-							<TopologyConfiguration configArr={this.state.model.get('configuration') ? this.state.model.get('configuration') : {}}/>
-						</div>
-					</div>
-					{this.state.rebalanceModalOpen ? <RebalanceView modalId="modal-rebalance" topologyId={this.state.model.get('id')} topologyExecutors={workersTotal} spouts={this.state.model.get('spouts') ? this.state.model.get('spouts') : []} bolts={this.state.model.get('bolts') ? this.state.model.get('bolts') : []}/> : null}
-				</div>
-			);
-	    },
-	    handleTopologyActivation: function(e){
-	    	if(this.model.get('status') !== 'ACTIVE'){
-		    	var msg = "Do you really want to activate this topology ?";
-		    	var successCb = function(){
-		    		this.model.activateTopology({
-		    			id: this.model.get('id'),
-		    			success: function(model, response){
-		    				if(response.error || model.error){
-								Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-							} else {
-								this.initializeData();
-		    					Utils.notifySuccess("Topology activated successfully.")
-							}
-		    			}.bind(this),
-						error: function(model, response, options){
-							Utils.notifyError("Error occured in activating topology.");
-						}
-		    		});
-		    	}.bind(this);
-		    	Utils.ConfirmDialog(msg, '', successCb);
-	    	}
-	    },
-	    handleTopologyDeactivation: function(e){
-	    	if(this.model.get('status') !== 'INACTIVE'){
-	    		var msg = "Do you really want to deactivate this topology ?";
-		    	var successCb = function(){
-		    		this.model.deactivateTopology({
-		    			id: this.model.get('id'),
-		    			success: function(model, response){
-		    				if(response.error || model.error){
-								Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-							} else {
-								this.initializeData();
-		    					Utils.notifySuccess("Topology deactivated successfully.")
-							}
-		    			}.bind(this),
-						error: function(model, response, options){
-							Utils.notifyError("Error occured in deactivating topology.");
-						}
-		    		});
-		    	}.bind(this);
-		    	Utils.ConfirmDialog(msg, '', successCb);
-	    	}
-	    },
-	    handleTopologyRebalancing: function(e){
-	    	if(this.model.get('status') !== 'REBALANCING'){
-	    		this.setState({"rebalanceModalOpen":true});
-	    	}
-	    },
-	    handleTopologyKilling: function(e){
-	    	if(this.model.get('status') !== 'KILLED'){
-	    		bootbox.prompt({
-			        title: 'Are you sure you want to kill this topology ? If yes, please, specify wait time in seconds.',
-			        value: "30",
-			        buttons: {
-			          confirm: {
-			            label: 'Yes',
-			            className: "btn-success",
-			          },
-			          cancel: {
-			            label: 'No',
-			            className: "btn-default",
-			          }
-			        },
-			        callback: function(result) {
-			          if(result != null){
-			            this.model.killTopology({
-			    			id: this.model.get('id'),
-			    			waitTime: result,
-			    			success: function(model, response){
-			    				if(response.error || model.error){
-									Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-								} else {
-									this.initializeData();
-			    					Utils.notifySuccess("Topology killed successfully.")
-								}
-			    			}.bind(this),
-							error: function(model, response, options){
-								Utils.notifyError("Error occured in killing topology.");
-							}
-			    		});
-			          }
-			        }.bind(this)
-			    });
-	    	}
-	    },
-	    debugAction: function(toEnableFlag){
-    		if(toEnableFlag){
-    			bootbox.prompt({
-			        title: 'Do you really want to debug this topology ? If yes, please, specify sampling percentage.',
-			        value: this.model.get("samplingPct") ? this.model.get("samplingPct") : '10',
-			        buttons: {
-			          confirm: {
-			            label: 'Yes',
-			            className: "btn-success",
-			          },
-			          cancel: {
-			            label: 'No',
-			            className: "btn-default",
-			          }
-			        },
-			        callback: function(result) {
-					  if(result == null) {
-						$(".boot-switch.debug").bootstrapSwitch('toggleState', true);
-			          } else if(result == "" || isNaN(result) || result < 0) {
-						Utils.notifyError("Enter valid sampling percentage");
-						$(".boot-switch.debug").bootstrapSwitch('toggleState', true);
-			          } else {
-			            this.model.debugTopology({
-			    			id: this.model.get('id'),
-			    			debugType: 'enable',
-			    			percent: result,
-			    			success: function(model, response){
-			    				if(response.error || model.error){
-									Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-								} else {
-									this.initializeData();
-			    					Utils.notifySuccess("Debugging enabled successfully.")
-								}
-			    			}.bind(this),
-							error: function(model, response, options){
-								Utils.notifyError("Error occured in enabling debugging.");
-							}
-			    		});
-			          }
-			        }.bind(this)
-			    });
-    		} else {
-    			var title = "Do you really want to stop debugging this topology ?";
-		    	var successCb = function(){
-		    		this.model.debugTopology({
-		    			id: this.model.get('id'),
-		    			debugType: 'disable',
-		    			percent: '0',
-		    			success: function(model, response){
-		    				if(response.error || model.error){
-								Utils.notifyError(response.error || model.error+'('+model.errorMessage.split('(')[0]+')');
-							} else {
-								this.initializeData();
-		    					Utils.notifySuccess("Debugging disabled successfully.")
-							}
-		    			}.bind(this),
-						error: function(model, response, options){
-							Utils.notifyError("Error occured in disabling debugging.");
-						}
-		    		});
-		    	}.bind(this);
-		    	var cancelCb = function(){
-		    		$(".boot-switch.debug").bootstrapSwitch('toggleState', true)
-		    	}.bind(this);
-		    	Utils.ConfirmDialog('&nbsp;', title, successCb, cancelCb);
-    		}
-	    },
-	});
-});

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/scripts/views/TopologyListingView.jsx
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/views/TopologyListingView.jsx b/contrib/views/storm/src/main/resources/scripts/views/TopologyListingView.jsx
deleted file mode 100644
index 25441fa..0000000
--- a/contrib/views/storm/src/main/resources/scripts/views/TopologyListingView.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- 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.
-*/
-
-define([
-	'jsx!components/Table',
-	'react',
-	'react-dom',
-	'jsx!containers/TopologyListing',
-	'jsx!components/Breadcrumbs'
-	],function(Table, React, ReactDOM, TopologyListing, Breadcrumbs){
-	'use strict';
-
-	return React.createClass({
-		displayName: 'TopologyListingView',
-		getInitialState: function(){
-			return null;
-		},
-		componentWillMount: function(){
-			$('.loader').show();
-		},
-		componentDidMount: function(){
-			$('.loader').hide();
-		},
-		componentWillUpdate: function(){
-			$('.loader').show();
-		},
-		componentDidUpdate: function(){
-			$('.loader').hide();
-		},
-		render: function() {			
-			return (
-				<div>					
-					<Breadcrumbs links={this.getLinks()} />
-					<div className="row">
-						<div className="col-sm-12">
-							<TopologyListing />
-						</div>
-					</div>
-				</div>
-			);
-	    },
-	    getLinks: function() {
-	    	var links = [
-				{link: '#!/dashboard', title: 'Dashboard'},
-				{link: 'javascript:void(0);', title: 'Topology Listing'}
-				];
-			return links;
-	    }
-	});
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/styles/style.css
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/styles/style.css b/contrib/views/storm/src/main/resources/styles/style.css
deleted file mode 100644
index f6b1685..0000000
--- a/contrib/views/storm/src/main/resources/styles/style.css
+++ /dev/null
@@ -1,579 +0,0 @@
-/**
- 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.
-*/
-/*
-    Theme: Apache Storm
-    Author: Sanket
-*/
-
-*:focus {
-    outline: none !important;
-}
-
-body {
-    font-family: 'Lato', sans-serif;
-    color: #4b4b4b;
-}
-
-/* Bootstrap Extended */
-.no-margin {
-    margin: 0px;
-}
-
-.row-margin-bottom {
-  margin-bottom: 20px;
-}
- 
-.table-borderless>tbody>tr>td, 
-.table-borderless>tbody>tr>th, 
-.table-borderless>tfoot>tr>td, 
-.table-borderless>tfoot>tr>th, 
-.table-borderless>thead>tr>td, 
-.table-borderless>thead>tr>th {
-    border-top: none;
-}
-.table-enlarge > thead > tr > th,
-.table-enlarge > tbody > tr > th,
-.table-enlarge > tfoot > tr > th,
-.table-enlarge > thead > tr > td,
-.table-enlarge > tbody > tr > td,
-.table-enlarge > tfoot > tr > td {
-  padding: 11px;
-}
-#breadcrumb {
-    margin-top: 15px;
-    list-style: none;
-    display: inline-block;
-    padding: 0px;
-}
-#breadcrumb .icon {
-    font-size: 14px;
-}
-#breadcrumb li {
-    float: left;
-}
-#breadcrumb li a {
-    color: #FFF;
-    display: block;
-    background: #27a9e1;
-    text-decoration: none;
-    position: relative;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px 0 5px;
-    text-align: center;
-    margin-right: 23px;
-}
-#breadcrumb li:nth-child(even) a {
-    background-color: #1b75bb;
-}
-#breadcrumb li:nth-child(even) a:before {
-    border-color: #1b75bb;
-    border-left-color: transparent;
-}
-#breadcrumb li:nth-child(even) a:after {
-    border-left-color: #1b75bb;
-}
-#breadcrumb li:first-child a {
-    padding-left: 15px;
-    -moz-border-radius: 4px 0 0 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px 0 0 4px;
-}
-#breadcrumb li:first-child a:before {
-    border: none;
-}
-#breadcrumb li:last-child a {
-    padding-right: 15px;
-    -moz-border-radius: 0 4px 4px 0;
-    -webkit-border-radius: 0;
-    border-radius: 0 4px 4px 0;
-}
-#breadcrumb li:last-child a:after {
-    border: none;
-}
-#breadcrumb li a:before, #breadcrumb li a:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    border: 0 solid #27a9e1;
-    border-width: 15px 10px;
-    width: 0;
-    height: 0;
-}
-#breadcrumb li a:before {
-    left: -20px;
-    border-left-color: transparent;
-}
-#breadcrumb li a:after {
-    left: 100%;
-    border-color: transparent;
-    border-left-color: #27a9e1;
-}
-#breadcrumb li a:hover {
-    background-color: #1bbb60;
-}
-#breadcrumb li a:hover:before {
-    border-color: #1bbb60;
-    border-left-color: transparent;
-}
-#breadcrumb li a:hover:after {
-    border-left-color: #1bbb60;
-}
-
-.preformatted {
-  white-space: pre;
-}
-
-/* Boxes */
-.box {
-    position: relative;
-    margin-bottom: 15px;
-    border: 1px #bcbcbc solid;
-    border-bottom-width: 3px;
-    border-radius: 5px;
-}
-.box .box-header:before,
-.box .box-header:after {
-    content: " ";
-    display: table;
-}
-.box .box-header:after  {
-    clear: both;
-}
-.box .box-header {
-    background-color: #f3f6f9;
-    padding: 0 10px;
-    border-bottom: 1px #bcbcbc solid;
-    border-radius: 4px 4px 0px 0px;
-}
-.box .box-header h4 {  
-    float: left;  
-    margin: 0px;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 40px;
-    letter-spacing: 1px;
-}
-.box .box-header .box-control {
-    float: right;
-}
-.box .box-header .box-control .bootstrap-switch {
-  margin: 9px 2px;
-}
-.box .box-header .box-control a {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    font-size: 12px;
-    line-height: 20px;
-    text-align: center;
-    margin: 10px 2px;
-    border-radius: 50%;
-    background-color: #4b4b4b;
-    color: rgba(255,255,255,0.75);
-}
-/*.box .box-header .box-control a i {
-    visibility: hidden;
-}
-.box .box-header .box-control:hover a i {
-    visibility: visible;
-}*/
-.box .box-header .box-control a.primary {background-color: #1b75bb;}
-.box .box-header .box-control a.success {background-color: #1bbb60;}
-.box .box-header .box-control a.info {background-color: #27a9e1;}
-.box .box-header .box-control a.warning {background-color: #fbaf3f;}
-.box .box-header .box-control a.danger {background-color: #ff5816;}
-.box .box-header .box-control a.secondary {background-color: #df206a;}
-
-.box .box-body {
-    padding: 10px;
-}
-.box .box-body.paddless {
-    padding: 0px;
-}
-
-.control-search {
-    position: relative;
-}
-.control-search input[type="text"] {
-    width: 250px;
-    margin-top: 5px;
-    padding: 4px 24px 4px 4px;
-    background-color: transparent;
-    border: none;
-    border-bottom: 1px #BCBCBC solid;
-}
-.control-search i.fa-search {
-    position: absolute;
-    right: 6px;
-    top: 12px;
-    color: #999;
-}
-
-.box.filter {
-    border-color: #27a9e1;
-}
-.box.info {
-  border-color: #27a9e1;
-}
-.box.info .box-header {
-  background-color: #E9F8FF;
-  border-color:  #27a9e1;
-}
-.box.warning {
-  border-color: #fbaf3f;
-}
-.box.warning .box-header {
-  background-color: #FFF6E9;
-  border-color:  #fbaf3f;
-}
-
-/*Tiles*/
-.tile {
-    display: block;
-    margin-bottom: 15px;
-    color: #fff;
-    border-radius: 2px;
-}
-.tile .tile-header {
-    letter-spacing: 2px;
-    padding: 8px 12px;
-    line-height: 1.5;
-    text-transform: uppercase;
-    font-size: 11px;
-    border-top-right-radius: 2px;
-    border-top-left-radius: 2px;
-}
-.tile .tile-body {
-    overflow: hidden;
-    padding: 12px;
-}
-.tile .tile-body i.fa {
-    font-size: 30px;
-    opacity: .4;
-}
-.tile .tile-body .count {
-    float: right;
-    font-size: 30px;
-    line-height: 30px;
-    font-weight: 300;
-}
-.tile.primary {
-    background: #1b75bb;
-}
-.tile.primary > .tile-header {
-    background-color: #085C9D;
-}
-.tile.warning {
-    background: #fbaf3f;
-}
-.tile.warning > .tile-header {
-    background-color: #ED940E;
-}
-.tile.success {
-    background: #1bbb60;
-}
-.tile.success > .tile-header {
-    background-color: #00A347;
-}
-.tile.danger {
-    background: #ff5816;
-}
-.tile.danger > .tile-header {
-    background-color: #D13B00;
-}
-
-.summary-tile {
-  display: block;
-  margin-bottom: 15px;
-  color: #fff;
-  border-radius: 5px;
-  background-color: #1B76BB;
-}
-.summary-tile .summary-title {
-  letter-spacing: 2px;
-  padding: 8px 12px;
-  line-height: 1.5;
-  text-transform: uppercase;
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  background-color: #085C9D;
-}
-.summary-tile .summary-body {
-  overflow: hidden;
-  padding: 12px;
-}
-.summary-tile .summary-body a{
-  color: #fff;
-  text-decoration: underline;
-}
-.summary-tile .summary-body strong {
-  display: inline-block;
-  width: 120px;
-  margin-right: 10px;
-  text-align: right;
-}
-.summary-tile .summary-body .form-group {
-  margin-bottom: 0px;
-}
-
-.stats-tile {
-  display: block;
-  margin-bottom: 15px;
-  color: #333;
-  border-radius: 5px;
-  background-color: #EEEEEE;
-}
-.stats-tile .stats-title {
-  letter-spacing: 2px;
-  padding: 8px 12px;
-  line-height: 1.5;
-  text-transform: uppercase;
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  background-color: #C0C0C0;
-}
-.stats-tile .stats-body {
-  overflow: hidden;
-  padding: 12px;
-}
-
-/* Detail Page */
-.graph-bg {
-    background-image: linear-gradient(to right, rgb(0, 0, 0) -10px, transparent 1px), linear-gradient(rgb(0, 0, 0) -10px, transparent 1px);
-    background-size: 10px 10px;
-    min-height: 300px;
-}
-.summary-panel {
-    font-size: 90%;
-    padding: 10px;
-    background: #f9f9f9;
-    border: 1px solid #ccc;
-    border-bottom-width: 2px;
-    border-left-width: 2px;
-    box-shadow: -1px 1px 5px rgba(0,0,0,0.25);
-}
-.circle {
-    float: left;
-    margin-right: 15px;
-}
-
-/*
-REACT
- */
-#supervisorCount,
-#slotsCount {
-    position: 'relative';
-    display: 'inline-block'
-}
-#supervisorCount > svg > g > text,
-#slotsCount > svg > g > text {
-    font-size: 27px;
-    fill: white;
-}
-.supervisor-table svg > g > text {
-    font-size: 12px;
-    fill: black;
-}
-#supervisorCount > svg > g > text.percent,
-#slotsCount > svg > g > text.percent {
-    font-size: 18px;
-}
-#supervisorCount > svg > g > text.graphVal,
-#slotsCount > svg > g > text.graphVal {
-    font-weight: 300;
-}
-/* D3 */
-.d3-tip {
-    z-index: 99;
-    line-height: 1;
-    font-weight: bold;
-    padding: 10px;
-    background: rgba(0, 0, 0, 0.8);
-    color: #fff;
-    border-radius: 2px;
-    font-size: 12px;
-}
-.d3-tip .summary {
-    padding: 3px;
-}
-
-/* Creates a small triangle extender for the tooltip */
-.d3-tip:after {
-    box-sizing: border-box;
-    display: inline;
-    font-size: 16px;
-    width: 100%;
-    line-height: 1;
-    color: rgba(0, 0, 0, 0.8);
-    content: "\25BC";
-    position: absolute;
-    text-align: center;
-}
-.node ellipse {
-  stroke: #333;
-  fill: #fff;
-  stroke-width: 1px;
-}
-.edgePath path {
-  stroke: grey;
-  fill: none;
-  cursor: default;
-  stroke-width: 2;
-  stroke-dasharray: 5, 5;
-}
-
-/* Style northward tooltips differently */
-.d3-tip.n:after {
-    margin: -4px 0 0 0;
-    top: 100%;
-    left: 0;
-}
-path.link {
-  fill: none;
-  stroke: grey;
-  cursor: default;
-}
-
-path.link.dragline {
-  pointer-events: none;
-}
-
-path.link.hidden {
-  stroke-width: 0;
-}
-
-circle.node {
-  stroke-width: 1.5px;
-  cursor: pointer;
-}
-
-circle.node.reflexive {
-  stroke: #000 !important;
-  stroke-width: 2.5px;
-}
-text.id {
-  text-anchor: middle;
-  font-weight: bold;
-}
-.d3-tip ul {
-  padding:0; 
-  margin:0; 
-  list-style: none;
-}

-.d3-tip ul li {
-  font-size: 12px; 
-  line-height: 20px;
-}
-marker {
-  fill: grey;
-}
-.axis path, .axis rect {
-    fill: none;
-    stroke: grey;
-    stroke-width: 1;
-    shape-rendering: crispEdges;
-}
-
-.axis line {
-    stroke: grey;
-    stroke-width: 1;
-    shape-rendering: crispEdges;
-}
-
-.d3-tip table {
-  margin-top: 8px;
-  width : 100%;
-}
-.d3-tip table tr td {
-  padding: 3px;
-  border: 1px red solid;
-}
-ul.legends {
-  text-align: center;
-}
-ul.legends li.legend{
-  display: inline-block;
-  margin-right: 10px;
-}
-.table-summary {
-    font-size: 12px;
-    font-weight: 700;
-    -webkit-font-smoothing: antialiased;
-}
-.summary-badge {
-    font-weight: bold;
-    padding: 1px 4px;
-    margin: 1px;
-    border: 1px solid #d8d8d8;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-}
-[data-toggle="collapse"]{
-    cursor: pointer;
-}
-#ex1Slider {
-  margin-left: 13px;
-  margin-right: 13px;
-}
-#modal-rebalance .modal-body{
-  max-height: 450px;
-  overflow-y: auto; 
-}
-.loader {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: url('../images/loader.gif') rgba(255,255,255,0.75) no-repeat center center;
-  z-index: 9;
-}
-.inner-loader{
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  right: 0px;
-  background: url('../images/loader.gif') rgba(255,255,255,0.75) no-repeat center center;
-}
-.searchbar{
-  margin-top: 15px;
-}
-.searchbar .btn-group{
-  display: flex !important;
-}
-.searchbar .dropdown-toggle{
-  border-radius: 0;
-  margin-left: -1px;
-}
-.searchbar .btn-group .btn {
-    margin-left: -1px;
-}
-.searchbar .dropdown-menu{
-  padding: 10px 15px 5px;
-}
-.searchbar .dropdown-menu input[type="checkbox"]{
-  vertical-align: top;
-  margin-right: 5px;
-}
-.searchbar .open > .dropdown-toggle.btn-default:hover, 
-.searchbar .open > .dropdown-toggle.btn-default:focus{
-  border: 1px solid transparent;
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/.babelrc
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/.babelrc b/contrib/views/storm/src/main/resources/ui/.babelrc
new file mode 100644
index 0000000..b533394
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/.babelrc
@@ -0,0 +1,25 @@
+{
+  "presets": [
+    ["es2015"],
+    "react",
+    "stage-0",
+    "airbnb"
+  ],
+  "plugins": [
+    "transform-runtime",
+    "transform-decorators-legacy",
+    "transform-flow-strip-types",
+    "transform-es2015-modules-commonjs",
+    "transform-class-properties",
+    "react-hot-loader/babel",
+    "transform-async-to-generator",
+    ["babel-root-slash-import", {
+      "rootPathSuffix": "./app/scripts"
+    }]
+  ],
+  "env": {
+    "production": {
+      "plugins": ["transform-react-remove-prop-types", "transform-react-constant-elements","transform-async-to-generator"]
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/.eslintignore.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/.eslintignore.js b/contrib/views/storm/src/main/resources/ui/.eslintignore.js
new file mode 100644
index 0000000..2c4e446
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/.eslintignore.js
@@ -0,0 +1,3 @@
+node_modules/*
+**/bower_components/*
+**/vendor/*.js

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/.eslintrc.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/.eslintrc.js b/contrib/views/storm/src/main/resources/ui/.eslintrc.js
new file mode 100644
index 0000000..473fe48
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/.eslintrc.js
@@ -0,0 +1,58 @@
+module.exports = {
+  "parser": "babel-eslint",
+  "rules": {
+    "strict": 0
+  },
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jquery": true
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "plugins": [
+    "header",
+    "react"
+  ],
+  "rules": {
+    "header/header": [2, "block", [
+      "*",
+      " 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.",
+      "*"
+    ]],
+    "comma-dangle": [
+      "error",
+      "never"
+    ],
+    "indent": [
+      "error",
+      2
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    /* Advanced Rules*/
+    "no-unexpected-multiline": 2,
+    "curly": [2,"all"]
+  }
+};

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/app/scripts/app.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/app/scripts/app.js b/contrib/views/storm/src/main/resources/ui/app/scripts/app.js
new file mode 100644
index 0000000..41a7fa9
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/app/scripts/app.js
@@ -0,0 +1,40 @@
+/**
+ 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.
+**/
+
+import React, {Component} from 'react';
+import routes from './routers/routes';
+import {render} from 'react-dom';
+import {Router, browserHistory, hashHistory} from 'react-router';
+import {getStormVersion} from './utils/Constants';
+
+class App extends Component {
+  constructor() {
+    super();
+    this.fetchVersion();
+  }
+  fetchVersion(){
+    getStormVersion().then((res) => {
+      this.forceUpdate();
+    });
+  }
+  render() {
+    return (<Router ref="router" history={hashHistory} routes={routes}/>);
+  }
+}
+
+export default App;

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/app/scripts/components/BarChart.jsx
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/app/scripts/components/BarChart.jsx b/contrib/views/storm/src/main/resources/ui/app/scripts/components/BarChart.jsx
new file mode 100644
index 0000000..dffd898
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/app/scripts/components/BarChart.jsx
@@ -0,0 +1,429 @@
+/**
+ 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.
+**/
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import d3 from 'd3';
+import d3Tip from 'd3-tip';
+
+export default class BarChart extends Component{
+  static propTypes = {
+    data: PropTypes.array.isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount(){
+    this.setUpSVG();
+    this.initToolTip();
+    this.setLayout();
+    this.initSets();
+    this.barTypeTransition = this.transitionGrouped;
+    this.hiddenLayers = [];
+    this.drawBars();
+    this.drawXAxis();
+    this.drawYAxis();
+    this.drawTooltip();
+    this.drawLegends();
+  }
+
+  initSets(){
+    this.layers = this.dataMapY(this.props.data);
+    // this.setMax();
+    this.setX();
+    this.setY();
+    this.colorDomain();
+    this.setXAxis();
+    this.setYAxis();
+  }
+
+  setUpSVG(){
+    this.svg = d3.select(ReactDOM.findDOMNode(this))
+      .attr('width', this.props.width+"px")
+      .attr('height', this.props.height+50+"px");
+      // .attr("viewBox", "-46 -5 " + (this.props.width+82) + " " + (this.props.height+28) );
+
+    this.container = this.svg.append("g")
+      .attr('class', 'svg-container')
+      .attr("transform", "translate(50,10)");
+
+    this.tipcontainer = this.svg.append('g').classed('tip-g', true)
+      .attr("transform", "translate(" + 40 + "," + 0 + ")");
+
+    this.tipcontainer.append('g').classed('tipLine-g', true).append('line').classed('tipline', true)
+      .style('stroke', '#aaa')
+      .style('visibility', 'hidden')
+      // .style('shape-rendering', 'crispEdges')
+      .attr('x1', 0).attr('x2', 0).attr('y1', 0).attr('y2', this.props.height);
+  }
+
+  initToolTip() {
+    let self = this;
+    this.tip = d3Tip()
+      .attr('class', 'd3-tip')
+      .offset([-10, 0])
+      .html(function(d) {
+        return self.toolTipHtml.call(self, d);
+      });
+    this.svg.call(this.tip);
+    // const container = document.getElementById('app_container');
+    // container.append($('body > .d3-tip'));
+  }
+
+  setMax() {
+    this.yGroupMax = d3.max(this.layers, function(layer) {
+      return d3.max(layer, function(d) {
+        return d.y;
+      });
+    });
+    this.yGroupMin = d3.min(this.layers, function(layer) {
+      return d3.min(layer, function(d) {
+        return d.y;
+      });
+    });
+    this.yStackMax = d3.max(this.layers, function(layer) {
+      return d3.max(layer, function(d) {
+        return d.y0 + d.y;
+      });
+    });
+    this.yStackMin = d3.min(this.layers, function(layer) {
+      return d3.min(layer, function(d) {
+        return d3.min([d.y0, d.y]);
+      });
+    });
+  }
+
+  setX() {
+    let self = this;
+    this.x = d3.scale.ordinal()
+      .domain(self.layers[0].map(function(d) {
+        return d.x;
+      }))
+      .rangeRoundBands([0, this.props.width], 0.08);
+  }
+
+  setY() {
+    this.y = d3.scale.linear()
+      .domain([this.yStackMin, this.yStackMax])
+      .range([this.props.height, 0]);
+  }
+
+  setXAxis() {
+    this.xAxis = d3.svg.axis().scale(this.x).orient("bottom");
+  }
+
+  setYAxis() {
+    let formatValue = d3.format('.2s');
+    this.yAxis = d3.svg
+      .axis()
+      .scale(this.y)
+      .orient("left")
+      .tickFormat(function(d){return formatValue(d);});
+  }
+
+  drawXAxis(xAxis, container, height) {
+    let xA = xAxis || this.xAxis,
+      containor = container || this.container,
+      hght = height || this.props.height;
+
+    this.xAxisGrp = containor['xAxisEl'] = containor.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + hght + ")")
+      .call(xA)
+      .selectAll(".tick text")
+      .call(this.wrap, this.x.rangeBand());
+  }
+
+  wrap(text, width) {
+    text.each(function() {
+      let text = d3.select(this),
+        words = text.text().split(/-+/).reverse(),
+        word,
+        line = [],
+        lineNumber = 0,
+        lineHeight = 1.1, // ems
+        y = text.attr("y"),
+        dy = parseFloat(text.attr("dy")),
+        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
+
+      //Hack to show hidden div to find getComputedTextLength
+      // $('#lag-graph').css({visibility: 'hidden', display: 'block', position: 'absolute'});
+
+      while (word = words.pop()) {
+        line.push(word);
+        tspan.text(line.join(" "));
+        if (tspan.node().getComputedTextLength() > width) {
+          line.pop();
+          tspan.text(line.join(" "));
+          line = [word];
+          tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
+        }
+      }
+      // $('#lag-graph').css({visibility: '', display: 'none', position: ''});
+    });
+  }
+
+  drawYAxis(x) {
+    let yAxis = this.yAxis;
+    this.yAxisGrp = this.container.append("g")
+      .attr("class", "y axis");
+    this.yAxisGrp.ticks = this.yAxisGrp.call(yAxis);
+    this.yAxisGrp.append('text')
+      .text(this.props.yAttr[0].toUpperCase() + this.props.yAttr.substr(1,this.props.yAttr.length)).attr("text-anchor", "end")
+      .attr("y", 6)
+      .attr("dy", ".75em")
+      .attr("transform", "rotate(-90)");
+  }
+
+  dataMapY(data) {
+    let self = this;
+    let keys = d3.keys(data[0]).filter(function(key) {
+      return key !== self.props.xAttr;
+    });
+    let layers = this.stack(keys.map(function(yAttr) {
+      return data.map(function(d) {
+        return {
+          x: d[self.props.xAttr],
+          y: d[yAttr],
+          type: yAttr
+        };
+      });
+    }));
+    let allLayers = layers.allLayers = [];
+    layers.forEach(function(d) {
+      allLayers.push(d);
+    });
+    return layers;
+  }
+
+  setLayout() {
+    let self = this;
+    this.stack = d3.layout.stack();
+  }
+
+  colorDomain() {
+    let self = this;
+    this.color = d3.scale.ordinal()
+      .range(["#b9cde5", "#1B76BB"]);
+    // this.color = d3.scale.category20c();
+    // this.color.domain(d3.keys(this.props.data[0]).filter(function(key) {
+    // 	return key !== self.props.xAttr;
+    // }));
+  }
+
+  drawBars() {
+    let self = this;
+
+    this.layers_g = this.container.selectAll(".barLayer")
+      .data(this.layers);
+
+    this.layers_g
+      .exit()
+      .remove();
+
+    this.layers_g
+      .enter().append("g")
+      .attr("class", "barLayer")
+      .style("fill", function(d, i) {
+        return self.color(d[0].type);
+      });
+
+    this.rect = this.layers_g.selectAll("rect")
+      .data(function(d) {
+        return d;
+      });
+
+    this.rect
+      .exit()
+      .remove();
+
+    this.rect
+      .enter().append("rect")
+      .attr("x", function(d) {
+        return self.x(d.x);
+      })
+      .attr("y", function(d) {
+        return self.props.height;
+      })
+      .attr("width", function(d) {
+        return self.x.rangeBand();
+      })
+      .classed("visible", true)
+      .attr("height", function(d) {
+        return 0;
+      });
+
+    this.barTypeTransition();
+  }
+
+  transitionGrouped() {
+    let x = this.x,
+      y = this.y,
+      height = this.props.height,
+      n = this.layers.length;
+    this.setMax();
+    let yMin = this.yGroupMin < 0 ? this.yGroupMin : 0;
+    this.y.domain([yMin, this.yGroupMax]);
+
+    let barWidth = (x.rangeBand() / n > 25) ? 25 : x.rangeBand() / n;
+    let xArr = new Array(n);
+    this.layers_g.selectAll('rect.visible')
+      .attr("x", function(d, i, j) {
+        if (xArr[i] == undefined) {
+          xArr[i] = x(d.x) + (x.rangeBand() / 2) - (n / 2 * barWidth);
+        } else {
+          xArr[i] += barWidth;
+        }
+        return xArr[i];
+      })
+      .attr("width", barWidth)
+      .transition().duration(500)
+      .attr("y", function(d) {
+        let _y = y(d.y);
+        if (d.y < 0){
+          _y = y(d.y) - (height - y(0));
+        }
+        return _y;
+      })
+      .attr("height", function(d) {
+        return (height - y(Math.abs(d.y))) - (height - y(0));
+      });
+    this.container.select(".y.axis").transition().duration(500).call(this.yAxis);
+  }
+
+  transitionStacked() {
+    this.stack(this.layers);
+    let x = this.x,
+      y = this.y,
+      height = this.props.height,
+      self = this,
+      n = this.layers.length;
+    this.setMax();
+    this.y.domain([this.yStackMin, this.yStackMax]);
+
+    let barWidth = (x.rangeBand() / n > 25) ? 25 : x.rangeBand() / n;
+    let xArr = new Array(n);
+    this.layers_g.selectAll('rect.visible').transition().duration(500)
+      .attr("y", function(d) {
+        let _y = y(d.y0 + d.y);
+        if (d.y < 0){
+          _y = y(d.y) - Math.abs(y(d.y0) - y(d.y0 + d.y));
+        }
+        return _y;
+      })
+      .attr("height", function(d) {
+        return Math.abs(y(d.y0) - y(d.y0 + d.y));
+      })
+      .attr("x", function(d, i, j) {
+        xArr[i] = x(d.x) + (x.rangeBand() / 2) - (barWidth / 2);
+        return xArr[i];
+      })
+      .attr("width", barWidth);
+    this.container.select(".y.axis").transition().duration(500).call(this.yAxis);
+  }
+
+  drawTooltip() {
+    let self = this;
+    let x = this.x.rangeBand ? this.x : d3.scale.ordinal()
+      .domain(self.data.map(function(d) {
+        return d[self.props.xAttr];
+      }))
+      .rangeRoundBands([0, this.props.width]);
+
+    let tipline = this.tipcontainer.select('.tipline');
+
+    this.tipcontainer.append('g').classed('tipRect-g', true).selectAll(".tipRect")
+      .data(this.props.data)
+      .enter().append("rect")
+      .attr("class", "tipRect")
+      .style('opacity', '0')
+      .attr("x", function(d) {
+        return self.x(d[self.props.xAttr]);
+      })
+      .attr("width", function() {
+        return x.rangeBand();
+      })
+      .attr("y", function(d) {
+        return 0;
+      })
+      .attr("height", function(d) {
+        return self.props.height;
+      })
+      .on('mouseover', function(d) {
+        let x1 = parseInt(d3.select(this).attr('x')) + parseInt((x.rangeBand() / 2));
+        tipline.attr('x1', x1).attr('x2', x1);
+        tipline.style('visibility', 'visible');
+        return self.tip.show(d,this);
+      })
+      .on('mouseout', function(d) {
+        tipline.style('visibility', 'hidden');
+        return self.tip.hide(d,this);
+      });
+  }
+
+  toolTipHtml(d) {
+    let self = this;
+    let html = d[self.props.xAttr] + '<table><tbody>';
+    _.each(d, function(val, key) {
+      if (key != self.props.xAttr){
+        html += '<tr><td>' + key + ' </td><td> ' + val + '</td></tr>';
+      }
+    });
+    html += '</tbody></table>';
+    return html;
+  }
+
+  drawLegends() {
+    let self = this;
+    let legends = this.legendsEl = document.createElement('ul');
+    legends = d3.select(legends)
+      .attr('class', 'legends')
+      .style('list-style', 'none');
+
+    let legend = legends.selectAll('.legend')
+      .data(this.color.domain())
+      .enter()
+      .append('li')
+      .attr('class', 'legend');
+
+    legend.append('div')
+      .style('width', '10px')
+      .style('height', '10px')
+      .style('display', 'inline-block')
+      .style('background-color', function(d) {
+        return self.color(d);
+      });
+
+    legend.append('span')
+      .style('padding', '4px 0 4px 4px')
+      .text(function(d) {
+        return d;
+      });
+  }
+
+  render() {
+    return (
+      <svg></svg>
+    );
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/app/scripts/components/Breadcrumbs.jsx
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/app/scripts/components/Breadcrumbs.jsx b/contrib/views/storm/src/main/resources/ui/app/scripts/components/Breadcrumbs.jsx
new file mode 100644
index 0000000..e4926ab
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/app/scripts/components/Breadcrumbs.jsx
@@ -0,0 +1,45 @@
+/**
+ 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.
+**/
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import ReactDom from 'react-dom';
+
+export default class Breadcrumbs extends Component{
+  static propTypes = {
+    links: PropTypes.array.isRequired
+  }
+  render() {
+    return (
+      <ol id="breadcrumb">
+        {this.renderLinks()}
+      </ol>
+    );
+  }
+  renderLinks() {
+    var links = [];
+    for(var i = 0; i < this.props.links.length; i++){
+      var object = this.props.links[i];
+      if(object.link === '#/'){
+        object.title = <i className="fa fa-home"></i>;
+      }
+      links.push(<li key={i}><a href={object.link}>{object.title}</a></li>);
+    }
+    return links;
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonExpanded.jsx
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonExpanded.jsx b/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonExpanded.jsx
new file mode 100644
index 0000000..558d2a2
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonExpanded.jsx
@@ -0,0 +1,30 @@
+/**
+ 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.
+**/
+
+import React, {Component} from 'react';
+
+const CommonExpanded = (props) => {
+  const {expandFlag} = props;
+  return (
+    <div className="box-control pull-right" style={{marginLeft : '17px',marginTop : '-2px'}}>
+      <span className="primary"><i className={`fa ${expandFlag ? 'fa-compress' : 'fa-expand'}`}></i></span>
+    </div>
+  );
+};
+
+export default CommonExpanded;

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonNotification.jsx
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonNotification.jsx b/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonNotification.jsx
new file mode 100644
index 0000000..34e402c
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonNotification.jsx
@@ -0,0 +1,69 @@
+/**
+ 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.
+**/
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {notifyTextLimit} from '../utils/Constants';
+
+class CommonNotification extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: false,
+      text: "Read more"
+    };
+  }
+  showMore = () => {
+    if (this.state.text === "Read more") {
+      this.setState({text: "Hide", data: true});
+    } else {
+      this.setState({text: "Read more", data: false});
+    }
+  }
+
+  render() {
+    /* flag value         error, info, sucess */
+    const {text, data} = this.state;
+    const {flag, content} = this.props;
+    const initial = content.substr(0, notifyTextLimit);
+    const moreText = content.substr(notifyTextLimit);
+    const readMoreTag = <a href="javascript:void(0)" onClick={this.showMore}>{text}</a>;
+    return (
+      <div>
+        {initial}
+        {(data)
+          ? moreText
+          : null
+}
+        <div>
+          {(flag === 'error' && moreText.length > 0)
+            ? readMoreTag
+            : null
+}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CommonNotification;
+
+CommonNotification.propTypes = {
+  flag: PropTypes.string.isRequired,
+  content: PropTypes.string
+};

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonPagination.jsx
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonPagination.jsx b/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonPagination.jsx
new file mode 100644
index 0000000..5128a09
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonPagination.jsx
@@ -0,0 +1,56 @@
+/**
+ 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.
+**/
+
+import React, {Component} from 'react';
+import _ from 'lodash';
+import {Pagination} from 'react-bootstrap';
+
+export default class CommonPagination extends Component{
+  constructor(props){
+    super(props);
+  }
+
+  handleSelect = (eventKey) => {
+    this.props.callBackFunction(eventKey,this.props.tableName);
+  }
+
+  render(){
+    const {activePage,pageSize,filteredEntities} = this.props;
+    const totalPages = Math.ceil(filteredEntities.length / pageSize);
+
+    return(
+      <div className="pagination-wrapper">
+        <div className="pull-left">
+          <span>{`Showing ${activePage > 1 ? (activePage-1)*pageSize : activePage }  to ${activePage*pageSize > filteredEntities.length ? filteredEntities.length : (activePage*pageSize)} of ${filteredEntities.length} entries`}</span>
+        </div>
+        <Pagination
+         className={`${filteredEntities.length === 0? 'hidden':'shown pull-right'}`}
+         prev={false}
+         next={false}
+         first
+         last
+         ellipsis
+         items={totalPages}
+         maxButtons={5}
+         activePage={activePage}
+         onSelect={this.handleSelect}>
+      </Pagination>
+      </div>
+    );
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/5bdede50/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonSwitchComponent.jsx
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonSwitchComponent.jsx b/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonSwitchComponent.jsx
new file mode 100644
index 0000000..804f51e
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/ui/app/scripts/components/CommonSwitchComponent.jsx
@@ -0,0 +1,41 @@
+/**
+ 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.
+**/
+
+import React, {Component} from 'react';
+
+export default class CommonSwitchComponent extends Component {
+  render(){
+    const {switchCallBack,checked,textON,textOFF,KYC} = this.props;
+    let switchId = "switch-"+((Math.random())*100).toFixed(0);
+    return (
+      <div className={`switchWrapper ${!!KYC ? 'lagSwitchSetting pull-right' : ''}`}>
+        <span className={`switchSlider ${checked ?  'onSlider' : 'offSlider'}`} onClick={switchCallBack}>
+          <span className={`switchItemOn sliderText ${!!KYC ? 'graphSwitchOn' : ''}`}>{textON}</span>
+          <span className="switchItemMid"></span>
+          <span className={`switchItemOff sliderText ${!!KYC ? 'graphSwitchOff' : ''}`}>{textOFF}</span>
+        </span>
+      </div>
+
+    );
+  }
+}
+
+CommonSwitchComponent.defaultProps = {
+  textON : "ON",
+  textOFF : "OFF"
+};


Mime
View raw message