首页 发现 帮助
注册 登录
apache
/
hadoop
镜像自地址 https://github.com/apache/hadoop.git
2
0
派生 1
文件 工单管理 0 Wiki
浏览代码

HDFS-12759. Ozone: web: integrate configuration reader page to the SCM/KSM web ui. Contributed by Elek, Marton.

Anu Engineer 7 年之前
父节点
8e8ff85b16
当前提交
4deb845d7c
共有 12 个文件被更改，包括 276 次插入 和 249 次删除
合并视图 显示文件统计
  1. 6 10
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/ksm/index.html
  2. 6 1
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/ksm/ksm.js
  3. 18 0
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/ksm/main.html
  4. 10 10
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/scm/index.html
  5. 20 0
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/scm/main.html
  6. 0 62
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/css/ozone-conf.css
  7. 0 102
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/js/ozone-conf.js
  8. 41 4
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/ozone.css
  9. 116 6
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/ozone.js
  10. 30 47
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/templates/config.html
  11. 26 5
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/templates/menu.html
  12. 3 2
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/templates/rpc-metrics.html

+ 6 - 10
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/ksm/index.html
查看文件 

@@ -30,14 +30,14 @@
 
     <link href="/static/hadoop.css" rel="stylesheet">
 
     <link href="/static/hadoop.css" rel="stylesheet">
 
     <link href="/static/nvd3-1.8.5.min.css" rel="stylesheet">
 
     <link href="/static/nvd3-1.8.5.min.css" rel="stylesheet">
 
 
 
-    <link href="/main.css" rel="stylesheet">
 
+    <link href="/static/ozone.css" rel="stylesheet">
 
 
 
 </head>
 
 </head>
 
 
 
 <body ng-app="ksm">
 
 <body ng-app="ksm">
 
 
 
 <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
 
 <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
 
-    <div class="container">
 
+    <div class="container-fluid">
 
         <div class="navbar-header">
 
         <div class="navbar-header">
 
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
 
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
 
                     aria-expanded="false" aria-controls="navbar">
 
                     aria-expanded="false" aria-controls="navbar">
 
@@ -48,17 +48,13 @@
 
             </button>
 
             </button>
 
             <a class="navbar-brand" href="#">HDFS KSM</a>
 
             <a class="navbar-brand" href="#">HDFS KSM</a>
 
         </div>
 
         </div>
 
-        <common-tools></common-tools>
 
+        <navmenu
 
+                metrics="{ 'Ksm metrics' : '/#!/metrics/ksm', 'Rpc metrics' : '/#!/metrics/rpc'}"></navmenu>
 
     </div>
 
     </div>
 
 </header>
 
 </header>
 
 
 
-<div class="container">
 
-
 
-    <overview></overview>
 
-    <ksm-metrics></ksm-metrics>
 
-    <rpc-metrics></rpc-metrics>
 
-
 
-
 
+<div class="container-fluid">
 
+    <ng-view></ng-view>
 
 </div><!-- /.container -->
 
 </div><!-- /.container -->
 
 
 
 <script src="/static/jquery-1.10.2.min.js"></script>
 
 <script src="/static/jquery-1.10.2.min.js"></script>

+ 6 - 1
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/ksm/ksm.js
查看文件 

@@ -23,7 +23,12 @@
 
     };
 
     };
 
 
 
     angular.module('ksm', ['ozone', 'nvd3']);
 
     angular.module('ksm', ['ozone', 'nvd3']);
 
-
 
