• Stars
    star
    1,925
  • Rank 23,067 (Top 0.5 %)
  • Language
    Elixir
  • License
    MIT License
  • Created over 4 years ago
  • Updated 17 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Realtime dashboard with metrics, request logging, plus storage, OS and VM insights

Phoenix LiveDashboard

CI

Online Documentation.

LiveDashboard provides real-time performance monitoring and debugging tools for Phoenix developers. It provides the following modules:

  • Home - See general information about the system

  • OS Data - See general information about OS, such as CPU, Memory and Disk usage

  • Metrics - See how your application performs under different conditions by visualizing :telemetry events with real-time charts

  • Request logging - See everything that was logged for certain requests

  • Applications - See, filter, and search applications in the current node

  • Processes - See, filter, and search processes in the current node

  • Ports - See, filter, and search ports (responsible for I/O) in the current node

  • Sockets - See, filter, and search sockets (responsible for tcp/udp) in the current node

  • ETS - See, filter, and search ETS tables (in-memory storage) in the current node

  • Ecto Stats - Shows index, table, and general usage about the underlying Ecto Repo storage

The dashboard also works across nodes. If your nodes are connected via Distributed Erlang, then you can access information from node B while accessing the dashboard on node A.

screenshot

Installation

To start using LiveDashboard, you will need three steps:

  1. Add the phoenix_live_dashboard dependency
  2. Configure LiveView
  3. Add dashboard access

1. Add the phoenix_live_dashboard dependency

Add the following to your mix.exs and run mix deps.get:

def deps do
  [
    {:phoenix_live_dashboard, "~> 0.7"}
  ]
end

2. Configure LiveView

The LiveDashboard is built on top of LiveView. If LiveView is already installed in your app, feel free to skip this section.

If you plan to use LiveView in your application in the future, we recommend you to follow the official installation instructions. This guide only covers the minimum steps necessary for the LiveDashboard itself to run.

First, update your endpoint's configuration to include a signing salt. You can generate a signing salt by running mix phx.gen.secret 32 (note Phoenix v1.5+ apps already have this configuration):

# config/config.exs
config :my_app, MyAppWeb.Endpoint,
  live_view: [signing_salt: "SECRET_SALT"]

Then add the Phoenix.LiveView.Socket declaration to your endpoint:

socket "/live", Phoenix.LiveView.Socket

And you are good to go!

3. Add dashboard access for development-only usage

Once installed, update your router's configuration to forward requests to a LiveDashboard with a unique name of your choosing:

# lib/my_app_web/router.ex
use MyAppWeb, :router
import Phoenix.LiveDashboard.Router

...

if Mix.env() == :dev do
  scope "/" do
    pipe_through :browser
    live_dashboard "/dashboard"
  end
end

This is all. Run mix phx.server and access the "/dashboard" to configure the necessary modules.

Extra: Add dashboard access on all environments (including production)

If you want to use the LiveDashboard in production, you should put it behind some authentication and allow only admins to access it. If your application does not have an admins-only section yet, you can use Plug.BasicAuth to set up some basic authentication as long as you are also using SSL (which you should anyway):

# lib/my_app_web/router.ex
use MyAppWeb, :router
import Phoenix.LiveDashboard.Router

...

pipeline :admins_only do
  plug :admin_basic_auth
end

scope "/" do
  pipe_through [:browser, :admins_only]
  live_dashboard "/dashboard"
end

defp admin_basic_auth(conn, _opts) do
  username = System.fetch_env!("AUTH_USERNAME")
  password = System.fetch_env!("AUTH_PASSWORD")
  Plug.BasicAuth.basic_auth(conn, username: username, password: password)
end

If you are running your application behind a proxy or a webserver, you also have to make sure they are configured for allowing WebSocket upgrades. For example, here is an article on how to configure Nginx with Phoenix and WebSockets.

Finally, you will also want to configure your config/prod.exs and use your domain name under the check_origin configuration:

check_origin: ["//myapp.com"]

Then you should be good to go!

Using from the command line with PLDS

It's possible to use the LiveDashboard without having to add it as a dependency of your application, or when you don't have Phoenix installed. PLDS is a command line tool that provides a standalone version of LiveDashboard with some batteries included.

You can install it with:

$ mix escript.install hex plds

And connect to a running node with:

$ plds server --connect mynode --open

For more details, please check the PLDS documentation.

Contributing

For those planning to contribute to this project, you can run a dev version of the dashboard with the following commands:

$ mix setup
$ mix dev

Additionally, you may pass some options to enable Ecto testing. For example, to enable the PostgreSQL repo:

$ mix dev --postgres

...and to enable the MySQL repo:

$ mix dev --mysql

...and to enable the SQLite repo:

$ mix dev --sqlite

Alternatively, run iex -S mix dev [flags] if you also want a shell.

Before submitting a pull request, discard any changes that were made to the dist directory.

For example, to rollback using git restore:

$ git restore dist

License

MIT License. Copyright (c) 2019 Michael Crumm, Chris McCord, José Valim.

More Repositories

1

phoenix

Peace of mind from prototype to production
Elixir
20,545
star
2

phoenix_live_view

Rich, real-time user experiences with server-rendered HTML
Elixir
5,741
star
3

phoenix_pubsub

Distributed PubSub and Presence platform for the Phoenix Framework
Elixir
611
star
4

flame

Elixir
607
star
5

phoenix_guides

User guides for the Phoenix web development framework.
499
star
6

tailwind

An installer for tailwind
Elixir
461
star
7

phoenix_ecto

Phoenix and Ecto integration with support for concurrent acceptance testing
Elixir
437
star
8

phoenix_html

Building blocks for working with HTML in Phoenix
Elixir
379
star
9

phoenix_live_reload

Provides live-reload functionality for Phoenix
Elixir
289
star
10

firenest

Elixir
271
star
11

esbuild

An installer for esbuild
Elixir
261
star
12

phoenix_pubsub_redis

The Redis PubSub adapter for the Phoenix framework
Elixir
174
star
13

dns_cluster

Simple DNS clustering for distributed Elixir nodes
Elixir
162
star
14

vscode-phoenix

Syntax highlighting support for Phoenix templates in Visual Studio Code.
155
star
15

plds

CLI version of Phoenix LiveDashboard
Elixir
85
star
16

websock

A specification for Elixir apps to service WebSocket connections
Elixir
70
star
17

phoenix_view

View abstraction for Phoenix v1.0-v1.6
Elixir
64
star
18

tree-sitter-heex

HEEx grammer for Tree-sitter
JavaScript
48
star
19

phoenix_template

Template rendering for Phoenix
Elixir
48
star
20

ex_conf

Simple Elixir Configuration Management
Elixir
35
star
21

archives

Holds archives for released Phoenix versions
27
star
22

websock_adapter

Implementation of the WebSock specification for servers
Elixir
25
star
23

phoenix_site

CSS
13
star
24

phoenix_html_helpers

Collection of helpers to generate and manipulate HTML contents
Elixir
13
star
25

media

Phoenix Related Media
10
star
26

node_checker

Elixir
3
star