From 674019ea75a96372ba9343ba16725614d255a94b Mon Sep 17 00:00:00 2001 From: Benedict Aas Date: Thu, 3 May 2018 10:58:15 +0100 Subject: [PATCH] feat(GUI): add button to cancel flash process (#2301) We add a cancel button next to the flash progress bar that gracefully aborts the flash process. Closes: https://github.com/resin-io/etcher/issues/1791 Closes: https://github.com/resin-io/etcher/issues/2234 Closes: https://github.com/resin-io/etcher/issues/2245 Change-Type: patch Changelog-Entry: Add a button to cancel the flash process. --- lib/gui/app/modules/image-writer.js | 33 +++++++++++++++++++ lib/gui/app/pages/main/controllers/flash.js | 10 ++++++ lib/gui/app/pages/main/styles/_main.scss | 4 +++ .../app/pages/main/templates/main.tpl.html | 6 ++++ lib/gui/css/main.css | 3 ++ lib/gui/modules/child-writer.js | 22 ++++++++++++- lib/sdk/writer/.eslintrc.yml | 1 + lib/sdk/writer/index.js | 4 +-- 8 files changed, 80 insertions(+), 3 deletions(-) diff --git a/lib/gui/app/modules/image-writer.js b/lib/gui/app/modules/image-writer.js index 24b1d435..448715e5 100644 --- a/lib/gui/app/modules/image-writer.js +++ b/lib/gui/app/modules/image-writer.js @@ -30,6 +30,7 @@ const permissions = require('../../../shared/permissions') const windowProgress = require('../os/window-progress') const analytics = require('../modules/analytics') const packageJSON = require('../../../../package.json') +const selectionState = require('../../../shared/models/selection-state') /** * @summary Number of threads per CPU to allocate to the UV_THREADPOOL @@ -175,6 +176,13 @@ exports.performWrite = (image, drives, onProgress) => { _.merge(flashResults, event) }) + ipc.server.on('abort', () => { + terminateServer() + resolve({ + cancelled: true + }) + }) + ipc.server.on('state', onProgress) ipc.server.on('ready', (data, socket) => { @@ -321,3 +329,28 @@ exports.flash = (image, drives) => { windowProgress.clear() }) } + +/** + * @summary Cancel write operation + * @function + * @public + * + * @example + * imageWriter.cancel() + */ +exports.cancel = () => { + analytics.logEvent('Cancel', { + image: selectionState.getImagePath(), + drives: selectionState.getSelectedDevices(), + uuid: flashState.getFlashUuid(), + unmountOnSuccess: settings.get('unmountOnSuccess'), + validateWriteOnSuccess: settings.get('validateWriteOnSuccess') + }) + + try { + const [ socket ] = ipc.server.sockets + ipc.server.emit(socket, 'cancel') + } catch (error) { + analytics.logException(error) + } +} diff --git a/lib/gui/app/pages/main/controllers/flash.js b/lib/gui/app/pages/main/controllers/flash.js index d52e68dc..bc3f0918 100644 --- a/lib/gui/app/pages/main/controllers/flash.js +++ b/lib/gui/app/pages/main/controllers/flash.js @@ -209,4 +209,14 @@ module.exports = function ( return progressStatus.fromFlashState(flashState.getFlashState()) } + + /** + * @summary Abort write process + * @function + * @public + * + * @example + * FlashController.cancelFlash() + */ + this.cancelFlash = imageWriter.cancel } diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss index f5d4cd02..7617be89 100644 --- a/lib/gui/app/pages/main/styles/_main.scss +++ b/lib/gui/app/pages/main/styles/_main.scss @@ -41,6 +41,10 @@ svg-icon > img[disabled] { min-width: $btn-min-width; } +.page-main .button-abort-write { + margin-right: -35px; +} + %step-border { height: 2px; background-color: $palette-theme-dark-foreground; diff --git a/lib/gui/app/pages/main/templates/main.tpl.html b/lib/gui/app/pages/main/templates/main.tpl.html index a8ede8cd..a2c81a1a 100644 --- a/lib/gui/app/pages/main/templates/main.tpl.html +++ b/lib/gui/app/pages/main/templates/main.tpl.html @@ -106,6 +106,12 @@ + +

ETA: {{ main.state.getFlashState().eta | secondsToDate | amDateFormat:'m[m]ss[s]' }} diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css index 47002b75..68274f58 100644 --- a/lib/gui/css/main.css +++ b/lib/gui/css/main.css @@ -6523,6 +6523,9 @@ svg-icon > img[disabled] { .page-main .button-brick { min-width: 170px; } +.page-main .button-abort-write { + margin-right: -35px; } + .page-main .step-border-left, .page-main .step-border-right { height: 2px; background-color: #fff; diff --git a/lib/gui/modules/child-writer.js b/lib/gui/modules/child-writer.js index c0328892..db28aa25 100644 --- a/lib/gui/modules/child-writer.js +++ b/lib/gui/modules/child-writer.js @@ -111,6 +111,8 @@ ipc.connectTo(IPC_SERVER_ID, () => { terminate(EXIT_CODES.SUCCESS) }) + let writer = null + ipc.of[IPC_SERVER_ID].on('write', (options) => { const destinations = [].concat(options.destinations) @@ -146,6 +148,17 @@ ipc.connectTo(IPC_SERVER_ID, () => { terminate(exitCode) } + /** + * @summary Abort handler + * @example + * writer.on('abort', onAbort) + */ + const onAbort = () => { + log('Abort') + ipc.of[IPC_SERVER_ID].emit('abort') + terminate(exitCode) + } + /** * @summary Error handler * @param {Error} error - error @@ -171,7 +184,7 @@ ipc.connectTo(IPC_SERVER_ID, () => { }) } - const writer = new ImageWriter({ + writer = new ImageWriter({ verify: options.validateWriteOnSuccess, unmountOnSuccess: options.unmountOnSuccess, checksumAlgorithms: options.checksumAlgorithms || [] @@ -181,10 +194,17 @@ ipc.connectTo(IPC_SERVER_ID, () => { writer.on('fail', onFail) writer.on('progress', onProgress) writer.on('finish', onFinish) + writer.on('abort', onAbort) writer.write(options.imagePath, destinations) }) + ipc.of[IPC_SERVER_ID].on('cancel', () => { + if (writer) { + writer.abort() + } + }) + ipc.of[IPC_SERVER_ID].on('connect', () => { log(`Successfully connected to IPC server: ${IPC_SERVER_ID}, socket root ${ipc.config.socketRoot}`) ipc.of[IPC_SERVER_ID].emit('ready', {}) diff --git a/lib/sdk/writer/.eslintrc.yml b/lib/sdk/writer/.eslintrc.yml index 83b047c7..6b0ea6e9 100644 --- a/lib/sdk/writer/.eslintrc.yml +++ b/lib/sdk/writer/.eslintrc.yml @@ -4,3 +4,4 @@ rules: no-param-reassign: off no-underscore-dangle: off lodash/prefer-lodash-method: off + lodash/prefer-get: off diff --git a/lib/sdk/writer/index.js b/lib/sdk/writer/index.js index f55b2d27..8346339f 100644 --- a/lib/sdk/writer/index.js +++ b/lib/sdk/writer/index.js @@ -568,8 +568,8 @@ class ImageWriter extends EventEmitter { * imageWriter.abort() */ abort () { - if (this.source) { - this.source.destroy() + if (this.source && this.source.stream) { + this.source.stream.destroy() } this.emit('abort') }