[incubator-heron] branch master updated: Add an index column in all topologies page (#3216)

[nwang]

This is an automated email from the ASF dual-hosted git repository.

nwang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-heron.git


The following commit(s) were added to refs/heads/master by this push:
     new 9c1cc16  Add an index column in all topologies page (#3216)
9c1cc16 is described below

commit 9c1cc16fa81c618bb7cd9746e26b990cfae1ec2e
Author: Ning Wang <nw...@twitter.com>
AuthorDate: Thu Mar 14 22:10:21 2019 -0700

    Add an index column in all topologies page (#3216)
---
 heron/tools/ui/resources/static/js/alltopologies.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/heron/tools/ui/resources/static/js/alltopologies.js 
b/heron/tools/ui/resources/static/js/alltopologies.js
index 831dd96..fa3e8c8 100644
--- a/heron/tools/ui/resources/static/js/alltopologies.js
+++ b/heron/tools/ui/resources/static/js/alltopologies.js
@@ -22,6 +22,7 @@
 var TopologyItem = React.createClass({
   render: function() {
     var topology = this.props.topology;
+    var index = this.props.index;
 
     var divStyle = {
       position: 'relative',
@@ -51,12 +52,13 @@ var TopologyItem = React.createClass({
 
     return (
        <tr className={state_class}>
+         <td className="col-md-1 index no-break">{index}</td>
          <td className="col-md-3 break-all"><a className="toponame" 
href={'./topologies/' + topology.cluster + '/' + topology.environ + '/' + 
topology.name}>{topology.name}</a></td>
          <td className="col-md-1 topostatus">{topology.status}</td>
          <td className="col-md-1 topocluster">{displaycluster}</td>
          <td className="col-md-1 toporunrole break-all">{topology.role}</td>
          <td className="col-md-1 topoenviron">{displayenv}</td>
-         <td className="col-md-1 
toporeleaseversion">{topology.release_version}</td>
+         <td className="col-md-2 toporeleaseversion 
break-all">{topology.release_version}</td>
          <td className="col-md-1 toposubmittedby 
break-all">{topology.submission_user}</td>
          <td className="col-md-2 toposubmittedat no-break">{display_time}</td>
        </tr>
@@ -142,9 +144,9 @@ var TopologyTable = React.createClass({
       });
     }
 
-    var items = topologies.map(function (topo) {
+    var items = topologies.map(function (topo, index) {
       return (
-        <TopologyItem topology={topo}/>
+        <TopologyItem topology={topo} index={index + 1}/>
       );
     });
 
@@ -173,6 +175,9 @@ var TopologyTable = React.createClass({
         <div className="table-responsive">
           <table className="table table-striped topotable">
             <thead>
+              <th>
+                Index
+              </th>
               <th onClick={sortBy("name")} className={sortClass("name")}>
                 Name
               </th>