Skip to content

Commit 232cf0a

Browse files
committed
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)
1 parent 3756627 commit 232cf0a

File tree

2 files changed

+32
-11
lines changed

2 files changed

+32
-11
lines changed

frontend/pages/VolumesAndMountsPage.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -683,19 +683,21 @@ export default class VolumesAndMountsPage extends React.Component<
683683
}
684684

685685
private renderIvJobs() {
686-
const [ivJobs, volumes, loadingOrError] = Result.unwrap2(
686+
const [ivJobs, volumes, mounts, loadingOrError] = Result.unwrap3(
687687
this.state.ivJobs,
688688
this.state.volumes,
689+
this.state.mounts,
689690
);
690691

691-
if (!ivJobs || !volumes || loadingOrError) {
692+
if (!ivJobs || !volumes || !mounts || loadingOrError) {
692693
return loadingOrError;
693694
}
694695

695696
return (
696697
<IntegrityVerificationJobsView
697698
jobs={ivJobs}
698699
volumes={volumes}
700+
mounts={mounts}
699701
refresh={() => {
700702
this.loadIvJobs();
701703
}}

frontend/pages/views/IntegrityVerificationJobsView.tsx

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,15 @@ import {
2222
import {
2323
IntegrityVerificationJob,
2424
Volume,
25+
VolumeMount,
2526
VolumeTechnology,
2627
} from 'generated/stoserver/stoservertypes_types';
2728
import * as React from 'react';
2829

2930
interface IntegrityVerificationJobsViewProps {
3031
volumes: Volume[];
3132
jobs: IntegrityVerificationJob[];
33+
mounts: VolumeMount[];
3234
refresh: () => void;
3335
}
3436

@@ -149,22 +151,35 @@ export default class IntegrityVerificationJobsView extends React.Component<
149151
/>
150152
);
151153

154+
const volumeMounted = this.props.mounts.some((m) => m.Volume === vol.Id && m.Online);
155+
152156
return (
153157
<tr key={rowKey}>
154158
<td title={job.Id}>{showingHistorical && volumeTechnologyBadge(vol.Technology)}</td>
155-
<td>{showingHistorical && vol.Label}</td>
159+
<td>
160+
{showingHistorical &&
161+
(volumeMounted ? (
162+
vol.Label
163+
) : (
164+
<s className="text-muted" title="Volume not online">
165+
{vol.Label}
166+
</s>
167+
))}
168+
</td>
156169
<td style={{ width: '25%' }}>{jobStatus(job)}</td>
157-
<td title={bytesToHumanReadable(bytesPerSecond) + '/s'}>
158-
{completed ? (
170+
<td title={bytesToHumanReadable(bytesPerSecond) + '/s'} className="text-muted">
171+
{completed && showingHistorical ? (
159172
formatDistance2(job.Created, completed)
160-
) : (
173+
) : !completed ? (
161174
<span>
162175
started <Timestamp ts={job.Created} />
163176
</span>
164-
)}
177+
) : null}
165178
</td>
166-
<td title={'Volume current size ' + bytesToHumanReadable(vol.BlobSizeTotal)}>
167-
Scanned {bytesToHumanReadable(job.BytesScanned)}
179+
<td className="text-muted">
180+
{showingHistorical
181+
? `Scanned ${bytesToHumanReadable(job.BytesScanned)}`
182+
: bytesToHumanReadable(vol.BlobSizeTotal)}
168183
</td>
169184
<td title={'Error count: ' + thousandSeparate(job.ErrorsFound)}>
170185
<Glyphicon icon="list-alt" title={job.Report} />
@@ -235,12 +250,16 @@ function jobStatus(job: IntegrityVerificationJob): React.ReactNode {
235250
}
236251

237252
if (anyErrors) {
238-
return <DangerLabel>Failed</DangerLabel>;
253+
return (
254+
<DangerLabel>
255+
FAIL <Timestamp ts={completed} />
256+
</DangerLabel>
257+
);
239258
}
240259

241260
return (
242261
<SuccessLabel>
243-
Pass <Timestamp ts={completed} />
262+
PASS <Timestamp ts={completed} />
244263
</SuccessLabel>
245264
);
246265
}

0 commit comments

Comments
 (0)