chronoscope/lib/chronoscope_web/live/index_live.html.heex

<div class="overflow-x-auto">
    <table class="mx-auto border-collapse table-auto min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 text-left">
        <thead>
            <tr>
                <th scope="col" class="py-3 px-6 whitespace-nowrap">
                    NTS-KE Server
                </th>
                <th scope="col" class="py-3 px-6 whitespace-nowrap">
                    Status
                </th>
                <th scope="col" class="py-3 px-6 whitespace-nowrap">
                    Algorithm
                </th>
                <th scope="col" class="py-3 px-6 whitespace-nowrap">
                    Cookies
                </th>
                <th scope="col" class="py-3 px-6 whitespace-nowrap">
                    Cookie Length
                </th>
                <th scope="col" class="py-3 px-6 whitespace-nowrap">
                    NTP Host
                </th>
                <th scope="col" class="py-3 px-6 whitespace-nowrap">
                    NTP Port
                </th>
                <th scope="col" class="py-3 px-6 whitespace-nowrap">
                    Certificate Expiration
                </th>
                <th scope="col" class="py-3 px-6 whitespace-nowrap">
                    Last Check
                </th>
            </tr>
        </thead>
        <tbody>
            <tr :for={server <- @servers} class="hover:bg-zinc-100 dark:hover:bg-zinc-700">
                <% {status, response} = server.key_establishment_response %>

                <%= if (status == :ok) do %>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%= server.server.host %>:<%= server.server.port %>
                </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%= status %>
                </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <% aead_algorithm =  Enum.at(response.aead_algorithms, 0) %>

                    <span class="group relative">
                        <%= KeyEstablishmentResponse.aead_algorithm_to_id(aead_algorithm) %>
                        <span class="pointer-events-none absolute -top-9 left-0 w-max p-1 rounded-lg bg-zinc-300 dark:bg-zinc-600 opacity-0 transition-opacity group-hover:opacity-100">
                            <%= aead_algorithm %>
                        </span>
                    </span>
                </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%= length(response.cookies) %>
                </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%= response.cookie_length %>
                </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%= Map.get(response, :server, "-") %>
                </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%= Map.get(response, :port, "-") %>
                </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%= response.cert_expiration |> DateTime.from_iso8601 |> then(fn {:ok, dt, _} -> Calendar.strftime(dt, "%Y-%m-%d %H:%M:%SZ") end)%>
                </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%= server.last_key_establishment  |> Calendar.strftime("%Y-%m-%d %H:%M:%SZ") %>
                </td>

                <% else %>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%= server.server.host %>:<%= server.server.port %>
                </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <span class="group relative">
                        <%= status %>
                        <span class="pointer-events-none absolute -top-9 left-0 w-max p-1 rounded-lg bg-zinc-300 dark:bg-zinc-600 opacity-0 transition-opacity group-hover:opacity-100">
                            <%= response %>
                        </span>
                    </span>
                </td>
                <td class="py-4 px-6 whitespace-nowrap"> - </td>
                <td class="py-4 px-6 whitespace-nowrap"> - </td>
                <td class="py-4 px-6 whitespace-nowrap"> - </td>
                <td class="py-4 px-6 whitespace-nowrap"> - </td>
                <td class="py-4 px-6 whitespace-nowrap"> - </td>
                <td class="py-4 px-6 whitespace-nowrap"> - </td>
                <td class="py-4 px-6 whitespace-nowrap">
                    <%=
                    server.last_key_establishment |> Calendar.strftime("%Y-%m-%d %H:%M:%SZ")
                    %>
                </td>
                <% end %>
            </tr>
        </tbody>
    </table>
</div>