+    angular.module('ksm').config(function ($routeProvider) {
 
+        $routeProvider
 
+            .when("/metrics/ksm", {
 
+                template: "<ksm-metrics></ksm-metrics>"
 
+            });
 
+    });
 
     angular.module('ksm').component('ksmMetrics', {
 
     angular.module('ksm').component('ksmMetrics', {
 
         templateUrl: 'ksm-metrics.html',
 
         templateUrl: 'ksm-metrics.html',
 
         controller: function ($http) {
 
         controller: function ($http) {

+ 18 - 0
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/ksm/main.html
查看文件 

@@ -0,0 +1,18 @@
 
+<!--
 
+    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.
 
+  -->
 
+<overview>
 
+</overview>

+ 10 - 10
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/scm/index.html
查看文件 

@@ -30,14 +30,14 @@
 
     <link href="/static/hadoop.css" rel="stylesheet">
 
     <link href="/static/hadoop.css" rel="stylesheet">
 
     <link href="/static/nvd3-1.8.5.min.css" rel="stylesheet">
 
     <link href="/static/nvd3-1.8.5.min.css" rel="stylesheet">
 
 
 
-    <link href="/main.css" rel="stylesheet">
 
+    <link href="/static/ozone.css" rel="stylesheet">
 
 
 
 </head>
 
 </head>
 
 
 
 <body ng-app="scm">
 
 <body ng-app="scm">
 
 
 
 <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
 
 <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
 
-    <div class="container">
 
+    <div class="container-fluid">
 
         <div class="navbar-header">
 
         <div class="navbar-header">
 
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
 
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
 
                     aria-expanded="false" aria-controls="navbar">
 
                     aria-expanded="false" aria-controls="navbar">
 
@@ -48,18 +48,18 @@
 
             </button>
 
             </button>
 
             <a class="navbar-brand" href="#">HDFS SCM</a>
 
             <a class="navbar-brand" href="#">HDFS SCM</a>
 
         </div>
 
         </div>
 
-        <common-tools></common-tools>
 
+
 
+
 
+        <navmenu
 
+                metrics="{ 'Rpc metrics' : '/#!/metrics/rpc'}"></navmenu>
 
+
 
+
 
     </div>
 
     </div>
 
 </header>
 
 </header>
 
 
 
-<div class="container">
 
-
 
-    <overview>
 
-        <scm-overview>
 
-        </scm-overview>
 
-    </overview>
 
-    <rpc-metrics></rpc-metrics>
 
+<div class="container-fluid" style="margin: 12pt">
 
 
 
+    <ng-view></ng-view>
 
 
 
 </div><!-- /.container -->
 
 </div><!-- /.container -->

+ 20 - 0
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/scm/main.html
查看文件 

@@ -0,0 +1,20 @@
 
+<!--
 
+    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.
 
+  -->
 
+<overview>
 
+    <scm-overview>
 
+    </scm-overview>
 
+</overview>

+ 0 - 62
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/css/ozone-conf.css
查看文件 

@@ -1,62 +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.
 
-*/
 
-
 
-.btn {
 
-    border: 0 none;
 
-    font-weight: 700;
 
-    letter-spacing: 1px;
 
-    text-transform: uppercase;
 
-}
 
-
 
-.btn:focus, .btn:active:focus, .btn.active:focus {
 
-    outline: 0 none;
 
-}
 
-
 
-.btn-primary {
 
-    background: #F8F9F9;
 
-    color: #237676;
 
-}
 
-
 
-.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
 
-    background: #33a6cc;
 
-}
 
-
 
-.btn-primary:active, .btn-primary.active {
 
-    background: #007299;
 
-    box-shadow: none;
 
-}
 
-
 
-.top-buffer { margin-top:4px; }
 
-
 
-.tagPanel tr:nth-child(odd) {
 
-  background-color: #fff;
 
-}
 
-.tagPanel tr:nth-child(even) {
 
-  background-color: #d9ffcc;
 
-}
 
-
 
-.sortorder:after {
 
-  content: '\25b2';   // BLACK UP-POINTING TRIANGLE
 
-}
 
-.sortorder.reverse:after {
 
-  content: '\25bc';   // BLACK DOWN-POINTING TRIANGLE
 
-}
 
-
 
-.wrap-table{
 
-  word-wrap: break-word;
 
-  table-layout: fixed;
 
-}

+ 0 - 102
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/js/ozone-conf.js
查看文件 

@@ -1,102 +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.
 
- */
 
-var app = angular.module('app', []);
 
-app.controller('tagController', function($scope, $http,$filter) {
 
-    $scope.configArray = [];
 
-    $scope.selectedTags = [];
 
-
 
-    $http.get("/conf?cmd=getOzoneTags&group=ozone")
 
-        .then(function(response) {
 
-            $scope.tags = response.data;
 
-
 
-      var idx = $scope.tags.indexOf('CBLOCK');
 
-        // Remove CBLOCK related properties
 
-        if (idx > -1) {
 
-            console.log('Removing cblock configs')
 
-            $scope.tags.splice(idx, 1);
 
-        }
 
-      $scope.loadAll();
 
-        });
 
-
 
-    $scope.convertToArray = function(configAr) {
 
-        $scope.configArray = configAr;
 
-    }
 
-
 
-    $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('name');
 
-        });
 
-    };
 
-
 
-    $scope.selected = function(tag) {
 
-        var idx = $scope.selectedTags.indexOf(tag);
 
-        // Is currently selected
 
-        if (idx > -1) {
 
-            $scope.selectedTags.splice(idx, 1);
 
-        } else {
 
-            $scope.selectedTags.push(tag);
 
-        }
 
-        console.log("Tags selected:" + $scope.selectedTags);
 
-        $scope.reloadConfig();
 
-    };
 
-
 
-    $scope.reloadConfig = function() {
 
-        if ($scope.selectedTags.length > 0) {
 
-            console.log("Displaying configs for:" + $scope.selectedTags);
 
-            $http.get("/conf?cmd=getPropertyByTag&tags=" + $scope.selectedTags + "&group=ozone").then(function(response) {
 
-                $scope.configs = response.data;
 
-                $scope.convertToArray($scope.configs);
 
-            });
 
-        }
 
-      else {
 
-            $scope.loadAll();
 
-      }
 
-
 
-    };
 
-
 
-    $scope.filterTags = function(tag) {
 
-        return (!['KSM', 'SCM', 'OZONE','CBLOCK'].includes(tag));
 
-    };
 
-
 
-    $scope.filterConfig = function(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 = [];
 
-
 
-          for(var i1 in tmpConfig) {
 
-
 
-             for(var i2 in  $scope.configs) {
 
-              if(tmpConfig[i1].name == $scope.configs[i2].name){
 
-                array3.push( tmpConfig[i1]);
 
-              }
 
-            }
 
-          }
 
-        $scope.convertToArray(array3);
 
-        });
 
-    };
 
-
 
-  $scope.sortBy = function(propertyName) {
 
-    $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
 
-    $scope.propertyName = propertyName;
 
-  };
 
-
 
-});

