Commit b099058f authored by Piotr Baj's avatar Piotr Baj 🏡

UI Improvements for machines

- Allow to remove already deleted machines on hypervisor
- Simplify new machine page for users
- Simplify machines views, introduce "Regions"
parent 6cedf40d
......@@ -6,4 +6,158 @@ body {
#main {
flex: 1;
}
.columns.is-stretched {
align-items: stretch;
}
.radio-boxes {
span {
display: block;
}
label {
display: block;
&.box {
height: 100%;
}
}
input[type="radio"]:checked+label {
background: #D0D1CD;
}
}
.plans {
display: block;
background: url(../static/images/plans.png) 0 0 no-repeat;
width: 100px;
height: 100px;
margin: 10px auto;
width: 45px;
height: 31px;
background-position: -398px -185px;
&.compsognathus {
width: 45px;
height: 31px;
background-position: -398px -185px;
}
&.deinonychus {
width: 120px;
height: 52px;
background-position: -234px -165px;
left: 10px;
}
&.triceratops {
width: 171px;
height: 71px;
background-position: -8px -138px;
left: 20px;
}
&.tyrannosaurus {
width: 163px;
height: 95px;
background-position: -292px -33px;
left: 30px;
}
&.diplodocus {
width: 252px;
height: 108.9px;
background-position: -1px -6px;
background-size: 175%
}
}
.distributions {
display: block;
background: url(../static/images/plans.png) 0 0 no-repeat;
width: 100px;
height: 100px;
margin: 10px auto;
&.netbsd {
width: 100px;
height: 81px;
background-position: 0px -217px;
}
&.openbsd {
width: 100px;
height: 81px;
background-position: -100px -217px;
}
&.dragonflybsd {
width: 100px;
height: 81px;
background-position: -200px -217px;
}
&.void {
width: 100px;
height: 81px;
background-position: -300px -217px;
}
&.hardenedbsd {
width: 100px;
height: 81px;
background-position: -400px -217px;
}
&.openindiana {
width: 100px;
height: 81px;
background-position: -400px -298px;
}
&.freebsd {
width: 100px;
height: 81px;
background-position: 0px -298px;
}
&.slackware {
width: 100px;
height: 81px;
background-position: -100px -298px;
}
&.alpine {
width: 100px;
height: 81px;
background-position: -200px -298px;
}
&.minix {
width: 100px;
height: 81px;
background-position: -300px -298px;
}
&.nixos {
width: 100px;
height: 81px;
background-position: 0px -379px;
}
&.hurd {
width: 100px;
height: 81px;
background-position: -100px -379px;
}
&.ubuntu {
width: 100px;
height: 81px;
background-position: -200px -379px;
}
}
\ No newline at end of file
......@@ -45,6 +45,15 @@ module.exports = (env, options) => ({
outputPath: '../fonts/',
}
}]
},
{
test: /\.(jpg|png|gif)$/,
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "../static/images/",
publicPath: "../images/"
}
}
]
},
......
......@@ -103,7 +103,12 @@ defmodule Webapp.Hypervisors.Bhyve do
try do
case webhook_trigger(token, endpoint, payload) do
{:ok, message} -> {:ok, message}
{:error, error} -> {:error, error}
{:error, error} ->
if String.match?(error, ~r/Virtual machine (.*) doesn't exist/) do
{:ok, error}
else
{:error, error}
end
end
rescue
e -> {:error, e.message}
......
......@@ -34,7 +34,7 @@
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<%= for hypervisor <- @hypervisors do %>
<%= link "#{hypervisor.name} hypervisor", to: team_path(:machine_path, @conn, :new, hypervisor), class: "dropdown-item" %>
<%= link "#{hypervisor.name}", to: team_path(:machine_path, @conn, :new, hypervisor), class: "dropdown-item" %>
<% end %>
</div>
</div>
......@@ -49,9 +49,8 @@
<th>Name</th>
<th></th>
<th>Template</th>
<th>Hypervisor</th>
<th>Region</th>
<th>Plan</th>
<th>Networks</th>
</tr>
</thead>
<tbody>
......@@ -65,14 +64,9 @@
</div>
</td>
<td><%= machine.template %></td>
<td><%= link machine.hypervisor.name, to: Routes.admin_hypervisor_path(@conn, :show, machine.hypervisor) %></td>
<td><%= link machine.plan.name, to: Routes.admin_plan_path(@conn, :show, machine.plan) %></td>
<td><%= machine.hypervisor.name %></td>
<td><%= machine.plan.name %></td>
<td><ul>
<%= for network <- machine.networks do %>
<li><%= link "#{network.name} (#{network.network})", to: Routes.admin_network_path(@conn, :show, network) %></li>
<% end %>
</ul></td>
</tr>
<% end %>
<%= if Enum.empty?(@hypervisors) do %>
......
......@@ -29,7 +29,7 @@
<% end %>
<div class="field">
<%= label f, :hypervisor_id, class: "label" %>
<%= label f, "Region", class: "label" %>
<%= hidden_input f, :hypervisor_id, value: @hypervisor.id %>
<div class="item">
<%= @hypervisor.name %>
......@@ -46,28 +46,90 @@
</div>
<div class="field">
<%= label f, :plan_id, class: "label" %>
<div class="select">
<%= select f, :plan_id, plans_select_options(@plans), prompt: "Plan" %>
</div>
<%= label f, :plan_id, class: "label" %>
<div class="columns is-multiline is-centered is-stretched radio-boxes">
<%= for plan <- @plans do %>
<div class="column is-one-third">
<%= radio_button(f, :plan_id, plan.id, id: "plan-#{plan.id}", class: "is-hidden") %>
<label class="box" for="plan-<%= plan.id %>">
<span class="card-image">
<span class="plans <%= String.downcase(plan.name) %>" />
</span>
<span class="title is-5 has-text-centered">
<%= plan.name %>
</span>
<span class="details">
<span>
<strong>Storage:</strong>
<%= plan.storage %> GB
</span>
<span>
<strong>Memory:</strong>
<%= plan.ram %> MB
</span>
<span>
<strong>vCPUs:</strong>
<%= plan.cpu %>
</span>
<span>
<strong>Price:</strong>
$999
</span>
</span>
</label>
</div>
<% end %>
</div>
<%= error_tag f, :plan_id %>
</div>
<div class="field">
<%= label f, :template, class: "label" %>
<div class="select">
<%= select f, :template, ["freebsd": "freebsd", "ubuntu": "ubuntu"], prompt: "Template" %>
<div class="columns radio-boxes">
<%= for {template,name} <- ["freebsd": "FreeBSD 12.0", "ubuntu": "Ubuntu 18.04.01 LTS", "openbsd": "OpenBSD 6.4"] do %>
<div class="column">
<%= radio_button(f, :template, template, id: "template-#{template}", class: "is-hidden") %>
<label class="box" for="template-<%= template %>">
<span class="card-image">
<span class="distributions <%= template %>" />
</span>
<span class="title is-5 has-text-centered">
<%= name %>
</span>
</label>
</div>
<% end %>
</div>
<%= error_tag f, :template %>
</div>
<div class="field">
<%= if @current_user.role == "Administrator" do %>
<div class="field">
<% else %>
<div class="field is-hidden">
<% end %>
<%= label f, :network, class: "label" %>
<div class="select">
<%= select f, :network_ids, networks_select_options(@networks) %>
</div>
<%= error_tag f, :networks %>
</div>
<%= if @current_user.role == "Administrator" do %>
<div class="field">
......@@ -78,7 +140,7 @@
<%= error_tag f, :team_id %>
</div>
<% else %>
<div class="field">
<div class="field is-hidden">
<%= label f, :owner, class: "label" %>
<%= hidden_input f, :team_id, value: @current_team.id %>
<div class="item">
......
......@@ -21,22 +21,13 @@
</li>
<li>
<strong>Hypervisor:</strong>
<%= link @machine.hypervisor.name, to: Routes.admin_hypervisor_path(@conn, :show, @machine.hypervisor) %>
<strong>Region:</strong>
<%= @machine.hypervisor.name %>
</li>
<li>
<strong>Plan:</strong>
<%= link @machine.plan.name, to: Routes.admin_plan_path(@conn, :show, @machine.plan) %>
</li>
<li>
<strong>Networks:</strong>
<ul>
<%= for network <- @machine.networks do %>
<li><%= link "#{network.name} (#{network.network})", to: Routes.admin_network_path(@conn, :show, network) %></li>
<% end %>
</ul>
<%= @machine.plan.name %>
</li>
</ul>
</div>
......@@ -35,7 +35,7 @@
<hr />
<div class="notification">
Enter a name and namespace for your team even if you want to use Runhyve without other people.
Enter a name for your team even if you want to use Runhyve without other people.
</div>
<div class="field">
......@@ -46,7 +46,7 @@
<%= error_tag f, :team_name %>
</div>
<div class="field">
<div class="field is-hidden">
<%= label f, "Team namespace", class: "label" %>
<div class="control">
<%= text_input f, :team_namespace, class: "input", data_slugify: "registration[team_name]" %>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment