Giter Site home page Giter Site logo

mirego / telemetry_ui Goto Github PK

View Code? Open in Web Editor NEW
112.0 29.0 2.0 983 KB

Telemetry based metrics UI. Take your telemetry metrics and display them in a web page.

Home Page: https://hexdocs.pm/telemetry_ui

License: BSD 3-Clause "New" or "Revised" License

Elixir 86.71% Makefile 1.25% CSS 1.68% JavaScript 0.26% TypeScript 5.70% HTML 4.39%
elixir elixir-ecto plug telemetry phoenix tailwindcss dashboard metrics telemetry-viewer ecto

telemetry_ui's Introduction



Telemetry-based metrics UI. Take your telemetry metrics and display them in a web page.

Features

TelemetryUI’s primary goal is to display your application metrics without external infrastructure dependencies. Plug, Phoenix, Phoenix LiveView, Absinthe, Ecto, Erlang VM, Tesla, Finch, Redix, Oban, Broadway and others expose all sorts of data that can be useful. You can also emit your own events from your application.

Your data should not have to be uploaded somewhere else to have insighful metrics.

It comes with a Postgres backend, powered by Ecto, to quickly (and efficiently) store and query your application events.

Screenshot of /metrics showcasing values and charts

Advantages over other tools

  • Persisted metrics inside your own database
  • Live dashboard
  • Many built-in charts and visualizations using VegaLite

Advanced features

  • 100% custom UI hook to show your own components
  • 100% custom data fetching to show live data
  • Shareable metrics page (secured, cacheable, without external requests)
  • Slack digest with rendered images
  • Multiple metrics dashboard living in the same app

Checkout the Guides for more informations.

Usage

Installation

TelemetryUI is published on Hex. Add it to your list of dependencies in mix.exs:

# mix.exs
def deps do
  [
    {:telemetry_ui, "~> 4.0"}
  ]
end

Configure TelemetryUI for test.

# config/test.exs
config :telemetry_ui, disabled: true

Then run mix deps.get to install Telemetry and its dependencies.

After the packages are installed you must create a database migration to add the telemetry_ui_events table to your database:

mix ecto.gen.migration add_telemetry_ui_events_table

Open the generated migration in your editor and call the up and down functions on TelemetryUI.Adapter.EctoPostgres.Migrations:

defmodule MyApp.Repo.Migrations.AddTelemetryUIEventsTable do
  use Ecto.Migration

  @disable_migration_lock true
  @disable_ddl_transaction true

  def up do
    TelemetryUI.Backend.EctoPostgres.Migrations.up()
  end

  # We specify `version: 1` in `down`, ensuring that we'll roll all the way back down if
  # necessary, regardless of which version we've migrated `up` to.
  def down do
    TelemetryUI.Backend.EctoPostgres.Migrations.down(version: 1)
  end
end

This will run all of TelemetryUI's versioned migrations for your database. Migrations between versions are idempotent and rarely change after a release. As new versions are released you may need to run additional migrations.

Now, run the migration to create the table:

mix ecto.migrate

TelemetryUI instances are isolated supervision trees and must be included in your application's supervisor to run. Use the application configuration you've just set and include TelemetryUI in the list of supervised children:

# lib/my_app/application.ex
def start(_type, _args) do
  children = [
    MyApp.Repo,
    {TelemetryUI, telemetry_config()}
  ]

  Supervisor.start_link(children, strategy: :one_for_one, name: MyApp.Supervisor)
end

defp telemetry_config do
  import TelemetryUI.Metrics

  [
    metrics: [
      last_value("my_app.users.total_count", description: "Number of users", ui_options: [unit: " users"]),
      counter("phoenix.router_dispatch.stop.duration", description: "Number of requests", unit: {:native, :millisecond}, ui_options: [unit: " requests"]),
      value_over_time("vm.memory.total", unit: {:byte, :megabyte}),
      distribution("phoenix.router_dispatch.stop.duration", description: "Requests duration", unit: {:native, :millisecond}, reporter_options: [buckets: [0, 100, 500, 2000]]),
    ],
    backend: %TelemetryUI.Backend.EctoPostgres{
      repo: MyApp.Repo,
      pruner_threshold: [months: -1],
      pruner_interval_ms: 84_000,
      max_buffer_size: 10_000,
      flush_interval_ms: 10_000
    }
  ]
end

Since the config is read once at startup, you need to restart the server of you add new metrics to track.

To see the rendered metrics, you need to add a route to your router.

