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

patch: cleanup

Browse Source
This commit is contained in:
Edwin Joassart 2023-10-18 17:38:42 +02:00
parent f5db18def7
commit 562d760616
1 changed files with 42 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
lib/gui/app/components/flash-results/flash-results.tsx
View File

@ -14,30 +14,29 @@
* limitations under the License. * limitations under the License.
*/ */
import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg'; import CircleSvg from "@fortawesome/fontawesome-free/svgs/solid/circle.svg";
import CheckCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/check-circle.svg'; import CheckCircleSvg from "@fortawesome/fontawesome-free/svgs/solid/check-circle.svg";
import TimesCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/times-circle.svg'; import TimesCircleSvg from "@fortawesome/fontawesome-free/svgs/solid/times-circle.svg";
import outdent from 'outdent'; import * as React from "react";
import * as React from 'react'; import { Flex, FlexProps, Link, TableColumn, Txt } from "rendition";
import { Flex, FlexProps, Link, TableColumn, Txt } from 'rendition'; import styled from "styled-components";
import styled from 'styled-components';
import { progress } from '../../../../shared/messages'; import { progress } from "../../../../shared/messages";
import { bytesToMegabytes } from '../../../../shared/units'; import { bytesToMegabytes } from "../../../../shared/units";
import FlashSvg from '../../../assets/flash.svg'; import FlashSvg from "../../../assets/flash.svg";
import { getDrives } from '../../models/available-drives'; import { getDrives } from "../../models/available-drives";
import { resetState } from '../../models/flash-state'; import { resetState } from "../../models/flash-state";
import * as selection from '../../models/selection-state'; import * as selection from "../../models/selection-state";
import { middleEllipsis } from '../../utils/middle-ellipsis'; import { middleEllipsis } from "../../utils/middle-ellipsis";
import { Modal, Table } from '../../styled-components'; import { Modal, Table } from "../../styled-components";
import * as i18next from 'i18next'; import * as i18next from "i18next";
const ErrorsTable = styled((props) => <Table<FlashError> {...props} />)` const ErrorsTable = styled((props) => <Table<FlashError> {...props} />)`
&&& [data-display='table-head'], &&& [data-display="table-head"],
&&& [data-display='table-body'] { &&& [data-display="table-body"] {
> [data-display='table-row'] { > [data-display="table-row"] {
> [data-display='table-cell'] { > [data-display="table-cell"] {
&:first-child { &:first-child {
width: 30%; width: 30%;
} }
@ -59,11 +58,11 @@ const DoneIcon = (props: {
allFailed: boolean; allFailed: boolean;
}) => { }) => {
const svgProps = { const svgProps = {
width: '28px', width: "28px",
fill: props.color, fill: props.color,
style: { style: {
marginTop: '-25px', marginTop: "-25px",
marginLeft: '13px', marginLeft: "13px",
zIndex: 1, zIndex: 1,
}, },
}; };
@ -83,21 +82,21 @@ export interface FlashError extends Error {
function formattedErrors(errors: FlashError[]) { function formattedErrors(errors: FlashError[]) {
return errors return errors
.map((error) => `${error.device}: ${error.message || error.code}`) .map((error) => `${error.device}: ${error.message || error.code}`)
.join('\n'); .join("\n");
} }
const columns: Array<TableColumn<FlashError>> = [ const columns: Array<TableColumn<FlashError>> = [
{ {
field: 'description', field: "description",
label: i18next.t('flash.target'), label: i18next.t("flash.target"),
}, },
{ {
field: 'device', field: "device",
label: i18next.t('flash.location'), label: i18next.t("flash.location"),
}, },
{ {
field: 'message', field: "message",
label: i18next.t('flash.error'), label: i18next.t("flash.error"),
render: (message: string, { code }: FlashError) => { render: (message: string, { code }: FlashError) => {
return message ?? code; return message ?? code;
}, },
@ -119,7 +118,7 @@ function getEffectiveSpeed(results: {
export function FlashResults({ export function FlashResults({
goToMain, goToMain,
image = '', image = "",
errors, errors,
results, results,
skip, skip,
@ -143,7 +142,7 @@ export function FlashResults({
const allFailed = !skip && results?.devices?.successful === 0; const allFailed = !skip && results?.devices?.successful === 0;
const someFailed = results?.devices?.failed !== 0 || errors?.length !== 0; const someFailed = results?.devices?.failed !== 0 || errors?.length !== 0;
const effectiveSpeed = bytesToMegabytes(getEffectiveSpeed(results)).toFixed( const effectiveSpeed = bytesToMegabytes(getEffectiveSpeed(results)).toFixed(
1, 1
); );
return ( return (
<Flex flexDirection="column" {...props}> <Flex flexDirection="column" {...props}>
@ -159,16 +158,16 @@ export function FlashResults({
<DoneIcon <DoneIcon
skipped={skip} skipped={skip}
allFailed={allFailed} allFailed={allFailed}
color={allFailed || someFailed ? '#c6c8c9' : '#1ac135'} color={allFailed || someFailed ? "#c6c8c9" : "#1ac135"}
/> />
<Txt>{middleEllipsis(image, 24)}</Txt> <Txt>{middleEllipsis(image, 24)}</Txt>
</Flex> </Flex>
<Txt fontSize={24} color="#fff" mb="17px"> <Txt fontSize={24} color="#fff" mb="17px">
{allFailed {allFailed
? i18next.t('flash.flashFailed') ? i18next.t("flash.flashFailed")
: i18next.t('flash.flashCompleted')} : i18next.t("flash.flashCompleted")}
</Txt> </Txt>
{skip ? <Txt color="#7e8085">{i18next.t('flash.skip')}</Txt> : null} {skip ? <Txt color="#7e8085">{i18next.t("flash.skip")}</Txt> : null}
</Flex> </Flex>
<Flex flexDirection="column" color="#7e8085"> <Flex flexDirection="column" color="#7e8085">
{results.devices.successful !== 0 ? ( {results.devices.successful !== 0 ? (
@ -192,7 +191,7 @@ export function FlashResults({
{progress.failed(errors.length)} {progress.failed(errors.length)}
</Txt> </Txt>
<Link ml="10px" onClick={() => setShowErrorsInfo(true)}> <Link ml="10px" onClick={() => setShowErrorsInfo(true)}>
{i18next.t('flash.moreInfo')} {i18next.t("flash.moreInfo")}
</Link> </Link>
</Flex> </Flex>
) : null} ) : null}
@ -201,11 +200,11 @@ export function FlashResults({
fontSize="10px" fontSize="10px"
style={{ style={{
fontWeight: 500, fontWeight: 500,
textAlign: 'center', textAlign: "center",
}} }}
tooltip={i18next.t('flash.speedTip')} tooltip={i18next.t("flash.speedTip")}
> >
{i18next.t('flash.speed', { speed: effectiveSpeed })} {i18next.t("flash.speed", { speed: effectiveSpeed })}
</Txt> </Txt>
)} )}
</Flex> </Flex>
@ -215,11 +214,11 @@ export function FlashResults({
titleElement={ titleElement={
<Flex alignItems="baseline" mb={18}> <Flex alignItems="baseline" mb={18}>
<Txt fontSize={24} align="left"> <Txt fontSize={24} align="left">
{i18next.t('failedTarget')} {i18next.t("failedTarget")}
</Txt> </Txt>
</Flex> </Flex>
} }
action={i18next.t('failedRetry')} action={i18next.t("failedRetry")}
cancel={() => setShowErrorsInfo(false)} cancel={() => setShowErrorsInfo(false)}
done={() => { done={() => {
setShowErrorsInfo(false); setShowErrorsInfo(false);
@ -230,7 +229,7 @@ export function FlashResults({
return drive.device; return drive.device;
}) })
.filter((driveDevice) => .filter((driveDevice) =>
errors.some((error) => error.device === driveDevice), errors.some((error) => error.device === driveDevice)
) )
.forEach((driveDevice) => selection.selectDrive(driveDevice)); .forEach((driveDevice) => selection.selectDrive(driveDevice));
goToMain(); goToMain();