97fb279f3a
We have many tables to display resources in our UI, and we keep copying and pasting the same code. Some of these tables also have incorrectly copied styles. When we want to make changes to a table, it requires updating multiple places. The new component will help us solve these issues. We have a similar `kv_data_card` component for displaying resource details, and I find it very useful.
50 lines
1.6 KiB
Plaintext
50 lines
1.6 KiB
Plaintext
<% @page_title = "Virtual Machines" %>
|
|
<div class="auto-refresh hidden" data-interval="10"></div>
|
|
|
|
<% if @vms.count > 0 %>
|
|
<%== render(
|
|
"components/page_header",
|
|
locals: {
|
|
breadcrumbs: [%w[Projects /project], [@project_data[:name], @project_data[:path]], ["Virtual Machines", "#"]],
|
|
right_items: has_project_permission("Vm:create") ? [
|
|
render("components/button", locals: { text: "Create Virtual Machine", link: "vm/create" })
|
|
] : []
|
|
}
|
|
) %>
|
|
|
|
<div class="grid gap-6">
|
|
<%== render(
|
|
"components/table_card",
|
|
locals: {
|
|
headers: ["Name", "Location", "Size", "Storage Size", "State", "IP Address"],
|
|
rows: @vms.map do |vm|
|
|
[
|
|
[
|
|
[vm[:name], {link: @project_data[:path] + vm[:path]}],
|
|
vm[:location],
|
|
vm[:size],
|
|
(vm[:storage_size_gib] > 0) ? "#{vm[:storage_size_gib]} GB" : "-",
|
|
["vm_state_label", {component: { state: vm[:state] }}],
|
|
[vm[:ip4] || vm[:ip6] || "Not assigned yet", {copyable: true}]
|
|
],
|
|
{id: "vm-#{vm[:id]}"}
|
|
]
|
|
end
|
|
}
|
|
) %>
|
|
</div>
|
|
<% else %>
|
|
<%== render(
|
|
"components/empty_state",
|
|
locals: {
|
|
icon: "hero-server-stack",
|
|
title: "No virtual machines",
|
|
description: "You don't have permission to create virtual machines."
|
|
}.merge(has_project_permission("Vm:create") ? {
|
|
description: "Get started by creating a new virtual machine.",
|
|
button_link: "#{@project_data[:path]}/vm/create",
|
|
button_title: "New Virtual Machine"
|
|
} : {})
|
|
) %>
|
|
<% end %>
|