jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-23 19:26:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3273 from balena-io/add-clone-drive

Browse Source 
Add clone drive
This commit is contained in:
bulldozer-balena[bot] 2020-09-07 09:48:16 +00:00 committed by GitHub
commit b099770cb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 1338 additions and 1279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -47,3 +47,7 @@ node_modules
# OSX files
.DS_Store
# VSCode files
.vscode

10
lib/gui/app/app.ts
View File

@ -23,7 +23,11 @@ import * as ReactDOM from 'react-dom';
import { v4 as uuidV4 } from 'uuid';
import * as packageJSON from '../../../package.json';
import { isDriveValid, isSourceDrive } from '../../shared/drive-constraints';
import {
DrivelistDrive,
isDriveValid,
isSourceDrive,
} from '../../shared/drive-constraints';
import * as EXIT_CODES from '../../shared/exit-codes';
import * as messages from '../../shared/messages';
import * as availableDrives from './models/available-drives';
@ -231,12 +235,12 @@ function prepareDrive(drive: Drive) {
}
}
function setDrives(drives: _.Dictionary<any>) {
function setDrives(drives: _.Dictionary<DrivelistDrive>) {
availableDrives.setDrives(_.values(drives));
}
function getDrives() {
return _.keyBy(availableDrives.getDrives() || [], 'device');
return _.keyBy(availableDrives.getDrives(), 'device');
}
async function addDrive(drive: Drive) {

315
lib/gui/app/components/target-selector/target-selector-modal.tsx → 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 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 {
Flex,
@ -31,25 +31,22 @@ import styled from 'styled-components';
import {
getDriveImageCompatibilityStatuses,
hasListDriveImageCompatibilityStatus,
isDriveValid,
TargetStatus,
Image,
DriveStatus,
DrivelistDrive,
isDriveSizeLarge,
} from '../../../../shared/drive-constraints';
import { compatibility } from '../../../../shared/messages';
import { bytesToClosestUnit } from '../../../../shared/units';
import { compatibility, warning } from '../../../../shared/messages';
import * as prettyBytes from 'pretty-bytes';
import { getDrives, hasAvailableDrives } from '../../models/available-drives';
import {
getImage,
getSelectedDrives,
isDriveSelected,
} from '../../models/selection-state';
import { getImage, isDriveSelected } from '../../models/selection-state';
import { store } from '../../models/store';
import { logEvent, logException } from '../../modules/analytics';
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 TargetSVGIcon from '../../../assets/tgt.svg';
import DriveSVGIcon from '../../../assets/tgt.svg';
import { SourceMetadata } from '../source-selector/source-selector';
interface UsbbootDrive extends sourceDestination.UsbbootDrive {
progress: number;
@ -64,47 +61,88 @@ interface DriverlessDrive {
linkCTA: string;
}
type Target = scanner.adapters.DrivelistDrive | DriverlessDrive | UsbbootDrive;
type Drive = DrivelistDrive | DriverlessDrive | UsbbootDrive;
function isUsbbootDrive(drive: Target): drive is UsbbootDrive {
function isUsbbootDrive(drive: Drive): drive is UsbbootDrive {
return (drive as UsbbootDrive).progress !== undefined;
}
function isDriverlessDrive(drive: Target): drive is DriverlessDrive {
function isDriverlessDrive(drive: Drive): drive is DriverlessDrive {
return (drive as DriverlessDrive).link !== undefined;
}
function isDrivelistDrive(
drive: Target,
): drive is scanner.adapters.DrivelistDrive {
return typeof (drive as scanner.adapters.DrivelistDrive).size === 'number';
function isDrivelistDrive(drive: Drive): drive is DrivelistDrive {
return typeof (drive as DrivelistDrive).size === 'number';
}
const TargetsTable = styled(({ refFn, ...props }) => {
return (
<div>
<Table<Target> ref={refFn} {...props} />
</div>
);
})`
[data-display='table-head'] [data-display='table-cell'] {
const DrivesTable = styled(({ refFn, ...props }) => (
<div>
<Table<Drive> ref={refFn} {...props} />
</div>
))`
[data-display='table-head']
> [data-display='table-row']
> [data-display='table-cell'] {
position: sticky;
top: 0;
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 {
padding-left: 15px;
}
[data-display='table-body'] > [data-display='table-row'] {
> [data-display='table-cell']:first-child {
padding-left: 15px;
}
[data-display='table-cell']:last-child {
width: 150px;
> [data-display='table-cell']:last-child {
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'] {
padding: 6px 8px;
color: #2a506f;
}
input[type='checkbox'] + div {
border-radius: ${({ multipleSelection }) =>
multipleSelection ? '4px' : '50%'};
}
`;
function badgeShadeFromStatus(status: string) {
@ -112,6 +150,7 @@ function badgeShadeFromStatus(status: string) {
case compatibility.containsImage():
return 16;
case compatibility.system():
case compatibility.tooSmall():
return 5;
default:
return 14;
@ -145,30 +184,42 @@ const InitProgress = styled(
}
`;
interface TargetSelectorModalProps extends Omit<ModalProps, 'done'> {
done: (targets: scanner.adapters.DrivelistDrive[]) => void;
export interface DriveSelectorProps
extends Omit<ModalProps, 'done' | 'cancel'> {
multipleSelection: boolean;
showWarnings?: boolean;
cancel: () => void;
done: (drives: DrivelistDrive[]) => void;
titleLabel: string;
emptyListLabel: string;
selectedList?: DrivelistDrive[];
updateSelectedList?: () => DrivelistDrive[];
}
interface TargetSelectorModalState {
drives: Target[];
image: Image;
interface DriveSelectorState {
drives: Drive[];
image?: SourceMetadata;
missingDriversModal: { drive?: DriverlessDrive };
selectedList: scanner.adapters.DrivelistDrive[];
selectedList: DrivelistDrive[];
showSystemDrives: boolean;
}
export class TargetSelectorModal extends React.Component<
TargetSelectorModalProps,
TargetSelectorModalState
function isSystemDrive(drive: Drive) {
return isDrivelistDrive(drive) && drive.isSystem;
}
export class DriveSelector extends React.Component<
DriveSelectorProps,
DriveSelectorState
> {
private unsubscribe: (() => void) | undefined;
tableColumns: Array<TableColumn<Target>>;
tableColumns: Array<TableColumn<Drive>>;
constructor(props: TargetSelectorModalProps) {
constructor(props: DriveSelectorProps) {
super(props);
const defaultMissingDriversModalState: { drive?: DriverlessDrive } = {};
const selectedList = getSelectedDrives();
const selectedList = this.props.selectedList || [];
this.state = {
drives: getDrives(),
@ -182,24 +233,33 @@ export class TargetSelectorModal extends React.Component<
{
field: 'description',
label: 'Name',
render: (description: string, drive: Target) => {
return isDrivelistDrive(drive) && drive.isSystem ? (
<Flex alignItems="center">
<ExclamationTriangleSvg height="1em" fill="#fca321" />
<Txt ml={8}>{description}</Txt>
</Flex>
) : (
<Txt>{description}</Txt>
);
render: (description: string, drive: Drive) => {
if (isDrivelistDrive(drive)) {
const isLargeDrive = isDriveSizeLarge(drive);
const hasWarnings =
this.props.showWarnings && (isLargeDrive || drive.isSystem);
return (
<Flex alignItems="center">
{hasWarnings && (
<ExclamationTriangleSvg
height="1em"
fill={drive.isSystem ? '#fca321' : '#8f9297'}
/>
)}
<Txt ml={(hasWarnings && 8) || 0}>{description}</Txt>
</Flex>
);
}
return <Txt>{description}</Txt>;
},
},
{
field: 'description',
key: 'size',
label: 'Size',
render: (_description: string, drive: Target) => {
render: (_description: string, drive: Drive) => {
if (isDrivelistDrive(drive) && drive.size !== null) {
return bytesToClosestUnit(drive.size);
return prettyBytes(drive.size);
}
},
},
@ -207,7 +267,7 @@ export class TargetSelectorModal extends React.Component<
field: 'description',
key: 'link',
label: 'Location',
render: (_description: string, drive: Target) => {
render: (_description: string, drive: Drive) => {
return (
<Txt>
{drive.displayName}
@ -229,22 +289,20 @@ export class TargetSelectorModal extends React.Component<
{
field: 'description',
key: 'extra',
// Space as empty string would use the field name as label
label: ' ',
render: (_description: string, drive: Target) => {
// We use an empty React fragment otherwise it uses the field name as label
label: <></>,
render: (_description: string, drive: Drive) => {
if (isUsbbootDrive(drive)) {
return this.renderProgress(drive.progress);
} else if (isDrivelistDrive(drive)) {
return this.renderStatuses(
getDriveImageCompatibilityStatuses(drive, this.state.image),
);
return this.renderStatuses(drive);
}
},
},
];
}
private driveShouldBeDisabled(drive: Target, image: any) {
private driveShouldBeDisabled(drive: Drive, image?: SourceMetadata) {
return (
isUsbbootDrive(drive) ||
isDriverlessDrive(drive) ||
@ -252,8 +310,8 @@ export class TargetSelectorModal extends React.Component<
);
}
private getDisplayedTargets(targets: Target[]): Target[] {
return targets.filter((drive) => {
private getDisplayedDrives(drives: Drive[]): Drive[] {
return drives.filter((drive) => {
return (
isUsbbootDrive(drive) ||
isDriverlessDrive(drive) ||
@ -264,7 +322,7 @@ export class TargetSelectorModal extends React.Component<
});
}
private getDisabledTargets(drives: Target[], image: any): string[] {
private getDisabledDrives(drives: Drive[], image?: SourceMetadata): string[] {
return drives
.filter((drive) => this.driveShouldBeDisabled(drive, image))
.map((drive) => drive.displayName);
@ -279,14 +337,45 @@ export class TargetSelectorModal extends React.Component<
);
}
private renderStatuses(statuses: TargetStatus[]) {
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 (
// the column render fn expects a single Element
<>
{statuses.map((status) => {
const badgeShade = badgeShadeFromStatus(status.message);
const warningMessage = this.warningFromStatus(status.message, {
device: drive.device,
size: drive.size || 0,
});
return (
<Badge key={status.message} shade={badgeShade}>
<Badge
key={status.message}
shade={badgeShade}
mr="8px"
tooltip={this.props.showWarnings ? warningMessage : ''}
>
{status.message}
</Badge>
);
@ -311,7 +400,9 @@ export class TargetSelectorModal extends React.Component<
this.setState({
drives,
image,
selectedList: getSelectedDrives(),
selectedList:
(this.props.updateSelectedList && this.props.updateSelectedList()) ||
[],
});
});
}
@ -324,24 +415,22 @@ export class TargetSelectorModal extends React.Component<
const { cancel, done, ...props } = this.props;
const { selectedList, drives, image, missingDriversModal } = this.state;
const displayedTargets = this.getDisplayedTargets(drives);
const disabledTargets = this.getDisabledTargets(drives, image);
const numberOfSystemDrives = drives.filter(
(drive) => isDrivelistDrive(drive) && drive.isSystem,
).length;
const numberOfDisplayedSystemDrives = displayedTargets.filter(
(drive) => isDrivelistDrive(drive) && drive.isSystem,
).length;
const displayedDrives = this.getDisplayedDrives(drives);
const disabledDrives = this.getDisabledDrives(drives, image);
const numberOfSystemDrives = drives.filter(isSystemDrive).length;
const numberOfDisplayedSystemDrives = displayedDrives.filter(isSystemDrive)
.length;
const numberOfHiddenSystemDrives =
numberOfSystemDrives - numberOfDisplayedSystemDrives;
const hasStatus = hasListDriveImageCompatibilityStatus(selectedList, image);
const hasSystemDrives = selectedList.filter(isSystemDrive).length;
const showWarnings = this.props.showWarnings && hasSystemDrives;
return (
<Modal
titleElement={
<Flex alignItems="baseline" mb={18}>
<Txt fontSize={24} align="left">
Select target
{this.props.titleLabel}
</Txt>
<Txt
fontSize={11}
@ -358,8 +447,8 @@ export class TargetSelectorModal extends React.Component<
done={() => done(selectedList)}
action={`Select (${selectedList.length})`}
primaryButtonProps={{
primary: !hasStatus,
warning: hasStatus,
primary: !showWarnings,
warning: showWarnings,
disabled: !hasAvailableDrives(),
}}
{...props}
@ -372,45 +461,62 @@ export class TargetSelectorModal extends React.Component<
alignItems="center"
width="100%"
>
<TargetSVGIcon width="40px" height="90px" />
<b>Plug a target drive</b>
<DriveSVGIcon width="40px" height="90px" />
<b>{this.props.emptyListLabel}</b>
</Flex>
) : (
<ScrollableFlex flexDirection="column" width="100%">
<TargetsTable
refFn={(t: Table<Target>) => {
<DrivesTable
refFn={(t: Table<Drive>) => {
if (t !== null) {
t.setRowSelection(selectedList);
}
}}
multipleSelection={this.props.multipleSelection}
columns={this.tableColumns}
data={displayedTargets}
disabledRows={disabledTargets}
data={displayedDrives}
disabledRows={disabledDrives}
getRowClass={(row: Drive) =>
isDrivelistDrive(row) && row.isSystem ? ['system'] : []
}
rowKey="displayName"
onCheck={(rows: Target[]) => {
onCheck={(rows: Drive[]) => {
const newSelection = rows.filter(isDrivelistDrive);
if (this.props.multipleSelection) {
this.setState({
selectedList: newSelection,
});
return;
}
this.setState({
selectedList: rows.filter(isDrivelistDrive),
selectedList: newSelection.slice(newSelection.length - 1),
});
}}
onRowClick={(row: Target) => {
onRowClick={(row: Drive) => {
if (
!isDrivelistDrive(row) ||
this.driveShouldBeDisabled(row, image)
) {
return;
}
const newList = [...selectedList];
const selectedIndex = selectedList.findIndex(
(target) => target.device === row.device,
);
if (selectedIndex === -1) {
newList.push(row);
} else {
// Deselect if selected
newList.splice(selectedIndex, 1);
if (this.props.multipleSelection) {
const newList = [...selectedList];
const selectedIndex = selectedList.findIndex(
(drive) => drive.device === row.device,
);
if (selectedIndex === -1) {
newList.push(row);
} else {
// Deselect if selected
newList.splice(selectedIndex, 1);
}
this.setState({
selectedList: newList,
});
return;
}
this.setState({
selectedList: newList,
selectedList: [row],
});
}}
/>
@ -418,6 +524,7 @@ export class TargetSelectorModal extends React.Component<
<Link
mt={15}
mb={15}
fontSize="14px"
onClick={() => this.setState({ showSystemDrives: true })}
>
<Flex alignItems="center">
@ -428,6 +535,12 @@ export class TargetSelectorModal extends React.Component<
)}
</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>
{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 * as prettyBytes from 'pretty-bytes';
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>{' '}
{drive.size && prettyBytes(drive.size) + ' '}
<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;

9
lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx
View File

@ -23,8 +23,8 @@ import { SVGIcon } from '../svg-icon/svg-icon';
import { middleEllipsis } from '../../utils/middle-ellipsis';
interface ReducedFlashingInfosProps {
imageLogo: string;
imageName: string;
imageLogo?: string;
imageName?: string;
imageSize: string;
driveTitle: string;
driveLabel: string;
@ -40,6 +40,7 @@ export class ReducedFlashingInfos extends React.Component<
}
public render() {
const { imageName = '' } = this.props;
return (
<Flex
flexDirection="column"
@ -56,9 +57,9 @@ export class ReducedFlashingInfos extends React.Component<
/>
<Txt
style={{ marginRight: '9px' }}
tooltip={{ text: this.props.imageName, placement: 'right' }}
tooltip={{ text: imageName, placement: 'right' }}
>
{middleEllipsis(this.props.imageName, 16)}
{middleEllipsis(imageName, 16)}
</Txt>
<Txt color="#7e8085">{this.props.imageSize}</Txt>
</Flex>

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

@ -14,6 +14,7 @@
* limitations under the License.
*/
import CopySvg from '@fortawesome/fontawesome-free/svgs/solid/copy.svg';
import FileSvg from '@fortawesome/fontawesome-free/svgs/solid/file.svg';
import LinkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg';
import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
@ -22,6 +23,7 @@ import { ipcRenderer, IpcRendererEvent } from 'electron';
import * as _ from 'lodash';
import { GPTPartition, MBRPartition } from 'partitioninfo';
import * as path from 'path';
import * as prettyBytes from 'pretty-bytes';
import * as React from 'react';
import {
Flex,
@ -37,7 +39,6 @@ import styled from 'styled-components';
import * as errors from '../../../../shared/errors';
import * as messages from '../../../../shared/messages';
import * as supportedFormats from '../../../../shared/supported-formats';
import * as shared from '../../../../shared/units';
import * as selectionState from '../../models/selection-state';
import { observe } from '../../models/store';
import * as analytics from '../../modules/analytics';
@ -57,6 +58,8 @@ import { middleEllipsis } from '../../utils/middle-ellipsis';
import { SVGIcon } from '../svg-icon/svg-icon';
import ImageSvg from '../../../assets/image.svg';
import { DriveSelector } from '../drive-selector/drive-selector';
import { DrivelistDrive } from '../../../../shared/drive-constraints';
const recentUrlImagesKey = 'recentUrlImages';
@ -92,6 +95,9 @@ function setRecentUrlImages(urls: URL[]) {
localStorage.setItem(recentUrlImagesKey, JSON.stringify(normalized));
}
const isURL = (imagePath: string) =>
imagePath.startsWith('https://') || imagePath.startsWith('http://');
const Card = styled(BaseCard)`
hr {
margin: 5px 0;
@ -117,6 +123,10 @@ function getState() {
};
}
function isString(value: any): value is string {
return typeof value === 'string';
}
const URLSelector = ({
done,
cancel,
@ -152,44 +162,46 @@ const URLSelector = ({
await done(imageURL);
}}
>
<Flex style={{ width: '100%' }} flexDirection="column">
<Txt mb="10px" fontSize="24px">
Use Image URL
</Txt>
<Input
value={imageURL}
placeholder="Enter a valid URL"
type="text"
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 flexDirection="column">
<Flex style={{ width: '100%' }} flexDirection="column">
<Txt mb="10px" fontSize="24px">
Use Image URL
</Txt>
<Input
value={imageURL}
placeholder="Enter a valid URL"
type="text"
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>
</Modal>
);
};
@ -203,7 +215,12 @@ interface Flow {
const FlowSelector = styled(
({ flow, ...props }: { flow: Flow; props?: ButtonProps }) => {
return (
<StepButton plain onClick={flow.onClick} icon={flow.icon} {...props}>
<StepButton
plain
onClick={(evt) => flow.onClick(evt)}
icon={flow.icon}
{...props}
>
{flow.label}
</StepButton>
);
@ -225,25 +242,33 @@ const FlowSelector = styled(
export type Source =
| typeof sourceDestination.File
| typeof sourceDestination.BlockDevice
| typeof sourceDestination.Http;
export interface SourceOptions {
imagePath: string;
export interface SourceMetadata extends sourceDestination.Metadata {
hasMBR?: boolean;
partitions?: MBRPartition[] | GPTPartition[];
path: string;
displayName: string;
description: string;
SourceType: Source;
drive?: DrivelistDrive;
extension?: string;
archiveExtension?: string;
}
interface SourceSelectorProps {
flashing: boolean;
afterSelected: (options: SourceOptions) => void;
}
interface SourceSelectorState {
hasImage: boolean;
imageName: string;
imageSize: number;
imageName?: string;
imageSize?: number;
warning: { message: string; title: string | null } | null;
showImageDetails: boolean;
showURLSelector: boolean;
showDriveSelector: boolean;
}
export class SourceSelector extends React.Component<
@ -251,7 +276,6 @@ export class SourceSelector extends React.Component<
SourceSelectorState
> {
private unsubscribe: (() => void) | undefined;
private afterSelected: SourceSelectorProps['afterSelected'];
constructor(props: SourceSelectorProps) {
super(props);
@ -260,15 +284,8 @@ export class SourceSelector extends React.Component<
warning: null,
showImageDetails: false,
showURLSelector: false,
showDriveSelector: false,
};
this.openImageSelector = this.openImageSelector.bind(this);
this.openURLSelector = this.openURLSelector.bind(this);
this.reselectImage = this.reselectImage.bind(this);
this.onSelectImage = this.onSelectImage.bind(this);
this.onDrop = this.onDrop.bind(this);
this.showSelectedImageDetails = this.showSelectedImageDetails.bind(this);
this.afterSelected = props.afterSelected.bind(this);
}
public componentDidMount() {
@ -285,15 +302,28 @@ export class SourceSelector extends React.Component<
}
private async onSelectImage(_event: IpcRendererEvent, imagePath: string) {
const isURL =
imagePath.startsWith('https://') || imagePath.startsWith('http://');
await this.selectImageByPath({
await this.selectSource(
imagePath,
SourceType: isURL ? sourceDestination.Http : sourceDestination.File,
}).promise;
isURL(imagePath) ? sourceDestination.Http : sourceDestination.File,
).promise;
}
private reselectImage() {
private async createSource(selected: string, SourceType: Source) {
try {
selected = await replaceWindowsNetworkDriveLetter(selected);
} catch (error) {
analytics.logException(error);
}
if (SourceType === sourceDestination.File) {
return new sourceDestination.File({
path: selected,
});
}
return new sourceDestination.Http({ url: selected });
}
private reselectSource() {
analytics.logEvent('Reselect image', {
previousImage: selectionState.getImage(),
});
@ -301,144 +331,142 @@ export class SourceSelector extends React.Component<
selectionState.deselectImage();
}
private selectImage(
image: sourceDestination.Metadata & {
path: string;
extension: string;
hasMBR: boolean;
},
) {
try {
let message = null;
let title = null;
if (supportedFormats.looksLikeWindowsImage(image.path)) {
analytics.logEvent('Possibly Windows image', { image });
message = messages.warning.looksLikeWindowsImage();
title = 'Possible Windows image detected';
} else if (!image.hasMBR) {
analytics.logEvent('Missing partition table', { image });
title = 'Missing partition table';
message = messages.warning.missingPartitionTable();
}
if (message) {
this.setState({
warning: {
message,
title,
},
});
}
selectionState.selectImage(image);
analytics.logEvent('Select image', {
// An easy way so we can quickly identify if we're making use of
// certain features without printing pages of text to DevTools.
image: {
...image,
logo: Boolean(image.logo),
blockMap: Boolean(image.blockMap),
},
});
} catch (error) {
exceptionReporter.report(error);
}
}
private selectImageByPath({
imagePath,
SourceType,
}: SourceOptions): { promise: Promise<void>; cancel: () => void } {
private selectSource(
selected: string | DrivelistDrive,
SourceType: Source,
): { promise: Promise<void>; cancel: () => void } {
let cancelled = false;
return {
cancel: () => {
cancelled = true;
},
promise: (async () => {
try {
imagePath = await replaceWindowsNetworkDriveLetter(imagePath);
} catch (error) {
analytics.logException(error);
}
if (cancelled) {
return;
}
const sourcePath = isString(selected) ? selected : selected.device;
let source;
if (SourceType === sourceDestination.File) {
source = new sourceDestination.File({
path: imagePath,
});
} else {
if (
!imagePath.startsWith('https://') &&
!imagePath.startsWith('http://')
) {
const invalidImageError = errors.createUserError({
title: 'Unsupported protocol',
description: messages.error.unsupportedProtocol(),
});
osDialog.showError(invalidImageError);
analytics.logEvent('Unsupported protocol', { path: imagePath });
let metadata: SourceMetadata | undefined;
if (isString(selected)) {
if (SourceType === sourceDestination.Http && !isURL(selected)) {
this.handleError(
'Unsupported protocol',
selected,
messages.error.unsupportedProtocol(),
);
return;
}
source = new sourceDestination.Http({ url: imagePath });
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) {
return;
}
try {
const innerSource = await source.getInnerSource();
if (cancelled) {
return;
}
metadata = await this.getMetadata(innerSource, selected);
if (cancelled) {
return;
}
metadata.SourceType = SourceType;
if (!metadata.hasMBR) {
analytics.logEvent('Missing partition table', { metadata });
this.setState({
warning: {
message: messages.warning.missingPartitionTable(),
title: 'Missing partition table',
},
});
}
} catch (error) {
this.handleError(
'Error opening source',
sourcePath,
messages.error.openSource(sourcePath, error.message),
error,
);
} finally {
try {
await source.close();
} catch (error) {
// Noop
}
}
} else {
metadata = {
path: selected.device,
displayName: selected.displayName,
description: selected.displayName,
size: selected.size as SourceMetadata['size'],
SourceType: sourceDestination.BlockDevice,
drive: selected,
};
}
try {
const innerSource = await source.getInnerSource();
if (cancelled) {
return;
}
const metadata = (await innerSource.getMetadata()) as sourceDestination.Metadata & {
hasMBR: boolean;
partitions: MBRPartition[] | GPTPartition[];
path: string;
extension: string;
};
if (cancelled) {
return;
}
const partitionTable = await innerSource.getPartitionTable();
if (cancelled) {
return;
}
if (partitionTable) {
metadata.hasMBR = true;
metadata.partitions = partitionTable.partitions;
} else {
metadata.hasMBR = false;
}
metadata.path = imagePath;
metadata.extension = path.extname(imagePath).slice(1);
this.selectImage(metadata);
this.afterSelected({
imagePath,
SourceType,
if (metadata !== undefined) {
selectionState.selectSource(metadata);
analytics.logEvent('Select image', {
// An easy way so we can quickly identify if we're making use of
// certain features without printing pages of text to DevTools.
image: {
...metadata,
logo: Boolean(metadata.logo),
blockMap: Boolean(metadata.blockMap),
},
});
} catch (error) {
const imageError = errors.createUserError({
title: 'Error opening image',
description: messages.error.openImage(
path.basename(imagePath),
error.message,
),
});
osDialog.showError(imageError);
analytics.logException(error);
} finally {
try {
await source.close();
} catch (error) {
// Noop
}
}
})(),
};
}
private handleError(
title: string,
sourcePath: string,
description: string,
error?: Error,
) {
const imageError = errors.createUserError({
title,
description,
});
osDialog.showError(imageError);
if (error) {
analytics.logException(error);
return;
}
analytics.logEvent(title, { path: sourcePath });
}
private async getMetadata(
source: sourceDestination.SourceDestination,
selected: string | DrivelistDrive,
) {
const metadata = (await source.getMetadata()) as SourceMetadata;
const partitionTable = await source.getPartitionTable();
if (partitionTable) {
metadata.hasMBR = true;
metadata.partitions = partitionTable.partitions;
} else {
metadata.hasMBR = false;
}
if (isString(selected)) {
metadata.extension = path.extname(selected).slice(1);
metadata.path = selected;
}
return metadata;
}
private async openImageSelector() {
analytics.logEvent('Open image selector');
@ -450,10 +478,7 @@ export class SourceSelector extends React.Component<
analytics.logEvent('Image selector closed');
return;
}
await this.selectImageByPath({
imagePath,
SourceType: sourceDestination.File,
}).promise;
await this.selectSource(imagePath, sourceDestination.File).promise;
} catch (error) {
exceptionReporter.report(error);
}
@ -462,10 +487,7 @@ export class SourceSelector extends React.Component<
private async onDrop(event: React.DragEvent<HTMLDivElement>) {
const [file] = event.dataTransfer.files;
if (file) {
await this.selectImageByPath({
imagePath: file.path,
SourceType: sourceDestination.File,
}).promise;
await this.selectSource(file.path, sourceDestination.File).promise;
}
}
@ -477,6 +499,14 @@ export class SourceSelector extends React.Component<
});
}
private openDriveSelector() {
analytics.logEvent('Open drive selector');
this.setState({
showDriveSelector: true,
});
}
private onDragOver(event: React.DragEvent<HTMLDivElement>) {
// Needed to get onDrop events on div elements
event.preventDefault();
@ -500,27 +530,35 @@ export class SourceSelector extends React.Component<
// TODO add a visual change when dragging a file over the selector
public render() {
const { flashing } = this.props;
const { showImageDetails, showURLSelector } = this.state;
const { showImageDetails, showURLSelector, showDriveSelector } = this.state;
const selectionImage = selectionState.getImage();
let image: SourceMetadata | DrivelistDrive =
selectionImage !== undefined ? selectionImage : ({} as SourceMetadata);
const hasImage = selectionState.hasImage();
image = image.drive ?? image;
const imagePath = selectionState.getImagePath();
const imageBasename = hasImage ? path.basename(imagePath) : '';
const imageName = selectionState.getImageName();
const imageSize = selectionState.getImageSize();
const imageLogo = selectionState.getImageLogo();
let cancelURLSelection = () => {
// noop
};
image.name = image.description || image.name;
const imagePath = image.path || image.displayName || '';
const imageBasename = path.basename(imagePath);
const imageName = image.name || '';
const imageSize = image.size;
const imageLogo = image.logo || '';
return (
<>
<Flex
flexDirection="column"
alignItems="center"
onDrop={this.onDrop}
onDragEnter={this.onDragEnter}
onDragOver={this.onDragOver}
onDrop={(evt: React.DragEvent<HTMLDivElement>) => this.onDrop(evt)}
onDragEnter={(evt: React.DragEvent<HTMLDivElement>) =>
this.onDragEnter(evt)
}
onDragOver={(evt: React.DragEvent<HTMLDivElement>) =>
this.onDragOver(evt)
}
>
<SVGIcon
contents={imageLogo}
@ -530,28 +568,34 @@ export class SourceSelector extends React.Component<
}}
/>
{hasImage ? (
{selectionImage !== undefined ? (
<>
<StepNameButton
plain
onClick={this.showSelectedImageDetails}
onClick={() => this.showSelectedImageDetails()}
tooltip={imageName || imageBasename}
>
{middleEllipsis(imageName || imageBasename, 20)}
</StepNameButton>
{!flashing && (
<ChangeButton plain mb={14} onClick={this.reselectImage}>
<ChangeButton
plain
mb={14}
onClick={() => this.reselectSource()}
>
Remove
</ChangeButton>
)}
<DetailsText>{shared.bytesToClosestUnit(imageSize)}</DetailsText>
{!_.isNil(imageSize) && (
<DetailsText>{prettyBytes(imageSize)}</DetailsText>
)}
</>
) : (
<>
<FlowSelector
key="Flash from file"
flow={{
onClick: this.openImageSelector,
onClick: () => this.openImageSelector(),
label: 'Flash from file',
icon: <FileSvg height="1em" fill="currentColor" />,
}}
@ -559,11 +603,19 @@ export class SourceSelector extends React.Component<
<FlowSelector
key="Flash from URL"
flow={{
onClick: this.openURLSelector,
onClick: () => this.openURLSelector(),
label: 'Flash from URL',
icon: <LinkSvg height="1em" fill="currentColor" />,
}}
/>
<FlowSelector
key="Clone drive"
flow={{
onClick: () => this.openDriveSelector(),
label: 'Clone drive',
icon: <CopySvg height="1em" fill="currentColor" />,
}}
/>
</>
)}
</Flex>
@ -579,7 +631,7 @@ export class SourceSelector extends React.Component<
action="Continue"
cancel={() => {
this.setState({ warning: null });
this.reselectImage();
this.reselectSource();
}}
done={() => {
this.setState({ warning: null });
@ -625,13 +677,10 @@ export class SourceSelector extends React.Component<
analytics.logEvent('URL selector closed');
} else {
let promise;
({
promise,
cancel: cancelURLSelection,
} = this.selectImageByPath({
imagePath: imageURL,
SourceType: sourceDestination.Http,
}));
({ promise, cancel: cancelURLSelection } = this.selectSource(
imageURL,
sourceDestination.Http,
));
await promise;
}
this.setState({
@ -640,6 +689,30 @@ export class SourceSelector extends React.Component<
}}
/>
)}
{showDriveSelector && (
<DriveSelector
multipleSelection={false}
titleLabel="Select source"
emptyListLabel="Plug a source"
cancel={() => {
this.setState({
showDriveSelector: false,
});
}}
done={async (drives: DrivelistDrive[]) => {
if (drives.length) {
await this.selectSource(
drives[0],
sourceDestination.BlockDevice,
);
}
this.setState({
showDriveSelector: false,
});
}}
/>
)}
</>
);
}

5
lib/gui/app/components/svg-icon/svg-icon.tsx
View File

@ -37,8 +37,9 @@ function tryParseSVGContents(contents?: string): string | undefined {
}
interface SVGIconProps {
// List of embedded SVG contents to be tried in succession if any fails
contents: string;
// Optional string representing the SVG contents to be tried
contents?: string;
// Fallback SVG element to show if `contents` is invalid/undefined
fallback: React.FunctionComponent<React.SVGProps<HTMLOrSVGElement>>;
// SVG image width unit
width?: string;

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

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

55
lib/gui/app/pages/main/DriveSelector.tsx → lib/gui/app/components/target-selector/target-selector.tsx
View File

@ -16,9 +16,12 @@
import { scanner } from 'etcher-sdk';
import * as React from 'react';
import { Flex } from 'rendition';
import { TargetSelector } from '../../components/target-selector/target-selector-button';
import { TargetSelectorModal } from '../../components/target-selector/target-selector-modal';
import { Flex, Txt } from 'rendition';
import {
DriveSelector,
DriveSelectorProps,
} from '../drive-selector/drive-selector';
import {
isDriveSelected,
getImage,
@ -29,7 +32,10 @@ import {
import * as settings from '../../models/settings';
import { observe } from '../../models/store';
import * as analytics from '../../modules/analytics';
import { TargetSelectorButton } from './target-selector-button';
import DriveSvg from '../../../assets/drive.svg';
import { warning } from '../../../../shared/messages';
export const getDriveListLabel = () => {
return getSelectedDrives()
@ -50,6 +56,23 @@ const getDriveSelectionStateSlice = () => ({
image: getImage(),
});
export const TargetSelectorModal = (
props: Omit<
DriveSelectorProps,
'titleLabel' | 'emptyListLabel' | 'multipleSelection'
>,
) => (
<DriveSelector
multipleSelection={true}
titleLabel="Select target"
emptyListLabel="Plug a target drive"
showWarnings={true}
selectedList={getSelectedDrives()}
updateSelectedList={getSelectedDrives}
{...props}
/>
);
export const selectAllTargets = (
modalTargets: scanner.adapters.DrivelistDrive[],
) => {
@ -79,20 +102,20 @@ export const selectAllTargets = (
});
};
interface DriveSelectorProps {
interface TargetSelectorProps {
disabled: boolean;
hasDrive: boolean;
flashing: boolean;
}
export const DriveSelector = ({
export const TargetSelector = ({
disabled,
hasDrive,
flashing,
}: DriveSelectorProps) => {
}: TargetSelectorProps) => {
// TODO: inject these from redux-connector
const [
{ showDrivesButton, driveListLabel, targets, image },
{ showDrivesButton, driveListLabel, targets },
setStateSlice,
] = React.useState(getDriveSelectionStateSlice());
const [showTargetSelectorModal, setShowTargetSelectorModal] = React.useState(
@ -105,6 +128,7 @@ export const DriveSelector = ({
});
}, []);
const hasSystemDrives = targets.some((target) => target.isSystem);
return (
<Flex flexDirection="column" alignItems="center">
<DriveSvg
@ -115,7 +139,7 @@ export const DriveSelector = ({
}}
/>
<TargetSelector
<TargetSelectorButton
disabled={disabled}
show={!hasDrive && showDrivesButton}
tooltip={driveListLabel}
@ -128,9 +152,20 @@ export const DriveSelector = ({
}}
flashing={flashing}
targets={targets}
image={image}
/>
{hasSystemDrives ? (
<Txt
color="#fca321"
style={{
position: 'absolute',
bottom: '25px',
}}
>
Warning: {warning.systemDrive()}
</Txt>
) : null}
{showTargetSelectorModal && (
<TargetSelectorModal
cancel={() => setShowTargetSelectorModal(false)}
@ -138,7 +173,7 @@ export const DriveSelector = ({
selectAllTargets(modalTargets);
setShowTargetSelectorModal(false);
}}
></TargetSelectorModal>
/>
)}
</Flex>
);

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

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

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

@ -14,21 +14,20 @@
* limitations under the License.
*/
import * as _ from 'lodash';
import { DrivelistDrive } from '../../../shared/drive-constraints';
import { Actions, store } from './store';
export function hasAvailableDrives() {
return !_.isEmpty(getDrives());
return getDrives().length > 0;
}
export function setDrives(drives: any[]) {
store.dispatch({
type: Actions.SET_AVAILABLE_DRIVES,
type: Actions.SET_AVAILABLE_TARGETS,
data: drives,
});
}
export function getDrives(): any[] {
export function getDrives(): DrivelistDrive[] {
return store.getState().toJS().availableDrives;
}

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

@ -14,11 +14,13 @@
* limitations under the License.
*/
import { Drive as DrivelistDrive } from 'drivelist';
import * as _ from 'lodash';
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 { DEFAULT_STATE, observe } from './store';

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

@ -1,3 +1,4 @@
import { DrivelistDrive } from '../../../shared/drive-constraints';
/*
* Copyright 2016 balena.io
*
@ -14,7 +15,7 @@
* limitations under the License.
*/
import * as _ from 'lodash';
import { SourceMetadata } from '../components/source-selector/source-selector';
import * as availableDrives from './available-drives';
import { Actions, store } from './store';
@ -24,7 +25,7 @@ import { Actions, store } from './store';
*/
export function selectDrive(driveDevice: string) {
store.dispatch({
type: Actions.SELECT_DRIVE,
type: Actions.SELECT_TARGET,
data: driveDevice,
});
}
@ -40,10 +41,10 @@ export function toggleDrive(driveDevice: string) {
}
}
export function selectImage(image: any) {
export function selectSource(source: SourceMetadata) {
store.dispatch({
type: Actions.SELECT_IMAGE,
data: image,
type: Actions.SELECT_SOURCE,
data: source,
});
}
@ -57,50 +58,38 @@ export function getSelectedDevices(): string[] {
/**
* @summary Get all selected drive objects
*/
export function getSelectedDrives(): any[] {
const drives = availableDrives.getDrives();
return _.map(getSelectedDevices(), (device) => {
return _.find(drives, { device });
});
export function getSelectedDrives(): DrivelistDrive[] {
const selectedDevices = getSelectedDevices();
return availableDrives
.getDrives()
.filter((drive) => selectedDevices.includes(drive.device));
}
/**
* @summary Get the selected image
*/
export function getImage() {
return _.get(store.getState().toJS(), ['selection', 'image']);
export function getImage(): SourceMetadata | undefined {
return store.getState().toJS().selection.image;
}
export function getImagePath(): string {
return _.get(store.getState().toJS(), ['selection', 'image', 'path']);
export function getImagePath() {
return getImage()?.path;
}
export function getImageSize(): number {
return _.get(store.getState().toJS(), ['selection', 'image', 'size']);
export function getImageSize() {
return getImage()?.size;
}
export function getImageUrl(): string {
return _.get(store.getState().toJS(), ['selection', 'image', 'url']);
export function getImageName() {
return getImage()?.name;
}
export function getImageName(): string {
return _.get(store.getState().toJS(), ['selection', 'image', 'name']);
export function getImageLogo() {
return getImage()?.logo;
}
export function getImageLogo(): string {
return _.get(store.getState().toJS(), ['selection', 'image', 'logo']);
}
export function getImageSupportUrl(): string {
return _.get(store.getState().toJS(), ['selection', 'image', 'supportUrl']);
}
export function getImageRecommendedDriveSize(): number {
return _.get(store.getState().toJS(), [
'selection',
'image',
'recommendedDriveSize',
]);
export function getImageSupportUrl() {
return getImage()?.supportUrl;
}
/**
@ -114,7 +103,7 @@ export function hasDrive(): boolean {
* @summary Check if there is a selected image
*/
export function hasImage(): boolean {
return Boolean(getImage());
return getImage() !== undefined;
}
/**
@ -122,20 +111,20 @@ export function hasImage(): boolean {
*/
export function deselectDrive(driveDevice: string) {
store.dispatch({
type: Actions.DESELECT_DRIVE,
type: Actions.DESELECT_TARGET,
data: driveDevice,
});
}
export function deselectImage() {
store.dispatch({
type: Actions.DESELECT_IMAGE,
type: Actions.DESELECT_SOURCE,
data: {},
});
}
export function deselectAllDrives() {
_.each(getSelectedDevices(), deselectDrive);
getSelectedDevices().forEach(deselectDrive);
}
/**
@ -155,5 +144,5 @@ export function isDriveSelected(driveDevice: string) {
}
const selectedDriveDevices = getSelectedDevices();
return _.includes(selectedDriveDevices, driveDevice);
return selectedDriveDevices.includes(driveDevice);
}

32
lib/gui/app/models/store.ts
View File

@ -80,15 +80,15 @@ export const DEFAULT_STATE = Immutable.fromJS({
export enum Actions {
SET_DEVICE_PATHS,
SET_FAILED_DEVICE_PATHS,
SET_AVAILABLE_DRIVES,
SET_AVAILABLE_TARGETS,
SET_FLASH_STATE,
RESET_FLASH_STATE,
SET_FLASHING_FLAG,
UNSET_FLASHING_FLAG,
SELECT_DRIVE,
SELECT_IMAGE,
DESELECT_DRIVE,
DESELECT_IMAGE,
SELECT_TARGET,
SELECT_SOURCE,
DESELECT_TARGET,
DESELECT_SOURCE,
SET_APPLICATION_SESSION_UUID,
SET_FLASHING_WORKFLOW_UUID,
}
@ -116,7 +116,7 @@ function storeReducer(
action: Action,
): typeof DEFAULT_STATE {
switch (action.type) {
case Actions.SET_AVAILABLE_DRIVES: {
case Actions.SET_AVAILABLE_TARGETS: {
// Type: action.data : Array<DriveObject>
if (!action.data) {
@ -158,7 +158,7 @@ function storeReducer(
) {
// Deselect this drive gone from availableDrives
return storeReducer(accState, {
type: Actions.DESELECT_DRIVE,
type: Actions.DESELECT_TARGET,
data: device,
});
}
@ -206,14 +206,14 @@ function storeReducer(
) {
// Auto-select this drive
return storeReducer(accState, {
type: Actions.SELECT_DRIVE,
type: Actions.SELECT_TARGET,
data: drive.device,
});
}
// Deselect this drive in case it still is selected
return storeReducer(accState, {
type: Actions.DESELECT_DRIVE,
type: Actions.DESELECT_TARGET,
data: drive.device,
});
},
@ -341,7 +341,7 @@ function storeReducer(
.set('flashState', DEFAULT_STATE.get('flashState'));
}
case Actions.SELECT_DRIVE: {
case Actions.SELECT_TARGET: {
// Type: action.data : String
const device = action.data;
@ -391,10 +391,12 @@ function storeReducer(
// with image-stream / supported-formats, and have *one*
// place where all the image extension / format handling
// takes place, to avoid having to check 2+ locations with different logic
case Actions.SELECT_IMAGE: {
case Actions.SELECT_SOURCE: {
// Type: action.data : ImageObject
verifyNoNilFields(action.data, selectImageNoNilFields, 'image');
if (!action.data.drive) {
verifyNoNilFields(action.data, selectImageNoNilFields, 'image');
}
if (!_.isString(action.data.path)) {
throw errors.createError({
@ -456,7 +458,7 @@ function storeReducer(
!constraints.isDriveSizeRecommended(drive, action.data)
) {
return storeReducer(accState, {
type: Actions.DESELECT_DRIVE,
type: Actions.DESELECT_TARGET,
data: device,
});
}
@ -467,7 +469,7 @@ function storeReducer(
).setIn(['selection', 'image'], Immutable.fromJS(action.data));
}
case Actions.DESELECT_DRIVE: {
case Actions.DESELECT_TARGET: {
// Type: action.data : String
if (!action.data) {
@ -491,7 +493,7 @@ function storeReducer(
);
}
case Actions.DESELECT_IMAGE: {
case Actions.DESELECT_SOURCE: {
return state.deleteIn(['selection', 'image']);
}

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

@ -25,7 +25,7 @@ import * as path from 'path';
import * as packageJSON from '../../../../package.json';
import * as errors from '../../../shared/errors';
import * as permissions from '../../../shared/permissions';
import { SourceOptions } from '../components/source-selector/source-selector';
import { SourceMetadata } from '../components/source-selector/source-selector';
import * as flashState from '../models/flash-state';
import * as selectionState from '../models/selection-state';
import * as settings from '../models/settings';
@ -134,15 +134,11 @@ interface FlashResults {
cancelled?: boolean;
}
/**
* @summary Perform write operation
*/
async function performWrite(
image: string,
image: SourceMetadata,
drives: DrivelistDrive[],
onProgress: sdk.multiWrite.OnProgressFunction,
source: SourceOptions,
): Promise<FlashResults> {
): Promise<{ cancelled?: boolean }> {
let cancelled = false;
ipc.serve();
const {
@ -196,10 +192,9 @@ async function performWrite(
ipc.server.on('ready', (_data, socket) => {
ipc.server.emit(socket, 'write', {
imagePath: image,
image,
destinations: drives,
source,
SourceType: source.SourceType.name,
SourceType: image.SourceType.name,
validateWriteOnSuccess,
autoBlockmapping,
unmountOnSuccess,
@ -258,9 +253,8 @@ async function performWrite(
* @summary Flash an image to drives
*/
export async function flash(
image: string,
image: SourceMetadata,
drives: DrivelistDrive[],
source: SourceOptions,
// This function is a parameter so it can be mocked in tests
write = performWrite,
): Promise<void> {
@ -287,12 +281,7 @@ export async function flash(
analytics.logEvent('Flash', analyticsData);
try {
const result = await write(
image,
drives,
flashState.setProgressState,
source,
);
const result = await write(image, drives, flashState.setProgressState);
flashState.unsetFlashingFlag(result);
} catch (error) {
flashState.unsetFlashingFlag({ cancelled: false, errorCode: error.code });

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

@ -14,7 +14,7 @@
* limitations under the License.
*/
import { bytesToClosestUnit } from '../../../shared/units';
import * as prettyBytes from 'pretty-bytes';
export interface FlashState {
active: number;
@ -51,7 +51,7 @@ export function fromFlashState({
} else {
return {
status: 'Flashing...',
position: `${bytesToClosestUnit(position)}`,
position: `${position ? prettyBytes(position) : ''}`,
};
}
} else if (type === 'verifying') {

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

@ -18,13 +18,11 @@ import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
import * as _ from 'lodash';
import * as path from 'path';
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 messages from '../../../../shared/messages';
import { ProgressButton } from '../../components/progress-button/progress-button';
import { SourceOptions } from '../../components/source-selector/source-selector';
import { TargetSelectorModal } from '../../components/target-selector/target-selector-modal';
import * as availableDrives from '../../models/available-drives';
import * as flashState from '../../models/flash-state';
import * as selection from '../../models/selection-state';
@ -32,30 +30,17 @@ import * as analytics from '../../modules/analytics';
import { scanner as driveScanner } from '../../modules/drive-scanner';
import * as imageWriter from '../../modules/image-writer';
import * as notification from '../../os/notification';
import { selectAllTargets } from './DriveSelector';
import {
selectAllTargets,
TargetSelectorModal,
} from '../../components/target-selector/target-selector';
import FlashSvg from '../../../assets/flash.svg';
import DriveStatusWarningModal from '../../components/drive-status-warning-modal/drive-status-warning-modal';
const COMPLETED_PERCENTAGE = 100;
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) => {
// TODO: All these error codes to messages translations
// should go away if the writer emitted user friendly
@ -77,12 +62,11 @@ const getErrorMessageFromCode = (errorCode: string) => {
async function flashImageToDrive(
isFlashing: boolean,
goToSuccess: () => void,
sourceOptions: SourceOptions,
): Promise<string> {
const devices = selection.getSelectedDevices();
const image: any = selection.getImage();
const drives = _.filter(availableDrives.getDrives(), (drive: any) => {
return _.includes(devices, drive.device);
const drives = availableDrives.getDrives().filter((drive: any) => {
return devices.includes(drive.device);
});
if (drives.length === 0 || isFlashing) {
@ -96,7 +80,7 @@ async function flashImageToDrive(
const iconPath = path.join('media', 'icon.png');
const basename = path.basename(image.path);
try {
await imageWriter.flash(image.path, drives, sourceOptions);
await imageWriter.flash(image, drives);
if (!flashState.wasLastFlashCancelled()) {
const flashResults: any = flashState.getFlashResults();
notification.send(
@ -132,7 +116,7 @@ async function flashImageToDrive(
}
const formatSeconds = (totalSeconds: number) => {
if (!totalSeconds && !_.isNumber(totalSeconds)) {
if (typeof totalSeconds !== 'number' || !Number.isFinite(totalSeconds)) {
return '';
}
const minutes = Math.floor(totalSeconds / 60);
@ -144,7 +128,6 @@ const formatSeconds = (totalSeconds: number) => {
interface FlashStepProps {
shouldFlashStepBeDisabled: boolean;
goToSuccess: () => void;
source: SourceOptions;
isFlashing: boolean;
style?: React.CSSProperties;
// TODO: factorize
@ -156,10 +139,16 @@ interface FlashStepProps {
eta?: number;
}
export interface DriveWithWarnings extends constraints.DrivelistDrive {
statuses: constraints.DriveStatus[];
}
interface FlashStepState {
warningMessages: string[];
warningMessage: boolean;
errorMessage: string;
showDriveSelectorModal: boolean;
systemDrives: boolean;
drivesWithWarnings: DriveWithWarnings[];
}
export class FlashStep extends React.PureComponent<
@ -169,14 +158,16 @@ export class FlashStep extends React.PureComponent<
constructor(props: FlashStepProps) {
super(props);
this.state = {
warningMessages: [],
warningMessage: false,
errorMessage: '',
showDriveSelectorModal: false,
systemDrives: false,
drivesWithWarnings: [],
};
}
private async handleWarningResponse(shouldContinue: boolean) {
this.setState({ warningMessages: [] });
this.setState({ warningMessage: false });
if (!shouldContinue) {
this.setState({ showDriveSelectorModal: true });
return;
@ -185,7 +176,6 @@ export class FlashStep extends React.PureComponent<
errorMessage: await flashImageToDrive(
this.props.isFlashing,
this.props.goToSuccess,
this.props.source,
),
});
}
@ -200,35 +190,45 @@ export class FlashStep extends React.PureComponent<
}
}
private hasListWarnings(drives: any[], image: any) {
private hasListWarnings(drives: any[]) {
if (drives.length === 0 || flashState.isFlashing()) {
return;
}
return constraints.hasListDriveImageCompatibilityStatus(drives, image);
return drives.filter((drive) => drive.isSystem).length > 0;
}
private async tryFlash() {
const devices = selection.getSelectedDevices();
const image = selection.getImage();
const drives = _.filter(
availableDrives.getDrives(),
(drive: { device: string }) => {
return _.includes(devices, drive.device);
},
);
const drives = selection.getSelectedDrives().map((drive) => {
return {
...drive,
statuses: constraints.getDriveImageCompatibilityStatuses(drive),
};
});
if (drives.length === 0 || this.props.isFlashing) {
return;
}
const hasDangerStatus = this.hasListWarnings(drives, image);
const hasDangerStatus = drives.some((drive) => drive.statuses.length > 0);
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;
}
this.setState({
errorMessage: await flashImageToDrive(
this.props.isFlashing,
this.props.goToSuccess,
this.props.source,
),
});
}
@ -256,13 +256,8 @@ export class FlashStep extends React.PureComponent<
position={this.props.position}
disabled={this.props.shouldFlashStepBeDisabled}
cancel={imageWriter.cancel}
warning={this.hasListWarnings(
selection.getSelectedDrives(),
selection.getImage(),
)}
callback={() => {
this.tryFlash();
}}
warning={this.hasListWarnings(selection.getSelectedDrives())}
callback={() => this.tryFlash()}
/>
{!_.isNil(this.props.speed) &&
@ -273,9 +268,7 @@ export class FlashStep extends React.PureComponent<
color="#7e8085"
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) && (
<Txt>ETA: {formatSeconds(this.props.eta)}</Txt>
)}
@ -291,28 +284,17 @@ export class FlashStep extends React.PureComponent<
)}
</Flex>
{this.state.warningMessages.length > 0 && (
<Modal
width={400}
titleElement={'Attention'}
cancel={() => this.handleWarningResponse(false)}
{this.state.warningMessage && (
<DriveStatusWarningModal
done={() => this.handleWarningResponse(true)}
cancelButtonProps={{
children: 'Change',
}}
action={'Continue'}
primaryButtonProps={{ primary: false, warning: true }}
>
{_.map(this.state.warningMessages, (message, key) => (
<Txt key={key} whitespace="pre-line" mt={2}>
{message}
</Txt>
))}
</Modal>
cancel={() => this.handleWarningResponse(false)}
isSystem={this.state.systemDrives}
drivesWithWarnings={this.state.drivesWithWarnings}
/>
)}
{this.state.errorMessage && (
<Modal
<SmallModal
width={400}
titleElement={'Attention'}
cancel={() => this.handleFlashErrorResponse(false)}
@ -320,11 +302,11 @@ export class FlashStep extends React.PureComponent<
action={'Retry'}
>
<Txt>
{_.map(this.state.errorMessage.split('\n'), (message, key) => (
{this.state.errorMessage.split('\n').map((message, key) => (
<p key={key}>{message}</p>
))}
</Txt>
</Modal>
</SmallModal>
)}
{this.state.showDriveSelectorModal && (
<TargetSelectorModal
@ -333,7 +315,7 @@ export class FlashStep extends React.PureComponent<
selectAllTargets(modalTargets);
this.setState({ showDriveSelectorModal: false });
}}
></TargetSelectorModal>
/>
)}
</>
);

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

@ -17,9 +17,8 @@
import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/cog.svg';
import QuestionCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg';
import { sourceDestination } from 'etcher-sdk';
import * as _ from 'lodash';
import * as path from 'path';
import * as prettyBytes from 'pretty-bytes';
import * as React from 'react';
import { Flex } from 'rendition';
import styled from 'styled-components';
@ -29,7 +28,7 @@ import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/re
import { SafeWebview } from '../../components/safe-webview/safe-webview';
import { SettingsModal } from '../../components/settings/settings';
import {
SourceOptions,
SourceMetadata,
SourceSelector,
} from '../../components/source-selector/source-selector';
import * as flashState from '../../models/flash-state';
@ -42,9 +41,10 @@ import {
ThemedProvider,
} from '../../styled-components';
import { bytesToClosestUnit } from '../../../../shared/units';
import { DriveSelector, getDriveListLabel } from './DriveSelector';
import {
TargetSelector,
getDriveListLabel,
} from '../../components/target-selector/target-selector';
import { FlashStep } from './Flash';
import EtcherSvg from '../../../assets/etcher.svg';
@ -67,14 +67,16 @@ function getDrivesTitle() {
return `${drives.length} Targets`;
}
function getImageBasename() {
if (!selectionState.hasImage()) {
function getImageBasename(image?: SourceMetadata) {
if (image === undefined) {
return '';
}
const selectionImageName = selectionState.getImageName();
const imageBasename = path.basename(selectionState.getImagePath());
return selectionImageName || imageBasename;
if (image.drive) {
return image.drive.description;
}
const imageBasename = path.basename(image.path);
return image.name || imageBasename;
}
const StepBorder = styled.div<{
@ -101,9 +103,9 @@ interface MainPageStateFromStore {
isFlashing: boolean;
hasImage: boolean;
hasDrive: boolean;
imageLogo: string;
imageSize: number;
imageName: string;
imageLogo?: string;
imageSize?: number;
imageName?: string;
driveTitle: string;
driveLabel: string;
}
@ -112,7 +114,6 @@ interface MainPageState {
current: 'main' | 'success';
isWebviewShowing: boolean;
hideSettings: boolean;
source: SourceOptions;
featuredProjectURL?: string;
}
@ -126,10 +127,6 @@ export class MainPage extends React.Component<
current: 'main',
isWebviewShowing: false,
hideSettings: true,
source: {
imagePath: '',
SourceType: sourceDestination.File,
},
...this.stateHelper(),
};
}
@ -141,7 +138,7 @@ export class MainPage extends React.Component<
hasDrive: selectionState.hasDrive(),
imageLogo: selectionState.getImageLogo(),
imageSize: selectionState.getImageSize(),
imageName: getImageBasename(),
imageName: getImageBasename(selectionState.getImage()),
driveTitle: getDrivesTitle(),
driveLabel: getDriveListLabel(),
};
@ -243,16 +240,11 @@ export class MainPage extends React.Component<
>
{notFlashingOrSplitView && (
<>
<SourceSelector
flashing={this.state.isFlashing}
afterSelected={(source: SourceOptions) =>
this.setState({ source })
}
/>
<SourceSelector flashing={this.state.isFlashing} />
<Flex>
<StepBorder disabled={shouldDriveStepBeDisabled} left />
</Flex>
<DriveSelector
<TargetSelector
disabled={shouldDriveStepBeDisabled}
hasDrive={this.state.hasDrive}
flashing={this.state.isFlashing}
@ -279,8 +271,8 @@ export class MainPage extends React.Component<
imageLogo={this.state.imageLogo}
imageName={this.state.imageName}
imageSize={
_.isNumber(this.state.imageSize)
? (bytesToClosestUnit(this.state.imageSize) as string)
typeof this.state.imageSize === 'number'
? prettyBytes(this.state.imageSize)
: ''
}
driveTitle={this.state.driveTitle}
@ -313,7 +305,6 @@ export class MainPage extends React.Component<
<FlashStep
goToSuccess={() => this.setState({ current: 'success' })}
shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
source={this.state.source}
isFlashing={this.state.isFlashing}
step={state.type}
percentage={state.percentage}

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

@ -16,6 +16,7 @@
import * as React from 'react';
import {
Alert as AlertBase,
Flex,
FlexProps,
Button,
@ -25,7 +26,7 @@ import {
Txt,
Theme as renditionTheme,
} from 'rendition';
import styled from 'styled-components';
import styled, { css } from 'styled-components';
import { colors, theme } from './theme';
@ -68,6 +69,7 @@ export const StepButton = styled((props: ButtonProps) => (
<BaseButton {...props}></BaseButton>
))`
color: #ffffff;
font-size: 14px;
`;
export const ChangeButton = styled(Button)`
@ -93,7 +95,7 @@ export const StepNameButton = styled(BaseButton)`
justify-content: center;
align-items: center;
width: 100%;
font-weight: bold;
font-weight: normal;
color: ${colors.dark.foreground};
&: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 }) => {
return (
<Provider
@ -140,7 +155,7 @@ export const Modal = styled(({ style, ...props }) => {
>
<ModalBase
position="top"
width="96vw"
width="97vw"
cancelButtonProps={{
style: {
marginRight: '20px',
@ -148,7 +163,7 @@ export const Modal = styled(({ style, ...props }) => {
},
}}
style={{
height: '86.5vh',
height: '87.5vh',
...style,
}}
{...props}
@ -157,27 +172,42 @@ export const Modal = styled(({ style, ...props }) => {
);
})`
> div {
padding: 24px 30px;
height: calc(100% - 80px);
::-webkit-scrollbar {
display: none;
}
padding: 0;
height: 100%;
> h3 {
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 {
margin: 0;
flex-direction: ${(props) =>
props.reverseFooterButtons ? 'row-reverse' : 'row'};
border-radius: 0 0 7px 7px;
height: 80px;
background-color: #fff;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
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;
}
`;
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,
},
extend: () => `
&& {
width: 200px;
height: 48px;
font-size: 16px;
width: 200px;
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};
color: ${colors.dark.disabled.foreground};
opacity: 1;
:hover {
background-color: ${colors.dark.disabled.background};
color: ${colors.dark.disabled.foreground};
}
}
}
`,

3
lib/gui/etcher.ts
View File

@ -161,6 +161,9 @@ async function createMainWindow() {
// Prevent flash of white when starting the application
mainWindow.on('ready-to-show', () => {
console.timeEnd('ready-to-show');
// Electron sometimes caches the zoomFactor
// making it obnoxious to switch back-and-forth
mainWindow.webContents.setZoomFactor(width / defaultWidth);
mainWindow.show();
});

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

@ -20,10 +20,11 @@ import { cleanupTmpFiles } from 'etcher-sdk/build/tmp';
import * as ipc from 'node-ipc';
import { totalmem } from 'os';
import { BlockDevice, File, Http } from 'etcher-sdk/build/source-destination';
import { toJSON } from '../../shared/errors';
import { GENERAL_ERROR, SUCCESS } from '../../shared/exit-codes';
import { delay } from '../../shared/utils';
import { SourceOptions } from '../app/components/source-selector/source-selector';
import { SourceMetadata } from '../app/components/source-selector/source-selector';
ipc.config.id = process.env.IPC_CLIENT_ID as string;
ipc.config.socketRoot = process.env.IPC_SOCKET_ROOT as string;
@ -143,13 +144,12 @@ async function writeAndValidate({
}
interface WriteOptions {
imagePath: string;
image: SourceMetadata;
destinations: DrivelistDrive[];
unmountOnSuccess: boolean;
validateWriteOnSuccess: boolean;
autoBlockmapping: boolean;
decompressFirst: boolean;
source: SourceOptions;
SourceType: string;
}
@ -228,7 +228,8 @@ ipc.connectTo(IPC_SERVER_ID, () => {
};
const destinations = options.destinations.map((d) => d.device);
log(`Image: ${options.imagePath}`);
const imagePath = options.image.path;
log(`Image: ${imagePath}`);
log(`Devices: ${destinations.join(', ')}`);
log(`Umount on success: ${options.unmountOnSuccess}`);
log(`Validate on success: ${options.validateWriteOnSuccess}`);
@ -243,18 +244,22 @@ ipc.connectTo(IPC_SERVER_ID, () => {
});
});
const { SourceType } = options;
let source;
if (SourceType === sdk.sourceDestination.File.name) {
source = new sdk.sourceDestination.File({
path: options.imagePath,
});
} else {
source = new sdk.sourceDestination.Http({
url: options.imagePath,
avoidRandomAccess: true,
});
}
try {
let source;
if (options.image.drive) {
source = new BlockDevice({
drive: options.image.drive,
direct: !options.autoBlockmapping,
});
} else {
if (SourceType === File.name) {
source = new File({
path: imagePath,
});
} else {
source = new Http({ url: imagePath, avoidRandomAccess: true });
}
}
const results = await writeAndValidate({
source,
destinations: dests,

4
lib/shared/catalina-sudo/sudo-askpass.osascript.js
View File

@ -5,9 +5,9 @@ ObjC.import('stdlib')
const app = Application.currentApplication()
app.includeStandardAdditions = true
const result = app.displayDialog('balenaEtcher wants to make changes. Type your password to allow this.', {
const result = app.displayDialog('balenaEtcher needs privileged access in order to flash disks.\n\nType your password to allow this.', {
defaultAnswer: '',
withIcon: 'stop',
withIcon: 'caution',
buttons: ['Cancel', 'Ok'],
defaultButton: 'Ok',
hiddenAnswer: true,

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

@ -14,18 +14,26 @@
* limitations under the License.
*/
import { Drive as DrivelistDrive } from 'drivelist';
import { Drive } from 'drivelist';
import * as _ from 'lodash';
import * as pathIsInside from 'path-is-inside';
import * as prettyBytes from 'pretty-bytes';
import * as messages from './messages';
import { SourceMetadata } from '../gui/app/components/source-selector/source-selector';
/**
* @summary The default unknown size for things such as images and drives
*/
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
*
@ -33,22 +41,23 @@ const UNKNOWN_SIZE = 0;
* This usually points out a locked SD Card.
*/
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
*/
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) {
for (const mountpoint of drive.mountpoints || []) {
if (pathIsInside(source, mountpoint.path)) {
return true;
}
}
return false;
}
/**
@ -60,11 +69,16 @@ export interface Image {
*/
export function isSourceDrive(
drive: DrivelistDrive,
image: Image = {},
selection?: SourceMetadata,
): boolean {
for (const mountpoint of drive.mountpoints || []) {
if (image.path !== undefined && pathIsInside(image.path, mountpoint.path)) {
return true;
if (selection) {
if (selection.drive) {
const sourcePath = selection.drive.devicePath || selection.drive.device;
const drivePath = drive.devicePath || drive.device;
return pathIsInside(sourcePath, drivePath);
}
if (selection.path) {
return sourceIsInsideDrive(selection.path, drive);
}
}
return false;
@ -74,17 +88,21 @@ export function isSourceDrive(
* @summary Check if a drive is large enough for an image
*/
export function isDriveLargeEnough(
drive: DrivelistDrive | undefined,
image: Image,
drive: DrivelistDrive,
image?: SourceMetadata,
): 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
// the final image size is just an estimation, then we stop right
// here, based on the assumption that the final size will never
// be less than the original size.
if (driveSize < _.get(image, ['compressedSize'], UNKNOWN_SIZE)) {
if (driveSize < (image.compressedSize || UNKNOWN_SIZE)) {
return false;
}
@ -95,24 +113,27 @@ export function isDriveLargeEnough(
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)
*/
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
*/
export function isDriveValid(drive: DrivelistDrive, image: Image): boolean {
export function isDriveValid(
drive: DrivelistDrive,
image?: SourceMetadata,
): boolean {
return (
!isDriveLocked(drive) &&
isDriveLargeEnough(drive, image) &&
!isSourceDrive(drive, image) &&
!isSourceDrive(drive, image as SourceMetadata) &&
!isDriveDisabled(drive)
);
}
@ -124,23 +145,23 @@ export function isDriveValid(drive: DrivelistDrive, image: Image): boolean {
* If the image doesn't have a recommended size, this function returns true.
*/
export function isDriveSizeRecommended(
drive: DrivelistDrive | undefined,
image: Image,
drive: DrivelistDrive,
image?: SourceMetadata,
): boolean {
const driveSize = _.get(drive, 'size') || UNKNOWN_SIZE;
return driveSize >= _.get(image, ['recommendedDriveSize'], UNKNOWN_SIZE);
const driveSize = drive.size || 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'
*/
export function isDriveSizeLarge(drive?: DrivelistDrive): boolean {
const driveSize = _.get(drive, 'size') || UNKNOWN_SIZE;
export function isDriveSizeLarge(drive: DrivelistDrive): boolean {
const driveSize = drive.size || UNKNOWN_SIZE;
return driveSize > LARGE_DRIVE_SIZE;
}
@ -155,6 +176,33 @@ export const COMPATIBILITY_STATUS_TYPES = {
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
*
@ -167,7 +215,7 @@ export const COMPATIBILITY_STATUS_TYPES = {
*/
export function getDriveImageCompatibilityStatuses(
drive: DrivelistDrive,
image: Image = {},
image?: SourceMetadata,
) {
const statusList = [];
@ -182,41 +230,25 @@ export function getDriveImageCompatibilityStatuses(
!_.isNil(drive.size) &&
!isDriveLargeEnough(drive, image)
) {
const imageSize = (image.isSizeEstimated
? image.compressedSize
: image.size) as number;
const relativeBytes = imageSize - drive.size;
statusList.push({
type: COMPATIBILITY_STATUS_TYPES.ERROR,
message: messages.compatibility.tooSmall(prettyBytes(relativeBytes)),
});
statusList.push(statuses.small);
} else {
if (isSourceDrive(drive, image)) {
statusList.push({
type: COMPATIBILITY_STATUS_TYPES.ERROR,
message: messages.compatibility.containsImage(),
});
}
// Avoid showing "large drive" with "system drive" status
if (isSystemDrive(drive)) {
statusList.push({
type: COMPATIBILITY_STATUS_TYPES.WARNING,
message: messages.compatibility.system(),
});
statusList.push(statuses.system);
} else if (isDriveSizeLarge(drive)) {
statusList.push(statuses.large);
}
if (isDriveSizeLarge(drive)) {
statusList.push({
type: COMPATIBILITY_STATUS_TYPES.WARNING,
message: messages.compatibility.largeDrive(),
});
if (isSourceDrive(drive, image as SourceMetadata)) {
statusList.push(statuses.containsImage);
}
if (!_.isNil(drive) && !isDriveSizeRecommended(drive, image)) {
statusList.push({
type: COMPATIBILITY_STATUS_TYPES.WARNING,
message: messages.compatibility.sizeNotRecommended(),
});
if (
image !== undefined &&
!_.isNil(drive) &&
!isDriveSizeRecommended(drive, image)
) {
statusList.push(statuses.sizeNotRecommended);
}
}
@ -232,9 +264,9 @@ export function getDriveImageCompatibilityStatuses(
*/
export function getListDriveImageCompatibilityStatuses(
drives: DrivelistDrive[],
image: Image,
image: SourceMetadata,
) {
return _.flatMap(drives, (drive) => {
return drives.flatMap((drive) => {
return getDriveImageCompatibilityStatuses(drive, image);
});
}
@ -247,36 +279,12 @@ export function getListDriveImageCompatibilityStatuses(
*/
export function hasDriveImageCompatibilityStatus(
drive: DrivelistDrive,
image: Image,
image: SourceMetadata,
) {
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 TargetStatus {
export interface DriveStatus {
message: string;
type: number;
}

42
lib/shared/messages.ts
View File

@ -15,6 +15,8 @@
*/
import { Dictionary } from 'lodash';
import { outdent } from 'outdent';
import * as prettyBytes from 'pretty-bytes';
export const progress: Dictionary<(quantity: number) => string> = {
successful: (quantity: number) => {
@ -53,11 +55,11 @@ export const info = {
export const compatibility = {
sizeNotRecommended: () => {
return 'Not Recommended';
return 'Not recommended';
},
tooSmall: (additionalSpace: string) => {
return `Insufficient space, additional ${additionalSpace} required`;
tooSmall: () => {
return 'Too small';
},
locked: () => {
@ -83,10 +85,10 @@ export const warning = {
image: { recommendedDriveSize: number },
drive: { device: string; size: number },
) => {
return [
`This image recommends a ${image.recommendedDriveSize}`,
`bytes drive, however ${drive.device} is only ${drive.size} bytes.`,
].join(' ');
return outdent({ newline: ' ' })`
This image recommends a ${prettyBytes(image.recommendedDriveSize)}
drive, however ${drive.device} is only ${prettyBytes(drive.size)}.
`;
},
exitWhileFlashing: () => {
@ -115,11 +117,16 @@ export const warning = {
].join(' ');
},
largeDriveSize: (drive: { description: string; device: string }) => {
return [
`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(' ');
largeDriveSize: () => {
return 'This is a large drive! Make sure it doesn\'t contain files that you want to keep.';
},
systemDrive: () => {
return 'Selecting your system drive is dangerous and will erase your drive!';
},
sourceDrive: () => {
return 'Contains the image you chose to flash';
},
};
@ -143,11 +150,12 @@ export const error = {
].join(' ');
},
openImage: (imageBasename: string, errorMessage: string) => {
return [
`Something went wrong while opening ${imageBasename}\n\n`,
`Error: ${errorMessage}`,
].join('');
openSource: (sourceName: string, errorMessage: string) => {
return outdent`
Something went wrong while opening ${sourceName}
Error: ${errorMessage}
`;
},
flashFailure: (

10
lib/shared/units.ts
View File

@ -14,18 +14,8 @@
* limitations under the License.
*/
import * as _ from 'lodash';
import * as prettyBytes from 'pretty-bytes';
const MEGABYTE_TO_BYTE_RATIO = 1000000;
export function bytesToMegabytes(bytes: number): number {
return bytes / MEGABYTE_TO_BYTE_RATIO;
}
export function bytesToClosestUnit(bytes: number): string | null {
if (_.isNumber(bytes)) {
return prettyBytes(bytes);
}
return null;
}

16
npm-shrinkwrap.json generated
View File

@ -6683,15 +6683,15 @@
"dev": true
},
"etcher-sdk": {
"version": "4.1.29",
"resolved": "https://registry.npmjs.org/etcher-sdk/-/etcher-sdk-4.1.29.tgz",
"integrity": "sha512-dMzrCFgd6WHe/tqsFapHKjTXA32YL/J+p/RnJztQeMfV3b0cQiUINp6ZX4cU6lfbL8cpRVp4y61Qo5vhMbycZw==",
"version": "4.1.30",
"resolved": "https://registry.npmjs.org/etcher-sdk/-/etcher-sdk-4.1.30.tgz",
"integrity": "sha512-HINIm5b/nOnY4v5XGRQFYQsHOSHGM/iukMm56WblsKEQPRBjZzZfHUzsyZcbsclFhw//x+iPbkDKUbf5uBpk1Q==",
"dev": true,
"requires": {
"@balena/udif": "^1.1.0",
"@ronomon/direct-io": "^3.0.1",
"axios": "^0.19.2",
"balena-image-fs": "^7.0.0-remove-bluebird-9150c6c0fee21e33beef0ddaeea56ad1ce175c96",
"balena-image-fs": "^7.0.1",
"blockmap": "^4.0.1",
"check-disk-space": "^2.1.0",
"cyclic-32": "^1.1.0",
@ -6871,9 +6871,9 @@
}
},
"ext2fs": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ext2fs/-/ext2fs-2.0.1.tgz",
"integrity": "sha512-ZhnpAINB0+Lsgt5jwyAMQKe/w9L1WaNiERyGvXlO7sd9doGaxrVotyX3+ZPbyNMgPb/7wJ0zbeRp+DLAzZQdug==",
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/ext2fs/-/ext2fs-2.0.4.tgz",
"integrity": "sha512-7ILtkKb6j9L+nR1qO4zCiy6aZulzKu7dO82na+qXwc6KEoEr23u/u476/thebbPcvYJMv71I7FebJv8P4MNjHw==",
"dev": true,
"requires": {
"bindings": "^1.3.0",
@ -16775,4 +16775,4 @@
"dev": true
}
}
}
}

2
package.json
View File

@ -77,7 +77,7 @@
"electron-notarize": "^1.0.0",
"electron-rebuild": "^1.11.0",
"electron-updater": "^4.3.2",
"etcher-sdk": "^4.1.29",
"etcher-sdk": "^4.1.30",
"file-loader": "^6.0.0",
"husky": "^4.2.5",
"immutable": "^3.8.1",

6
tests/gui/models/available-drives.spec.ts
View File

@ -15,6 +15,7 @@
*/
import { expect } from 'chai';
import { File } from 'etcher-sdk/build/source-destination';
import * as path from 'path';
import * as availableDrives from '../../../lib/gui/app/models/available-drives';
@ -157,11 +158,14 @@ describe('Model: availableDrives', function () {
}
selectionState.clear();
selectionState.selectImage({
selectionState.selectSource({
description: this.imagePath.split('/').pop(),
displayName: this.imagePath,
path: this.imagePath,
extension: 'img',
size: 999999999,
isSizeEstimated: false,
SourceType: File,
recommendedDriveSize: 2000000000,
});
});

248
tests/gui/models/selection-state.spec.ts
View File

@ -15,11 +15,13 @@
*/
import { expect } from 'chai';
import * as _ from 'lodash';
import { File } from 'etcher-sdk/build/source-destination';
import * as path from 'path';
import { SourceMetadata } from '../../../lib/gui/app/components/source-selector/source-selector';
import * as availableDrives from '../../../lib/gui/app/models/available-drives';
import * as selectionState from '../../../lib/gui/app/models/selection-state';
import { DrivelistDrive } from '../../../lib/shared/drive-constraints';
describe('Model: selectionState', function () {
describe('given a clean state', function () {
@ -39,10 +41,6 @@ describe('Model: selectionState', function () {
expect(selectionState.getImageSize()).to.be.undefined;
});
it('getImageUrl() should return undefined', function () {
expect(selectionState.getImageUrl()).to.be.undefined;
});
it('getImageName() should return undefined', function () {
expect(selectionState.getImageName()).to.be.undefined;
});
@ -55,10 +53,6 @@ describe('Model: selectionState', function () {
expect(selectionState.getImageSupportUrl()).to.be.undefined;
});
it('getImageRecommendedDriveSize() should return undefined', function () {
expect(selectionState.getImageRecommendedDriveSize()).to.be.undefined;
});
it('hasDrive() should return false', function () {
const hasDrive = selectionState.hasDrive();
expect(hasDrive).to.be.false;
@ -138,10 +132,10 @@ describe('Model: selectionState', function () {
it('should queue the drive', function () {
selectionState.selectDrive('/dev/disk5');
const drives = selectionState.getSelectedDevices();
const lastDriveDevice = _.last(drives);
const lastDrive = _.find(availableDrives.getDrives(), {
device: lastDriveDevice,
});
const lastDriveDevice = drives.pop();
const lastDrive = availableDrives
.getDrives()
.find((drive) => drive.device === lastDriveDevice);
expect(lastDrive).to.deep.equal({
device: '/dev/disk5',
name: 'USB Drive',
@ -214,7 +208,7 @@ describe('Model: selectionState', function () {
it('should be able to add more drives', function () {
selectionState.selectDrive(this.drives[2].device);
expect(selectionState.getSelectedDevices()).to.deep.equal(
_.map(this.drives, 'device'),
this.drives.map((drive: DrivelistDrive) => drive.device),
);
});
@ -234,13 +228,13 @@ describe('Model: selectionState', function () {
system: true,
};
const newDrives = [..._.initial(this.drives), systemDrive];
const newDrives = [...this.drives.slice(0, -1), systemDrive];
availableDrives.setDrives(newDrives);
selectionState.selectDrive(systemDrive.device);
availableDrives.setDrives(newDrives);
expect(selectionState.getSelectedDevices()).to.deep.equal(
_.map(newDrives, 'device'),
newDrives.map((drive: DrivelistDrive) => drive.device),
);
});
@ -271,6 +265,12 @@ describe('Model: selectionState', function () {
describe('.getSelectedDrives()', function () {
it('should return the selected drives', function () {
expect(selectionState.getSelectedDrives()).to.deep.equal([
{
device: '/dev/disk2',
name: 'USB Drive 2',
size: 999999999,
isReadOnly: false,
},
{
device: '/dev/sdb',
description: 'DataTraveler 2.0',
@ -280,12 +280,6 @@ describe('Model: selectionState', function () {
system: false,
isReadOnly: false,
},
{
device: '/dev/disk2',
name: 'USB Drive 2',
size: 999999999,
isReadOnly: false,
},
]);
});
});
@ -359,7 +353,7 @@ describe('Model: selectionState', function () {
logo: '<svg><text fill="red">Raspbian</text></svg>',
};
selectionState.selectImage(this.image);
selectionState.selectSource(this.image);
});
describe('.selectDrive()', function () {
@ -399,13 +393,6 @@ describe('Model: selectionState', function () {
});
});
describe('.getImageUrl()', function () {
it('should return the image url', function () {
const imageUrl = selectionState.getImageUrl();
expect(imageUrl).to.equal('https://www.raspbian.org');
});
});
describe('.getImageName()', function () {
it('should return the image name', function () {
const imageName = selectionState.getImageName();
@ -429,13 +416,6 @@ describe('Model: selectionState', function () {
});
});
describe('.getImageRecommendedDriveSize()', function () {
it('should return the image recommended drive size', function () {
const imageRecommendedDriveSize = selectionState.getImageRecommendedDriveSize();
expect(imageRecommendedDriveSize).to.equal(1000000000);
});
});
describe('.hasImage()', function () {
it('should return true', function () {
const hasImage = selectionState.hasImage();
@ -445,11 +425,14 @@ describe('Model: selectionState', function () {
describe('.selectImage()', function () {
it('should override the image', function () {
selectionState.selectImage({
selectionState.selectSource({
description: 'bar.img',
displayName: 'bar.img',
path: 'bar.img',
extension: 'img',
size: 999999999,
isSizeEstimated: false,
SourceType: File,
});
const imagePath = selectionState.getImagePath();
@ -475,13 +458,19 @@ describe('Model: selectionState', function () {
describe('.selectImage()', function () {
afterEach(selectionState.clear);
const image: SourceMetadata = {
description: 'foo.img',
displayName: 'foo.img',
path: 'foo.img',
extension: 'img',
size: 999999999,
isSizeEstimated: false,
SourceType: File,
recommendedDriveSize: 2000000000,
};
it('should be able to set an image', function () {
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: 999999999,
isSizeEstimated: false,
});
selectionState.selectSource(image);
const imagePath = selectionState.getImagePath();
expect(imagePath).to.equal('foo.img');
@ -490,12 +479,10 @@ describe('Model: selectionState', function () {
});
it('should be able to set an image with an archive extension', function () {
selectionState.selectImage({
selectionState.selectSource({
...image,
path: 'foo.zip',
extension: 'img',
archiveExtension: 'zip',
size: 999999999,
isSizeEstimated: false,
});
const imagePath = selectionState.getImagePath();
@ -503,12 +490,10 @@ describe('Model: selectionState', function () {
});
it('should infer a compressed raw image if the penultimate extension is missing', function () {
selectionState.selectImage({
selectionState.selectSource({
...image,
path: 'foo.xz',
extension: 'img',
archiveExtension: 'xz',
size: 999999999,
isSizeEstimated: false,
});
const imagePath = selectionState.getImagePath();
@ -516,54 +501,20 @@ describe('Model: selectionState', function () {
});
it('should infer a compressed raw image if the penultimate extension is not a file extension', function () {
selectionState.selectImage({
selectionState.selectSource({
...image,
path: 'something.linux-x86-64.gz',
extension: 'img',
archiveExtension: 'gz',
size: 999999999,
isSizeEstimated: false,
});
const imagePath = selectionState.getImagePath();
expect(imagePath).to.equal('something.linux-x86-64.gz');
});
it('should throw if no path', function () {
expect(function () {
selectionState.selectImage({
extension: 'img',
size: 999999999,
isSizeEstimated: false,
});
}).to.throw('Missing image fields: path');
});
it('should throw if path is not a string', function () {
expect(function () {
selectionState.selectImage({
path: 123,
extension: 'img',
size: 999999999,
isSizeEstimated: false,
});
}).to.throw('Invalid image path: 123');
});
it('should throw if the original size is not a number', function () {
expect(function () {
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: 999999999,
compressedSize: '999999999',
isSizeEstimated: false,
});
}).to.throw('Invalid image compressed size: 999999999');
});
it('should throw if the original size is a float number', function () {
expect(function () {
selectionState.selectImage({
selectionState.selectSource({
...image,
path: 'foo.img',
extension: 'img',
size: 999999999,
@ -575,85 +526,31 @@ describe('Model: selectionState', function () {
it('should throw if the original size is negative', function () {
expect(function () {
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: 999999999,
selectionState.selectSource({
...image,
compressedSize: -1,
isSizeEstimated: false,
});
}).to.throw('Invalid image compressed size: -1');
});
it('should throw if the final size is not a number', function () {
expect(function () {
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: '999999999',
isSizeEstimated: false,
});
}).to.throw('Invalid image size: 999999999');
});
it('should throw if the final size is a float number', function () {
expect(function () {
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
selectionState.selectSource({
...image,
size: 999999999.999,
isSizeEstimated: false,
});
}).to.throw('Invalid image size: 999999999.999');
});
it('should throw if the final size is negative', function () {
expect(function () {
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
selectionState.selectSource({
...image,
size: -1,
isSizeEstimated: false,
});
}).to.throw('Invalid image size: -1');
});
it("should throw if url is defined but it's not a string", function () {
expect(function () {
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: 999999999,
isSizeEstimated: false,
url: 1234,
});
}).to.throw('Invalid image url: 1234');
});
it("should throw if name is defined but it's not a string", function () {
expect(function () {
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: 999999999,
isSizeEstimated: false,
name: 1234,
});
}).to.throw('Invalid image name: 1234');
});
it("should throw if logo is defined but it's not a string", function () {
expect(function () {
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: 999999999,
isSizeEstimated: false,
logo: 1234,
});
}).to.throw('Invalid image logo: 1234');
});
it('should de-select a previously selected not-large-enough drive', function () {
availableDrives.setDrives([
{
@ -667,11 +564,9 @@ describe('Model: selectionState', function () {
selectionState.selectDrive('/dev/disk1');
expect(selectionState.hasDrive()).to.be.true;
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
selectionState.selectSource({
...image,
size: 1234567890,
isSizeEstimated: false,
});
expect(selectionState.hasDrive()).to.be.false;
@ -691,11 +586,8 @@ describe('Model: selectionState', function () {
selectionState.selectDrive('/dev/disk1');
expect(selectionState.hasDrive()).to.be.true;
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: 999999999,
isSizeEstimated: false,
selectionState.selectSource({
...image,
recommendedDriveSize: 1500000000,
});
@ -726,11 +618,11 @@ describe('Model: selectionState', function () {
selectionState.selectDrive('/dev/disk1');
expect(selectionState.hasDrive()).to.be.true;
selectionState.selectImage({
selectionState.selectSource({
...image,
path: imagePath,
extension: 'img',
size: 999999999,
isSizeEstimated: false,
});
expect(selectionState.hasDrive()).to.be.false;
@ -740,6 +632,16 @@ describe('Model: selectionState', function () {
});
describe('given a drive and an image', function () {
const image: SourceMetadata = {
description: 'foo.img',
displayName: 'foo.img',
path: 'foo.img',
extension: 'img',
size: 999999999,
SourceType: File,
isSizeEstimated: false,
};
beforeEach(function () {
availableDrives.setDrives([
{
@ -752,12 +654,7 @@ describe('Model: selectionState', function () {
selectionState.selectDrive('/dev/disk1');
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: 999999999,
isSizeEstimated: false,
});
selectionState.selectSource(image);
});
describe('.clear()', function () {
@ -824,6 +721,16 @@ describe('Model: selectionState', function () {
});
describe('given several drives', function () {
const image: SourceMetadata = {
description: 'foo.img',
displayName: 'foo.img',
path: 'foo.img',
extension: 'img',
size: 999999999,
SourceType: File,
isSizeEstimated: false,
};
beforeEach(function () {
availableDrives.setDrives([
{
@ -850,12 +757,7 @@ describe('Model: selectionState', function () {
selectionState.selectDrive('/dev/disk2');
selectionState.selectDrive('/dev/disk3');
selectionState.selectImage({
path: 'foo.img',
extension: 'img',
size: 999999999,
isSizeEstimated: false,
});
selectionState.selectSource(image);
});
describe('.clear()', function () {

53
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 { 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 imageWriter from '../../../lib/gui/app/modules/image-writer';
@ -28,10 +29,14 @@ const fakeDrive: DrivelistDrive = {};
describe('Browser: imageWriter', () => {
describe('.flash()', () => {
const imagePath = 'foo.img';
const sourceOptions = {
imagePath,
const image: SourceMetadata = {
hasMBR: false,
partitions: [],
description: 'foo.img',
displayName: 'foo.img',
path: 'foo.img',
SourceType: sourceDestination.File,
extension: 'img',
};
describe('given a successful write', () => {
@ -58,12 +63,7 @@ describe('Browser: imageWriter', () => {
});
try {
await imageWriter.flash(
imagePath,
[fakeDrive],
sourceOptions,
performWriteStub,
);
await imageWriter.flash(image, [fakeDrive], performWriteStub);
} catch {
// noop
} finally {
@ -79,18 +79,8 @@ describe('Browser: imageWriter', () => {
try {
await Promise.all([
imageWriter.flash(
imagePath,
[fakeDrive],
sourceOptions,
performWriteStub,
),
imageWriter.flash(
imagePath,
[fakeDrive],
sourceOptions,
performWriteStub,
),
imageWriter.flash(image, [fakeDrive], performWriteStub),
imageWriter.flash(image, [fakeDrive], performWriteStub),
]);
assert.fail('Writing twice should fail');
} catch (error) {
@ -117,12 +107,7 @@ describe('Browser: imageWriter', () => {
it('should set flashing to false when done', async () => {
try {
await imageWriter.flash(
imagePath,
[fakeDrive],
sourceOptions,
performWriteStub,
);
await imageWriter.flash(image, [fakeDrive], performWriteStub);
} catch {
// noop
} finally {
@ -132,12 +117,7 @@ describe('Browser: imageWriter', () => {
it('should set the error code in the flash results', async () => {
try {
await imageWriter.flash(
imagePath,
[fakeDrive],
sourceOptions,
performWriteStub,
);
await imageWriter.flash(image, [fakeDrive], performWriteStub);
} catch {
// noop
} finally {
@ -152,12 +132,7 @@ describe('Browser: imageWriter', () => {
sourceChecksum: '1234',
});
try {
await imageWriter.flash(
imagePath,
[fakeDrive],
sourceOptions,
performWriteStub,
);
await imageWriter.flash(image, [fakeDrive], performWriteStub);
} catch (error) {
expect(error).to.be.an.instanceof(Error);
expect(error.message).to.equal('write error');

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

@ -15,9 +15,9 @@
*/
import { expect } from 'chai';
import { Drive as DrivelistDrive } from 'drivelist';
import * as _ from 'lodash';
import { sourceDestination } from 'etcher-sdk';
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 messages from '../../lib/shared/messages';
@ -29,7 +29,7 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk2',
size: 999999999,
isReadOnly: true,
} as DrivelistDrive);
} as constraints.DrivelistDrive);
expect(result).to.be.true;
});
@ -39,7 +39,7 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk2',
size: 999999999,
isReadOnly: false,
} as DrivelistDrive);
} as constraints.DrivelistDrive);
expect(result).to.be.false;
});
@ -48,16 +48,10 @@ describe('Shared: DriveConstraints', function () {
const result = constraints.isDriveLocked({
device: '/dev/disk2',
size: 999999999,
} as DrivelistDrive);
} as constraints.DrivelistDrive);
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 () {
@ -67,7 +61,7 @@ describe('Shared: DriveConstraints', function () {
size: 999999999,
isReadOnly: true,
isSystem: true,
} as DrivelistDrive);
} as constraints.DrivelistDrive);
expect(result).to.be.true;
});
@ -77,7 +71,7 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk2',
size: 999999999,
isReadOnly: true,
} as DrivelistDrive);
} as constraints.DrivelistDrive);
expect(result).to.be.false;
});
@ -88,16 +82,10 @@ describe('Shared: DriveConstraints', function () {
size: 999999999,
isReadOnly: true,
isSystem: false,
} as DrivelistDrive);
} as constraints.DrivelistDrive);
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 () {
@ -108,7 +96,7 @@ describe('Shared: DriveConstraints', function () {
size: 999999999,
isReadOnly: true,
isSystem: false,
} as DrivelistDrive,
} as constraints.DrivelistDrive,
// @ts-ignore
undefined,
);
@ -123,9 +111,14 @@ describe('Shared: DriveConstraints', function () {
size: 999999999,
isReadOnly: true,
isSystem: false,
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
description: 'image.img',
displayName: 'image.img',
path: '/Volumes/Untitled/image.img',
hasMBR: false,
partitions: [],
SourceType: sourceDestination.File,
},
);
@ -133,6 +126,14 @@ describe('Shared: DriveConstraints', 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 () {
this.separator = path.sep;
// @ts-ignore
@ -157,10 +158,8 @@ describe('Shared: DriveConstraints', function () {
path: 'F:',
},
],
} as DrivelistDrive,
{
path: 'E:\\image.img',
},
} as constraints.DrivelistDrive,
windowsImage,
);
expect(result).to.be.true;
@ -179,8 +178,9 @@ describe('Shared: DriveConstraints', function () {
path: 'F:',
},
],
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
...windowsImage,
path: 'E:\\foo\\bar\\image.img',
},
);
@ -201,8 +201,9 @@ describe('Shared: DriveConstraints', function () {
path: 'F:',
},
],
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
...windowsImage,
path: 'G:\\image.img',
},
);
@ -219,8 +220,9 @@ describe('Shared: DriveConstraints', function () {
path: 'E:\\fo',
},
],
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
...windowsImage,
path: 'E:\\foo/image.img',
},
);
@ -230,6 +232,14 @@ describe('Shared: DriveConstraints', 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 () {
this.separator = path.sep;
// @ts-ignore
@ -249,8 +259,9 @@ describe('Shared: DriveConstraints', function () {
path: '/',
},
],
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
...image,
path: '/image.img',
},
);
@ -269,8 +280,9 @@ describe('Shared: DriveConstraints', function () {
path: '/Volumes/B',
},
],
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
...image,
path: '/Volumes/A/image.img',
},
);
@ -289,8 +301,9 @@ describe('Shared: DriveConstraints', function () {
path: '/Volumes/B',
},
],
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
...image,
path: '/Volumes/A/foo/bar/image.img',
},
);
@ -309,8 +322,9 @@ describe('Shared: DriveConstraints', function () {
path: '/Volumes/B',
},
],
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
...image,
path: '/Volumes/C/image.img',
},
);
@ -326,8 +340,9 @@ describe('Shared: DriveConstraints', function () {
path: '/Volumes/fo',
},
],
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
...image,
path: '/Volumes/foo/image.img',
},
);
@ -515,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 () {
const result = constraints.isDriveLargeEnough(
{
device: '/dev/disk1',
size: 1000000000,
isReadOnly: false,
} as DrivelistDrive,
} as constraints.DrivelistDrive,
// @ts-ignore
undefined,
);
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 () {
@ -553,7 +552,7 @@ describe('Shared: DriveConstraints', function () {
size: 1000000000,
isReadOnly: false,
disabled: true,
} as unknown) as DrivelistDrive);
} as unknown) as constraints.DrivelistDrive);
expect(result).to.be.true;
});
@ -564,7 +563,7 @@ describe('Shared: DriveConstraints', function () {
size: 1000000000,
isReadOnly: false,
disabled: false,
} as unknown) as DrivelistDrive);
} as unknown) as constraints.DrivelistDrive);
expect(result).to.be.false;
});
@ -574,26 +573,30 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk1',
size: 1000000000,
isReadOnly: false,
} as DrivelistDrive);
} as constraints.DrivelistDrive);
expect(result).to.be.false;
});
});
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 () {
const result = constraints.isDriveSizeRecommended(
{
device: '/dev/disk1',
size: 2000000001,
isReadOnly: false,
} as DrivelistDrive,
{
path: path.join(__dirname, 'rpi.img'),
size: 1000000000,
isSizeEstimated: false,
recommendedDriveSize: 2000000000,
},
} as constraints.DrivelistDrive,
image,
);
expect(result).to.be.true;
@ -605,13 +608,8 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk1',
size: 2000000000,
isReadOnly: false,
} as DrivelistDrive,
{
path: path.join(__dirname, 'rpi.img'),
size: 1000000000,
isSizeEstimated: false,
recommendedDriveSize: 2000000000,
},
} as constraints.DrivelistDrive,
image,
);
expect(result).to.be.true;
@ -623,11 +621,9 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk1',
size: 2000000000,
isReadOnly: false,
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
path: path.join(__dirname, 'rpi.img'),
size: 1000000000,
isSizeEstimated: false,
...image,
recommendedDriveSize: 2000000001,
},
);
@ -641,47 +637,29 @@ describe('Shared: DriveConstraints', function () {
device: '/dev/disk1',
size: 2000000000,
isReadOnly: false,
} as DrivelistDrive,
} as constraints.DrivelistDrive,
{
path: path.join(__dirname, 'rpi.img'),
size: 1000000000,
isSizeEstimated: false,
...image,
recommendedDriveSize: undefined,
},
);
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 () {
const result = constraints.isDriveSizeRecommended(
{
device: '/dev/disk1',
size: 2000000000,
isReadOnly: false,
} as DrivelistDrive,
} as constraints.DrivelistDrive,
// @ts-ignore
undefined,
);
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 () {
@ -709,16 +687,29 @@ describe('Shared: DriveConstraints', 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 () {
this.drive.disabled = true;
});
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(
constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'),
size: 5000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
@ -726,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 () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 5000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
it('should return false if the drive is large enough and is a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
path: path.join(this.mountpoint, 'rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
expect(constraints.isDriveValid(this.drive, image)).to.be.false;
});
it('should return false if the drive is large enough and is not a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
});
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 () {
this.drive.disabled = false;
});
@ -762,9 +753,9 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'),
size: 5000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
@ -772,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 () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 5000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
it('should return false if the drive is large enough and is a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
path: path.join(this.mountpoint, 'rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
expect(constraints.isDriveValid(this.drive, image)).to.be.false;
});
it('should return false if the drive is large enough and is not a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
@ -802,6 +786,14 @@ describe('Shared: DriveConstraints', 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 () {
this.drive.isReadOnly = false;
});
@ -814,9 +806,9 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'),
size: 5000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
@ -824,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 () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 5000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
it('should return false if the drive is large enough and is a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
path: path.join(this.mountpoint, 'rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
expect(constraints.isDriveValid(this.drive, image)).to.be.false;
});
it('should return false if the drive is large enough and is not a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
@ -860,9 +845,9 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is not large enough and is a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'),
size: 5000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
@ -870,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 () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 5000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
@ -880,9 +865,8 @@ describe('Shared: DriveConstraints', function () {
it('should return false if the drive is large enough and is a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.join(this.mountpoint, 'rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.false;
});
@ -890,9 +874,8 @@ describe('Shared: DriveConstraints', function () {
it('should return true if the drive is large enough and is not a source drive', function () {
expect(
constraints.isDriveValid(this.drive, {
...image,
path: path.resolve(this.mountpoint, '../bar/rpi.img'),
size: 2000000000,
isSizeEstimated: false,
}),
).to.be.true;
});
@ -916,6 +899,7 @@ describe('Shared: DriveConstraints', function () {
};
this.image = {
SourceType: sourceDestination.File,
path: path.join(__dirname, 'rpi.img'),
size: this.drive.size - 1,
isSizeEstimated: false,
@ -960,28 +944,41 @@ describe('Shared: DriveConstraints', function () {
};
this.image = {
SourceType: sourceDestination.File,
path: path.join(__dirname, 'rpi.img'),
size: this.drive.size - 1,
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 = (
resultList: Array<{ message: string }>,
expectedTuples: Array<['WARNING' | 'ERROR', string]>,
params?: number,
) => {
// Sort so that order doesn't matter
const expectedTuplesSorted = _.sortBy(
_.map(expectedTuples, (tuple) => {
const expectedTuplesSorted = expectedTuples
.map((tuple) => {
return {
type: constraints.COMPATIBILITY_STATUS_TYPES[tuple[0]],
// @ts-ignore
message: messages.compatibility[tuple[1]](),
message: messages.compatibility[tuple[1]](params),
};
}),
['message'],
);
const resultTuplesSorted = _.sortBy(resultList, ['message']);
})
.sort(compareTuplesMessages);
const resultTuplesSorted = resultList.sort(compareTuplesMessages);
expect(resultTuplesSorted).to.deep.equal(expectedTuplesSorted);
};
@ -1051,7 +1048,7 @@ describe('Shared: DriveConstraints', function () {
);
const expected = [
{
message: messages.compatibility.tooSmall('1 B'),
message: messages.compatibility.tooSmall(),
type: constraints.COMPATIBILITY_STATUS_TYPES.ERROR,
},
];
@ -1117,11 +1114,14 @@ describe('Shared: DriveConstraints', function () {
this.drive,
this.image,
);
// @ts-ignore
const expectedTuples = [['WARNING', 'largeDrive']];
// @ts-ignore
expectStatusTypesAndMessagesToBe(result, expectedTuples);
expectStatusTypesAndMessagesToBe(
result,
// @ts-ignore
expectedTuples,
this.drive.size,
);
});
});
@ -1169,7 +1169,7 @@ describe('Shared: DriveConstraints', function () {
);
const expected = [
{
message: messages.compatibility.tooSmall('1 B'),
message: messages.compatibility.tooSmall(),
type: constraints.COMPATIBILITY_STATUS_TYPES.ERROR,
},
];
@ -1220,7 +1220,7 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [{ path: __dirname }],
isSystem: false,
isReadOnly: false,
} as unknown) as DrivelistDrive,
} as unknown) as constraints.DrivelistDrive,
({
device: drivePaths[1],
description: 'My Other Drive',
@ -1229,7 +1229,7 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [],
isSystem: false,
isReadOnly: true,
} as unknown) as DrivelistDrive,
} as unknown) as constraints.DrivelistDrive,
({
device: drivePaths[2],
description: 'My Drive',
@ -1238,7 +1238,7 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [],
isSystem: false,
isReadOnly: false,
} as unknown) as DrivelistDrive,
} as unknown) as constraints.DrivelistDrive,
({
device: drivePaths[3],
description: 'My Drive',
@ -1247,16 +1247,16 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [],
isSystem: true,
isReadOnly: false,
} as unknown) as DrivelistDrive,
} as unknown) as constraints.DrivelistDrive,
({
device: drivePaths[4],
description: 'My Drive',
size: 64000000001,
size: 128000000001,
displayName: drivePaths[4],
mountpoints: [],
isSystem: false,
isReadOnly: false,
} as unknown) as DrivelistDrive,
} as unknown) as constraints.DrivelistDrive,
({
device: drivePaths[5],
description: 'My Drive',
@ -1265,7 +1265,7 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [],
isSystem: false,
isReadOnly: false,
} as unknown) as DrivelistDrive,
} as unknown) as constraints.DrivelistDrive,
({
device: drivePaths[6],
description: 'My Drive',
@ -1274,11 +1274,14 @@ describe('Shared: DriveConstraints', function () {
mountpoints: [],
isSystem: 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'),
SourceType: sourceDestination.File,
// @ts-ignore
size: drives[2].size + 1,
isSizeEstimated: false,
@ -1331,7 +1334,7 @@ describe('Shared: DriveConstraints', function () {
),
).to.deep.equal([
{
message: 'Insufficient space, additional 1 B required',
message: 'Too small',
type: 2,
},
]);
@ -1373,7 +1376,7 @@ describe('Shared: DriveConstraints', function () {
),
).to.deep.equal([
{
message: 'Not Recommended',
message: 'Not recommended',
type: 1,
},
]);
@ -1394,7 +1397,7 @@ describe('Shared: DriveConstraints', function () {
type: 2,
},
{
message: 'Insufficient space, additional 1 B required',
message: 'Too small',
type: 2,
},
{
@ -1406,157 +1409,11 @@ describe('Shared: DriveConstraints', function () {
type: 1,
},
{
message: 'Not Recommended',
message: 'Not recommended',
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;
});
});
});
});

38
tests/shared/units.spec.ts
View File

@ -15,45 +15,13 @@
*/
import { expect } from 'chai';
import * as units from '../../lib/shared/units';
import { bytesToMegabytes } from '../../lib/shared/units';
describe('Shared: Units', function () {
describe('.bytesToClosestUnit()', function () {
it('should convert bytes to terabytes', function () {
expect(units.bytesToClosestUnit(1000000000000)).to.equal('1 TB');
expect(units.bytesToClosestUnit(2987801405440)).to.equal('2.99 TB');
expect(units.bytesToClosestUnit(999900000000000)).to.equal('1000 TB');
});
it('should convert bytes to gigabytes', function () {
expect(units.bytesToClosestUnit(1000000000)).to.equal('1 GB');
expect(units.bytesToClosestUnit(7801405440)).to.equal('7.8 GB');
expect(units.bytesToClosestUnit(999900000000)).to.equal('1000 GB');
});
it('should convert bytes to megabytes', function () {
expect(units.bytesToClosestUnit(1000000)).to.equal('1 MB');
expect(units.bytesToClosestUnit(801405440)).to.equal('801 MB');
expect(units.bytesToClosestUnit(999900000)).to.equal('1000 MB');
});
it('should convert bytes to kilobytes', function () {
expect(units.bytesToClosestUnit(1000)).to.equal('1 kB');
expect(units.bytesToClosestUnit(5440)).to.equal('5.44 kB');
expect(units.bytesToClosestUnit(999900)).to.equal('1000 kB');
});
it('should keep bytes as bytes', function () {
expect(units.bytesToClosestUnit(1)).to.equal('1 B');
expect(units.bytesToClosestUnit(8)).to.equal('8 B');
expect(units.bytesToClosestUnit(999)).to.equal('999 B');
});
});
describe('.bytesToMegabytes()', function () {
it('should convert bytes to megabytes', function () {
expect(units.bytesToMegabytes(1.2e7)).to.equal(12);
expect(units.bytesToMegabytes(332000)).to.equal(0.332);
expect(bytesToMegabytes(1.2e7)).to.equal(12);
expect(bytesToMegabytes(332000)).to.equal(0.332);
});
});
});

2
tsconfig.json
View File

@ -4,6 +4,8 @@
"noUnusedLocals": true,
"noUnusedParameters": true,
"resolveJsonModule": true,
"target": "es2019",
"moduleResolution": "node",
"jsx": "react",
"typeRoots": ["./node_modules/@types", "./typings"]
}