375 lines
17 KiB
Text
375 lines
17 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
>
|
|
<div class="border-b border-gray-200 pb-5 dark:border-white/5">
|
|
<div class="mb-4">
|
|
<.link
|
|
navigate={~p"/orgs/#{@organization.slug}/settings/integrations"}
|
|
class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
|
>
|
|
<.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Integrations
|
|
</.link>
|
|
</div>
|
|
<h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
|
|
{t("Gaiia Entity Mapping")}
|
|
</h1>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
{t("Link Gaiia entities to your Towerops sites and devices. Match suggestions are shown in amber.")}
|
|
</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/gaiia/mapping"}
|
|
class="border-b-2 border-indigo-500 px-1 pb-3 text-sm font-medium text-indigo-600 dark:text-indigo-400"
|
|
>
|
|
{t("Entity Mapping")}
|
|
</.link>
|
|
<.link
|
|
navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"}
|
|
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("Reconciliation")}
|
|
</.link>
|
|
</nav>
|
|
</div>
|
|
|
|
<%!-- Tab navigation --%>
|
|
<div class="mt-6 border-b border-gray-200 dark:border-white/10">
|
|
<nav class="-mb-px flex space-x-8">
|
|
<.link
|
|
id="tab-sites"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping?tab=sites&filter=#{@filter}"
|
|
}
|
|
class={[
|
|
"whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
|
|
if(@tab == "sites",
|
|
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("Network Sites")}
|
|
</.link>
|
|
<.link
|
|
id="tab-devices"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping?tab=devices&filter=#{@filter}"
|
|
}
|
|
class={[
|
|
"whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
|
|
if(@tab == "devices",
|
|
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("Inventory Items")}
|
|
</.link>
|
|
</nav>
|
|
</div>
|
|
|
|
<%!-- Filter tabs --%>
|
|
<div class="mt-4 flex items-center gap-2">
|
|
<.link
|
|
:for={f <- ~w(all mapped unmapped)}
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping?tab=#{@tab}&filter=#{f}"
|
|
}
|
|
class={[
|
|
"rounded-full px-3 py-1 text-xs font-medium",
|
|
if(@filter == f,
|
|
do: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300",
|
|
else:
|
|
"bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10"
|
|
)
|
|
]}
|
|
>
|
|
{String.capitalize(f)}
|
|
</.link>
|
|
</div>
|
|
|
|
<%!-- Content --%>
|
|
<div class="mt-6">
|
|
<%= if @items == [] 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={if(@tab == "sites", do: "hero-map-pin", else: "hero-cpu-chip")}
|
|
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">
|
|
<%= if @tab == "sites" do %>
|
|
{t("No network sites found")}
|
|
<% else %>
|
|
{t("No inventory items found")}
|
|
<% end %>
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
<%= case @filter do %>
|
|
<% "mapped" -> %>
|
|
{t("No mapped entities yet. Sync from Gaiia and link entities below.")}
|
|
<% "unmapped" -> %>
|
|
{t("All entities are mapped.")}
|
|
<% _ -> %>
|
|
{t("No Gaiia data has been synced yet. Enable the Gaiia integration and run a sync.")}
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
<% else %>
|
|
<div class="overflow-hidden 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="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{t("Gaiia ID")}
|
|
</th>
|
|
<%= if @tab == "devices" do %>
|
|
<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("IP Address")}
|
|
</th>
|
|
<% end %>
|
|
<th
|
|
scope="col"
|
|
class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{if @tab == "sites", do: "Linked Site", else: "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 item <- @items do %>
|
|
<tr id={"row-#{item.id}"} class="hover:bg-gray-50 dark:hover:bg-white/5">
|
|
<td class="whitespace-nowrap px-4 py-4 text-sm font-medium text-gray-900 dark:text-white">
|
|
<div class="flex items-center gap-2">
|
|
{item.name || "Unnamed"}
|
|
<%= if Map.has_key?(@suggestions, item.gaiia_id) do %>
|
|
<span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
|
|
<.icon name="hero-light-bulb-mini" class="mr-0.5 h-3 w-3" /> Suggestion
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
</td>
|
|
<td class="whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400">
|
|
{item.gaiia_id}
|
|
</td>
|
|
<%= if @tab == "devices" do %>
|
|
<td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 sm:table-cell">
|
|
{item.ip_address || "-"}
|
|
</td>
|
|
<% end %>
|
|
<td class="whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400">
|
|
<%= if @tab == "sites" and item.site do %>
|
|
<span class="font-medium text-gray-900 dark:text-white">
|
|
{item.site.name}
|
|
</span>
|
|
<% end %>
|
|
<%= if @tab == "devices" and item.device do %>
|
|
<.link
|
|
navigate={~p"/devices/#{item.device.id}"}
|
|
class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
{item.device.name || item.device.ip_address}
|
|
</.link>
|
|
<% end %>
|
|
<%= if (@tab == "sites" and is_nil(item.site_id)) or (@tab == "devices" and is_nil(item.device_id)) do %>
|
|
<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 @tab == "sites" do %>
|
|
<%= if item.site_id do %>
|
|
<button
|
|
type="button"
|
|
id={"unlink-#{item.id}"}
|
|
phx-click="unlink_site"
|
|
phx-value-gaiia-id={item.gaiia_id}
|
|
data-confirm={t("Unlink this site?")}
|
|
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-#{item.id}"}
|
|
phx-click="start_link"
|
|
phx-value-id={item.gaiia_id}
|
|
class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
{t("Link")}
|
|
</button>
|
|
<% end %>
|
|
<% else %>
|
|
<%= if item.device_id do %>
|
|
<button
|
|
type="button"
|
|
id={"unlink-#{item.id}"}
|
|
phx-click="unlink_device"
|
|
phx-value-gaiia-id={item.gaiia_id}
|
|
data-confirm={t("Unlink this device?")}
|
|
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-#{item.id}"}
|
|
phx-click="start_link"
|
|
phx-value-id={item.gaiia_id}
|
|
class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
{t("Link")}
|
|
</button>
|
|
<% end %>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
<%!-- Inline linking row --%>
|
|
<%= if item.gaiia_id == @linking_id do %>
|
|
<tr id={"linking-row-#{item.id}"} class="bg-indigo-50 dark:bg-indigo-900/20">
|
|
<td colspan={if(@tab == "devices", do: "5", else: "4")} 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">
|
|
<%= if @tab == "sites" do %>
|
|
Search for a site to link to "{item.name}"
|
|
<% else %>
|
|
Search for a device to link to "{item.name}"
|
|
<% end %>
|
|
</p>
|
|
<%!-- Show suggestions if available --%>
|
|
<%= if suggestions = @suggestions[item.gaiia_id] do %>
|
|
<div class="mb-3">
|
|
<p class="mb-1 text-xs font-medium text-amber-700 dark:text-amber-400">
|
|
{t("Suggested matches:")}
|
|
</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<%= for suggestion <- suggestions do %>
|
|
<button
|
|
type="button"
|
|
phx-click={
|
|
if(@tab == "sites", do: "link_site", else: "link_device")
|
|
}
|
|
phx-value-gaiia-id={item.gaiia_id}
|
|
phx-value-site-id={
|
|
if(@tab == "sites", do: suggestion.entity.id)
|
|
}
|
|
phx-value-device-id={
|
|
if(@tab == "devices", do: suggestion.entity.id)
|
|
}
|
|
class="inline-flex items-center gap-1 rounded-md border border-amber-300 bg-amber-50 px-2.5 py-1.5 text-xs font-medium text-amber-800 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-300 dark:hover:bg-amber-900/40"
|
|
>
|
|
{suggestion.entity.name}
|
|
<span class="rounded bg-amber-200 px-1 text-amber-700 dark:bg-amber-800 dark:text-amber-300">
|
|
{suggestion.match_type}
|
|
</span>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<form id="search-form" phx-change="search" class="flex gap-2">
|
|
<input
|
|
type="text"
|
|
id="search-input"
|
|
name="query"
|
|
value={@search_query}
|
|
placeholder={
|
|
if(@tab == "sites",
|
|
do: "Search by site name...",
|
|
else: "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={result <- @search_results}>
|
|
<button
|
|
type="button"
|
|
id={"select-#{result.id}"}
|
|
phx-click={
|
|
if(@tab == "sites", do: "link_site", else: "link_device")
|
|
}
|
|
phx-value-gaiia-id={item.gaiia_id}
|
|
phx-value-site-id={if(@tab == "sites", do: result.id)}
|
|
phx-value-device-id={if(@tab == "devices", do: result.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">
|
|
{result.name || "Unnamed"}
|
|
</span>
|
|
<%= if @tab == "devices" do %>
|
|
<span class="text-gray-500 dark:text-gray-400">
|
|
{Map.get(result, :ip_address, "")}
|
|
<%= if site = Map.get(result, :site) do %>
|
|
<span class="ml-2 text-xs text-gray-400 dark:text-gray-500">
|
|
{site.name}
|
|
</span>
|
|
<% end %>
|
|
</span>
|
|
<% end %>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @search_query != "" and String.length(@search_query) >= 2 and @search_results == [] do %>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
No results found matching "{@search_query}"
|
|
</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>
|