vue_delayed_job_dashboard 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 48f4fa220093d565e3e111f261b0e91ed7ed6b20
-  data.tar.gz: e8886096e1bc75e96959eebcf2abd1a20dfb0506
+  metadata.gz: abd7f26728d3056a3dd0f352b44bb71e5efceb4c
+  data.tar.gz: d050e8d92a3aa7dbcccd3cdc2a8aa71faa4d72c7
 SHA512:
-  metadata.gz: 6fa9f09a8913719a29ab2b7d9fbde7540afb7cee50b0bcf8b22f5b2983f4b016329d34f2d284e528997699a99f50666782b16a809fc2a39ea6c46a2de0e982ac
-  data.tar.gz: 272ed1b5a6c948cbf1eb57a281a4a604e87c5b54b24685ddaf38d389189b751ded0cd7a0875c7af1442285514687af8b95a7ec706c9ba61b06344e59fb86929e
+  metadata.gz: 44200b594ae11cf96984fddaa9b559003470e0915b3597f9e05da7962503f75cb7ca9409cbaee6bd5bb5fa8cf06a6e1421574fad9ef2c5d0b88ad18733cd91ae
+  data.tar.gz: 8299052b51f98f6ffa0a8120c5ec7f0ea462908a84003c50fab8379bd7aa4c1f798449e1269107f3a0f83d0db067f210a0fe0499b45e9a691821a3751501705c

data/README.md

