aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src
diff options
context:
space:
mode:
Diffstat (limited to 'ui-react/src')
-rw-r--r--ui-react/src/LoopUI.js39
-rw-r--r--ui-react/src/LoopUI.test.js18
-rw-r--r--ui-react/src/__snapshots__/LoopUI.test.js.snap63
-rw-r--r--ui-react/src/__snapshots__/OnapClamp.test.js.snap63
-rw-r--r--ui-react/src/components/dialogs/Loop/DeployLoopModal.js6
-rw-r--r--ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js5
-rw-r--r--ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js2
-rw-r--r--ui-react/src/components/dialogs/PerformActions.js4
-rw-r--r--ui-react/src/components/dialogs/PerformActions.test.js10
-rw-r--r--ui-react/src/components/dialogs/RefreshStatus.js4
-rw-r--r--ui-react/src/components/dialogs/RefreshStatus.test.js10
11 files changed, 147 insertions, 77 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index bc3f2355e..5e2da79c6 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -109,7 +109,8 @@ export default class LoopUI extends React.Component {
userName: null,
loopName: OnapConstants.defaultLoopName,
loopCache: new LoopCache({}),
- showAlert: false
+ showSucAlert: false,
+ showFailAlert: false
};
constructor() {
@@ -119,7 +120,8 @@ export default class LoopUI extends React.Component {
this.updateLoopCache = this.updateLoopCache.bind(this);
this.loadLoop = this.loadLoop.bind(this);
this.closeLoop = this.closeLoop.bind(this);
- this.showAlert = this.showAlert.bind(this);
+ this.showSucAlert = this.showSucAlert.bind(this);
+ this.showFailAlert = this.showFailAlert.bind(this);
this.disableAlert = this.disableAlert.bind(this);
}
@@ -168,9 +170,14 @@ export default class LoopUI extends React.Component {
renderAlertBar() {
return (
- <Alert variant="danger" show={this.state.showAlert} onClose={this.disableAlert} dismissible>
+ <div>
+ <Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible>
{this.state.showMessage}
</Alert>
+ <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
+ {this.state.showMessage}
+ </Alert>
+ </div>
);
}
@@ -223,12 +230,16 @@ export default class LoopUI extends React.Component {
console.info(this.state.loopName+" loop loaded successfully");
}
- showAlert(message) {
- this.setState ({ showAlert: true, showMessage:message });
+ showSucAlert(message) {
+ this.setState ({ showSucAlert: true, showMessage:message });
}
+ showFailAlert(message) {
+ this.setState ({ showFailAlert: true, showMessage:message });
+ }
+
disableAlert() {
- this.setState ({ showAlert: false });
+ this.setState ({ showSucAlert: false, showFailAlert: false });
}
loadLoop(loopName) {
@@ -258,7 +269,7 @@ export default class LoopUI extends React.Component {
<Route path="/ViewLoopTemplatesModal" render={(routeProps) => (<ViewLoopTemplatesModal {...routeProps} />)} />
<Route path="/ManageDictionaries" render={(routeProps) => (<ManageDictionaries {...routeProps} />)} />
<Route path="/operationalPolicyModal"
- render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
+ render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
<Route path="/policyModal/:policyInstanceType/:policyName" render={(routeProps) => (<PolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
<Route path="/configurationPolicyModal/:policyName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
<Route path="/createLoop" render={(routeProps) => (<CreateLoopModal {...routeProps} loadLoopFunction={this.loadLoop} />)} />
@@ -268,13 +279,13 @@ export default class LoopUI extends React.Component {
<Route path="/userInfo" render={(routeProps) => (<UserInfoModal {...routeProps} />)} />
<Route path="/closeLoop" render={this.closeLoop} />
- <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps} loopAction="submit" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
- <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps} loopAction="stop" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
- <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps} loopAction="restart" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
- <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps} loopAction="delete" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
- <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps} loopAction="undeploy" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
- <Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
- <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
+ <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps} loopAction="submit" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
+ <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps} loopAction="stop" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
+ <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps} loopAction="restart" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
+ <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps} loopAction="delete" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
+ <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps} loopAction="undeploy" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
+ <Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
+ <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
<Route path="/logout" render={this.logout} />
<GlobalClampStyle />
{this.renderAlertBar()}
diff --git a/ui-react/src/LoopUI.test.js b/ui-react/src/LoopUI.test.js
index d1b76aa9a..6885e7932 100644
--- a/ui-react/src/LoopUI.test.js
+++ b/ui-react/src/LoopUI.test.js
@@ -66,7 +66,8 @@ describe('Verify LoopUI', () => {
const component = shallow(<LoopUI />)
component.setState({
loopName: "testLoopName",
- showAlert: false
+ showSucAlert: false,
+ showFailAlert: false
});
await flushPromises();
expect(component).toMatchSnapshot();
@@ -158,15 +159,22 @@ describe('Verify LoopUI', () => {
test('Test alert methods', () => {
const component = shallow(<LoopUI />)
- expect(component.state('showAlert')).toEqual(false);
+ expect(component.state('showSucAlert')).toEqual(false);
const instance = component.instance();
- instance.showAlert("testAlert");
- expect(component.state('showAlert')).toEqual(true);
+ instance.showSucAlert("testAlert");
+ expect(component.state('showSucAlert')).toEqual(true);
+ expect(component.state('showFailAlert')).toEqual(false);
expect(component.state('showMessage')).toEqual("testAlert");
instance.disableAlert();
- expect(component.state('showAlert')).toEqual(false);
+ expect(component.state('showSucAlert')).toEqual(false);
+ expect(component.state('showFailAlert')).toEqual(false);
+
+ instance.showFailAlert("testAlert2");
+ expect(component.state('showSucAlert')).toEqual(false);
+ expect(component.state('showFailAlert')).toEqual(true);
+ expect(component.state('showMessage')).toEqual("testAlert2");
})
});
diff --git a/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap
index 9de232dd6..e523de948 100644
--- a/ui-react/src/__snapshots__/LoopUI.test.js.snap
+++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap
@@ -89,27 +89,50 @@ exports[`Verify LoopUI Test the render method 1`] = `
render={[Function]}
/>
<GlobalStyleComponent />
- <Alert
- closeLabel="Close alert"
- dismissible={true}
- onClose={[Function]}
- show={false}
- transition={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "defaultProps": Object {
- "appear": false,
- "in": false,
- "mountOnEnter": false,
- "timeout": 300,
- "unmountOnExit": false,
- },
- "displayName": "Fade",
- "render": [Function],
+ <div>
+ <Alert
+ closeLabel="Close alert"
+ dismissible={true}
+ onClose={[Function]}
+ show={false}
+ transition={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "defaultProps": Object {
+ "appear": false,
+ "in": false,
+ "mountOnEnter": false,
+ "timeout": 300,
+ "unmountOnExit": false,
+ },
+ "displayName": "Fade",
+ "render": [Function],
+ }
}
- }
- variant="danger"
- />
+ variant="success"
+ />
+ <Alert
+ closeLabel="Close alert"
+ dismissible={true}
+ onClose={[Function]}
+ show={false}
+ transition={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "defaultProps": Object {
+ "appear": false,
+ "in": false,
+ "mountOnEnter": false,
+ "timeout": 300,
+ "unmountOnExit": false,
+ },
+ "displayName": "Fade",
+ "render": [Function],
+ }
+ }
+ variant="danger"
+ />
+ </div>
<Navbar
collapseOnSelect={false}
expand={true}
diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
index 91812b7c5..235185321 100644
--- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -114,27 +114,50 @@ exports[`Verify OnapClamp Test the render method 1`] = `
render={[Function]}
/>
<GlobalStyleComponent />
- <Alert
- closeLabel="Close alert"
- dismissible={true}
- onClose={[Function]}
- show={false}
- transition={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "defaultProps": Object {
- "appear": false,
- "in": false,
- "mountOnEnter": false,
- "timeout": 300,
- "unmountOnExit": false,
- },
- "displayName": "Fade",
- "render": [Function],
+ <div>
+ <Alert
+ closeLabel="Close alert"
+ dismissible={true}
+ onClose={[Function]}
+ show={false}
+ transition={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "defaultProps": Object {
+ "appear": false,
+ "in": false,
+ "mountOnEnter": false,
+ "timeout": 300,
+ "unmountOnExit": false,
+ },
+ "displayName": "Fade",
+ "render": [Function],
+ }
}
- }
- variant="danger"
- />
+ variant="success"
+ />
+ <Alert
+ closeLabel="Close alert"
+ dismissible={true}
+ onClose={[Function]}
+ show={false}
+ transition={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "defaultProps": Object {
+ "appear": false,
+ "in": false,
+ "mountOnEnter": false,
+ "timeout": 300,
+ "unmountOnExit": false,
+ },
+ "displayName": "Fade",
+ "render": [Function],
+ }
+ }
+ variant="danger"
+ />
+ </div>
<Navbar
collapseOnSelect={false}
expand={true}
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
index d034ee5d7..5dacad13b 100644
--- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
@@ -84,12 +84,12 @@ export default class DeployLoopModal extends React.Component {
// save the global propserties
LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
LoopActionService.performAction(loopName, "deploy").then(pars => {
- this.props.showAlert("Action deploy successfully performed");
+ this.props.showSucAlert("Action deploy successfully performed");
// refresh status and update loop logs
this.refreshStatus(loopName);
})
.catch(error => {
- this.props.showAlert("Action deploy failed");
+ this.props.showFailAlert("Action deploy failed");
// refresh status and update loop logs
this.refreshStatus(loopName);
});
@@ -103,7 +103,7 @@ export default class DeployLoopModal extends React.Component {
this.props.updateLoopFunction(data);
})
.catch(error => {
- this.props.showAlert("Refresh status failed");
+ this.props.showFailAlert("Refresh status failed");
});
}
handleChange(event) {
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
index 5f1dcd5fc..84dbfd1f6 100644
--- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
@@ -63,7 +63,8 @@ describe('Verify DeployLoopModal', () => {
const flushPromises = () => new Promise(setImmediate);
const historyMock = { push: jest.fn() };
const updateLoopFunction = jest.fn();
- const showAlert = jest.fn();
+ const showSucAlert = jest.fn();
+ const showFailAlert = jest.fn();
const handleSave = jest.spyOn(DeployLoopModal.prototype,'handleSave');
LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => {
return Promise.resolve({
@@ -88,7 +89,7 @@ describe('Verify DeployLoopModal', () => {
});
const component = shallow(<DeployLoopModal history={historyMock}
- loopCache={loopCache} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />)
+ loopCache={loopCache} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
component.find('[variant="primary"]').prop('onClick')();
await flushPromises();
diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
index 89e70795e..149639cbc 100644
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
@@ -56,7 +56,7 @@ export default class OperationalPolicyModal extends React.Component {
if (errors.length !== 0) {
console.error("Errors detected during config policy data validation ", errors);
- this.props.showAlert(errors);
+ this.props.showFailAlert(errors);
}
else {
console.info("NO validation errors found in config policy data");
diff --git a/ui-react/src/components/dialogs/PerformActions.js b/ui-react/src/components/dialogs/PerformActions.js
index 66b192863..cf5a3c20e 100644
--- a/ui-react/src/components/dialogs/PerformActions.js
+++ b/ui-react/src/components/dialogs/PerformActions.js
@@ -52,12 +52,12 @@ export default class PerformActions extends React.Component {
const loopName = this.state.loopName;
LoopActionService.performAction(loopName, action).then(pars => {
- this.props.showAlert("Action " + action + " successfully performed");
+ this.props.showSucAlert("Action " + action + " successfully performed");
// refresh status and update loop logs
this.refreshStatus(loopName);
})
.catch(error => {
- this.props.showAlert("Action " + action + " failed");
+ this.props.showFailAlert("Action " + action + " failed");
// refresh status and update loop logs
this.refreshStatus(loopName);
});
diff --git a/ui-react/src/components/dialogs/PerformActions.test.js b/ui-react/src/components/dialogs/PerformActions.test.js
index 0b0786290..b833a929d 100644
--- a/ui-react/src/components/dialogs/PerformActions.test.js
+++ b/ui-react/src/components/dialogs/PerformActions.test.js
@@ -36,7 +36,8 @@ describe('Verify PerformActions', () => {
const flushPromises = () => new Promise(setImmediate);
const historyMock = { push: jest.fn() };
const updateLoopFunction = jest.fn();
- const showAlert = jest.fn();
+ const showSucAlert = jest.fn();
+ const showFailAlert = jest.fn();
LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
return Promise.resolve({
@@ -46,7 +47,7 @@ describe('Verify PerformActions', () => {
});
});
const component = shallow(<PerformActions loopCache={loopCache}
- loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />)
+ loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
await flushPromises();
component.update();
@@ -57,7 +58,8 @@ describe('Verify PerformActions', () => {
const flushPromises = () => new Promise(setImmediate);
const historyMock = { push: jest.fn() };
const updateLoopFunction = jest.fn();
- const showAlert = jest.fn();
+ const showSucAlert = jest.fn();
+ const showFailAlert = jest.fn();
LoopActionService.performAction = jest.fn().mockImplementation(() => {
return Promise.resolve({
@@ -74,7 +76,7 @@ describe('Verify PerformActions', () => {
});
});
const component = shallow(<PerformActions loopCache={loopCache}
- loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />)
+ loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
await flushPromises();
component.update();
diff --git a/ui-react/src/components/dialogs/RefreshStatus.js b/ui-react/src/components/dialogs/RefreshStatus.js
index 64b35d99b..bb0939152 100644
--- a/ui-react/src/components/dialogs/RefreshStatus.js
+++ b/ui-react/src/components/dialogs/RefreshStatus.js
@@ -44,12 +44,12 @@ export default class RefreshStatus extends React.Component {
componentDidMount() {
// refresh status and update loop logs
LoopActionService.refreshStatus(this.state.loopName).then(data => {
- this.props.showAlert("Status successfully refreshed");
+ this.props.showSucAlert("Status successfully refreshed");
this.props.updateLoopFunction(data);
this.props.history.push('/');
})
.catch(error => {
- this.props.showAlert("Status refreshing failed");
+ this.props.showFailAlert("Status refreshing failed");
this.props.history.push('/');
});
}
diff --git a/ui-react/src/components/dialogs/RefreshStatus.test.js b/ui-react/src/components/dialogs/RefreshStatus.test.js
index 3038eb321..e08c50d2e 100644
--- a/ui-react/src/components/dialogs/RefreshStatus.test.js
+++ b/ui-react/src/components/dialogs/RefreshStatus.test.js
@@ -35,9 +35,10 @@ describe('Verify RefreshStatus', () => {
it('Test refresh status failed', async () => {
const flushPromises = () => new Promise(setImmediate);
const historyMock = { push: jest.fn() };
- const showAlert = jest.fn();
+ const showSucAlert = jest.fn();
+ const showFailAlert = jest.fn();
- const component = shallow(<RefreshStatus loopCache={loopCache} history={historyMock} showAlert={showAlert} />)
+ const component = shallow(<RefreshStatus loopCache={loopCache} history={historyMock} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
await flushPromises();
component.update();
@@ -48,7 +49,8 @@ describe('Verify RefreshStatus', () => {
const flushPromises = () => new Promise(setImmediate);
const historyMock = { push: jest.fn() };
const updateLoopFunction = jest.fn();
- const showAlert = jest.fn();
+ const showSucAlert = jest.fn();
+ const showFailAlert = jest.fn();
LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
return Promise.resolve({
@@ -59,7 +61,7 @@ describe('Verify RefreshStatus', () => {
});
const component = shallow(<RefreshStatus loopCache={loopCache}
- loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />)
+ loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
await flushPromises();
component.update();