Graham McIntire
88ee55d603
The linking row was rendered in a separate loop after all device rows, causing it to always appear at the bottom of the table. Changed to use a single for loop with an inline if check so the linking row appears immediately after the corresponding device row.
301 lines
13 KiB
Text
301 lines
13 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
>
|
|
<div class="border-b border-gray-200 pb-5 dark:border-white/5">
|
|
<.breadcrumb items={[
|
|
%{label: "Dashboard", navigate: ~p"/dashboard"},
|
|
%{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
|
|
%{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
|
|
%{label: "Preseem"}
|
|
]} />
|
|
<h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
|
|
{t("Preseem Devices")}
|
|
</h1>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
{t("Manage device matching between Preseem access points and your monitored devices.")}
|
|
</p>
|
|
</div>
|
|
|
|
<%!-- Sub-navigation tabs --%>
|
|
<div class="mt-4 border-b border-gray-200 dark:border-white/10">
|
|
<nav class="flex space-x-6">
|
|
<.link
|
|
navigate={~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices"}
|
|
class="border-b-2 border-indigo-500 px-1 pb-3 text-sm font-medium text-indigo-600 dark:text-indigo-400"
|
|
>
|
|
{t("Devices")}
|
|
</.link>
|
|
<.link
|
|
navigate={~p"/insights?source=preseem"}
|
|
class="border-b-2 border-transparent px-1 pb-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-white"
|
|
>
|
|
{t("Insights")}
|
|
</.link>
|
|
</nav>
|
|
</div>
|
|
|
|
<%!-- Filter tabs --%>
|
|
<div class="mt-6 border-b border-gray-200 dark:border-white/10">
|
|
<nav class="-mb-px flex space-x-8">
|
|
<.link
|
|
id="filter-all"
|
|
patch={~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices?filter=all"}
|
|
class={[
|
|
"whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
|
|
if(@filter == "all",
|
|
do: "border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400",
|
|
else:
|
|
"border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300"
|
|
)
|
|
]}
|
|
>
|
|
{t("All")}
|
|
</.link>
|
|
<.link
|
|
id="filter-unmatched"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices?filter=unmatched"
|
|
}
|
|
class={[
|
|
"whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
|
|
if(@filter == "unmatched",
|
|
do: "border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400",
|
|
else:
|
|
"border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300"
|
|
)
|
|
]}
|
|
>
|
|
{t("Unmatched")}
|
|
</.link>
|
|
<.link
|
|
id="filter-matched"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices?filter=matched"
|
|
}
|
|
class={[
|
|
"whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
|
|
if(@filter == "matched",
|
|
do: "border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400",
|
|
else:
|
|
"border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300"
|
|
)
|
|
]}
|
|
>
|
|
{t("Matched")}
|
|
</.link>
|
|
</nav>
|
|
</div>
|
|
|
|
<%!-- Access points table --%>
|
|
<div class="mt-6">
|
|
<%= if @access_points == [] do %>
|
|
<div
|
|
id="empty-state"
|
|
class="rounded-lg border-2 border-dashed border-gray-300 p-12 text-center dark:border-gray-700"
|
|
>
|
|
<.icon name="hero-signal" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
|
|
<h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
|
|
{t("No access points found")}
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
<%= case @filter do %>
|
|
<% "unmatched" -> %>
|
|
{t("All access points are matched. Nice!")}
|
|
<% "matched" -> %>
|
|
{t("No matched access points yet. Sync from Preseem and link devices.")}
|
|
<% _ -> %>
|
|
{t(
|
|
"No Preseem access points have been synced yet. Enable the integration and run a sync."
|
|
)}
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
<% else %>
|
|
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-white/10">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
|
|
<thead class="bg-gray-50 dark:bg-white/5">
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{t("Name")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 sm:table-cell"
|
|
>
|
|
{t("Preseem ID")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 md:table-cell"
|
|
>
|
|
{t("IP Address")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 sm:table-cell"
|
|
>
|
|
{t("Status")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 md:table-cell"
|
|
>
|
|
{t("Linked Device")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{t("Actions")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white dark:divide-white/5 dark:bg-transparent">
|
|
<%= for ap <- @access_points do %>
|
|
<tr
|
|
id={"ap-row-#{ap.id}"}
|
|
class="hover:bg-gray-50 dark:hover:bg-white/5"
|
|
>
|
|
<td class="px-4 py-4 text-sm font-medium text-gray-900 dark:text-white">
|
|
<span class="break-all">{ap.name || "Unnamed"}</span>
|
|
<span class="block text-xs text-gray-400 dark:text-gray-500 sm:hidden">
|
|
{ap.preseem_id}
|
|
</span>
|
|
<span class={[
|
|
"mt-1 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium sm:hidden",
|
|
match_confidence_classes(ap.match_confidence)
|
|
]}>
|
|
{humanize_confidence(ap.match_confidence)}
|
|
</span>
|
|
</td>
|
|
<td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 sm:table-cell">
|
|
{ap.preseem_id}
|
|
</td>
|
|
<td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 md:table-cell">
|
|
{ap.ip_address || "-"}
|
|
</td>
|
|
<td class="hidden whitespace-nowrap px-4 py-4 text-sm sm:table-cell">
|
|
<span class={[
|
|
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
|
|
match_confidence_classes(ap.match_confidence)
|
|
]}>
|
|
{humanize_confidence(ap.match_confidence)}
|
|
</span>
|
|
</td>
|
|
<td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 md:table-cell">
|
|
<%= if ap.device do %>
|
|
<.link
|
|
navigate={~p"/devices/#{ap.device.id}"}
|
|
class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
{ap.device.name || ap.device.ip_address}
|
|
</.link>
|
|
<% else %>
|
|
<span class="text-gray-400 dark:text-gray-500">-</span>
|
|
<% end %>
|
|
</td>
|
|
<td class="whitespace-nowrap px-4 py-4 text-right text-sm">
|
|
<%= if ap.device do %>
|
|
<button
|
|
type="button"
|
|
id={"unlink-ap-#{ap.id}"}
|
|
phx-click="unlink_device"
|
|
phx-value-ap-id={ap.id}
|
|
data-confirm={t("Unlink this device from the Preseem access point?")}
|
|
class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
|
|
>
|
|
{t("Unlink")}
|
|
</button>
|
|
<% else %>
|
|
<button
|
|
type="button"
|
|
id={"link-ap-#{ap.id}"}
|
|
phx-click="start_link"
|
|
phx-value-ap-id={ap.id}
|
|
class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
{t("Link")}
|
|
</button>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
<%!-- Inline linking row --%>
|
|
<%= if ap.id == @linking_ap_id do %>
|
|
<tr id={"linking-row-#{ap.id}"} class="bg-indigo-50 dark:bg-indigo-900/20">
|
|
<td colspan="6" class="px-4 py-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex-1">
|
|
<p class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
|
Search for a device to link to "{ap.name}"
|
|
</p>
|
|
<form id="device-search-form" phx-change="search_devices" class="flex gap-2">
|
|
<input
|
|
type="text"
|
|
id="device-search-input"
|
|
name="query"
|
|
value={@device_search}
|
|
placeholder={t("Search by device name or IP...")}
|
|
autocomplete="off"
|
|
phx-debounce="300"
|
|
class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
|
|
/>
|
|
</form>
|
|
|
|
<%= if @search_results != [] do %>
|
|
<div class="mt-2 max-h-48 overflow-y-auto rounded-md border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800">
|
|
<ul class="divide-y divide-gray-200 dark:divide-white/5">
|
|
<li :for={device <- @search_results}>
|
|
<button
|
|
type="button"
|
|
id={"select-device-#{device.id}"}
|
|
phx-click="link_device"
|
|
phx-value-ap-id={ap.id}
|
|
phx-value-device-id={device.id}
|
|
class="flex w-full items-center justify-between px-3 py-2 text-left text-sm hover:bg-gray-50 dark:hover:bg-white/5"
|
|
>
|
|
<span class="font-medium text-gray-900 dark:text-white">
|
|
{device.name || "Unnamed"}
|
|
</span>
|
|
<span class="text-gray-500 dark:text-gray-400">
|
|
{device.ip_address}
|
|
<%= if device.site do %>
|
|
<span class="ml-2 text-xs text-gray-400 dark:text-gray-500">
|
|
{device.site.name}
|
|
</span>
|
|
<% end %>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @device_search != "" and String.length(@device_search) >= 2 and @search_results == [] do %>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
No devices found matching "{@device_search}"
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
id="cancel-link"
|
|
phx-click="cancel_link"
|
|
class="self-start text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
|
>
|
|
{t("Cancel")}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</Layouts.authenticated>
|