+ 41 - 4
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/scm/main.css → hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/ozone.css
查看文件 

@@ -15,9 +15,46 @@
 
  *  limitations under the License.
 
  *  limitations under the License.
 
 */
 
 */
 
 body {
 
 body {
 
-  padding-top: 50px;
 
+    padding: 40px;
 
+    padding-top: 60px;
 
 }
 
 }
 
 .starter-template {
 
 .starter-template {
 
-  padding: 40px 15px;
 
-  text-align: center;
 
-}
 
+    padding: 40px 15px;
 
+    text-align: center;
 
+}
 
+
 
+
 
+.btn {
 
+    border: 0 none;
 
+    font-weight: 700;
 
+    letter-spacing: 1px;
 
+    text-transform: uppercase;
 
+}
 
+
 
+.btn:focus, .btn:active:focus, .btn.active:focus {
 
+    outline: 0 none;
 
+}
 
+
 
+.table-striped > tbody > tr:nth-child(2n+1).selectedtag > td:hover {
 
+    background-color: #3276b1;
 
+}
 
+.table-striped > tbody > tr:nth-child(2n+1).selectedtag > td {
 
+    background-color: #3276b1;
 
+}
 
+.tagPanel tr.selectedtag td {
 
+    background-color: #3276b1;
 
+}
 
