SOLR-11578: Solr 7 Admin UI (Cloud > Graph) should reflect the Replica type to give a more accurate representation of the cluster

solr/CHANGES.txt

@@ -78,6 +78,9 @@ New Features
   relationship instead of the current "anonymous" relationship.  Use of this experimental feature requires
   anonChildDocs=false parameter.  (Moshe Bla, David Smiley)
 
+* SOLR-11578: Solr 7 Admin UI (Cloud > Graph) should reflect the Replica type to give a more accurate representation
+  of the cluster. (Rhoit Singh via Erick Erickson)
+
 Bug Fixes
 ----------------------
 

solr/webapp/web/css/angular/cloud.css

@@ -434,3 +434,18 @@ limitations under the License.
 {
   stroke: #e9e9e9;
 }
+
+#content #cloud #legend .replicatype,
+#content #cloud #legend .replicatype rect,
+#content #graph-content .node.replicatype rect
+{
+  color: #007BA7;
+  stroke: #007BA7;
+  fill:rgb(0,123,167);
+
+}
+
+#content #graph-content .node.replicatype text
+{
+  fill: #007BA7;
+}

solr/webapp/web/css/angular/common.css

@@ -24,7 +24,7 @@ limitations under the License.
   padding: 0;
 }
 
-body, h1, h2, h3, h4, h5, h6, a, button, input, select, option, textarea, th, td
+body, h1, h2, h3, h4, h5, h6, a, button, input, select, option, textarea, th, td, div.ui-tooltip-content
 {
   color: #333;
   font: 12px/1.6em "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
@@ -764,4 +764,4 @@ pre.syntax .tex .formula
 
 .other-ui-link a.ul {
   text-decoration: underline;
-}
+}

solr/webapp/web/css/angular/jquery-ui.structure.min.css

@@ -0,0 +1,24 @@
+/*! jQuery UI - v1.12.1 - 2017-10-31
+* http://jqueryui.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+* Copyright jQuery Foundation and other contributors; Licensed MIT */
+
+.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px}body .ui-tooltip{border-width:2px}

solr/webapp/web/index.html

@@ -45,6 +45,8 @@ limitations under the License.
   <link rel="stylesheet" type="text/css" href="css/angular/segments.css?_=${version}">
   <link rel="stylesheet" type="text/css" href="css/angular/threads.css?_=${version}">
   <link rel="stylesheet" type="text/css" href="css/angular/chosen.css?_=${version}">
+  <link rel="stylesheet" type="text/css" href="css/angular/jquery-ui.min.css?_=${version}">
+  <link rel="stylesheet" type="text/css" href="css/angular/jquery-ui.structure.min.css?_=${version}">
 
   <meta http-equiv="x-ua-compatible" content="IE=9">
   <script src="libs/jquery-2.1.3.min.js"></script>
@@ -58,6 +60,7 @@ limitations under the License.
   <script src="libs/ngtimeago.js"></script>
   <script src="libs/highlight.js"></script>
   <script src="libs/d3.js"></script>
+  <script src="libs/jquery-ui.min.js"></script>
   <script src="js/angular/app.js"></script>
   <script src="js/angular/services.js"></script>
   <script src="js/angular/controllers/index.js"></script>

solr/webapp/web/js/angular/controllers/cloud.js

