feat(ui): sort workflows

ui/src/pages/certificates/CertificateList.tsx

@@ -171,10 +171,10 @@ const CertificateList = () => {
     run: refreshData,
   } = useRequest(
     () => {
+      const { columnKey: sorterKey, order: sorterOrder } = sorter;
       let sort: string | undefined;
-      if (sorter.columnKey === "expiry") {
-        sort = sorter.order === "ascend" ? "expireAt" : sorter.order === "descend" ? "-expireAt" : "";
-      }
+      sort = sorterKey === "expiry" ? "expireAt" : "";
+      sort = sort && (sorterOrder === "ascend" ? `${sort}` : sorterOrder === "descend" ? `-${sort}` : undefined);
 
       return listCertificates({
         keyword: filters["keyword"] as string,

ui/src/pages/workflows/WorkflowList.tsx

@@ -27,6 +27,9 @@ const WorkflowList = () => {
       state: searchParams.get("state"),
     };
   });
+  const [sorter, setSorter] = useState<ArrayElement<Parameters<NonNullable<TableProps<WorkflowModel>["onChange"]>>[2]>>(() => {
+    return {};
+  });
   const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
   const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 15);
 
@@ -94,6 +97,8 @@ const WorkflowList = () => {
     {
       key: "lastRun",
       title: t("workflow.props.last_run_at"),
+      sorter: true,
+      sortOrder: sorter.columnKey === "lastRun" ? sorter.order : undefined,
       render: (_, record) => {
         return (
           <Flex gap="small">
@@ -165,15 +170,21 @@ const WorkflowList = () => {
     run: refreshData,
   } = useRequest(
     () => {
+      const { columnKey: sorterKey, order: sorterOrder } = sorter;
+      let sort: string | undefined;
+      sort = sorterKey === "lastRun" ? "lastRunTime" : "";
+      sort = sort && (sorterOrder === "ascend" ? `${sort}` : sorterOrder === "descend" ? `-${sort}` : undefined);
+
       return listWorkflows({
         keyword: filters["keyword"] as string,
         enabled: (filters["state"] as string) === "enabled" ? true : (filters["state"] as string) === "disabled" ? false : undefined,
+        sort: sort,
         page: page,
         perPage: pageSize,
       });
     },
     {
-      refreshDeps: [filters, page, pageSize],
+      refreshDeps: [filters, sorter, page, pageSize],
       onSuccess: (res) => {
         setTableData(res.items);
         setTableTotal(res.totalItems);
@@ -381,6 +392,9 @@ const WorkflowList = () => {
           rowClassName="cursor-pointer"
           rowKey={(record) => record.id}
           scroll={{ x: "max(100%, 960px)" }}
+          onChange={(_, __, sorter) => {
+            setSorter(Array.isArray(sorter) ? sorter[0] : sorter);
+          }}
           onRow={(record) => ({
             onClick: () => {
               handleRecordDetailClick(record);

ui/src/repository/certificate.ts

@@ -28,6 +28,7 @@ export const list = async (request: ListRequest) => {
 
   const page = request.page || 1;
   const perPage = request.perPage || 10;
+
   return pb.collection(COLLECTION_NAME_CERTIFICATE).getList<CertificateModel>(page, perPage, {
     expand: "workflowId",
     filter: filters.join(" && "),

ui/src/repository/workflow.ts

@@ -6,6 +6,7 @@ import { COLLECTION_NAME_WORKFLOW, getPocketBase } from "./_pocketbase";
 export type ListRequest = {
   keyword?: string;
   enabled?: boolean;
+  sort?: string;
   page?: number;
   perPage?: number;
 };
@@ -21,11 +22,14 @@ export const list = async (request: ListRequest) => {
     filters.push(pb.filter("enabled={:enabled}", { enabled: request.enabled }));
   }
 
+  const sort = request.sort || "-created";
+
   const page = request.page || 1;
   const perPage = request.perPage || 10;
+
   return await pb.collection(COLLECTION_NAME_WORKFLOW).getList<WorkflowModel>(page, perPage, {
     filter: filters.join(" && "),
-    sort: "-created",
+    sort: sort,
     requestKey: null,
   });
 };