Fe2

.editorconfig

@@ -0,0 +1,24 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_length = 80
+
+[*.{css, scss, js, html}]
+indent_size = 2
+max_line_length = 140
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml, yaml}]
+indent_size = 2
+
+[*.json]
+indent_size = 2

.eslintignore

@@ -0,0 +1,4 @@
+!.*.js
+**/*.min.js
+node_modules/**
+rt_dashboard/templates/rt_dashboard/dashboard.js

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  extends: [
+    'standard',
+  ],
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module',
+  },
+
+  env: {
+    browser: true,
+    es2020: true,
+  },
+
+  rules: {
+    'comma-dangle': ['error', {
+      arrays: 'always-multiline',
+      objects: 'always-multiline',
+      imports: 'always-multiline',
+      exports: 'always-multiline',
+      functions: 'always-multiline',
+    }],
+  },
+}

.gitignore

@@ -8,3 +8,5 @@ dump.rdb
 /.direnv
 ._*
 .pytest_cache
+**/static
+**/node_modules

.nvmrc

@@ -0,0 +1 @@
+12.16.1

.travis.yml

@@ -6,9 +6,13 @@ python:
   - "3.6"
   - "3.7"
   - "3.8"
+node_js: "12"
 install:
   - pip install -r requirements.txt
   - pip install -e .
+  - nvm install $(cat .nvmrc) && nvm use
+  - yarn
 script:
   - pytest
   - flake8 .
+  - yarn lint

babel.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  env: {
+    production: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            useBuiltIns: 'entry',
+          },
+        ],
+      ],
+    },
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 'current',
+            },
+          },
+        ],
+      ],
+    },
+  },
+  plugins: [
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+  ],
+}

package.json

@@ -0,0 +1,82 @@
+{
+  "name": "rt-dashboard",
+  "version": "1.0.0",
+  "description": "Redis Tasks Dashboard simple interface to manage and observe tasks",
+  "main": "webpack.config.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "test": "jest",
+    "build": "webpack",
+    "start": "webpack-dev-server --watch",
+    "lint": "eslint ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/djangsters/rt-dashboard.git"
+  },
+  "keywords": [
+    "rt",
+    "dashboard"
+  ],
+  "author": "Djangsters",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/djangsters/rt-dashboard/issues"
+  },
+  "homepage": "https://github.com/djangsters/rt-dashboard#readme",
+  "dependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+    "@fortawesome/fontawesome-free": "^5.13.0",
+    "babel-eslint": "^10.1.0",
+    "bootstrap": "^4.4.1",
+    "command-line-args": "^5.1.1",
+    "css-loader": "^3.4.2",
+    "d3-axis": "^1.0.12",
+    "d3-scale": "^3.2.1",
+    "d3-selection": "^1.4.1",
+    "d3-time": "^1.1.0",
+    "d3-time-format": "^2.2.3",
+    "d3-transition": "^1.3.2",
+    "date-fns": "^2.14.0",
+    "file-loader": "^6.0.0",
+    "html-loader": "^1.0.0",
+    "jquery": "^3.4.1",
+    "popper.js": "^1.16.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.1",
+    "babel-jest": "^26.0.1",
+    "babel-loader": "^8.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "jest": "^26.0.1",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "./rt_dashboard/javascript/src/app.js",
+    "./rt_dashboard/javascript/src/components/*/index.js"
+  ],
+  "jest": {
+    "verbose": true,
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
+  }
+}

rt_dashboard/contrib/django/__init__.py

@@ -25,7 +25,7 @@ def view(request):
         else:
             return render(request, 'rt_dashboard_admin.html', {
                 'title': 'RT Dashboard',
-                'iframe_src': base_path + '/inner/',
+                'iframe_src': base_path + '/inner/app',
             })
 
     return view

rt_dashboard/contrib/django/templates/rt_dashboard_admin.html

@@ -3,7 +3,7 @@
 {% block content %}
 
 <iframe id='rt_iframe' src="{{ iframe_src }}"
