ui: Minor cleanups for progress (#309)

Signed-off-by: Ryan Northey <[email protected]>
envoyproxy · Dec 15, 2020 · cf9de41 · cf9de41
1 parent 74fab1c
commit cf9de41
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/ui/src/network/modals.js b/ui/src/network/modals.js
@@ -29,8 +29,8 @@ export class BaseNetworkFormModal extends React.PureComponent {
         const {form} = this.props;
         const {name} = form;
         return {
-            initializing: [[30, 90],  <span>Creating network ({name})...</span>],
-            create: [[90, 100],  <span>Network created ({name})...</span>]};
+            default: [[30, 100],  <span>Creating network ({name})...</span>],
+            success: [[100, 100],  <span>Network created ({name})...</span>]};
     }
 
     get tabs () {
@@ -70,6 +70,7 @@ export class BaseNetworkFormModal extends React.PureComponent {
               icon={CloudLogo}
               messages={this.activityMessages}
               success='create'
+              successTimeout={1000}
               tabs={this.tabs} />
         );
     }

diff --git a/ui/src/service/modals.js b/ui/src/service/modals.js
@@ -25,10 +25,10 @@ export class BaseServiceFormModal extends React.PureComponent {
         const {form} = this.props;
         const {name} = form;
         return {
-            default: [[10, 40], <span>Creating service ({name})...</span>],
-            pull_start: [[40, 70], <span>Pulling service image ({name})...</span>],
-            volume_create: [[70, 90], <span>Creating volumes for service ({name})...</span>],
-            start: [[90, 100], <span>Starting service container ({name})...</span>],
+            default: [[10, 30], <span>Creating service ({name})...</span>],
+            pull_start: [[30, 50], <span>Pulling service image ({name})...</span>],
+            volume_create: [[50, 70], <span>Creating volumes for service ({name})...</span>],
+            start: [[70, 100], <span>Starting service container ({name})...</span>],
             success: [[100, 100], <span>Service has started ({name})!</span>]};
     }
 

diff --git a/ui/src/shared/container.js b/ui/src/shared/container.js
@@ -44,9 +44,14 @@ export class PlaygroundProgressive extends React.Component {
     render () {
         const {value} = this.state;
         const {value: nothing, ...props} = this.props;
+        let color = 'info';
+        if (value === 100) {
+            color = 'success';
+        }
         return (
             <Progress
               {...props}
+              color={color}
               value={value} />
         );
     }
@@ -82,7 +87,6 @@ export class ContainerStarting extends React.PureComponent {
                 <Col>
                   <PlaygroundProgressive
                     striped
-                    color={color}
                     value={progress} />
                 </Col>
               </Row>

diff --git a/ui/src/shared/modal.js b/ui/src/shared/modal.js
@@ -221,6 +221,7 @@ export class BasePlaygroundFormModal extends React.PureComponent {
         iconAlt: PropTypes.string,
         fail: PropTypes.array,
         failMessage: PropTypes.string,
+        successTimeout: PropTypes.number,
 
         icon: PropTypes.string,
         type: PropTypes.string,
@@ -233,11 +234,12 @@ export class BasePlaygroundFormModal extends React.PureComponent {
         dispatch(clearForm());
     }
 
-    updateStatus = () => {
-        const {form, success} = this.props;
+    updateStatus = async () => {
+        const {dispatch, form, success, successTimeout=2000} = this.props;
         const {status} = form;
         if (status === success) {
-            this.timer = setTimeout(this.closeModal, 1000);
+            await dispatch(updateForm({status: 'success'}));
+            this.timer = setTimeout(this.closeModal, successTimeout);
         }
     }