テーブル コンポーネントを使用した Phoenix Live Dashboard カスタム ページ

今日は、カスタム ライブ ダッシュボード ページで遊んでみました.これは、その使用方法に関する短いドキュメントです. Elixir システムを実行しているボックスで現在実行中のシステム プロセスを表示するページを実装します.
ドキュメントは hexdocs にあります.
最新のコードは要点に添付されています.
まず、新しいモジュールを作成する必要があります.

defmodule Phoenix.LiveDashboard.OsProcesses do
  @moduledoc false
  use Phoenix.LiveDashboard.PageBuilder

end

リストを取得するには、ps aux コマンドの出力を使用します.
ここで少しごまかし、jq を使用してページを json に変換します.これは後で Jason が簡単にデコードできます.これは、より複雑なコマンドの使用方法も示しています.もちろん、エリクサーで文字列を解析できます.
コマンド内でパイプを使用するには、オプションとして文字リストを渡して os モジュールを使用する必要がありました.要点では、ps パーサーは純粋なエリクサーで書かれていますが、簡単にするために、ここでは jq バージョンを残します. tasklist で遊ぶことができるウィンドウでは、出力は少し似ていますが、最初の行にスペースがあるため、少し異なる方法で解析することをお勧めします.

  defp fetch_processes(_params, _node) do
    data = 
    :os.cmd('ps aux | jq -sR \'[sub("\n$";"") | splits("\n") | sub("^ +";"") | [splits(" +")]] | .[0] as $header | .[1:] | [.[] | [. as $x | range($header | length) | {"key": $header[.], "value": $x[.]}] | from_entries]\'')
    |> Jason.decode!(%{keys: :atoms!})

    {data, length(data)}
  end

この関数の戻り値は、行と行の長さのタプルでなければなりません.
次に記述する必要がある関数は、列の定義です

  defp columns() do
    [
      %{
        field: :"PID",
        sortable: :asc
      },
      %{
        field: :"TTY"
      },
      %{
        field: :"TIME",
        cell_attrs: [class: "text-right"],
      },
      %{
        field: :"USER",
      },
      %{
        field: :"%CPU",
        sortable: :desc
      },
      %{
        field: :"%MEM",
        sortable: :desc
      },
      %{
        field: :"VSZ",
        sortable: :asc
      },
      %{
        field: :"RSS",
        sortable: :asc
      },
      %{
        field: :"STAT",
      },
      %{
        field: :"START",
        sortable: :asc
      },
      %{
        field: :"COMMAND",
      },
    ]
  end

この両方の関数を render_page/1 コールバックに渡す必要があります

  @impl true
  def render_page(_assigns) do
    table(
      columns: columns(),
      id: :os_processes,
      row_attrs: &row_attrs/1,
      row_fetcher: &fetch_processes/2,
      rows_name: "tables",
      title: "OS processes",
      sort_by: :"PID"
    )
  end

別の関数が必要であることがわかります.これは、テーブル行の html 属性を返す row_attrs です.
そして、それは基本的にそれです.
最後の 2 つのコードは、menu_link/2 コールバックです.

  @impl true
  def menu_link(_, _) do
    {:ok, "OS Processes"}
  end

私たちのページのルーターエントリ

    scope "/" do
      pipe_through :browser
    live_dashboard "/dashboard", metrics: ChatterWeb.Telemetry,
    additional_pages: [
    os_processes: Phoenix.LiveDashboard.OsProcesses
  ]

そしてそれは基本的にそれです-コードはgithubで見つけることができ、ソート、制限、および検索に使用されるパラメータがあります.楽しんで、作成したページをリンクしてください.