# lib/my_app_web/router.ex
scope "/" do
  get("/metrics", TelemetryUI.Web, [], [assigns: %{telemetry_ui_allowed: true}])
end

Security

Since it may contain sensitive data, TelemetryUI requires a special assign to render the page.

:telemetry_ui_allowed must be set to true in the conn struct before it enters the TelemetryUI.Web module.

By using a special assign to control access, you can integrate TelemetryUI.Web page with your existing authorization. We can imagine an admin protected section that also gives you access to the TelemetryUI.Web page:

pipeline :admin_protected do
  plug(MyAppWeb.EnsureCurrentUser)
  plug(MyAppWeb.EnsureRole, :admin)
  plug(:enable_telemetry_ui)
end

def enable_telemetry_ui(conn, _), do: assign(conn, :telemetry_ui_allowed, true)

That’s it! You can declare as many metrics as you want and they will render in HTML on your page!

License

TelemetryUI is © 2023 Mirego and may be freely distributed under the New BSD license. See the LICENSE.md file.

About Mirego

Mirego is a team of passionate people who believe that work is a place where you can innovate and have fun. We’re a team of talented people who imagine and build beautiful Web and mobile applications. We come together to share ideas and change the world.

We also love open-source software and we try to give back to the community as much as we can.

telemetry_ui's People

Contributors

ardhitama avatar mohammedzeglam-pg avatar remi avatar romarickb avatar simonprev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

telemetry_ui's Issues

JS error after upgrading 0.0.18 to 1.1.3

Hi, after upgrading to 1.1.3 I'm getting this JS error, both in Firefox and Google Chrome, and the charts don't render:

Captura de pantalla 2022-12-02 a las 19 30 46

Uncaught SyntaxError: missing ) after argument list
metrics:108 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:108:12)
metrics:147 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:147:12)
metrics:186 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:186:12)
metrics:225 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:225:12)
metrics:264 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:264:12)
metrics:303 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:303:12)
metrics:342 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:342:12)
metrics:381 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:381:12)

We're on phoenix 1.6.12 and phoenix_live_view 0.18.2

Examples on adding new metrics

Hi! Thanks for buidling this!

It's been super easy to install and display the initial metrics, but I'm new to Telemetry and it's not clear to me how I could add more metrics to the UI.

Could you please provide more examples? How can I for example visualize the number of completed Oban jobs?

What about a custom metric, say, number of total users in the app, or duration of a given function?

I'm sure I'll eventually find it out as I learn about Telemetry but maybe you could add some simple examples to the documentation? I'm a bit confused as I already have phoenix_live_dashboard set up so I'm not sure how telemetry_uirelates to it.

Thanks!

Crash with Ecto telemetry for repo.query.queue_time

Hi!

In the Live Dashboard I have these metrics and they work fine:

      # Database Time Metrics
      summary("myapp.repo.query.total_time", unit: {:native, :millisecond}),
      summary("myapp.repo.query.decode_time", unit: {:native, :millisecond}),
      summary("myapp.repo.query.query_time", unit: {:native, :millisecond}),
      summary("myapp.repo.query.queue_time", unit: {:native, :millisecond}),
      summary("myapp.repo.query.idle_time", unit: {:native, :millisecond}),

However, if I try to add them to Telemetry UI like this:

value_over_time(
          "myapp.repo.query.total_time",
          description: "Repo Query Queue Time",
          unit: {:native, :millisecond},
          ui_options: [unit: " ms"]
        )

It crashes with:

** (ArithmeticError) bad argument in arithmetic expression
    :erlang.+(nil, 0.716)
    (telemetry_ui 0.0.18) lib/telemetry_ui/write_buffer.ex:85: anonymous fn/2 in TelemetryUI.WriteBuffer.group_events/2
    (elixir 1.13.4) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
    (telemetry_ui 0.0.18) lib/telemetry_ui/write_buffer.ex:85: anonymous fn/2 in TelemetryUI.WriteBuffer.group_events/2
    (stdlib 3.14.2.2) maps.erl:233: :maps.fold_1/3
    (telemetry_ui 0.0.18) lib/telemetry_ui/write_buffer.ex:72: TelemetryUI.WriteBuffer.do_flush/2
    (stdlib 3.14.2.2) gen_server.erl:727: :gen_server.try_terminate/3
    (stdlib 3.14.2.2) gen_server.erl:912: :gen_server.terminate/10
    (stdlib 3.14.2.2) proc_lib.erl:226: :proc_lib.init_p_do_apply/3

This is failing both with queue_time and decode_time, but works fine with total_time and query_time.

Any idea why this may be failing and how to fix that?

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.