jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-27 13:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework system & large drives handling logic

Browse Source 
Change-type: patch
Changelog-entry: Rework system & large drives handling logic
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
This commit is contained in:
Lorenzo Alberto Maria Ambrosi 2020-07-23 14:50:28 +02:00
parent 42838eba09
commit 093008dee7
21 changed files with 826 additions and 737 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
lib/gui/app/components/drive-selector/drive-selector.tsx
View File

@ -16,7 +16,7 @@
import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg'; import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg'; import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
import { scanner, sourceDestination } from 'etcher-sdk'; import * as sourceDestination from 'etcher-sdk/build/source-destination/';
import * as React from 'react'; import * as React from 'react';
import { import {
Flex, Flex,
@ -31,25 +31,22 @@ import styled from 'styled-components';
import { import {
getDriveImageCompatibilityStatuses, getDriveImageCompatibilityStatuses,
hasListDriveImageCompatibilityStatus,
isDriveValid, isDriveValid,
DriveStatus, DriveStatus,
Image, DrivelistDrive,
isDriveSizeLarge,
} from '../../../../shared/drive-constraints'; } from '../../../../shared/drive-constraints';
import { compatibility } from '../../../../shared/messages'; import { compatibility, warning } from '../../../../shared/messages';
import { bytesToClosestUnit } from '../../../../shared/units'; import * as prettyBytes from 'pretty-bytes';
import { getDrives, hasAvailableDrives } from '../../models/available-drives'; import { getDrives, hasAvailableDrives } from '../../models/available-drives';
import { import { getImage, isDriveSelected } from '../../models/selection-state';
getImage,
getSelectedDrives,
isDriveSelected,
} from '../../models/selection-state';
import { store } from '../../models/store'; import { store } from '../../models/store';
import { logEvent, logException } from '../../modules/analytics'; import { logEvent, logException } from '../../modules/analytics';
import { open as openExternal } from '../../os/open-external/services/open-external'; import { open as openExternal } from '../../os/open-external/services/open-external';
import { Modal, ScrollableFlex } from '../../styled-components'; import { Alert, Modal, ScrollableFlex } from '../../styled-components';
import DriveSVGIcon from '../../../assets/tgt.svg'; import DriveSVGIcon from '../../../assets/tgt.svg';
import { SourceMetadata } from '../source-selector/source-selector';
interface UsbbootDrive extends sourceDestination.UsbbootDrive { interface UsbbootDrive extends sourceDestination.UsbbootDrive {
progress: number; progress: number;
@ -64,7 +61,7 @@ interface DriverlessDrive {
linkCTA: string; linkCTA: string;
} }
type Drive = scanner.adapters.DrivelistDrive | DriverlessDrive | UsbbootDrive; type Drive = DrivelistDrive | DriverlessDrive | UsbbootDrive;
function isUsbbootDrive(drive: Drive): drive is UsbbootDrive { function isUsbbootDrive(drive: Drive): drive is UsbbootDrive {
return (drive as UsbbootDrive).progress !== undefined; return (drive as UsbbootDrive).progress !== undefined;
@ -74,37 +71,78 @@ function isDriverlessDrive(drive: Drive): drive is DriverlessDrive {
return (drive as DriverlessDrive).link !== undefined; return (drive as DriverlessDrive).link !== undefined;
} }
function isDrivelistDrive( function isDrivelistDrive(drive: Drive): drive is DrivelistDrive {
drive: Drive, return typeof (drive as DrivelistDrive).size === 'number';
): drive is scanner.adapters.DrivelistDrive {
return typeof (drive as scanner.adapters.DrivelistDrive).size === 'number';
} }
const DrivesTable = styled(({ refFn, ...props }) => { const DrivesTable = styled(({ refFn, ...props }) => (
return ( <div>
<div> <Table<Drive> ref={refFn} {...props} />
<Table<Drive> ref={refFn} {...props} /> </div>
</div> ))`
); [data-display='table-head']
})` > [data-display='table-row']
[data-display='table-head'] [data-display='table-cell'] { > [data-display='table-cell'] {
position: sticky; position: sticky;
top: 0; top: 0;
background-color: ${(props) => props.theme.colors.quartenary.light}; background-color: ${(props) => props.theme.colors.quartenary.light};
input[type='checkbox'] + div {
display: ${({ multipleSelection }) =>
multipleSelection ? 'flex' : 'none'};
}
&:first-child {
padding-left: 15px;
}
&:nth-child(2) {
width: 38%;
}
&:nth-child(3) {
width: 15%;
}
&:nth-child(4) {
width: 15%;
}
&:nth-child(5) {
width: 32%;
}
} }
[data-display='table-cell']:first-child { [data-display='table-body'] > [data-display='table-row'] {
padding-left: 15px; > [data-display='table-cell']:first-child {
} padding-left: 15px;
}
[data-display='table-cell']:last-child { > [data-display='table-cell']:last-child {
width: 150px; padding-right: 0;
}
&[data-highlight='true'] {
&.system {
background-color: ${(props) =>
props.showWarnings ? '#fff5e6' : '#e8f5fc'};
}
> [data-display='table-cell']:first-child {
box-shadow: none;
}
}
} }
&& [data-display='table-row'] > [data-display='table-cell'] { && [data-display='table-row'] > [data-display='table-cell'] {
padding: 6px 8px; padding: 6px 8px;
color: #2a506f; color: #2a506f;
} }
input[type='checkbox'] + div {
border-radius: ${({ multipleSelection }) =>
multipleSelection ? '4px' : '50%'};
}
`; `;
function badgeShadeFromStatus(status: string) { function badgeShadeFromStatus(status: string) {
@ -112,6 +150,7 @@ function badgeShadeFromStatus(status: string) {
case compatibility.containsImage(): case compatibility.containsImage():
return 16; return 16;
case compatibility.system(): case compatibility.system():
case compatibility.tooSmall():
return 5; return 5;
default: default:
return 14; return 14;
@ -147,39 +186,40 @@ const InitProgress = styled(
export interface DriveSelectorProps export interface DriveSelectorProps
extends Omit<ModalProps, 'done' | 'cancel'> { extends Omit<ModalProps, 'done' | 'cancel'> {
multipleSelection?: boolean; multipleSelection: boolean;
showWarnings?: boolean;
cancel: () => void; cancel: () => void;
done: (drives: scanner.adapters.DrivelistDrive[]) => void; done: (drives: DrivelistDrive[]) => void;
titleLabel: string; titleLabel: string;
emptyListLabel: string; emptyListLabel: string;
selectedList?: DrivelistDrive[];
updateSelectedList?: () => DrivelistDrive[];
} }
interface DriveSelectorState { interface DriveSelectorState {
drives: Drive[]; drives: Drive[];
image: Image; image?: SourceMetadata;
missingDriversModal: { drive?: DriverlessDrive }; missingDriversModal: { drive?: DriverlessDrive };
selectedList: scanner.adapters.DrivelistDrive[]; selectedList: DrivelistDrive[];
showSystemDrives: boolean; showSystemDrives: boolean;
} }
function isSystemDrive(drive: Drive) {
return isDrivelistDrive(drive) && drive.isSystem;
}
export class DriveSelector extends React.Component< export class DriveSelector extends React.Component<
DriveSelectorProps, DriveSelectorProps,
DriveSelectorState DriveSelectorState
> { > {
private unsubscribe: (() => void) | undefined; private unsubscribe: (() => void) | undefined;
multipleSelection: boolean = true;
tableColumns: Array<TableColumn<Drive>>; tableColumns: Array<TableColumn<Drive>>;
constructor(props: DriveSelectorProps) { constructor(props: DriveSelectorProps) {
super(props); super(props);
const defaultMissingDriversModalState: { drive?: DriverlessDrive } = {}; const defaultMissingDriversModalState: { drive?: DriverlessDrive } = {};
const selectedList = getSelectedDrives(); const selectedList = this.props.selectedList || [];
const multipleSelection = this.props.multipleSelection;
this.multipleSelection =
multipleSelection !== undefined
? !!multipleSelection
: this.multipleSelection;
this.state = { this.state = {
drives: getDrives(), drives: getDrives(),
@ -194,14 +234,23 @@ export class DriveSelector extends React.Component<
field: 'description', field: 'description',
label: 'Name', label: 'Name',
render: (description: string, drive: Drive) => { render: (description: string, drive: Drive) => {
return isDrivelistDrive(drive) && drive.isSystem ? ( if (isDrivelistDrive(drive)) {
<Flex alignItems="center"> const isLargeDrive = isDriveSizeLarge(drive);
<ExclamationTriangleSvg height="1em" fill="#fca321" /> const hasWarnings =
<Txt ml={8}>{description}</Txt> this.props.showWarnings && (isLargeDrive || drive.isSystem);
</Flex> return (
) : ( <Flex alignItems="center">
<Txt>{description}</Txt> {hasWarnings && (
); <ExclamationTriangleSvg
height="1em"
fill={drive.isSystem ? '#fca321' : '#8f9297'}
/>
)}
<Txt ml={(hasWarnings && 8) || 0}>{description}</Txt>
</Flex>
);
}
return <Txt>{description}</Txt>;
}, },
}, },
{ {
@ -210,7 +259,7 @@ export class DriveSelector extends React.Component<
label: 'Size', label: 'Size',
render: (_description: string, drive: Drive) => { render: (_description: string, drive: Drive) => {
if (isDrivelistDrive(drive) && drive.size !== null) { if (isDrivelistDrive(drive) && drive.size !== null) {
return bytesToClosestUnit(drive.size); return prettyBytes(drive.size);
} }
}, },
}, },
@ -241,21 +290,19 @@ export class DriveSelector extends React.Component<
field: 'description', field: 'description',
key: 'extra', key: 'extra',
// Space as empty string would use the field name as label // Space as empty string would use the field name as label
label: ' ', label: <Txt></Txt>,
render: (_description: string, drive: Drive) => { render: (_description: string, drive: Drive) => {
if (isUsbbootDrive(drive)) { if (isUsbbootDrive(drive)) {
return this.renderProgress(drive.progress); return this.renderProgress(drive.progress);
} else if (isDrivelistDrive(drive)) { } else if (isDrivelistDrive(drive)) {
return this.renderStatuses( return this.renderStatuses(drive);
getDriveImageCompatibilityStatuses(drive, this.state.image),
);
} }
}, },
}, },
]; ];
} }
private driveShouldBeDisabled(drive: Drive, image: any) { private driveShouldBeDisabled(drive: Drive, image?: SourceMetadata) {
return ( return (
isUsbbootDrive(drive) || isUsbbootDrive(drive) ||
isDriverlessDrive(drive) || isDriverlessDrive(drive) ||
@ -275,7 +322,7 @@ export class DriveSelector extends React.Component<
}); });
} }
private getDisabledDrives(drives: Drive[], image: any): string[] { private getDisabledDrives(drives: Drive[], image?: SourceMetadata): string[] {
return drives return drives
.filter((drive) => this.driveShouldBeDisabled(drive, image)) .filter((drive) => this.driveShouldBeDisabled(drive, image))
.map((drive) => drive.displayName); .map((drive) => drive.displayName);
@ -290,14 +337,45 @@ export class DriveSelector extends React.Component<
); );
} }
private renderStatuses(statuses: DriveStatus[]) { private warningFromStatus(
status: string,
drive: { device: string; size: number },
) {
switch (status) {
case compatibility.containsImage():
return warning.sourceDrive();
case compatibility.largeDrive():
return warning.largeDriveSize();
case compatibility.system():
return warning.systemDrive();
case compatibility.tooSmall():
const recommendedDriveSize =
this.state.image?.recommendedDriveSize || this.state.image?.size || 0;
return warning.unrecommendedDriveSize({ recommendedDriveSize }, drive);
}
}
private renderStatuses(drive: DrivelistDrive) {
const statuses: DriveStatus[] = getDriveImageCompatibilityStatuses(
drive,
this.state.image,
).slice(0, 2);
return ( return (
// the column render fn expects a single Element // the column render fn expects a single Element
<> <>
{statuses.map((status) => { {statuses.map((status) => {
const badgeShade = badgeShadeFromStatus(status.message); const badgeShade = badgeShadeFromStatus(status.message);
const warningMessage = this.warningFromStatus(status.message, {
device: drive.device,
size: drive.size || 0,
});
return ( return (
<Badge key={status.message} shade={badgeShade}> <Badge
key={status.message}
shade={badgeShade}
mr="8px"
tooltip={this.props.showWarnings ? warningMessage : ''}
>
{status.message} {status.message}
</Badge> </Badge>
); );
@ -322,7 +400,9 @@ export class DriveSelector extends React.Component<
this.setState({ this.setState({
drives, drives,
image, image,
selectedList: getSelectedDrives(), selectedList:
(this.props.updateSelectedList && this.props.updateSelectedList()) ||
[],
}); });
}); });
} }
@ -337,15 +417,13 @@ export class DriveSelector extends React.Component<
const displayedDrives = this.getDisplayedDrives(drives); const displayedDrives = this.getDisplayedDrives(drives);
const disabledDrives = this.getDisabledDrives(drives, image); const disabledDrives = this.getDisabledDrives(drives, image);
const numberOfSystemDrives = drives.filter( const numberOfSystemDrives = drives.filter(isSystemDrive).length;
(drive) => isDrivelistDrive(drive) && drive.isSystem, const numberOfDisplayedSystemDrives = displayedDrives.filter(isSystemDrive)
).length; .length;
const numberOfDisplayedSystemDrives = displayedDrives.filter(
(drive) => isDrivelistDrive(drive) && drive.isSystem,
).length;
const numberOfHiddenSystemDrives = const numberOfHiddenSystemDrives =
numberOfSystemDrives - numberOfDisplayedSystemDrives; numberOfSystemDrives - numberOfDisplayedSystemDrives;
const hasStatus = hasListDriveImageCompatibilityStatus(selectedList, image); const hasSystemDrives = selectedList.filter(isSystemDrive).length;
const showWarnings = this.props.showWarnings && hasSystemDrives;
return ( return (
<Modal <Modal
@ -369,8 +447,8 @@ export class DriveSelector extends React.Component<
done={() => done(selectedList)} done={() => done(selectedList)}
action={`Select (${selectedList.length})`} action={`Select (${selectedList.length})`}
primaryButtonProps={{ primaryButtonProps={{
primary: !hasStatus, primary: !showWarnings,
warning: hasStatus, warning: showWarnings,
disabled: !hasAvailableDrives(), disabled: !hasAvailableDrives(),
}} }}
{...props} {...props}
@ -394,13 +472,17 @@ export class DriveSelector extends React.Component<
t.setRowSelection(selectedList); t.setRowSelection(selectedList);
} }
}} }}
multipleSelection={this.props.multipleSelection}
columns={this.tableColumns} columns={this.tableColumns}
data={displayedDrives} data={displayedDrives}
disabledRows={disabledDrives} disabledRows={disabledDrives}
getRowClass={(row: Drive) =>
isDrivelistDrive(row) && row.isSystem ? ['system'] : []
}
rowKey="displayName" rowKey="displayName"
onCheck={(rows: Drive[]) => { onCheck={(rows: Drive[]) => {
const newSelection = rows.filter(isDrivelistDrive); const newSelection = rows.filter(isDrivelistDrive);
if (this.multipleSelection) { if (this.props.multipleSelection) {
this.setState({ this.setState({
selectedList: newSelection, selectedList: newSelection,
}); });
@ -417,7 +499,7 @@ export class DriveSelector extends React.Component<
) { ) {
return; return;
} }
if (this.multipleSelection) { if (this.props.multipleSelection) {
const newList = [...selectedList]; const newList = [...selectedList];
const selectedIndex = selectedList.findIndex( const selectedIndex = selectedList.findIndex(
(drive) => drive.device === row.device, (drive) => drive.device === row.device,
@ -442,6 +524,7 @@ export class DriveSelector extends React.Component<
<Link <Link
mt={15} mt={15}
mb={15} mb={15}
fontSize="14px"
onClick={() => this.setState({ showSystemDrives: true })} onClick={() => this.setState({ showSystemDrives: true })}
> >
<Flex alignItems="center"> <Flex alignItems="center">
@ -452,6 +535,12 @@ export class DriveSelector extends React.Component<
)} )}
</ScrollableFlex> </ScrollableFlex>
)} )}
{this.props.showWarnings && hasSystemDrives ? (
<Alert className="system-drive-alert" style={{ width: '67%' }}>
Selecting your system drive is dangerous and will erase your
drive!
</Alert>
) : null}
</Flex> </Flex>
{missingDriversModal.drive !== undefined && ( {missingDriversModal.drive !== undefined && (

82
lib/gui/app/components/drive-status-warning-modal/drive-status-warning-modal.tsx Normal file
View File

@ -0,0 +1,82 @@
import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
import * as _ from 'lodash';
import * as React from 'react';
import { Badge, Flex, Txt, ModalProps } from 'rendition';
import { Modal, ScrollableFlex } from '../../styled-components';
import { middleEllipsis } from '../../utils/middle-ellipsis';
import { bytesToClosestUnit } from '../../../../shared/units';
import { DriveWithWarnings } from '../../pages/main/Flash';
const DriveStatusWarningModal = ({
done,
cancel,
isSystem,
drivesWithWarnings,
}: ModalProps & {
isSystem: boolean;
drivesWithWarnings: DriveWithWarnings[];
}) => {
let warningSubtitle = 'You are about to erase an unusually large drive';
let warningCta = 'Are you sure the selected drive is not a storage drive?';
if (isSystem) {
warningSubtitle = "You are about to erase your computer's drives";
warningCta = 'Are you sure you want to flash your system drive?';
}
return (
<Modal
footerShadow={false}
reverseFooterButtons={true}
done={done}
cancel={cancel}
cancelButtonProps={{
primary: false,
warning: true,
children: 'Change target',
}}
action={"Yes, I'm sure"}
primaryButtonProps={{
primary: false,
outline: true,
}}
>
<Flex
flexDirection="column"
alignItems="center"
justifyContent="center"
width="100%"
>
<Flex flexDirection="column">
<ExclamationTriangleSvg height="2em" fill="#fca321" />
<Txt fontSize="24px" color="#fca321">
WARNING!
</Txt>
</Flex>
<Txt fontSize="24px">{warningSubtitle}</Txt>
<ScrollableFlex
flexDirection="column"
backgroundColor="#fff5e6"
m="2em 0"
p="1em 2em"
width="420px"
maxHeight="100px"
>
{drivesWithWarnings.map((drive, i, array) => (
<>
<Flex justifyContent="space-between" alignItems="baseline">
<strong>{middleEllipsis(drive.description, 28)}</strong>{' '}
{bytesToClosestUnit(drive.size || 0)}{' '}
<Badge shade={5}>{drive.statuses[0].message}</Badge>
</Flex>
{i !== array.length - 1 ? <hr style={{ width: '100%' }} /> : null}
</>
))}
</ScrollableFlex>
<Txt style={{ fontWeight: 600 }}>{warningCta}</Txt>
</Flex>
</Modal>
);
};
export default DriveStatusWarningModal;

181
lib/gui/app/components/source-selector/source-selector.tsx
View File

@ -18,11 +18,12 @@ import CopySvg from '@fortawesome/fontawesome-free/svgs/solid/copy.svg';
import FileSvg from '@fortawesome/fontawesome-free/svgs/solid/file.svg'; import FileSvg from '@fortawesome/fontawesome-free/svgs/solid/file.svg';
import LinkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg'; import LinkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg';
import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg'; import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
import { sourceDestination, scanner } from 'etcher-sdk'; import { sourceDestination } from 'etcher-sdk';
import { ipcRenderer, IpcRendererEvent } from 'electron'; import { ipcRenderer, IpcRendererEvent } from 'electron';
import * as _ from 'lodash'; import * as _ from 'lodash';
import { GPTPartition, MBRPartition } from 'partitioninfo'; import { GPTPartition, MBRPartition } from 'partitioninfo';
import * as path from 'path'; import * as path from 'path';
import * as prettyBytes from 'pretty-bytes';
import * as React from 'react'; import * as React from 'react';
import { import {
Flex, Flex,
@ -38,7 +39,6 @@ import styled from 'styled-components';
import * as errors from '../../../../shared/errors'; import * as errors from '../../../../shared/errors';
import * as messages from '../../../../shared/messages'; import * as messages from '../../../../shared/messages';
import * as supportedFormats from '../../../../shared/supported-formats'; import * as supportedFormats from '../../../../shared/supported-formats';
import * as shared from '../../../../shared/units';
import * as selectionState from '../../models/selection-state'; import * as selectionState from '../../models/selection-state';
import { observe } from '../../models/store'; import { observe } from '../../models/store';
import * as analytics from '../../modules/analytics'; import * as analytics from '../../modules/analytics';
@ -59,6 +59,7 @@ import { SVGIcon } from '../svg-icon/svg-icon';
import ImageSvg from '../../../assets/image.svg'; import ImageSvg from '../../../assets/image.svg';
import { DriveSelector } from '../drive-selector/drive-selector'; import { DriveSelector } from '../drive-selector/drive-selector';
import { DrivelistDrive } from '../../../../shared/drive-constraints';
const recentUrlImagesKey = 'recentUrlImages'; const recentUrlImagesKey = 'recentUrlImages';
@ -161,44 +162,46 @@ const URLSelector = ({
await done(imageURL); await done(imageURL);
}} }}
> >
<Flex style={{ width: '100%' }} flexDirection="column"> <Flex flexDirection="column">
<Txt mb="10px" fontSize="24px"> <Flex style={{ width: '100%' }} flexDirection="column">
Use Image URL <Txt mb="10px" fontSize="24px">
</Txt> Use Image URL
<Input </Txt>
value={imageURL} <Input
placeholder="Enter a valid URL" value={imageURL}
type="text" placeholder="Enter a valid URL"
onChange={(evt: React.ChangeEvent<HTMLInputElement>) => type="text"
setImageURL(evt.target.value) onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
} setImageURL(evt.target.value)
/> }
</Flex> />
{recentImages.length > 0 && (
<Flex flexDirection="column" height="78.6%">
<Txt fontSize={18}>Recent</Txt>
<ScrollableFlex flexDirection="column">
<Card
p="10px 15px"
rows={recentImages
.map((recent) => (
<Txt
key={recent.href}
onClick={() => {
setImageURL(recent.href);
}}
style={{
overflowWrap: 'break-word',
}}
>
{recent.pathname.split('/').pop()} - {recent.href}
</Txt>
))
.reverse()}
/>
</ScrollableFlex>
</Flex> </Flex>
)} {recentImages.length > 0 && (
<Flex flexDirection="column" height="78.6%">
<Txt fontSize={18}>Recent</Txt>
<ScrollableFlex flexDirection="column">
<Card
p="10px 15px"
rows={recentImages
.map((recent) => (
<Txt
key={recent.href}
onClick={() => {
setImageURL(recent.href);
}}
style={{
overflowWrap: 'break-word',
}}
>
{recent.pathname.split('/').pop()} - {recent.href}
</Txt>
))
.reverse()}
/>
</ScrollableFlex>
</Flex>
)}
</Flex>
</Modal> </Modal>
); );
}; };
@ -243,11 +246,13 @@ export type Source =
| typeof sourceDestination.Http; | typeof sourceDestination.Http;
export interface SourceMetadata extends sourceDestination.Metadata { export interface SourceMetadata extends sourceDestination.Metadata {
hasMBR: boolean; hasMBR?: boolean;
partitions: MBRPartition[] | GPTPartition[]; partitions?: MBRPartition[] | GPTPartition[];
path: string; path: string;
displayName: string;
description: string;
SourceType: Source; SourceType: Source;
drive?: scanner.adapters.DrivelistDrive; drive?: DrivelistDrive;
extension?: string; extension?: string;
} }
@ -326,7 +331,7 @@ export class SourceSelector extends React.Component<
} }
private selectSource( private selectSource(
selected: string | scanner.adapters.DrivelistDrive, selected: string | DrivelistDrive,
SourceType: Source, SourceType: Source,
): { promise: Promise<void>; cancel: () => void } { ): { promise: Promise<void>; cancel: () => void } {
let cancelled = false; let cancelled = false;
@ -336,40 +341,43 @@ export class SourceSelector extends React.Component<
}, },
promise: (async () => { promise: (async () => {
const sourcePath = isString(selected) ? selected : selected.device; const sourcePath = isString(selected) ? selected : selected.device;
let source;
let metadata: SourceMetadata | undefined; let metadata: SourceMetadata | undefined;
if (isString(selected)) { if (isString(selected)) {
const source = await this.createSource(selected, SourceType); if (SourceType === sourceDestination.Http && !isURL(selected)) {
this.handleError(
'Unsupported protocol',
selected,
messages.error.unsupportedProtocol(),
);
return;
}
if (supportedFormats.looksLikeWindowsImage(selected)) {
analytics.logEvent('Possibly Windows image', { image: selected });
this.setState({
warning: {
message: messages.warning.looksLikeWindowsImage(),
title: 'Possible Windows image detected',
},
});
}
source = await this.createSource(selected, SourceType);
if (cancelled) { if (cancelled) {
return; return;
} }
try { try {
const innerSource = await source.getInnerSource(); const innerSource = await source.getInnerSource();
if (cancelled) { if (cancelled) {
return; return;
} }
metadata = await this.getMetadata(innerSource); metadata = await this.getMetadata(innerSource, selected);
if (cancelled) { if (cancelled) {
return; return;
} }
if (SourceType === sourceDestination.Http && !isURL(selected)) { metadata.SourceType = SourceType;
this.handleError(
'Unsupported protocol',
selected,
messages.error.unsupportedProtocol(),
);
return;
}
if (supportedFormats.looksLikeWindowsImage(selected)) {
analytics.logEvent('Possibly Windows image', { image: selected });
this.setState({
warning: {
message: messages.warning.looksLikeWindowsImage(),
title: 'Possible Windows image detected',
},
});
}
metadata.extension = path.extname(selected).slice(1);
metadata.path = selected;
if (!metadata.hasMBR) { if (!metadata.hasMBR) {
analytics.logEvent('Missing partition table', { metadata }); analytics.logEvent('Missing partition table', { metadata });
@ -397,9 +405,9 @@ export class SourceSelector extends React.Component<
} else { } else {
metadata = { metadata = {
path: selected.device, path: selected.device,
displayName: selected.displayName,
description: selected.displayName,
size: selected.size as SourceMetadata['size'], size: selected.size as SourceMetadata['size'],
hasMBR: false,
partitions: [],
SourceType: sourceDestination.BlockDevice, SourceType: sourceDestination.BlockDevice,
drive: selected, drive: selected,
}; };
@ -425,7 +433,7 @@ export class SourceSelector extends React.Component<
title: string, title: string,
sourcePath: string, sourcePath: string,
description: string, description: string,
error?: any, error?: Error,
) { ) {
const imageError = errors.createUserError({ const imageError = errors.createUserError({
title, title,
@ -440,7 +448,8 @@ export class SourceSelector extends React.Component<
} }
private async getMetadata( private async getMetadata(
source: sourceDestination.SourceDestination | sourceDestination.BlockDevice, source: sourceDestination.SourceDestination,
selected: string | DrivelistDrive,
) { ) {
const metadata = (await source.getMetadata()) as SourceMetadata; const metadata = (await source.getMetadata()) as SourceMetadata;
const partitionTable = await source.getPartitionTable(); const partitionTable = await source.getPartitionTable();
@ -450,6 +459,10 @@ export class SourceSelector extends React.Component<
} else { } else {
metadata.hasMBR = false; metadata.hasMBR = false;
} }
if (isString(selected)) {
metadata.extension = path.extname(selected).slice(1);
metadata.path = selected;
}
return metadata; return metadata;
} }
@ -517,20 +530,20 @@ export class SourceSelector extends React.Component<
public render() { public render() {
const { flashing } = this.props; const { flashing } = this.props;
const { showImageDetails, showURLSelector, showDriveSelector } = this.state; const { showImageDetails, showURLSelector, showDriveSelector } = this.state;
const selectionImage = selectionState.getImage();
let image: SourceMetadata | DrivelistDrive =
selectionImage !== undefined ? selectionImage : ({} as SourceMetadata);
const hasSource = selectionState.hasImage(); image = image.drive ?? image;
let image = hasSource ? selectionState.getImage() : {};
image = image.drive ? image.drive : image;
let cancelURLSelection = () => { let cancelURLSelection = () => {
// noop // noop
}; };
image.name = image.description || image.name; image.name = image.description || image.name;
const imagePath = image.path || ''; const imagePath = image.path || image.displayName || '';
const imageBasename = path.basename(image.path || ''); const imageBasename = path.basename(imagePath);
const imageName = image.name || ''; const imageName = image.name || '';
const imageSize = image.size || ''; const imageSize = image.size || 0;
const imageLogo = image.logo || ''; const imageLogo = image.logo || '';
return ( return (
@ -554,7 +567,7 @@ export class SourceSelector extends React.Component<
}} }}
/> />
{hasSource ? ( {selectionImage !== undefined ? (
<> <>
<StepNameButton <StepNameButton
plain plain
@ -572,7 +585,7 @@ export class SourceSelector extends React.Component<
Remove Remove
</ChangeButton> </ChangeButton>
)} )}
<DetailsText>{shared.bytesToClosestUnit(imageSize)}</DetailsText> <DetailsText>{prettyBytes(imageSize)}</DetailsText>
</> </>
) : ( ) : (
<> <>
@ -684,15 +697,13 @@ export class SourceSelector extends React.Component<
showDriveSelector: false, showDriveSelector: false,
}); });
}} }}
done={async (drives: scanner.adapters.DrivelistDrive[]) => { done={async (drives: DrivelistDrive[]) => {
if (!drives.length) { if (drives.length) {
analytics.logEvent('Drive selector closed'); await this.selectSource(
this.setState({ drives[0],
showDriveSelector: false, sourceDestination.BlockDevice,
}); );
return;
} }
await this.selectSource(drives[0], sourceDestination.BlockDevice);
this.setState({ this.setState({
showDriveSelector: false, showDriveSelector: false,
}); });

72
lib/gui/app/components/target-selector/target-selector-button.tsx
View File

@ -15,14 +15,14 @@
*/ */
import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg'; import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
import { Drive as DrivelistDrive } from 'drivelist';
import * as React from 'react'; import * as React from 'react';
import { Flex, FlexProps, Txt } from 'rendition'; import { Flex, FlexProps, Txt } from 'rendition';
import { import {
getDriveImageCompatibilityStatuses, getDriveImageCompatibilityStatuses,
Image, DriveStatus,
} from '../../../../shared/drive-constraints'; } from '../../../../shared/drive-constraints';
import { compatibility, warning } from '../../../../shared/messages';
import { bytesToClosestUnit } from '../../../../shared/units'; import { bytesToClosestUnit } from '../../../../shared/units';
import { getSelectedDrives } from '../../models/selection-state'; import { getSelectedDrives } from '../../models/selection-state';
import { import {
@ -41,40 +41,54 @@ interface TargetSelectorProps {
flashing: boolean; flashing: boolean;
show: boolean; show: boolean;
tooltip: string; tooltip: string;
image: Image;
} }
function DriveCompatibilityWarning({ function getDriveWarning(status: DriveStatus) {
drive, switch (status.message) {
image, case compatibility.containsImage():
return warning.sourceDrive();
case compatibility.largeDrive():
return warning.largeDriveSize();
case compatibility.system():
return warning.systemDrive();
default:
return '';
}
}
const DriveCompatibilityWarning = ({
warnings,
...props ...props
}: { }: {
drive: DrivelistDrive; warnings: string[];
image: Image; } & FlexProps) => {
} & FlexProps) { const systemDrive = warnings.find(
const compatibilityWarnings = getDriveImageCompatibilityStatuses( (message) => message === warning.systemDrive(),
drive,
image,
); );
if (compatibilityWarnings.length === 0) {
return null;
}
const messages = compatibilityWarnings.map((warning) => warning.message);
return ( return (
<Flex tooltip={messages.join(', ')} {...props}> <Flex tooltip={warnings.join(', ')} {...props}>
<ExclamationTriangleSvg fill="currentColor" height="1em" /> <ExclamationTriangleSvg
fill={systemDrive ? '#fca321' : '#8f9297'}
height="1em"
/>
</Flex> </Flex>
); );
} };
export function TargetSelectorButton(props: TargetSelectorProps) { export function TargetSelectorButton(props: TargetSelectorProps) {
const targets = getSelectedDrives(); const targets = getSelectedDrives();
if (targets.length === 1) { if (targets.length === 1) {
const target = targets[0]; const target = targets[0];
const warnings = getDriveImageCompatibilityStatuses(target).map(
getDriveWarning,
);
return ( return (
<> <>
<StepNameButton plain tooltip={props.tooltip}> <StepNameButton plain tooltip={props.tooltip}>
{warnings.length > 0 && (
<DriveCompatibilityWarning warnings={warnings} mr={2} />
)}
{middleEllipsis(target.description, 20)} {middleEllipsis(target.description, 20)}
</StepNameButton> </StepNameButton>
{!props.flashing && ( {!props.flashing && (
@ -82,14 +96,7 @@ export function TargetSelectorButton(props: TargetSelectorProps) {
Change Change
</ChangeButton> </ChangeButton>
)} )}
<DetailsText> <DetailsText>{bytesToClosestUnit(target.size)}</DetailsText>
<DriveCompatibilityWarning
drive={target}
image={props.image}
mr={2}
/>
{bytesToClosestUnit(target.size)}
</DetailsText>
</> </>
); );
} }
@ -97,6 +104,9 @@ export function TargetSelectorButton(props: TargetSelectorProps) {
if (targets.length > 1) { if (targets.length > 1) {
const targetsTemplate = []; const targetsTemplate = [];
for (const target of targets) { for (const target of targets) {
const warnings = getDriveImageCompatibilityStatuses(target).map(
getDriveWarning,
);
targetsTemplate.push( targetsTemplate.push(
<DetailsText <DetailsText
key={target.device} key={target.device}
@ -105,11 +115,9 @@ export function TargetSelectorButton(props: TargetSelectorProps) {
} ${bytesToClosestUnit(target.size)}`} } ${bytesToClosestUnit(target.size)}`}
px={21} px={21}
> >
<DriveCompatibilityWarning {warnings.length && (
drive={target} <DriveCompatibilityWarning warnings={warnings} mr={2} />
image={props.image} )}
mr={2}
/>
<Txt mr={2}>{middleEllipsis(target.description, 14)}</Txt> <Txt mr={2}>{middleEllipsis(target.description, 14)}</Txt>
<Txt>{bytesToClosestUnit(target.size)}</Txt> <Txt>{bytesToClosestUnit(target.size)}</Txt>
</DetailsText>, </DetailsText>,

33
lib/gui/app/components/target-selector/target-selector.tsx
View File

@ -16,9 +16,8 @@
import { scanner } from 'etcher-sdk'; import { scanner } from 'etcher-sdk';
import * as React from 'react'; import * as React from 'react';
import { Flex } from 'rendition'; import { Flex, Txt } from 'rendition';
import { TargetSelector } from '../../components/target-selector/target-selector-button';
import { TargetSelectorModal } from '../../components/target-selector/target-selector-modal';
import { import {
DriveSelector, DriveSelector,
DriveSelectorProps, DriveSelectorProps,
@ -33,7 +32,10 @@ import {
import * as settings from '../../models/settings'; import * as settings from '../../models/settings';
import { observe } from '../../models/store'; import { observe } from '../../models/store';
import * as analytics from '../../modules/analytics'; import * as analytics from '../../modules/analytics';
import { TargetSelectorButton } from './target-selector-button';
import DriveSvg from '../../../assets/drive.svg'; import DriveSvg from '../../../assets/drive.svg';
import { warning } from '../../../../shared/messages';
export const getDriveListLabel = () => { export const getDriveListLabel = () => {
return getSelectedDrives() return getSelectedDrives()
@ -55,11 +57,18 @@ const getDriveSelectionStateSlice = () => ({
}); });
export const TargetSelectorModal = ( export const TargetSelectorModal = (
props: Omit<DriveSelectorProps, 'titleLabel' | 'emptyListLabel'>, props: Omit<
DriveSelectorProps,
'titleLabel' | 'emptyListLabel' | 'multipleSelection'
>,
) => ( ) => (
<DriveSelector <DriveSelector
multipleSelection={true}
titleLabel="Select target" titleLabel="Select target"
emptyListLabel="Plug a target drive" emptyListLabel="Plug a target drive"
showWarnings={true}
selectedList={getSelectedDrives()}
updateSelectedList={getSelectedDrives}
{...props} {...props}
/> />
); );
@ -106,7 +115,7 @@ export const TargetSelector = ({
}: TargetSelectorProps) => { }: TargetSelectorProps) => {
// TODO: inject these from redux-connector // TODO: inject these from redux-connector
const [ const [
{ showDrivesButton, driveListLabel, targets, image }, { showDrivesButton, driveListLabel, targets },
setStateSlice, setStateSlice,
] = React.useState(getDriveSelectionStateSlice()); ] = React.useState(getDriveSelectionStateSlice());
const [showTargetSelectorModal, setShowTargetSelectorModal] = React.useState( const [showTargetSelectorModal, setShowTargetSelectorModal] = React.useState(
@ -119,6 +128,7 @@ export const TargetSelector = ({
}); });
}, []); }, []);
const hasSystemDrives = targets.some((target) => target.isSystem);
return ( return (
<Flex flexDirection="column" alignItems="center"> <Flex flexDirection="column" alignItems="center">
<DriveSvg <DriveSvg
@ -142,9 +152,20 @@ export const TargetSelector = ({
}} }}
flashing={flashing} flashing={flashing}
targets={targets} targets={targets}
image={image}
/> />
{hasSystemDrives ? (
<Txt
color="#fca321"
style={{
position: 'absolute',
bottom: '25px',
}}
>
Warning: {warning.systemDrive()}
</Txt>
) : null}
{showTargetSelectorModal && ( {showTargetSelectorModal && (
<TargetSelectorModal <TargetSelectorModal
cancel={() => setShowTargetSelectorModal(false)} cancel={() => setShowTargetSelectorModal(false)}

10
lib/gui/app/css/main.css
View File

@ -19,7 +19,6 @@
src: url("./fonts/SourceSansPro-Regular.ttf") format("truetype"); src: url("./fonts/SourceSansPro-Regular.ttf") format("truetype");
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: block;
} }
@font-face { @font-face {
@ -27,7 +26,6 @@
src: url("./fonts/SourceSansPro-SemiBold.ttf") format("truetype"); src: url("./fonts/SourceSansPro-SemiBold.ttf") format("truetype");
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-display: block;
} }
html, html,
@ -53,10 +51,16 @@ body {
a:focus, a:focus,
input:focus, input:focus,
button:focus, button:focus,
[tabindex]:focus { [tabindex]:focus,
input[type="checkbox"] + div {
outline: none !important; outline: none !important;
box-shadow: none !important;
} }
.disabled { .disabled {
opacity: 0.4; opacity: 0.4;
} }
#rendition-tooltip-root > div {
font-family: "SourceSansPro", sans-serif;
}

4
lib/gui/app/models/available-drives.ts
View File

@ -14,12 +14,10 @@
* limitations under the License. * limitations under the License.
*/ */
import * as _ from 'lodash';
import { Actions, store } from './store'; import { Actions, store } from './store';
export function hasAvailableDrives() { export function hasAvailableDrives() {
return !_.isEmpty(getDrives()); return getDrives().length > 0;
} }
export function setDrives(drives: any[]) { export function setDrives(drives: any[]) {

6
lib/gui/app/models/leds.ts
View File

@ -14,11 +14,13 @@
* limitations under the License. * limitations under the License.
*/ */
import { Drive as DrivelistDrive } from 'drivelist';
import * as _ from 'lodash'; import * as _ from 'lodash';
import { AnimationFunction, Color, RGBLed } from 'sys-class-rgb-led'; import { AnimationFunction, Color, RGBLed } from 'sys-class-rgb-led';
import { isSourceDrive } from '../../../shared/drive-constraints'; import {
isSourceDrive,
DrivelistDrive,
} from '../../../shared/drive-constraints';
import * as settings from './settings'; import * as settings from './settings';
import { DEFAULT_STATE, observe } from './store'; import { DEFAULT_STATE, observe } from './store';

5
lib/gui/app/models/selection-state.ts
View File

@ -15,6 +15,7 @@
*/ */
import * as _ from 'lodash'; import * as _ from 'lodash';
import { SourceMetadata } from '../components/source-selector/source-selector';
import * as availableDrives from './available-drives'; import * as availableDrives from './available-drives';
import { Actions, store } from './store'; import { Actions, store } from './store';
@ -67,7 +68,7 @@ export function getSelectedDrives(): any[] {
/** /**
* @summary Get the selected image * @summary Get the selected image
*/ */
export function getImage() { export function getImage(): SourceMetadata {
return _.get(store.getState().toJS(), ['selection', 'image']); return _.get(store.getState().toJS(), ['selection', 'image']);
} }
@ -114,7 +115,7 @@ export function hasDrive(): boolean {
* @summary Check if there is a selected image * @summary Check if there is a selected image
*/ */
export function hasImage(): boolean { export function hasImage(): boolean {
return Boolean(getImage()); return !_.isEmpty(getImage());
} }
/** /**

2
lib/gui/app/modules/image-writer.ts
View File

@ -134,7 +134,7 @@ interface FlashResults {
cancelled?: boolean; cancelled?: boolean;
} }
export async function performWrite( async function performWrite(
image: SourceMetadata, image: SourceMetadata,
drives: DrivelistDrive[], drives: DrivelistDrive[],
onProgress: sdk.multiWrite.OnProgressFunction, onProgress: sdk.multiWrite.OnProgressFunction,

2
lib/gui/app/modules/progress-status.ts
View File

@ -51,7 +51,7 @@ export function fromFlashState({
} else { } else {
return { return {
status: 'Flashing...', status: 'Flashing...',
position: `${bytesToClosestUnit(position)}`, position: `${position ? bytesToClosestUnit(position) : ''}`,
}; };
} }
} else if (type === 'verifying') { } else if (type === 'verifying') {

121
lib/gui/app/pages/main/Flash.tsx
View File

@ -18,7 +18,7 @@ import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as path from 'path'; import * as path from 'path';
import * as React from 'react'; import * as React from 'react';
import { Flex, Modal, Txt } from 'rendition'; import { Flex, Modal as SmallModal, Txt } from 'rendition';
import * as constraints from '../../../../shared/drive-constraints'; import * as constraints from '../../../../shared/drive-constraints';
import * as messages from '../../../../shared/messages'; import * as messages from '../../../../shared/messages';
@ -36,27 +36,11 @@ import {
} from '../../components/target-selector/target-selector'; } from '../../components/target-selector/target-selector';
import FlashSvg from '../../../assets/flash.svg'; import FlashSvg from '../../../assets/flash.svg';
import DriveStatusWarningModal from '../../components/drive-status-warning-modal/drive-status-warning-modal';
const COMPLETED_PERCENTAGE = 100; const COMPLETED_PERCENTAGE = 100;
const SPEED_PRECISION = 2; const SPEED_PRECISION = 2;
const getWarningMessages = (drives: any, image: any) => {
const warningMessages = [];
for (const drive of drives) {
if (constraints.isDriveSizeLarge(drive)) {
warningMessages.push(messages.warning.largeDriveSize(drive));
} else if (!constraints.isDriveSizeRecommended(drive, image)) {
warningMessages.push(
messages.warning.unrecommendedDriveSize(image, drive),
);
}
// TODO(Shou): we should consider adding the same warning dialog for system drives and remove unsafe mode
}
return warningMessages;
};
const getErrorMessageFromCode = (errorCode: string) => { const getErrorMessageFromCode = (errorCode: string) => {
// TODO: All these error codes to messages translations // TODO: All these error codes to messages translations
// should go away if the writer emitted user friendly // should go away if the writer emitted user friendly
@ -81,8 +65,8 @@ async function flashImageToDrive(
): Promise<string> { ): Promise<string> {
const devices = selection.getSelectedDevices(); const devices = selection.getSelectedDevices();
const image: any = selection.getImage(); const image: any = selection.getImage();
const drives = _.filter(availableDrives.getDrives(), (drive: any) => { const drives = availableDrives.getDrives().filter((drive: any) => {
return _.includes(devices, drive.device); return devices.includes(drive.device);
}); });
if (drives.length === 0 || isFlashing) { if (drives.length === 0 || isFlashing) {
@ -132,7 +116,7 @@ async function flashImageToDrive(
} }
const formatSeconds = (totalSeconds: number) => { const formatSeconds = (totalSeconds: number) => {
if (!totalSeconds && !_.isNumber(totalSeconds)) { if (typeof totalSeconds !== 'number' || !Number.isFinite(totalSeconds)) {
return ''; return '';
} }
const minutes = Math.floor(totalSeconds / 60); const minutes = Math.floor(totalSeconds / 60);
@ -155,10 +139,16 @@ interface FlashStepProps {
eta?: number; eta?: number;
} }
export interface DriveWithWarnings extends constraints.DrivelistDrive {
statuses: constraints.DriveStatus[];
}
interface FlashStepState { interface FlashStepState {
warningMessages: string[]; warningMessage: boolean;
errorMessage: string; errorMessage: string;
showDriveSelectorModal: boolean; showDriveSelectorModal: boolean;
systemDrives: boolean;
drivesWithWarnings: DriveWithWarnings[];
} }
export class FlashStep extends React.PureComponent< export class FlashStep extends React.PureComponent<
@ -168,14 +158,16 @@ export class FlashStep extends React.PureComponent<
constructor(props: FlashStepProps) { constructor(props: FlashStepProps) {
super(props); super(props);
this.state = { this.state = {
warningMessages: [], warningMessage: false,
errorMessage: '', errorMessage: '',
showDriveSelectorModal: false, showDriveSelectorModal: false,
systemDrives: false,
drivesWithWarnings: [],
}; };
} }
private async handleWarningResponse(shouldContinue: boolean) { private async handleWarningResponse(shouldContinue: boolean) {
this.setState({ warningMessages: [] }); this.setState({ warningMessage: false });
if (!shouldContinue) { if (!shouldContinue) {
this.setState({ showDriveSelectorModal: true }); this.setState({ showDriveSelectorModal: true });
return; return;
@ -198,28 +190,45 @@ export class FlashStep extends React.PureComponent<
} }
} }
private hasListWarnings(drives: any[], image: any) { private hasListWarnings(drives: any[]) {
if (drives.length === 0 || flashState.isFlashing()) { if (drives.length === 0 || flashState.isFlashing()) {
return; return;
} }
return constraints.hasListDriveImageCompatibilityStatus(drives, image); return drives.filter((drive) => drive.isSystem).length > 0;
} }
private async tryFlash() { private async tryFlash() {
const devices = selection.getSelectedDevices(); const devices = selection.getSelectedDevices();
const image = selection.getImage(); const drives = availableDrives
const drives = _.filter( .getDrives()
availableDrives.getDrives(), .filter((drive: { device: string }) => {
(drive: { device: string }) => { return devices.includes(drive.device);
return _.includes(devices, drive.device); })
}, .map((drive) => {
); return {
...drive,
statuses: constraints.getDriveImageCompatibilityStatuses(drive),
};
});
if (drives.length === 0 || this.props.isFlashing) { if (drives.length === 0 || this.props.isFlashing) {
return; return;
} }
const hasDangerStatus = this.hasListWarnings(drives, image); const hasDangerStatus = drives.some((drive) => drive.statuses.length > 0);
if (hasDangerStatus) { if (hasDangerStatus) {
this.setState({ warningMessages: getWarningMessages(drives, image) }); const systemDrives = drives.some((drive) =>
drive.statuses.includes(constraints.statuses.system),
);
this.setState({
systemDrives,
drivesWithWarnings: drives.filter((driveWithWarnings) => {
return (
driveWithWarnings.isSystem ||
(!systemDrives &&
driveWithWarnings.statuses.includes(constraints.statuses.large))
);
}),
warningMessage: true,
});
return; return;
} }
this.setState({ this.setState({
@ -253,13 +262,8 @@ export class FlashStep extends React.PureComponent<
position={this.props.position} position={this.props.position}
disabled={this.props.shouldFlashStepBeDisabled} disabled={this.props.shouldFlashStepBeDisabled}
cancel={imageWriter.cancel} cancel={imageWriter.cancel}
warning={this.hasListWarnings( warning={this.hasListWarnings(selection.getSelectedDrives())}
selection.getSelectedDrives(), callback={() => this.tryFlash()}
selection.getImage(),
)}
callback={() => {
this.tryFlash();
}}
/> />
{!_.isNil(this.props.speed) && {!_.isNil(this.props.speed) &&
@ -270,9 +274,7 @@ export class FlashStep extends React.PureComponent<
color="#7e8085" color="#7e8085"
width="100%" width="100%"
> >
{!_.isNil(this.props.speed) && ( <Txt>{this.props.speed.toFixed(SPEED_PRECISION)} MB/s</Txt>
<Txt>{this.props.speed.toFixed(SPEED_PRECISION)} MB/s</Txt>
)}
{!_.isNil(this.props.eta) && ( {!_.isNil(this.props.eta) && (
<Txt>ETA: {formatSeconds(this.props.eta)}</Txt> <Txt>ETA: {formatSeconds(this.props.eta)}</Txt>
)} )}
@ -288,28 +290,17 @@ export class FlashStep extends React.PureComponent<
)} )}
</Flex> </Flex>
{this.state.warningMessages.length > 0 && ( {this.state.warningMessage && (
<Modal <DriveStatusWarningModal
width={400}
titleElement={'Attention'}
cancel={() => this.handleWarningResponse(false)}
done={() => this.handleWarningResponse(true)} done={() => this.handleWarningResponse(true)}
cancelButtonProps={{ cancel={() => this.handleWarningResponse(false)}
children: 'Change', isSystem={this.state.systemDrives}
}} drivesWithWarnings={this.state.drivesWithWarnings}
action={'Continue'} />
primaryButtonProps={{ primary: false, warning: true }}
>
{_.map(this.state.warningMessages, (message, key) => (
<Txt key={key} whitespace="pre-line" mt={2}>
{message}
</Txt>
))}
</Modal>
)} )}
{this.state.errorMessage && ( {this.state.errorMessage && (
<Modal <SmallModal
width={400} width={400}
titleElement={'Attention'} titleElement={'Attention'}
cancel={() => this.handleFlashErrorResponse(false)} cancel={() => this.handleFlashErrorResponse(false)}
@ -317,11 +308,11 @@ export class FlashStep extends React.PureComponent<
action={'Retry'} action={'Retry'}
> >
<Txt> <Txt>
{_.map(this.state.errorMessage.split('\n'), (message, key) => ( {this.state.errorMessage.split('\n').map((message, key) => (
<p key={key}>{message}</p> <p key={key}>{message}</p>
))} ))}
</Txt> </Txt>
</Modal> </SmallModal>
)} )}
{this.state.showDriveSelectorModal && ( {this.state.showDriveSelectorModal && (
<TargetSelectorModal <TargetSelectorModal

17
lib/gui/app/pages/main/MainPage.tsx
View File

@ -17,7 +17,6 @@
import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/cog.svg'; import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/cog.svg';
import QuestionCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg'; import QuestionCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg';
import * as _ from 'lodash';
import * as path from 'path'; import * as path from 'path';
import * as React from 'react'; import * as React from 'react';
import { Flex } from 'rendition'; import { Flex } from 'rendition';
@ -27,7 +26,10 @@ import FinishPage from '../../components/finish/finish';
import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos'; import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos';
import { SafeWebview } from '../../components/safe-webview/safe-webview'; import { SafeWebview } from '../../components/safe-webview/safe-webview';
import { SettingsModal } from '../../components/settings/settings'; import { SettingsModal } from '../../components/settings/settings';
import { SourceSelector } from '../../components/source-selector/source-selector'; import {
SourceMetadata,
SourceSelector,
} from '../../components/source-selector/source-selector';
import * as flashState from '../../models/flash-state'; import * as flashState from '../../models/flash-state';
import * as selectionState from '../../models/selection-state'; import * as selectionState from '../../models/selection-state';
import * as settings from '../../models/settings'; import * as settings from '../../models/settings';
@ -66,12 +68,11 @@ function getDrivesTitle() {
return `${drives.length} Targets`; return `${drives.length} Targets`;
} }
function getImageBasename() { function getImageBasename(image?: SourceMetadata) {
if (!selectionState.hasImage()) { if (image === undefined) {
return ''; return '';
} }
const image = selectionState.getImage();
if (image.drive) { if (image.drive) {
return image.drive.description; return image.drive.description;
} }
@ -138,7 +139,7 @@ export class MainPage extends React.Component<
hasDrive: selectionState.hasDrive(), hasDrive: selectionState.hasDrive(),
imageLogo: selectionState.getImageLogo(), imageLogo: selectionState.getImageLogo(),
imageSize: selectionState.getImageSize(), imageSize: selectionState.getImageSize(),
imageName: getImageBasename(), imageName: getImageBasename(selectionState.getImage()),
driveTitle: getDrivesTitle(), driveTitle: getDrivesTitle(),
driveLabel: getDriveListLabel(), driveLabel: getDriveListLabel(),
}; };
@ -271,8 +272,8 @@ export class MainPage extends React.Component<
imageLogo={this.state.imageLogo} imageLogo={this.state.imageLogo}
imageName={this.state.imageName} imageName={this.state.imageName}
imageSize={ imageSize={
_.isNumber(this.state.imageSize) typeof this.state.imageSize === 'number'
? (bytesToClosestUnit(this.state.imageSize) as string) ? (prettyBytes(this.state.imageSize) as string)
: '' : ''
} }
driveTitle={this.state.driveTitle} driveTitle={this.state.driveTitle}

83
lib/gui/app/styled-components.tsx
View File

@ -16,6 +16,7 @@
import * as React from 'react'; import * as React from 'react';
import { import {
Alert as AlertBase,
Flex, Flex,
FlexProps, FlexProps,
Button, Button,
@ -25,7 +26,7 @@ import {
Txt, Txt,
Theme as renditionTheme, Theme as renditionTheme,
} from 'rendition'; } from 'rendition';
import styled from 'styled-components'; import styled, { css } from 'styled-components';
import { colors, theme } from './theme'; import { colors, theme } from './theme';
@ -68,6 +69,7 @@ export const StepButton = styled((props: ButtonProps) => (
<BaseButton {...props}></BaseButton> <BaseButton {...props}></BaseButton>
))` ))`
color: #ffffff; color: #ffffff;
font-size: 14px;
`; `;
export const ChangeButton = styled(Button)` export const ChangeButton = styled(Button)`
@ -93,7 +95,7 @@ export const StepNameButton = styled(BaseButton)`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
font-weight: bold; font-weight: normal;
color: ${colors.dark.foreground}; color: ${colors.dark.foreground};
&:enabled { &:enabled {
@ -119,6 +121,19 @@ export const DetailsText = (props: FlexProps) => (
/> />
); );
const modalFooterShadowCss = css`
overflow: auto;
background: 0, linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, 0,
linear-gradient(rgba(255, 255, 255, 0), rgba(221, 225, 240, 0.5) 70%) 0 100%;
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 8px, 100% 8px;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 8px, 100% 8px;
background-attachment: local, local, scroll, scroll;
`;
export const Modal = styled(({ style, ...props }) => { export const Modal = styled(({ style, ...props }) => {
return ( return (
<Provider <Provider
@ -140,7 +155,7 @@ export const Modal = styled(({ style, ...props }) => {
> >
<ModalBase <ModalBase
position="top" position="top"
width="96vw" width="97vw"
cancelButtonProps={{ cancelButtonProps={{
style: { style: {
marginRight: '20px', marginRight: '20px',
@ -148,7 +163,7 @@ export const Modal = styled(({ style, ...props }) => {
}, },
}} }}
style={{ style={{
height: '86.5vh', height: '87.5vh',
...style, ...style,
}} }}
{...props} {...props}
@ -157,27 +172,42 @@ export const Modal = styled(({ style, ...props }) => {
); );
})` })`
> div { > div {
padding: 24px 30px; padding: 0;
height: calc(100% - 80px); height: 100%;
::-webkit-scrollbar {
display: none;
}
> h3 { > h3 {
margin: 0; margin: 0;
padding: 24px 30px 0;
height: 14.3%;
}
> div:first-child {
height: 81%;
padding: 24px 30px 0;
}
> div:nth-child(2) {
height: 61%;
> div:not(.system-drive-alert) {
padding: 0 30px;
${modalFooterShadowCss}
}
} }
> div:last-child { > div:last-child {
margin: 0;
flex-direction: ${(props) =>
props.reverseFooterButtons ? 'row-reverse' : 'row'};
border-radius: 0 0 7px 7px; border-radius: 0 0 7px 7px;
height: 80px; height: 80px;
background-color: #fff; background-color: #fff;
justify-content: center; justify-content: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%; width: 100%;
box-shadow: 0 -2px 10px 0 rgba(221, 225, 240, 0.5), 0 -1px 0 0 #dde1f0; }
::-webkit-scrollbar {
display: none;
} }
} }
`; `;
@ -194,3 +224,28 @@ export const ScrollableFlex = styled(Flex)`
overflow-x: visible; overflow-x: visible;
} }
`; `;
export const Alert = styled((props) => (
<AlertBase warning emphasized {...props}></AlertBase>
))`
position: fixed;
top: -40px;
left: 50%;
transform: translate(-50%, 0px);
height: 30px;
min-width: 50%;
padding: 0px;
justify-content: center;
align-items: center;
font-size: 14px;
background-color: #fca321;
text-align: center;
* {
color: #ffffff;
}
> div:first-child {
display: none;
}
`;

23
lib/gui/app/theme.ts
View File

@ -90,20 +90,21 @@ export const theme = {
opacity: 1, opacity: 1,
}, },
extend: () => ` extend: () => `
&& { width: 200px;
width: 200px; font-size: 16px;
height: 48px;
font-size: 16px;
:disabled { && {
height: 48px;
}
:disabled {
background-color: ${colors.dark.disabled.background};
color: ${colors.dark.disabled.foreground};
opacity: 1;
:hover {
background-color: ${colors.dark.disabled.background}; background-color: ${colors.dark.disabled.background};
color: ${colors.dark.disabled.foreground}; color: ${colors.dark.disabled.foreground};
opacity: 1;
:hover {
background-color: ${colors.dark.disabled.background};
color: ${colors.dark.disabled.foreground};
}
} }
} }
`, `,

2
lib/gui/modules/child-writer.ts
View File

@ -229,6 +229,7 @@ ipc.connectTo(IPC_SERVER_ID, () => {
const destinations = options.destinations.map((d) => d.device); const destinations = options.destinations.map((d) => d.device);
const imagePath = options.image.path; const imagePath = options.image.path;
log(`Image: ${imagePath}`);
log(`Devices: ${destinations.join(', ')}`); log(`Devices: ${destinations.join(', ')}`);
log(`Umount on success: ${options.unmountOnSuccess}`); log(`Umount on success: ${options.unmountOnSuccess}`);
log(`Validate on success: ${options.validateWriteOnSuccess}`); log(`Validate on success: ${options.validateWriteOnSuccess}`);
@ -248,7 +249,6 @@ ipc.connectTo(IPC_SERVER_ID, () => {
if (options.image.drive) { if (options.image.drive) {
source = new BlockDevice({ source = new BlockDevice({
drive: options.image.drive, drive: options.image.drive,
write: false,
direct: !options.autoBlockmapping, direct: !options.autoBlockmapping,
}); });
} else { } else {

163
lib/shared/drive-constraints.ts
View File

@ -14,10 +14,9 @@
* limitations under the License. * limitations under the License.
*/ */
import { Drive as DrivelistDrive } from 'drivelist'; import { Drive } from 'drivelist';
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as pathIsInside from 'path-is-inside'; import * as pathIsInside from 'path-is-inside';
import * as prettyBytes from 'pretty-bytes';
import * as messages from './messages'; import * as messages from './messages';
import { SourceMetadata } from '../gui/app/components/source-selector/source-selector'; import { SourceMetadata } from '../gui/app/components/source-selector/source-selector';
@ -27,6 +26,14 @@ import { SourceMetadata } from '../gui/app/components/source-selector/source-sel
*/ */
const UNKNOWN_SIZE = 0; const UNKNOWN_SIZE = 0;
export type DrivelistDrive = Drive & {
disabled: boolean;
name: string;
path: string;
logo: string;
displayName: string;
};
/** /**
* @summary Check if a drive is locked * @summary Check if a drive is locked
* *
@ -34,22 +41,14 @@ const UNKNOWN_SIZE = 0;
* This usually points out a locked SD Card. * This usually points out a locked SD Card.
*/ */
export function isDriveLocked(drive: DrivelistDrive): boolean { export function isDriveLocked(drive: DrivelistDrive): boolean {
return Boolean(_.get(drive, ['isReadOnly'], false)); return Boolean(drive.isReadOnly);
} }
/** /**
* @summary Check if a drive is a system drive * @summary Check if a drive is a system drive
*/ */
export function isSystemDrive(drive: DrivelistDrive): boolean { export function isSystemDrive(drive: DrivelistDrive): boolean {
return Boolean(_.get(drive, ['isSystem'], false)); return Boolean(drive.isSystem);
}
export interface Image {
path: string;
isSizeEstimated?: boolean;
compressedSize?: number;
recommendedDriveSize?: number;
size?: number;
} }
function sourceIsInsideDrive(source: string, drive: DrivelistDrive) { function sourceIsInsideDrive(source: string, drive: DrivelistDrive) {
@ -89,17 +88,21 @@ export function isSourceDrive(
* @summary Check if a drive is large enough for an image * @summary Check if a drive is large enough for an image
*/ */
export function isDriveLargeEnough( export function isDriveLargeEnough(
drive: DrivelistDrive | undefined, drive: DrivelistDrive,
image: Image, image?: SourceMetadata,
): boolean { ): boolean {
const driveSize = _.get(drive, 'size') || UNKNOWN_SIZE; const driveSize = drive.size || UNKNOWN_SIZE;
if (_.get(image, ['isSizeEstimated'])) { if (image === undefined) {
return true;
}
if (image.isSizeEstimated) {
// If the drive size is smaller than the original image size, and // If the drive size is smaller than the original image size, and
// the final image size is just an estimation, then we stop right // the final image size is just an estimation, then we stop right
// here, based on the assumption that the final size will never // here, based on the assumption that the final size will never
// be less than the original size. // be less than the original size.
if (driveSize < _.get(image, ['compressedSize'], UNKNOWN_SIZE)) { if (driveSize < (image.compressedSize || UNKNOWN_SIZE)) {
return false; return false;
} }
@ -110,20 +113,23 @@ export function isDriveLargeEnough(
return true; return true;
} }
return driveSize >= _.get(image, ['size'], UNKNOWN_SIZE); return driveSize >= (image.size || UNKNOWN_SIZE);
} }
/** /**
* @summary Check if a drive is disabled (i.e. not ready for selection) * @summary Check if a drive is disabled (i.e. not ready for selection)
*/ */
export function isDriveDisabled(drive: DrivelistDrive): boolean { export function isDriveDisabled(drive: DrivelistDrive): boolean {
return _.get(drive, ['disabled'], false); return drive.disabled || false;
} }
/** /**
* @summary Check if a drive is valid, i.e. not locked and large enough for an image * @summary Check if a drive is valid, i.e. not locked and large enough for an image
*/ */
export function isDriveValid(drive: DrivelistDrive, image: Image): boolean { export function isDriveValid(
drive: DrivelistDrive,
image?: SourceMetadata,
): boolean {
return ( return (
!isDriveLocked(drive) && !isDriveLocked(drive) &&
isDriveLargeEnough(drive, image) && isDriveLargeEnough(drive, image) &&
@ -139,23 +145,23 @@ export function isDriveValid(drive: DrivelistDrive, image: Image): boolean {
* If the image doesn't have a recommended size, this function returns true. * If the image doesn't have a recommended size, this function returns true.
*/ */
export function isDriveSizeRecommended( export function isDriveSizeRecommended(
drive: DrivelistDrive | undefined, drive: DrivelistDrive,
image: Image, image?: SourceMetadata,
): boolean { ): boolean {
const driveSize = _.get(drive, 'size') || UNKNOWN_SIZE; const driveSize = drive.size || UNKNOWN_SIZE;
return driveSize >= _.get(image, ['recommendedDriveSize'], UNKNOWN_SIZE); return driveSize >= (image?.recommendedDriveSize || UNKNOWN_SIZE);
} }
/** /**
* @summary 64GB * @summary 128GB
*/ */
export const LARGE_DRIVE_SIZE = 64e9; export const LARGE_DRIVE_SIZE = 128e9;
/** /**
* @summary Check whether a drive's size is 'large' * @summary Check whether a drive's size is 'large'
*/ */
export function isDriveSizeLarge(drive?: DrivelistDrive): boolean { export function isDriveSizeLarge(drive: DrivelistDrive): boolean {
const driveSize = _.get(drive, 'size') || UNKNOWN_SIZE; const driveSize = drive.size || UNKNOWN_SIZE;
return driveSize > LARGE_DRIVE_SIZE; return driveSize > LARGE_DRIVE_SIZE;
} }
@ -170,6 +176,33 @@ export const COMPATIBILITY_STATUS_TYPES = {
ERROR: 2, ERROR: 2,
}; };
export const statuses = {
locked: {
type: COMPATIBILITY_STATUS_TYPES.ERROR,
message: messages.compatibility.locked(),
},
system: {
type: COMPATIBILITY_STATUS_TYPES.WARNING,
message: messages.compatibility.system(),
},
containsImage: {
type: COMPATIBILITY_STATUS_TYPES.ERROR,
message: messages.compatibility.containsImage(),
},
large: {
type: COMPATIBILITY_STATUS_TYPES.WARNING,
message: messages.compatibility.largeDrive(),
},
small: {
type: COMPATIBILITY_STATUS_TYPES.ERROR,
message: messages.compatibility.tooSmall(),
},
sizeNotRecommended: {
type: COMPATIBILITY_STATUS_TYPES.WARNING,
message: messages.compatibility.sizeNotRecommended(),
},
};
/** /**
* @summary Get drive/image compatibility in an object * @summary Get drive/image compatibility in an object
* *
@ -182,7 +215,7 @@ export const COMPATIBILITY_STATUS_TYPES = {
*/ */
export function getDriveImageCompatibilityStatuses( export function getDriveImageCompatibilityStatuses(
drive: DrivelistDrive, drive: DrivelistDrive,
image: Image, image?: SourceMetadata,
) { ) {
const statusList = []; const statusList = [];
@ -197,41 +230,25 @@ export function getDriveImageCompatibilityStatuses(
!_.isNil(drive.size) && !_.isNil(drive.size) &&
!isDriveLargeEnough(drive, image) !isDriveLargeEnough(drive, image)
) { ) {
const imageSize = (image.isSizeEstimated statusList.push(statuses.small);
? image.compressedSize
: image.size) as number;
const relativeBytes = imageSize - drive.size;
statusList.push({
type: COMPATIBILITY_STATUS_TYPES.ERROR,
message: messages.compatibility.tooSmall(prettyBytes(relativeBytes)),
});
} else { } else {
if (isSourceDrive(drive, image as SourceMetadata)) { // Avoid showing "large drive" with "system drive" status
statusList.push({
type: COMPATIBILITY_STATUS_TYPES.ERROR,
message: messages.compatibility.containsImage(),
});
}
if (isSystemDrive(drive)) { if (isSystemDrive(drive)) {
statusList.push({ statusList.push(statuses.system);
type: COMPATIBILITY_STATUS_TYPES.WARNING, } else if (isDriveSizeLarge(drive)) {
message: messages.compatibility.system(), statusList.push(statuses.large);
});
} }
if (isDriveSizeLarge(drive)) { if (isSourceDrive(drive, image as SourceMetadata)) {
statusList.push({ statusList.push(statuses.containsImage);
type: COMPATIBILITY_STATUS_TYPES.WARNING,
message: messages.compatibility.largeDrive(),
});
} }
if (!_.isNil(drive) && !isDriveSizeRecommended(drive, image)) { if (
statusList.push({ image !== undefined &&
type: COMPATIBILITY_STATUS_TYPES.WARNING, !_.isNil(drive) &&
message: messages.compatibility.sizeNotRecommended(), !isDriveSizeRecommended(drive, image)
}); ) {
statusList.push(statuses.sizeNotRecommended);
} }
} }
@ -247,9 +264,9 @@ export function getDriveImageCompatibilityStatuses(
*/ */
export function getListDriveImageCompatibilityStatuses( export function getListDriveImageCompatibilityStatuses(
drives: DrivelistDrive[], drives: DrivelistDrive[],
image: Image, image: SourceMetadata,
) { ) {
return _.flatMap(drives, (drive) => { return drives.flatMap((drive) => {
return getDriveImageCompatibilityStatuses(drive, image); return getDriveImageCompatibilityStatuses(drive, image);
}); });
} }
@ -262,35 +279,11 @@ export function getListDriveImageCompatibilityStatuses(
*/ */
export function hasDriveImageCompatibilityStatus( export function hasDriveImageCompatibilityStatus(
drive: DrivelistDrive, drive: DrivelistDrive,
image: Image, image: SourceMetadata,
) { ) {
return Boolean(getDriveImageCompatibilityStatuses(drive, image).length); return Boolean(getDriveImageCompatibilityStatuses(drive, image).length);
} }
/**
* @summary Does any drive/image pair have at least one compatibility status?
* @function
* @public
*
* @description
* Given an image and a drive, return whether they have a connected compatibility status object.
*
* @param {Object[]} drives - drives
* @param {Object} image - image
* @returns {Boolean}
*
* @example
* if (constraints.hasDriveImageCompatibilityStatus(drive, image)) {
* console.log('This drive-image pair has a compatibility status message!')
* }
*/
export function hasListDriveImageCompatibilityStatus(
drives: DrivelistDrive[],
image: Image,
) {
return Boolean(getListDriveImageCompatibilityStatuses(drives, image).length);
}
export interface DriveStatus { export interface DriveStatus {
message: string; message: string;
type: number; type: number;

26
lib/shared/messages.ts
View File

@ -15,6 +15,7 @@
*/ */
import { Dictionary } from 'lodash'; import { Dictionary } from 'lodash';
import * as prettyBytes from 'pretty-bytes';
export const progress: Dictionary<(quantity: number) => string> = { export const progress: Dictionary<(quantity: number) => string> = {
successful: (quantity: number) => { successful: (quantity: number) => {
@ -53,11 +54,11 @@ export const info = {
export const compatibility = { export const compatibility = {
sizeNotRecommended: () => { sizeNotRecommended: () => {
return 'Not Recommended'; return 'Not recommended';
}, },
tooSmall: (additionalSpace: string) => { tooSmall: () => {
return `Insufficient space, additional ${additionalSpace} required`; return 'Too small';
}, },
locked: () => { locked: () => {
@ -84,8 +85,8 @@ export const warning = {
drive: { device: string; size: number }, drive: { device: string; size: number },
) => { ) => {
return [ return [
`This image recommends a ${image.recommendedDriveSize}`, `This image recommends a ${prettyBytes(image.recommendedDriveSize)}`,
`bytes drive, however ${drive.device} is only ${drive.size} bytes.`, `drive, however ${drive.device} is only ${prettyBytes(drive.size)}.`,
].join(' '); ].join(' ');
}, },
@ -115,11 +116,16 @@ export const warning = {
].join(' '); ].join(' ');
}, },
largeDriveSize: (drive: { description: string; device: string }) => { largeDriveSize: () => {
return [ return 'This is a large drive! Make sure it doesn\'t contain files that you want to keep.';
`Drive ${drive.description} (${drive.device}) is unusually large for an SD card or USB stick.`, },
'\n\nAre you sure you want to flash this drive?',
].join(' '); systemDrive: () => {
return 'Selecting your system drive is dangerous and will erase your drive!';
},
sourceDrive: () => {
return 'Contains the image you chose to flash';
}, },
}; };

7
lib/shared/units.ts
View File

@ -23,9 +23,6 @@ export function bytesToMegabytes(bytes: number): number {
return bytes / MEGABYTE_TO_BYTE_RATIO; return bytes / MEGABYTE_TO_BYTE_RATIO;
} }
export function bytesToClosestUnit(bytes: number): string | null { export function bytesToClosestUnit(bytes: number): string {
if (_.isNumber(bytes)) { return prettyBytes(bytes);
return prettyBytes(bytes);
}
return null;
} }

7
tests/gui/modules/image-writer.spec.ts
View File

@ -20,6 +20,7 @@ import { sourceDestination } from 'etcher-sdk';
import * as ipc from 'node-ipc'; import * as ipc from 'node-ipc';
import { assert, SinonStub, stub } from 'sinon'; import { assert, SinonStub, stub } from 'sinon';
import { SourceMetadata } from '../../../lib/gui/app/components/source-selector/source-selector';
import * as flashState from '../../../lib/gui/app/models/flash-state'; import * as flashState from '../../../lib/gui/app/models/flash-state';
import * as imageWriter from '../../../lib/gui/app/modules/image-writer'; import * as imageWriter from '../../../lib/gui/app/modules/image-writer';
@ -28,9 +29,11 @@ const fakeDrive: DrivelistDrive = {};
describe('Browser: imageWriter', () => { describe('Browser: imageWriter', () => {
describe('.flash()', () => { describe('.flash()', () => {
const image = { const image: SourceMetadata = {
hasMBR: false, hasMBR: false,
partitions: [], partitions: [],
description: 'foo.img',
displayName: 'foo.img',
path: 'foo.img', path: 'foo.img',
SourceType: sourceDestination.File, SourceType: sourceDestination.File,
extension: 'img', extension: 'img',
@ -60,7 +63,7 @@ describe('Browser: imageWriter', () => {
}); });
try { try {
imageWriter.flash(image, [fakeDrive], performWriteStub); await imageWriter.flash(image, [fakeDrive], performWriteStub);
} catch { } catch {
// noop // noop
} finally { } finally {

490
tests/shared/drive-constraints.spec.ts
View File

@ -15,10 +15,9 @@
*/ */
import { expect } from 'chai'; import { expect } from 'chai';
import { Drive as DrivelistDrive } from 'drivelist';
import { sourceDestination } from 'etcher-sdk'; import { sourceDestination } from 'etcher-sdk';
import * as _ from 'lodash';
import * as path from 'path'; import * as path from 'path';
import { SourceMetadata } from '../../lib/gui/app/components/source-selector/source-selector';
import * as constraints from '../../lib/shared/drive-constraints'; import * as constraints from '../../lib/shared/drive-constraints';
import * as messages from '../../lib/shared/messages'; import * as messages from '../../lib/shared/messages';
@ -30,7 +29,7 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk2', device: '/dev/disk2',
size: 999999999, size: 999999999,
isReadOnly: true, isReadOnly: true,
} as DrivelistDrive); } as constraints.DrivelistDrive);
expect(result).to.be.true; expect(result).to.be.true;
}); });
@ -40,7 +39,7 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk2', device: '/dev/disk2',
size: 999999999, size: 999999999,
isReadOnly: false, isReadOnly: false,
} as DrivelistDrive); } as constraints.DrivelistDrive);
expect(result).to.be.false; expect(result).to.be.false;
}); });
@ -49,16 +48,10 @@ describe('Shared: DriveConstraints', function () {
const result = constraints.isDriveLocked({ const result = constraints.isDriveLocked({
device: '/dev/disk2', device: '/dev/disk2',
size: 999999999, size: 999999999,
} as DrivelistDrive); } as constraints.DrivelistDrive);
expect(result).to.be.false; expect(result).to.be.false;
}); });
it('should return false if the drive is undefined', function () {
// @ts-ignore
const result = constraints.isDriveLocked(undefined);
expect(result).to.be.false;
});
}); });
describe('.isSystemDrive()', function () { describe('.isSystemDrive()', function () {
@ -68,7 +61,7 @@ describe('Shared: DriveConstraints', function () {
size: 999999999, size: 999999999,
isReadOnly: true, isReadOnly: true,
isSystem: true, isSystem: true,
} as DrivelistDrive); } as constraints.DrivelistDrive);
expect(result).to.be.true; expect(result).to.be.true;
}); });
@ -78,7 +71,7 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk2', device: '/dev/disk2',
size: 999999999, size: 999999999,
isReadOnly: true, isReadOnly: true,
} as DrivelistDrive); } as constraints.DrivelistDrive);
expect(result).to.be.false; expect(result).to.be.false;
}); });
@ -89,16 +82,10 @@ describe('Shared: DriveConstraints', function () {
size: 999999999, size: 999999999,
isReadOnly: true, isReadOnly: true,
isSystem: false, isSystem: false,
} as DrivelistDrive); } as constraints.DrivelistDrive);
expect(result).to.be.false; expect(result).to.be.false;
}); });
it('should return false if the drive is undefined', function () {
// @ts-ignore
const result = constraints.isSystemDrive(undefined);
expect(result).to.be.false;
});
}); });
describe('.isSourceDrive()', function () { describe('.isSourceDrive()', function () {
@ -109,7 +96,7 @@ describe('Shared: DriveConstraints', function () {
size: 999999999, size: 999999999,
isReadOnly: true, isReadOnly: true,
isSystem: false, isSystem: false,
} as DrivelistDrive, } as constraints.DrivelistDrive,
// @ts-ignore // @ts-ignore
undefined, undefined,
); );
@ -124,8 +111,10 @@ describe('Shared: DriveConstraints', function () {
size: 999999999, size: 999999999,
isReadOnly: true, isReadOnly: true,
isSystem: false, isSystem: false,
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
description: 'image.img',
displayName: 'image.img',
path: '/Volumes/Untitled/image.img', path: '/Volumes/Untitled/image.img',
hasMBR: false, hasMBR: false,
partitions: [], partitions: [],
@ -137,6 +126,14 @@ describe('Shared: DriveConstraints', function () {
}); });
describe('given Windows paths', function () { describe('given Windows paths', function () {
const windowsImage: SourceMetadata = {
description: 'image.img',
displayName: 'image.img',
path: 'E:\\image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
};
beforeEach(function () { beforeEach(function () {
this.separator = path.sep; this.separator = path.sep;
// @ts-ignore // @ts-ignore
@ -161,13 +158,8 @@ describe('Shared: DriveConstraints', function () {
path: 'F:', path: 'F:',
}, },
], ],
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ windowsImage,
path: 'E:\\image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
},
); );
expect(result).to.be.true; expect(result).to.be.true;
@ -186,12 +178,10 @@ describe('Shared: DriveConstraints', function () {
path: 'F:', path: 'F:',
}, },
], ],
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
...windowsImage,
path: 'E:\\foo\\bar\\image.img', path: 'E:\\foo\\bar\\image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
}, },
); );
@ -211,12 +201,10 @@ describe('Shared: DriveConstraints', function () {
path: 'F:', path: 'F:',
}, },
], ],
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
...windowsImage,
path: 'G:\\image.img', path: 'G:\\image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
}, },
); );
@ -232,12 +220,10 @@ describe('Shared: DriveConstraints', function () {
path: 'E:\\fo', path: 'E:\\fo',
}, },
], ],
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
...windowsImage,
path: 'E:\\foo/image.img', path: 'E:\\foo/image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
}, },
); );
@ -246,6 +232,14 @@ describe('Shared: DriveConstraints', function () {
}); });
describe('given UNIX paths', function () { describe('given UNIX paths', function () {
const image: SourceMetadata = {
description: 'image.img',
displayName: 'image.img',
path: '/Volumes/Untitled/image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
};
beforeEach(function () { beforeEach(function () {
this.separator = path.sep; this.separator = path.sep;
// @ts-ignore // @ts-ignore
@ -265,12 +259,10 @@ describe('Shared: DriveConstraints', function () {
path: '/', path: '/',
}, },
], ],
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
...image,
path: '/image.img', path: '/image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
}, },
); );
@ -288,12 +280,10 @@ describe('Shared: DriveConstraints', function () {
path: '/Volumes/B', path: '/Volumes/B',
}, },
], ],
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
...image,
path: '/Volumes/A/image.img', path: '/Volumes/A/image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
}, },
); );
@ -311,12 +301,10 @@ describe('Shared: DriveConstraints', function () {
path: '/Volumes/B', path: '/Volumes/B',
}, },
], ],
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
...image,
path: '/Volumes/A/foo/bar/image.img', path: '/Volumes/A/foo/bar/image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
}, },
); );
@ -334,12 +322,10 @@ describe('Shared: DriveConstraints', function () {
path: '/Volumes/B', path: '/Volumes/B',
}, },
], ],
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
...image,
path: '/Volumes/C/image.img', path: '/Volumes/C/image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
}, },
); );
@ -354,12 +340,10 @@ describe('Shared: DriveConstraints', function () {
path: '/Volumes/fo', path: '/Volumes/fo',
}, },
], ],
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
...image,
path: '/Volumes/foo/image.img', path: '/Volumes/foo/image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
}, },
); );
@ -546,35 +530,19 @@ describe('Shared: DriveConstraints', function () {
}); });
}); });
it('should return false if the drive is undefined', function () {
const result = constraints.isDriveLargeEnough(undefined, {
path: path.join(__dirname, 'rpi.img'),
size: 1000000000,
isSizeEstimated: false,
});
expect(result).to.be.false;
});
it('should return true if the image is undefined', function () { it('should return true if the image is undefined', function () {
const result = constraints.isDriveLargeEnough( const result = constraints.isDriveLargeEnough(
{ {
device: '/dev/disk1', device: '/dev/disk1',
size: 1000000000, size: 1000000000,
isReadOnly: false, isReadOnly: false,
} as DrivelistDrive, } as constraints.DrivelistDrive,
// @ts-ignore // @ts-ignore
undefined, undefined,
); );
expect(result).to.be.true; expect(result).to.be.true;
}); });
it('should return false if the drive and image are undefined', function () {
// @ts-ignore
const result = constraints.isDriveLargeEnough(undefined, undefined);
expect(result).to.be.true;
});
}); });
describe('.isDriveDisabled()', function () { describe('.isDriveDisabled()', function () {
@ -584,7 +552,7 @@ describe('Shared: DriveConstraints', function () {
size: 1000000000, size: 1000000000,
isReadOnly: false, isReadOnly: false,
disabled: true, disabled: true,
} as unknown) as DrivelistDrive); } as unknown) as constraints.DrivelistDrive);
expect(result).to.be.true; expect(result).to.be.true;
}); });
@ -595,7 +563,7 @@ describe('Shared: DriveConstraints', function () {
size: 1000000000, size: 1000000000,
isReadOnly: false, isReadOnly: false,
disabled: false, disabled: false,
} as unknown) as DrivelistDrive); } as unknown) as constraints.DrivelistDrive);
expect(result).to.be.false; expect(result).to.be.false;
}); });
@ -605,26 +573,30 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk1', device: '/dev/disk1',
size: 1000000000, size: 1000000000,
isReadOnly: false, isReadOnly: false,
} as DrivelistDrive); } as constraints.DrivelistDrive);
expect(result).to.be.false; expect(result).to.be.false;
}); });
}); });
describe('.isDriveSizeRecommended()', function () { describe('.isDriveSizeRecommended()', function () {
const image: SourceMetadata = {
description: 'rpi.img',
displayName: 'rpi.img',
path: path.join(__dirname, 'rpi.img'),
size: 1000000000,
isSizeEstimated: false,
recommendedDriveSize: 2000000000,
SourceType: sourceDestination.File,
};
it('should return true if the drive size is greater than the recommended size ', function () { it('should return true if the drive size is greater than the recommended size ', function () {
const result = constraints.isDriveSizeRecommended( const result = constraints.isDriveSizeRecommended(
{ {
device: '/dev/disk1', device: '/dev/disk1',
size: 2000000001, size: 2000000001,
isReadOnly: false, isReadOnly: false,
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ image,
path: path.join(__dirname, 'rpi.img'),
size: 1000000000,
isSizeEstimated: false,
recommendedDriveSize: 2000000000,
},
); );
expect(result).to.be.true; expect(result).to.be.true;
@ -636,13 +608,8 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk1', device: '/dev/disk1',
size: 2000000000, size: 2000000000,
isReadOnly: false, isReadOnly: false,
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ image,
path: path.join(__dirname, 'rpi.img'),
size: 1000000000,
isSizeEstimated: false,
recommendedDriveSize: 2000000000,
},
); );
expect(result).to.be.true; expect(result).to.be.true;
@ -654,11 +621,9 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk1', device: '/dev/disk1',
size: 2000000000, size: 2000000000,
isReadOnly: false, isReadOnly: false,
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
path: path.join(__dirname, 'rpi.img'), ...image,
size: 1000000000,
isSizeEstimated: false,
recommendedDriveSize: 2000000001, recommendedDriveSize: 2000000001,
}, },
); );
@ -672,47 +637,29 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk1', device: '/dev/disk1',
size: 2000000000, size: 2000000000,
isReadOnly: false, isReadOnly: false,
} as DrivelistDrive, } as constraints.DrivelistDrive,
{ {
path: path.join(__dirname, 'rpi.img'), ...image,
size: 1000000000, recommendedDriveSize: undefined,
isSizeEstimated: false,
}, },
); );
expect(result).to.be.true; expect(result).to.be.true;
}); });
it('should return false if the drive is undefined', function () {
const result = constraints.isDriveSizeRecommended(undefined, {
path: path.join(__dirname, 'rpi.img'),
size: 1000000000,
isSizeEstimated: false,
recommendedDriveSize: 1000000000,
});
expect(result).to.be.false;
});
it('should return true if the image is undefined', function () { it('should return true if the image is undefined', function () {
const result = constraints.isDriveSizeRecommended( const result = constraints.isDriveSizeRecommended(
{ {
device: '/dev/disk1', device: '/dev/disk1',
size: 2000000000, size: 2000000000,
isReadOnly: false, isReadOnly: false,
} as DrivelistDrive, } as constraints.DrivelistDrive,
// @ts-ignore // @ts-ignore
undefined, undefined,
); );
expect(result).to.be.true; expect(result).to.be.true;
}); });
it('should return false if the drive and image are undefined', function () {
// @ts-ignore
const result = constraints.isDriveSizeRecommended(undefined, undefined);
expect(result).to.be.true;
});
}); });
describe('.isDriveValid()', function () { describe('.isDriveValid()', function () {
@ -740,16 +687,29 @@ describe('Shared: DriveConstraints', function () {
}); });
describe('given the drive is disabled', function () { describe('given the drive is disabled', function () {
const image: SourceMetadata = {
description: 'rpi.img',
displayName: 'rpi.img',
path: '',
SourceType: sourceDestination.File,
size: 2000000000,
isSizeEstimated: false,
};
beforeEach(function () { beforeEach(function () {
this.drive.disabled = true; this.drive.disabled = true;
}); });
it('should return false if the drive is not large enough and is a source drive', function () { it('should return false if the drive is not large enough and is a source drive', function () {
console.log('YAYYY', {
...image,
path: path.join(this.mountpoint, 'rpi.img'),
size: 5000000000,
});
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'), path: path.join(this.mountpoint, 'rpi.img'),
size: 5000000000, size: 5000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
@ -757,35 +717,35 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is not a source drive', function () { it('should return false if the drive is not large enough and is not a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'), path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 5000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
it('should return false if the drive is large enough and is a source drive', function () { it('should return false if the drive is large enough and is a source drive', function () {
expect( expect(constraints.isDriveValid(this.drive, image)).to.be.false;
constraints.isDriveValid(this.drive, {
path: path.join(this.mountpoint, 'rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
}); });
it('should return false if the drive is large enough and is not a source drive', function () { it('should return false if the drive is large enough and is not a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'), path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
}); });
describe('given the drive is not disabled', function () { describe('given the drive is not disabled', function () {
const image: SourceMetadata = {
description: 'rpi.img',
displayName: 'rpi.img',
path: '',
SourceType: sourceDestination.File,
size: 2000000000,
isSizeEstimated: false,
};
beforeEach(function () { beforeEach(function () {
this.drive.disabled = false; this.drive.disabled = false;
}); });
@ -793,9 +753,9 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is a source drive', function () { it('should return false if the drive is not large enough and is a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'), path: path.join(this.mountpoint, 'rpi.img'),
size: 5000000000, size: 5000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
@ -803,29 +763,22 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is not a source drive', function () { it('should return false if the drive is not large enough and is not a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'), path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 5000000000, size: 5000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
it('should return false if the drive is large enough and is a source drive', function () { it('should return false if the drive is large enough and is a source drive', function () {
expect( expect(constraints.isDriveValid(this.drive, image)).to.be.false;
constraints.isDriveValid(this.drive, {
path: path.join(this.mountpoint, 'rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
}); });
it('should return false if the drive is large enough and is not a source drive', function () { it('should return false if the drive is large enough and is not a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'), path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
@ -833,6 +786,14 @@ describe('Shared: DriveConstraints', function () {
}); });
describe('given the drive is not locked', function () { describe('given the drive is not locked', function () {
const image: SourceMetadata = {
description: 'rpi.img',
displayName: 'rpi.img',
path: '',
SourceType: sourceDestination.File,
size: 2000000000,
isSizeEstimated: false,
};
beforeEach(function () { beforeEach(function () {
this.drive.isReadOnly = false; this.drive.isReadOnly = false;
}); });
@ -845,9 +806,9 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is a source drive', function () { it('should return false if the drive is not large enough and is a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'), path: path.join(this.mountpoint, 'rpi.img'),
size: 5000000000, size: 5000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
@ -855,29 +816,22 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is not a source drive', function () { it('should return false if the drive is not large enough and is not a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'), path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 5000000000, size: 5000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
it('should return false if the drive is large enough and is a source drive', function () { it('should return false if the drive is large enough and is a source drive', function () {
expect( expect(constraints.isDriveValid(this.drive, image)).to.be.false;
constraints.isDriveValid(this.drive, {
path: path.join(this.mountpoint, 'rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
}); });
it('should return false if the drive is large enough and is not a source drive', function () { it('should return false if the drive is large enough and is not a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'), path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
@ -891,9 +845,9 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is a source drive', function () { it('should return false if the drive is not large enough and is a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'), path: path.join(this.mountpoint, 'rpi.img'),
size: 5000000000, size: 5000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
@ -901,9 +855,9 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is not a source drive', function () { it('should return false if the drive is not large enough and is not a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'), path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 5000000000, size: 5000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
@ -911,9 +865,8 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is large enough and is a source drive', function () { it('should return false if the drive is large enough and is a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'), path: path.join(this.mountpoint, 'rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}), }),
).to.be.false; ).to.be.false;
}); });
@ -921,9 +874,8 @@ describe('Shared: DriveConstraints', function () {
it('should return true if the drive is large enough and is not a source drive', function () { it('should return true if the drive is large enough and is not a source drive', function () {
expect( expect(
constraints.isDriveValid(this.drive, { constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'), path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}), }),
).to.be.true; ).to.be.true;
}); });
@ -947,6 +899,7 @@ describe('Shared: DriveConstraints', function () {
}; };
this.image = { this.image = {
SourceType: sourceDestination.File,
path: path.join(__dirname, 'rpi.img'), path: path.join(__dirname, 'rpi.img'),
size: this.drive.size - 1, size: this.drive.size - 1,
isSizeEstimated: false, isSizeEstimated: false,
@ -991,28 +944,41 @@ describe('Shared: DriveConstraints', function () {
}; };
this.image = { this.image = {
SourceType: sourceDestination.File,
path: path.join(__dirname, 'rpi.img'), path: path.join(__dirname, 'rpi.img'),
size: this.drive.size - 1, size: this.drive.size - 1,
isSizeEstimated: false, isSizeEstimated: false,
}; };
}); });
const compareTuplesMessages = (
tuple1: { message: string },
tuple2: { message: string },
) => {
if (tuple1.message.toLowerCase() === tuple2.message.toLowerCase()) {
return 0;
}
return tuple1.message.toLowerCase() > tuple2.message.toLowerCase()
? 1
: -1;
};
const expectStatusTypesAndMessagesToBe = ( const expectStatusTypesAndMessagesToBe = (
resultList: Array<{ message: string }>, resultList: Array<{ message: string }>,
expectedTuples: Array<['WARNING' | 'ERROR', string]>, expectedTuples: Array<['WARNING' | 'ERROR', string]>,
params?: number,
) => { ) => {
// Sort so that order doesn't matter // Sort so that order doesn't matter
const expectedTuplesSorted = _.sortBy( const expectedTuplesSorted = expectedTuples
_.map(expectedTuples, (tuple) => { .map((tuple) => {
return { return {
type: constraints.COMPATIBILITY_STATUS_TYPES[tuple[0]], type: constraints.COMPATIBILITY_STATUS_TYPES[tuple[0]],
// @ts-ignore // @ts-ignore
message: messages.compatibility[tuple[1]](), message: messages.compatibility[tuple[1]](params),
}; };
}), })
['message'], .sort(compareTuplesMessages);
); const resultTuplesSorted = resultList.sort(compareTuplesMessages);
const resultTuplesSorted = _.sortBy(resultList, ['message']);
expect(resultTuplesSorted).to.deep.equal(expectedTuplesSorted); expect(resultTuplesSorted).to.deep.equal(expectedTuplesSorted);
}; };
@ -1082,7 +1048,7 @@ describe('Shared: DriveConstraints', function () {
); );
const expected = [ const expected = [
{ {
message: messages.compatibility.tooSmall('1 B'), message: messages.compatibility.tooSmall(),
type: constraints.COMPATIBILITY_STATUS_TYPES.ERROR, type: constraints.COMPATIBILITY_STATUS_TYPES.ERROR,
}, },
]; ];
@ -1148,11 +1114,14 @@ describe('Shared: DriveConstraints', function () {
this.drive, this.drive,
this.image, this.image,
); );
// @ts-ignore
const expectedTuples = [['WARNING', 'largeDrive']]; const expectedTuples = [['WARNING', 'largeDrive']];
// @ts-ignore expectStatusTypesAndMessagesToBe(
expectStatusTypesAndMessagesToBe(result, expectedTuples); result,
// @ts-ignore
expectedTuples,
this.drive.size,
);
}); });
}); });
@ -1200,7 +1169,7 @@ describe('Shared: DriveConstraints', function () {
); );
const expected = [ const expected = [
{ {
message: messages.compatibility.tooSmall('1 B'), message: messages.compatibility.tooSmall(),
type: constraints.COMPATIBILITY_STATUS_TYPES.ERROR, type: constraints.COMPATIBILITY_STATUS_TYPES.ERROR,
}, },
]; ];
@ -1251,7 +1220,7 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [{ path: __dirname }], mountpoints: [{ path: __dirname }],
isSystem: false, isSystem: false,
isReadOnly: false, isReadOnly: false,
} as unknown) as DrivelistDrive, } as unknown) as constraints.DrivelistDrive,
({ ({
device: drivePaths[1], device: drivePaths[1],
description: 'My Other Drive', description: 'My Other Drive',
@ -1260,7 +1229,7 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [], mountpoints: [],
isSystem: false, isSystem: false,
isReadOnly: true, isReadOnly: true,
} as unknown) as DrivelistDrive, } as unknown) as constraints.DrivelistDrive,
({ ({
device: drivePaths[2], device: drivePaths[2],
description: 'My Drive', description: 'My Drive',
@ -1269,7 +1238,7 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [], mountpoints: [],
isSystem: false, isSystem: false,
isReadOnly: false, isReadOnly: false,
} as unknown) as DrivelistDrive, } as unknown) as constraints.DrivelistDrive,
({ ({
device: drivePaths[3], device: drivePaths[3],
description: 'My Drive', description: 'My Drive',
@ -1278,16 +1247,16 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [], mountpoints: [],
isSystem: true, isSystem: true,
isReadOnly: false, isReadOnly: false,
} as unknown) as DrivelistDrive, } as unknown) as constraints.DrivelistDrive,
({ ({
device: drivePaths[4], device: drivePaths[4],
description: 'My Drive', description: 'My Drive',
size: 64000000001, size: 128000000001,
displayName: drivePaths[4], displayName: drivePaths[4],
mountpoints: [], mountpoints: [],
isSystem: false, isSystem: false,
isReadOnly: false, isReadOnly: false,
} as unknown) as DrivelistDrive, } as unknown) as constraints.DrivelistDrive,
({ ({
device: drivePaths[5], device: drivePaths[5],
description: 'My Drive', description: 'My Drive',
@ -1296,7 +1265,7 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [], mountpoints: [],
isSystem: false, isSystem: false,
isReadOnly: false, isReadOnly: false,
} as unknown) as DrivelistDrive, } as unknown) as constraints.DrivelistDrive,
({ ({
device: drivePaths[6], device: drivePaths[6],
description: 'My Drive', description: 'My Drive',
@ -1305,11 +1274,14 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [], mountpoints: [],
isSystem: false, isSystem: false,
isReadOnly: false, isReadOnly: false,
} as unknown) as DrivelistDrive, } as unknown) as constraints.DrivelistDrive,
]; ];
const image = { const image: SourceMetadata = {
description: 'rpi.img',
displayName: 'rpi.img',
path: path.join(__dirname, 'rpi.img'), path: path.join(__dirname, 'rpi.img'),
SourceType: sourceDestination.File,
// @ts-ignore // @ts-ignore
size: drives[2].size + 1, size: drives[2].size + 1,
isSizeEstimated: false, isSizeEstimated: false,
@ -1362,7 +1334,7 @@ describe('Shared: DriveConstraints', function () {
), ),
).to.deep.equal([ ).to.deep.equal([
{ {
message: 'Insufficient space, additional 1 B required', message: 'Too small',
type: 2, type: 2,
}, },
]); ]);
@ -1404,7 +1376,7 @@ describe('Shared: DriveConstraints', function () {
), ),
).to.deep.equal([ ).to.deep.equal([
{ {
message: 'Not Recommended', message: 'Not recommended',
type: 1, type: 1,
}, },
]); ]);
@ -1425,7 +1397,7 @@ describe('Shared: DriveConstraints', function () {
type: 2, type: 2,
}, },
{ {
message: 'Insufficient space, additional 1 B required', message: 'Too small',
type: 2, type: 2,
}, },
{ {
@ -1437,157 +1409,11 @@ describe('Shared: DriveConstraints', function () {
type: 1, type: 1,
}, },
{ {
message: 'Not Recommended', message: 'Not recommended',
type: 1, type: 1,
}, },
]); ]);
}); });
}); });
}); });
describe('.hasListDriveImageCompatibilityStatus()', function () {
const drivePaths =
process.platform === 'win32'
? ['E:\\', 'F:\\', 'G:\\', 'H:\\', 'J:\\', 'K:\\']
: [
'/dev/disk1',
'/dev/disk2',
'/dev/disk3',
'/dev/disk4',
'/dev/disk5',
'/dev/disk6',
];
const drives = [
({
device: drivePaths[0],
description: 'My Drive',
size: 123456789,
displayName: drivePaths[0],
mountpoints: [{ path: __dirname }],
isSystem: false,
isReadOnly: false,
} as unknown) as DrivelistDrive,
({
device: drivePaths[1],
description: 'My Other Drive',
size: 123456789,
displayName: drivePaths[1],
mountpoints: [],
isSystem: false,
isReadOnly: true,
} as unknown) as DrivelistDrive,
({
device: drivePaths[2],
description: 'My Drive',
size: 1234567,
displayName: drivePaths[2],
mountpoints: [],
isSystem: false,
isReadOnly: false,
} as unknown) as DrivelistDrive,
({
device: drivePaths[3],
description: 'My Drive',
size: 123456789,
displayName: drivePaths[3],
mountpoints: [],
isSystem: true,
isReadOnly: false,
} as unknown) as DrivelistDrive,
({
device: drivePaths[4],
description: 'My Drive',
size: 64000000001,
displayName: drivePaths[4],
mountpoints: [],
isSystem: false,
isReadOnly: false,
} as unknown) as DrivelistDrive,
({
device: drivePaths[5],
description: 'My Drive',
size: 12345678,
displayName: drivePaths[5],
mountpoints: [],
isSystem: false,
isReadOnly: false,
} as unknown) as DrivelistDrive,
({
device: drivePaths[6],
description: 'My Drive',
size: 123456789,
displayName: drivePaths[6],
mountpoints: [],
isSystem: false,
isReadOnly: false,
} as unknown) as DrivelistDrive,
];
const image = {
path: path.join(__dirname, 'rpi.img'),
// @ts-ignore
size: drives[2].size + 1,
isSizeEstimated: false,
// @ts-ignore
recommendedDriveSize: drives[5].size + 1,
};
describe('given no drives', function () {
it('should return false', function () {
expect(constraints.hasListDriveImageCompatibilityStatus([], image)).to
.be.false;
});
});
describe('given one drive', function () {
it('should return true given a drive that contains the image', function () {
expect(
constraints.hasListDriveImageCompatibilityStatus([drives[0]], image),
).to.be.true;
});
it('should return true given a drive that is locked', function () {
expect(
constraints.hasListDriveImageCompatibilityStatus([drives[1]], image),
).to.be.true;
});
it('should return true given a drive that is too small for the image', function () {
expect(
constraints.hasListDriveImageCompatibilityStatus([drives[2]], image),
).to.be.true;
});
it('should return true given a drive that is a system drive', function () {
expect(
constraints.hasListDriveImageCompatibilityStatus([drives[3]], image),
).to.be.true;
});
it('should return true given a drive that is large', function () {
expect(
constraints.hasListDriveImageCompatibilityStatus([drives[4]], image),
).to.be.true;
});
it('should return true given a drive that is not recommended', function () {
expect(
constraints.hasListDriveImageCompatibilityStatus([drives[5]], image),
).to.be.true;
});
it('should return false given a drive with no warnings or errors', function () {
expect(
constraints.hasListDriveImageCompatibilityStatus([drives[6]], image),
).to.be.false;
});
});
describe('given many drives', function () {
it('should return true given some drives with errors or warnings', function () {
expect(constraints.hasListDriveImageCompatibilityStatus(drives, image))
.to.be.true;
});
});
});
}); });