Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add comments and reorganized some html #8

Merged
merged 7 commits into from
Apr 8, 2024
Merged

Add comments and reorganized some html #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
07c21c0
Add comments and reorganized some html
bryantkale Apr 6, 2024
5fa3579
Create components for filter and table
bryantkale Apr 6, 2024
9cfe1f0
fix failing test
bryantkale Apr 6, 2024
bf4cf08
fix failing tests
bryantkale Apr 6, 2024
2d08ecf
Merge branch 'main' of github.com:jaronoff97/tails
bryantkale Apr 6, 2024
a55c378
merge conflict
bryantkale Apr 6, 2024
ef09062
linting error
bryantkale Apr 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions lib/tails_web/components/FilterSidebar/FilterSidebar.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
defmodule FilterSidebar do
alias TailsWeb.Common.Dropdown
alias TailsWeb.Common.FilterDropdown
alias FilterDropdown
alias Dropdown

use Phoenix.Component

# This is a shameful hack because apparently dots in ids are a no no?
defp generate_id_from_key(key) do
String.replace(key, ".", "-")
end

def showFilterSidebar(assigns) do
~H"""
<div id="default-sidebar" class="w-80 h-min rounded-lg dark:bg-gray-600">
<div class="w-80 px-3 py-4 overflow-y-auto">
<h2 class="text-2xl font-extrabold dark:text-white">Filters</h2>
<hr class="solid pb-5" />
<ul class=" font-medium">
<li>
<Dropdown.dropdown id="attribute">
<:button>
Attributes
</:button>

<:item :for={{k, values} <- @available_filters} id={"#{k}-attr-item"}>
<.live_component
module={FilterDropdown}
id={"#{generate_id_from_key(k)}-attribute-filter-dropdown"}
key={k}
values={values}
button_title={k}
filter_type="attributes"
/>
</:item>
</Dropdown.dropdown>
</li>
<li>
<Dropdown.dropdown id="resource">
<:button>
Resource
</:button>

<:item :for={{k, values} <- @available_resource_filters} id={"#{k}-resource-item"}>
<.live_component
module={FilterDropdown}
id={"#{generate_id_from_key(k)}-resource-filter-dropdown"}
key={k}
values={values}
button_title={k}
filter_type="resource"
/>
</:item>
</Dropdown.dropdown>
</li>
</ul>
</div>
</div>
"""
end
end
115 changes: 115 additions & 0 deletions lib/tails_web/components/ResourceTable/ResourceTable.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
defmodule ResourceTable do
alias TailsWeb.Otel.ResourceData
alias Phoenix.LiveView.JS
use Phoenix.Component

def showTable(assigns) do
~H"""
<div id="table" class="w-full overflow-y-auto sm:overflow-visible sm:px-0 ml-6">
<table class="w-[40rem] sm:w-full">
<thead class="text-sm text-left leading-6 text-zinc-500">
<tr>
<div :for={col_name <- @columns[@active_stream]}>
<th class="p-0 pb-4 pr-6 font-normal dark:text-slate-50"><%= col_name %></th>
</div>
<div :for={col_name <- @custom_columns}>
<th class="p-0 pb-4 pr-6 font-normal">
<span
id={"badge-dismiss-#{col_name}"}
class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-yellow-800 bg-yellow-100 rounded dark:bg-yellow-900 dark:text-yellow-300"
>
<%= col_name %>
<button
type="button"
class="inline-flex items-center p-1 ms-2 text-sm text-yellow-400 bg-transparent rounded-sm hover:bg-yellow-200 hover:text-yellow-900 dark:hover:bg-yellow-800 dark:hover:text-yellow-300"
phx-click="remove_column"
phx-value-column={col_name}
phx-value-column_type="attributes"
aria-label="Remove"
>
<svg
class="w-2 h-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
</svg>
<span class="sr-only"><%= col_name %></span>
</button>
</span>
</th>
</div>
<div :for={col_name <- @resource_columns}>
<th class="p-0 pb-4 pr-6 font-normal">
<span
id={"badge-dismiss-#{col_name}"}
class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-blue-800 bg-blue-100 rounded dark:bg-blue-900 dark:text-blue-300"
>
<%= col_name %>
<button
type="button"
class="inline-flex items-center p-1 ms-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300"
phx-click="remove_column"
phx-value-column={col_name}
phx-value-column_type="resource"
aria-label="Remove"
>
<svg
class="w-2 h-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
</svg>
<span class="sr-only"><%= col_name %></span>
</button>
</span>
</th>
</div>
</tr>
</thead>

<tbody
id="data"
phx-update="stream"
class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
>
<tr
:for={{row_id, row} <- @streams.data}
id={row_id}
class="group hover:bg-zinc-50 dark:text-slate-300"
>
<ResourceData.show
data={row}
stream_name={@active_stream}
custom_columns={@custom_columns}
resource_columns={@resource_columns}
row_click={
fn data ->
JS.push("row_clicked", value: data)
end
}
/>
</tr>
</tbody>
</table>
</div>
"""
end
end
9 changes: 2 additions & 7 deletions lib/tails_web/live/tail_live/index.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
defmodule TailsWeb.TailLive.Index do
use TailsWeb, :live_view

alias TailsWeb.Common.{Buttons, Slideover, FilterDropdown, Dropdown}
alias TailsWeb.Common.{Buttons, Slideover}
alias Tails.{Telemetry, Agents, Filters}
alias TailsWeb.Otel.{Attributes, ResourceData, DataViewer}
alias TailsWeb.Otel.{Attributes, DataViewer}
@stream_limit 1000

@columns %{
Expand Down Expand Up @@ -427,9 +427,4 @@ defmodule TailsWeb.TailLive.Index do
""
end
end

# This is a shameful hack because apparently dots in ids are a no no?
defp generate_id_from_key(key) do
String.replace(key, ".", "-")
end
end
Loading
Loading