[UI] Batches UI Improvements (#14640)

Screenshots should give the main overview of the changes
Questions for reviewers.

Technical:
- [X] Are there any CSS conventions within Hail? I assume I need to
migrate the ad-hoc "style" tags into CSS?
- [X] There still seems to be a bunch of unused space after truncated
batch names. I'm not sure why

UX:
- [x] I've moved the status indicator to the front of the line. Is that
ok?
  - to help with layout within the batch-name box
- to put it in a reliable place (ie not moving around based on how long
the name is)
- [x] I'm not really sure I like the change to Pending. Curious for
others' thoughts

#### Example: Batches page
(layout and columns)

##### Before:
<img width="1735" alt="image"
src="https://github.com/user-attachments/assets/c2966f9a-1802-479f-8fb4-3882a4552fad">

##### After:
<img width="1748" alt="image"
src="https://github.com/user-attachments/assets/4a6a5c5a-23a5-42a4-bc8e-6624f83880fa">

#### Example: Batch Details page
(Renaming confusing 'Pending' field)

##### Before:
<img width="1044" alt="image"
src="https://github.com/user-attachments/assets/ebb3eb52-69d7-44ba-a2c5-f0f219a0b5bb">

##### After:
<img width="1059" alt="image"
src="https://github.com/user-attachments/assets/6fa01eae-567d-49e5-a59e-768bf936a1b1">

Fixes #14628. Adds and shuffles content on the new Batches table

batch/batch/front_end/templates/batch.html

@@ -46,7 +46,7 @@
 
       {% call collapsible_li(true, 'Jobs', batch['n_jobs']) %}
       {{ kv_table({
-      'Pending': batch['n_jobs'] - batch['n_completed'],
+      'Incomplete (Blocked, Queued or Running)': batch['n_jobs'] - batch['n_completed'],
       'Succeeded': batch['n_succeeded'],
       'Failed': batch['n_failed'],
       'Cancelled': batch['n_cancelled']

batch/batch/front_end/templates/batches.html

@@ -1,5 +1,5 @@
 {% from "table_search.html" import table_search with context %}
-{% from "utils.html" import batch_state_indicator, submit_button, link %}
+{% from "utils.html" import batch_state_indicator, submit_button, link, truncated_link %}
 {% extends "layout.html" %}
 {% block title %}Batches{% endblock %}
 {% block head %}
@@ -9,43 +9,42 @@
 <div class='flex-col m-auto w-full space-y-4'>
   <h1 class="text-2xl font-light">Batches</h1>
   {{ table_search("batch-search", base_path ~ "/batches") }}
-  <table class='table-auto w-full' id='batches'>
+  <table class='table-fixed w-full' id='batches'>
     <thead>
-      <th class='h-12 bg-slate-200 font-light text-md text-center rounded-tl rounded-tr md:rounded-tr-none'>
-        ID</th>
-      <th class='h-12 bg-slate-200 font-light text-md rounded-tr text-left md:rounded-tr-none'>Batch
-      </th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Billing Project</th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Job Statuses</th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Duration</th>
-      <th class='h-12 bg-slate-200 font-light text-md text-left hidden md:table-cell rounded-tr'>Cost</th>
+      <th class='h-12 bg-slate-200 font-light text-md rounded-tr text-left md:rounded-tr-none' style='width:1rem'></th>
+      <th class='h-12 bg-slate-200 font-light text-md text-center rounded-tl rounded-tr md:rounded-tr-none' style='width:6rem'>ID</th>
+      <th class='h-12 bg-slate-200 font-light text-md rounded-tr text-left md:rounded-tr-none'>Batch Name</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:8rem'>Billing Project</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:8rem'>Job Statuses</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:12rem'>Created</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:12rem'>Completed</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:8rem'>Duration</th>
+      <th class='h-12 bg-slate-200 font-light text-md text-left hidden md:table-cell rounded-tr' style='width:6rem'>Cost</th>
     </thead>
     <tbody class='border border-collapse border-slate-50'>
       {% for batch in batches %}
       <tr class='border border-collapse hover:bg-slate-100'>
+        <td class='table-cell'>
+            {{ batch_state_indicator(batch) }}
+        </td>
         <td class='table-cell'>
           <div class='flex justify-center font-light'>
             {{ link(base_path ~ "/batches/" ~ batch['id'], batch['id']) }}
           </div>
         </td>
         <td class='table-cell'>
-          <div class='flex-col py-1 block overflow-x-auto'>
-            <div class='flex flex-col space-y-1 md:flex-row md:flex-wrap md:items-center md:space-y-0'>
-              {% if 'attributes' in batch and 'name' in batch['attributes'] %}
-              <div class='text-wrap pr-4'>
-                {{ link(base_path ~ "/batches/" ~ batch['id'], batch['attributes']['name']) }}
-              </div>
-              {% else %}
-              <div class='text-wrap pr-4 text-zinc-400 italic'>
-                {{ link(base_path ~ "/batches/" ~ batch['id'], 'no name') }}
-              </div>
-              {% endif %}
-              {{ batch_state_indicator(batch) }}
+          <div class='space-y-1 md:flex-row md:flex-wrap md:items-center md:space-y-0'>
+            {% if 'attributes' in batch and 'name' in batch['attributes'] %}
+              {{ truncated_link(base_path ~ "/batches/" ~ batch['id'], batch['attributes']['name']) }}
+            {% else %}
+            <div class='text-wrap pr-4 text-zinc-400 italic'>
+              {{ truncated_link(base_path ~ "/batches/" ~ batch['id'], 'no name') }}
             </div>
+            {% endif %}
           </div>
         </td>
         <td class='hidden lg:table-cell'>
-          <div class='font-light text-zinc-500'>{{ batch['billing_project'] }}</div>
+          <div class='font-light text-zinc-500 truncating-text'>{{ batch['billing_project'] }}</div>
         </td>
         <td class='hidden lg:table-cell overflow-hidden'>
           <div class='flex items-center font-light'>
@@ -65,6 +64,12 @@ <h1 class="text-2xl font-light">Batches</h1>
             {{ statuses|join(', ') }}
           </div>
         </td>
+        <td class='hidden lg:table-cell font-light'>
+          {{ batch.get('time_created') or '' }}
+        </td>
+        <td class='hidden lg:table-cell font-light'>
+          {{ batch.get('time_completed') or '--' }}
+        </td>
         <td class='hidden lg:table-cell font-light'>
           {{ batch.get('duration') or '' }}
         </td>

web_common/input.css

@@ -8,3 +8,11 @@
   left: 50vw;
   transform: translate(-50%, -50%);
 }
+
+.truncating-text {
+    text-wrap:nowrap;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+    overflow:hidden;
+    x-overflow: hidden;
+}

web_common/web_common/templates/utils.html

@@ -63,9 +63,13 @@
 
 
 {% macro link(href, text) %}
-<a class='block' href="{{ href }}">
-  <div class='hover:cursor-pointer hover:text-sky-600 hover:underline underline-offset-2'>
-    {{ text }}
-  </div>
+<a class='block hover:cursor-pointer hover:text-sky-600 hover:underline underline-offset-2' href="{{ href }}">
+  {{ text }}
+</a>
+{% endmacro %}
+
+{% macro truncated_link(href, text) %}
+<a class='block hover:cursor-pointer hover:text-sky-600 hover:underline underline-offset-2 truncating-text'  href="{{ href }}">
+  {{ text }}
 </a>
 {% endmacro %}