import { type ChangeEvent, type FC, type PropsWithChildren, useId } from 'react' import { mdiAlertCircle, mdiCheckCircle, mdiHelp, mdiMoonNew, mdiTimerSand } from '@mdi/js' import classNames from 'classnames' import { timeFormat } from 'd3-time-format' import { SyntaxHighlightedSearchQuery } from '@sourcegraph/branded' import { Badge, Button, ErrorAlert, H3, Icon, Label, LoadingSpinner, Popover, PopoverContent, PopoverTail, PopoverTrigger, } from '@sourcegraph/wildcard' import { type InsightJob, InsightQueueItemState } from '../../../../../graphql-operations' import { formatFilter } from '../job-filters' import styles from './CodeInsightsJobCard.module.scss' const formatDate = timeFormat('%Y-%m-%d %H:%M:%S') interface CodeInsightsJobCardProps { job: InsightJob selected: boolean onSelectChange: (event: ChangeEvent) => void } export const CodeInsightsJobCard: FC = props => { const { selected, job: { insightViewTitle, seriesLabel, seriesSearchQuery, backfillQueueStatus: { state, cost, errors, percentComplete, queuePosition, createdAt, startedAt, completedAt, }, }, onSelectChange, } = props const checkboxId = useId() const details = [ queuePosition !== null && `Queue position: ${queuePosition}`, cost !== null && `Cost: ${cost}`, createdAt !== null && `Created at: ${formatDate(new Date(createdAt))}`, startedAt !== null && `Started at: ${formatDate(new Date(startedAt))}`, completedAt !== null && `Completed at: ${formatDate(new Date(completedAt))}`, ].filter(item => item) return (

{/* eslint-disable-next-line react/forbid-elements */}

{seriesLabel && (

{seriesLabel}

)} From {insightViewTitle} insight

{percentComplete !== null && {percentComplete}% completed} Series query:{' '} {details.length > 0 && {details.join(', ')}}

{formatFilter(state)} {errors && errors.length > 0 && }

) } const Pill: FC> = props => ( ) const StatusIcon: Record = { [InsightQueueItemState.COMPLETED]: mdiCheckCircle, [InsightQueueItemState.FAILED]: mdiAlertCircle, [InsightQueueItemState.NEW]: mdiMoonNew, [InsightQueueItemState.QUEUED]: mdiTimerSand, [InsightQueueItemState.UNKNOWN]: mdiHelp, [InsightQueueItemState.PROCESSING]: '', } const StatusClasses: Record = { [InsightQueueItemState.COMPLETED]: styles.insightJobStateCompleted, [InsightQueueItemState.FAILED]: styles.insightJobStateErrored, [InsightQueueItemState.NEW]: styles.insightJobStateQueued, [InsightQueueItemState.QUEUED]: styles.insightJobStateQueued, [InsightQueueItemState.PROCESSING]: '', [InsightQueueItemState.UNKNOWN]: '', } interface InsightJobStatusProps { status: InsightQueueItemState className?: string } const InsightJobStatusIcon: FC = props => { const { status, className } = props if (status === InsightQueueItemState.PROCESSING) { return } return ( ) } interface InsightJobErrorsProps { errors: string[] } const InsightJobErrors: FC = props => { const { errors } = props return ( Show errors log {errors.map(error => ( ))} ) }