Redesign the mini environment show page

Start introducing some workflow, and simplifying the layout.

Also improve the jobs partial, making it actually show when jobs are
running.

The next step is to run the build as a mini environment job, which
should remove some unnecessary complexity.

1 files changed, 56 insertions, 21 deletions

diff --git a/app/views/mini_environments/show.html.erb b/app/views/mini_environments/show.html.erb
index d680a46..7f3432a 100644
--- a/app/views/mini_environments/show.html.erb
+++ b/app/views/mini_environments/show.html.erb
@@ -27,34 +27,76 @@ License along with the GOV.UK Mini Environment Admin.  If not, see
 </a>
 
 <h1>Name: <%= @mini_environment.name %></h1>
+<br>
 
 <div class="row">
-  <div class="col-md-9">
-    <a class="btn btn-primary btn-lg"
-       href="<%= @mini_environment.backend.signon_url(@mini_environment) %>">
-      View
-    </a>
+  <div class="col-md-3">
+    <% status = @mini_environment.status %>
+
+    <% if status[:running] %>
+      <a class="btn btn-primary btn-lg"
+         href="<%= @mini_environment.backend.signon_url(@mini_environment) %>">
+        View
+      </a>
 
-    <div class="list-group" style="margin-top: 20px;">
       <%= form_with(url: mini_environment_perform_action_path(@mini_environment),
                     local: true,
                     method: "post") do %>
-        <%= submit_tag('Start',
-                       disabled: !@mini_environment.backend_data.present?,
+        <%= submit_tag("Destroy",
                        role: 'button',
-                       class: 'list-group-item btn btn-lg btn-success btn-block')
+                       class: 'btn btn-lg btn-danger')
         %>
       <% end %>
+    <% else %>
       <%= form_with(url: mini_environment_perform_action_path(@mini_environment),
                     local: true,
                     method: "post") do %>
-        <%= submit_tag("Destroy",
+        <%= submit_tag('Start the mini environment',
+                       disabled: !@mini_environment.backend_data.present?,
                        role: 'button',
-                       class: 'list-group-item btn btn-lg btn-danger btn-block',
-                       style: 'margin-top: 5px;')
+                       class: 'btn btn-lg btn-success')
         %>
       <% end %>
-    </div>
+    <% end %>
+  </div>
+  <div class="col-md-9">
+    <% if @mini_environment.backend_data.present? %>
+      <div class="panel panel-default">
+        <div class="panel-heading" role="tab" id="backendDataHeading">
+          <h4 class="panel-title">
+            <a role="button"
+               data-toggle="collapse"
+               class="collapsed"
+               href="#backendData"
+               aria-expanded="true"
+               aria-controls="backendData">
+
+              Mini Environment built successfully
+              <span class="caret"></span>
+            </a>
+          </h4>
+        </div>
+        <div id="backendData"
+             class="panel-collapse collapse in"
+             role="tabpanel"
+             aria-labelledby="backendDataHeading"
+        >
+          <div class="panel-body">
+            <dl class="dl-horizontal">
+              <% @mini_environment.backend_data.each do |(key, value)| %>
+                <dt><%= key %></dt>
+                <dd><pre><%= value %></pre></dd>
+              <% end %>
+            </dl>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render(
+      partial: 'shared/jobs',
+      locals: { jobs: jobs }
+    ) %>
   </div>
 </div>
 
@@ -81,7 +123,7 @@ Plus <%= uncustomised_services.length %> other services at the revision specifie
   <% end %>
 </ul>
 
-<h2>Initial Signon Users</h2>
+<h3>Initial Signon Users</h3>
 
 <table class="table table-bordered table-hover">
   <thead>
@@ -102,10 +144,3 @@ Plus <%= uncustomised_services.length %> other services at the revision specifie
     <% end %>
   </tbody>
 </table>
-
-<h2>Jobs</h2>
-
-<%= render(
-  partial: 'shared/jobs',
-  locals: { jobs: jobs }
-) %>