{"id":18040521,"url":"https://github.com/mirego/telemetry_ui","last_synced_at":"2025-05-15T10:07:53.800Z","repository":{"id":57747268,"uuid":"522640855","full_name":"mirego/telemetry_ui","owner":"mirego","description":"Telemetry based metrics UI. Take your telemetry metrics and display them in a web page.","archived":false,"fork":false,"pushed_at":"2025-01-04T21:25:27.000Z","size":1124,"stargazers_count":232,"open_issues_count":0,"forks_count":5,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-04-14T16:58:37.354Z","etag":null,"topics":["dashboard","ecto","elixir","elixir-ecto","metrics","monitoring","phoenix","plug","tailwindcss","telemetry","telemetry-viewer"],"latest_commit_sha":null,"homepage":"https://hexdocs.pm/telemetry_ui","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mirego.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-08T17:14:51.000Z","updated_at":"2025-04-02T19:16:18.000Z","dependencies_parsed_at":"2024-08-03T17:26:06.849Z","dependency_job_id":"703622f0-d623-40e9-87d7-972c5e7567c5","html_url":"https://github.com/mirego/telemetry_ui","commit_stats":{"total_commits":81,"total_committers":3,"mean_commits":27.0,"dds":0.07407407407407407,"last_synced_commit":"fd5ceb055201a74830abf87cba816fa6d0d629b7"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirego%2Ftelemetry_ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirego%2Ftelemetry_ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirego%2Ftelemetry_ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirego%2Ftelemetry_ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirego","download_url":"https://codeload.github.com/mirego/telemetry_ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319721,"owners_count":22051074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","ecto","elixir","elixir-ecto","metrics","monitoring","phoenix","plug","tailwindcss","telemetry","telemetry-viewer"],"created_at":"2024-10-30T15:06:29.410Z","updated_at":"2025-05-15T10:07:48.787Z","avatar_url":"https://github.com/mirego.png","language":"Elixir","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/464900/183483800-f313a3c0-1877-4c37-ac07-e08bed3f2276.png\" width=\"500\" /\u003e\n  \u003cbr /\u003e\u003cbr /\u003e\n  Telemetry-based metrics UI. Take your \u003ca href=\"https://github.com/beam-telemetry/telemetry\"\u003e\u003ccode\u003etelemetry\u003c/code\u003e\u003c/a\u003e metrics and display them in a web page.\n  \u003cbr /\u003e\u003cbr /\u003e\n  \u003ca href=\"https://hex.pm/packages/telemetry_ui\"\u003e\u003cimg src=\"https://img.shields.io/hexpm/v/telemetry_ui.svg\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## Features\n\n`TelemetryUI`’s primary goal is to display [your application metrics](https://hexdocs.pm/telemetry_metrics) without external infrastructure dependencies. [Plug](https://hexdocs.pm/plug/Plug.Telemetry.html), [Phoenix](https://hexdocs.pm/phoenix/telemetry.html), [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view/telemetry.html), [Absinthe](https://hexdocs.pm/absinthe/telemetry.html), [Ecto](https://hexdocs.pm/ecto/Ecto.Repo.html#module-telemetry-events), [Erlang VM](https://hexdocs.pm/telemetry_poller/readme.html), [Tesla](https://hexdocs.pm/tesla/Tesla.Middleware.Telemetry.html), [Finch](https://hexdocs.pm/finch/Finch.Telemetry.html), [Redix](https://hexdocs.pm/redix/telemetry.html), [Oban](https://hexdocs.pm/oban/Oban.Telemetry.html), [Broadway](https://hexdocs.pm/broadway/Broadway.html#module-telemetry) and others expose all sorts of data that can be useful. You can also emit your own events from your application.\n\nYour data should not have to be uploaded somewhere else to have insighful metrics.\n\nIt comes with a Postgres backend, powered by [Ecto](https://hexdocs.pm/ecto), to quickly (and efficiently) store and query your application events.\n\n\u003cimg alt=\"Screenshot of /metrics showcasing values and charts\" src=\"https://github.com/mirego/telemetry_ui/assets/464900/88a9863f-4762-42cd-90cb-74a433ec1494\"\u003e\n\n### Advantages over other tools\n\n- Persisted metrics inside your own database\n- Live dashboard\n- Many built-in charts and visualizations using [VegaLite](https://vega.github.io/vega-lite/)\n\n### Advanced features\n\n- 100% custom UI hook to show your own components\n- 100% custom data fetching to show live data\n- Shareable metrics page (secured, cacheable, without external requests)\n- Slack digest with rendered images\n- Multiple metrics dashboard living in the same app\n\nCheckout the Guides for more informations.\n\n## Usage\n\n### Installation\n\nTelemetryUI is published on Hex. Add it to your list of dependencies in `mix.exs`:\n\n```elixir\n# mix.exs\ndef deps do\n  [\n    {:telemetry_ui, \"~\u003e 4.0\"}\n  ]\nend\n```\n\nConfigure TelemetryUI for test.\n\n```elixir\n# config/test.exs\nconfig :telemetry_ui, disabled: true\n```\n\nThen run mix deps.get to install Telemetry and its dependencies.\n\nAfter the packages are installed you must create a database migration to add the `telemetry_ui_events` table to your database:\n\n```sh\nmix ecto.gen.migration add_telemetry_ui_events_table\n```\n\nOpen the generated migration in your editor and call the up and down functions on `TelemetryUI.Adapter.EctoPostgres.Migrations`:\n\n```elixir\ndefmodule MyApp.Repo.Migrations.AddTelemetryUIEventsTable do\n  use Ecto.Migration\n\n  @disable_migration_lock true\n  @disable_ddl_transaction true\n\n  def up do\n    TelemetryUI.Backend.EctoPostgres.Migrations.up()\n  end\n\n  # We specify `version: 1` in `down`, ensuring that we'll roll all the way back down if\n  # necessary, regardless of which version we've migrated `up` to.\n  def down do\n    TelemetryUI.Backend.EctoPostgres.Migrations.down(version: 1)\n  end\nend\n```\n\nThis 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.\n\nNow, run the migration to create the table:\n\n```sh\nmix ecto.migrate\n```\n\nTelemetryUI 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:\n\n```elixir\n# lib/my_app/application.ex\ndef start(_type, _args) do\n  children = [\n    MyApp.Repo,\n    {TelemetryUI, telemetry_config()}\n  ]\n\n  Supervisor.start_link(children, strategy: :one_for_one, name: MyApp.Supervisor)\nend\n\ndefp telemetry_config do\n  import TelemetryUI.Metrics\n\n  [\n    metrics: [\n      last_value(\"my_app.users.total_count\", description: \"Number of users\", ui_options: [unit: \" users\"]),\n      counter(\"phoenix.router_dispatch.stop.duration\", description: \"Number of requests\", unit: {:native, :millisecond}, ui_options: [unit: \" requests\"]),\n      value_over_time(\"vm.memory.total\", unit: {:byte, :megabyte}),\n      distribution(\"phoenix.router_dispatch.stop.duration\", description: \"Requests duration\", unit: {:native, :millisecond}, reporter_options: [buckets: [0, 100, 500, 2000]]),\n    ],\n    backend: %TelemetryUI.Backend.EctoPostgres{\n      repo: MyApp.Repo,\n      pruner_threshold: [months: -1],\n      pruner_interval_ms: 84_000,\n      max_buffer_size: 10_000,\n      flush_interval_ms: 10_000\n    }\n  ]\nend\n```\n\nSince the config is read once at startup, you need to restart the server of you add new metrics to track.\n\nTo see the rendered metrics, you need to add a route to your router.\n\n```elixir\n# lib/my_app_web/router.ex\nscope \"/\" do\n  get(\"/metrics\", TelemetryUI.Web, [], [assigns: %{telemetry_ui_allowed: true}])\nend\n```\n\n### Image generation\n\nOptionally, you can add 2 dependencies to generate png images from the charts. When you use the share feature, every chart will have an associated image (hidden) that will render a nice preview when sharing on Slack/other platforms.\n\n```elixir\n# mix.exs\ndef deps do\n  [\n    #...\n    {:vix, \"~\u003e 0.26\"},\n    {:vega_lite_convert, \"~\u003e 0.6\"},\n  ]\nend\n```\n\n#### Security\n\nSince it may contain sensitive data, `TelemetryUI` requires a special assign to render the page.\n\n`:telemetry_ui_allowed` must be set to `true` in the `conn` struct before it enters the `TelemetryUI.Web` module.\n\nBy 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:\n\n```elixir\npipeline :admin_protected do\n  plug(MyAppWeb.EnsureCurrentUser)\n  plug(MyAppWeb.EnsureRole, :admin)\n  plug(:enable_telemetry_ui)\nend\n\ndef enable_telemetry_ui(conn, _), do: assign(conn, :telemetry_ui_allowed, true)\n```\n\nThat’s it! You can declare as many metrics as you want and they will render in HTML on your page!\n\n## License\n\n`TelemetryUI` is © 2024 [Mirego](https://www.mirego.com) and may be freely distributed under the [New BSD license](http://opensource.org/licenses/BSD-3-Clause). See the [`LICENSE.md`](https://github.com/mirego/telemetry_ui/blob/master/LICENSE.md) file.\n\n## About Mirego\n\n[Mirego](https://www.mirego.com) 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](https://life.mirego.com) who imagine and build beautiful Web and mobile applications. We come together to share ideas and [change the world](http://www.mirego.org).\n\nWe also [love open-source software](https://open.mirego.com) and we try to give back to the community as much as we can.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirego%2Ftelemetry_ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirego%2Ftelemetry_ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirego%2Ftelemetry_ui/lists"}