Merge pull request #102 from ananthakumaran/upstream_live_view

phonenix liveview based rewrite

.formatter.exs

@@ -0,0 +1,4 @@
+[
+  import_deps: [:phoenix],
+  inputs: ["*.{ex,exs}", "{config,lib,test}/**/*.{ex,exs}"]
+]

.gitignore

@@ -1,18 +1,36 @@
-/ebin
-priv/tmp_downloads/
-priv/ember/tmp
-priv/ember/dist/assets/
-priv/ember/dist/crossdomain.xml
-priv/ember/dist/robots.txt
-priv/ember/dist/testem.js
-priv/ember/dist/tests/
-/deps
-/erl_crash.dump
-/tmp
-_build/
-/doc
-*.swp
-*.log
-.*.swp
-*.swo
-stdout
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+exq_ui-*.tar
+
+# If NPM crashes, it generates a log, let's ignore it too.
+npm-debug.log
+
+# The directory NPM downloads your dependencies sources to.
+/assets/node_modules/
+
+# Since we are building assets from assets/,
+# we ignore priv/static. You may want to comment
+# this depending on your deployment strategy.
+/priv/static/robots.txt
+/priv/static/images/
+/priv/static/favicon.ico

README.md

@@ -1,156 +1,65 @@
-# ExqUi
+# ExqUI
 
