ubicloud/views/vm/show.erb

<% @page_title = @vm[:name] %>
<% if @vm[:state] != "running" %>
  <div class="auto-refresh hidden" data-interval="10"></div>
<% end %>

<%== render(
  "components/page_header",
  locals: {
    breadcrumbs: [
      %w[Projects /project],
      [@project_data[:name], @project_data[:path]],
      ["Virtual Machines", "#{@project_data[:path]}/vm"],
      [@vm[:name], "#"]
    ],
    left_items: [render("components/vm_state_label", locals: { state: @vm[:state], extra_class: "text-md" })]
  }
) %>

<div class="grid gap-6">
  <!-- Vm Detail Card -->
  <%== render(
    "components/kv_data_card",
    locals: {
      data: [
        ["ID", @vm[:id]],
        ["Name", @vm[:name]],
        ["Location", @vm[:location]],
        ["Size", @vm[:size]],
        ["Storage", (@vm[:storage_size_gib] > 0) ? "#{@vm[:storage_size_gib]} GB" : nil],
        ["IPv4", @vm[:ip4_enabled] ? @vm[:ip4] : "Not enabled", { copyable: @vm[:ip4_enabled] }],
        ["IPv6", @vm[:ip6], { copyable: true }],
        [
          "SSH Command",
          "<span class='bg-slate-100 text-rose-500 font-mono px-2 py-1 rounded'>#{h("ssh -i <PRIVATE_KEY_PATH> #{@vm[:unix_user]}@#{@vm[:ip4] || @vm[:ip6]}")}</span>",
          { escape: false }
        ],
        ["Private IPv4", @vm[:private_ipv4], { copyable: true }],
        ["Private IPv6", @vm[:private_ipv6], { copyable: true }],
        [
          "Private subnet",
          "<a href='#{@project_data[:path]}/location/#{@vm[:location]}/private-subnet/#{@vm[:subnet]}' class='text-rose-500 hover:underline'>#{@vm[:subnet]}</a>",
          { escape: false }
        ]
      ]
    }
  ) %>
  <!-- Firewall Rule List -->
  <%== render(
    "components/table_card",
    locals: {
      title: "Applied Firewall Rules",
      headers: ["Firewall", "CIDR", "Port Range"],
      empty_state: "This VM doesn't have applied firewall",
      rows:
        @vm[:firewalls].flat_map do |fw|
          view_perm = has_permission?("Firewall:view", fw[:id])
          (fw[:firewall_rules] || []).map do |fwr|
            [
              [[fw[:name], view_perm ? { link: @project_data[:path] + fw[:path] } : {}], fwr[:cidr], fwr[:port_range]],
              { id: "firewall-rule-#{fwr[:id]}" }
            ]
          end
        end
    }
  ) %>
  <!-- Danger Zone -->
  <div>
    <div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
      <div class="min-w-0 flex-1">
        <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
          Danger Zone
        </h3>
      </div>
    </div>
    <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
      <!-- Restart Card -->
      <% if has_permission?("Vm:edit", @vm[:id]) %>
        <div class="px-4 py-5 sm:p-6">
          <form action="<%= "#{@project_data[:path]}#{@vm[:path]}/restart" %>" role="form" method="POST">
            <%== csrf_tag("#{@project_data[:path]}#{@vm[:path]}/restart") %>
            <div class="sm:flex sm:items-center sm:justify-between">
              <div>
                <h3 class="text-base font-semibold leading-6 text-gray-900">Restart virtual machine</h3>
                <div class="mt-2 text-sm text-gray-500">
                  <p>This action will restart the virtual machine, causing it to be temporarily offline.</p>
                </div>
              </div>
              <div id="vm-restart-<%=@vm[:id]%>" class="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
                <div class="col-span-12 sm:col-span-2 flex justify-end items-end">
                  <%== render("components/form/submit_button", locals: { text: "Restart", extra_class: "restart-btn" }) %>
                </div>
              </div>
            </div>
          </form>
        </div>
      <% end %>
      <!-- Delete Card -->
      <% if has_permission?("Vm:delete", @vm[:id]) %>
        <div class="px-4 py-5 sm:p-6">
          <div class="sm:flex sm:items-center sm:justify-between">
            <div>
              <h3 class="text-base font-semibold leading-6 text-gray-900">Delete virtual machine</h3>
              <div class="mt-2 text-sm text-gray-500">
                <p>This action will permanently delete this virtual machine. Deleted data cannot be recovered. Use it
                  carefully.</p>
              </div>
            </div>
            <div id="vm-delete-<%=@vm[:id]%>" class="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
              <%== render("components/delete_button", locals: { confirmation: @vm[:name], redirect: "#{@project_data[:path]}/vm" }) %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>