+.top-buffer { margin-top:4px; }
 
+
 
+
 
+.sortorder:after {
 
+    content: '\25b2';   // BLACK UP-POINTING TRIANGLE
 
+}
 
+.sortorder.reverse:after {
 
+    content: '\25bc';   // BLACK DOWN-POINTING TRIANGLE
 
+}
 
+
 
+.wrap-table{
 
+    word-wrap: break-word;
 
+    table-layout: fixed;
 
+}

+ 116 - 6
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/ozone.js
查看文件 

@@ -22,7 +22,19 @@
 
         return key == 'name' || key == 'modelerType' || key == "$$hashKey" ||
 
         return key == 'name' || key == 'modelerType' || key == "$$hashKey" ||
 
             key.match(/tag.*/);
 
             key.match(/tag.*/);
 
     };
 
     };
 
-    angular.module('ozone', ['nvd3'])
 
+    angular.module('ozone', ['nvd3', 'ngRoute']);
 
+    angular.module('ozone').config(function ($routeProvider) {
 
+        $routeProvider
 
+            .when("/", {
 
+                templateUrl: "main.html"
 
+            })
 
+            .when("/metrics/rpc", {
 
+                template: "<rpc-metrics></rpc-metrics>"
 
+            })
 
+            .when("/config", {
 
+                template: "<config></config>"
 
+            })
 
+    });
 
     angular.module('ozone').component('overview', {
 
     angular.module('ozone').component('overview', {
 
         templateUrl: 'static/templates/overview.html',
 
         templateUrl: 'static/templates/overview.html',
 
         transclude: true,
 
         transclude: true,
 
@@ -37,13 +49,13 @@
 
     angular.module('ozone').component('jvmParameters', {
 
     angular.module('ozone').component('jvmParameters', {
 
         templateUrl: 'static/templates/jvm.html',
 
         templateUrl: 'static/templates/jvm.html',
 
         controller: function ($http) {
 
         controller: function ($http) {
 
-            var ctrl = this
 
+            var ctrl = this;
 
             $http.get("/jmx?qry=java.lang:type=Runtime")
 
             $http.get("/jmx?qry=java.lang:type=Runtime")
 
                 .then(function (result) {
 
                 .then(function (result) {
 
                     ctrl.jmx = result.data.beans[0];
 
                     ctrl.jmx = result.data.beans[0];
 
 
 
                     //convert array to a map
 
                     //convert array to a map
 
-                    var systemProperties = {}
 
+                    var systemProperties = {};
 
                     for (var idx in ctrl.jmx.SystemProperties) {
 
                     for (var idx in ctrl.jmx.SystemProperties) {
 
                         var item = ctrl.jmx.SystemProperties[idx];
 
                         var item = ctrl.jmx.SystemProperties[idx];
 
                         systemProperties[item.key.replace(/\./g, "_")] = item.value;
 
                         systemProperties[item.key.replace(/\./g, "_")] = item.value;
 
@@ -208,7 +220,8 @@
 
                     ctrl.select(pane);
 
                     ctrl.select(pane);
 
                 }
 
                 }
 
             },
 
             },
 
-            template: '<div class="nav navtabs"><div class="container"><ul class="nav nav-pills">' +
 
+            template: '<div class="nav navtabs"><div class="row"><ul' +
 
+            ' class="nav nav-pills">' +
 
             '<li ng-repeat="pane in $ctrl.panes" ng-class="{active:pane.selected}">' +
 
             '<li ng-repeat="pane in $ctrl.panes" ng-class="{active:pane.selected}">' +
 
             '<a href="" ng-click="$ctrl.click(pane)">{{pane.title}}</a> ' +
 
             '<a href="" ng-click="$ctrl.click(pane)">{{pane.title}}</a> ' +
 
             '</li> </ul></div><br/><div class="tab-content" ng-transclude></div> </div>'
 
             '</li> </ul></div><br/><div class="tab-content" ng-transclude></div> </div>'
 
@@ -229,8 +242,11 @@
 
             template: '<div class="tab-pane" ng-if="$ctrl.selected" ng-transclude></div>'
 
             template: '<div class="tab-pane" ng-if="$ctrl.selected" ng-transclude></div>'
 
         });
 
         });
 
 
 
-    angular.module('ozone').component('commonTools', {
 
-        templateUrl: '/static/templates/tools.html',
 
+    angular.module('ozone').component('navmenu', {
 
+        bindings: {
 
+            metrics: '<'
 
+        },
 
+        templateUrl: '/static/templates/menu.html',
 
         controller: function ($http) {
 
         controller: function ($http) {
 
             var ctrl = this;
 
             var ctrl = this;
 
             ctrl.docs = false;
 
             ctrl.docs = false;
 
@@ -242,4 +258,98 @@
 
                 });
 
                 });
 
         }
 
         }
 
     });
 
     });
 
+
 
+    angular.module('ozone').component('config', {
 
+        templateUrl: '/static/templates/config.html',
 
+        controller: function ($scope, $http) {
 
+            var ctrl = this;
 
+            ctrl.selectedTags = [];
 
+
 
+            $http.get("/conf?cmd=getOzoneTags&group=ozone")
 
+                .then(function (response) {
 
+                    ctrl.tags = response.data;
 
+
 
+                    var excludedTags = ['CBLOCK', 'KSM', 'SCM'];
 
+                    for (var i = 0; i < excludedTags.length; i++) {
 
+                        var idx = ctrl.tags.indexOf(excludedTags[i]);
 
+                        // Remove CBLOCK related properties
 
+                        if (idx > -1) {
 
+                            ctrl.tags.splice(idx, 1);
 
+                        }
 
+                    }
 
+                    ctrl.loadAll();
 
+                });
 
+
 
+
 
+
 
+            ctrl.loadAll = function () {
 
+                console.log("Displaying all configs");
 
+                $http.get("/conf?cmd=getPropertyByTag&tags=" + ctrl.tags + "&group=ozone").then(function (response) {
 
+                    ctrl.configs = response.data;
 
+                    console.log(ctrl.configs)
 
+                    for (var idx in ctrl.configs) {
 
+                        var tags = []
 
+                        var parsedTags = ctrl.configs[idx].tag.split(",");
 
+                        for (var t in parsedTags) {
 
+                            tags.push(parsedTags[t].trim())
 
+                        }
 
+                        ctrl.configs[idx].tag = tags;
 
+
 
+                    };
 
+                    ctrl.sortBy('name');
 
+                });
 
+            };
 
+
 
+            ctrl.tagFilter = function (value, index, array) {
 
+                if (!ctrl.selectedTags) {
 
+                    return true;
 
+                }
 
+                var selected = true;
 
+                for (var idx in ctrl.selectedTags) {
 
+                    selected = selected && (value.tag.indexOf(ctrl.selectedTags[idx]) > -1);
 
+                }
 
+                return selected;
 
+            };
 
+            ctrl.configFilter = function (config) {
 
+                return false;
 
+            };
 
+            ctrl.selected = function (tag) {
 
+                return ctrl.selectedTags.includes(tag);
 
+            };
 
+
 
+            ctrl.allSelected = function () {
 
+                return ctrl.selectedTags.indexOf('SCM') == -1
 
+                    && ctrl.selectedTags.indexOf('KSM') == -1
 
+            };
 
+
 
+            ctrl.switchto = function (tag) {
 
+                var tags = ctrl.selectedTags.filter(function (item) {
 
+                    return item != 'KSM' && item != 'SCM';
 
+                });
 
+                if (tag) {
 
+                    tags.push(tag);
 
+                }
 
+                ctrl.selectedTags = tags;
 
+            };
 
+
 
+            ctrl.select = function (tag) {
 
+                var tagIdx = ctrl.selectedTags.indexOf(tag);
 
+                if (tagIdx > -1) {
 
+                    ctrl.selectedTags = ctrl.selectedTags.filter(function (item) {
 
+                        return item != tag;
 
+                    });
 
+                } else {
 
+                    ctrl.selectedTags.push(tag);
 
+                }
 
+                console.log("Tags selected:" + ctrl.selectedTags);
 
+            };
 
+
 
+            ctrl.sortBy = function (propertyName) {
 
+                ctrl.reverse = (ctrl.propertyName === propertyName) ? !ctrl.reverse : false;
 
+                ctrl.propertyName = propertyName;
 
+            };
 
+
 
+        }
 
+    });
 
+
 
 })();
 
 })();