-[![Travis Build Status](https://img.shields.io/travis/akira/exq_ui.svg)](https://travis-ci.org/akira/exq_ui)
-[![Coveralls Coverage](https://img.shields.io/coveralls/akira/exq_ui.svg)](https://coveralls.io/github/akira/exq_ui)
-[![Hex.pm Version](https://img.shields.io/hexpm/v/exq_ui.svg)](https://hex.pm/packages/exq_ui)
+ExqUI provides a UI dashboard for [Exq](https://github.com/akira/exq), a job processing library
+compatible with Resque / Sidekiq for the Elixir language. ExqUI allow
+you to see various job processing stats, as well as details on failed,
+retried, scheduled jobs, etc.
 
-ExqUI provides a UI dashboard for [Exq](https://github.com/akira/exq), a job processing library compatible with Resque / Sidekiq for the [Elixir](http://elixir-lang.org) language.
-ExqUI allow you to see various job processing stats, as well as details on failed, retried, scheduled jobs, etc.
+## Configuration
 
-## Maintainers Needed
+1. ExqUI depends on the [api server](https://hexdocs.pm/exq/Exq.Api.html#content) component of the [exq](https://github.com/akira/exq). The
+   user of ExqUI is expected to start the Exq with proper config. The
+   only config required on ExqUI side is the name of the api
+   server. It's set to Exq.Api by default.
 
-We are seeking maintainers for this project. If you are interested in contributing as lead of co-maintainer, please reach out. See #58.
+   ```elixir
+   config :exq_ui,
+     api_name: Exq.Api
+   ```
+   There are two typical scenarios
 
-## Getting Started:
+   If ExqUI is embedded in a worker node which runs exq jobs, then
+   nothing special needs to be done. Exq by default starts the api
+   server on all worker nodes.
 
-See [Exq](https://github.com/akira/exq) for using the Exq library.
-This assumes you have an instance of [Redis](http://redis.io/).
+   If ExqUI needs to be embedded in a node which is not a worker, then
+   Exq can be started in `api` mode, which will only start the api
+   gen server and will not pickup jobs for execution. This can be done
+   by configuring the `mode`.
 
-### Installation:
-Add exq_ui to your mix.exs deps (replace version with the latest hex.pm package version):
+   ```elixir
+   config :exq,
+     mode: :api
+   ```
 
-```elixir
-  defp deps do
-    [
-      # ... other deps
-      {:exq_ui, "~> 0.11.1"}
-    ]
-  end
-```
-
-Then run ```mix deps.get```.
-
-Make sure to load `exq_ui`
-```elixir
-  def application do
-    [mod: {OperationSpectrum, []},
-     applications: [
-      :phoenix,
-      # ... other deps
-      :phoenix_ecto,
-      :postgrex,
-      :exq,
-      :exq_ui
-    ]
-  ]
-  end
-```
-
-For Elixir 1.2 or older, you will need to use Exq version 0.7.2 in hex, and you will also need to add `:tzdata` to your application list.
-
-### Configuration:
-
-By default, Exq will use configuration from your config.exs file.  You can use this
-to configure your Redis host, port, password, as well as namespace (which helps isolate the data in Redis).
-
-```elixir
-config :exq,
-  host: "127.0.0.1",
-  port: 6379,
-  password: "optional_redis_auth",
-  namespace: "exq",
-  concurrency: :infinite,
-  queues: ["default"],
-  poll_timeout: 50,
-  scheduler_poll_timeout: 200,
-  scheduler_enable: true,
-  max_retries: 25
-```
-
-There are also a few configuration options for the UI:
-```elixir
-config :exq_ui,
-  web_port: 4040,
-  web_namespace: "",
-  server: true
-```
-
-The webport configures which port to start the UI on, and the web_namespace configures what to use as the application root
-(both when using `mix exq.ui`).
-
-By default the empty namespace is used, so you can access the UI via:  `http://localhost:4040/`.
-
-When setting a different web_namespace, for example `exq_ui`, you can access the UI via: `http://localhost:4040/exq_ui`.
-
-The `server` option allows you to refrain from starting the web server during tests. It is set to `true` by default.
-
-## Web UI:
-
-This is a screenshot of the UI Dashboard provided by Exq UI:
-![Screenshot](http://i.imgur.com/m57gRPY.png)
+1. ExqUI uses Phoenix LiveView. If you already use LiveView, skip to
+next step. Otherwise follow LiveView [installation docs](https://hexdocs.pm/phoenix_live_view/installation.html).
 
-To start the web UI:
-```
-> mix exq.ui
-```
-
-## Using with Plug
-
-To use this with Plug, edit your router.ex and add this section:
+1. In your phoenix router import `ExqUIWeb.Router` and add
+`live_exq_ui(path)`
 
 ```elixir
-...
+defmodule DemoWeb.Router do
+  use Phoenix.Router
+  import ExqUIWeb.Router
 
-  pipeline :exq do
-    plug :accepts, ["html"]
+  pipeline :browser do
     plug :fetch_session
-    plug :fetch_flash
-    plug :put_secure_browser_headers
-    plug ExqUi.RouterPlug, namespace: "exq"
-  end
-
-  scope "/exq", ExqUi do
-    pipe_through :exq
-    forward "/", RouterPlug.Router, :index
+    plug :protect_from_forgery
   end
-```
-
-## Questions?  Issues?
-
-For issues, please submit a Github issue with steps on how to reproduce the problem.
-
-## Contributions
-
-Contributions are welcome. Tests are encouraged.
 
-By default, a static distribution of the UI is used.
-To run the UI and automatically build the JS distribution on changes, run:
+  scope "/", DemoWeb do
+    pipe_through :browser
 
-```
-> cd priv/ember
-> npm install
-> bower install
-> ./node_modules/ember-cli/bin/ember server
+    live_exq_ui("/exq")
+  end
+end
 ```
 
-To run tests / ensure your changes have not caused any regressions:
+## Development
 
+```sh
+mix setup # on first run
+mix run dev.exs
+open http://localhost:4000/exq
 ```
-mix test --no-start
-```
-
-## Contributors:
-
-Justin McNally (j-mcnally) (structtv)
-
-Nick Sanders (nicksanders)
-
-Nick Gal (nickgal)
-
-pdilyard (Paul Dilyard)
-
-Alexander Shapiotko (thousandsofthem)
-
-Matt Ward (theRealWardo)
-
-Lin He (he9lin)

assets/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ]
+}

assets/css/app.scss

@@ -0,0 +1,39 @@
+$small-font-size: .750em !default;
+$font-size-sm: 1rem * .750 !default;
+
+$primary: #B5179E;
+$dark: #560BAD;
+
+@import "./bootstrap";
+
+.nounderline {
+  text-decoration: none !important
+}
+
+svg {
+  color: rgba(0,0,0,0.250);
+}
+
+.legend {
+    display: flex;
+    align-items: center;
+}
+
+/* LiveView specific classes for your customizations */
+
+.phx-no-feedback.invalid-feedback,
+.phx-no-feedback .invalid-feedback {
+  display: none;
+}
+
+.phx-click-loading {
+  opacity: 0.5;
+  transition: opacity 1s ease-out;
+}
+
+.phx-disconnected {
+  cursor: wait;
+}
+.phx-disconnected * {
+  pointer-events: none;
+}

assets/css/bootstrap.scss

@@ -0,0 +1,53 @@
+/*!
+ * Bootstrap v5.1.0 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+// scss-docs-start import-stack
+// Configuration
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+// Layout & components
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+// @import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+// @import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+// @import "~bootstrap/scss/accordion";
+// @import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+// @import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+// @import "~bootstrap/scss/progress";
+// @import "~bootstrap/scss/list-group";
+// @import "~bootstrap/scss/close";
+// @import "~bootstrap/scss/toasts";
+// @import "~bootstrap/scss/modal";
+// @import "~bootstrap/scss/tooltip";
+// @import "~bootstrap/scss/popover";
+// @import "~bootstrap/scss/carousel";
+// @import "~bootstrap/scss/spinners";
+// @import "~bootstrap/scss/offcanvas";
+// @import "~bootstrap/scss/placeholders";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";
+// scss-docs-end import-stack