Add sorting logic to ReconciledObjects table

weaveworks · Feb 24, 2022 · f0b1c8c · f0b1c8c
1 parent 746b1be
commit f0b1c8c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/ui/components/DataTable.tsx b/ui/components/DataTable.tsx
@@ -73,18 +73,18 @@ const TableButton = styled(Button)`
   }
 `;
 
-type row = any;
+type Row = any;
 
 function defaultSortFunc(sort: Field): Sorter {
-  return (a: row) => {
+  return (a: Row) => {
     return a[sort.value as string];
   };
 }
 
-export const sortWithType = (rows: any[], sort: Field) => {
+export const sortWithType = (rows: Row[], sort: Field) => {
   const sortFn = sort.sortValue || defaultSortFunc(sort);
 
-  return rows.sort((a: row, b: row) => {
+  return rows.sort((a: Row, b: Row) => {
     switch (sort.sortType) {
       case SortType.number:
         return sortFn(a) - sortFn(b);

diff --git a/ui/components/ReconciledObjectsTable.tsx b/ui/components/ReconciledObjectsTable.tsx
@@ -7,8 +7,11 @@ import {
   GroupVersionKind,
   UnstructuredObject,
 } from "../lib/api/core/types.pb";
-import DataTable from "./DataTable";
-import KubeStatusIndicator from "./KubeStatusIndicator";
+import DataTable, { SortType } from "./DataTable";
+import KubeStatusIndicator, {
+  computeMessage,
+  computeReady,
+} from "./KubeStatusIndicator";
 
 type Props = {
   className?: string;
@@ -35,9 +38,11 @@ function ReconciledObjectsTable({
   return (
     <div className={className}>
       <DataTable
-        sortFields={["name", "type", "namespace", "status"]}
         fields={[
-          { value: "name", label: "Name" },
+          {
+            value: "name",
+            label: "Name",
+          },
           {
             label: "Type",
             value: (u: UnstructuredObject) => `${u.groupVersionKind.kind}`,
@@ -52,10 +57,14 @@ function ReconciledObjectsTable({
               u.conditions.length > 0 ? (
                 <KubeStatusIndicator conditions={u.conditions} />
               ) : null,
+            sortType: SortType.bool,
+            sortValue: ({ conditions }) => computeReady(conditions),
           },
           {
             label: "Message",
             value: (u: UnstructuredObject) => _.first(u.conditions)?.message,
+            sortType: SortType.string,
+            sortValue: ({ conditions }) => computeMessage(conditions),
           },
         ]}
         rows={objs}

diff --git a/ui/components/__tests__/DataTable.test.tsx b/ui/components/__tests__/DataTable.test.tsx
@@ -125,15 +125,12 @@ describe("DataTable", () => {
       const rows = [
         {
           name: "b",
-          ok: false,
         },
         {
           name: "c",
-          ok: true,
         },
         {
           name: "a",
-          ok: true,
         },
       ];
 
@@ -142,11 +139,6 @@ describe("DataTable", () => {
           label: "Name",
           value: "name",
         },
-        {
-          label: "OK",
-          value: "ok",
-          sortType: SortType.bool,
-        },
       ];
 
       render(