highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-06-11 00:20:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

Small UI fixes (#655)

Browse Source
This commit is contained in:
Chris Weaver 2023-10-29 23:17:25 -07:00 committed by GitHub
parent 37bba3dbe9
commit 8215a7859a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 95 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,12 +21,29 @@ const NUM_IN_PAGE = 8;
export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) { export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
const [page, setPage] = useState(1); 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 ( return (
<> <>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableHeaderCell>Time</TableHeaderCell> <TableHeaderCell>Time Started</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell> <TableHeaderCell>Status</TableHeaderCell>
<TableHeaderCell>Num New Docs</TableHeaderCell> <TableHeaderCell>Num New Docs</TableHeaderCell>
<TableHeaderCell>Error Msg</TableHeaderCell> <TableHeaderCell>Error Msg</TableHeaderCell>
@ -35,10 +52,12 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
<TableBody> <TableBody>
{ccPair.index_attempts {ccPair.index_attempts
.slice(NUM_IN_PAGE * (page - 1), NUM_IN_PAGE * page) .slice(NUM_IN_PAGE * (page - 1), NUM_IN_PAGE * page)
.map((indexAttempt) => ( .map((indexAttempt, ind) => (
<TableRow key={indexAttempt.id}> <TableRow key={indexAttempt.id}>
<TableCell> <TableCell>
{localizeAndPrettify(indexAttempt.time_updated)} {indexAttempt.time_started
? localizeAndPrettify(indexAttempt.time_started)
: "-"}
</TableCell> </TableCell>
<TableCell> <TableCell>
<IndexAttemptStatus <IndexAttemptStatus
@ -46,7 +65,10 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
size="xs" size="xs"
/> />
</TableCell> </TableCell>
<TableCell>{indexAttempt.new_docs_indexed}</TableCell> <TableCell>
{indexAttempt.new_docs_indexed +
(page === 1 && ind === 0 ? newDocsIndexedAdjustment : 0)}
</TableCell>
<TableCell> <TableCell>
<Text className="flex flex-wrap whitespace-normal"> <Text className="flex flex-wrap whitespace-normal">
{indexAttempt.error_msg || "-"} {indexAttempt.error_msg || "-"}

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

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

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

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

77
web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
View File

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

2
web/src/components/HoverPopup.tsx
View File

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

2
web/src/components/Status.tsx
View File

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

13
web/src/lib/documentDeletion.ts
View File

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

2
web/src/lib/utilsSS.ts
View File

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