From f1c29f6d1de69428d819a186aae1ddd29a4c88db Mon Sep 17 00:00:00 2001 From: Alexander Dejanovski Date: Fri, 30 Oct 2020 14:30:50 +0100 Subject: [PATCH] [UI] Fix switching from one cluster to the other in the repair/schedule screens The clusterName in state was consistently being overridden by an observable subscription which refreshes the list of clusters every 2 seconds but is missing a check to stop rewriting state.clusterName with the first cluster of the list in alphabetical order. Also, state updates are async in React so there can be some race conditions when updating the state and reading it again. Made the select change state change use a callback to ensure serialization of actions here. --- src/ui/app/jsx/repair-form.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/ui/app/jsx/repair-form.jsx b/src/ui/app/jsx/repair-form.jsx index ee01ea85b..2ad9adf1c 100644 --- a/src/ui/app/jsx/repair-form.jsx +++ b/src/ui/app/jsx/repair-form.jsx @@ -97,7 +97,8 @@ const repairForm = CreateReactClass({ obs.subscribeOnNext(names => { let previousNames = this.state.clusterNames; this.setState({clusterNames: names}); - if (names.length) { + if (names.length && !this.state.clusterName) { + // Set the cluster name in state if it's not set yet this.setState({clusterName: names[0]}); } if (!previousNames.length) { @@ -257,8 +258,10 @@ const repairForm = CreateReactClass({ let stateValue = {}; stateValue[stateName] = valueContext.value; - this.setState(stateValue); + this.setState(stateValue, ()=>this._handleSelectOnChangeCallback(stateName)); + }, + _handleSelectOnChangeCallback: function(stateName) { if (stateName === "clusterName") { this._getClusterStatus(); }