fluentd-ui 0.3.8 → 0.3.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e8a878149540a61f5a1c3332f91c788ba07658a0
-  data.tar.gz: b3ffe587af20b8d6feeb79ea48b2ab684a851fe2
+  metadata.gz: 19e7e14601e3423f3f3fd3cf77d39ffa135fd2be
+  data.tar.gz: 2dd240927a8bb79dd6bd2382d081c323a9a15833
 SHA512:
-  metadata.gz: 9e467bd3ae13cb3c600a63c9a5bd7e76d2d1be168ddfc1bd39a9fb3e529b04f9650a140f535ced690630363745f6f7543c559e87acbc7fa58d528ff24e8bfa73
-  data.tar.gz: 77f4eb293166a4511e38076e46047326040c08537668a37c6f13ce137ffa9a631452beeaff001026f5f474d8260412064977ce044a124b72a17964d845efab65
+  metadata.gz: 1d42635a64bb104a7dd728feabd2c831b37082278a11b55e7b30ec0cbef633f7a12a73b9d25b89ee220cad51e5708cbe5240b300063ef7b68ff9b5f53114262c
+  data.tar.gz: 7bb20b2a62e0cd1fdcc75bc8d8da6309038e4e2c0f62bd1a2bec5996ca29d453e1ea3ae57a855b898c0c8733e0ef63d0f84e546608c9899a91cd9888503cd6a1

data/ChangeLog

@@ -1,3 +1,12 @@
+Release 0.3.9 - 2014/12/01
+
+* [improve] Display current setting for each section.
+  https://github.com/fluent/fluentd-ui/pull/103
+* [improve] Instantly current setting changing.
+  https://github.com/fluent/fluentd-ui/pull/105
+* [improve] Reduce polling access for notification fetching.
+
+
 Release 0.3.8 - 2014/11/19
 
 * [improve] Recommended plugins are updated.

data/Gemfile

@@ -7,6 +7,7 @@ gemspec
 group :development, :test do
   gem "rake"
   gem "pry"
+  gem "pry-rails"
   gem "rspec-rails", "~> 2.99"
 end
 

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    fluentd-ui (0.3.8)
+    fluentd-ui (0.3.9)
       addressable
       bundler
       draper (~> 1.3)
@@ -149,6 +149,8 @@ GEM
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
       slop (~> 3.4)
+    pry-rails (0.3.2)
+      pry (>= 0.9.10)
     puma (2.9.2)
       rack (>= 1.1, < 2.0)
     rack (1.5.2)
@@ -244,6 +246,7 @@ DEPENDENCIES
   i18n_generators (= 1.2.1)
   poltergeist
   pry
+  pry-rails
   rake
   rspec-rails (~> 2.99)
   simplecov (~> 0.7.1)

data/app/assets/javascripts/vue/fluent_log.js

@@ -14,10 +14,7 @@
         "processing": false
       },
 
-      created: function(){
-        if(this.initialAutoReload) {
-          this.autoFetch = true;
-        }
+      compiled: function(){
         this.fetchLogs();
 
         var self = this;
@@ -33,6 +30,9 @@
             clearInterval(timer);
           }
         });
