vue_delayed_job_dashboard 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3dba257bced7445cba1c2d23d68e7b2372e469e9
-  data.tar.gz: 0a2e4d00c5541ef93d80e6cb37a162a619e0e7e7
+  metadata.gz: 48f4fa220093d565e3e111f261b0e91ed7ed6b20
+  data.tar.gz: e8886096e1bc75e96959eebcf2abd1a20dfb0506
 SHA512:
-  metadata.gz: 1f2121e7dbcba8376bf873f95901e88153140d452bdc6784d43e00c00a9039a5cc0de97ac00178e457d804ad58de4df2c625409d0a8d476e11cbd4a23e405c95
-  data.tar.gz: d9fbbd151fa208f65e6cb00874934ccd6943d529edc701ae202e1621752a64b8bdbd2aea875f6c468985650ccdf1f316ca0ce466968de2149c272e10a61abcb4
+  metadata.gz: 6fa9f09a8913719a29ab2b7d9fbde7540afb7cee50b0bcf8b22f5b2983f4b016329d34f2d284e528997699a99f50666782b16a809fc2a39ea6c46a2de0e982ac
+  data.tar.gz: 272ed1b5a6c948cbf1eb57a281a4a604e87c5b54b24685ddaf38d389189b751ded0cd7a0875c7af1442285514687af8b95a7ec706c9ba61b06344e59fb86929e

data/README.md

