This repository has been archived by the owner on Aug 2, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 72
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Enable start/stop simulations (#705)
* Add settings flyout * Move strings to lang file * Remove unneeded fromPromise calls * Move extra strings to lang file * Add better messaging on simulation update
- Loading branch information
Showing
14 changed files
with
257 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -37,6 +37,7 @@ $borderColor: #454A4E; | |
| width: 20px; | ||
| margin-right: 20px; | ||
| margin-left: 20px; | ||
| cursor: pointer; | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| // Copyright (c) Microsoft. All rights reserved. | ||
|
|
||
| import React from 'react'; | ||
| import { Observable, BehaviorSubject, Subject } from 'rxjs'; | ||
| import PcsBtn from '../shared/pcsBtn/pcsBtn'; | ||
| import PscToggle from '../shared/pcsToggle/pcsToggle'; | ||
| import DeviceSimulationService from '../../services/deviceSimulationService'; | ||
| import lang from '../../common/lang'; | ||
| import Spinner from '../spinner/spinner'; | ||
|
|
||
| import CloseIconSvg from '../../assets/icons/X.svg'; | ||
|
|
||
| import './settingFlyout.css'; | ||
|
|
||
| // Helper objects for choosing the correct label for the simulation service toggle input | ||
| const desiredSimulationLabel = { | ||
| true: lang.START, | ||
| false: lang.STOP | ||
| }; | ||
|
|
||
| const currSimulationLabel = { | ||
| true: lang.RUNNING, | ||
| false: lang.STOPPED | ||
| }; | ||
|
|
||
| class SettingFlyout extends React.Component { | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| currSimulationState: undefined, | ||
| desiredSimulationState: undefined, | ||
| loading: false | ||
| }; | ||
|
|
||
| this.eTag = new BehaviorSubject(undefined); | ||
| this.unmount = new Subject(); | ||
| this.eTagStream = this.eTag.filter(_ => _); | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| Observable.fromPromise(DeviceSimulationService.getSimulatedDevices()) | ||
| .takeUntil(this.unmount) | ||
| .subscribe( | ||
| ({ Etag, Enabled }) => { | ||
| this.setState({ | ||
| currSimulationState: Enabled, | ||
| desiredSimulationState: Enabled | ||
| }); | ||
| this.eTag.next(Etag); | ||
| }, | ||
| err => this.eTag.error(err) | ||
| ); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.unmount.next(undefined); | ||
| this.unmount.unsubscribe(); | ||
| } | ||
|
|
||
| onChange = ({ target }) => { | ||
| const { name, value } = target; | ||
| this.setState({ [name]: value }); | ||
| }; | ||
|
|
||
| apply = () => { | ||
| Observable | ||
| .of(this.state.desiredSimulationState) | ||
| .do(_ => this.setState({ loading: true})) | ||
| .zip(this.eTagStream, (Enabled, Etag) => ({ Etag, Enabled })) | ||
| .flatMap(({ Etag, Enabled }) => DeviceSimulationService.toggleSimulation(Etag, Enabled)) | ||
| .takeUntil(this.unmount) | ||
| .subscribe( | ||
| () => this.props.onClose(), | ||
| err => console.error(err) | ||
| ); | ||
| }; | ||
|
|
||
| render() { | ||
| const { currSimulationState, desiredSimulationState, loading } = this.state; | ||
| const stillInitializing = currSimulationState === undefined; | ||
| const hasChanged = !stillInitializing && currSimulationState !== desiredSimulationState; | ||
|
|
||
| const simulationLabel = hasChanged ? desiredSimulationLabel[desiredSimulationState] : currSimulationLabel[currSimulationState]; | ||
|
|
||
| return ( | ||
| <div className="setting-workflow-container"> | ||
| <div className="setting-section"> | ||
| <div className="section-header">{ lang.SIMULATION_DATA }</div> | ||
| <div className="section-description">{ lang.SIMULATION_SETTINGS_DESC }</div> | ||
| <div className="section-input-group"> | ||
| <PscToggle | ||
| name="desiredSimulationState" | ||
| value={desiredSimulationState} | ||
| disabled={stillInitializing} | ||
| onChange={this.onChange} /> | ||
| <label>{ stillInitializing ? lang.LOADING : simulationLabel }</label> | ||
| </div> | ||
| </div> | ||
| <div className="btn-container"> | ||
| <PcsBtn svg={CloseIconSvg} onClick={this.props.onClose}>{hasChanged ? lang.CANCEL : lang.CLOSE }</PcsBtn> | ||
| { !loading && hasChanged && <PcsBtn onClick={this.apply}>{ lang.APPLY }</PcsBtn> } | ||
| { loading && <Spinner size='small' /> } | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default SettingFlyout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| // Copyright (c) Microsoft. All rights reserved. | ||
|
|
||
| .setting-workflow-container { | ||
|
|
||
| .setting-section { | ||
| padding-top: 24px; | ||
| border-bottom: 1px solid #454a4e; | ||
|
|
||
| .section-header { | ||
| color: #fff; | ||
| font-size: 16px; | ||
| padding-bottom: 16px; | ||
| } | ||
|
|
||
| .section-description { | ||
| padding-bottom: 24px; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .section-input-group { | ||
| padding-bottom: 48px; | ||
|
|
||
| label { | ||
| padding-left: 10px; | ||
| font-weight: normal; | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .btn-container { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| height: 30px; | ||
| margin-top: 48px; | ||
| } | ||
| } |
Oops, something went wrong.