ranking: Improve site-admin UI (#52458)

Author: efritz

client/web/src/enterprise/codeintel/ranking/pages/CodeIntelRankingPage.tsx

@@ -5,7 +5,7 @@ import { formatDistance, format, parseISO } from 'date-fns'
 
 import { Timestamp } from '@sourcegraph/branded/src/components/Timestamp'
 import { TelemetryProps, TelemetryService } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { Container, ErrorAlert, LoadingSpinner, PageHeader, H4, H3 } from '@sourcegraph/wildcard'
+import { Container, ErrorAlert, LoadingSpinner, PageHeader, H4, H3, Text } from '@sourcegraph/wildcard'
 
 import { Collapsible } from '../../../../components/Collapsible'
 
@@ -103,31 +103,44 @@ const Summary: FunctionComponent<SummaryProps> = ({ summary, displayGraphKey })
         {displayGraphKey && <H4>Historic ranking calculation ({summary.graphKey})</H4>}
 
         <div className={displayGraphKey ? 'px-4' : ''}>
-            <Progress title="Path Aggregation Process" progress={summary.pathMapperProgress} />
+            <Progress
+                title="Path mapper"
+                subtitle="Reads the paths of SCIP indexes exported for ranking and produce path/zero-count pairs consumed by the ranking phase."
+                progress={summary.pathMapperProgress}
+            />
 
             <Progress
-                title="Reference Aggregation Process"
+                title="Reference count mapper"
+                subtitle="Reads the symbol references of SCIP indexes exported for ranking, join them to exported definitions, and produce definition path/count pairs consumed by the ranking phase."
                 progress={summary.referenceMapperProgress}
                 className="mt-4"
             />
 
             {summary.reducerProgress && (
-                <Progress title="Reducing Process" progress={summary.reducerProgress} className="mt-4" />
+                <Progress
+                    title="Reference count reducer"
+                    subtitle="Sums the references for each definition path produced by the mapping phases and groups them by repository."
+                    progress={summary.reducerProgress}
+                    className="mt-4"
+                />
             )}
         </div>
     </div>
 )
 
 interface ProgressProps {
     title: string
+    subtitle?: string
     progress: Progress
     className?: string
 }
 
-const Progress: FunctionComponent<ProgressProps> = ({ title, progress, className }) => (
+const Progress: FunctionComponent<ProgressProps> = ({ title, subtitle, progress, className }) => (
     <div>
         <div className={classNames(styles.tableContainer, className)}>
             <H4 className="p-0 m-0">{title}</H4>
+            {subtitle && <Text size="small">{subtitle}</Text>}
+
             <div className={styles.row}>
                 <div>Queued records</div>
                 <div>
@@ -140,44 +153,39 @@ const Progress: FunctionComponent<ProgressProps> = ({ title, progress, className
                     )}
                 </div>
             </div>
+
             <div className={styles.row}>
-                <div>Started</div>
+                <div>Progress</div>
                 <div>
-                    {format(parseISO(progress.startedAt), 'MMM d y h:mm:ss a')} (
-                    <Timestamp date={progress.startedAt} />)
+                    {progress.total === 0 ? 100 : Math.floor(((progress.processed / progress.total) * 100 * 100) / 100)}
+                    %
                 </div>
             </div>
+
             <div className={styles.row}>
-                <div>Completed</div>
+                <div>Started</div>
                 <div>
-                    {progress.completedAt ? (
-                        <>
-                            {format(parseISO(progress.completedAt), 'MMM d y h:mm:ss a')} (
-                            <Timestamp date={progress.completedAt} />)
-                        </>
-                    ) : (
-                        '-'
-                    )}
+                    {format(parseISO(progress.startedAt), 'MMM d y h:mm:ss a')} (
+                    <Timestamp date={progress.startedAt} />)
                 </div>
             </div>
-            <div className={styles.row}>
-                <div>Duration</div>
-                <div>
-                    {progress.completedAt && (
-                        <> Ran for {formatDistance(new Date(progress.completedAt), new Date(progress.startedAt))}</>
-                    )}
+
+            {progress.completedAt && (
+                <div className={styles.row}>
+                    <div>Completed</div>
+                    <div>
+                        {format(parseISO(progress.completedAt), 'MMM d y h:mm:ss a')} (
+                        <Timestamp date={progress.completedAt} />)
+                    </div>
                 </div>
-            </div>
+            )}
 
-            <div className={styles.row}>
-                <div>Progress</div>
-                <div>
-                    {progress.processed === 0
-                        ? 100
-                        : Math.floor(((progress.processed / progress.total) * 100 * 100) / 100)}
-                    %
+            {progress.completedAt && (
+                <div className={styles.row}>
+                    <div>Duration</div>
+                    <div>Ran for {formatDistance(new Date(progress.completedAt), new Date(progress.startedAt))}</div>
                 </div>
-            </div>
+            )}
         </div>
     </div>
 )