Skip to content

Commit

Permalink
Show Control Plane notifications in-page using react-alert (closes #119)
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenFradet
BenFradet committed Dec 21, 2017
1 parent c770037 commit ab70ce8
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 0 deletions.
17 changes: 17 additions & 0 deletions provisioning/resources/ui/js/components/ControlPlaneComponents/AddDomainName.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -38,6 +42,7 @@ export default React.createClass({

sendFormData() {
var _this = this;
var alertShow = alertContainer.show
var domainName = this.state.domain_name

// there is no need to disabled false after
Expand All @@ -56,10 +61,21 @@ export default React.createClass({
// 400 in everytime and this will be handled by catch section
})
.catch(function (error) {
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.", {
time: 10000,
type: 'info'
});
});
},

handleSubmit(event) {
var alertShow = alertContainer.show
alertShow('Please wait...', {
time: 2000,
type: 'info'
});
event.preventDefault();
this.sendFormData();
},
Expand All @@ -77,6 +93,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>
);
}
Expand Down
19 changes: 19 additions & 0 deletions provisioning/resources/ui/js/components/ControlPlaneComponents/AddExternalIgluServer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -61,6 +65,7 @@ export default React.createClass({
},

sendFormData() {
var alertShow = alertContainer.show
var _this = this

var igluRepoUri = this.state.iglu_repo_uri
Expand Down Expand Up @@ -94,13 +99,26 @@ export default React.createClass({
axios.post('/control-plane/external-iglu', params, {})
.then(function (response) {
setInitState()
alertShow('Uploaded successfully', {
time: 2000,
type: 'success'
});
})
.catch(function (error) {
setInitState()
alertShow('Error: ' + error.response.data, {
time: 2000,
type: 'error'
});
});
},

handleSubmit(event) {
var alertShow = alertContainer.show
alertShow('Please wait...', {
time: 2000,
type: 'info'
});
event.preventDefault();
this.sendFormData();
},
Expand Down Expand Up @@ -134,6 +152,7 @@ export default React.createClass({
<button className="btn btn-primary" type="submit" disabled={this.state.disabled}>Add external Iglu repository</button>
</div>
</form>
<AlertContainer ref={a => alertContainer = a} {...alertOptions} />
</div>
);
}
Expand Down
19 changes: 19 additions & 0 deletions provisioning/resources/ui/js/components/ControlPlaneComponents/AddLocalIgluApikey.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -36,6 +40,7 @@ export default React.createClass({

sendFormData() {
var _this = this
var alertShow = alertContainer.show
var igluServerSuperUUID = this.state.local_iglu_apikey

function setInitState() {
Expand All @@ -54,13 +59,26 @@ export default React.createClass({
axios.post('/control-plane/local-iglu-apikey', params, {})
.then(function (response) {
setInitState()
alertShow('Uploaded successfully', {
time: 2000,
type: 'success'
});
})
.catch(function (error) {
setInitState()
alertShow('Error:' + error.response.data, {
time: 2000,
type: 'error'
});
});
},

handleSubmit(event) {
var alertShow = alertContainer.show
alertShow('Please wait...', {
time: 2000,
type: 'info'
});
event.preventDefault();
this.sendFormData();
},
Expand All @@ -78,6 +96,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>
);
}
Expand Down
17 changes: 17 additions & 0 deletions provisioning/resources/ui/js/components/ControlPlaneComponents/ChangeUsernamePassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -64,10 +69,21 @@ export default React.createClass({
// 400 in everytime and this will be handled by catch section
})
.catch(function (error) {
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.", {
time: 10000,
type: 'info'
});
});
},

handleSubmit(event) {
var alertShow = alertContainer.show
alertShow('Please wait...', {
time: 2000,
type: 'info'
});
event.preventDefault();
this.sendFormData();
},
Expand All @@ -89,6 +105,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>
);
}
Expand Down
19 changes: 19 additions & 0 deletions provisioning/resources/ui/js/components/ControlPlaneComponents/RestartServices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -29,21 +33,35 @@ export default React.createClass({

restartAllServices(): void {
var _this = this
var alertShow = alertContainer.show

_this.setState({
disabled: true
});

alertShow('Restarting all services...', {
time: 2000,
type: 'info'
});

axios.put('/control-plane/restart-services', {}, {})
.then(function (response) {
_this.setState({
disabled: false
});
alertShow('All services are restarted successfully', {
time: 4000,
type: 'success'
});
})
.catch(function (error) {
_this.setState({
disabled: false
});
alertShow('Error while restarting services, you need to hard reset your server', {
time: 4000,
type: 'error'
});
});
},

Expand All @@ -52,6 +70,7 @@ export default React.createClass({
<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>
);
}
Expand Down
19 changes: 19 additions & 0 deletions provisioning/resources/ui/js/components/ControlPlaneComponents/UploadEnrichments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -33,6 +37,7 @@ export default React.createClass({
},

sendFormData() {
var alertShow = alertContainer.show
var _this = this

_this.setState({
Expand All @@ -43,9 +48,17 @@ export default React.createClass({
axios.post('/control-plane/enrichments', this.state.data, {})
.then(function (response) {
setInitState()
alertShow('Uploaded successfully', {
time: 2000,
type: 'success'
});
})
.catch(function (error) {
setInitState()
alertShow('Error: ' + error.response.data, {
time: 2000,
type: 'error'
});
});

function setInitState() {
Expand All @@ -58,6 +71,11 @@ export default React.createClass({
},

handleSubmit(event) {
var alertShow = alertContainer.show
alertShow('Please wait...', {
time: 2000,
type: 'info'
});
event.preventDefault();
this.sendFormData();
},
Expand All @@ -74,6 +92,7 @@ export default React.createClass({
<button className="btn btn-primary" type="submit" disabled={this.state.disabled}>Upload enrichment json file</button>
</div>
</form>
<AlertContainer ref={a => alertContainer = a} {...alertOptions} />
</div>
);
}
Expand Down

0 comments on commit ab70ce8

Please sign in to comment.