import { type FunctionComponent, useMemo } from 'react' import { mdiAlertCircle, mdiCheck, mdiCheckCircle, mdiFileUpload, mdiProgressClock, mdiTimerSand } from '@mdi/js' import classNames from 'classnames' import { Timestamp } from '@sourcegraph/branded/src/components/Timestamp' import { isDefined } from '@sourcegraph/common' import { Card, CardBody, Code, Icon, LoadingSpinner } from '@sourcegraph/wildcard' import { Collapsible } from '../../../../components/Collapsible' import { LogOutput } from '../../../../components/LogOutput' import { Timeline, type TimelineStage } from '../../../../components/Timeline' import { type PreciseIndexFields, PreciseIndexState } from '../../../../graphql-operations' import { formatDurationLong } from '../../../../util/time' import styles from './IndexTimeline.module.scss' export interface IndexTimelineProps { index: PreciseIndexFields now?: () => Date className?: string } export const IndexTimeline: FunctionComponent = ({ index, now, className }) => { const stages = useMemo(() => { const stages: TimelineStage[] = [] // Stage: queued for indexing if (index.queuedAt) { stages.push({ icon: , text: 'Queued for indexing', date: index.queuedAt, className: 'bg-success', }) } // Stage: indexing started if (index.indexingStartedAt) { stages.push({ icon: , text: 'Began indexing', date: index.indexingStartedAt, className: 'bg-success', }) } // Stage: indexing job steps let stage = indexSetupStage(index, now) if (stage) { stages.push(stage) } stage = indexPreIndexStage(index, now) if (stage) { stages.push(stage) } stage = indexIndexStage(index, now) if (stage) { stages.push(stage) } stage = indexUploadStage(index, now) if (stage) { stages.push(stage) } stage = indexTeardownStage(index, now) if (stage) { stages.push(stage) } // Stage: Indexing failed (shown conditionally) // // Do not distinctly show the end of indexing unless it was a failure that produced // to submit an upload record. If we did submit a record, then the end result of this // job is successful to the user (if processing succeeds). if (index.indexingFinishedAt && index.state === PreciseIndexState.INDEXING_ERRORED) { stages.push({ icon: , text: 'Failed indexing', date: index.indexingFinishedAt, className: 'bg-danger', }) } // Stage: Manual upload, or indexing job uploaded artifact if (index.uploadedAt) { if (index.state === PreciseIndexState.UPLOADING_INDEX) { stages.push({ icon: , text: 'Began uploading', date: index.uploadedAt, className: 'bg-success', }) } else if (index.state === PreciseIndexState.PROCESSING_ERRORED) { if (!index.processingStartedAt) { stages.push({ icon: , text: 'Uploading failed', date: index.uploadedAt, className: 'bg-danger', }) } } else { stages.push({ icon: , text: 'Queued for processing', date: index.uploadedAt, className: 'bg-success', }) } } // Stage: Post-upload processing stated if (index.processingStartedAt) { stages.push({ icon: , text: 'Began processing', date: index.processingStartedAt, className: 'bg-success', }) } // Stage: Processing terminated (success or failure) if (index.processingFinishedAt) { if (index.state === PreciseIndexState.PROCESSING_ERRORED) { if (index.processingStartedAt) { stages.push({ icon: , text: 'Failed', date: index.processingFinishedAt, className: 'bg-danger', }) } } else { stages.push({ icon: , text: 'Finished', date: index.processingFinishedAt, className: 'bg-success', }) } } return stages }, [index, now]) return } const indexSetupStage = (index: PreciseIndexFields, now?: () => Date): TimelineStage | undefined => !index.steps || index.steps.setup.length === 0 ? undefined : { text: 'Setup', details: index.steps.setup.map(logEntry => ( )), ...genericStage(index.steps.setup), } const indexPreIndexStage = (index: PreciseIndexFields, now?: () => Date): TimelineStage | undefined => { if (!index.steps) { return undefined } const logEntries = index.steps.preIndex.map(step => step.logEntry).filter(isDefined) return logEntries.length === 0 ? undefined : { text: 'Pre Index', details: index.steps.preIndex.map( step => step.logEntry && (

) ), ...genericStage(logEntries), } } const indexIndexStage = (index: PreciseIndexFields, now?: () => Date): TimelineStage | undefined => !index.steps?.index?.logEntry ? undefined : { text: 'Index', details: ( <> ), ...genericStage(index.steps.index.logEntry), } const indexUploadStage = (index: PreciseIndexFields, now?: () => Date): TimelineStage | undefined => !index?.steps?.upload ? undefined : { text: 'Upload', details: , ...genericStage(index.steps.upload), } const indexTeardownStage = (index: PreciseIndexFields, now?: () => Date): TimelineStage | undefined => !index.steps || index.steps.teardown.length === 0 ? undefined : { text: 'Teardown', details: index.steps.teardown.map(logEntry => ( )), ...genericStage(index.steps.teardown), } const genericStage = ( value: E | E[] ): Pick => { const finished = Array.isArray(value) ? value.every(logEntry => logEntry.exitCode !== null) : value.exitCode !== null const success = Array.isArray(value) ? value.every(logEntry => logEntry.exitCode === 0) : value.exitCode === 0 return { icon: !finished ? ( ) : success ? ( ) : ( ), date: Array.isArray(value) ? value[0].startTime : value.startTime, className: success || !finished ? 'bg-success' : 'bg-danger', expandedByDefault: !(success || !finished), } } interface ExecutionLogEntryProps { logEntry: { key: string command: string[] startTime: string exitCode: number | null out: string durationMilliseconds: number | null } now?: () => Date } const ExecutionLogEntry: React.FunctionComponent> = ({ logEntry, children, now, }) => ( {logEntry.command.length > 0 ? ( ) : (

Internal step {logEntry.key}.

)}

{logEntry.exitCode === null && } {logEntry.exitCode !== null && ( <> {logEntry.exitCode === 0 ? ( ) : ( )} )} Started{' '} {logEntry.exitCode !== null && logEntry.durationMilliseconds !== null && ( <> , ran for{' '} {formatDurationLong(logEntry.durationMilliseconds)} )}

{children}

{logEntry.out ? ( ) : (

No log output available.

)}

) interface ExecutionMetaInformationProps { image: string commands: string[] root: string } const ExecutionMetaInformation: React.FunctionComponent = ({ image, commands, root, }) => (

Image

{image}

Commands

{commands.join(' ')}

Root

/{root}

)