ubicloud/views/project/dashboard.erb

<% @page_title = "#{@project.name} Dashboard"

check_perms =
  lambda do |a|
    perm = a[-1]
    perm = has_project_permission(perm) if perm.is_a?(String)
    a[-1] = perm
  end

tiles = [
  ["Virtual Machines", @project.vms_dataset.count, "#{@project.path}/vm", "Vm:create"],
  ["Databases", @project.postgres_resources_dataset.count, "#{@project.path}/postgres", "Postgres:create"],
  [
    "Load Balancers",
    @project.load_balancers_dataset.count,
    "#{@project.path}/load-balancer",
    "LoadBalancer:create"
  ],
  ["Firewalls", @project.firewalls_dataset.count, "#{@project.path}/firewall", "Firewall:create"],
  [
    "GitHub Runners",
    @project.github_runners_dataset.count,
    "#{@project.path}/github",
    ("Project:github" if Config.github_app_name)
  ],
  ["Users", @project.accounts_dataset.count, "#{@project.path}/user", "Project:user"]
]

# Use .each.partition so that hidden rows are shuffled to the end.
# That's done because the visual display if you have missing elements is not good.
# Ideally, we would remove elements without permission instead, but I cannot figure
# out how to make that look good visually using tailwind.
tiles = tiles.each(&check_perms).partition(&:last)

# rubocop:disable Performance/Sum
# Rubocop is stupid here, assuming that elements are numeric, and trying to convert reduce(:+) to sum.
# sum does not work correctly if the elements are arrays.
tiles = tiles.reduce(:+)
# rubocop:enable Performance/Sum

cards = [
  [
    "hero-server-stack",
    "Create Virtual Machine",
    "Linux-based virtual machines that run on top of virtualized hardware. Comprehensive, cost-effective computing.",
    "#{@project.path}/vm/create",
    "Vm:create"
  ],
  [
    "github",
    "Use GitHub Runners",
    "10x cost-effective managed GitHub Actions runners. Install our GitHub app and change one line in your workflow file.",
    "#{@project.path}/github",
    ("Project:github" if Config.github_app_name)
  ],
  [
    "hero-circle-stack",
    "Create Managed Database",
    "Fully managed PostgreSQL database. Handles backup / restore, health monitoring, high availability, and more for you.",
    "#{@project.path}/postgres",
    "Postgres:create"
  ],
  [
    "hero-users",
    "Add User to Project",
    "Get started by adding other users to your project to be able to share resources and collaborate with them.",
    "#{@project.path}/user",
    "Project:user"
  ],
  [
    "hero-arrows-pointing-out",
    "Load Balance Your Traffic",
    "Create a load balancer to distribute your traffic across multiple VMs. Ensure high availability for your apps.",
    "#{@project.path}/load-balancer",
    "LoadBalancer:create"
  ],
  [
    "hero-key",
    "Create Access Token",
    "Create as many personal access tokens as you want and manage your resources programmatically.",
    "#{@project.path}/token",
    "Project:token"
  ],
  [
    "hero-document-text",
    "Documentation",
    "Learn more about our managed services and detailed architecture by exploring our documentation.",
    "https://www.ubicloud.com/docs",
    true
  ],
  [
    "hero-envelope",
    "Get Support",
    "If you need any help with Ubicloud, reach out to our support team for help at support@ubicloud.com.",
    "https://www.ubicloud.com/docs/about/support",
    true
  ]
].select(&check_perms) %>

<%== part("components/page_header", title: "Hi, #{current_account.name}") %>

<div id="tiles" class="grid gap-6">
  <div
    class="mb-5 grid grid-cols-2 divide-x divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow lg:grid-cols-3 xl:grid-cols-6 xl:divide-y-0"
  >
    <% tiles.each do |title, count, link, perm| %>
      <% if perm %>
        <a href="<%= link %>">
          <div class="px-4 py-5 sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-900"><%= title %></dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-orange-600">
              <%= count %></dd>
          </div>
        </a>
      <% else %>
        <div></div>
      <% end %>
    <% end %>
  </div>

  <h2 class="text-xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">Getting Started with your Project</h2>

  <div id="cards" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
    <% cards.each do |icon, title, description, link| %>
      <div
        class="rounded-lg shadow group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-orange-600"
      >
        <div>
          <span class="inline-flex rounded-lg p-3 bg-orange-50 text-orange-700 ring-4 ring-white">
            <%== part("components/icon", name: icon) %>
          </span>
        </div>
        <div class="mt-8">
          <h3 class="text-base font-semibold leading-6 text-gray-900">
            <a href="<%= link %>" class="focus:outline-none">
              <!-- Extend touch target to entire panel -->
              <span class="absolute inset-0" aria-hidden="true"></span>
              <%= 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">
          <%== part("components/icon", name: "hero-arrow-up-right") %>
        </span>
      </div>
    <% end %>
  </div>
</div>