-    style="width: 100%; height: 600px; margin-top: -120px">
+    style="width: 100%; height: 600px; border: none;">
 </iframe>
 <style>
 .content h1 {

rt_dashboard/javascript/app.js

@@ -0,0 +1,11 @@
+import './styles/main.scss'
+import 'bootstrap/dist/js/bootstrap.min.js'
+
+// load web components
+import './src/components/dashboard'
+import './src/components/history'
+import './src/components/queues'
+import './src/components/rt-dashboard'
+import './src/components/workers'
+import './src/components/tasks'
+import './src/components/pager'

rt_dashboard/javascript/src/api.js

@@ -0,0 +1,93 @@
+const DOCUMENT_SCRIPT_NAME = 'app.js'
+const API_URL_PARAM_NAME = 'apiUrl'
+const POLL_PARAM_NAME = 'poll'
+
+const requestErrorHandler = error => {
+  console.error(error)
+  alert('Error with network request')
+}
+
+/**
+ *
+ * @param {Promise<Response>?} requestPromise
+ * @returns {Promise<any>|null}
+ */
+const executeRequest = async (requestPromise) => {
+  try {
+    const response = await requestPromise
+    if (response.ok) {
+      return response.json()
+    }
+    requestErrorHandler(response.statusText)
+  } catch (error) {
+    requestErrorHandler(error)
+  }
+}
+
+export const getParams = (scriptName) => {
+  var scripts = document.getElementsByTagName('script')
+
+  for (var i = 0; i < scripts.length; i++) {
+    if (scripts[i].src.indexOf('/' + scriptName) > -1) {
+      var pa = scripts[i].src.split('?').pop().split('&')
+      var p = {}
+      for (var j = 0; j < pa.length; j++) {
+        var kv = pa[j].split('=')
+        p[kv[0]] = kv[1]
+      }
+      return p
+    }
+  }
+
+  return {}
+}
+
+export const getPollInterval = () => {
+  const pollInterval = getParams(DOCUMENT_SCRIPT_NAME)[POLL_PARAM_NAME]
+  if (!pollInterval) {
+    return null
+  }
+  return parseInt(pollInterval)
+}
+
+export const getApiUrl = () => {
+  return getParams(DOCUMENT_SCRIPT_NAME)[API_URL_PARAM_NAME]
+}
+
+export const urlFor = (name, param) => {
+  var url = getApiUrl()
+  if (name === 'queues') {
+    url += 'queues.json'
+  } else if (name === 'workers') {
+    url += 'workers.json'
+  } else if (name === 'cancel_job') {
+    url += 'job/' + encodeURIComponent(param) + '/cancel'
+  } else if (name === 'history') {
+    url += 'history.json'
+  }
+  return url
+}
+
+export const urlForJobs = (param, page) => {
+  var url = getApiUrl() + 'jobs/' + encodeURIComponent(param) + '/' + page + '.json'
+  return url
+}
+
+export const getQueues = () => executeRequest(fetch(urlFor('queues')))
+
+export const getJobs = (queueName, page) => executeRequest(fetch(urlForJobs(queueName, page)))
+
+export const getWorkers = async () => executeRequest(fetch(urlFor('workers')))
+
+/**
+ *
+ * @param {RequestInit?} init
+ * @returns {Promise<Response>}
+ */
+export const getHistory = (init) => executeRequest(fetch(urlFor('history'), init))
+
+export const cancelJob = (jobId) => executeRequest(fetch(getApiUrl() + `job/${jobId}/cancel`, { method: 'POST' }))
+
+export const deleteQueue = (queue) => executeRequest(fetch(getApiUrl() + `queue/${queue}/delete`, { method: 'POST' }))
+
+export const emptyQueue = (queue) => executeRequest(fetch(getApiUrl() + `queue/${queue}/empty`, { method: 'POST' }))

rt_dashboard/javascript/src/components/dashboard/dashboard.html

@@ -0,0 +1,15 @@
+<div class="row">
+  <div class="col-6">
+    <queues-component></queues-component>
+  </div>
+
+  <div class="col-6">
+    <workers-component></workers-component>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <tasks-component></tasks-component>
+  </div>
+</div>

rt_dashboard/javascript/src/components/dashboard/dashboard.js

@@ -0,0 +1,41 @@
+import templateHtml from './dashboard.html'
+import styles from '../../../styles/main.scss'
+import { loadTemplate } from '../../utils/dom'
+import { getPollInterval } from '../../api'
+
+const REFRESH_INTERVAL = getPollInterval() || 3000
+
+export default class Dashboard extends HTMLElement {
+  constructor () {
+    super()
+
+    loadTemplate(this.attachShadow({ mode: 'open' }), templateHtml, styles)
+
+    this.selectedQueueChange = this.selectedQueueChange.bind(this)
+  }
+
+  connectedCallback () {
+    const queuesComponent = this.shadowRoot.querySelector('queues-component')
+    queuesComponent.addEventListener('selectedQueueChange', this.selectedQueueChange)
+
+    this.intervalId = setInterval(this.refreshInterval.bind(this), REFRESH_INTERVAL)
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('selectedQueueChange', this.selectedQueueChange)
+
+    clearInterval(this.intervalId)
+  }
+
+  selectedQueueChange (event) {
+    const { detail: { queueName, count } } = event
+    const tasksComponent = this.shadowRoot.querySelector('tasks-component')
+    tasksComponent.queueInfo = { queue: queueName, count }
+  }
+
+  refreshInterval () {
+    document.dispatchEvent(
+      new CustomEvent('refresh'),
+    )
+  }
+}

rt_dashboard/javascript/src/components/dashboard/index.js

@@ -0,0 +1,3 @@
+import Dashboard from './dashboard'
+
+window.customElements.define('dashboard-component', Dashboard)