feat(front): add job status badge (#120)

Author: forestileao

front/lib/front_web/controllers/artifacts_controller.ex

@@ -111,6 +111,11 @@ defmodule FrontWeb.ArtifactsController do
       source_kind = "jobs"
       source_id = job.id
 
+      badge_pollman = %{
+        state: job.state,
+        href: "/jobs/#{job.id}/status_badge"
+      }
+
       block =
         Enum.find(pipeline.blocks, fn block ->
           Enum.any?(block.jobs, fn job -> job.id == source_id end)
@@ -126,6 +131,7 @@ defmodule FrontWeb.ArtifactsController do
             |> Map.put(:workflow_name, hook.commit_message |> String.split("\n") |> hd)
             |> Map.put(:pipeline, pipeline)
             |> Map.put(:block, block)
+            |> Map.put(:badge_pollman, badge_pollman)
             |> Map.put(:title, "Job Artifacts・#{project.name}・#{organization.name}")
             |> Front.Breadcrumbs.Artifacts.construct(conn, source_kind)
 

front/lib/front_web/controllers/job_controller.ex

@@ -103,6 +103,11 @@ defmodule FrontWeb.JobController do
       href: "/jobs/#{job_id}/status"
     }
 
+    badge_pollman = %{
+      state: pollman_state,
+      href: "/jobs/#{conn.assigns.job.id}/status_badge"
+    }
+
     log_state = %{
       dark: memory["logDark"],
       wrap: memory["logWrap"],
@@ -117,6 +122,7 @@ defmodule FrontWeb.JobController do
     assigns =
       %{
         pollman: pollman,
+        badge_pollman: badge_pollman,
         log_state: log_state,
         finished_job: finished_job,
         token: token,
@@ -187,6 +193,22 @@ defmodule FrontWeb.JobController do
     end)
   end
 
+  def status_badge(conn, _params) do
+    pollman_state = extract_state(conn.assigns.job.state)
+
+    badge_pollman = %{
+      state: pollman_state,
+      href: "/jobs/#{conn.assigns.job.id}/status_badge"
+    }
+
+    data = [badge_pollman: badge_pollman]
+
+    conn
+    |> put_view(FrontWeb.JobView)
+    |> put_layout(false)
+    |> render("_status_badge.html", data)
+  end
+
   def stop(conn, _params) do
     Watchman.benchmark("stop.duration", fn ->
       job_id = conn.assigns.job.id

front/lib/front_web/controllers/test_results_controller.ex

@@ -51,10 +51,16 @@ defmodule FrontWeb.TestResultsController do
       {:ok, org} = Async.await(fetch_organization)
       {:ok, {:ok, junit_json_url}} = Async.await(fetch_junit_json_url)
 
+      badge_pollman = %{
+        state: job.state,
+        href: "/jobs/#{job.id}/status_badge"
+      }
+
       assigns = %{
         js: "testResults",
         job_id: job.id,
-        json_artifacts_url: junit_json_url
+        json_artifacts_url: junit_json_url,
+        badge_pollman: badge_pollman
       }
 
       case conn.assigns.authorization do

front/lib/front_web/router.ex

@@ -630,6 +630,7 @@ defmodule FrontWeb.Router do
     # Job Page
     get("/jobs/:id", JobController, :show)
     get("/jobs/:id/status", JobController, :status)
+    get("/jobs/:id/status_badge", JobController, :status_badge)
     get("/jobs/:id/summary", TestResultsController, :job_summary)
     get("/jobs/:id/logs", JobController, :logs)
 

front/lib/front_web/templates/job/_status_badge.html.eex

@@ -0,0 +1,10 @@
+<div
+  class="flex mt1"
+  data-poll-background
+  data-poll-state="<%= @badge_pollman.state %>"
+  data-poll-href="<%= @badge_pollman.href %>"
+>
+  <span class="<%= job_state_color(@job.state) %> white br1 ph2">
+    <%= String.capitalize(@job.state) %>
+  </span>
+</div>

front/lib/front_web/templates/layout/job.html.eex

@@ -46,9 +46,12 @@
     </div>
   </div>
   <div class="flex items-center justify-between mt1 mt2-m mb2 mb3-m">
-    <h1 class="f2 f1-m lh-title mt1 mb0 pr3 truncate">
-      <%= @job.name %>
-    </h1>
+    <div class="flex justify-center items-center">
+      <h1 class="f2 f1-m lh-title mt1 mb0 pr3 truncate">
+        <%= @job.name %>
+      </h1>
+      <%= render FrontWeb.JobView, "_status_badge.html", job: @job, badge_pollman: @badge_pollman %>
+    </div>
     <div class="flex">
       <%= if !assigns[:permissions] or @permissions["project.job.rerun"] do %>
         <%= link "Rerun", to: workflow_path(@conn, :rebuild, @workflow.id), method: :post, class: "btn btn-secondary ml1", "data-tippy-content": "Rerun the parent workflow, including this job" %>

front/lib/front_web/views/job_view.ex

@@ -62,4 +62,10 @@ defmodule FrontWeb.JobView do
       "The job is waiting on #{job.machine_type} quota."
     end
   end
+
+  defp job_state_color("pending"), do: "bg-orange"
+  defp job_state_color("running"), do: "bg-indigo"
+  defp job_state_color("passed"), do: "bg-green"
+  defp job_state_color("failed"), do: "bg-red"
+  defp job_state_color("stopped"), do: "bg-gray"
 end

front/test/front_web/controllers/job_controller_test.exs

@@ -74,4 +74,13 @@ defmodule FrontWeb.JobControllerTest do
       assert html_response(conn, 404) =~ "404"
     end
   end
+
+  describe "status_badge" do
+    test "renders badge", %{conn: conn, job: job} do
+      conn = get(conn, job_path(conn, :status_badge, job.id))
+
+      assert html_response(conn, 200) ==
+               "<div\n  class=\"flex mt1\"\n  data-poll-background\n  data-poll-state=\"poll\"\n  data-poll-href=\"/jobs/job-id/status_badge\"\n>\n  <span class=\"bg-indigo white br1 ph2\">\nRunning\n  </span>\n</div>\n"
+    end
+  end
 end