5b7a236f23
I was looking ways to reduce the content we display in our Postgres list page because when long database names are used, the table becomes too wide. I realized this column does not add much value, so we can remove it.
80 lines
3.4 KiB
Plaintext
80 lines
3.4 KiB
Plaintext
<% @page_title = "PostgreSQL Databases" %>
|
|
|
|
<% if @postgres_databases.count > 0 %>
|
|
<%== part(
|
|
"components/page_header",
|
|
breadcrumbs: [%w[Projects /project], [@project_data[:name], @project_data[:path]], ["PostgreSQL Databases", "#"]],
|
|
right_items: [<<-DROPDOWN]
|
|
<div class="group dropdown relative inline-block text-left">
|
|
<div>#{part("components/button", 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">
|
|
#{postgres_flavors.values.map do
|
|
<<-ITEM
|
|
<div class="py-1 hover:bg-gray-50" role="none">
|
|
<a href="#{@project_data[:path]}/postgres/create?flavor=#{it.name}" class="block px-4 py-3 focus:outline-none">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900">#{it.title}</h3>
|
|
<p class="mt-1 text-sm text-gray-500">#{it.description}</p>
|
|
</a>
|
|
</div>
|
|
ITEM
|
|
end.join}
|
|
</div>
|
|
</div>
|
|
DROPDOWN
|
|
) %>
|
|
|
|
<div class="grid gap-6">
|
|
<%== part(
|
|
"components/table_card",
|
|
headers: ["Name", "Compute", "Storage", "Version", "Parent", "Location", "State"],
|
|
rows: @postgres_databases.map do |pg|
|
|
[
|
|
[
|
|
[pg[:name], {link: @project_data[:path] + pg[:path] + "/overview"}],
|
|
[pg[:vm_size]],
|
|
[pg[:storage_size_gib]],
|
|
[pg[:version]],
|
|
[pg[:parent] ? pg[:parent].split("/").last : "", {link: pg[:parent] ? @project_data[:path] + pg[:parent] : ""}],
|
|
pg[:location],
|
|
["pg_state_label", {component: { state: pg[:state] }}]
|
|
],
|
|
{id: "pg-#{pg[:id]}"}
|
|
]
|
|
end
|
|
) %>
|
|
</div>
|
|
<% else %>
|
|
<%== part(
|
|
"components/page_header",
|
|
title: "Create PostgreSQL Database",
|
|
breadcrumbs: [%w[Projects /project], [@project_data[:name], @project_data[:path]], ["PostgreSQL Databases", "#"]]
|
|
) %>
|
|
|
|
<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">
|
|
<% postgres_flavors.values.each do %>
|
|
<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-<%= it.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=<%= it.name %>" class="focus:outline-none">
|
|
<span class="absolute inset-0" aria-hidden="true"></span>
|
|
Create <%= it.title %>
|
|
</a>
|
|
</h3>
|
|
<p class="mt-2 text-sm text-gray-500"><%= it.description %></p>
|
|
</div>
|
|
<span class="pointer-events-none absolute right-6 top-6 text-gray-300 group-hover:text-gray-400">
|
|
<%== part("components/icon", name: "hero-arrow-up-right") %>
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|