+        if(this.initialAutoReload) {
+          this.autoFetch = true;
+        }
       },
 
       computed: {

data/app/assets/javascripts/vue/in_tail_format.js

@@ -4,45 +4,57 @@
   $(function(){
     if($('#in_tail_format').length === 0) return;
 
+    var FormatBundle = Vue.component('format-bundle', {
+      inherit: true,
+      template: "#format-bundle",
+      computed: {
+        options: {
+          get: function(){
+            return this.formatOptions[this.format];
+          },
+        },
+        selectableFormats: {
+          get: function() {
+            return Object.keys(this.formatOptions);
+          }
+        }
+      }
+    });
+
     new Vue({
       el: "#in_tail_format",
-      paramAttributes: ["formatOptions", "initialSelected", "targetFile", "paramsJson"],
+      paramAttributes: ["formatOptionsJson", "initialSelected", "targetFile", "paramsJson"],
       data: {
-        regexp: "",
-        grok_str: "",
-        time_format: "",
         previewProcessing: false,
-        highlightedLines: null
+        format: "",
+        highlightedLines: null,
       },
 
-      created: function(){
-        this.formatOptions = JSON.parse(this.formatOptions);
-        this.formats = Object.keys(this.formatOptions);
-        this.format = this.initialSelected;
-        this.params = JSON.parse(this.paramsJson);
-        if(this.params && this.params.setting) {
-          this.grok_str = this.params.setting.grok_str;
-          this.regexp = this.params.setting.regexp;
-        }
-        this.$watch('regexp', function(ev){
+      compiled: function(){
+        this.$watch('params.setting.regexp', function(){
           this.preview();
         });
-        this.$watch('format', function(ev){
+        this.$watch('format', function(){
           this.preview();
         });
+        this.$set("formatOptions", JSON.parse(this.formatOptionsJson));
+        this.format = this.initialSelected;
 
-        var updateGrokPreview = _.debounce(_.bind(this.generateRegexp, this), 256);
-        this.$watch('grok_str', updateGrokPreview);
-      },
-
-      computed: {
-        options: function(){
-          return this.formatOptions[this.format];
-        },
-
-        selectableFormats: function() {
-          return _.filter(this.formats, function(format){ return format !== "regexp"; });
+        // initialize params
+        // NOTE: if `params.setting.foo` is undefined, Vue can't binding with v-model="params.setting.foo"
+        var params = JSON.parse(this.paramsJson);
+        if(!params.setting) {
+          params.setting = {};
         }
+        _.each(this.formatOptions, function(options){
+          _.each(options, function(key){
+            if(!params.setting.hasOwnProperty(key)){
+              params.setting[key] = "";
+            }
+          });
+        });
+        this.$set('params', params);
+        this.$emit("data-loaded");
       },
 
       methods: {
@@ -114,38 +126,20 @@
               method: "POST",
               url: "/api/regexp_preview",
               data: {
-                regexp: self.regexp,
-                format: self.formatType == "regexp" ? "regexp" : self.format,
-                time_format: self.time_format,
+                regexp: self.params.setting.regexp,
+                time_format: self.params.setting.time_format,
+                format: _.isEmpty(self.format) ? "regexp" : self.format,
                 file: self.targetFile
               }
             }).done(resolve).fail(reject);
           }).then(function(result){
-            self.time_format = result.time_format;
+            self.params = _.merge(self.params, result.params);
             self.regexpMatches = result.matches;
             self.updateHighlightedLines();
           })["catch"](function(error){
             console.error(error.stack);
           });
         },
-
-        generateRegexp: function() {
-          // for grok
-          var self = this;
-          new Promise(function(resolve, reject) {
-            $.ajax({
-              method: "POST",
-              url: "/api/grok_to_regexp",
-              data: {
-                grok_str: self.grok_str
-              }
-            }).done(resolve).fail(reject);
-          }).then(function(regexp){
-            self.regexp = regexp;
-          }).catch(function(e){
-            console.error(e);
-          });
-        },
       }
     });
   });

data/app/assets/javascripts/{alert.js → vue/notification.js}

@@ -4,38 +4,52 @@
   var POLLING_URL = "/polling/alerts";
 
   $(function(){
-    if($('#alert').length === 0) return;
+    if($('#vue-notification').length === 0) return;
 
     var alert = new Vue({
-      el: "#alert",
+      el: "#vue-notification",
       data: {
         "alerts": []
       },
 
       created: function(){
+        var timer;
         var self = this;
+        var currentInterval = POLLING_INTERVAL;
         var fetch = function(){
           self.fetchAlertsData().then(function(alerts){
+            if(self.alerts.toString() == alerts.toString()) {
+              currentInterval *= 1.1;
+            } else {
+              currentInterval = POLLING_INTERVAL;
+            }
             self.alerts = alerts;
+            timer = setTimeout(fetch, currentInterval);
           })["catch"](function(xhr){
             if(xhr.status === 401) {
-              clearInterval(timer); // signed out
+              // signed out
             }
             if(xhr.status === 0) {
-              clearInterval(timer); // server unreachable (maybe down)
+              // server unreachable (maybe down)
             }
           });
         };
+        window.addEventListener('focus', function(ev){
+          currentInterval = POLLING_INTERVAL;
+          timer = setTimeout(fetch, currentInterval);
+        }, false);
+        window.addEventListener('blur', function(ev){
+          clearTimeout(timer);
+        }, false);
         fetch();
-        var timer = setInterval(fetch, POLLING_INTERVAL);
       },
 
       computed: {
         alertsCount: {
-          $get: function(){ return this.alerts.length; }
+          get: function(){ return this.alerts.length; }
         },
         hasAlerts: {
-          $get: function(){ return this.alertsCount > 0; }
+          get: function(){ return this.alertsCount > 0; }
         }
       },
 

data/app/assets/javascripts/vue/settings.js

@@ -0,0 +1,121 @@
+;(function(){
+  "use strict";
+
+  $(function(){
+    var el = document.querySelector("#vue-setting");
+    if(!el) return;
+
+    new Vue({
+      el: el,
+      data: function(){
+        return {
+          loaded: false,
+          loading: false,
+          sections: {
+            sources: [],
+            matches: []
+          }
+        };
+      },
+      ready: function() {
+        this.update();
+      },
+      components: {
+        section: {
+          inherit: true,
+          template: "#vue-setting-section",
+          data: function(){
+            return {
+              mode: "default",
+              processing: false,
+              editContent: null
+            };
+          },
+          created: function(){
+            this.initialState();
+          },
+          computed: {
+            endpoint: function(){
+              return "/api/settings/" + this.id;
+            }
+          },
+          methods: {
+            onCancel: function(ev) {
+              this.initialState();
+            },
+            onEdit: function(ev) {
+              this.mode = "edit";
+            },
+            onDelete: function(ev) {
+              if(!confirm("really?")) return;
+              this.destroy();
+            },
+            onSubmit: function(ev) {
+              this.processing = true;
+              var self = this;
+              $.ajax({
+                url: this.endpoint,
+                method: "POST",
+                data: {
+                  _method: "PATCH",
+                  id: this.id,
+                  content: this.editContent
+                }
+              }).then(function(data){
+                // NOTE: self.$data = data doesn't work as well, so using _.each
+                //       whole $data swapping breaks mode switching..
+                _.each(data, function(v,k){
+                  self[k] = v;
+                });
+                self.initialState();
+              }).always(function(){
+                self.processing = false;
+              });
+            },
+            initialState: function(){
+              this.$set('processing', false);
+              this.$set('mode', 'default');
+              this.$set('editContent', this.content);
+            },
+            destroy: function(){
+              var self = this;
+              $.ajax({
+                url: this.endpoint,
+                method: "POST",
+                data: {
+                  _method: "DELETE",
+                  id: this.id
+                }
+              }).then(function(){
+                self.$parent.update();
+              });
+            }
+          }
+        }
+      },
+      methods: {
+        update: function() {
+          this.loading = true;
+          var self = this;
+          $.getJSON("/api/settings", function(data){
+            var sources = [];
+            var matches = [];
+            data.forEach(function(v){
+              if(v.name === "source"){
+                sources.push(v);
+              }else{
+                matches.push(v);
+              }
+            });
+            self.sections.sources = sources;
+            self.sections.matches = matches;
+            self.loaded = true;
+            setTimeout(function(){
+              self.loading = false;
+            }, 500);
+          });
+        }
+      }
+    });
+  });
+})();

data/app/assets/javascripts/vue/treeview.js

@@ -6,14 +6,14 @@
 
     new Vue({
       el: "#treeview",
-      paramAttributes: [],
+      paramAttributes: ["initialPath"],
       data: {
         preview: "",
-        initialPath: "/var/log",
+        path: "",
         paths: []
       },
 
-      created: function(){
+      compiled: function(){
         this.path = this.initialPath;
         this.fetchTree();
         this.$watch("path", this.fetchTree);

data/app/assets/stylesheets/common.css.scss

@@ -40,7 +40,7 @@ label {
 
 
 
-#alert {
+#vue-notification {
   .nothing {
     padding: 1em 0;
   }
@@ -150,3 +150,9 @@ label {
 .nav > li > a.section {
   color: #777;
 }
+
+
+#vue-setting textarea {
+  min-height: 12em;
+  resize: both;
+}

data/app/controllers/api/settings_controller.rb

@@ -0,0 +1,55 @@
+class Api::SettingsController < ApplicationController
+  before_action :login_required
+  before_action :find_fluentd
+  before_action :set_config
+  before_action :set_section, only: [:show, :update, :destroy]
+  helper_method :element_id
+  respond_to :json
+
+  def index
+  end
+
+  def update
+    coming = Fluent::Config::V1Parser.parse(params[:content], @fluentd.config_file)
+    current = @section
+    index = @config.elements.index current
+    unless index
+      render_404
+      return
+    end
+    @config.elements[index] = coming.elements.first
+    @config.write_to_file
+    redirect_to api_setting_path(id: element_id(coming.elements.first))
+  end
+
+  def destroy
+    unless @config.elements.index(@section)
+      render_404
+      return
+    end
+    @config.elements.delete @section
+    @config.write_to_file
+    head :no_content # 204
+  end
+
+  private
+
+  def set_config
+    @config = Fluentd::Setting::Config.new(@fluentd.config_file)
+  end
+
+  def set_section
+    @section = @config.elements.find do |elm|
+      element_id(elm) == params[:id]
+    end
+  end
+
+  def element_id(element)
+    index = @config.elements.index(element)
+    "#{"%06d" % index}#{Digest::MD5.hexdigest(element.to_s)}"
+  end
+
+  def render_404
+    render nothing: true, status: 404
+  end
+end