ubicloud/views/vm/show.erb

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

<div class="space-y-1">
  <%== render(
    "components/breadcrumb",
    locals: {
      back: "#{@project_data[:path]}/vm",
      parts: [
        %w[Projects /project],
        [@project_data[:name], @project_data[:path]],
        ["Virtual Machines", "#{@project_data[:path]}/vm"],
        [@vm[:name], "#"]
      ]
    }
  ) %>
  <%== render(
    "components/page_header",
    locals: {
      title: @vm[:name],
      right_items: [render("components/vm_state_label", locals: { state: @vm[:state], extra_class: "text-md" })]
    }
  ) %>
</div>
<div class="grid gap-6">
  <!-- 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]}GB"],
        ["IPv4", @vm[:ip4], { copieble: true }],
        ["IPv6", @vm[:ip6], { copieble: 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], { copieble: true }],
        ["Private IPv6", @vm[:private_ipv6], { copieble: 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 Rules Card -->
  <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">
        Applied Firewall Rules
      </h3>
    </div>
  </div>
  <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">Firewall</th>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">CIDR</th>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Port Range</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 bg-white">
        <% @vm[:firewalls].each do |fw| %>
          <% fw[:firewall_rules].each do |fwr| %>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
                <% if Authorization.has_permission?(@current_user.id, "Firewall:view", fw[:id]) %>
                  <a
                    href="<%= "#{@project_data[:path]}/location/#{fw[:location]}/firewall/#{fw[:name]}" %>"
                    class="text-orange-600 hover:text-orange-700"
                  ><%= fw[:name] %></a>
                <% else %>
                  <%= fw[:name] %>
                <% end %>
              </td>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row"><%= fwr[:cidr] %></td>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row"><%= fwr[:port_range] %></td>
            </tr>
          <% end %>
        <% end %>
      </tbody>
    </table>
  </div>
  <!-- Delete Card -->
  <% if Authorization.has_permission?(@current_user.id, "Vm:delete", @vm[:id]) %>
    <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
      <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">
            <button
              type="button"
              data-url="<%= request.path %>"
              data-csrf="<%= csrf_token(request.path, "DELETE") %>"
              data-confirmation="<%= @vm[:name] %>"
              data-redirect="<%= "#{@project_data[:path]}/vm" %>"
              class="delete-btn inline-flex items-center rounded-md bg-rose-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-rose-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-600"
            >
              <%== render("components/icon", locals: { name: "hero-trash", classes: "-ml-0.5 mr-1.5 h-5 w-5" }) %>
              Delete
            </button>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>