+ 30 - 47
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/templates/ozone-config.html → hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/templates/config.html
查看文件 

@@ -1,5 +1,3 @@
 
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <!--
 
 <!--
 
     Licensed to the Apache Software Foundation (ASF) under one or more
 
     Licensed to the Apache Software Foundation (ASF) under one or more
 
     contributor license agreements.  See the NOTICE file distributed with
 
     contributor license agreements.  See the NOTICE file distributed with
 
@@ -16,94 +14,79 @@
 
     See the License for the specific language governing permissions and
 
     See the License for the specific language governing permissions and
 
     limitations under the License.
 
     limitations under the License.
 
   -->
 
   -->
 
-<html>
 
-<head>
 
-  <meta charset="utf-8">
 
-  <title>Ozone Config</title>
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link href="/static/bootstrap-3.0.2/css/bootstrap.min.css" rel="stylesheet">
 
-  <link rel="stylesheet" type="text/css" href="/static/css/ozone-conf.css">
 
-  <script src="/static/angular-1.6.4.min.js"></script>
 
-  <script src="/static/angular-route-1.6.4.min.js"></script>
 
-  <script src="/static/js/ozone-conf.js"></script>
 
-</head>
 
 
 
-<body class="htmlNoPages" ng-app="app" ng-controller="tagController">
 
