Small UI fixes (#655)

web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx

@@ -21,12 +21,29 @@ const NUM_IN_PAGE = 8;
 export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
   const [page, setPage] = useState(1);
 
+  // figure out if we need to artificially inflate the number of new docs indexed
+  // for the ongoing indexing attempt. This is required since the total number of
+  // docs indexed by a CC Pair is updated before the net new docs for an indexing
+  // attempt. If we don't do this, there is a mismatch between these two numbers
+  // which may confuse users.
+  let newDocsIndexedAdjustment = 0;
+  const sumOfNewDocs = ccPair.index_attempts.reduce(
+    (partialSum, indexAttempt) => partialSum + indexAttempt.new_docs_indexed,
+    0
+  );
+  if (
+    sumOfNewDocs < ccPair.num_docs_indexed &&
+    ccPair.index_attempts[0]?.status === "in_progress"
+  ) {
+    newDocsIndexedAdjustment = ccPair.num_docs_indexed - sumOfNewDocs;
+  }
+
   return (
     <>
       <Table>
         <TableHead>
           <TableRow>
-            <TableHeaderCell>Time</TableHeaderCell>
+            <TableHeaderCell>Time Started</TableHeaderCell>
             <TableHeaderCell>Status</TableHeaderCell>
             <TableHeaderCell>Num New Docs</TableHeaderCell>
             <TableHeaderCell>Error Msg</TableHeaderCell>
@@ -35,10 +52,12 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
         <TableBody>
           {ccPair.index_attempts
             .slice(NUM_IN_PAGE * (page - 1), NUM_IN_PAGE * page)
-            .map((indexAttempt) => (
+            .map((indexAttempt, ind) => (
               <TableRow key={indexAttempt.id}>
                 <TableCell>
-                  {localizeAndPrettify(indexAttempt.time_updated)}
+                  {indexAttempt.time_started
+                    ? localizeAndPrettify(indexAttempt.time_started)
+                    : "-"}
                 </TableCell>
                 <TableCell>
                   <IndexAttemptStatus
@@ -46,7 +65,10 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
                     size="xs"
                   />
                 </TableCell>
-                <TableCell>{indexAttempt.new_docs_indexed}</TableCell>
+                <TableCell>
+                  {indexAttempt.new_docs_indexed +
+                    (page === 1 && ind === 0 ? newDocsIndexedAdjustment : 0)}
+                </TableCell>
                 <TableCell>
                   <Text className="flex flex-wrap whitespace-normal">
                     {indexAttempt.error_msg || "-"}

web/src/app/admin/connector/[ccPairId]/ReIndexButton.tsx

@@ -8,9 +8,11 @@ import { useRouter } from "next/navigation";
 export function ReIndexButton({
   connectorId,
   credentialId,
+  isDisabled,
 }: {
   connectorId: number;
   credentialId: number;
+  isDisabled: boolean;
 }) {
   const router = useRouter();
   const { popup, setPopup } = usePopup();
@@ -37,6 +39,12 @@ export function ReIndexButton({
           }
           router.refresh();
         }}
+        disabled={isDisabled}
+        tooltip={
+          isDisabled
+            ? "Connector must be active in order to run indexing"
+            : undefined
+        }
       >
         Run Indexing
       </Button>

web/src/app/admin/connector/[ccPairId]/page.tsx

@@ -4,7 +4,7 @@ import { getErrorMsg } from "@/lib/fetchUtils";
 import { HealthCheckBanner } from "@/components/health/healthcheck";
 import { CCPairStatus } from "@/components/Status";
 import { BackButton } from "@/components/BackButton";
-import { Button, Divider, Title } from "@tremor/react";
+import { Divider, Title } from "@tremor/react";
 import { IndexingAttemptsTable } from "./IndexingAttemptsTable";
 import { Text } from "@tremor/react";
 import { ConfigDisplay } from "./ConfigDisplay";
@@ -13,6 +13,7 @@ import { DeletionButton } from "./DeletionButton";
 import { SSRAutoRefresh } from "@/components/SSRAutoRefresh";
 import { ErrorCallout } from "@/components/ErrorCallout";
 import { ReIndexButton } from "./ReIndexButton";
+import { isCurrentlyDeleting } from "@/lib/documentDeletion";
 
 export default async function Page({
   params,
@@ -34,9 +35,7 @@ export default async function Page({
 
   const ccPair = (await ccPairResponse.json()) as CCPairFullInfo;
   const lastIndexAttempt = ccPair.index_attempts[0];
-  const isDeleting =
-    ccPair?.latest_deletion_attempt?.status === "PENDING" ||
-    ccPair?.latest_deletion_attempt?.status === "STARTED";
+  const isDeleting = isCurrentlyDeleting(ccPair.latest_deletion_attempt);
 
   return (
     <>
@@ -82,6 +81,7 @@ export default async function Page({
             <ReIndexButton
               connectorId={ccPair.connector.id}
               credentialId={ccPair.credential.id}
+              isDisabled={ccPair.connector.disabled}
             />
           </div>
 

web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx

@@ -16,6 +16,7 @@ import { ConnectorIndexingStatus } from "@/lib/types";
 import { ConnectorTitle } from "@/components/admin/connectors/ConnectorTitle";
 import { getDocsProcessedPerMinute } from "@/lib/indexAttempt";
 import Link from "next/link";
+import { isCurrentlyDeleting } from "@/lib/documentDeletion";
 
 const NUM_IN_PAGE = 20;
 
@@ -29,7 +30,7 @@ function CCPairIndexingStatusDisplay({
       <CCPairStatus
         status="not_started"
         disabled={true}
-        isDeleting={ccPairsIndexingStatus?.deletion_attempt !== null}
+        isDeleting={isCurrentlyDeleting(ccPairsIndexingStatus.deletion_attempt)}
       />
     );
   }
@@ -72,10 +73,14 @@ export function CCPairIndexingStatusTable({
   ccPairsIndexingStatuses: ConnectorIndexingStatus<any, any>[];
 }) {
   const [page, setPage] = useState(1);
+  const ccPairsIndexingStatusesForPage = ccPairsIndexingStatuses.slice(
+    NUM_IN_PAGE * (page - 1),
+    NUM_IN_PAGE * page
+  );
 
   return (
     <div className="dark">
-      <Table>
+      <Table className="overflow-visible">
         <TableHead>
           <TableRow>
             <TableHeaderCell>Connector</TableHeaderCell>
@@ -85,40 +90,40 @@ export function CCPairIndexingStatusTable({
           </TableRow>
         </TableHead>
         <TableBody>
-          {ccPairsIndexingStatuses
-            .slice(NUM_IN_PAGE * (page - 1), NUM_IN_PAGE * page)
-            .map((ccPairsIndexingStatus) => {
-              return (
-                <TableRow
-                  key={ccPairsIndexingStatus.cc_pair_id}
-                  className="hover:bg-gradient-to-r hover:from-gray-800 hover:to-indigo-950 cursor-pointer relative"
-                >
-                  <TableCell className="whitespace-normal">
-                    <ConnectorTitle
-                      connector={ccPairsIndexingStatus.connector}
-                      ccPairId={ccPairsIndexingStatus.cc_pair_id}
-                      ccPairName={ccPairsIndexingStatus.name}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    <CCPairIndexingStatusDisplay
-                      ccPairsIndexingStatus={ccPairsIndexingStatus}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    {timeAgo(ccPairsIndexingStatus?.last_success) || "-"}
-                  </TableCell>
-                  <TableCell>{ccPairsIndexingStatus.docs_indexed}</TableCell>
-                  {/* Wrapping in <td> to avoid console warnings */}
-                  <td className="w-0 p-0">
-                    <Link
-                      href={`/admin/connector/${ccPairsIndexingStatus.cc_pair_id}`}
-                      className="absolute w-full h-full left-0"
-                    ></Link>
-                  </td>
-                </TableRow>
-              );
-            })}
+          {ccPairsIndexingStatusesForPage.map((ccPairsIndexingStatus) => {
+            return (
+              <TableRow
+                key={ccPairsIndexingStatus.cc_pair_id}
+                className={
+                  "hover:bg-gradient-to-r hover:from-gray-800 hover:to-indigo-950 cursor-pointer relative"
+                }
+              >
+                <TableCell className="whitespace-normal break-all">
+                  <ConnectorTitle
+                    connector={ccPairsIndexingStatus.connector}
+                    ccPairId={ccPairsIndexingStatus.cc_pair_id}
+                    ccPairName={ccPairsIndexingStatus.name}
+                  />
+                </TableCell>
+                <TableCell>
+                  <CCPairIndexingStatusDisplay
+                    ccPairsIndexingStatus={ccPairsIndexingStatus}
+                  />
+                </TableCell>
+                <TableCell>
+                  {timeAgo(ccPairsIndexingStatus?.last_success) || "-"}
+                </TableCell>
+                <TableCell>{ccPairsIndexingStatus.docs_indexed}</TableCell>
+                {/* Wrapping in <td> to avoid console warnings */}
+                <td className="w-0 p-0">
+                  <Link
+                    href={`/admin/connector/${ccPairsIndexingStatus.cc_pair_id}`}
+                    className="absolute w-full h-full left-0"
+                  ></Link>
+                </td>
+              </TableRow>
+            );
+          })}
         </TableBody>
       </Table>
       {ccPairsIndexingStatuses.length > NUM_IN_PAGE && (

web/src/components/HoverPopup.tsx

@@ -27,7 +27,7 @@ export const HoverPopup = ({
 
   return (
     <div
-      className="relative flex z-30"
+      className="relative flex z-20"
       onMouseEnter={() => {
         setHovered(true);
       }}

web/src/components/Status.tsx

@@ -105,7 +105,7 @@ export function CCPairStatus({
   } else {
     badge = (
       <Badge size={size} color="green" icon={FiCheckCircle}>
-        Running
+        Active
       </Badge>
     );
   }

web/src/lib/documentDeletion.ts

@@ -1,4 +1,5 @@
 import { PopupSpec } from "@/components/admin/connectors/Popup";
+import { DeletionAttemptSnapshot } from "./types";
 
 export async function scheduleDeletionJobForConnector(
   connectorId: number,
@@ -47,3 +48,15 @@ export async function deleteCCPair(
   }
   onCompletion();
 }
+
+export function isCurrentlyDeleting(
+  deletionAttempt: DeletionAttemptSnapshot | null
+) {
+  if (!deletionAttempt) {
+    return false;
+  }
+
+  return (
+    deletionAttempt.status === "PENDING" || deletionAttempt.status === "STARTED"
+  );
+}

web/src/lib/utilsSS.ts

@@ -11,7 +11,7 @@ export function buildUrl(path: string) {
 export function fetchSS(url: string, options?: RequestInit) {
   const init = options || {
     credentials: "include",
-    next: { revalidate: 0 },
+    cache: "no-store",
     headers: {
       cookie: cookies()
         .getAll()