Skip to content

Commit

Permalink
A ton of cleanup around town
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaronoff97
jaronoff97 committed Apr 9, 2024
1 parent fdf62a7 commit 119650f
Show file tree
Hide file tree
Showing 13 changed files with 438 additions and 385 deletions.
25 changes: 24 additions & 1 deletion assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,36 @@ import { EditorState, Compartment } from "@codemirror/state";
import * as yamlMode from "@codemirror/legacy-modes/mode/yaml";
import { json } from "@codemirror/lang-json"
import { StreamLanguage } from "@codemirror/language";
import { oneDark } from '@codemirror/theme-one-dark';
import { tomorrow } from 'thememirror';

const yaml = StreamLanguage.define(yamlMode.yaml);
let language = new Compartment, tabSize = new Compartment
let editorTheme = new Compartment();

let state = EditorState.create({
extensions: [basicSetup, yaml, language.of(json())],
extensions: [
basicSetup,
yaml,
language.of(json()),
darkModeEnabled() ? editorTheme.of(oneDark) : tomorrow,
],
});

function darkModeEnabled() {
// Check to see if Media-Queries are supported
if (window.matchMedia) {
// Check if the dark-mode Media-Query matches
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return true;
} else {
return false;
}
} else {
return false;
}
}

hooks = {
DataViewer: {
updated() {
Expand All @@ -52,6 +74,7 @@ hooks = {
height: 100,
state: state,
parent: document.getElementById("data-viewer"),

});
let textarea = this.el;

Expand Down
25 changes: 24 additions & 1 deletion assets/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion assets/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
"@codemirror/language": "^6.3.1",
"@codemirror/legacy-modes": "^6.3.1",
"@codemirror/stream-parser": "^0.19.9",
"codemirror": "^6.0.1"
"@codemirror/theme-one-dark": "^6.1.2",
"codemirror": "^6.0.1",
"thememirror": "^2.0.1"
}
}
28 changes: 28 additions & 0 deletions lib/tails_web/components/FilterSidebar/FilterSidebar.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,34 @@ defmodule FilterSidebar 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">
<!-- Metrics/Spans/Logs header radio buttons
-->
<h2 class="text-2xl font-extrabold dark:text-white">Telemetry Type</h2>
<hr class="solid" />
<div id="metrics-spans-logs-button-group" class="mx-auto w-min">
<ul class="m-5 text-sm font-medium text-gray-900 sm:flex dark:text-white">
<li :for={option <- @stream_options} class="pr-5">
<div class="flex items-center mb-4">
<input
class="w-4 h-4 text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2"
checked={@active_stream == option.stream}
value={option.name}
type="radio"
id={"#{option.id}"}
name={option.name}
phx-click="change_stream"
/>
<label
class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
for={"#{option.id}"}
>
<%= String.capitalize(option.name) %>
</label>
</div>
</li>
</ul>
</div>
<!-- End of Metrics/Spans/Logs -->
<h2 class="text-2xl font-extrabold dark:text-white">Filters</h2>
<hr class="solid pb-5" />
<ul class=" font-medium">
Expand Down
206 changes: 109 additions & 97 deletions lib/tails_web/components/ResourceTable/ResourceTable.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,109 +6,121 @@ defmodule ResourceTable do
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"
<%= if @remote_tap_started do %>
<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"
>
<svg
class="w-2 h-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
<%= 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"
>
<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>
<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"
>
<svg
class="w-2 h-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
<%= 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"
>
<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>
<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"
<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"
>
<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>
<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>
<% else %>
<div class="flex justify-center items-center h-full">
<button
phx-click="toggle_remote_tap"
hidden={@remote_tap_started}
class="bg-blue-500 hover:bg-blue-700 focus:bg-blue-900 text-white font-bold py-2 px-4 rounded focus:shadow-outline active:bg-blue-900"
>
<h1>Remote tap not started, connect to agent</h1>
</button>
</div>
<% end %>
</div>
"""
end
Expand Down
4 changes: 2 additions & 2 deletions lib/tails_web/components/common/dropdown.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ defmodule TailsWeb.Common.Dropdown do
<div class="relative" data-component={"#{@id}-dropdown"}>
<button
type="button"
class="flex items-center p-2 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
class="flex items-center p-2 w-full text-base font-medium text-gray-900 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
id={"#{@id}-button"}
aria-expanded="false"
phx-click={JS.toggle(to: "##{@id}-menu", in: "fade-in-scale", out: "fade-out-scale")}
Expand All @@ -39,7 +39,7 @@ defmodule TailsWeb.Common.Dropdown do
</button>
<ul id={"#{@id}-menu"} class="hidden py-2 space-y-2" data-cancel={JS.exec(%JS{}, "phx-remove")}>
<li :for={item <- @item}>
<div class="block items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group dark:text-white ">
<div class="block items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg group dark:text-white ">
<%= render_slot(item) %>
</div>
</li>
Expand Down
Loading

0 comments on commit 119650f

Please sign in to comment.