-<div class="row btn-success">
 
-  <div class="col-md-12 text-center">
 
-    <h2>Ozone Configuration</h2>
 
-  </div>
 
-</div>
 
 <div class="row top-buffer">
 
 <div class="row top-buffer">
 
-  <div class="col-md-3">
 
+  <div class="col-md-2">
 
     <input type="text" class="form-control" placeholder="Search Properties"
 
     <input type="text" class="form-control" placeholder="Search Properties"
 
            name="search" ng-model="search.$">
 
            name="search" ng-model="search.$">
 
   </div>
 
   </div>
 
-  <div class="col-md-9">
 
+  <div class="col-md-10">
 
     <div class="btn-group btn-group-justified">
 
     <div class="btn-group btn-group-justified">
 
-      <a class="btn btn-primary" ng-click="loadAll()">All</a>
 
-      <a class="btn btn-primary" ng-click="filterConfig('KSM')">KSM</a>
 
-      <a class="btn btn-primary" ng-click="filterConfig('SCM')">SCM</a>
 
+      <a class="btn"
 
+         ng-class="$ctrl.allSelected() ? 'btn-primary' :'btn-secondary'"
 
+         ng-click="$ctrl.switchto('')">All
 
+      </a>
 
+      <a class="btn"
 
+         ng-class="$ctrl.selected('KSM') ? 'btn-primary' :'btn-secondary'"
 
+         ng-click="$ctrl.switchto('KSM')">KSM</a>
 
+      <a class="btn"
 
+         ng-class="$ctrl.selected('SCM') ? 'btn-primary' :'btn-secondary'"
 
+         ng-click="$ctrl.switchto('SCM')">SCM</a>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
 <div class="row">
 
 <div class="row">
 
-  <div class="col-md-3">
 
-    <table class="table table-striped table-condensed table-hover tagPanel">
 
+  <div class="col-md-2">
 
+
 
+    <table class="table table-striped table-condensed tagPanel">
 
       <colgroup>
 
       <colgroup>
 
-        <col class="col-md-2">
 
