refactor(ui): migrate list-table chain to gjs

Author: aklkv

ui/app/components/fs/browser.hbs

@@ -36,9 +36,9 @@
           as |t|
         >
           <t.head>
-            <t.sort-by @prop="Name" @class="is-two-thirds">Name</t.sort-by>
-            <t.sort-by @prop="Size" @class="has-text-right">File Size</t.sort-by>
-            <t.sort-by @prop="ModTime" @class="has-text-right">Last Modified</t.sort-by>
+            <t.sortBy @prop="Name" @class="is-two-thirds">Name</t.sortBy>
+            <t.sortBy @prop="Size" @class="has-text-right">File Size</t.sortBy>
+            <t.sortBy @prop="ModTime" @class="has-text-right">Last Modified</t.sortBy>
           </t.head>
           <t.body as |row|>
             <Fs::DirectoryEntry

ui/app/components/job-page/parts/children.hbs

@@ -45,15 +45,15 @@
         as |t|
       >
         <t.head data-test-jobs-header>
-          <t.sort-by @prop="name">
+          <t.sortBy @prop="name">
             Name
-          </t.sort-by>
-          <t.sort-by @prop="submitTime" data-test-jobs-submit-time-header>
+          </t.sortBy>
+          <t.sortBy @prop="submitTime" data-test-jobs-submit-time-header>
             Submitted At
-          </t.sort-by>
-          <t.sort-by @prop="status">
+          </t.sortBy>
+          <t.sortBy @prop="status">
             Status
-          </t.sort-by>
+          </t.sortBy>
           <th class="is-3">
             Completed Allocations
           </th>

ui/app/components/job-page/parts/task-groups.hbs

@@ -15,27 +15,27 @@
       as |t|
     >
       <t.head>
-        <t.sort-by @prop="name">
+        <t.sortBy @prop="name">
           Name
-        </t.sort-by>
-        <t.sort-by @prop="count">
+        </t.sortBy>
+        <t.sortBy @prop="count">
           Count
-        </t.sort-by>
-        <t.sort-by @prop="queuedOrStartingAllocs" @class="is-3">
+        </t.sortBy>
+        <t.sortBy @prop="queuedOrStartingAllocs" @class="is-3">
           Allocation Status
-        </t.sort-by>
-        <t.sort-by @prop="volumes.length">
+        </t.sortBy>
+        <t.sortBy @prop="volumes.length">
           Volume
-        </t.sort-by>
-        <t.sort-by @prop="reservedCPU">
+        </t.sortBy>
+        <t.sortBy @prop="reservedCPU">
           Reserved CPU
-        </t.sort-by>
-        <t.sort-by @prop="reservedMemory">
+        </t.sortBy>
+        <t.sortBy @prop="reservedMemory">
           Reserved Memory
-        </t.sort-by>
-        <t.sort-by @prop="reservedEphemeralDisk">
+        </t.sortBy>
+        <t.sortBy @prop="reservedEphemeralDisk">
           Reserved Disk
-        </t.sort-by>
+        </t.sortBy>
       </t.head>
       <t.body as |row|>
         <TaskGroupRow

ui/app/components/list-table.gjs

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { hash, concat } from '@ember/helper';
+import { or } from 'ember-truth-helpers';
+import ListTableSortBy from 'nomad-ui/components/list-table/sort-by';
+import ListTableTableBody from 'nomad-ui/components/list-table/table-body';
+import ListTableTableHead from 'nomad-ui/components/list-table/table-head';
+
+export default class ListTable extends Component {
+  // Plan for a future with metadata (e.g., isSelected)
+  get decoratedSource() {
+    return (this.args.source || []).map((row) => ({
+      model: row,
+    }));
+  }
+
+  <template>
+    <table class={{concat "table " (or @class "")}}>
+      {{yield
+        (hash
+          head=ListTableTableHead
+          body=(component ListTableTableBody rows=this.decoratedSource)
+          sortBy=(component
+            ListTableSortBy
+            currentProp=@sortProperty
+            sortDescending=@sortDescending
+          )
+        )
+      }}
+    </table>
+  </template>
+}

ui/app/components/list-table.hbs

@@ -0,0 +1,40 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { concat, hash } from '@ember/helper';
+import Component from '@glimmer/component';
+import SafeLinkTo from 'nomad-ui/components/safe-link-to';
+
+export default class SortBy extends Component {
+  get isActive() {
+    return this.args.currentProp === this.args.prop;
+  }
+
+  get shouldSortDescending() {
+    return !this.isActive || !this.args.sortDescending;
+  }
+
+  <template>
+    <th
+      class={{concat
+        (if @class (concat @class " ") "")
+        "is-selectable "
+        (if this.isActive "is-active " "")
+        (if @sortDescending "desc" "asc")
+      }}
+      title={{@title}}
+    >
+      <SafeLinkTo
+        @query={{hash
+          sortProperty=@prop
+          sortDescending=this.shouldSortDescending
+        }}
+        data-test-sort-by={{@prop}}
+      >
+        {{yield}}
+      </SafeLinkTo>
+    </th>
+  </template>
+}

ui/app/components/list-table.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+const TableBody = <template>
+  <tbody class={{@class}}>
+    {{#each @rows as |row index|}}
+      {{yield row index}}
+    {{/each}}
+  </tbody>
+</template>;
+
+export default TableBody;