Show Control Plane notifications in-page using react-alert (closes #119)

snowplow · Sep 19, 2017 · 60e7082 · 60e7082
1 parent cf92b41
commit 60e7082
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 31 deletions.
diff --git a/provisioning/resources/ui/js/components/ControlPlaneComponents/AddDomainName.tsx b/provisioning/resources/ui/js/components/ControlPlaneComponents/AddDomainName.tsx
@@ -18,8 +18,12 @@
 
 import React = require('react');
 import ReactDOM = require("react-dom");
+import AlertContainer from 'react-alert';
+import alertOptions from './AlertOptions'
 import axios from 'axios';
 
+var alertContainer = new AlertContainer();
+
 export default React.createClass({
   getInitialState () {
     return {
@@ -38,6 +42,7 @@ export default React.createClass({
 
   sendFormData()  {
     var _this = this;
+    var alertShow = alertContainer.show
     var domainName = this.state.domain_name
 
     // this function will be given to the config of the axios
@@ -65,10 +70,16 @@ export default React.createClass({
         domain_name: "",
       });
       if (response.status == 405) {
-        alert(response.data);
+        alertShow(response.data, {
+          time: 2000,
+          type: 'error'
+        });
       } else {
-        alert('You will lose connection after submitting the domain name \
-                   because of server restarting. Reload the page after submission.');
+        alertShow('You will lose connection after submitting the domain name \
+                   because of server restarting. Reload the page after submission.', {
+          time: 10000,
+          type: 'info'
+        });
       }
     })
     .catch(function (error) {
@@ -77,7 +88,11 @@ export default React.createClass({
   },
 
   handleSubmit(event) {
-    alert('Please wait...');
+    var alertShow = alertContainer.show
+    alertShow('Please wait...', {
+      time: 2000,
+      type: 'info'
+    });
     event.preventDefault();
     this.sendFormData();
   },
@@ -95,6 +110,7 @@ export default React.createClass({
             <button className="btn btn-primary" type="submit" disabled={this.state.disabled}>Submit</button>
           </div>
         </form>
+        <AlertContainer ref={a => alertContainer = a} {...alertOptions} />
       </div>
     );
   }

diff --git a/provisioning/resources/ui/js/components/ControlPlaneComponents/AddExternalIgluServer.tsx b/provisioning/resources/ui/js/components/ControlPlaneComponents/AddExternalIgluServer.tsx
@@ -18,8 +18,12 @@
 
 import React = require('react');
 import ReactDOM = require("react-dom");
+import AlertContainer from 'react-alert';
+import alertOptions from './AlertOptions'
 import axios from 'axios';
 
+var alertContainer = new AlertContainer();
+
 export default React.createClass({
   getInitialState () {
     return {
@@ -43,6 +47,7 @@ export default React.createClass({
   },
 
   sendFormData()  {
+    var alertShow = alertContainer.show
     var _this = this
 
     var igluServerUri = this.state.iglu_server_uri
@@ -67,16 +72,26 @@ export default React.createClass({
     axios.post('/control-plane/add-external-iglu-server', params, {})
     .then(function (response) {
       setInitState()
-      alert('Uploaded successfully');
+      alertShow('Uploaded successfully', {
+        time: 2000,
+        type: 'success'
+      });
     })
     .catch(function (error) {
       setInitState()
-      alert('Error: ' + error.response.data);
+      alertShow('Error: ' + error.response.data, {
+        time: 2000,
+        type: 'error'
+      });
     });
   },
 
   handleSubmit(event) {
-    alert('Please wait...');
+    var alertShow = alertContainer.show
+    alertShow('Please wait...', {
+      time: 2000,
+      type: 'info'
+    });
     event.preventDefault();
     this.sendFormData();
   },
@@ -98,6 +113,7 @@ export default React.createClass({
             <button className="btn btn-primary" type="submit" disabled={this.state.disabled}>Add External Iglu Server</button>
           </div>
         </form>
+        <AlertContainer ref={a => alertContainer = a} {...alertOptions} />
       </div>
     );
   }

diff --git a/provisioning/resources/ui/js/components/ControlPlaneComponents/AddIgluServerSuperUUID.tsx b/provisioning/resources/ui/js/components/ControlPlaneComponents/AddIgluServerSuperUUID.tsx
@@ -18,8 +18,12 @@
 
 import React = require('react');
 import ReactDOM = require("react-dom");
+import AlertContainer from 'react-alert';
+import alertOptions from './AlertOptions'
 import axios from 'axios';
 
+var alertContainer = new AlertContainer();
+
 export default React.createClass({
   getInitialState () {
     return {
@@ -36,6 +40,7 @@ export default React.createClass({
 
   sendFormData()  {
     var _this = this
+    var alertShow = alertContainer.show
     var igluServerSuperUUID = this.state.iglu_server_super_uuid
 
     function setInitState() {
@@ -55,16 +60,26 @@ export default React.createClass({
     axios.post('/control-plane/add-iglu-server-super-uuid', params, {})
     .then(function (response) {
       setInitState()
-      alert('Uploaded successfully');
+      alertShow('Uploaded successfully', {
+        time: 2000,
+        type: 'success'
+      });
     })
     .catch(function (error) {
       setInitState()
-      alert('Error:' + error.response.data);
+      alertShow('Error:' + error.response.data, {
+        time: 2000,
+        type: 'error'
+      });
     });
   },
 
   handleSubmit(event) {
-    alert('Please wait...');
+    var alertShow = alertContainer.show
+    alertShow('Please wait...', {
+      time: 2000,
+      type: 'info'
+    });
     event.preventDefault();
     this.sendFormData();
   },
@@ -82,6 +97,7 @@ export default React.createClass({
             <button className="btn btn-primary" type="submit" disabled={this.state.disabled}>Add UUID</button>
           </div>
         </form>
+        <AlertContainer ref={a => alertContainer = a} {...alertOptions} />
       </div>
     );
   }

diff --git a/provisioning/resources/ui/js/components/ControlPlaneComponents/AlertOptions.tsx b/provisioning/resources/ui/js/components/ControlPlaneComponents/AlertOptions.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2016-2017 Snowplow Analytics Ltd. All rights reserved.
+ *
+ * This program is licensed to you under the Apache License Version 2.0,
+ * and you may not use this file except in compliance with the Apache License Version 2.0.
+ * You may obtain a copy of the Apache License Version 2.0 at http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the Apache License Version 2.0 is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the Apache License Version 2.0 for the specific language governing permissions and limitations there under.
+ */
+
+/// <reference path="../../../typings/node/node.d.ts" />
+/// <reference path="../../../typings/react/react.d.ts" />
+/// <reference path="../../../typings/react/react-dom.d.ts" />
+/// <reference path="../.././Interfaces.d.ts"/>
+
+export default {
+  offset: 14,
+  position: 'top right',
+  theme: 'dark',
+  time: 5000,
+  transition: 'scale'
+}
diff --git a/provisioning/resources/ui/js/components/ControlPlaneComponents/ChangeUsernamePassword.tsx b/provisioning/resources/ui/js/components/ControlPlaneComponents/ChangeUsernamePassword.tsx
@@ -18,9 +18,13 @@
 
 import React = require('react');
 import ReactDOM = require("react-dom");
+import AlertContainer from 'react-alert';
+import alertOptions from './AlertOptions'
 import axios from 'axios';
 
-export default React.createClass({
+var alertContainer = new AlertContainer();
+
+export default React.createClass({ 
   getInitialState () {
     return {
       new_username: '',
@@ -43,6 +47,7 @@ export default React.createClass({
   },
 
   sendFormData()  {
+    var alertShow = alertContainer.show
     var _this = this
 
     // there is no need to make 'disabled' false after
@@ -55,23 +60,30 @@ export default React.createClass({
     var params = new URLSearchParams();
     params.append('new_username', this.state.new_username)
     params.append('new_password', this.state.new_password)
-
+    
     var _this = this
     axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
     axios.post('/control-plane/change-username-and-password', params, {})
     .then(function (response) {
-      // there is no need to this part because status will be
+      // there is no need to this part because status will be 
       // 400 in everytime and this will be handled by catch section
     })
     .catch(function (error) {
-      alert("You will lose connection after change the username and \
+      alertShow("You will lose connection after change the username and \
                 password because of server restarting. Reload the page  \
-                after submission and login with your new username and password.");
+                after submission and login with your new username and password.", {
+        time: 10000,
+        type: 'info'
+      });
     });
   },
 
   handleSubmit(event) {
-    alert('Please wait...');
+    var alertShow = alertContainer.show
+    alertShow('Please wait...', {
+      time: 2000,
+      type: 'info'
+    });
     event.preventDefault();
     this.sendFormData();
   },
@@ -92,7 +104,8 @@ export default React.createClass({
           <div className="form-group">
             <button className="btn btn-primary" type="submit" disabled={this.state.disabled}>Submit</button>
           </div>
-        </form>
+        </form> 
+        <AlertContainer ref={a => alertContainer = a} {...alertOptions} />
       </div>
     );
   }

diff --git a/provisioning/resources/ui/js/components/ControlPlaneComponents/RestartServices.tsx b/provisioning/resources/ui/js/components/ControlPlaneComponents/RestartServices.tsx
@@ -18,9 +18,13 @@
 
 import React = require('react');
 import ReactDOM = require("react-dom");
+import AlertContainer from 'react-alert';
+import alertOptions from './AlertOptions'
 import axios from 'axios';
 
-export default React.createClass({
+var alertContainer = new AlertContainer();
+
+export default React.createClass({ 
   getInitialState () {
     return {
       disabled: false
@@ -29,34 +33,45 @@ export default React.createClass({
 
   restartAllServices(): void {
     var _this = this
+    var alertShow = alertContainer.show
 
     _this.setState({
       disabled: true
-    });
+    }); 
 
-    alert('Restarting all services...');
+    alertShow('Restarting all services...', {
+      time: 2000,
+      type: 'info'
+    });
 
     axios.put('/control-plane/restart-services', {}, {})
     .then(function (response) {
       _this.setState({
         disabled: false
       });
-      alert('All services are restarted successfully');
+      alertShow('All services are restarted successfully', {
+        time: 4000,
+        type: 'success'
+      });
     })
     .catch(function (error) {
       _this.setState({
         disabled: false
       });
-      alert('Error while restarting services, you need to hard reset your server');
+      alertShow('Error while restarting services, you need to hard reset your server', {
+        time: 4000,
+        type: 'error'
+      });
     });
   },
 
   render() {
     return (
-      <div className="tab-content">
+      <div className="tab-content">        
         <h4> Clear the cache for iglu schemas: </h4>
         <button type="button" onClick={this.restartAllServices} disabled={this.state.disabled}>Restart all services</button>
+        <AlertContainer ref={a => alertContainer = a} {...alertOptions} />
       </div>
-    );
+    );  
   }
 });