fluentd-ui 0.1.0

data/app/assets/javascripts/nested_setting.js

@@ -0,0 +1,41 @@
+(function(){
+  "use strict";
+
+  $(function(){
+    var $firstSetting = $('.js-nested-column.js-multiple:first');
+
+    if($firstSetting.length === 0) return;
+
+    var counter = 0;
+    $('.js-append', $firstSetting).on('click', function(ev){
+      ev.preventDefault();
+      var $new = $firstSetting.clone(true);
+      counter++;
+
+      var fields = $('input,select,textarea', $new);
+      _.each(fields, function(elm){
+        elm.name = elm.name.replace("0", counter);
+      });
+      $('label', $new).each(function(_, label){
+        var $label = $(label);
+        $label.attr('for', $label.attr('for').replace("0", counter));
+      });
+
+      $('.js-remove', $new).show();
+      $('.js-append', $new).hide();
+      $new.appendTo($firstSetting.parent());
+    });
+
+    $('.js-remove').on('click', function(ev){
+      ev.preventDefault();
+      $(this).closest('.js-nested-column').remove();
+    });
+
+    var $allSettings = $('.js-nested-column.js-multiple');
+    $('.js-append', $allSettings).hide();
+    $('.js-remove', $allSettings).show();
+    $('.js-append', $firstSetting).show();
+    $('.js-remove', $firstSetting).hide();
+  });
+})();
+

data/app/assets/javascripts/setting_format.js

@@ -0,0 +1,15 @@
+(function(){
+  "use strict";
+
+  $(function(){
+    var $select = $('#setting-format select');
+    if($select.length === 0) return;
+
+    var $options = $('#setting-format-options');
+    console.log($options);
+    debugger;
+    $select.on("change", function(ev){
+    });
+  });
+})();
+

data/app/assets/javascripts/tutorial.js

@@ -0,0 +1,58 @@
+(function(){
+  "use strict";
+
+  $(function(){
+    // At tutorial chapter1, sending request to fluentd
+
+    if($('#chapter1').length === 0) return;
+
+    new Vue({
+      el: "#chapter1",
+      data: {
+        "payloads": [
+          {
+            "path": "/debug.foo",
+            "data" : {
+              "message": "test message", // NOTE: "'" will break curl command
+            }
+          },
+          {
+            "path": "/debug.bar",
+            "data" : {
+              "my_number": 42,
+              "my_array": [1, 2, 3]
+            }
+          },
+          {
+            "path": "/xxxxx",
+            "data" : {
+              "xx": "will be unmatched"
+            }
+          },
+          {
+            "path": "/slash/convert/to/dot",
+            "data" : {
+              "greeting": "hello"
+            }
+          }
+        ]
+      },
+
+      methods: {
+        sendRequest: function(payload){
+          new Promise(function(resolve, reject) {
+            $.ajax({
+              url: "/tutorials/request_fluentd",
+              data: JSON.stringify(payload),
+              contentType: "application/json",
+              dataType: "json",
+              type: "POST"
+            }).done(resolve).fail(reject);
+          })["catch"](function(e){
+            console.error(e);
+          });
+        }
+      }
+    });
+  });
+})();

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

@@ -0,0 +1,64 @@
+(function(){
+  "use strict";
+
+  $(function(){
+    if($('#fluent-log').length === 0) return;
+
+    new Vue({
+      el: "#fluent-log",
+      paramAttributes: ["logUrl", "initialAutoReload"],
+      data: {
+        "autoFetch": false,
+        "logs": [],
+        "limit": 30,
+        "processing": false
+      },
+
+      created: function(){
+        if(this.initialAutoReload) {
+          this.autoFetch = true;
+        }
+        this.fetchLogs();
+
+        var self = this;
+        var timer;
+        this.$watch("autoFetch", function(newValue){
+          if(newValue === true) {
+            timer = setInterval(function(){
+              self.fetchLogs();
+              var $log = $(".log", self.$el);
+              $log.scrollTop($log[0].scrollHeight);
+            }, 1000);
+          } else {
+            clearInterval(timer);
+          }
+        });
+      },
+
+      computed: {
+        isPresentedLogs: function(){
+          return this.logs.length > 0;
+        }
+      },
+
+      methods: {
+        fetchLogs: function() {
+          if(this.processing) return;
+          this.processing = true;
+          var self = this;
+          new Promise(function(resolve, reject) {
+            $.getJSON(self.logUrl + "?limit=" + self.limit, resolve).fail(reject);
+          }).then(function(logs){
+            self.logs = logs;
+            setTimeout(function(){
+              self.processing = false;
+            }, 256); // delay to reduce flicking loading icon
+          })["catch"](function(error){
+            self.processing = false;
+          });
+        }
+      }
+    });
+  });
+})();
+

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

