adding admin commands to the settings page

Author: bashwork

assets/css/main.css

@@ -135,9 +135,9 @@ body {
 .setting-block table th {
   background: #eee;
 }
+.setting-block ul { display: none }
 
 .setting-block td span          { display:block; }
 .setting-block td input         { display:none;  }
 .setting-block td.editing span  { display:none;  }
 .setting-block td.editing input { display:block; }
-

assets/js/speleo.settings.js

@@ -133,12 +133,18 @@ var SettingsView = Backbone.View.extend({
 var SettingsAppView = Backbone.View.extend({
 
   el: $('#settings-app'),
-  indexEl: $('#setting-name'),
   settingsEl: $('#setting-index'),
   clusterEl: $('#setting-cluster'),
+  settingIdxEl: $('#setting-name'),
+  clusterIdxEl: $('#cluster-name'),
+  operationIdxEl: $('#operation-name'),
 
   events: {
     'change #setting-name': 'changeSettings',
+    'change #operation-name': 'changeOperation',
+    'change #cluster-name': 'changeOperation',
+    'click  #operation-index a': 'indexOperation',
+    'click  #operation-cluster a': 'clusterOperation',
   },
 
   initialize:function() {
@@ -153,8 +159,8 @@ var SettingsAppView = Backbone.View.extend({
     this.elastic.request("GET", "_settings", "", function(d,x) {
       _.each(_.keys(d), function(key) {
         Settings.create(_.extend({ name : key }, d[key]), { silent: true });
-        $('<option></option>').attr("value", key).text(key)
-          .appendTo(self.indexEl);
+        $('<option/>').attr("value", key).text(key).appendTo(self.settingIdxEl);
+        $('<option/>').attr("value", key).text(key).appendTo(self.operationIdxEl);
       });
     });
 
@@ -163,29 +169,81 @@ var SettingsAppView = Backbone.View.extend({
       var view = new SettingsView({ model: setting });
       self.clusterEl.append(view.render().el);
     });
+
+    this.elastic.request("GET", "_cluster/nodes", "", function(d,x) {
+      _.each(_.keys(d.nodes), function(node) {
+        $('<option/>').attr("value", node).text(d.nodes[node].name).appendTo(self.clusterIdxEl);
+      });
+    })
   },
 
   render: function(setting) {
-    if (this.view) this.view.remove();
     this.view = new SettingsView({ model: setting });
-    this.settingsEl.append(this.view.render().el);
+    var elem = this.view.render().$el.hide();
+    this.settingsEl.append(elem);
+    elem.slideDown();
   },
 
-  changeSettings: function(e) {
-    e.preventDefault();
-    var name = $(e.target).val();
-    if (!name || name === "null") {
-      if (this.view) this.view.remove();
-      return;
+  changeOperation: function(e) {
+    var elem = $(e.target),
+        text = elem.val();
+    if (text === "null") {
+      elem.next().slideUp()
+    } else {
+      elem.next().slideDown()
     }
+  },
+
+  clusterOperation: function(e) {
+    var elem = $(e.target),
+        indx = '_cluster/nodes/' + this.clusterIdxEl.val(),
+        meth = elem.data('method') || 'POST',
+        quer = indx + '/' + elem.data('action') || '';
+
+    this.elastic.request(meth, quer, '', function(d,x) {
+      console.log(d);
+    });
+  },
+
+  indexOperation: function(e) {
+    var elem = $(e.target),
+        indx = this.operationIdxEl.val(),
+        meth = elem.data('method') || 'GET',
+        quer = indx + '/' + elem.data('action') || '';
+
+    this.elastic.request(meth, quer, '', function(d,x) {
+      console.log(d);
+    });
+  },
+
+  removeSetting: function() {
+    var self  = this;
+        defer = $.Deferred();
+
+    if (this.view) {
+     this.view.$el.slideUp(function(){
+        self.view.remove();
+        defer.resolve();
+      });
+    } else { defer.resolve(); }
+    return defer;
+  },
+
+  changeSettings: function(e) {
+    var name  = $(e.target).val(),
+        defer = this.removeSetting();
+    if (!name || name === "null") return;
 
     Settings.each(function(setting) {
       setting.set('_active', false, { silent: true });
     });
     var setting = Settings.find(function(setting) {
       return setting.get('name') === name;
     });
-    if (setting) { setting.set('_active', true); }
+
+    if (setting) {
+       defer.always(function() { setting.set('_active', true); });
+    }
   }
 
 });

settings.html

@@ -77,6 +77,38 @@ <h3>Cluster Settings</h3>
           </div>
         </div>
 
+        <div class='row'>
+          <div class="span6">
+            <div class='setting-block well' id='operation-index'>
+              <h3>Index Operations</h3>
+              <select id='operation-name' class='input-xlarge'>
+                <option value='null'>Select An Index</option>
+              </select>
+              <ul class='nav nav-list'>
+                <li><a href='#' data-action='_refresh'><i class='icon-refresh'></i> Refresh</a></li>
+                <li><a href='#' data-action='_flush'><i class='icon-download-alt'></i> Flush</a></li>
+                <li><a href='#' data-action='_optimize'><i class='icon-cog'></i> Optimize</a></li>
+                <li><a href='#' data-action='_cache/clear'><i class='icon-fire'></i> Clear Cache</a></li>
+                <li><a href='#' data-method='DELETE'><i class='icon-trash'></i> Delete</a></li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="span6">
+            <div class='setting-block well' id='operation-cluster'>
+              <h3>Cluster Operations</h3>
+              <select id='cluster-name' class='input-xlarge'>
+                <option value='null'>Select A Node</option>
+                <option value='_master'>Current Master</option>
+                <option value='_all'>Entire Cluster</option>
+              </select>
+              <ul class='nav nav-list'>
+                <li><a href='#' data-action='_shutdown'><i class='icon-eye-close'></i> Shutdown</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
       </div>
     </div>