fluentd-ui 0.4.5 → 1.0.0.alpha.1

data/README.md

@@ -16,8 +16,8 @@ fluentd-ui is a browser-based [fluentd](http://www.fluentd.org) and [td-agent](h
 
 ## Requirements
 
-- ruby 2.1.3 or later (since v0.4.0)
-- fluentd v0.12
+- ruby 2.2.2 or later (since v1.0.0)
+- fluentd v1.0.0 or later
 
 Currently, fluentd-ui doesn't support fleuntd v1 and td-agent 3.
 And some additional packages (Debian / Ubuntu)
@@ -33,20 +33,25 @@ And some additional packages (Debian / Ubuntu)
     $ git clone https://github.com/fluent/fluentd-ui
     $ cd fluentd-ui
     $ bundle install
-    $ bundle exec rails s
+    $ bin/rails s
 
-Also you need a phantomjs for test.
+Also you need a [chromedriver](https://sites.google.com/a/chromium.org/chromedriver/downloads) or chromiumdriver for test.
 
-    $ npm install -g phantomjs
+    $ npm install -g chromedriver
     Or,
-    $ brew install phantomjs
+    $ brew install chromedriver
+    Or,
+    $ sudo apt install chromium-driver
 
-NOTE: `phantomjs` executable binary should be located under your `$PATH`.
+NOTE: `chromedriver` executable binary should be located under your `$PATH`.
 
 ## Building fluentd-ui.gem
 
-    $ bundle exec rake build
-    fluentd-ui X.X.X built to pkg/fluentd-ui-X.X.X.gem.
+    # Generate pre-compiled assets
+    $ RAILS_ENV=production bin/rails assets:precompile
+
+    # fluentd-ui X.X.X built to pkg/fluentd-ui-X.X.X.gem.
+    $ RAILS_ENV=production bin/rails build
 
-    $ bundle exec rake release
     # Push to rubygems.org
+    $ bin/rails release

data/app/assets/stylesheets/application.css

@@ -10,11 +10,12 @@
  * 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 bower/codemirror/lib/codemirror
- *= require bower/codemirror/theme/neo
+ *= require font-awesome
+ *= require bootstrap/dist/css/bootstrap
+ *= require startbootstrap-sb-admin/css/sb-admin.css
+ *= require datatables.net-bs4/css/dataTables.bootstrap4.css
+ *= require codemirror/lib/codemirror
+ *= require codemirror/theme/neo
  *= require_tree .
  *= require_self
  */

data/app/controllers/concerns/setting_history_concern.rb

@@ -28,7 +28,7 @@ module SettingHistoryConcern
     else
       flash = { danger: @fluentd.agent.log.tail(1).first }
     end
-    redirect_to :back, flash: flash
+    redirect_back fallback_location: root_url, flash: flash
   end
 
 end

data/app/controllers/fluentd/agents_controller.rb

@@ -16,6 +16,11 @@ class Fluentd::AgentsController < ApplicationController
     redirect_to daemon_path(@fluentd), status: 303 # 303 is change HTTP Verb GET
   end
 
+  def reload
+    run_action(__method__) { @fluentd.agent.log.tail(1).first }
+    redirect_to daemon_path(@fluentd), status: 303 # 303 is change HTTP Verb GET
+  end
+
   def log_tail
     @logs = @fluentd.agent.log.tail(params[:limit]).reverse if @fluentd
     render json: @logs

data/app/controllers/misc_controller.rb

@@ -19,7 +19,7 @@ class MiscController < ApplicationController
   end
 
   def upgrading_status
-    if FluentdUiRestart::LOCK.present?
+    if FluentdUiRestartJob::LOCK.present?
       return render text: "updating"
     end
 
@@ -73,6 +73,6 @@ class MiscController < ApplicationController
   end
 
   def update!
-    FluentdUiRestart.new.async.perform
+    FluentdUiRestart.perform_later
   end
 end

data/app/controllers/plugins_controller.rb

@@ -17,27 +17,27 @@ class PluginsController < ApplicationController
 
   def install
     params[:plugins].each do |gem_name|
-      GemInstaller.new.async.perform(gem_name)
+      GemInstallerJob.perform_later(gem_name)
     end
     redirect_to plugins_path
   end
 
   def uninstall
     params[:plugins].each do |gem_name|
-      GemUninstaller.new.async.perform(gem_name)
+      GemUninstallerJob.perform_later(gem_name)
     end
     redirect_to plugins_path
   end
 
   def upgrade
-    GemInstaller.new.async.perform(params[:plugins][:name], params[:plugins][:version])
+    GemInstallerJob.perform_later(params[:plugins][:name], params[:plugins][:version])
     redirect_to plugins_path
   end
 
   def bulk_upgrade
     params[:plugins].each do |gem_name|
       pl = Plugin.new(gem_name: gem_name)
-      GemInstaller.new.async.perform(gem_name, pl.latest_version)
+      GemInstallerJob.perform_later(gem_name, pl.latest_version)
     end
     redirect_to plugins_path
   end

data/app/helpers/application_helper.rb

@@ -37,12 +37,12 @@ module ApplicationHelper
     raw html
   end
 
-  def link_to_other(text, path)
+  def link_to_other(text, path, **options)
     if current_page?(path)
       # NOTE: sb-admin set style for element name instead of class name, such as ".nav a". So use "a" element even if it isn't a link.
       content_tag(:a, text, class: "current")
     else
-      link_to text, path
+      link_to text, path, class: "nav-link"
     end
   end
 
@@ -62,4 +62,10 @@ module ApplicationHelper
       head.html_safe + block.try(:call).to_s
     end
   end
+
+  def add_javascript_pack_tag(name, **options)
+    content_for(:additional_javascript_pack_tag) do
+      javascript_pack_tag(name, **options)
+    end
+  end
 end

data/app/helpers/settings_helper.rb

@@ -54,8 +54,8 @@ module SettingsHelper
   end
 
   def append_and_remove_links
-    %Q!<a class="btn btn-xs btn-default js-append">#{icon('fa-plus')}</a> ! +
-    %Q!<a class="btn btn-xs btn-default js-remove" style="display:none">#{icon('fa-minus')}</a> !
+    %Q!<a class="btn btn-sm btn-outline-secondary js-append">#{icon('fa-plus')}</a> ! +
+    %Q!<a class="btn btn-sm btn-outline-secondary js-remove" style="display:none">#{icon('fa-minus')}</a> !
   end
 
   def child_data(form, key)

data/app/javascript/packs/application.js

@@ -0,0 +1,31 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+console.log('Hello World from Webpacker')
+
+import jQuery from 'jquery/dist/jquery'
+
+window.$ = jQuery
+window.jQuery = jQuery
+
+import 'popper.js/dist/popper'
+import 'bootstrap/dist/js/bootstrap'
+import 'datatables.net/js/jquery.dataTables'
+import 'startbootstrap-sb-admin/js/sb-admin'
+import 'startbootstrap-sb-admin/js/sb-admin-datatables'
+
+import Vue from 'vue/dist/vue.esm'
+
+Vue.filter('to_json', function (value) {
+    return JSON.stringify(value);
+})
+
+window.Vue = Vue
+
+import '../stylesheets/application.scss'

data/app/{assets/javascripts/codemirror_fluentd.js → javascript/packs/codemirror.js}

@@ -1,7 +1,9 @@
+import CodeMirror from 'codemirror/lib/codemirror'
+import 'lodash/lodash'
+
 // See: http://codemirror.net/doc/manual.html#modeapi
 // and sample mode files: https://github.com/codemirror/CodeMirror/tree/master/mode
 
-
 CodeMirror.defineMode('fluentd', function(){
   return {
     startState: function(aa){
@@ -57,3 +59,32 @@ CodeMirror.defineMode('fluentd', function(){
     }
   };
 });
+
+function codemirrorify(el) {
+  return CodeMirror.fromTextArea(el, {
+    theme: "neo",
+    lineNumbers: true,
+    viewportMargin: Infinity,
+    mode: "fluentd"
+  });
+}
+
+$(function(){
+  $('.js-fluentd-config-editor').each(function(_, el){
+    codemirrorify(el);
+  });
+});
+
+Vue.directive('config-editor', {
+  bind: function(el, binding, vnode, oldVnode){
+    // NOTE: needed delay for waiting CodeMirror setup
+    _.delay(function(textarea){
+      let cm = codemirrorify(textarea);
+      // textarea.codemirror = cm; // for test, but doesn't work for now (working on Chrome, but Poltergeist not)
+      cm.on('change', function(code_mirror){
+        // bridge Vue - CodeMirror world
+        el.dataset.content = code_mirror.getValue();
+      });
+    }, 0, el);
+  }
+});

data/app/javascript/packs/fluent_log.js

@@ -0,0 +1,63 @@
+'use strict';
+$(document).ready(()=> {
+  new Vue({
+    el: "#fluent-log",
+    props: ["logUrl", "initialAutoReload"],
+    data: {
+      "autoFetch": false,
+      "logs": [],
+      "limit": 30,
+      "processing": false
+    },
+
+    beforeMount: function() {
+      this.logUrl = this.$el.attributes.logUrl.nodeValue;
+      this.initialAutoReload = this.$el.attributes.initialAutoReload.nodeValue;
+    },
+
+    mounted: function(){
+      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.innerHeight());
+          }, 1000);
+        } else {
+          clearInterval(timer);
+        }
+      });
+      if(this.initialAutoReload) {
+        this.autoFetch = true;
+      }
+    },
+
+    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/javascript/packs/in_tail_format.js

@@ -0,0 +1,174 @@
+'use strict'
+import 'lodash/lodash'
+
+window.addEventListener('load', () => {
+  const maxFormatCount = 20;
+
+  new Vue({
+    el: "#in_tail_format",
+    props: ["formatOptionsJson", "initialSelected", "targetFile", "paramsJson"],
+    data: {
+      previewProcessing: false,
+      format: "",
+      highlightedLines: null,
+    },
+
+    computed: {
+      options: {
+        get: function(){
+          return this.formatOptions[this.format];
+        },
+      },
+      selectableFormats: {
+        get: function() {
+          return Object.keys(this.formatOptions);
+        }
+      },
+      useTextArea: function() {
+        return this.format === "multiline";
+      }
+    },
+
+    beforeMount: function() {
+      this.formatOptions = JSON.parse(this.$el.attributes.formatOptionsJson.nodeValue);
+      this.format = this.$el.attributes.initialSelected.nodeValue;
+
+      // initialize params
+      // NOTE: if `params.setting.foo` is undefined, Vue can't binding with v-model="params.setting.foo"
+      var params = JSON.parse(this.$el.attributes.paramsJson.nodeValue);
+      if(!params.setting) {
+        params.setting = {};
+      }
+
+      var formats = _.chain(_.range(1, maxFormatCount + 1)).map(function(i) {return params.setting["format" + String(i)];}).compact().value();
+      params.setting.formats = formats.join("\n");
+
+      _.each(this.formatOptions, function(options){
+        _.each(options, function(key){
+          if(!params.setting.hasOwnProperty(key)){
+            params.setting[key] = "";
+          }
+        });
+      });
+      this.params = params;
+
+      this.targetFile = this.$el.attributes.targetFile.nodeValue;
+    },
+    mounted: function(){
+      this.$emit("data-loaded");
+    },
+
+    watch: {
+      'params.setting.formats': function(formats) {
+        _.range(1, maxFormatCount + 1).forEach(()=> {params.setting["format" + String(i)] = "";});
+
+        _.compact(formats.split("\n")).forEach((formatLine, index)=> {
+          params.setting["format" + String(index + 1)] = formatLine;
+        })
+      },
+      'params.setting.regexp': function() {
+        this.preview();
+      },
+      'format': function() {
+        this.preview();
+      },
+    },
+
+    methods: {
+      onKeyup: function(ev){
+        var el = ev.target;
+        if(el.name.match(/\[format/)){
+          this.preview();
+        }
+      },
+      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();
+      },
+
+      preview: function(){
+        if(this.previewAjax) {
+          this.previewAjax.abort();
+        }
+
+        const token = document.getElementsByName("csrf-token")[0].getAttribute('content')
+
+        var self = this;
+        new Promise(function(resolve, reject) {
+          self.previewAjax = $.ajax({
+            method: "POST",
+            url: "/api/regexp_preview",
+            headers: {
+              'X-CSRF-Token': token
+            },
+            data: {
+              regexp: self.params.setting.regexp,
+              time_format: self.params.setting.time_format,
+              format: _.isEmpty(self.format) ? "regexp" : self.format,
+              params: self.params.setting,
+              file: self.targetFile
+            }
+          }).done(resolve).fail(reject);
+        }).then(function(result){
+          self.params = _.merge(self.params, result.params);
+          self.regexpMatches = result.matches;
+          self.updateHighlightedLines();
+        })["catch"](function(error){
+          if(error.stack) {
+            console.error(error.stack);
+          }
+        });
+      },
+    }
+  });
+});