@@ -0,0 +1,153 @@
+(function(){
+  "use strict";
+
+  $(function(){
+    if($('#in_tail_format').length === 0) return;
+
+    new Vue({
+      el: "#in_tail_format",
+      paramAttributes: ["formatOptions", "initialSelected", "targetFile", "paramsJson"],
+      data: {
+        regexp: "",
+        grok_str: "",
+        time_format: "",
+        previewProcessing: false,
+        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){
+          this.preview();
+        });
+        this.$watch('format', function(ev){
+          this.preview();
+        });
+
+        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"; });
+        }
+      },
+
+      methods: {
+        updateHighlightedLines: function() {
+          if(!this.regexpMatches) {
+            this.highlightedLines = null;
+            return;
+          }
+
+          var $container = jQuery('<div>');
+          _.each(this.regexpMatches, function(match){
+            var colors = [
+              "#ff9", "#cff", "#fcf", "#dfd"
+            ];
+            var whole = match.whole;
+            var html = "";
+            var matches = [];
+
+            var lastPos = 0;
+            _.each(match.matches, function(match) {
+              var matched = match.matched;
+              if(!matched) return;
+              if(matched.length === 0) return; // Ignore empty matched with "foobar".match(/foo(.*?)bar/)[1] #=> ""
+
+              // rotated highlight color
+              var currentColor = colors.shift();
+              colors.push(currentColor);
+
+              // create highlighted range HTML
+              var $highlighted = jQuery('<span>').text(matched);
+              $highlighted.attr({
+                "class": "regexp-preview",
+                "data-toggle": "tooltip",
+                "data-placement": "top",
+                "title": match.key,
+                'style': 'background-color:' + currentColor
+              });
+              var highlightedHtml = $highlighted.wrap('<div>').parent().html();
+
+              var pos = {
+                "start": match.pos[0],
+                "end": match.pos[1]
+              };
+              if(pos.start > 0) {
+                html += _.escape(whole.substring(lastPos, pos.start));
+              }
+              html += highlightedHtml;
+              lastPos = pos.end;
+            });
+            html += whole.substring(lastPos);
+
+            $container.append(html);
+            $container.append("<br />");
+          });
+
+          this.highlightedLines = $container.html();
+          setTimeout(function(){
+            $('#in_tail_format').tooltip({
+              selector: "[data-toggle=tooltip]",
+              container: "body"
+            })
+          },0);
+        },
+
+        preview: function(){
+          var self = this;
+          new Promise(function(resolve, reject) {
+            $.ajax({
+              method: "POST",
+              url: "/api/regexp_preview",
+              data: {
+                regexp: self.regexp,
+                format: self.formatType == "regexp" ? "regexp" : self.format,
+                time_format: self.time_format,
+                file: self.targetFile
+              }
+            }).done(resolve).fail(reject);
+          }).then(function(result){
+            self.time_format = result.time_format;
+            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/vue/treeview.js

@@ -0,0 +1,97 @@
+(function(){
+  "use strict";
+
+  $(function(){
+    if($('#treeview').length === 0) return;
+
+    new Vue({
+      el: "#treeview",
+      paramAttributes: [],
+      data: {
+        preview: "",
+        initialPath: "/var/log",
+        paths: []
+      },
+
+      created: function(){
+        this.path = this.initialPath;
+        this.fetchTree();
+        this.$watch("path", this.fetchTree);
+        this.$watch("path", this.fetchPreview);
+      },
+
+      computed: {
+        selected: function(){
+          var self = this;
+          return _.find(this.paths, function(path){
+            return self.path == path.path;
+          });
+        },
+        selectedIsDir: function() {
+          if(!this.selected) return true;
+          return this.selected.is_dir;
+        },
+        currentDirs: function() {
+          if(this.path === "/") {
+            return ["/"];
+          }
+
+          var path = this.path;
+          if(this.selected && !this.selected.is_dir) {
+            path = path.replace(/\/[^/]+$/, "");
+          }
+          var root = "/";
+          var dirs = [];
+          path.split("/").forEach(function(dir) {
+            dirs.push(root + dir);
+            if(dir) {
+              root = root + dir + "/";
+            }
+          });
+          return dirs;
+        }
+      },
+
+      methods: {
+        isAncestor: function(target) {
+          return this.path.indexOf(target) === 0;
+        },
+        basename: function(path) {
+          if (path === "/") return "/";
+          return path.match(/[^/]+$/)[0];
+        },
+        fetchTree: function() {
+          var self = this;
+          return new Promise(function(resolve, reject) {
+            $.getJSON("/api/tree?path=" + self.path, resolve).fail(reject);
+          }).then(function(paths){
+            self.paths = paths;
+          });
+        },
+        fetchPreview: function(){
+          if(!this.selected) return ;
+          var self = this;
+          this.preview = "";
+          new Promise(function(resolve, reject) {
+            $.getJSON("/api/file_preview?file=" + self.selected.path, resolve).fail(reject);
+          }).catch(function(e){
+            console.error(e);
+          }).then(function(lines){
+            self.preview = lines.join("\n");
+          });
+        },
+
+        selectPath: function(path){
+          this.path = path;
+        },
+        isSuffixRequired: function(data){
+          return data.is_dir && data.path != "/";
+        },
+        isSelected: function(path){
+          return this.path == path;
+        }
+      }
+    });
+  });
+})();
+

data/app/assets/javascripts/vue_common.js

@@ -0,0 +1,4 @@
+Vue.filter('to_json', function (value) {
+    return JSON.stringify(value);
+})
+

data/app/assets/stylesheets/application.css

@@ -0,0 +1,18 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require sb-admin-v2/bootstrap.css
+ *= require sb-admin-v2/sb-admin
+ *= require "sb-admin-v2/font-awesome/scss/font-awesome.scss"
+ *= require_tree .
+ *= require_self
+ */