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.

3 files changed, 108 insertions, 46 deletions

diff --git a/app/controllers/mini_environments_controller.rb b/app/controllers/mini_environments_controller.rb
index 05cf558..9b8a16c 100644
--- a/app/controllers/mini_environments_controller.rb
+++ b/app/controllers/mini_environments_controller.rb
@@ -148,7 +148,7 @@ class MiniEnvironmentsController < ApplicationController
       MiniEnvironmentJob.enqueue(@mini_environment.id, :destroy)
 
       flash[:notice] = 'Destroying mini environment'
-    when 'Start'
+    when 'Start the mini environment'
       MiniEnvironmentJob.enqueue(@mini_environment.id, :start)
 
       flash[:notice] = 'Starting mini environment'
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 }
-) %>
diff --git a/app/views/shared/_jobs.html.erb b/app/views/shared/_jobs.html.erb
index 73d59ce..5b559c1 100644
--- a/app/views/shared/_jobs.html.erb
+++ b/app/views/shared/_jobs.html.erb
@@ -4,7 +4,10 @@
      role="tablist"
      aria-multiselectable="true">
 
+  <% job_states = Que.job_states %>
+
   <% jobs.each do |job| %>
+    <% job_state = job_states.find { |x| x[:id] == job.id } %>
 
     <div class="panel panel-default">
       <div class="panel-heading" role="tab" id="jobHeading<%= job.id %>">
@@ -20,14 +23,24 @@
             <span class="caret"></span>
           </a>
           <span class="pull-right">
-            <% if job.instance_of? FinishedTerraformJob %>
-              Job finished at <%= job.created_at %>
+            <% if job.finished_at %>
+              Job finished at <%= job.finished_at %>
             <% else %>
-              <%= job['error_count'] %> failures, retrying next in
-              <%= distance_of_time_in_words_to_now(
-                job.run_at, include_seconds: true
-              ) %>
+              <% if job['error_count'] != 0 %>
+                <%= job['error_count'] %> failures,
+              <% end %>
+              <% if job_state %>
+                running for
+              <% else %>
+                running
+                <% if job['error_count'] != 0 %>again<% end %>
+                in
+              <% end %>
             <% end %>
+
+            <%= distance_of_time_in_words_to_now(
+              job.run_at, include_seconds: true
+            ) %>
           </span>
         </h4>
       </div>
@@ -38,24 +51,38 @@
       >
         <div class="panel-body">
           <div class="row">
-            <div class="col-md-10">
-              <pre><%= job['last_error'] %></pre>
-            </div>
-            <div class="col-md-2">
-              <%= form_with(url: retry_now_que_job_path(job.id)) do %>
-                <%= submit_tag(
-                  'Retry now',
-                  class: 'btn btn-primary btn-lg btn-block'
-                ) %>
-              <% end %>
-              <%= form_with(url: cancel_que_job_path(job.id)) do %>
-                <%= submit_tag(
-                  'Cancel Job',
-                  class: 'btn btn-warning btn-lg btn-block',
-                  style: 'margin-top: 5px;'
-                ) %>
-              <% end %>
-            </div>
+            <% if job_state %>
+              <div class="col-md-10">
+                Running now
+              </div>
+              <div class="col-md-2">
+                PID: <%= job_state[:ruby_pid] %>
+              </div>
+            <% elsif job.finished_at %>
+              <div class="col-md-12">
+                Finished after <%= job['error_count'] %> errors.
+              </div>
+            <% else %>
+              <div class="col-md-10">
+                <pre><%= job.last_error_message %></pre>
+                <pre><%= job.last_error_backtrace %></pre>
+              </div>
+              <div class="col-md-2">
+                <%= form_with(url: retry_now_que_job_path(job.id)) do %>
+                  <%= submit_tag(
+                    'Retry now',
+                    class: 'btn btn-primary btn-lg btn-block'
+                  ) %>
+                <% end %>
+                <%= form_with(url: cancel_que_job_path(job.id)) do %>
+                  <%= submit_tag(
+                    'Cancel',
+                    class: 'btn btn-warning btn-lg btn-block',
+                    style: 'margin-top: 5px;'
+                  ) %>
+                <% end %>
+              </div>
+            <% end %>
           </div>
         </div>
       </div>