Redesign the backend show page actions and status reporting

Use panels and list groups to better layout the actions and
status.

2 files changed, 146 insertions, 92 deletions

diff --git a/app/views/backends/terraform_aws/show.html.erb b/app/views/backends/terraform_aws/show.html.erb
index 98034f5..6a576ab 100644
--- a/app/views/backends/terraform_aws/show.html.erb
+++ b/app/views/backends/terraform_aws/show.html.erb
@@ -29,42 +29,89 @@ License along with the GOV.UK Mini Environment Admin.  If not, see
 <h1>Backend: <%= @backend.label %></h1>
 <% status = @backend.status %>
 
+<br>
+
 <div class="row">
-  <div class="col-md-2">
-    <%= form_with(
-      url: perform_action_terraform_aws_backend_path(@backend),
-      local: true,
-      method: "post"
-    ) do %>
-      <%= submit_tag('Deploy',
-                     role: 'button',
-                     class: 'btn btn-lg btn-success')
-      %>
-    <% end %>
+  <div class="col-md-3">
 
-    <%= form_with(
-      url: perform_action_terraform_aws_backend_path(@backend),
-      local: true,
-      method: "post"
-    ) do %>
-      <%= submit_tag("Destroy",
-                     role: 'button',
-                     class: 'btn btn-lg btn-danger')
-      %>
-    <% end %>
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Current Status<br>
+        <small>updated at <%= status[:updated_at] %></small>
+      </div>
+      <div class="panel-body">
+        <% if status[:running] %>
+          <div class="alert alert-success text-center"
+               role="alert"
+               style="margin-bottom: 0px;">
+            Backend available
+          </div>
+        <% else %>
+          <div class="alert alert-warning text-center"
+               role="alert"
+               style="margin-bottom: 0px;">
+            Backend down
+          </div>
+        <% end %>
+
+        <br>
+        <a href="<%= terraform_http_backend_show_history_path(
+                 @backend.terraform_state_id
+                 ) %>">
+          View Terraform state information
+        </a>
+      </div>
+    </div>
 
     <%= form_with(
       url: perform_action_terraform_aws_backend_path(@backend),
       local: true,
       method: "post"
     ) do %>
-      <%= submit_tag("Refresh state",
-                     role: 'button',
-                     class: 'btn btn-lg btn-info')
-      %>
+
+      <div class="panel panel-default">
+        <div class="panel-heading">Actions</div>
+
+        <ul class="list-group">
+          <li class="list-group-item">
+            <%= submit_tag('Deploy',
+                           role: 'button',
+                           style: 'margin-bottom: 5px;',
+                           class: 'btn btn-lg btn-success btn-block')
+            %>
+            <p class="list-group-item-text">
+              Run Terraform to deploy this backend, ensuring everything
+              is setup to create new mini environments.
+            </p>
+          </li>
+          <li class="list-group-item">
+            <%= submit_tag("Destroy",
+                           role: 'button',
+                           style: 'margin-bottom: 5px;',
+                           class: 'btn btn-lg btn-danger btn-block')
+            %>
+            <p class="list-group-item-text">
+              Run Terraform to destroy this backend, note that this will
+              remove all cached data and disrupt all mini environments
+              using this backend.
+            </p>
+          </li>
+          <li class="list-group-item">
+            <%= submit_tag("Refresh state",
+                           role: 'button',
+                           style: 'margin-bottom: 5px;',
+                           class: 'btn btn-lg btn-info btn-block')
+            %>
+            <p class="list-group-item-text">
+              Run Terraform to refresh the state information for this
+              backend.
+            </p>
+          </li>
+        </ul>
+      </div>
     <% end %>
   </div>
-  <div class="col-md-6">
+  <div class="col-md-9">
     <%= render(
       partial: 'shared/jobs',
       locals: {
@@ -72,29 +119,6 @@ License along with the GOV.UK Mini Environment Admin.  If not, see
       }
     ) %>
   </div>
-  <div class="col-md-4">
-
-    <% if status[:running] %>
-      <div class="alert alert-success text-center"
-           role="alert"
-           style="margin-bottom: 0px;">
-        Backend available
-      </div>
-    <% else %>
-      <div class="alert alert-warning text-center"
-           role="alert"
-           style="margin-bottom: 0px;">
-        Backend down
-      </div>
-    <% end %>
-
-    <br>
-    <a href="<%= terraform_http_backend_show_history_path(
-                   @backend.terraform_state_id
-                 ) %>">
-      View detailed Terraform state information
-    </a>
-  </div>
 </div>
 
 <div class="row">