@@ -28,6 +28,20 @@ Add the following line to top of `route.rb`
 mount VueDelayedJobDashboard::WebApplication => '/delayed_job'
 ```
 
+vue_delayed_job_dashboard will require basic authentication by default. Add the following configuration to environment variable.
+
+```ruby
+ENV["VUE_DELAYED_JOB_USERNAME"] = "username"
+ENV["VUE_DELAYED_JOB_PASSWORD"] = "password"
+```
+
+## TODO
+
+- Add unit tests
+- Add pagination
+- Stats
+- Add authentication [DONE]
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

data/lib/vue_delayed_job_dashboard/authentication.rb

@@ -0,0 +1,5 @@
+require "vue_delayed_job_dashboard/web/app"
+
+VueDelayedJobDashboard::WebApplication.use Rack::Auth::Basic do |username, password|
+  username == ENV["VUE_DELAYED_JOB_USERNAME"] && password == ENV["VUE_DELAYED_JOB_PASSWORD"]
+end

data/lib/vue_delayed_job_dashboard/version.rb

@@ -1,3 +1,3 @@
 module VueDelayedJobDashboard
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

data/lib/vue_delayed_job_dashboard/web/app.rb

@@ -1,4 +1,5 @@
 require 'sinatra/base'
+require 'vue_delayed_job_dashboard/web/filter'
 
 module VueDelayedJobDashboard
   class WebApplication < Sinatra::Base
@@ -36,21 +37,21 @@ module VueDelayedJobDashboard
       haml :working, escape_html: false
     end
 
-    get '/jobs.json' do
+    get '/jobs_info.json' do
       content_type :json
+      total = VueDelayedJobDashboard::Filter.for(Delayed::Job, params[:filter]).page(0).per(params[:per_page]).total_pages
 
-      case params["filter"]
-      when "pending"
-        @jobs = Delayed::Job.where(locked_at: nil, attempts: 0).order(created_at: :desc)
-      when "failed"
-        @jobs = Delayed::Job.where.not(failed_at: nil).order(created_at: :desc)
-      when "working"
-        @jobs = Delayed::Job.where.not(locked_at: nil).order(created_at: :desc)
-      when "enqueued"
-        @jobs = Delayed::Job.order(created_at: :desc)
-      end
+      {
+        total_jobs: VueDelayedJobDashboard::Filter.for(Delayed::Job, params[:filter]).count,
+        total_pages: total
+      }.to_json
+    end
+
+    get '/jobs.json' do
+      content_type :json
 
-      @jobs = Delayed::Job.order(created_at: :desc) if @jobs.nil?
+      @jobs = Delayed::Job.page(params[:page]).per(params[:per_page]).order(created_at: :desc)
+      @jobs = VueDelayedJobDashboard::Filter.for(@jobs, params[:filter])
 
       @jobs_json = @jobs.as_json
       @jobs_json.each_with_index do |job, index|

data/lib/vue_delayed_job_dashboard/web/filter.rb

@@ -0,0 +1,18 @@
+module VueDelayedJobDashboard
+  class Filter
+    def self.for(jobs, filter)
+      case filter
+      when "pending"
+        jobs.where(locked_at: nil, attempts: 0)
+      when "failed"
+        jobs.where.not(failed_at: nil)
+      when "working"
+        jobs.where.not(locked_at: nil)
+      when "enqueued"
+        jobs
+      when nil || ""
+        jobs
+      end
+    end
+  end
+end

data/lib/vue_delayed_job_dashboard/web/priv/JobsList.vue

@@ -1,5 +1,16 @@
 <template>
   <div>
+    <div class="block">
+      <el-pagination
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="pageSizes"
+        :page-size="perPage"
+        :total="totalJobs">
+      </el-pagination>
+    </div>
+
     <el-table
       :data="jobs"
       v-loading.body="loading"
@@ -52,6 +63,17 @@
       </el-table-column>
     </el-table>
 
+    <div class="block">
+      <el-pagination
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="pageSizes"
+        :page-size="perPage"
+        :total="totalJobs">
+      </el-pagination>
+    </div>
+
     <el-dialog title="Object Payload" v-model="dialogVisible" size="small">
       <pre>{{jobDetailHandler}}</pre>
       <span slot="footer" class="dialog-footer">
@@ -65,34 +87,75 @@
   const moment = require('moment');
 
   export default {
-    props: ["mydata"],
     data () {
       return {
         jobs: [],
         dialogVisible: false,
         jobDetailHandler: "",
         jobDetailId: "",
-        loading: true
-
+        loading: true,
+        currentPage: 0,
+        perPage: 4,
+        totalJobs: 0,
+        totalPages: 0,
+        pageSizes: [4, 6, 8, 10]
       }
     },
+
     created () {
-      let path = window.location.pathname;
-      if (path.includes("pending")) {
-        this.loadJobs({ params: { filter: "pending" } });
-      } else if (path.includes("failed")) {
-        this.loadJobs({ params: { filter: "failed" } });
-      } else if (path.includes("working")) {
-        this.loadJobs({ params: { filter: "working" } });
-      } else if (path.includes("enqueued")) {
-        this.loadJobs({ params: { filter: "enqueued" } });
-      }
-      else {
-        this.loadJobs({ params: {} });
-      }
+      this.loadPageInfo();
+      this.loadJobsForCurrentPage();
     },
 
     methods: {
+      getJobType() {
+        const path = window.location.pathname;
+        if (path.includes("pending")) {
+          return "pending"
+        } else if (path.includes("failed")) {
+          return "failed"
+        } else if (path.includes("working")) {
+          return "working"
+        } else if (path.includes("enqueued")) {
+          return "enqueued"
+        }
+        else {
+          return ""
+        }
+      },
+
+      loadJobsForCurrentPage() {
+        const filter = this.getJobType();
+        this.loadJobs({
+          params: {
+            filter: filter,
+            page: this.currentPage,
+            per_page: this.perPage
+          }
+        });
+      },
+
+      loadPageInfo(){
+        const queries = { params: { filter: this.getJobType(), r_page: this.perPage } };
+        this.$http.get("/delayed_job/jobs_info.json", queries).then(response => {
+          const res = response.body;
+          this.totalPages = res.total_pages;
+          this.totalJobs = res.total_jobs;
+        }, response => {
+        });
+      },
+
+      handleSizeChange(val){
+        this.perPage = val;
+        this.loadPageInfo();
+        this.loadJobsForCurrentPage();
+      },
+
+      handleCurrentChange(val) {
+        this.currentPage = val;
+        this.loadJobsForCurrentPage();
+      },
+
       handleClickDialog(index, jobs){
         this.jobDetailHandler = jobs[index].payload_object;
         this.jobDetailId = jobs[index].id;

data/lib/vue_delayed_job_dashboard/web/public/bundle.js

@@ -51443,11 +51443,11 @@ var Component = __webpack_require__(140)(
   /* template */
   __webpack_require__(202),
   /* scopeId */
-  "data-v-fd1f72f0",
+  "data-v-96b7533e",
   /* cssModules */
   null
 )
-Component.options.__file = "/Users/mac/Desktop/opensources/vue_delayed_job_dashboard/lib/vue_delayed_job_dashboard/web/priv/App.vue"
+Component.options.__file = "/Users/mac/Desktop/opensources/delayed_job_dashboard/lib/vue_delayed_job_dashboard/web/priv/App.vue"
 if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
 if (Component.options.functional) {console.error("[vue-loader] App.vue: functional components are not supported with templates, they should use render functions.")}
 
@@ -51458,9 +51458,9 @@ if (false) {(function () {
   if (!hotAPI.compatible) return
   module.hot.accept()
   if (!module.hot.data) {
-    hotAPI.createRecord("data-v-fd1f72f0", Component.options)
+    hotAPI.createRecord("data-v-96b7533e", Component.options)
   } else {
-    hotAPI.reload("data-v-fd1f72f0", Component.options)
+    hotAPI.reload("data-v-96b7533e", Component.options)
   }
 })()}
 
@@ -54516,38 +54516,96 @@ Object.defineProperty(exports, "__esModule", {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var moment = __webpack_require__(0);
 
 exports.default = {
-  props: ["mydata"],
   data: function data() {
     return {
       jobs: [],
       dialogVisible: false,
       jobDetailHandler: "",
       jobDetailId: "",
-      loading: true
-
+      loading: true,
+      currentPage: 0,
+      perPage: 4,
+      totalJobs: 0,
+      totalPages: 0,
+      pageSizes: [4, 6, 8, 10]
     };
   },
   created: function created() {
-    var path = window.location.pathname;
-    if (path.includes("pending")) {
-      this.loadJobs({ params: { filter: "pending" } });
-    } else if (path.includes("failed")) {
-      this.loadJobs({ params: { filter: "failed" } });
-    } else if (path.includes("working")) {
-      this.loadJobs({ params: { filter: "working" } });
-    } else if (path.includes("enqueued")) {
-      this.loadJobs({ params: { filter: "enqueued" } });
-    } else {
-      this.loadJobs({ params: {} });
-    }
+    this.loadPageInfo();
+    this.loadJobsForCurrentPage();
   },
 
 
   methods: {
+    getJobType: function getJobType() {
+      var path = window.location.pathname;
+      if (path.includes("pending")) {
+        return "pending";
+      } else if (path.includes("failed")) {
+        return "failed";
+      } else if (path.includes("working")) {
+        return "working";
+      } else if (path.includes("enqueued")) {
+        return "enqueued";
+      } else {
+        return "";
+      }
+    },
+    loadJobsForCurrentPage: function loadJobsForCurrentPage() {
+      var filter = this.getJobType();
+      this.loadJobs({
+        params: {
+          filter: filter,
+          page: this.currentPage,
+          per_page: this.perPage
+        }
+      });
+    },
+    loadPageInfo: function loadPageInfo() {
+      var _this = this;
+
+      var queries = { params: { filter: this.getJobType(), r_page: this.perPage } };
+      this.$http.get("/delayed_job/jobs_info.json", queries).then(function (response) {
+        var res = response.body;
+        _this.totalPages = res.total_pages;
+        _this.totalJobs = res.total_jobs;
+      }, function (response) {});
+    },
+    handleSizeChange: function handleSizeChange(val) {
+      this.perPage = val;
+      this.loadPageInfo();
+      this.loadJobsForCurrentPage();
+    },
+    handleCurrentChange: function handleCurrentChange(val) {
+      this.currentPage = val;
+      this.loadJobsForCurrentPage();
+    },
     handleClickDialog: function handleClickDialog(index, jobs) {
       this.jobDetailHandler = jobs[index].payload_object;
       this.jobDetailId = jobs[index].id;
@@ -54581,13 +54639,13 @@ exports.default = {
       return moment(row.created_at).format('MMMM Do YYYY, h:mm:ss a');
     },
     loadJobs: function loadJobs(queries) {
-      var _this = this;
+      var _this2 = this;
 
       this.$http.get("/delayed_job/jobs.json", queries).then(function (response) {
-        _this.jobs = response.body;
-        _this.loading = false;
+        _this2.jobs = response.body;
+        _this2.loading = false;
       }, function (response) {
-        _this.loading = false;
+        _this2.loading = false;
       });
     }
   }
@@ -56534,7 +56592,7 @@ exports = module.exports = __webpack_require__(17)(undefined);
 
 
 // module
-exports.push([module.i, "\na[data-v-fd1f72f0] {\n  text-decoration: none;\n}\n", ""]);
+exports.push([module.i, "\na[data-v-96b7533e] {\n  text-decoration: none;\n}\n", ""]);
 
 // exports
 
@@ -63432,7 +63490,7 @@ var Component = __webpack_require__(140)(
   /* cssModules */
   null
 )
-Component.options.__file = "/Users/mac/Desktop/opensources/vue_delayed_job_dashboard/lib/vue_delayed_job_dashboard/web/priv/JobsList.vue"
+Component.options.__file = "/Users/mac/Desktop/opensources/delayed_job_dashboard/lib/vue_delayed_job_dashboard/web/priv/JobsList.vue"
 if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
 if (Component.options.functional) {console.error("[vue-loader] JobsList.vue: functional components are not supported with templates, they should use render functions.")}
 
@@ -63443,9 +63501,9 @@ if (false) {(function () {
   if (!hotAPI.compatible) return
   module.hot.accept()
   if (!module.hot.data) {
-    hotAPI.createRecord("data-v-234775bd", Component.options)
+    hotAPI.createRecord("data-v-48df34f8", Component.options)
   } else {
-    hotAPI.reload("data-v-234775bd", Component.options)
+    hotAPI.reload("data-v-48df34f8", Component.options)
   }
 })()}
 
@@ -63457,7 +63515,20 @@ module.exports = Component.exports
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-  return _c('div', [_c('el-table', {
+  return _c('div', [_c('div', {
+    staticClass: "block"
+  }, [_c('el-pagination', {
+    attrs: {
+      "layout": "total, sizes, prev, pager, next",
+      "page-sizes": _vm.pageSizes,
+      "page-size": _vm.perPage,
+      "total": _vm.totalJobs
+    },
+    on: {
+      "size-change": _vm.handleSizeChange,
+      "current-change": _vm.handleCurrentChange
+    }
+  })], 1), _vm._v(" "), _c('el-table', {
     directives: [{
       name: "loading",
       rawName: "v-loading.body",
@@ -63542,6 +63613,19 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         }, [_vm._v("\n          Show\n        ")])]
       }]
     ])
+  })], 1), _vm._v(" "), _c('div', {
+    staticClass: "block"
+  }, [_c('el-pagination', {
+    attrs: {
+      "layout": "total, sizes, prev, pager, next",
+      "page-sizes": _vm.pageSizes,
+      "page-size": _vm.perPage,
+      "total": _vm.totalJobs
+    },
+    on: {
+      "size-change": _vm.handleSizeChange,
+      "current-change": _vm.handleCurrentChange
+    }
   })], 1), _vm._v(" "), _c('el-dialog', {
     attrs: {
       "title": "Object Payload",
@@ -63572,7 +63656,7 @@ module.exports.render._withStripped = true
 if (false) {
   module.hot.accept()
   if (module.hot.data) {
-     require("vue-hot-reload-api").rerender("data-v-234775bd", module.exports)
+     require("vue-hot-reload-api").rerender("data-v-48df34f8", module.exports)
   }
 }
 
@@ -63638,7 +63722,7 @@ module.exports.render._withStripped = true
 if (false) {
   module.hot.accept()
   if (module.hot.data) {
-     require("vue-hot-reload-api").rerender("data-v-fd1f72f0", module.exports)
+     require("vue-hot-reload-api").rerender("data-v-96b7533e", module.exports)
   }
 }
 
@@ -63653,13 +63737,13 @@ var content = __webpack_require__(175);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
-var update = __webpack_require__(204)("4a4e7eb5", content, false);
+var update = __webpack_require__(204)("304edec2", content, false);
 // Hot Module Replacement
 if(false) {
  // When the styles change, update the <style> tags
  if(!content.locals) {
-   module.hot.accept("!!../../../../node_modules/css-loader/index.js!../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"id\":\"data-v-fd1f72f0\",\"scoped\":true,\"hasInlineConfig\":false}!../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./App.vue", function() {
-     var newContent = require("!!../../../../node_modules/css-loader/index.js!../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"id\":\"data-v-fd1f72f0\",\"scoped\":true,\"hasInlineConfig\":false}!../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./App.vue");
+   module.hot.accept("!!../../../../node_modules/css-loader/index.js!../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"id\":\"data-v-96b7533e\",\"scoped\":true,\"hasInlineConfig\":false}!../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./App.vue", function() {
+     var newContent = require("!!../../../../node_modules/css-loader/index.js!../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"id\":\"data-v-96b7533e\",\"scoped\":true,\"hasInlineConfig\":false}!../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./App.vue");
      if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
      update(newContent);
    });

data/lib/vue_delayed_job_dashboard.rb

@@ -1,2 +1,3 @@
 require "vue_delayed_job_dashboard/version"
+require "vue_delayed_job_dashboard/authentication"
 require "vue_delayed_job_dashboard/web/app"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vue_delayed_job_dashboard
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Long Nguyen
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-04-09 00:00:00.000000000 Z
+date: 2017-04-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -62,8 +62,10 @@ files:
 - README.md
 - Rakefile
 - lib/vue_delayed_job_dashboard.rb
+- lib/vue_delayed_job_dashboard/authentication.rb
 - lib/vue_delayed_job_dashboard/version.rb
 - lib/vue_delayed_job_dashboard/web/app.rb
+- lib/vue_delayed_job_dashboard/web/filter.rb
 - lib/vue_delayed_job_dashboard/web/priv/App.vue
 - lib/vue_delayed_job_dashboard/web/priv/JobsList.vue
 - lib/vue_delayed_job_dashboard/web/priv/app.js