-        <col class="col-md-10">
 
+        <col class="col-md-12">
 
       </colgroup>
 
       </colgroup>
 
       <thead>
 
       <thead>
 
       <tr>
 
       <tr>
 
-        <th></th>
 
         <th>Tag</th>
 
         <th>Tag</th>
 
       </tr>
 
       </tr>
 
       </thead>
 
       </thead>
 
       <tbody>
 
       <tbody>
 
-      <tr ng-repeat="tag in tags |  filter:filterTags">
 
-        <td>
 
-          <input type="checkbox" name="{{tag}}" value="{{tag}}"
 
-                 ng-click="selected(tag)">
 
-        </td>
 
+      <tr ng-click="$ctrl.select(tag)"
 
+          ng-class="$ctrl.selected(tag) ? 'selectedtag':''"
 
+          ng-repeat="tag in $ctrl.tags">
 
         <td>{{tag}}</td>
 
         <td>{{tag}}</td>
 
       </tr>
 
       </tr>
 
       </tbody>
 
       </tbody>
 
     </table>
 
     </table>
 
   </div>
 
   </div>
 
-  <div class="col-md-9">
 
+  <div class="col-md-10">
 
     <table class="table table-striped table-condensed table-hover wrap-table">
 
     <table class="table table-striped table-condensed table-hover wrap-table">
 
       <thead>
 
       <thead>
 
       <tr>
 
       <tr>
 
-        <th class="col-md-3">
 
-          <a href="#" ng-click="sortBy('name')">Property</a>
 
+        <th class="col-md-3" >
 
+          <a href="#" ng-click="$ctrl.sortBy('name')">Property</a>
 
           <span class="sortorder" ng-show="propertyName === 'name'"
 
           <span class="sortorder" ng-show="propertyName === 'name'"
 
                 ng-class="{reverse: reverse}">
 
                 ng-class="{reverse: reverse}">
 
 
 
               </span>
 
               </span>
 
         </th>
 
         </th>
 
-        <th class="col-md-2">
 
-          <a ng-click="sortBy('value')">Value</a>
 
+        <th class="col-md-2" style="word-wrap: break-word;">
 
+          <a ng-click="$ctrl.sortBy('value')">Value</a>
 
           <span class="sortorder" ng-show="propertyName === 'value'"
 
           <span class="sortorder" ng-show="propertyName === 'value'"
 
                 ng-class="{reverse: reverse}"></span>
 
                 ng-class="{reverse: reverse}"></span>
 
         </th>
 
         </th>
 
         <th class="col-md-7">
 
         <th class="col-md-7">
 
-          <a ng-click="sortBy('description')">Description</a>
 
+          <a href="#" ng-click="$ctrl.sortBy('description')">Description</a>
 
           <span class="sortorder" ng-show="propertyName === 'description'"
 
           <span class="sortorder" ng-show="propertyName === 'description'"
 
                 ng-class="{reverse: reverse}"></span>
 
                 ng-class="{reverse: reverse}"></span>
 
         </th>
 
         </th>
 
       </tr>
 
       </tr>
 
       </thead>
 
       </thead>
 
       <tbody>
 
       <tbody>
 
-      <tr ng-repeat="config in configArray | filter:search | orderBy:propertyName:reverse">
 
-        <td>{{config.name}}</td>
 
-        <td>{{config.value}}</td>
 
-        <td>{{config.description}}</td>
 
+      <tr
 
+              ng-repeat="config in $ctrl.configs | filter:$ctrl.tagFilter | filter:search | orderBy:propertyName:reverse">
 
+        <td style="word-wrap: break-word;">{{config.name}}</td>
 
+        <td style="word-wrap: break-word;">{{config.value}}</td>
 
+        <td style="word-wrap: break-word;">{{config.description}}</td>
 
       </tr>
 
       </tr>
 
       </tbody>
 
       </tbody>
 
     </table>
 
     </table>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
-</body>
 
-
 
-</html>

