Fix ccPair pages crashing

This commit is contained in:
Weves
2023-12-17 23:10:34 -08:00
committed by Chris Weaver
parent 677c32ea79
commit 997f9c3191
3 changed files with 102 additions and 88 deletions

View File

@@ -1,6 +1,6 @@
import { getCCPairSS } from "@/lib/ss/ccPair"; "use client";
import { CCPairFullInfo } from "./types"; import { CCPairFullInfo } from "./types";
import { getErrorMsg } from "@/lib/fetchUtils";
import { HealthCheckBanner } from "@/components/health/healthcheck"; import { HealthCheckBanner } from "@/components/health/healthcheck";
import { CCPairStatus } from "@/components/Status"; import { CCPairStatus } from "@/components/Status";
import { BackButton } from "@/components/BackButton"; import { BackButton } from "@/components/BackButton";
@@ -10,36 +10,42 @@ import { Text } from "@tremor/react";
import { ConfigDisplay } from "./ConfigDisplay"; import { ConfigDisplay } from "./ConfigDisplay";
import { ModifyStatusButtonCluster } from "./ModifyStatusButtonCluster"; import { ModifyStatusButtonCluster } from "./ModifyStatusButtonCluster";
import { DeletionButton } from "./DeletionButton"; import { DeletionButton } from "./DeletionButton";
import { SSRAutoRefresh } from "@/components/SSRAutoRefresh";
import { ErrorCallout } from "@/components/ErrorCallout"; import { ErrorCallout } from "@/components/ErrorCallout";
import { ReIndexButton } from "./ReIndexButton"; import { ReIndexButton } from "./ReIndexButton";
import { isCurrentlyDeleting } from "@/lib/documentDeletion"; import { isCurrentlyDeleting } from "@/lib/documentDeletion";
import { ValidSources } from "@/lib/types"; import { ValidSources } from "@/lib/types";
import useSWR from "swr";
import { errorHandlingFetcher } from "@/lib/fetcher";
import { ThreeDotsLoader } from "@/components/Loading";
// since the uploaded files are cleaned up after some period of time // since the uploaded files are cleaned up after some period of time
// re-indexing will not work for the file connector. Also, it would not // re-indexing will not work for the file connector. Also, it would not
// make sense to re-index, since the files will not have changed. // make sense to re-index, since the files will not have changed.
const CONNECTOR_TYPES_THAT_CANT_REINDEX: ValidSources[] = ["file"]; const CONNECTOR_TYPES_THAT_CANT_REINDEX: ValidSources[] = ["file"];
export default async function Page({ function Main({ ccPairId }: { ccPairId: number }) {
params, const {
}: { data: ccPair,
params: { ccPairId: string }; isLoading,
}) { error,
const ccPairId = parseInt(params.ccPairId); } = useSWR<CCPairFullInfo>(
`/api/manage/admin/cc-pair/${ccPairId}`,
errorHandlingFetcher
);
const ccPairResponse = await getCCPairSS(ccPairId); if (isLoading) {
if (!ccPairResponse.ok) { return <ThreeDotsLoader />;
const errorMsg = await getErrorMsg(ccPairResponse); }
if (error || !ccPair) {
return ( return (
<div className="mx-auto container"> <ErrorCallout
<BackButton /> errorTitle={`Failed to fetch info on Connector with ID ${ccPairId}`}
<ErrorCallout errorTitle={errorMsg} /> errorMsg={error.toString()}
</div> />
); );
} }
const ccPair = (await ccPairResponse.json()) as CCPairFullInfo;
const lastIndexAttempt = ccPair.index_attempts[0]; const lastIndexAttempt = ccPair.index_attempts[0];
const isDeleting = isCurrentlyDeleting(ccPair.latest_deletion_attempt); const isDeleting = isCurrentlyDeleting(ccPair.latest_deletion_attempt);
@@ -55,76 +61,83 @@ export default async function Page({
return ( return (
<> <>
<SSRAutoRefresh /> <BackButton />
<div className="mx-auto container"> <div className="pb-1 flex mt-1">
<div className="mb-4"> <h1 className="text-3xl text-emphasis font-bold">{ccPair.name}</h1>
<HealthCheckBanner />
<div className="ml-auto">
<ModifyStatusButtonCluster ccPair={ccPair} />
</div> </div>
</div>
<BackButton /> <CCPairStatus
<div className="pb-1 flex mt-1"> status={lastIndexAttempt?.status || "not_started"}
<h1 className="text-3xl text-emphasis font-bold">{ccPair.name}</h1> disabled={ccPair.connector.disabled}
isDeleting={isDeleting}
/>
<div className="ml-auto"> <div className="text-sm mt-1">
<ModifyStatusButtonCluster ccPair={ccPair} /> Total Documents Indexed:{" "}
</div> <b className="text-emphasis">{totalDocsIndexed}</b>
</div> </div>
<CCPairStatus <Divider />
status={lastIndexAttempt?.status || "not_started"}
disabled={ccPair.connector.disabled}
isDeleting={isDeleting}
/>
<div className="text-sm mt-1"> <ConfigDisplay
Total Documents Indexed:{" "} connectorSpecificConfig={ccPair.connector.connector_specific_config}
<b className="text-emphasis">{totalDocsIndexed}</b> sourceType={ccPair.connector.source}
</div> />
{/* NOTE: no divider / title here for `ConfigDisplay` since it is optional and we need
<Divider />
<ConfigDisplay
connectorSpecificConfig={ccPair.connector.connector_specific_config}
sourceType={ccPair.connector.source}
/>
{/* NOTE: no divider / title here for `ConfigDisplay` since it is optional and we need
to render these conditionally.*/} to render these conditionally.*/}
<div className="mt-6"> <div className="mt-6">
<div className="flex"> <div className="flex">
<Title>Indexing Attempts</Title> <Title>Indexing Attempts</Title>
{!CONNECTOR_TYPES_THAT_CANT_REINDEX.includes( {!CONNECTOR_TYPES_THAT_CANT_REINDEX.includes(
ccPair.connector.source ccPair.connector.source
) && ( ) && (
<ReIndexButton <ReIndexButton
connectorId={ccPair.connector.id} connectorId={ccPair.connector.id}
credentialId={ccPair.credential.id} credentialId={ccPair.credential.id}
isDisabled={ccPair.connector.disabled} isDisabled={ccPair.connector.disabled}
/> />
)} )}
</div>
<IndexingAttemptsTable ccPair={ccPair} />
</div> </div>
<Divider /> <IndexingAttemptsTable ccPair={ccPair} />
<div className="mt-4">
<Title>Delete Connector</Title>
<Text>
Deleting the connector will also delete all associated documents.
</Text>
<div className="flex mt-16">
<div className="mx-auto">
<DeletionButton ccPair={ccPair} />
</div>
</div>
</div>
{/* TODO: add document search*/}
</div> </div>
<Divider />
<div className="mt-4">
<Title>Delete Connector</Title>
<Text>
Deleting the connector will also delete all associated documents.
</Text>
<div className="flex mt-16">
<div className="mx-auto">
<DeletionButton ccPair={ccPair} />
</div>
</div>
</div>
{/* TODO: add document search*/}
</> </>
); );
} }
export default function Page({ params }: { params: { ccPairId: string } }) {
const ccPairId = parseInt(params.ccPairId);
return (
<div className="mx-auto container">
<div className="mb-4">
<HealthCheckBanner />
</div>
<Main ccPairId={ccPairId} />
</div>
);
}

View File

@@ -8,7 +8,6 @@ export function ErrorCallout({
errorTitle?: string; errorTitle?: string;
errorMsg?: string; errorMsg?: string;
}) { }) {
console.log(errorMsg);
return ( return (
<div> <div>
<Callout <Callout

View File

@@ -3,20 +3,22 @@
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect } from "react"; import { useEffect } from "react";
export function SSRAutoRefresh({ refreshFreq = 5 }: { refreshFreq?: number }) { // NOTE: this is causing crashes due to `ECONNRESET` and `UND_ERR_SOCKET`
// Helper which automatically refreshes a SSR page X seconds // during the server-side fetch. Should not be used until this is resolved.
const router = useRouter(); // export function SSRAutoRefresh({ refreshFreq = 5 }: { refreshFreq?: number }) {
// // Helper which automatically refreshes a SSR page X seconds
// const router = useRouter();
useEffect(() => { // useEffect(() => {
const interval = setInterval(() => { // const interval = setInterval(() => {
router.refresh(); // router.refresh();
}, refreshFreq * 1000); // }, refreshFreq * 1000);
return () => clearInterval(interval); // return () => clearInterval(interval);
}, []); // }, []);
return <></>; // return <></>;
} // }
export function InstantSSRAutoRefresh() { export function InstantSSRAutoRefresh() {
const router = useRouter(); const router = useRouter();