http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/containers/NimbusConfigSummary.jsx
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/containers/NimbusConfigSummary.jsx
 
b/contrib/views/storm/src/main/resources/scripts/containers/NimbusConfigSummary.jsx
new file mode 100644
index 0000000..f0457bd
--- /dev/null
+++ 
b/contrib/views/storm/src/main/resources/scripts/containers/NimbusConfigSummary.jsx
@@ -0,0 +1,103 @@
+/**
+ 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(['react',
+       'react-dom',
+       'jsx!components/Table',
+       'utils/Utils',
+       'jsx!modules/Table/Pagination',
+       'collections/VNimbusConfigList',
+       'models/VNimbusConfig',
+       'bootstrap'
+       ], function(React, ReactDOM, Table, Utils, Pagination, 
VNimbusConfigList, VNimbusConfig){
+       'use strict';
+
+       return React.createClass({
+               displayName: 'NimbusConfigSummary',
+               getInitialState: function(){
+                       this.initializeCollection();
+                       return null;
+               },
+               initializeCollection: function(){
+                       this.collection = new VNimbusConfigList();
+                       this.collection.comparator = "key";
+                       this.collection.fetch({
+                               success: function(model, response){
+                                       if(response.error){
+                                               
Utils.notifyError(response.error);
+                                       } else {
+                                               var result = [];
+                                               var keys = _.keys(response);
+                                               for(var k in keys){
+                                                       result.push(new 
VNimbusConfig({
+                                                               key: keys[k],
+                                                               value: 
String(response[keys[k]])
+                                                       }));
+                                               }
+                                               
this.collection.getFirstPage().fullCollection.reset(result);
+                                       }
+                               }.bind(this),
+                               error: function(model, response, options){
+                                       Utils.notifyError("Error occured in 
fetching nimbus configuration data.");
+                               }
+                       });
+               },
+               componentDidMount: function() {
+                       $('#collapseBody').on('hidden.bs.collapse', function () 
{
+                               $("#collapseTable").toggleClass("fa-compress 
fa-expand");
+                       }).on('shown.bs.collapse', function() {
+                               $("#collapseTable").toggleClass("fa-compress 
fa-expand");
+                       });
+               },
+               getColumns: function(){
+                       return [
+                               {name: 'key', title: 'Key'},
+                               {name: 'value', title: 'Value'}
+                       ];
+               },
+               handleFilter: function(e){
+                       var value = e.currentTarget.value;
+                       this.collection.search(value);
+               },
+               handleCollapseClick: function(e){
+                       $("#collapseBody").collapse('toggle');
+               },
+               render: function(){
+                       return (
+                               <div className="box node-accordian">
+                           <div className="box-header" data-toggle="collapse" 
data-target="#collapseBody" aria-expanded="false" aria-controls="collapseBody">
+                               <h4>Nimbus Configuration</h4>
+                               <div className="box-control">
+                                       <a href="javascript:void(0);" 
className="primary"><i className="fa fa-expand" id="collapseTable" 
onClick={this.handleCollapseClick}></i></a>
+                               </div>
+                           </div>
+                           <div className="box-body collapse" 
id="collapseBody">
+                                       <div className="input-group col-sm-4">
+                                                               <input 
type="text"  onKeyUp={this.handleFilter} className="form-control" 
placeholder="Search By Key" />
+                                                               <span 
className="input-group-btn">
+                                                               <button 
className="btn btn-primary" type="button"><i className="fa 
fa-search"></i></button>
+                                                               </span>
+                                                       </div>
+                                               <Table className="table 
no-margin" collection={this.collection} emptyText="No nimbus configuration 
found !" columns={this.getColumns()}/>
+                                               <Pagination 
collection={this.collection} />
+                           </div>
+                       </div>
+                       );
+               }
+       });
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/containers/NimbusSummary.jsx
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/containers/NimbusSummary.jsx 
b/contrib/views/storm/src/main/resources/scripts/containers/NimbusSummary.jsx
new file mode 100644
index 0000000..ee901b9
--- /dev/null
+++ 
b/contrib/views/storm/src/main/resources/scripts/containers/NimbusSummary.jsx
@@ -0,0 +1,127 @@
+/**
+ 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(['react',
+       'react-dom',
+       'jsx!components/Table',
+       'utils/Utils',
+       'jsx!modules/Table/Pagination',
+       'collections/VNimbusList',
+       'models/VNimbus'
+       ], function(React, ReactDOM, Table, Utils, Pagination, VNimbusList, 
VNimbus){
+       'use strict';
+
+       return React.createClass({
+               displayName: 'NimbusSummary',
+               getInitialState: function(){
+                       this.initializeCollection();
+                       return null;
+               },
+               initializeCollection: function(){
+                       this.collection = new VNimbusList();
+                       this.collection.fetch({
+                               success: function(model, response){
+                                       if(response.error){
+                                               
Utils.notifyError(response.error);
+                                       } else {
+                                               var result = [];
+                                               
if(!_.isArray(response.nimbuses)){
+                                                       response.nimbuses = new 
Array(response.nimbuses);
+                                               }
+                                               
response.nimbuses.map(function(n){
+                                                       n['host:port'] = 
n.host+':'+n.port;
+                                                       result.push(new 
VNimbus(n));
+                                               });
+                                               
this.collection.getFirstPage().fullCollection.reset(result);
+                                       }
+                               }.bind(this),
+                               error: function(model, response, options){
+                                       Utils.notifyError("Error occured in 
fetching nimbus summary data.");
+                               }
+                       });
+               },
+               getColumns: function(){
+                       return [
+                               {name: 'host', title: 'Host:Port', tooltip: 
'Nimbus hostname and port number', component: React.createClass({
+                                       render: function(){
+                                               return ( <a 
href={this.props.model.get('nimbusLogLink')} target="_blank"> 
{this.props.model.get('host:port')} </a> );
+                                       }
+                               })},
+                               {name: 'status', title: 'Status', tooltip: 
'Leader if this host is leader, Not a Leader for all other live hosts, note 
that these hosts may or may not be in leader lock queue, and Dead for hosts 
that are part of nimbus.seeds list but are not alive.', component: 
React.createClass({
+                                       render: function(){
+                                               var classname="label ";
+                                               
switch(this.props.model.get("status")){
+                                                       case 'Leader':
+                                                               classname += 
"label-success";
+                                                       break;
+                                                       // case 'Follower':
+                                                       //      classname += 
"label-warning";
+                                                       // break;
+                                                       default:
+                                                               classname += 
"label-warning";
+                                                       break;
+                                               }
+                                               return (<span 
className={classname}>{this.props.model.get('status')}</span>);
+                                       }
+                               })},
+                               {name: 'nimbusUpTime', title: 'Uptime', 
tooltip: 'Time since this nimbus host has been running.', component: 
React.createClass({
+                                       render: function(){
+                                               return 
(<small>{this.props.model.get('nimbusUpTime')}</small>);
+                                       }
+                               })}
+                       ];
+               },
+               handleFilter: function(e){
+                       var value = e.currentTarget.value;
+                       this.collection.search(value);
+               },
+               render: function(){
+                       var elemI = null,
+                               pagination = null,
+                               elemBox = null;
+                       if(this.props.fromDashboard){
+                               elemI = ( <div className="box-control">
+                                   <a className="primary" href="#!/nimbus"><i 
className="fa fa-external-link"></i></a>
+                               </div> )
+                       } else {                                
+                       pagination = ( <Pagination collection={this.collection} 
/> );
+                       elemBox = (
+                                       <div className="input-group col-sm-4">
+                                                               <input 
type="text"  onKeyUp={this.handleFilter} className="form-control" 
placeholder="Search By Key" />
+                                                               <span 
className="input-group-btn">
+                                                               <button 
className="btn btn-primary" type="button"><i className="fa 
fa-search"></i></button>
+                                                               </span>
+                                               </div>
+                               );
+                       }
+                       return (
+                               <div className="box">
+                           <div className="box-header">
+                               <h4>Nimbus Summary</h4>
+                               {elemI}
+                           </div>
+                           <div className={this.props.fromDashboard ? 
"box-body paddless" : "box-body"}>
+                               {elemBox}
+                               <Table className="table no-margin" 
collection={this.collection} emptyText="No nimbus found !" 
columns={this.getColumns()} limitRows={this.props.fromDashboard ? "6" : 
undefined}/>
+                               {pagination}
+                           </div>
+                       </div>
+                       );
+               }
+       });
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/containers/SupervisorSummary.jsx
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/containers/SupervisorSummary.jsx
 
b/contrib/views/storm/src/main/resources/scripts/containers/SupervisorSummary.jsx
new file mode 100644
index 0000000..e403b86
--- /dev/null
+++ 
b/contrib/views/storm/src/main/resources/scripts/containers/SupervisorSummary.jsx
@@ -0,0 +1,137 @@
+/**
+ 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(['react',
+       'react-dom',
+       'jsx!components/Table',
+       'utils/Utils',
+       'jsx!modules/Table/Pagination',
+       'jsx!components/RadialChart',
+       'collections/VSupervisorList',
+       'models/VSupervisor'
+       ], function(React, ReactDOM, Table, Utils, Pagination, RadialChart, 
VSupervisorList, VSupervisor){
+       'use strict';
+
+       return React.createClass({
+               displayName: 'SupervisorSummary',
+               getInitialState: function(){
+                       this.initializeCollection();
+                       return null;
+               },
+               initializeCollection: function(){
+                       this.collection = new VSupervisorList();
+                       this.collection.fetch({
+                               success: function(model, response){
+                                       if(response.error){
+                                               
Utils.notifyError(response.error);
+                                       } else {
+                                               var result = [];
+                                               
if(!_.isArray(response.supervisors)){
+                                                       response.supervisors = 
new Array(response.supervisors);
+                                               }
+                                               
response.supervisors.map(function(s){
+                                                       result.push(new 
VSupervisor(s));
+                                               });
+                                               
this.collection.getFirstPage().fullCollection.reset(result);
+                                       }
+                               }.bind(this),
+                               error: function(model, response, options){
+                                       Utils.notifyError("Error occured in 
fetching supervisor summary data.");
+                               }
+                       });
+               },
+               getColumns: function(){
+                       return [
+                               {name: 'host', title: 'Host', tooltip:'The 
hostname reported by the remote host. (Note that this hostname is not the 
result of a reverse lookup at the Nimbus node.)', component: React.createClass({
+                                       render: function(){
+                                               return ( <a 
href={this.props.model.get('logLink')} target="_blank"> 
{this.props.model.get('host')} </a> );
+                                       }
+                               })},
+                               {name: 'slotsTotal', title: 'Slots', 
tooltip:'Slots are Workers (processes).', component: React.createClass({
+                                       render: function(){
+                                               return (<RadialChart 
innerRadius="19" outerRadius="21" 
+                                                       color={["#bcbcbc", 
"#235693"]} 
+                                                       
data={[this.props.model.get('slotsUsed'), this.props.model.get('slotsTotal')]}
+                                                       
labels={['Used','Total']}/>
+                                               );
+                                       }
+                               })},
+                               {name: 'totalCpu', title: 'CPU', tooltip:'CPU 
that has been allocated.', component: React.createClass({
+                                       render: function(){
+                                               return (<RadialChart 
innerRadius="19" outerRadius="21" 
+                                                       color={["#bcbcbc", 
"#235693"]} 
+                                                       
data={[this.props.model.get('usedCpu'), this.props.model.get('totalCpu')]}
+                                                       
labels={['Used','Total']}/>
+                                               );
+                                       }
+                               })},
+                               {name: 'totalMem', title: 'Memory', 
tooltip:'Memory that has been allocated.', component: React.createClass({
+                                       render: function(){
+                                               return (<RadialChart 
innerRadius="19" outerRadius="21" 
+                                                       color={["#bcbcbc", 
"#235693"]} 
+                                                       
data={[this.props.model.get('usedMem'), this.props.model.get('totalMem')]}
+                                                       
labels={['Used','Total']}/>
+                                               );
+                                       }
+                               })},
+                               {name: 'uptime', title: 'Uptime', tooltip:'The 
length of time a Supervisor has been registered to the cluster.', component: 
React.createClass({
+                                       render: function(){
+                                               return 
(<small>{this.props.model.get('uptime')}</small>);
+                                       }
+                               })}
+                       ];
+               },
+               handleFilter: function(e){
+                       var value = e.currentTarget.value;
+                       this.collection.search(value);
+               },
+               render: function(){
+                       var elemI = null,
+                               pagination = null,
+                               elemBox = null;
+                       if(this.props.fromDashboard){
+                               elemI = ( <div className="box-control">
+                                   <a className="primary" 
href="#!/supervisor"><i className="fa fa-external-link"></i></a>
+                               </div> )
+                       } else {                                
+                       pagination = ( <Pagination collection={this.collection} 
/> );
+                       elemBox = (
+                                       <div className="input-group col-sm-4">
+                                                               <input 
type="text"  onKeyUp={this.handleFilter} className="form-control" 
placeholder="Search By Key" />
+                                                               <span 
className="input-group-btn">
+                                                               <button 
className="btn btn-primary" type="button"><i className="fa 
fa-search"></i></button>
+                                                               </span>
+                                               </div>
+                               );
+                       }
+                       return (
+                               <div className="box">
+                           <div className="box-header">
+                               <h4>Supervisor Summary</h4>
+                               {elemI}
+                           </div>
+                           <div className={this.props.fromDashboard ? 
"box-body paddless" : "box-body"}>
+                               {elemBox}
+                               <Table className="table no-margin 
supervisor-table" collection={this.collection} emptyText="No supervisor found 
!" columns={this.getColumns()} limitRows={this.props.fromDashboard ? "3" : 
undefined}/>
+                               {pagination}
+                           </div>
+                       </div>
+                       );
+               }
+       });
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/containers/TopologyConfiguration.jsx
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/containers/TopologyConfiguration.jsx
 
b/contrib/views/storm/src/main/resources/scripts/containers/TopologyConfiguration.jsx
new file mode 100644
index 0000000..dd2ad64
--- /dev/null
+++ 
b/contrib/views/storm/src/main/resources/scripts/containers/TopologyConfiguration.jsx
@@ -0,0 +1,90 @@
+/**
+ 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(['react',
+       'react-dom',
+       'jsx!components/Table',
+       'jsx!modules/Table/Pagination',
+       'collections/VTopologyConfigList',
+       'models/VTopologyConfig',
+       'bootstrap'
+       ], function(React, ReactDOM, Table, Pagination, VTopologyConfigList, 
VTopologyConfig){
+       'use strict';
+
+       return React.createClass({
+               displayName: 'TopologyConfiguration',
+               getInitialState: function(){
+                       this.collection = new VTopologyConfigList();
+                       this.collection.comparator = "key";
+                       return null;
+               },
+               componentDidMount: function() {
+                       $('#collapseBody').on('hidden.bs.collapse', function () 
{
+                               $("#collapseTable").toggleClass("fa-compress 
fa-expand");
+                       }).on('shown.bs.collapse', function() {
+                               $("#collapseTable").toggleClass("fa-compress 
fa-expand");
+                       });
+               },
+               componentDidUpdate: function(){
+                       var keys = _.keys(this.props.configArr);
+                       var results = [];
+                       for(var k in keys){
+                               results.push(new VTopologyConfig({
+                                       key: keys[k],
+                                       value: 
String(this.props.configArr[keys[k]])
+                               }));
+                       }
+                       
this.collection.getFirstPage().fullCollection.reset(results);
+               },
+               getColumns: function(){
+                       return [
+                               {name: 'key', title: 'Key'},
+                               {name: 'value', title: 'Value'}
+                       ];
+               },
+               handleFilter: function(e){
+                       var value = e.currentTarget.value;
+                       this.collection.search(value);
+               },
+               handleCollapseClick: function(e){
+                       $("#collapseBody").collapse('toggle');
+               },
+               render: function(){
+                       return (
+                               <div className="box">
+                           <div className="box-header" data-toggle="collapse" 
data-target="#collapseBody" aria-expanded="false" aria-controls="collapseBody">
+                               <h4>Topology Configuration</h4>
+                               <div className="box-control">
+                                       <a href="javascript:void(0);" 
className="primary"><i className="fa fa-expand" id="collapseTable" 
onClick={this.handleCollapseClick}></i></a>
+                               </div>
+                           </div>
+                           <div className="box-body collapse" 
id="collapseBody">
+                                       <div className="input-group col-sm-4">
+                                                               <input 
type="text"  onKeyUp={this.handleFilter} className="form-control" 
placeholder="Search By Key" />
+                                                               <span 
className="input-group-btn">
+                                                               <button 
className="btn btn-primary" type="button"><i className="fa 
fa-search"></i></button>
+                                                               </span>
+                                                       </div>
+                               <Table className="table no-margin" 
collection={this.collection} emptyText="No topology configuration found !" 
columns={this.getColumns()}/>
+                               <Pagination collection={this.collection} /> 
+                           </div>
+                       </div>
+                       );
+               }
+       });
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/containers/TopologyDetailGraph.jsx
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/containers/TopologyDetailGraph.jsx
 
b/contrib/views/storm/src/main/resources/scripts/containers/TopologyDetailGraph.jsx
new file mode 100644
index 0000000..64fdee1
--- /dev/null
+++ 
b/contrib/views/storm/src/main/resources/scripts/containers/TopologyDetailGraph.jsx
@@ -0,0 +1,62 @@
+/**
+ 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(['react',
+       'react-dom',
+       'jsx!components/TopologyGraph'
+       ], function(React, ReactDOM, TopologyGraph){
+       'use strict';
+       return React.createClass({
+               displayName: 'TopologyDetailGraph',
+               getInitialState: function(){
+                       return null;
+               },
+               componentWillUpdate: function(){
+                       
$('#collapse-graph').off('hidden.bs.collapse').off('shown.bs.collapse');
+               },
+               componentDidUpdate: function(){
+                       $('#collapse-graph').on('hidden.bs.collapse', function 
() {
+                               $("#graph-icon").toggleClass("fa-compress 
fa-expand");
+                       }).on('shown.bs.collapse', function() {
+                               $("#graph-icon").toggleClass("fa-compress 
fa-expand");
+                       });
+               },
+               toggleAccordionIcon: function(){
+                       $("#collapse-graph").collapse('toggle');
+               },
+               render: function(){
+                       return (
+                               <div className="box">
+                                       <div className="box-header" 
data-toggle="collapse" data-target="#collapse-graph" aria-expanded="false" 
aria-controls="collapse-graph">
+                                               
<h4>{this.props.model.get('name')}</h4>
+                                               <h4 className="box-control">
+                                                       <a 
href="javascript:void(0);" className="primary">
+                                                               <i 
className="fa fa-compress" id="graph-icon" 
onClick={this.toggleAccordionIcon}></i>
+                                                       </a>
+                                               </h4>
+                                       </div>
+                                       <div className="box-body graph-bg 
collapse in" id="collapse-graph">
+                                               <div className="col-sm-12 
text-center">
+                                                       <TopologyGraph 
data={this.props.graphData}/>
+                                               </div>
+                                       </div>
+                               </div>
+                       );
+               },
+       });
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/containers/TopologyListing.jsx
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/containers/TopologyListing.jsx 
b/contrib/views/storm/src/main/resources/scripts/containers/TopologyListing.jsx
new file mode 100644
index 0000000..9ce19f0
--- /dev/null
+++ 
b/contrib/views/storm/src/main/resources/scripts/containers/TopologyListing.jsx
@@ -0,0 +1,176 @@
+/**
+ 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(['react',
+       'react-dom',
+       'jsx!components/Table',
+       'utils/Utils',
+       'collections/VTopologyList',
+       'models/VTopology',
+       'jsx!components/RadialChart',
+       'jsx!modules/Table/Pagination',
+       'jsx!containers/SupervisorSummary'
+       ], function(React, ReactDOM, Table, Utils, VTopologyList, VTopology, 
RadialChart, Pagination, SupervisorSummary){
+       'use strict';
+
+       return React.createClass({
+               displayName: 'TopologyListing',
+               getInitialState: function(){
+                       this.initializeCollection();
+                       return null;
+               },
+               initializeCollection: function(){
+                       this.collection = new VTopologyList();
+                       this.collection.fetch({
+                               success: function(model, response){
+                                       if(response.error){
+                                               
Utils.notifyError(response.error);
+                                       } else {
+                                               var result = [];
+                                               
if(!_.isArray(response.topologies)){
+                                                       response.topologies = 
new Array(response.topologies);
+                                               }
+                                               
response.topologies.map(function(t){
+                                                       result.push(new 
VTopology(t));
+                                               });
+                                               
this.collection.getFirstPage().fullCollection.reset(result);
+                                       }
+                               }.bind(this),
+                               error: function(model, response, options){
+                                       Utils.notifyError("Error occured in 
fetching topology listing data.");
+                               }
+                       });
+               },
+               getColumns: function(){
+                       var columns = [
+                               {name: 'name', title: 'Topology Name', 
tooltip:'The name given to the topology by when it was submitted. Click the 
name to view the Topology\'s information.', component: React.createClass({
+                                       render: function(){
+                                               return ( <a 
href={"#!/topology/"+this.props.model.get('id')}> 
{this.props.model.get('name')} </a>);
+                                       }
+                               })},
+                               {name: 'status', title: 'Status', tooltip:'The 
status can be one of ACTIVE, INACTIVE, KILLED, or REBALANCING.', component: 
React.createClass({
+                                       render: function(){
+                                               var classname="label ";
+                                               
switch(this.props.model.get("status")){
+                                                       case 'ACTIVE':
+                                                               classname += 
"label-success";
+                                                       break;
+                                                       case 'INACTIVE':
+                                                               classname += 
"label-default";
+                                                       break;
+                                                       case 'REBALANCING':
+                                                               classname += 
"label-warning";
+                                                       break;
+                                                       case 'KILLED':
+                                                               classname += 
"label-danger";
+                                                       break;
+                                                       default:
+                                                               classname += 
"label-primary";
+                                                       break;
+                                               }
+                                               return ( <span 
className={classname}> {this.props.model.get("status")} </span> );
+                                       }
+                               })}
+                       ];
+                       if(!this.props.fromDashboard){
+                               var additionalColumns = [
+                                       {name: 'assignedTotalMem', title: 
'Memory Assigned (MB)', tooltip:'Assigned Total Memory by Scheduler.'},
+                                       {name: 'workersTotal', title: 
'Workers', tooltip:'The number of Workers (processes).'},
+                                       {name: 'executorsTotal', title: 
'Executors', tooltip:'Executors are threads in a Worker process.'},
+                                       {name: 'tasksTotal', 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: 'owner', title: 'Owner', 
tooltip:'The user that submitted the Topology, if authentication is enabled.'}
+                               ];
+                               Array.prototype.push.apply(columns, 
additionalColumns);
+                       }
+                       columns.push({name: 'uptime', title: 'Uptime', 
tooltip:'The time since the Topology was submitted.', component: 
React.createClass({
+                               render: function(){
+                                       return 
(<small>{this.props.model.get('uptime')}</small>);
+                               }
+                       })})
+                       return columns;
+               },
+               handleFilter: function(e){
+                       var value = e.currentTarget.value;
+                       this.collection.search(value);
+               },
+               render: function(){
+                       var completeElem = null,
+                               className = null;
+
+                       if(this.props.fromDashboard){
+                               var topologyListingElem = (
+                                       <div className="row">
+                                               <div className="col-sm-12">
+                                                       <div className="box">
+                                                   <div className="box-header">
+                                                       <h4>Topology 
Listing</h4>
+                                                       <div 
className="box-control">
+                                                           <a 
className="primary" href="#!/topology"><i className="fa 
fa-external-link"></i></a>
+                                                       </div>
+                                                   </div>
+                                                   <div className="box-body 
paddless">
+                                                       <Table className="table 
no-margin" collection={this.collection} emptyText="No topology found !" 
columns={this.getColumns()} limitRows={this.props.fromDashboard ? "5" : 
undefined}/>
+                                                   </div>
+                                               </div>
+                                               </div>
+                                       </div>
+                               );
+                               var supervisorSummaryELem = (
+                                       <div className="row">
+                                               <div className="col-sm-12">
+                                                       <SupervisorSummary 
fromDashboard={true} />
+                                               </div>
+                                       </div>
+                               );
+                               completeElem = (
+                                       <div>
+                                               
{topologyListingElem}{supervisorSummaryELem}
+                                       </div>
+                               );
+                               className = "col-sm-7";
+                       } else {
+                               var headerELem = (
+                                       <div className="box-header">
+                               <h4>Topology Listing</h4>                       
        
+                           </div>);
+                       var bodyElem = (
+                               <div className="box-body">
+                                       <div className="input-group col-sm-4">
+                                                               <input 
type="text"  onKeyUp={this.handleFilter} className="form-control" 
placeholder="Search By Key" />
+                                                               <span 
className="input-group-btn">
+                                                               <button 
className="btn btn-primary" type="button"><i className="fa 
fa-search"></i></button>
+                                                               </span>
+                                               </div>
+                               <Table className="table no-margin" 
collection={this.collection} emptyText="No topology found !" 
columns={this.getColumns()} limitRows={this.props.fromDashboard ? "5" : 
undefined}/>
+                               <Pagination collection={this.collection} />
+                           </div>);
+                               completeElem = (
+                                       <div>
+                               {headerELem}{bodyElem}
+                           </div>
+                               );
+                               className = "box";
+                       }
+                       return (
+                               <div className={className}>
+                                       {completeElem}
+                               </div>
+                       );
+               }
+       });
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/globalize/message/en.js
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/globalize/message/en.js 
b/contrib/views/storm/src/main/resources/scripts/globalize/message/en.js
deleted file mode 100644
index ee103ff..0000000
--- a/contrib/views/storm/src/main/resources/scripts/globalize/message/en.js
+++ /dev/null
@@ -1,181 +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.
-*/
-
-/**
- * Never Delete any key without seraching it in all View and Template files
- */
-(function (window, undefined) {
-  var Globalize;
-  require(['globalize'], function (globalize) {
-    Globalize = globalize;
-    Globalize.addCultureInfo("en", {
-      messages: {
-        // Form labels, Table headers etc
-        lbl: {
-          name: 'Name',
-          id: 'ID',
-          owner: 'Owner',
-          topologySummary: 'Topology Summary',
-          total: 'Total',
-          active: 'Active',
-          inactive: 'Inactive',
-          status: 'Status',
-          uptime: 'Uptime',
-          workers: 'Workers',
-          executors: 'Executors',
-          tasks: 'Tasks',
-          schedulerInfo: 'Scheduler Info',
-          jar: 'Jar',
-          nimbusHostname: 'Nimbus Hostname',
-          topologyClass: 'Topology Class',
-          arguments: 'Arguments',
-          selectTimeFrame: 'Select time frame',
-          showSystemBolt: 'Show System Bolt',
-          topologySummary: 'Topology Summary',
-          last10Min: 'Last 10 minutes',
-          last3Hr: 'Last 3 hours',
-          last1Day: 'Last 1 day',
-          allTime: 'All time',
-          emitted: 'Emitted',
-          transferred: 'Transferred',
-          Capacity: 'Capacity (last 10m)',
-          executed: 'Executed',
-          processLatency: 'Process Latency (ms)',
-          completeLatencyMS: 'Complete Latency (ms)',
-          acked: 'Acked',
-          key: 'Key',
-          value: 'Value',
-          host: 'Host',
-          slots: 'Slots',
-          usedSlots: 'Used Slots',
-          port: 'Port',
-          freeSlots: 'Free Slots',
-          totalSlots: 'Total Slots',
-          isLeader: 'Is Leader',
-          version: 'Version',
-          uptimeSeconds: 'Uptime',
-          supervisors: 'Supervisors',
-          viewLogs: 'View Logs',
-          rebalanceTopology: 'Rebalance Topology',
-          waitTime : 'Wait Time',
-          statistics: 'Statistics',
-          spouts: 'Spouts',
-          bolts: 'Bolts',
-          topologyConfig: 'Topology Configuration',
-          outputStats: 'Output Stats',
-          errors: 'Errors',
-          error: 'Error',
-          errorPort: 'Error Port',
-          errorHost: 'Error Host',
-          time: 'Time',
-          failed: 'Failed',
-          stream: 'Stream',
-          completeLatency: 'Complete Latency',
-          executeLatency: 'Execute Latency',
-          capacity: 'Capacity'
-        },
-        btn: {
-          deployNewTopology: 'Deploy New Topology',
-          activate: 'Activate',
-          deactivate: 'Deactivate',
-          rebalance: 'Rebalance',
-          kill: 'Kill',
-          cancel: 'Cancel',
-          save: 'Save',
-          yes: 'Yes',
-          no: 'No',
-          apply: 'Apply'
-        },
-        h: {
-          topologies: 'Topologies',
-          cluster: 'Cluster',
-          clusterSummary: 'Cluster Summary',
-          nimbusSummary: 'Nimbus Summary',
-          supervisorSummary: 'Supervisor Summary',
-          nimbusConfiguration: 'Nimbus Configuration'
-        },
-        msg: {
-          noTopologyFound: 'No topology found',
-          topologySummaryName: 'The name given to the topology by when it was 
submitted.',
-          topologySummaryId: 'The unique ID given to a Topology each time it 
is launched.',
-          topologySummaryOwner: 'The user that submitted the Topology, if 
authentication is enabled.',
-          topologySummaryStatus: 'The status can be one of ACTIVE, INACTIVE, 
KILLED, or REBALANCING.',
-          topologySummaryUptime: 'The time since the Topology was submitted.',
-          topologySummaryWorkers: 'The number of Workers (processes).',
-          topologySummaryExecutors: 'Executors are threads in a Worker 
process.',
-          topologySummaryTasks: 'A Task is an instance of a Bolt or Spout. The 
number of Tasks is almost always equal to the number of Executors.',
-          topologySummaryScheduler: 'This shows information from the scheduler 
about the latest attempt to schedule the Topology on the cluster.',
-          noClusterFound: 'No cluster found',
-          noNimbusFound: 'No nimbus found',
-          noSupervisorFound: 'No supervisor found',
-          noNimbusConfigFound: 'No nimbus configuration found',
-          noSpoutFound: 'No spout found',
-          noBoltFound: 'No bolt found',
-          noOutputStatsFound: 'No output stats found',
-          noExecutorsFound: 'No executor found',
-          noErrorFound: 'No error found',
-          noTopologyConfigFound: 'No topology configuration found',
-          clusterSummarySupervisors: 'The number of nodes in the cluster 
currently.',
-          clusterSummarySlots: 'Slots are Workers (processes).',
-          clusterSummaryExecutors: 'Executors are threads in a Worker 
process.',
-          clusterSummaryTasks: 'A Task is an instance of a Bolt or Spout. The 
number of Tasks is almost always equal to the number of Executors.',
-          supervisorId: 'A unique identifier given to a Supervisor when it 
joins the cluster.',
-          supervisorHost: 'The hostname reported by the remote host. (Note 
that this hostname is not the result of a reverse lookup at the Nimbus node.)',
-          supervisorUptime: 'The length of time a Supervisor has been 
registered to the cluster.',
-          stormNotRunning: 'Error detected while fetching storm hostname and 
port number',
-          stormNotConfigured: 'Currently, no service is configured in ambari',
-          spoutId: 'The ID assigned to a the Component by the Topology.',
-          spoutExecutors: 'Executors are threads in a Worker process.',
-          spoutTasks: 'A Task is an instance of a Bolt or Spout. The number of 
Tasks is almost always equal to the number of Executors.',
-          emitted: 'The number of Tuples emitted.',
-          transferred: 'The number of Tuples emitted that sent to one or more 
bolts.',
-          completeLatency: '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.',
-          acked: 'The number of Tuple "trees" successfully processed. A value 
of 0 is expected if no acking is done.',
-          failed: '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.',
-          stream: 'The name of the Tuple stream given in the Topolgy, or 
"default" if none was given.',
-          uniqueExecutorId: 'The unique executor ID.',
-          extensionUptime: 'The length of time an Executor (thread) has been 
alive.',
-          extensionHost: 'The hostname reported by the remote host. (Note that 
this hostname is not the result of a reverse lookup at the Nimbus node.)',
-          extensionPort: 'The port number used by the Worker to which an 
Executor is assigned. Click on the port number to open the logviewer page for 
this Worker.',
-          boltCapacity: '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.',
-          boltExecuteLatency: 'The average time a Tuple spends in the execute 
method. The execute method may complete without sending an Ack for the tuple.',
-          boltExected: 'The number of incoming Tuples processed.',
-          boltProcessLatency: '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.',
-          boltAcked: 'The number of Tuples acknowledged by this Bolt.',
-        },
-        plcHldr: {
-          search: 'Search'
-        },
-        dialogMsg: {
-          topologyBeingDeployed: 'Please wait, topology is being deployed',
-          invalidFile: 'Selected file to upload is not a .jar file',
-          topologyDeployedSuccessfully: 'New topology deployed successfully',
-          topologyDeployFailed: 'Deploying new topology failed.',
-          activateTopologyMsg: 'Are you sure you want to activate this 
topology ?',
-          topologyActivateSuccessfully: 'Topology activated successfully',
-          deactivateTopologyMsg: 'Are you sure you want to deactivate this 
topology ?',
-          killTopologyMsg: 'Are you sure you want to kill this topology ? If 
yes, please, specify wait time in seconds.',
-          topologyDeactivateSuccessfully: 'Topology deactivated successfully',
-          topologyRebalanceSuccessfully: 'Topology rebalanced successfully',
-          topologyKilledSuccessfully: 'Topology killed successfully',
-        },
-        validationMessages: {}
-      }
-    });
-  });
-}(this));

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/main.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/main.js 
b/contrib/views/storm/src/main/resources/scripts/main.js
index 689b47d..6b8fe95 100644
--- a/contrib/views/storm/src/main/resources/scripts/main.js
+++ b/contrib/views/storm/src/main/resources/scripts/main.js
@@ -1,158 +1,93 @@
 /**
-* 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
+ 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
+     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.
+ 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.
 */
 
 require.config({
-  /* starting point for application */
-  hbs: {
-    disableI18n: true, // This disables the i18n helper and doesn't require 
the json i18n files (e.g. en_us.json)
-    helperPathCallback: // Callback to determine the path to look for helpers
-      function(name) { // ('/template/helpers/'+name by default)
-        return "modules/Helpers";
-      },
-    templateExtension: "html", // Set the extension automatically appended to 
templates
-    compileOptions: {} // options object which is passed to Handlebars compiler
-  },
-
-  /**
-   * Requested as soon as the loader has processed the configuration. It does
-   * not block any other require() calls from starting their requests for
-   * modules, it is just a way to specify some modules to load asynchronously
-   * as part of a config block.
-   * @type {Array} An array of dependencies to load.
-   */
-  deps: ['marionette', 'globalize', 'utils/LangSupport'],
-
-  /**
-   * The number of seconds to wait before giving up on loading a script.
-   * @default 7 seconds
-   * @type {Number}
-   */
+  deps: [],
   waitSeconds: 30,
-
-
   shim: {
     backbone: {
       deps: ['underscore', 'jquery'],
       exports: 'Backbone'
     },
-    bootstrap: {
-      deps: ['jquery'],
-    },
-    underscore: {
-      exports: '_'
-    },
-    marionette: {
-      deps: ['backbone']
-    },
-    backgrid: {
-      deps: ['backbone']
+    react: {
+      exports: 'React'
     },
-    'backbone.forms': {
-      deps: ['backbone']
-    },
-    'backbone-forms.templates': {
-      deps: ['backbone-forms.list', 'backbone.forms']
-    },
-    'bootstrap.filestyle': {
-      deps: ['jquery', 'bootstrap']
-    },
-    'bootstrap.notify': {
-      deps: ['jquery']
-    },
-    'jquery-ui': {
+    bootstrap: {
       deps: ['jquery'],
+      exports: 'jquery'
     },
-    'jquery.ui.widget': {
-      deps: ['jquery']
-    },
-    'jquery-ui-slider': {
-      deps: ['jquery', 'jquery-ui', 'jquery.ui.widget']
+    'bootstrap-switch': {
+      deps: ['bootstrap']
     },
-    globalize: {
-      exports: 'Globalize'
+    'bootstrap-slider': {
+      deps: ['bootstrap']
     },
-    bootbox: {
-      deps: ['jquery']
+    'bootstrap-notify': {
+      deps: ['bootstrap']
     },
-    arbor: {
-      deps: ['jquery']
+    underscore: {
+      exports: '_'
     },
-    'arbor-tween':{
-      deps: ['jquery', 'arbor']
+    JSXTransformer: {
+        exports: "JSXTransformer"
     },
-    'arbor-graphics':{
-      deps: ['jquery', 'arbor']
+    'd3.tip': {
+      deps: ['d3']
     },
-    hbs: {
-      deps: ['underscore', 'handlebars']
+    'x-editable': {
+      deps: ['bootstrap']
     }
   },
-
   paths: {
-    'jquery': '../libs/bower/jquery/js/jquery',
-    'backbone': '../libs/bower/backbone/js/backbone',
-    'underscore': '../libs/bower/underscore/js/underscore',
-    'marionette': '../libs/bower/backbone.marionette/js/backbone.marionette',
-    'backbone.wreqr': '../libs/bower/backbone.wreqr/js/backbone.wreqr',
-    'backbone.babysitter': 
'../libs/bower/backbone.babysitter/js/backbone.babysitter',
-    'backbone.forms': '../libs/bower/backbone-forms/js/backbone-forms',
-    'backbone-forms.list': '../libs/bower/backbone-forms/js/list',
-    'bootstrap': '../libs/bower/bootstrap/js/bootstrap',
-    'bootstrap.filestyle': 
'../libs/bower/bootstrap/js/bootstrap-filestyle.min',
-    'bootstrap.notify': '../libs/bower/bootstrap/js/bootstrap-notify',
-    'backgrid': '../libs/bower/backgrid/js/backgrid',
-    'jquery-ui': '../libs/bower/jquery-ui/js/jquery-ui-1.10.3.custom',
-    'jquery.ui.widget': '../libs/bower/jquery-ui/js/jquery.ui.widget.min',
-    'jquery-ui-slider' : '../libs/bower/jquery-ui/js/jquery-ui-slider',
-    'globalize': '../libs/bower/globalize/js/globalize',
-    'gblMessages' : '../scripts/globalize',
-    'bootbox': '../libs/bower/bootbox/js/bootbox',
-    'arbor': '../libs/other/arbor',
-    'arbor-tween': '../libs/other/arbor-tween',
-    'arbor-graphics': '../libs/other/arbor-graphics',
-    'handlebars': '../libs/bower/require-handlebars-plugin/js/handlebars',
-    'i18nprecompile': 
'../libs/bower/require-handlebars-plugin/js/i18nprecompile',
-    'json2': '../libs/bower/require-handlebars-plugin/js/json2',
-    'hbs': '../libs/bower/require-handlebars-plugin/js/hbs',
-    'tmpl': '../templates'
+    'jquery': '../libs/jQuery/js/jquery-2.2.3.min',
+    'underscore': '../libs/Underscore/js/Underscore',
+    'backbone': '../libs/Backbone/js/Backbone',
+    'backbone.paginator': 
'../libs/Backbone-Paginator/js/backbone-paginator.min',
+    'bootstrap': '../libs/Bootstrap/js/bootstrap.min',
+    'bootstrap-switch': '../libs/Bootstrap/js/bootstrap-switch.min',
+    'bootstrap-slider': '../libs/Bootstrap/js/bootstrap-slider.min',
+    'bootstrap-notify': '../libs/Bootstrap/js/bootstrap-notify.min',
+    'bootbox': '../libs/bootbox/js/bootbox.min',
+    'd3': '../libs/d3/js/d3.min',
+    'd3.tip': '../libs/d3/js/d3-tip.min',
+    'text': '../libs/require-text/js/text',
+    'react':'../libs/react/js/react-with-addons',
+    'react-dom': '../libs/react/js/react-dom',
+    'JSXTransformer': '../libs/jsx/JSXTransformer',
+    'jsx': "../libs/jsx/jsx",
+    'x-editable':'../libs/Bootstrap/js/bootstrap-editable.min'
   },
-
-  /**
-   * If set to true, an error will be thrown if a script loads that does not
-   * call define() or have a shim exports string value that can be checked.
-   * To get timely, correct error triggers in IE, force a define/shim export.
-   * @type {Boolean}
-   */
-  enforceDefine: false
+  jsx: {
+    fileExtension: '.jsx',
+  }
 });
 
-define(["App",
-  "router/Router",
-  'jquery-ui',
-  'jquery.ui.widget',
-  'jquery-ui-slider',
+require([
+  "jquery",
+  "backbone",
   "utils/Overrides",
-  "arbor",
-  "arbor-tween",
-  "arbor-graphics"
-  ], function(App, Router) {
-    'use strict';
+  "router/Router"
+  ], function($, Backbone, Overrides, Router) {
+      window.App = {};
 
-  App.appRouter = new Router();
-  App.start();
-});
+      App.Container = document.getElementById('container');
+      App.Footer = document.getElementById('footer');
+
+      App.appRouter = new Router();
+      Backbone.history.start();
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/BaseModel.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/BaseModel.js 
b/contrib/views/storm/src/main/resources/scripts/models/BaseModel.js
index fe5b564..225788e 100644
--- a/contrib/views/storm/src/main/resources/scripts/models/BaseModel.js
+++ b/contrib/views/storm/src/main/resources/scripts/models/BaseModel.js
@@ -1,22 +1,22 @@
 /**
-* 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
+ 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
+     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.
+ 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(['require', 'utils/Utils'], function (require, Utils) {
+define(['require', 'backbone'], function (require, Backbone) {
   'use strict';
 
 var BaseModel = Backbone.Model.extend(
@@ -28,17 +28,19 @@ var BaseModel = Backbone.Model.extend(
                 * @constructs
                 */
                initialize : function() {
-
+                       
                },
                bindErrorEvents :function(){
-                       this.bind("error", Utils.defaultErrorHandler);
+                       this.bind("error", function(model, error) {
+                           if (error.status == 401) {
+                             throw new Error("ERROR 401 occured.\n");
+                           }
+                         });
                },
                /**
                 * toString for a model. Every model should implement this 
function.
                 */
-               toString : function() {
-                       throw new Error('ERROR: toString() not defined for ' + 
this.modelName);
-               },
+               toString : function() {},
 
                /**
                 * Silent'ly set the attributes. ( do not trigger events )
@@ -47,7 +49,17 @@ var BaseModel = Backbone.Model.extend(
                        return this.set(attrs, {
                                silent: true
                        });
-               }
+               },
+               parse:function(resp, options){
+                       return this.parseRecords(resp, options);
+               },
+               parseRecords: function(resp, options) {
+                       if (this.modelAttrName) {
+                               return Globalize.byString(resp, 
this.modelAttrName);
+                       }else{
+                               return resp;
+                       }
+               },
        },
        /** BaseModel's Static Attributes */
        {

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/Cluster.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/Cluster.js 
b/contrib/views/storm/src/main/resources/scripts/models/Cluster.js
deleted file mode 100644
index c1e0de0..0000000
--- a/contrib/views/storm/src/main/resources/scripts/models/Cluster.js
+++ /dev/null
@@ -1,42 +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(['require',
-  'utils/Globals',
-  'models/BaseModel'
-], function(require, Globals, vBaseModel) {
-  'use strict';
-  var vCluster = vBaseModel.extend({
-    urlRoot: Globals.baseURL + '/api/v1/cluster/summary',
-
-    defaults: {},
-
-    serverSchema: {},
-
-    idAttribute: 'id',
-
-    initialize: function() {
-      this.modelName = 'vCluster';
-      this.bindErrorEvents();
-    },
-    toString: function() {
-      return this.get('name');
-    }
-  }, {});
-  return vCluster;
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VBolt.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/VBolt.js 
b/contrib/views/storm/src/main/resources/scripts/models/VBolt.js
deleted file mode 100644
index 7fd266c..0000000
--- a/contrib/views/storm/src/main/resources/scripts/models/VBolt.js
+++ /dev/null
@@ -1,42 +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(['require',
-  'utils/Globals',
-  'models/BaseModel'
-], function(require, Globals, vBaseModel) {
-  'use strict';
-  var vBolt = vBaseModel.extend({
-    urlRoot: Globals.baseURL + '',
-
-    defaults: {},
-
-    serverSchema: {},
-
-    idAttribute: 'id',
-
-    initialize: function() {
-      this.modelName = 'vBolt';
-      this.bindErrorEvents();
-    },
-    toString: function() {
-      return this.get('name');
-    }
-  }, {});
-  return vBolt;
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VCluster.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/VCluster.js 
b/contrib/views/storm/src/main/resources/scripts/models/VCluster.js
new file mode 100644
index 0000000..46bcf9d
--- /dev/null
+++ b/contrib/views/storm/src/main/resources/scripts/models/VCluster.js
@@ -0,0 +1,42 @@
+/**
+ 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(['require',
+  'utils/Globals',
+  'models/BaseModel'
+], function(require, Globals, vBaseModel) {
+  'use strict';
+  var vCluster = vBaseModel.extend({
+    urlRoot: Globals.baseURL + '/api/v1/cluster/summary',
+
+    defaults: {},
+
+    serverSchema: {},
+
+    idAttribute: 'id',
+
+    initialize: function() {
+      this.modelName = 'VCluster';
+      this.bindErrorEvents();
+    },
+    toString: function() {
+      return this.get('name');
+    }
+  }, {});
+  return vCluster;
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VError.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/VError.js 
b/contrib/views/storm/src/main/resources/scripts/models/VError.js
deleted file mode 100644
index caaaea2..0000000
--- a/contrib/views/storm/src/main/resources/scripts/models/VError.js
+++ /dev/null
@@ -1,42 +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(['require',
-  'utils/Globals',
-  'models/BaseModel'
-], function(require, Globals, vBaseModel) {
-  'use strict';
-  var vError = vBaseModel.extend({
-    urlRoot: Globals.baseURL + '',
-
-    defaults: {},
-
-    serverSchema: {},
-
-    idAttribute: 'id',
-
-    initialize: function() {
-      this.modelName = 'vError';
-      this.bindErrorEvents();
-    },
-    toString: function() {
-      return this.get('name');
-    }
-  }, {});
-  return vError;
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VExecutor.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/VExecutor.js 
b/contrib/views/storm/src/main/resources/scripts/models/VExecutor.js
deleted file mode 100644
index 0b10965..0000000
--- a/contrib/views/storm/src/main/resources/scripts/models/VExecutor.js
+++ /dev/null
@@ -1,42 +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(['require',
-  'utils/Globals',
-  'models/BaseModel'
-], function(require, Globals, vBaseModel) {
-  'use strict';
-  var vExecutor = vBaseModel.extend({
-    urlRoot: Globals.baseURL + '',
-
-    defaults: {},
-
-    serverSchema: {},
-
-    idAttribute: 'id',
-
-    initialize: function() {
-      this.modelName = 'vExecutor';
-      this.bindErrorEvents();
-    },
-    toString: function() {
-      return this.get('name');
-    }
-  }, {});
-  return vExecutor;
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VModel.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/VModel.js 
b/contrib/views/storm/src/main/resources/scripts/models/VModel.js
deleted file mode 100644
index a46c602..0000000
--- a/contrib/views/storm/src/main/resources/scripts/models/VModel.js
+++ /dev/null
@@ -1,42 +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(['require',
-  'utils/Globals',
-  'models/BaseModel'
-], function(require, Globals, vBaseModel) {
-  'use strict';
-  var VModel = vBaseModel.extend({
-    urlRoot: Globals.baseURL + '',
-
-    defaults: {},
-
-    serverSchema: {},
-
-    idAttribute: 'id',
-
-    initialize: function() {
-      this.modelName = 'VModel';
-      this.bindErrorEvents();
-    },
-    toString: function() {
-      return this.get('name');
-    }
-  }, {});
-  return VModel;
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VNimbus.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/VNimbus.js 
b/contrib/views/storm/src/main/resources/scripts/models/VNimbus.js
index 541cb24..02bbc1f 100644
--- a/contrib/views/storm/src/main/resources/scripts/models/VNimbus.js
+++ b/contrib/views/storm/src/main/resources/scripts/models/VNimbus.js
@@ -1,19 +1,19 @@
 /**
-* 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
+ 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
+     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.
+ 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(['require',
@@ -31,7 +31,7 @@ define(['require',
     idAttribute: 'id',
 
     initialize: function() {
-      this.modelName = 'vNimbus';
+      this.modelName = 'VNimbus';
       this.bindErrorEvents();
     },
     toString: function() {

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VNimbusConfig.js
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/models/VNimbusConfig.js 
b/contrib/views/storm/src/main/resources/scripts/models/VNimbusConfig.js
index 5ae850b..ce8997b 100644
--- a/contrib/views/storm/src/main/resources/scripts/models/VNimbusConfig.js
+++ b/contrib/views/storm/src/main/resources/scripts/models/VNimbusConfig.js
@@ -1,19 +1,19 @@
 /**
-* 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
+ 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
+     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.
+ 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(['require',
@@ -28,10 +28,10 @@ define(['require',
 
     serverSchema: {},
 
-    idAttribute: 'id',
+    idAttribute: 'key',
 
     initialize: function() {
-      this.modelName = 'vNimbusConfig';
+      this.modelName = 'VNimbusConfig';
       this.bindErrorEvents();
     },
     toString: function() {

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VOutputStat.js
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/models/VOutputStat.js 
b/contrib/views/storm/src/main/resources/scripts/models/VOutputStat.js
deleted file mode 100644
index 617865b..0000000
--- a/contrib/views/storm/src/main/resources/scripts/models/VOutputStat.js
+++ /dev/null
@@ -1,42 +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(['require',
-  'utils/Globals',
-  'models/BaseModel'
-], function(require, Globals, vBaseModel) {
-  'use strict';
-  var vOutputStat = vBaseModel.extend({
-    urlRoot: Globals.baseURL + '',
-
-    defaults: {},
-
-    serverSchema: {},
-
-    idAttribute: 'id',
-
-    initialize: function() {
-      this.modelName = 'vOutputStat';
-      this.bindErrorEvents();
-    },
-    toString: function() {
-      return this.get('name');
-    }
-  }, {});
-  return vOutputStat;
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VSpout.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/VSpout.js 
b/contrib/views/storm/src/main/resources/scripts/models/VSpout.js
deleted file mode 100644
index d19c2c4..0000000
--- a/contrib/views/storm/src/main/resources/scripts/models/VSpout.js
+++ /dev/null
@@ -1,44 +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(['require',
-  'utils/Globals',
-  'models/BaseModel'
-], function(require, Globals, vBaseModel) {
-  'use strict';
-  var vSpout = vBaseModel.extend({
-
-    defaults: {},
-
-    serverSchema: {},
-
-    idAttribute: 'id',
-
-    initialize: function() {
-      this.modelName = 'vSpout';
-      this.bindErrorEvents();
-    },
-    toString: function() {
-      return this.get('name');
-    },
-    getDetails: function(options) {
-      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.topologyId + '/component/' + options.spoutId + 
'?sys=' + options.systemBoltFlag + '&window=' + options.windowTimeFrame, 'GET', 
options);
-    }
-  }, {});
-  return vSpout;
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VSupervisor.js
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/models/VSupervisor.js 
b/contrib/views/storm/src/main/resources/scripts/models/VSupervisor.js
index 496ffb4..fa8ebbb 100644
--- a/contrib/views/storm/src/main/resources/scripts/models/VSupervisor.js
+++ b/contrib/views/storm/src/main/resources/scripts/models/VSupervisor.js
@@ -1,19 +1,19 @@
 /**
-* 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
+ 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
+     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.
+ 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(['require',
@@ -21,7 +21,7 @@ define(['require',
   'models/BaseModel'
 ], function(require, Globals, vBaseModel) {
   'use strict';
-  var vSupervisor = vBaseModel.extend({
+  var VSupervisor = vBaseModel.extend({
     urlRoot: Globals.baseURL + '/api/v1/supervisor/summary',
 
     defaults: {},
@@ -31,12 +31,12 @@ define(['require',
     idAttribute: 'id',
 
     initialize: function() {
-      this.modelName = 'vSupervisor';
+      this.modelName = 'VSupervisor';
       this.bindErrorEvents();
     },
     toString: function() {
       return this.get('name');
     }
   }, {});
-  return vSupervisor;
+  return VSupervisor;
 });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VTopology.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/models/VTopology.js 
b/contrib/views/storm/src/main/resources/scripts/models/VTopology.js
index f367167..da0a26d 100644
--- a/contrib/views/storm/src/main/resources/scripts/models/VTopology.js
+++ b/contrib/views/storm/src/main/resources/scripts/models/VTopology.js
@@ -1,19 +1,19 @@
 /**
-* 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
+ 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
+     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.
+ 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(['require',
@@ -22,6 +22,7 @@ define(['require',
 ], function(require, Globals, vBaseModel) {
   'use strict';
   var VTopology = vBaseModel.extend({
+    urlRoot: Globals.baseURL + '/api/v1/topology',
 
     defaults: {},
 
@@ -36,10 +37,19 @@ define(['require',
     toString: function() {
       return this.get('name');
     },
-    getDetails: function(options) {
-      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id + '?sys=' + options.sysBoltFlag + '&window=' + 
options.windowTimeFrame, 'GET', options);
+    getData: function(options){
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id + '?window='+options.window + '&sys=' + 
options.sys, 'GET', options);
     },
-    activateTopology: function(options) {
+    getGraphData: function(options){
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id + '/visualization?window='+options.window, 
'GET', options);
+    },
+    getLogConfig: function(options) {
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id + '/logconfig', 'GET', options);
+    },
+    saveLogConfig:function(options) {
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id + '/logconfig', 'POST', options);
+    },
+    activateTopology: function(options){
       return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id + '/activate', 'POST', options);
     },
     deactivateTopology: function(options) {
@@ -50,7 +60,25 @@ define(['require',
     },
     killTopology: function(options) {
       return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id + '/kill/' + options.waitTime, 'POST', 
options);
-    }
+    },
+    getComponent: function(options) {
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id + '/component/' + options.name + 
'?window='+options.window + '&sys=' + options.sys, 'GET', options);
+    },
+    debugTopology: function(options){
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id + '/debug/' + options.debugType + '/' + 
options.percent, 'POST', options);
+    },
+    debugComponent: function(options){
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id  + '/component/' + options.name + '/debug/' + 
options.debugType + '/' + options.percent, 'POST', options);
+    },
+    profileJStack: function(options){
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id  + '/profiling/dumpjstack/' + 
options.hostPort, 'GET', options);
+    },
+    profileRestartWorker: function(options){
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id  + '/profiling/restartworker/' + 
options.hostPort, 'GET', options);
+    },
+    profileHeap: function(options){
+      return this.constructor.nonCrudOperation.call(this, Globals.baseURL + 
'/api/v1/topology/' + options.id  + '/profiling/dumpheap/' + options.hostPort, 
'GET', options);
+    },
   }, {});
   return VTopology;
 });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/models/VTopologyConfig.js
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/models/VTopologyConfig.js 
b/contrib/views/storm/src/main/resources/scripts/models/VTopologyConfig.js
index 6dc3fa7..c4dd46c 100644
--- a/contrib/views/storm/src/main/resources/scripts/models/VTopologyConfig.js
+++ b/contrib/views/storm/src/main/resources/scripts/models/VTopologyConfig.js
@@ -1,19 +1,19 @@
 /**
-* 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
+ 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
+     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.
+ 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(['require',
@@ -22,14 +22,6 @@ define(['require',
 ], function(require, Globals, vBaseModel) {
   'use strict';
   var vTopologyConfig = vBaseModel.extend({
-    urlRoot: Globals.baseURL + '',
-
-    defaults: {},
-
-    serverSchema: {},
-
-    idAttribute: 'id',
-
     initialize: function() {
       this.modelName = 'vTopologyConfig';
       this.bindErrorEvents();

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/modules/Helpers.js
----------------------------------------------------------------------
diff --git a/contrib/views/storm/src/main/resources/scripts/modules/Helpers.js 
b/contrib/views/storm/src/main/resources/scripts/modules/Helpers.js
deleted file mode 100644
index 588585e..0000000
--- a/contrib/views/storm/src/main/resources/scripts/modules/Helpers.js
+++ /dev/null
@@ -1,157 +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(['require',
-  'handlebars',
-  'utils/LangSupport'
-  ], function(require, Handlebars, localization) {
-  /*
-   * General guidelines while writing helpers:
-   *
-   * - If returning HTML use return new Handlebars.SafeString();
-   * - If the helper needs optional arguments use the "hash arguments"
-   *   Eg. {{{link . "See more..." story.url class="story"}}}
-   *   NOTE: the first argument after the helper name should be . which will 
be context in the helper function
-   *   Handlebars.registerHelper('link', function (context, text, url, 
options) {
-   *    var attrs = [];
-   *
-   *    for(var prop in options.hash) {
-   *      attrs.push(prop + '="' + options.hash[prop] + '"');
-   *    }
-   *    return new Handlebars.SafeString("<a " + attrs.join(" ") + ">" + text 
+ "</a>");
-   *   });
-   *
-   *
-   * NOTE: Due to some limitations in the require-handlebars-plugin, we cannot 
have helper that takes zero arguments,
-   *       for such helpers we have to pass a "." as first argument. 
[https://github.com/SlexAxton/require-handlebars-plugin/issues/72]
-   */
-
-  var HHelpers = {};
-
-  /**
-   * Convert new line (\n\r) to <br>
-   * from http://phpjs.org/functions/nl2br:480
-   */
-  HHelpers.nl2br = function(text) {
-    text = Handlebars.Utils.escapeExpression(text);
-    var nl2br = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + 
'<br>' + '$2');
-    return new Handlebars.SafeString(nl2br);
-  };
-  Handlebars.registerHelper('nl2br', HHelpers.nl2br);
-
-  Handlebars.registerHelper('toHumanDate', function(val) {
-    if (!val) return "";
-    return localization.formatDate(val, 'f');
-  });
-
-  /*
-   * Truncate the String till n positions
-   */
-  Handlebars.registerHelper('truncStr', function(str, n, useWordBoundary) {
-    var len = n || 1;
-    var useWordBn = useWordBoundary || false;
-    return str.trunc(len, useWordBn);
-  });
-
-
-  Handlebars.registerHelper('tt', function(str) {
-    return localization.tt(str);
-    return str;
-  });
-
-  Handlebars.registerHelper('if_eq', function(context, options) {
-    if (context == options.hash.compare)
-      return options.fn(this);
-    return options.inverse(this);
-  });
-
-  Handlebars.registerHelper('if_gt', function(context, options) {
-    if (context > options.hash.compare)
-      return options.fn(this);
-    return options.inverse(this);
-  });
-
-  Handlebars.registerHelper('ifCond', function(v1, operator, v2, options) {
-
-    switch (operator) {
-      case '==':
-        return (v1 == v2) ? options.fn(this) : options.inverse(this);
-        break;
-      case '===':
-        return (v1 === v2) ? options.fn(this) : options.inverse(this);
-        break;
-      case '<':
-        return (v1 < v2) ? options.fn(this) : options.inverse(this);
-        break;
-      case '<=':
-        return (v1 <= v2) ? options.fn(this) : options.inverse(this);
-        break;
-      case '>':
-        return (v1 > v2) ? options.fn(this) : options.inverse(this);
-        break;
-      case '>=':
-        return (v1 >= v2) ? options.fn(this) : options.inverse(this);
-        break;
-      default:
-        return options.inverse(this);
-        break;
-    }
-    //return options.inverse(this);
-  });
-
-  //For Example
-  /*{{#compare numberone "eq" numbretwo}}
-    do something
-  {{else}}
-    do something else
-  {{/compare}}
-*/
-  Handlebars.registerHelper("compare", function(v1, op, v2, options) {
-
-    var c = {
-      "eq": function(v1, v2) {
-        return v1 == v2;
-      },
-      "neq": function(v1, v2) {
-        return v1 != v2;
-      },
-
-    };
-
-    if (Object.prototype.hasOwnProperty.call(c, op)) {
-      return c[op].call(this, v1, v2) ? options.fn(this) : 
options.inverse(this);
-    }
-    return options.inverse(this);
-  });
-  //For Example
-  //{{#eachProperty object}}
-  //{{property}}: {{value}}<br/>
-  //{{/eachProperty }}
-  Handlebars.registerHelper('eachProperty', function(context, options) {
-    var ret = "";
-    for (var prop in context) {
-      ret = ret + options.fn({
-        property: prop,
-        value: context[prop]
-      });
-    }
-    return new Handlebars.SafeString(ret);
-  });
-
-  return HHelpers;
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/529ef7f7/contrib/views/storm/src/main/resources/scripts/modules/Table/PageableTable.jsx
----------------------------------------------------------------------
diff --git 
a/contrib/views/storm/src/main/resources/scripts/modules/Table/PageableTable.jsx
 
b/contrib/views/storm/src/main/resources/scripts/modules/Table/PageableTable.jsx
new file mode 100644
index 0000000..7d39e25
--- /dev/null
+++ 
b/contrib/views/storm/src/main/resources/scripts/modules/Table/PageableTable.jsx
@@ -0,0 +1,47 @@
+/**
+ 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.
+*/
+
+var React = require('react');
+var Table = require('jsx!components/Table');
+var Pagination = require('jsx!modules/Table/Pagination');
+
+
+module.exports = React.createClass({
+  displayName: 'PageableTable',
+  propTypes: {
+    nextPageCallback: React.PropTypes.func.isRequired,
+    previousPageCallback: React.PropTypes.func.isRequired,
+    pageCallback: React.PropTypes.func.isRequired,
+    totalPages: React.PropTypes.number.isRequired,
+    currentPage: React.PropTypes.number.isRequired,
+    maximumPages: React.PropTypes.number,
+    collection: React.PropTypes.array.isRequired,
+    columns: React.PropTypes.object.isRequired,
+    sortingCallback: React.PropTypes.func.isRequired,
+    sortKey: React.PropTypes.string,
+    sortOrder: React.PropTypes.number
+  },
+  render: function () {
+    var maximumPages = this.props.maximumPages  ? this.props.maximumPages : 10;
+    return(
+      <div>
+        <Table {...this.props} />
+        <Pagination {...this.props} maximumPages={maximumPages}/>
+     </div>);
+  }
+});
\ No newline at end of file

Reply via email to