HDFS-12585. Ozone: KSM UI: Add description for configs in UI. Contributed by Ajay Kumar.

hadoop-common-project/hadoop-common/src/main/java/org/apache/hadoop/conf/OzoneConfiguration.java

@@ -18,6 +18,16 @@
 
 package org.apache.hadoop.conf;
 
+import java.net.URL;
+import java.util.ArrayList;
+import java.util.List;
+import javax.xml.bind.JAXBContext;
+import javax.xml.bind.JAXBException;
+import javax.xml.bind.Unmarshaller;
+import javax.xml.bind.annotation.XmlAccessType;
+import javax.xml.bind.annotation.XmlAccessorType;
+import javax.xml.bind.annotation.XmlElement;
+import javax.xml.bind.annotation.XmlRootElement;
 import org.apache.hadoop.classification.InterfaceAudience;
 
 /**
@@ -39,4 +49,107 @@ public class OzoneConfiguration extends Configuration {
   public OzoneConfiguration(Configuration conf) {
     super(conf);
   }
+
+  public List<Property> readPropertyFromXml(URL url) throws JAXBException {
+    JAXBContext context = JAXBContext.newInstance(XMLConfiguration.class);
+    Unmarshaller um = context.createUnmarshaller();
+
+    XMLConfiguration config = (XMLConfiguration) um.unmarshal(url);
+    return config.getProperties();
+  }
+
+  /**
+   * Class to marshall/un-marshall configuration from xml files.
+   */
+  @XmlAccessorType(XmlAccessType.FIELD)
+  @XmlRootElement(name = "configuration")
+  public static class XMLConfiguration {
+
+    @XmlElement(name = "property", type = Property.class)
+    private List<Property> properties = new ArrayList<>();
+
+    public XMLConfiguration() {
+    }
+
+    public XMLConfiguration(List<Property> properties) {
+      this.properties = properties;
+    }
+
+    public List<Property> getProperties() {
+      return properties;
+    }
+
+    public void setProperties(List<Property> properties) {
+      this.properties = properties;
+    }
+  }
+
+  /**
+   * Class to marshall/un-marshall configuration properties from xml files.
+   */
+  @XmlAccessorType(XmlAccessType.FIELD)
+  @XmlRootElement(name = "property")
+  public static class Property implements Comparable<Property> {
+
+    private String name;
+    private String value;
+    private String tag;
+    private String description;
+
+    public String getName() {
+      return name;
+    }
+
+    public void setName(String name) {
+      this.name = name;
+    }
+
+    public String getValue() {
+      return value;
+    }
+
+    public void setValue(String value) {
+      this.value = value;
+    }
+
+    public String getTag() {
+      return tag;
+    }
+
+    public void setTag(String tag) {
+      this.tag = tag;
+    }
+
+    public String getDescription() {
+      return description;
+    }
+
+    public void setDescription(String description) {
+      this.description = description;
+    }
+
+    @Override
+    public int compareTo(Property o) {
+      if (this == o) {
+        return 0;
+      }
+      return this.getName().compareTo(o.getName());
+    }
+
+    @Override
+    public String toString() {
+      return this.getName() + " " + this.getValue() + this.getTag();
+    }
+
+    @Override
+    public int hashCode(){
+      return this.getName().hashCode();
+    }
+
+    @Override
+    public boolean equals(Object obj) {
+      return (obj instanceof Property) && (((Property) obj).getName()).equals
+          (this.getName());
+    }
+  }
 }

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/css/ozone-conf.css

@@ -55,3 +55,8 @@
 .sortorder.reverse:after {
   content: '\25bc';   // BLACK DOWN-POINTING TRIANGLE
 }
+
+.wrap-table{
+  word-wrap: break-word;
+  table-layout: fixed;
+}

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/js/ozone-conf.js

@@ -33,25 +33,16 @@ app.controller('tagController', function($scope, $http,$filter) {
       $scope.loadAll();
         });
 
-
     $scope.convertToArray = function(configAr) {
-        $scope.configArray = [];
+        $scope.configArray = configAr;
-      console.log("Reloading "+configAr);
-        for (config in configAr) {
-            var newProp = {};
-            newProp['prop'] = config;
-            newProp['value'] = configAr[config];
-            $scope.configArray.push(newProp);
     }
-    }
-
 
     $scope.loadAll = function() {
       console.log("Displaying all configs");
         $http.get("/conf?cmd=getPropertyByTag&tags=" + $scope.tags + "&group=ozone").then(function(response) {
             $scope.configs = response.data;
             $scope.convertToArray($scope.configs);
-            $scope.sortBy('prop');
+            $scope.sortBy('name');
         });
     };
 
@@ -89,18 +80,16 @@ app.controller('tagController', function($scope, $http,$filter) {
         $http.get("/conf?cmd=getPropertyByTag&tags=" + filter + "&group=ozone").then(function(response) {
           var tmpConfig = response.data;
           console.log('filtering config for tag:'+filter);
-          array3 = {};
+          array3 = [];
 
-          for(var prop1 in tmpConfig) {
+          for(var i1 in tmpConfig) {
 
-             for(var prop2 in  $scope.configs) {
+             for(var i2 in  $scope.configs) {
-              if(prop1 == prop2){
+              if(tmpConfig[i1].name == $scope.configs[i2].name){
-                array3[prop1] = tmpConfig[prop1];
+                array3.push( tmpConfig[i1]);
-                console.log('match found for :'+prop1+'  '+prop2);
               }
             }
           }
-        console.log('array3->'+array3);
         $scope.convertToArray(array3);
         });
     };

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/templates/ozone-config.html

@@ -72,27 +72,33 @@
     </table>
   </div>
   <div class="col-md-9">
-    <table class="table table-striped table-condensed table-hover">
+    <table class="table table-striped table-condensed table-hover wrap-table">
       <thead>
       <tr>
-        <th>
+        <th class="col-md-3">
-          <a href="#" ng-click="sortBy('prop')">Property</a>
+          <a href="#" ng-click="sortBy('name')">Property</a>
-          <span class="sortorder" ng-show="propertyName === 'prop'"
+          <span class="sortorder" ng-show="propertyName === 'name'"
                 ng-class="{reverse: reverse}">
 
               </span>
         </th>
-        <th>
+        <th class="col-md-2">
           <a ng-click="sortBy('value')">Value</a>
           <span class="sortorder" ng-show="propertyName === 'value'"
                 ng-class="{reverse: reverse}"></span>
         </th>
+        <th class="col-md-7">
+          <a ng-click="sortBy('description')">Description</a>
+          <span class="sortorder" ng-show="propertyName === 'description'"
+                ng-class="{reverse: reverse}"></span>
+        </th>
       </tr>
       </thead>
       <tbody>
       <tr ng-repeat="config in configArray | filter:search | orderBy:propertyName:reverse">
-        <td>{{config.prop}}</td>
+        <td>{{config.name}}</td>
         <td>{{config.value}}</td>
+        <td>{{config.description}}</td>
       </tr>
       </tbody>
     </table>