@@ -0,0 +1,44 @@
+# Vue Delayed Job Dashboard
+
+![screenshot1](https://cloud.githubusercontent.com/assets/2282642/24837740/2de53704-1d65-11e7-89dc-8d8fe85e093f.png)
+
+![screenshot2](https://cloud.githubusercontent.com/assets/2282642/24837741/309915e2-1d65-11e7-92fa-239a729709f7.png)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'vue_delayed_job_dashboard'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install vue_delayed_job_dashboard
+
+## Usage
+
+Add the following line to top of `route.rb`
+
+```ruby
+mount VueDelayedJobDashboard::WebApplication => '/delayed_job'
+```
+
+## 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.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/vue_delayed_job_dashboard. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/lib/vue_delayed_job_dashboard/version.rb

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

data/lib/vue_delayed_job_dashboard/web/app.rb

@@ -0,0 +1,62 @@
+require 'sinatra/base'
+
+module VueDelayedJobDashboard
+  class WebApplication < Sinatra::Base
+    set :root, File.dirname(__FILE__)
+    set :static, true
+    set :public_folder, File.expand_path('../public', __FILE__)
+    set :views, File.expand_path('../views', __FILE__)
+
+    get "/" do
+      redirect "/delayed_job/overview"
+    end
+
+    get '/overview' do
+      if defined?(Delayed::Job)
+        haml :overview, escape_html: false
+      else
+        @message = "Delayed::Job is not available"
+        haml :error
+      end
+    end
+
+    get '/enqueued' do
+      haml :enqueued, escape_html: false
+    end
+
+    get '/pending' do
+      haml :pending, escape_html: false
+    end
+
+    get '/failed' do
+      haml :failed, escape_html: false
+    end
+
+    get '/working' do
+      haml :working, escape_html: false
+    end
+
+    get '/jobs.json' do
+      content_type :json
+
+      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
+
+      @jobs = Delayed::Job.order(created_at: :desc) if @jobs.nil?
+
+      @jobs_json = @jobs.as_json
+      @jobs_json.each_with_index do |job, index|
+        job["payload_object"] = @jobs[index].payload_object
+      end
+      @jobs_json.to_json
+    end
+  end
+end

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

@@ -0,0 +1,52 @@
+<template>
+  <el-row>
+    <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1"><a href="/delayed_job/overview">DELAYED JOB DASHBOARD</a></el-menu-item>
+      <el-menu-item index="2"><a href="/delayed_job/enqueued">Enqueued</a></el-menu-item>
+      <el-menu-item index="3"><a href="/delayed_job/working">Working</a></el-menu-item>
+      <el-menu-item index="4"><a href="/delayed_job/pending">Pending</a></el-menu-item>
+      <el-menu-item index="5"><a href="/delayed_job/failed">Failed</a></el-menu-item>
+    </el-menu>
+
+    <el-col :span="24">
+      <jobs-list></jobs-list>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import JobsList from './JobsList.vue'
+
+export default {
+  data () {
+    return {
+      activeIndex: '1'
+    }
+  },
+
+  created () {
+    let path = window.location.pathname;
+    if (path.includes("overview")) {
+      this.activeIndex = '1'
+    } else if (path.includes("enqueued")) {
+      this.activeIndex = '2'
+    } else if (path.includes("working")) {
+      this.activeIndex = '3'
+    } else if (path.includes("pending")) {
+      this.activeIndex = '4'
+    } else if (path.includes("failed")) {
+      this.activeIndex = '5'
+    }
+  },
+
+  components: {
+    jobsList: JobsList
+  }
+}
+</script>
+
+<style scoped>
+a {
+  text-decoration: none;
+}
+</style>

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

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <el-table
+      :data="jobs"
+      v-loading.body="loading"
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        label="Job ID">
+      </el-table-column>
+      <el-table-column
+        label="Status">
+        <template scope="scope">
+          <el-tag
+            :type="filterTag(scope.row)">{{filterTagName(scope.row)}}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="payload_object"
+        label="Handler"
+        :formatter="formatter"
+        width="400">
+      </el-table-column>
+      <el-table-column
+        prop="priority"
+        label="Priority">
+      </el-table-column>
+      <el-table-column
+        prop="attempts"
+        label="Attempts">
+      </el-table-column>
+      <el-table-column
+        prop="run_at"
+        label="Run At"
+        width="180"
+        :formatter="runAtFormatter">
+      </el-table-column>
+      <el-table-column
+        prop="created_at"
+        label="Created At"
+        :formatter="createdAtFormatter">
+      </el-table-column>
+
+      <el-table-column
+        label="Actions"
+        width="120">
+        <template scope="scope">
+          <el-button type="info" size="mini" @click.native.prevent="handleClickDialog(scope.$index, jobs)">
+            Show
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog title="Object Payload" v-model="dialogVisible" size="small">
+      <pre>{{jobDetailHandler}}</pre>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">Ok!</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  const moment = require('moment');
+
+  export default {
+    props: ["mydata"],
+    data () {
+      return {
+        jobs: [],
+        dialogVisible: false,
+        jobDetailHandler: "",
+        jobDetailId: "",
+        loading: true
+
+      }
+    },
+    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: {} });
+      }
+    },
+
+    methods: {
+      handleClickDialog(index, jobs){
+        this.jobDetailHandler = jobs[index].payload_object;
+        this.jobDetailId = jobs[index].id;
+        this.dialogVisible = true;
+      },
+
+      formatter(row, column){
+        return row.handler.substring(0,300)
+      },
+
+      filterTag(row){
+        if (row.failed_at !== null) {
+          return "danger"
+        } else if (row.locked_at !== null) {
+          return "warning"
+        } else {
+          return "gray"
+        }
+      },
+
+      filterTagName(row) {
+        if (row.failed_at !== null) {
+          return "Failed"
+        } else if (row.locked_at !== null) {
+          return "Running"
+        } else {
+          return "Queued"
+        }
+      },
+
+      runAtFormatter(row, column){
+        return moment(row.run_at).format('MMMM Do YYYY, h:mm:ss a');
+      },
+
+      createdAtFormatter(row, column){
+        return moment(row.created_at).format('MMMM Do YYYY, h:mm:ss a');
+      },
+
+      loadJobs(queries) {
+        this.$http.get("/delayed_job/jobs.json", queries).then(response => {
+          this.jobs = response.body;
+          this.loading = false;
+        }, response => {
+          this.loading = false;
+        });
+      }
+    }
+  }
+</script>

data/lib/vue_delayed_job_dashboard/web/priv/app.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import VueResource from 'vue-resource'
+import ElementUI from 'element-ui'
+import App from './App.vue'
+import 'element-ui/lib/theme-default/index.css'
+import locale from 'element-ui/lib/locale/lang/en'
+
+Vue.use(ElementUI, { locale })
+Vue.use(VueResource)
+
+new Vue({
+  el: '#main',
+  render: h => h(App)
+})