UI: integrity verification jobs: improve UX

- indicate if volume is not online right now
- show runtime only if viewing historical data
- `text-muted` some less-important info (runtime, size)
- for FAIL show age of the result as well
- by default show volume size for the volume size column (only show scanned size when viewing historical data)

Author: joonas-fi

frontend/pages/VolumesAndMountsPage.tsx

@@ -683,19 +683,21 @@ export default class VolumesAndMountsPage extends React.Component<
 	}
 
 	private renderIvJobs() {
-		const [ivJobs, volumes, loadingOrError] = Result.unwrap2(
+		const [ivJobs, volumes, mounts, loadingOrError] = Result.unwrap3(
 			this.state.ivJobs,
 			this.state.volumes,
+			this.state.mounts,
 		);
 
-		if (!ivJobs || !volumes || loadingOrError) {
+		if (!ivJobs || !volumes || !mounts || loadingOrError) {
 			return loadingOrError;
 		}
 
 		return (
 			<IntegrityVerificationJobsView
 				jobs={ivJobs}
 				volumes={volumes}
+				mounts={mounts}
 				refresh={() => {
 					this.loadIvJobs();
 				}}

frontend/pages/views/IntegrityVerificationJobsView.tsx

@@ -22,13 +22,15 @@ import {
 import {
 	IntegrityVerificationJob,
 	Volume,
+	VolumeMount,
 	VolumeTechnology,
 } from 'generated/stoserver/stoservertypes_types';
 import * as React from 'react';
 
 interface IntegrityVerificationJobsViewProps {
 	volumes: Volume[];
 	jobs: IntegrityVerificationJob[];
+	mounts: VolumeMount[];
 	refresh: () => void;
 }
 
@@ -149,22 +151,35 @@ export default class IntegrityVerificationJobsView extends React.Component<
 			/>
 		);
 
+		const volumeMounted = this.props.mounts.some((m) => m.Volume === vol.Id && m.Online);
+
 		return (
 			<tr key={rowKey}>
 				<td title={job.Id}>{showingHistorical && volumeTechnologyBadge(vol.Technology)}</td>
-				<td>{showingHistorical && vol.Label}</td>
+				<td>
+					{showingHistorical &&
+						(volumeMounted ? (
+							vol.Label
+						) : (
+							<s className="text-muted" title="Volume not online">
+								{vol.Label}
+							</s>
+						))}
+				</td>
 				<td style={{ width: '25%' }}>{jobStatus(job)}</td>
-				<td title={bytesToHumanReadable(bytesPerSecond) + '/s'}>
-					{completed ? (
+				<td title={bytesToHumanReadable(bytesPerSecond) + '/s'} className="text-muted">
+					{completed && showingHistorical ? (
 						formatDistance2(job.Created, completed)
-					) : (
+					) : !completed ? (
 						<span>
 							started <Timestamp ts={job.Created} />
 						</span>
-					)}
+					) : null}
 				</td>
-				<td title={'Volume current size ' + bytesToHumanReadable(vol.BlobSizeTotal)}>
-					Scanned {bytesToHumanReadable(job.BytesScanned)}
+				<td className="text-muted">
+					{showingHistorical
+						? `Scanned ${bytesToHumanReadable(job.BytesScanned)}`
+						: bytesToHumanReadable(vol.BlobSizeTotal)}
 				</td>
 				<td title={'Error count: ' + thousandSeparate(job.ErrorsFound)}>
 					<Glyphicon icon="list-alt" title={job.Report} />
@@ -235,12 +250,16 @@ function jobStatus(job: IntegrityVerificationJob): React.ReactNode {
 	}
 
 	if (anyErrors) {
-		return <DangerLabel>Failed</DangerLabel>;
+		return (
+			<DangerLabel>
+				FAIL <Timestamp ts={completed} />
+			</DangerLabel>
+		);
 	}
 
 	return (
 		<SuccessLabel>
-			Pass <Timestamp ts={completed} />
+			PASS <Timestamp ts={completed} />
 		</SuccessLabel>
 	);
 }