+ 26 - 5
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/templates/tools.html → hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/templates/menu.html
查看文件 

@@ -17,16 +17,38 @@
 
 <div id="navbar" class="collapse navbar-collapse">
 
 <div id="navbar" class="collapse navbar-collapse">
 
     <ul class="nav navbar-nav" id="ui-tabs">
 
     <ul class="nav navbar-nav" id="ui-tabs">
 
         <li>
 
         <li>
 
-            <a class="dropdown-toggle" id="toolsMenu"
 
-               data-toggle="dropdown" aria-haspopup="true"
 
-               aria-expanded="true" href="#">
 
+            <a class="dropdown-toggle"
 
+               id="metricsMenu"
 
+               data-toggle="dropdown"
 
+               aria-haspopup="true"
 
+               aria-expanded="true">
 
+                Metrics
 
+                <span class="caret"></span>
 
+            </a>
 
+            <ul
 
+                class="dropdown-menu"
 
+                aria-labelledby="metricsMenu">
 
+                <li ng-repeat="(name, url) in $ctrl.metrics">
 
+                    <a ng-href="{{url}}">{{name}}<span
 
+                        aria-hidden="true"></span></a></li>
 
+            </ul>
 
+        </li>
 
+        <li><a href="/#!/config">Configuration</a></li>
 
+        <li ng-show="$ctrl.docs"><a href="/docs">Documentation</a></li>
 
+        <li>
 
+            <a class="dropdown-toggle"
 
+               id="toolsMenu"
 
+               data-toggle="dropdown"
 
+               aria-haspopup="true"
 
+               aria-expanded="true"
 
+               >
 
                 Common tools
 
                 Common tools
 
                 <span class="caret"></span>
 
                 <span class="caret"></span>
 
             </a>
 
             </a>
 
             <ul class="dropdown-menu" aria-labelledby="toolsMenu">
 
             <ul class="dropdown-menu" aria-labelledby="toolsMenu">
 
                 <li><a href="/jmx">JMX <span
 
                 <li><a href="/jmx">JMX <span
 
                         aria-hidden="true"></span></a></li>
 
                         aria-hidden="true"></span></a></li>
 
-                <li><a href="/static/templates/ozone-config.html">Config <span
 
+                <li><a href="/conf">Config <span
 
                         aria-hidden="true"></a></li>
 
                         aria-hidden="true"></a></li>
 
                 <li><a href="/stacks">Stacks <span
 
                 <li><a href="/stacks">Stacks <span
 
                         aria-hidden="true"></a></li>
 
                         aria-hidden="true"></a></li>
 
@@ -34,6 +56,5 @@
 
                         aria-hidden="true"></a></li>
 
                         aria-hidden="true"></a></li>
 
             </ul>
 
             </ul>
 
         </li>
 
         </li>
 
-        <li ng-show="$ctrl.docs"><a href="/docs">Documentation</a></li>
 
     </ul>
 
     </ul>
 
 </div><!--/.nav-collapse -->
 
 </div><!--/.nav-collapse -->

+ 3 - 2
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/templates/rpc-metrics.html
查看文件 

@@ -25,8 +25,9 @@
 
     <p>Quantiles based on a fixed {{window}} window. Calculated once at every
 
     <p>Quantiles based on a fixed {{window}} window. Calculated once at every
 
         {{window}}</p>
 
         {{window}}</p>
 
 
 
-    <div class="container">
 
-        <div class="col-md-6" ng-repeat="(metric,percentiles) in windowed">
 
+    <div class="row">
 
+        <div class="col-md-6 col-lg-4"
 
+             ng-repeat="(metric,percentiles) in windowed">
 
             <h3>{{metric}}</h3>
 
             <h3>{{metric}}</h3>
 
             <p>{{percentiles.numOps}} sample</p>
 
             <p>{{percentiles.numOps}} sample</p>
 
             <nvd3 options="$ctrl.percentileGraphOptions"
 
             <nvd3 options="$ctrl.percentileGraphOptions"