Ordered indexing status (#2292)

web/src/app/admin/configuration/search/UpgradingPage.tsx

@@ -1,9 +1,9 @@
 import { ThreeDotsLoader } from "@/components/Loading";
 import { Modal } from "@/components/Modal";
 import { errorHandlingFetcher } from "@/lib/fetcher";
-import { ConnectorIndexingStatus } from "@/lib/types";
+import { ConnectorIndexingStatus, ValidStatuses } from "@/lib/types";
 import { Button, Text, Title } from "@tremor/react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import useSWR, { mutate } from "swr";
 import { ReindexingProgressTable } from "../../../../components/embedding/ReindexingProgressTable";
 import { ErrorCallout } from "@/components/ErrorCallout";
@@ -48,9 +48,35 @@ export default function UpgradingPage({
     }
     setIsCancelling(false);
   };
+  const statusOrder: Record<ValidStatuses, number> = {
+    failed: 0,
+    completed_with_errors: 1,
+    not_started: 2,
+    in_progress: 3,
+    success: 4,
+  };
+
+  const sortedReindexingProgress = useMemo(() => {
+    return [...(ongoingReIndexingStatus || [])].sort((a, b) => {
+      const statusComparison =
+        statusOrder[a.latest_index_attempt?.status || "not_started"] -
+        statusOrder[b.latest_index_attempt?.status || "not_started"];
+
+      if (statusComparison !== 0) {
+        return statusComparison;
+      }
+
+      return (
+        (a.latest_index_attempt?.id || 0) - (b.latest_index_attempt?.id || 0)
+      );
+    });
+  }, [ongoingReIndexingStatus]);
 
   return (
     <>
+      <button onClick={() => console.log(sortedReindexingProgress)}>
+        click me please
+      </button>
       {isCancelling && (
         <Modal
           onOutsideClick={() => setIsCancelling(false)}
@@ -101,9 +127,9 @@ export default function UpgradingPage({
 
             {isLoadingOngoingReIndexingStatus ? (
               <ThreeDotsLoader />
-            ) : ongoingReIndexingStatus ? (
+            ) : sortedReindexingProgress ? (
               <ReindexingProgressTable
-                reindexingProgress={ongoingReIndexingStatus}
+                reindexingProgress={sortedReindexingProgress}
               />
             ) : (
               <ErrorCallout errorTitle="Failed to fetch re-indexing progress" />

web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import { Text, Button, Callout } from "@tremor/react";
-import { Formik, Form, Field } from "formik";
+import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import { Label, TextFormField } from "@/components/admin/connectors/Field";
 import { LoadingAnimation } from "@/components/Loading";

web/src/components/embedding/ReindexingProgressTable.tsx

@@ -27,10 +27,16 @@ export function ReindexingProgressTable({
       <Table>
         <TableHead>
           <TableRow>
-            <TableHeaderCell>Connector Name</TableHeaderCell>
+            <TableHeaderCell className="w-1/7 sm:w-1/5">
-            <TableHeaderCell>Status</TableHeaderCell>
+              Connector Name
-            <TableHeaderCell>Docs Re-Indexed</TableHeaderCell>
+            </TableHeaderCell>
-            <TableHeaderCell>Error Message</TableHeaderCell>
+            <TableHeaderCell className="w-1/7 sm:w-1/5">Status</TableHeaderCell>
+            <TableHeaderCell className="w-1/7 sm:w-1/5">
+              Docs Re-Indexed
+            </TableHeaderCell>
+            <TableHeaderCell className="w-4/7 sm:w-2/5">
+              Error Message
+            </TableHeaderCell>
           </TableRow>
         </TableHead>
         <TableBody>