From 2979538d13ddcc4d7e89897caeaddd1e9cd70ea7 Mon Sep 17 00:00:00 2001
From: Jai Bhagat <jaybhagat841@gmail.com>
Date: Mon, 3 Jan 2022 12:04:44 -0500
Subject: [PATCH] chore:  prettify children template

---
 .../components/job-page/parts/children.hbs    | 75 ++++++++++++++-----
 1 file changed, 56 insertions(+), 19 deletions(-)

diff --git a/ui/app/templates/components/job-page/parts/children.hbs b/ui/app/templates/components/job-page/parts/children.hbs
index 4070bfa06..dc6c27517 100644
--- a/ui/app/templates/components/job-page/parts/children.hbs
+++ b/ui/app/templates/components/job-page/parts/children.hbs
@@ -5,7 +5,8 @@
       <LinkTo
         data-test-dispatch-button
         @route="jobs.job.dispatch"
-        class="button is-primary is-compact pull-right">
+        class="button is-primary is-compact pull-right"
+      >
         Dispatch Job
       </LinkTo>
     {{else}}
@@ -14,7 +15,8 @@
         class="button is-disabled is-primary is-compact pull-right tooltip multiline"
         aria-label="You don’t have permission to dispatch jobs"
         disabled
-        type="button">
+        type="button"
+      >
         Dispatch Job
       </button>
     {{/if}}
@@ -25,44 +27,79 @@
     <ListPagination
       @source={{this.sortedChildren}}
       @size={{this.pageSize}}
-      @page={{this.currentPage}} as |p|>
+      @page={{this.currentPage}} as |p|
+    >
       <ListTable
         @source={{p.list}}
         @sortProperty={{this.sortProperty}}
         @sortDescending={{this.sortDescending}}
-        @class="with-foot" as |t|>
+        @class="with-foot" as |t|
+      >
         <t.head data-test-jobs-header>
-          <t.sort-by @prop="name">Name</t.sort-by>
+          <t.sort-by @prop="name">
+            Name
+          </t.sort-by>
           {{#if this.system.shouldShowNamespaces}}
-            <t.sort-by @prop="namespace.name" data-test-jobs-namespace-header>Namespace</t.sort-by>
+            <t.sort-by @prop="namespace.name" data-test-jobs-namespace-header>
+              Namespace
+            </t.sort-by>
           {{/if}}
-          <t.sort-by @prop="submitTime" data-test-jobs-submit-time-header>Submitted At</t.sort-by>
-          <t.sort-by @prop="status">Status</t.sort-by>
-          <t.sort-by @prop="type">Type</t.sort-by>
-          <t.sort-by @prop="priority">Priority</t.sort-by>
-          <th>Groups</th>
-          <th class="is-3">Summary</th>
+          <t.sort-by @prop="submitTime" data-test-jobs-submit-time-header>
+            Submitted At
+          </t.sort-by>
+          <t.sort-by @prop="status">
+            Status
+          </t.sort-by>
+          <t.sort-by @prop="type">
+            Type
+          </t.sort-by>
+          <t.sort-by @prop="priority">
+            Priority
+          </t.sort-by>
+          <th>
+            Groups
+          </th>
+          <th class="is-3">
+            Summary
+          </th>
         </t.head>
         <t.body @key="model.id" as |row|>
-          <JobRow data-test-job-row @job={{row.model}} @context="child" @onClick={{action this.gotoJob row.model}} />
+          <JobRow
+            data-test-job-row
+            @job={{row.model}}
+            @context="child"
+            @onClick={{action this.gotoJob row.model}}
+          />
         </t.body>
       </ListTable>
       <div class="table-foot">
         <PageSizeSelect @onChange={{action this.resetPagination}} />
         <nav class="pagination">
           <div class="pagination-numbers">
-            {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedChildren.length}}
+            {{p.startsAt}}
+            –
+            {{p.endsAt}}
+            of
+            {{this.sortedChildren.length}}
           </div>
-          <p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev>
-          <p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
+          <p.prev @class="pagination-previous">
+            {{x-icon "chevron-left"}}
+          </p.prev>
+          <p.next @class="pagination-next">
+            {{x-icon "chevron-right"}}
+          </p.next>
           <ul class="pagination-list"></ul>
         </nav>
       </div>
     </ListPagination>
   {{else}}
     <div class="empty-message">
-      <h3 class="empty-message-headline">No Job Launches</h3>
-      <p class="empty-message-body">No remaining living job launches.</p>
+      <h3 class="empty-message-headline">
+        No Job Launches
+      </h3>
+      <p class="empty-message-body">
+        No remaining living job launches.
+      </p>
     </div>
   {{/if}}
-</div>
+</div>
\ No newline at end of file