@@ -89,7 +89,13 @@ var graphSubController = function ($scope, Zookeeper, isRadial) {
         host: [],
         hostname: [],
         port: [],
-        pathname: []
+        pathname: [],
+        replicaType: [],
+        base_url: [],
+        core: [],
+        node_name: [],
+        state: [],
+        core_node: []
     };
 
     $scope.next = function() {
@@ -153,7 +159,13 @@ var graphSubController = function ($scope, Zookeeper, isRadial) {
                                     host: parts[2],
                                     hostname: parts[3],
                                     port: parseInt(parts[5] || 80, 10),
-                                    pathname: parts[6]
+                                    pathname: parts[6],
+                                    replicaType: replica.type,
+                                    base_url: replica.base_url,
+                                    core: replica.core,
+                                    node_name: replica.node_name,
+                                    state: replica.state,
+                                    core_node: n
                                 };
 
                                 $scope.helperData.protocol.push(uri_parts.protocol);
@@ -161,6 +173,12 @@ var graphSubController = function ($scope, Zookeeper, isRadial) {
                                 $scope.helperData.hostname.push(uri_parts.hostname);
                                 $scope.helperData.port.push(uri_parts.port);
                                 $scope.helperData.pathname.push(uri_parts.pathname);
+                                $scope.helperData.replicaType.push(uri_parts.replicaType);
+                                $scope.helperData.base_url.push(uri_parts.base_url);
+                                $scope.helperData.core.push(uri_parts.core);
+                                $scope.helperData.node_name.push(uri_parts.node_name);
+                                $scope.helperData.state.push(uri_parts.state);
+                                $scope.helperData.core_node.push(uri_parts.core_node);
 
                                 var replica_status = replica.state;
 
@@ -208,6 +226,12 @@ var graphSubController = function ($scope, Zookeeper, isRadial) {
                     $scope.helperData.hostname = $.unique($scope.helperData.hostname);
                     $scope.helperData.port = $.unique($scope.helperData.port);
                     $scope.helperData.pathname = $.unique($scope.helperData.pathname);
+                    $scope.helperData.replicaType = $.unique($scope.helperData.replicaType);
+                    $scope.helperData.base_url = $.unique($scope.helperData.base_url);
+                    $scope.helperData.core = $.unique($scope.helperData.core);
+                    $scope.helperData.node_name = $.unique($scope.helperData.node_name);
+                    $scope.helperData.state = $.unique($scope.helperData.state);
+                    $scope.helperData.core_node = $.unique($scope.helperData.core_node);
 
                     if (!isRadial && data.znode && data.znode.paging) {
                         $scope.showPaging = true;
@@ -249,7 +273,7 @@ var graphSubController = function ($scope, Zookeeper, isRadial) {
     };
 
     $scope.initGraph();
-    $scope.pos = 0;   
+    $scope.pos = 0;
 };
 
 solrAdminApp.directive('graph', function(Constants) {
@@ -294,6 +318,26 @@ solrAdminApp.directive('graph', function(Constants) {
                 return classes.join(' ');
             };
 
+            var helper_tooltip_text = function (d) {
+                if (!d.data || !d.data.uri) {
+                    return tooltip;
+                }
+
+                var tooltip = d.data.uri.core_node + " {<br/>";
+
+                if (0 !== scope.helperData.core.length) {
+                    tooltip += "core: [" + d.data.uri.core + "],<br/>";
+                }
+
+                if (0 !== scope.helperData.node_name.length) {
+                    tooltip += "node_name: [" + d.data.uri.node_name + "],<br/>";
+                }
+
+                tooltip += "}";
+
+                return tooltip;
+            };
+
             var helper_node_text = function (d) {
                 if (!d.data || !d.data.uri) {
                     return d.name;
@@ -313,6 +357,10 @@ solrAdminApp.directive('graph', function(Constants) {
                     name += d.data.uri.pathname;
                 }
 
+                if(0 !== scope.helperData.replicaType.length) {
+                    name += ' (' + d.data.uri.replicaType[0] + ')';
+                }
+
                 return name;
             };
 
@@ -324,6 +372,12 @@ solrAdminApp.directive('graph', function(Constants) {
                         flatGraph(element, scope.data, scope.leafCount);
                     }
                 }
+
+                $('text').tooltip({
+                    content: function() {
+                        return $(this).attr('title');
+                    }
+                });
             });
 
 
@@ -397,7 +451,8 @@ solrAdminApp.directive('graph', function(Constants) {
                     })
                     .attr('text-anchor', function (d) {
                         return 0 === d.depth ? 'end' : 'start';
-                    })                    
+                    })
+                    .attr("title", helper_tooltip_text)
                     .text(helper_node_text);
 
                 setNodeNavigationBehavior(node);
@@ -452,6 +507,7 @@ solrAdminApp.directive('graph', function(Constants) {
                     .attr('transform', function (d) {
                         return d.x < 180 ? null : 'rotate(180)';
                     })
+                    .attr("title", helper_tooltip_text)
                     .text(helper_node_text);
 
                 setNodeNavigationBehavior(node, "rgraph");

solr/webapp/web/partials/cloud.html

@@ -61,6 +61,7 @@ limitations under the License.
           <li class="recovery_failed"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Recovery Failed</li>
           <li class="shard-inactive"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Inactive</li>
           <li class="gone"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Gone</li>
+          <li class="replicatype"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><rect width="8" height="8"></rect></g></g></svg>Replica Type:<br/>N(NRT),T(TLOG),<br/>P(PULL) </li>
         </ul>
       </div>
       <div style="width: 100%; text-align: center;" ng-show="showPaging">