diff options
Diffstat (limited to 'ui-react/src')
| -rw-r--r-- | ui-react/src/api/PolicyService.js | 23 | ||||
| -rw-r--r-- | ui-react/src/components/dialogs/Policy/ViewAllPolicies.js | 95 | ||||
| -rw-r--r-- | ui-react/src/components/menu/MenuBar.js | 24 | ||||
| -rw-r--r-- | ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap | 42 |
4 files changed, 142 insertions, 42 deletions
diff --git a/ui-react/src/api/PolicyService.js b/ui-react/src/api/PolicyService.js index fdbb5d5ea..16cc1f322 100644 --- a/ui-react/src/api/PolicyService.js +++ b/ui-react/src/api/PolicyService.js @@ -40,4 +40,27 @@ export default class PolicyService { return {}; }); } + static createNewPolicy(policyModelType, policyModelVersion, policyJson) { + return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/' + policyModelVersion, { + method: 'POST', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(policyJson) + }) + .then(function (response) { + console.debug("createNewPolicy response received: ", response.status); + if (response.ok) { + return response.text; + } else { + console.error("createNewPolicy query failed"); + return ""; + } + }) + .catch(function (error) { + console.error("createNewPolicy error received", error); + throw new Error(error) + }); + } } diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js index a1cf9d5c1..dfebc51d8 100644 --- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js +++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js @@ -47,6 +47,12 @@ import PolicyService from '../../../api/PolicyService'; import PolicyToscaService from '../../../api/PolicyToscaService'; import Select from 'react-select'; import JSONEditor from '@json-editor/json-editor'; +import OnapUtils from '../../../utils/OnapUtils'; +import Alert from 'react-bootstrap/Alert'; + +const DivWhiteSpaceStyled = styled.div` + white-space: pre; +` const ModalStyled = styled(Modal)` @media (min-width: 1200px) { @@ -76,9 +82,11 @@ export default class ViewAllPolicies extends React.Component { state = { show: true, content: 'Please select a policy to display it', - selectedRow: -1, + selectedRowId: -1, policiesListData: [], prefixGrouping: false, + showSuccessAlert: false, + showFailAlert: false, policyColumnsDefinition: [ { title: "Policy Name", field: "name", @@ -148,7 +156,8 @@ export default class ViewAllPolicies extends React.Component { this.handlePrefixGrouping = this.handlePrefixGrouping.bind(this); this.handleDeletePolicy = this.handleDeletePolicy.bind(this); this.handleUpdatePolicy = this.handleUpdatePolicy.bind(this); - this.handleCreateNewVersion = this.handleCreateNewVersion(this); + this.handleCreateNewVersion = this.handleCreateNewVersion.bind(this); + this.disableAlert = this.disableAlert.bind(this); this.getAllPolicies(); } @@ -159,10 +168,10 @@ export default class ViewAllPolicies extends React.Component { let selectedSubPdpGroup = pdpSplit[1]; if (typeof selectedSubPdpGroup !== "undefined") { let temp = this.state.policiesListData; - temp[this.state.selectedRow]["pdpGroupInfo"] = {"pdpGroup":selectedPdpGroup,"pdpSubGroup":selectedSubPdpGroup}; + temp[this.state.selectedRowId]["pdpGroupInfo"] = {"pdpGroup":selectedPdpGroup,"pdpSubGroup":selectedSubPdpGroup}; this.setState({policiesListData: temp}); } else { - delete this.state.policiesListData[this.state.selectedRow]["pdpGroupInfo"]; + delete this.state.policiesListData[this.state.selectedRowId]["pdpGroupInfo"]; } } @@ -237,9 +246,9 @@ export default class ViewAllPolicies extends React.Component { handleOnRowClick(rowData) { PolicyToscaService.getToscaPolicyModel(rowData["type"], rowData["type_version"]).then(respJsonPolicyTosca => { this.setState({ - selectedRow: rowData.tableData.id, - selectedRowJsonSchema: respJsonPolicyTosca, - selectedRowPolicyProperties: rowData["properties"], + selectedRowId: rowData.tableData.id, + selectedRowIdJsonSchema: respJsonPolicyTosca, + selectedRowIdPolicyProperties: rowData["properties"], jsonEditorForPolicy: this.createJsonEditor(respJsonPolicyTosca, rowData["properties"]) }); }); @@ -253,8 +262,52 @@ export default class ViewAllPolicies extends React.Component { return null; } - handleCreateNewVersion(event,rowData) { - return null; + customValidation(editorData) { + // method for sub-classes to override with customized validation + return []; + } + + handleCreateNewVersion() { + var editorData = this.state.jsonEditorForPolicy.getValue(); + var errors = this.state.jsonEditorForPolicy.validate(); + errors = errors.concat(this.customValidation(editorData)); + + if (errors.length !== 0) { + console.error("Errors detected during policy data validation ", errors); + this.setState({ + showFailAlert: true, + showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors) + }); + return; + } else { + console.info("NO validation errors found in policy data"); + let newPolicy = JSON.parse(JSON.stringify(this.state.policiesListData[this.state.selectedRowId])); + newPolicy["properties"] = editorData; + let newVersion = this.bumpVersion(newPolicy["version"]); + newPolicy["version"] = newVersion; + newPolicy["metadata"]["policy-version"] = newVersion; + // Remove stuff added by UI + delete newPolicy["tableData"]; + PolicyService.createNewPolicy(newPolicy["type"], newPolicy["type_version"], newPolicy).then(respPolicyCreation => { + if (respPolicyCreation === "") { + //it indicates a failure + this.setState({ + showFailAlert: true, + showMessage: 'Policy Creation Failure' + }); + } else { + this.setState({ + showSuccessAlert: true, + showMessage: 'Policy in version ' + newVersion + ' created successfully' + }); + } + }) + } + } + + bumpVersion(versionToBump) { + let semVer = versionToBump.split("."); + return parseInt(semVer[0])+1 + "." + semVer[1] + "." + semVer[2]; } handleUpdatePolicy() { @@ -262,11 +315,16 @@ export default class ViewAllPolicies extends React.Component { this.props.history.push('/') } + disableAlert() { + this.setState ({ showSuccessAlert: false, showFailAlert: false }); + } + render() { return ( <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}> <Modal.Header closeButton> </Modal.Header> + <Modal.Body> <FormControlLabel control={<Switch checked={this.state.prefixGrouping} onChange={this.handlePrefixGrouping} />} @@ -283,7 +341,7 @@ export default class ViewAllPolicies extends React.Component { exportButton: true, headerStyle:rowHeaderStyle, rowStyle: rowData => ({ - backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF' + backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF' }) }} actions={[ @@ -293,14 +351,25 @@ export default class ViewAllPolicies extends React.Component { onClick: (event, rowData) => this.handleDeletePolicy(event, rowData) } ]} - /> <JsonEditorDiv> <h5>Policy Properties Editor</h5> <div id="policy-editor" title="Policy Properties"/> - <Button variant="secondary" title="Create a new policy version from the defined parameters" onClick={this.handleCreateNewVersion}>Create New Version</Button> - <Button variant="secondary" title="Update the current policy version, BE CAREFUL this will undeploy the policy from PDP, delete it and then recreate the policy" onClick={this.handleUpdatePolicy}>Update Current Version</Button> + <Button variant="secondary" title="Create a new policy version from the defined parameters" + onClick={this.handleCreateNewVersion}>Create New Version</Button> + <Button variant="secondary" title="Update the current policy version, BE CAREFUL this will undeploy the policy from PDP, delete it and then recreate the policy" + onClick={this.handleUpdatePolicy}>Update Current Version</Button> </JsonEditorDiv> + <Alert variant="success" show={this.state.showSuccessAlert} onClose={this.disableAlert} dismissible> + <DivWhiteSpaceStyled> + {this.state.showMessage} + </DivWhiteSpaceStyled> + </Alert> + <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible> + <DivWhiteSpaceStyled> + {this.state.showMessage} + </DivWhiteSpaceStyled> + </Alert> </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={this.handleClose}>Close</Button> diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js index 40a3890a5..ae1387912 100644 --- a/ui-react/src/components/menu/MenuBar.js +++ b/ui-react/src/components/menu/MenuBar.js @@ -86,16 +86,18 @@ export default class MenuBar extends React.Component { render () { return ( <Navbar.Collapse> - <StyledNavDropdown title="Loop Templates"> - <NavDropdown.Item as={StyledLink} to="/viewLoopTemplatesModal">View All Templates</NavDropdown.Item> - </StyledNavDropdown> - <StyledNavDropdown title="Policy Models"> - <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item> + <StyledNavDropdown title="POLICY Framework"> <NavDropdown.Item as={StyledLink} to="/manageDictionaries">Manage Metadata Dictionaries</NavDropdown.Item> + <NavDropdown.Divider /> <NavDropdown.Item as={StyledLink} to="/viewAllPolicies">View All Policies</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item> + <NavDropdown.Divider /> + <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item> + </StyledNavDropdown> + <StyledNavDropdown title="LOOP Templates"> + <NavDropdown.Item as={StyledLink} to="/viewLoopTemplatesModal">View All Templates</NavDropdown.Item> </StyledNavDropdown> - <StyledNavDropdown title="Loop Instance"> + <StyledNavDropdown title="LOOP Instance"> <NavDropdown.Item as={StyledLink} to="/createLoop">Create</NavDropdown.Item> <NavDropdown.Item as={StyledLink} to="/openLoop">Open</NavDropdown.Item> <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item> @@ -104,10 +106,10 @@ export default class MenuBar extends React.Component { <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item> <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item> </StyledNavDropdown> - <StyledNavDropdown title="Loop Operations"> - <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Engine(SUBMIT)</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Engine (STOP)</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Engine (RESTART)</NavDropdown.Item> + <StyledNavDropdown title="LOOP Operations"> + <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Framework (SUBMIT)</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Framework (STOP)</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Framework (RESTART)</NavDropdown.Item> <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item> diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap index 69a0e85db..fd9956ed2 100644 --- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap +++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap @@ -3,7 +3,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` <NavbarCollapse> <Styled(NavDropdown) - title="Loop Templates" + title="POLICY Framework" > <DropdownItem as={ @@ -52,14 +52,13 @@ exports[`Verify MenuBar Test the render method 1`] = ` } } disabled={false} - to="/viewLoopTemplatesModal" + to="/manageDictionaries" > - View All Templates + Manage Metadata Dictionaries </DropdownItem> - </Styled(NavDropdown)> - <Styled(NavDropdown) - title="Policy Models" - > + <DropdownDivider + role="separator" + /> <DropdownItem as={ Object { @@ -107,9 +106,9 @@ exports[`Verify MenuBar Test the render method 1`] = ` } } disabled={false} - to="/uploadToscaPolicyModal" + to="/viewAllPolicies" > - Upload Tosca Model + View All Policies </DropdownItem> <DropdownItem as={ @@ -162,6 +161,9 @@ exports[`Verify MenuBar Test the render method 1`] = ` > View Tosca Models </DropdownItem> + <DropdownDivider + role="separator" + /> <DropdownItem as={ Object { @@ -209,10 +211,14 @@ exports[`Verify MenuBar Test the render method 1`] = ` } } disabled={false} - to="/manageDictionaries" + to="/uploadToscaPolicyModal" > - Manage Metadata Dictionaries + Upload Tosca Model </DropdownItem> + </Styled(NavDropdown)> + <Styled(NavDropdown) + title="LOOP Templates" + > <DropdownItem as={ Object { @@ -260,13 +266,13 @@ exports[`Verify MenuBar Test the render method 1`] = ` } } disabled={false} - to="/viewAllPolicies" + to="/viewLoopTemplatesModal" > - View All Policies + View All Templates </DropdownItem> </Styled(NavDropdown)> <Styled(NavDropdown) - title="Loop Instance" + title="LOOP Instance" > <DropdownItem as={ @@ -579,7 +585,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` </DropdownItem> </Styled(NavDropdown)> <Styled(NavDropdown) - title="Loop Operations" + title="LOOP Operations" > <DropdownItem as={ @@ -630,7 +636,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` disabled={true} to="/submit" > - Create and deploy to Policy Engine(SUBMIT) + Create and deploy to Policy Framework (SUBMIT) </DropdownItem> <DropdownItem as={ @@ -681,7 +687,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` disabled={true} to="/stop" > - Undeploy from Policy Engine (STOP) + Undeploy from Policy Framework (STOP) </DropdownItem> <DropdownItem as={ @@ -732,7 +738,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` disabled={true} to="/restart" > - ReDeploy to Policy Engine (RESTART) + ReDeploy to Policy Framework (RESTART) </DropdownItem> <DropdownItem as={ |