dynamically support all cluster settings returned by settings API

closes lmenezes#277
psypuff · Apr 25, 2018 · 2aba4a1 · 2aba4a1
1 parent 6e3aa2e
commit 2aba4a1
Show file tree

Hide file tree

Showing 20 changed files with 404 additions and 375 deletions.
diff --git a/public/cluster_settings/circuit_breaker.html b/public/cluster_settings/circuit_breaker.html
diff --git a/public/cluster_settings/cluster_setting.html b/public/cluster_settings/cluster_setting.html
diff --git a/public/cluster_settings/discovery.html b/public/cluster_settings/discovery.html
diff --git a/public/cluster_settings/index.html b/public/cluster_settings/index.html
@@ -1,51 +1,64 @@
-<h4>cluster settings</h4>
-<div class="row">
-  <div class="col-xs-6">
-    <div class="form-group">
-      <select ng-model="group" ng-init="group = 'cluster_settings/routing.html'" class="form-control">
-        <option value="cluster_settings/routing.html">routing settings</option>
-        <option value="cluster_settings/discovery.html">discovery settings</option>
-        <option value="cluster_settings/circuit_breaker.html">circuit breaker settings</option>
-        <option value="cluster_settings/recovery.html">recovery settings</option>
-        <option value="cluster_settings/ttl.html">ttl interval settings</option>
-      </select>
-    </div>
+<!-- filter -->
+<div class="row query-container">
+  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
+    <input type="text" class="form-control" ng-model="settingsFilter.name"
+           ng-change="refreshVisibleProperties()" placeholder="filter settings by name"/>
   </div>
-  <div class="col-xs-12">
-    <div ng-include src="group"></div>
+  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
+    <div class="checkbox">
+      <label>
+        <input type="checkbox" ng-model="settingsFilter.showStatic"> show static settings <i class="fa fa-lock alert-warning"></i>
+      </label>
+    </div>
   </div>
 </div>
-<div class="row" ng-show="pendingChanges">
+
+<!-- settings form -->
+<div class="row form-group" ng-repeat="group in groupedSettings.groups | filter:displayGroup | orderBy:'name'">
   <div class="col-xs-12">
-    <table class="table">
-      <thead>
-      <tr>
-        <td>{{pendingChanges}} pending changes</td>
-      </tr>
-      </thead>
-      <tr ng-repeat="(p, v) in changes track by $index" ng-show="v">
-        <td>
-          <ng-pending-change
-            setting="{{p}}"
-            value="{{v.value}}"
-            transient="{{v.transient}}"
-            on-revert="revert(setting)"
-            on-change-setting-persistence="changeSettingPersistence(setting)">
-          </ng-pending-change>
-        </td>
-      </tr>
-    </table>
+    <h6><b>{{group.name | uppercase}}</b></h6>
+    <hr class="header">
   </div>
-</div>
-<div class="row">
-  <div class="col-lg-12 text-right" ng-show="pendingChanges">
+  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" ng-repeat="setting in group.settings | filter:displaySetting | orderBy:'name'">
     <div class="form-group">
-      <div class="btn-group">
-        <button class="btn btn-success" ng-click="save()">
-          save
-        </button>
+      <label class="form-label">
+        {{setting.name}} <i class="fa fa-lock alert-warning" ng-show="setting.static"> </i>
+      </label>
+      <input type="text" class="form-control" ng-model="form[setting.name]"
+             ng-change="set(setting.name)" ng-disabled="setting.static"/>
+    </div>
+  </div>
+</div>
+<!-- pending changes -->
+<div class="row" ng-show="pendingChanges" style="padding-top: {{(pendingChanges * 40) + 90}}px;">
+  <div class="pending-changes">
+    <div class="col-xs-12">
+      <table class="table">
+        <thead>
+        <tr class="text-center">
+          <td>{{pendingChanges}} pending changes</td>
+        </tr>
+        </thead>
+        <tr ng-repeat="(setting, value) in changes track by $index">
+          <td>
+            <i class="fa fa-cog"></i>
+            {{setting}} <span class="info-text">updated to</span> {{value.value}} <span class="info-text">as</span>
+            <u class="normal-action" ng-click="changeSettingPersistence(setting)">
+              {{value.transient ? 'transient' : 'persistent'}}
+            </u>
+            <i class="fa fa-undo normal-action pull-right" ng-click="revertSetting(setting)"></i>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="col-lg-12 text-right">
+      <div class="form-group">
+        <div class="btn-group">
+          <button class="btn btn-success" ng-click="save()">
+            save
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </div>
-
diff --git a/public/cluster_settings/pending_change.html b/public/cluster_settings/pending_change.html
diff --git a/public/cluster_settings/recovery.html b/public/cluster_settings/recovery.html
diff --git a/public/cluster_settings/routing.html b/public/cluster_settings/routing.html
diff --git a/public/cluster_settings/ttl.html b/public/cluster_settings/ttl.html
diff --git a/public/css/app.css b/public/css/app.css
@@ -132,4 +132,16 @@ table.shard-map { table-layout: fixed; }
 
 .checkbox inline {
     padding-right: 6px;
-}
+}
+.pending-changes {
+    position: fixed;
+    bottom: 0;
+    height: auto;
+    width: 100%;
+    background: #373a3c;
+    border: 1px solid #D0D0D0;
+}
+.query-container {
+    padding-bottom: 30px;
+}
+hr.header { margin-top: 0; }
diff --git a/public/css/lib.css b/public/css/lib.css