diff --git a/app/views/backends/terraform_libvirt/show.html.erb b/app/views/backends/terraform_libvirt/show.html.erb
index f97b4e2..64a48fc 100644
--- a/app/views/backends/terraform_libvirt/show.html.erb
+++ b/app/views/backends/terraform_libvirt/show.html.erb
@@ -29,42 +29,88 @@ License along with the GOV.UK Mini Environment Admin.  If not, see
 <h1>Backend: <%= @backend.label %></h1>
 <% status = @backend.status %>
 
+<br>
+
 <div class="row">
-  <div class="col-md-2">
-    <%= form_with(url: perform_action_terraform_libvirt_backend_path(
-                         @backend
-                       ),
-                  local: true,
-                  method: "post") do %>
-      <%= submit_tag('Deploy',
-                     role: 'button',
-                     class: 'btn btn-lg btn-success')
-      %>
-    <% end %>
+  <div class="col-md-3">
+
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Current Status<br>
+        <small>updated at <%= status[:updated_at] %></small>
+      </div>
+      <div class="panel-body">
+        <% if status[:running] %>
+          <div class="alert alert-success text-center"
+               role="alert"
+               style="margin-bottom: 0px;">
+            Backend available
+          </div>
+        <% else %>
+          <div class="alert alert-warning text-center"
+               role="alert"
+               style="margin-bottom: 0px;">
+            Backend down
+          </div>
+        <% end %>
+
+        <br>
+        <a href="<%= terraform_http_backend_show_history_path(
+                 @backend.terraform_state_id
+                 ) %>">
+          View Terraform state information
+        </a>
+      </div>
+    </div>
 
     <%= form_with(url: perform_action_terraform_libvirt_backend_path(
                          @backend
                        ),
                   local: true,
                   method: "post") do %>
-      <%= submit_tag("Destroy",
-                     role: 'button',
-                     class: 'btn btn-lg btn-danger')
-      %>
-    <% end %>
-
-    <%= form_with(
-      url: perform_action_terraform_libvirt_backend_path(@backend),
-      local: true,
-      method: "post"
-    ) do %>
-      <%= submit_tag("Refresh state",
-                     role: 'button',
-                     class: 'btn btn-lg btn-info')
-      %>
+      <div class="panel panel-default">
+        <div class="panel-heading">Actions</div>
+
+        <ul class="list-group">
+          <li class="list-group-item">
+            <%= submit_tag('Deploy',
+                           role: 'button',
+                           style: 'margin-bottom: 5px;',
+                           class: 'btn btn-lg btn-success btn-block')
+            %>
+            <p class="list-group-item-text">
+              Run Terraform to deploy this backend, ensuring everything
+              is setup to create new mini environments.
+            </p>
+          </li>
+          <li class="list-group-item">
+            <%= submit_tag("Destroy",
+                           role: 'button',
+                           style: 'margin-bottom: 5px;',
+                           class: 'btn btn-lg btn-danger btn-block')
+            %>
+            <p class="list-group-item-text">
+              Run Terraform to destroy this backend, note that this
+              will disrupt all running mini environments using this
+              backend.
+            </p>
+          </li>
+          <li class="list-group-item">
+            <%= submit_tag("Refresh state",
+                           role: 'button',
+                           style: 'margin-bottom: 5px;',
+                           class: 'btn btn-lg btn-info btn-block')
+            %>
+            <p class="list-group-item-text">
+              Run Terraform to refresh the state information for this
+              backend.
+            </p>
+          </li>
+        </ul>
+      </div>
     <% end %>
   </div>
-  <div class="col-md-6">
+  <div class="col-md-9">
     <%= render(
       partial: 'shared/jobs',
       locals: {
@@ -72,22 +118,6 @@ License along with the GOV.UK Mini Environment Admin.  If not, see
       }
     ) %>
   </div>
-  <div class="col-md-4">
-
-    <% if status[:running] %>
-      <div class="alert alert-success text-center"
-           role="alert"
-           style="margin-bottom: 0px;">
-        Backend available
-      </div>
-    <% else %>
-      <div class="alert alert-warning text-center"
-           role="alert"
-           style="margin-bottom: 0px;">
-        Backend down
-      </div>
-    <% end %>
-  </div>
 </div>
 
 <div class="row">