Add average speed in flash results

Changelog-entry: Add average speed in flash results
Change-type: patch

lib/gui/app/components/flash-results/flash-results.tsx

@@ -16,10 +16,12 @@
 
 import * as _ from 'lodash';
 import * as React from 'react';
+import { Txt } from 'rendition';
 import styled from 'styled-components';
 import { left, position, space, top } from 'styled-system';
 
 import { progress } from '../../../../shared/messages';
+import { bytesToMegabytes } from '../../../../shared/units';
 import { Underline } from '../../styled-components';
 
 const Div = styled.div<any>`
@@ -34,15 +36,22 @@ export function FlashResults({
 	results,
 }: {
 	errors: string;
-	results: { devices: { failed: number; successful: number } };
+	results: {
+		averageFlashingSpeed: number;
+		devices: { failed: number; successful: number };
+	};
 }) {
+	const averageSpeed = _.round(
+		bytesToMegabytes(results.averageFlashingSpeed),
+		1,
+	);
 	return (
 		<Div position="absolute" left="153px" top="66px">
 			<div className="inline-flex title">
 				<span className="tick tick--success space-right-medium"></span>
 				<h3>Flash Complete!</h3>
 			</div>
-			<Div className="results" mt="11px" mr="0" mb="0" ml="40px">
+			<Div className="results" mr="0" mb="0" ml="40px">
 				{_.map(results.devices, (quantity, type) => {
 					return quantity ? (
 						<Underline
@@ -62,6 +71,16 @@ export function FlashResults({
 						</Underline>
 					) : null;
 				})}
+				<Txt
+					color="#787c7f"
+					fontSize="10px"
+					style={{
+						fontWeight: 500,
+						textAlign: 'center',
+					}}
+				>
+					Writing speed: {averageSpeed} MB/s
+				</Txt>
 			</Div>
 		</Div>
 	);

lib/gui/app/models/flash-state.ts

@@ -87,7 +87,6 @@ export function setProgressState(
 
 			return null;
 		}),
-
 		totalSpeed: _.attempt(() => {
 			if (_.isFinite(state.totalSpeed)) {
 				return _.round(bytesToMegabytes(state.totalSpeed), PRECISION);

lib/gui/app/models/store.ts

@@ -71,8 +71,10 @@ const DEFAULT_STATE = Immutable.fromJS({
 		failed: 0,
 		percentage: 0,
 		speed: null,
+		averageSpeed: null,
 		totalSpeed: null,
 	},
+	lastAverageFlashingSpeed: null,
 });
 
 /**
@@ -263,7 +265,11 @@ function storeReducer(
 				});
 			}
 
-			return state.set('flashState', Immutable.fromJS(action.data));
+			let ret = state.set('flashState', Immutable.fromJS(action.data));
+			if (action.data.flashing) {
+				ret = ret.set('lastAverageFlashingSpeed', action.data.averageSpeed);
+			}
+			return ret;
 		}
 
 		case Actions.RESET_FLASH_STATE: {
@@ -326,9 +332,19 @@ function storeReducer(
 				});
 			}
 
+			if (action.data.results) {
+				action.data.results.averageFlashingSpeed = state.get(
+					'lastAverageFlashingSpeed',
+				);
+			}
+
 			return state
 				.set('isFlashing', false)
 				.set('flashResults', Immutable.fromJS(action.data))
+				.set(
+					'lastAverageFlashingSpeed',
+					DEFAULT_STATE.get('lastAverageFlashingSpeed'),
+				)
 				.set('flashState', DEFAULT_STATE.get('flashState'));
 		}
 

lib/gui/app/pages/main/styles/_main.scss

@@ -165,7 +165,6 @@ img[disabled] {
 .target-status-line {
   display: flex;
   align-items: baseline;
-  margin-bottom: 9px;
 
   > .target-status-dot {
     width: 12px;

lib/gui/css/main.css

@@ -6347,8 +6347,7 @@ img[disabled] {
 
 .target-status-line {
   display: flex;
-  align-items: baseline;
+  align-items: baseline; }
-  margin-bottom: 9px; }
   .target-status-line > .target-status-dot {
     width: 12px;
     height: 12px;

npm-shrinkwrap.json

@@ -5426,9 +5426,9 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
     "etcher-sdk": {
-      "version": "3.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/etcher-sdk/-/etcher-sdk-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/etcher-sdk/-/etcher-sdk-3.0.1.tgz",
-      "integrity": "sha512-VYr7YUaGwhP53ylzXOWIIbg8TS3v0LMAJB9yRfvLdGvrtBce8cQ7JkNcLZf3e+X4YgsrgoGOqWU5nahQSpOcqQ==",
+      "integrity": "sha512-Jd30W0OfKNwbQZ4NdsNLCItyPYNP3hIugJrG/V5uzBtpL4R+gldMrUopkJ1L0x59d9NwWavQ/CqM6gxrv3tVlw==",
       "requires": {
         "@ronomon/direct-io": "^3.0.1",
         "axios": "^0.18.0",

package.json

@@ -61,7 +61,7 @@
     "d3": "^4.13.0",
     "debug": "^3.1.0",
     "electron-updater": "4.0.6",
-    "etcher-sdk": "^3.0.0",
+    "etcher-sdk": "^3.0.1",
     "flexboxgrid": "^6.3.0",
     "immutable": "^3.8.1",
     "inactivity-timer": "^1.0.0",

tests/gui/models/flash-state.spec.ts

@@ -36,6 +36,7 @@ describe('Model: flashState', function() {
 					percentage: 50,
 					eta: 15,
 					speed: 100000000000,
+					averageSpeed: 100000000000,
 					totalSpeed: 200000000000,
 					bytes: 0,
 					position: 0,
@@ -51,6 +52,7 @@ describe('Model: flashState', function() {
 					failed: 0,
 					percentage: 0,
 					speed: null,
+					averageSpeed: null,
 					totalSpeed: null,
 				});
 			});
@@ -106,6 +108,7 @@ describe('Model: flashState', function() {
 						percentage: 50,
 						eta: 15,
 						speed: 100000000000,
+						averageSpeed: 100000000000,
 						totalSpeed: 200000000000,
 						bytes: 0,
 						position: 0,
@@ -126,6 +129,7 @@ describe('Model: flashState', function() {
 						percentage: 0,
 						eta: 15,
 						speed: 100000000000,
+						averageSpeed: 100000000000,
 						totalSpeed: 200000000000,
 						bytes: 0,
 						position: 0,
@@ -146,6 +150,7 @@ describe('Model: flashState', function() {
 						percentage: 101,
 						eta: 15,
 						speed: 0,
+						averageSpeed: 0,
 						totalSpeed: 1,
 						bytes: 0,
 						position: 0,
@@ -166,6 +171,7 @@ describe('Model: flashState', function() {
 						percentage: -1,
 						eta: 15,
 						speed: 0,
+						averageSpeed: 0,
 						totalSpeed: 1,
 						bytes: 0,
 						position: 0,
@@ -186,6 +192,7 @@ describe('Model: flashState', function() {
 						percentage: 50,
 						eta: 0,
 						speed: 100000000000,
+						averageSpeed: 100000000000,
 						totalSpeed: 200000000000,
 						bytes: 0,
 						position: 0,
@@ -207,6 +214,7 @@ describe('Model: flashState', function() {
 						// @ts-ignore
 						eta: '15',
 						speed: 100000000000,
+						averageSpeed: 100000000000,
 						totalSpeed: 200000000000,
 						bytes: 0,
 						position: 0,
@@ -227,6 +235,7 @@ describe('Model: flashState', function() {
 						type: 'flashing',
 						percentage: 50,
 						eta: 15,
+						averageSpeed: 0,
 						totalSpeed: 1,
 						bytes: 0,
 						position: 0,
@@ -247,6 +256,7 @@ describe('Model: flashState', function() {
 						percentage: 50,
 						eta: 15,
 						speed: 0,
+						averageSpeed: 0,
 						totalSpeed: 1,
 						bytes: 0,
 						position: 0,
@@ -268,6 +278,7 @@ describe('Model: flashState', function() {
 						percentage: 50,
 						eta: 15,
 						speed: 1,
+						averageSpeed: 1,
 						bytes: 0,
 						position: 0,
 						active: 0,
@@ -287,6 +298,7 @@ describe('Model: flashState', function() {
 						percentage: 50,
 						eta: 15,
 						speed: 0,
+						averageSpeed: 0,
 						totalSpeed: 0,
 						bytes: 0,
 						position: 0,
@@ -306,6 +318,7 @@ describe('Model: flashState', function() {
 					percentage: 50.253559459485,
 					eta: 15,
 					speed: 0,
+					averageSpeed: 0,
 					totalSpeed: 1,
 					bytes: 0,
 					position: 0,
@@ -330,6 +343,7 @@ describe('Model: flashState', function() {
 						percentage: 0,
 						eta: 0,
 						speed: 0,
+						averageSpeed: 0,
 						totalSpeed: 0,
 						bytes: 0,
 						position: 0,
@@ -350,6 +364,7 @@ describe('Model: flashState', function() {
 						percentage: 0,
 						eta: 0,
 						speed: 0,
+						averageSpeed: 0,
 						totalSpeed: 0,
 						bytes: 0,
 						position: 0,
@@ -386,6 +401,7 @@ describe('Model: flashState', function() {
 					failed: 0,
 					percentage: 0,
 					speed: null,
+					averageSpeed: null,
 					totalSpeed: null,
 				});
 			});
@@ -399,6 +415,7 @@ describe('Model: flashState', function() {
 					percentage: 50,
 					eta: 15,
 					speed: 0,
+					averageSpeed: 0,
 					totalSpeed: 0,
 					bytes: 0,
 					position: 0,
@@ -417,6 +434,7 @@ describe('Model: flashState', function() {
 					percentage: 50,
 					eta: 15,
 					speed: 0,
+					averageSpeed: 0,
 					totalSpeed: 0,
 					bytes: 0,
 					position: 0,
@@ -522,6 +540,7 @@ describe('Model: flashState', function() {
 					percentage: 50,
 					eta: 15,
 					speed: 100000000000,
+					averageSpeed: 100000000000,
 					totalSpeed: 200000000000,
 					bytes: 0,
 					position: 0,
@@ -535,6 +554,7 @@ describe('Model: flashState', function() {
 					failed: 0,
 					percentage: 0,
 					speed: 0,
+					averageSpeed: 0,
 					totalSpeed: 0,
 				});
 
@@ -550,6 +570,7 @@ describe('Model: flashState', function() {
 					failed: 0,
 					percentage: 0,
 					speed: null,
+					averageSpeed: null,
 					totalSpeed: null,
 				});
 			});