ubicloud/views/postgres/index.erb

<% @page_title = "PostgreSQL Databases" %>

<%
  flavors = {
    "standard" => ["Ubicloud", "PostgreSQL Database", "Get started by creating a new PostgreSQL database which is managed by Ubicloud team. It's a good choice for general purpose databases."],
    "paradedb" => ["ParadeDB", "ParadeDB PostgreSQL Database", "ParadeDB is an Elasticsearch alternative built on Postgres. ParadeDB instances are managed by the ParadeDB team and are optimal for search and analytics workloads."],
    "lantern" => ["Lantern", "Lantern PostgreSQL Database", "Lantern is a PostgreSQL-based vector database designed specifically for building AI applications. Lantern instances are managed by the Lantern team and are optimal for AI workloads."]
  }.compact
%>

<% if @postgres_databases.count > 0 %>
  <div class="space-y-1">
    <%== render(
      "components/breadcrumb",
      locals: {
        back: @project_data[:path],
        parts: [%w[Projects /project], [@project_data[:name], @project_data[:path]], ["PostgreSQL Databases", "#"]]
      }
    ) %>

    <div class="md:flex md:items-center md:justify-between pb-4 lg:pb-8">
      <div class="min-w-0 flex-1">
        <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">PostgreSQL Databases</h2>
      </div>
      <div class="mt-4 flex md:ml-4 md:mt-0">
        <div class="group dropdown relative inline-block text-left">
          <div>
            <%== render("components/button", locals: { text: "Create PostgreSQL Database", right_icon: "hero-chevron-down" }) %>
          </div>
          <div class="hidden opacity-0 scale-95 group-[.active]:block group-[.active]:opacity-100 group-[.active]:scale-100 transition ease-out duration-100 absolute -right-2 z-10 mt-2 w-72 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" tabindex="-1">
            <% flavors.each do |flavor, (_, title, description)| %>
              <div class="py-1 hover:bg-gray-50" role="none">
                  <a href="<%= @project_data[:path] %>/postgres/create?flavor=<%= flavor %>" class="block px-4 py-3 focus:outline-none">
                    <h3 class="text-base font-semibold leading-6 text-gray-900"><%= title %></h3>
                    <p class="mt-1 text-sm text-gray-500"><%= description %></p>
                  </a>
              </div>
            <% end %>
          </div>
        </div>
        </div>
    </div>
  </div>

  <div class="grid gap-6">
    <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
      <table class="min-w-full divide-y divide-gray-300">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Name</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Managed by</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Location</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">State</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 bg-white">
          <% @postgres_databases.each do |pg| %>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium sm:pl-6" scope="row">
                <a href="<%= @project_data[:path] %><%= pg[:path] %>" class="text-orange-600 hover:text-orange-700">
                  <%= pg[:name] %>
                </a>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                <% (brand, _, _) = flavors[pg[:flavor]] %>
                <div class="inline-flex gap-x-1 items-center">
                  <img src="/icons/pg-<%= brand.downcase %>.png" class="object-cover rounded-lg overflow-hidden w-6 h-6"/>
                  <p><%= brand %></p>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"><%= pg[:location] %></td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                <%== render("components/pg_state_label", locals: { state: pg[:state] }) %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
<% else %>

<div class="space-y-1">
  <%== render(
    "components/breadcrumb",
    locals: {
      back: "#{@project_data[:path]}/postgres",
      parts: [
        %w[Projects /project],
        [@project_data[:name], @project_data[:path]],
        ["PostgreSQL Databases", "#{@project_data[:path]}/postgres"]
      ]
    }
  ) %>

  <%== render("components/page_header", locals: { title: "Create PostgreSQL Database" }) %>
</div>

<div class="grid gap-6">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-10">
    <% flavors.each do |flavor, (brand, title, description)| %>
      <div class="rounded-lg shadow group relative bg-white p-6">
        <div>
          <span class="inline-flex rounded-lg overflow-hidden w-12 h-12">
            <img src="/icons/pg-<%= brand.downcase %>.png" class="object-cover"/>
          </span>
        </div>
        <div class="mt-4">
          <h3 class="text-base font-semibold leading-6 text-gray-900">
            <a href="<%= @project_data[:path] %>/postgres/create?flavor=<%= flavor %>" class="focus:outline-none">
              <span class="absolute inset-0" aria-hidden="true"></span>
              Create <%= title %>
            </a>
          </h3>
          <p class="mt-2 text-sm text-gray-500"><%= description %></p>
        </div>
        <span class="pointer-events-none absolute right-6 top-6 text-gray-300 group-hover:text-gray-400">
          <%== render("components/icon", locals: { name: "hero-arrow-up-right" }) %>
        </span>
      </div>
    <% end %>
  </div>
</div>
<% end %>