diff options
16 files changed, 1649 insertions, 933 deletions
diff --git a/ui-react/package.json b/ui-react/package.json index 791ab9df5..c6369a3a3 100644 --- a/ui-react/package.json +++ b/ui-react/package.json @@ -3,6 +3,7 @@ "version": "0.0.1", "description": "ONAP Clamp Designer UI", "main": "index.js", + "proxy": "http://localhost:8080", "scripts": { "start": "react-scripts start", "build": "react-scripts build", diff --git a/ui-react/src/components/app/LoopUI.js b/ui-react/src/components/app/LoopUI.js index 7de6ad01b..d058543a2 100644 --- a/ui-react/src/components/app/LoopUI.js +++ b/ui-react/src/components/app/LoopUI.js @@ -31,14 +31,15 @@ import { GlobalClampStyle } from '../../theme/globalStyle.js'; import ClosedLoopSvg from '../loop_viewer/svg/ClosedLoopSvg'; import ClosedLoopLogs from '../loop_viewer/logs/ClosedLoopLogs'; import ClosedLoopStatus from '../loop_viewer/status/ClosedLoopStatus'; +import UserService from '../backend_communication/UserService'; -const ProjectNameStyle = styled.a` +const ProjectNameStyled = styled.a` vertical-align: middle; padding-left: 30px; font-size: 30px; ` -const LoopViewDivStyle = styled.div` +const LoopViewDivStyled = styled.div` height: 90vh; overflow: hidden; margin-left: 10px; @@ -50,52 +51,69 @@ const LoopViewDivStyle = styled.div` border-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; ` -const LoopViewHeaderDivStyle = styled.div` +const LoopViewHeaderDivStyled = styled.div` background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; padding: 10px 10px; color: ${props => props.theme.loopViewerHeaderFontColor}; ` -const LoopViewBodyDivStyle = styled.div` +const LoopViewBodyDivStyled = styled.div` background-color: ${props => (props.theme.loopViewerBackgroundColor)}; padding: 10px 10px; color: ${props => (props.theme.loopViewerHeaderFontColor)}; height: 95%; ` -const LoopViewLoopNameSpanStyle = styled.span` +const LoopViewLoopNameSpanStyled = styled.span` font-weight: bold; color: ${props => (props.theme.loopViewerHeaderFontColor)}; background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)}; ` export default class LoopUI extends React.Component { + state = { + userName: null, + loopName: "Empty (NO loop loaded yet)", + }; - loopName="Empty (NO loop loaded yet)"; + constructor() { + super(); + this.getUser = this.getUser.bind(this); + } + + componentDidMount() { + this.getUser(); + } + + getUser() { + UserService.LOGIN().then(user => { + this.setState({userName:user}) + }); + } renderMenuNavBar() { return ( <MenuBar /> ); } - + renderUserLoggedNavBar() { return ( <Navbar.Text> - Signed in as: <a href="login">{localStorage.getItem('user')}</a> + Signed in as: <a href="/login">{this.state.userName}</a> </Navbar.Text> ); } - + renderLogoNavBar() { return ( <Navbar.Brand> <img height="50px" width="234px" src={logo} alt=""/> - <ProjectNameStyle>CLAMP</ProjectNameStyle> + <ProjectNameStyled>CLAMP</ProjectNameStyled> </Navbar.Brand> ); } - + renderNavBar() { return ( <Navbar expand="lg"> @@ -108,34 +126,34 @@ export default class LoopUI extends React.Component { renderLoopViewHeader() { return ( - <LoopViewHeaderDivStyle> - Loop Viewer - <LoopViewLoopNameSpanStyle id="loop_name">{this.loopName}</LoopViewLoopNameSpanStyle> - </LoopViewHeaderDivStyle> + <LoopViewHeaderDivStyled> + Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled> + </LoopViewHeaderDivStyled> ); } renderLoopViewBody() { return ( - <LoopViewBodyDivStyle> + <LoopViewBodyDivStyled> <ClosedLoopSvg /> <ClosedLoopLogs /> <ClosedLoopStatus /> - </LoopViewBodyDivStyle> + </LoopViewBodyDivStyled> ); } renderLoopViewer() { return ( - <LoopViewDivStyle> + <LoopViewDivStyled> {this.renderLoopViewHeader()} {this.renderLoopViewBody()} - </LoopViewDivStyle> + </LoopViewDivStyled> ); } render() { return ( - <div> + <div id="main_div"> <GlobalClampStyle /> {this.renderNavBar()} {this.renderLoopViewer()} diff --git a/ui-react/src/components/app/login/BasicAuthLogin.js b/ui-react/src/components/app/login/BasicAuthLogin.js deleted file mode 100644 index 994255cd3..000000000 --- a/ui-react/src/components/app/login/BasicAuthLogin.js +++ /dev/null @@ -1,117 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 AT&T Intellectual Property. All rights - * reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END============================================ - * =================================================================== - * - */ -import React from 'react'; -import styled from 'styled-components'; -import LoopService from '../../backend_communication/LoopService'; - -const LoginHeaderStyle = styled.span` - font-size: 20px; - font-weight: bold; - padding-left: 10px; - color: ${props => props.theme.loopViewerHeaderFontColor}; -` -const LoginDivStyle = styled.div` - font-size: 12px; - background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; - padding: 10px 10px; - color: ${props => props.theme.loopViewerHeaderFontColor}; -` -const LoginSubmitButtonStyle = styled.button` - font-size: 12px; - padding: 5px 10px; - color: ${props => props.theme.loopViewerHeaderFontColor}; - border: 2px solid; - border-radius: 8px; -` -const LoginTextInputStyle = styled.input` - padding: 10px 10px; - margin-left: 20px; - border: 1px solid #ced4da; - border-radius: 3px; - color: ${props => props.theme.loopViewerHeaderFontColor}; -` - -export default class BasicAuthLogin extends React.Component { - constructor(props) { - super(props); - this.handleSubmit = this.handleSubmit.bind(this); - this.handleChange = this.handleChange.bind(this); - console.log('BasicAuthLogin'); - this.state = { - username: '', - password: '', - submitted: 'false' - }; - } - - handleChange(e) { - const { name, value } = e.target; - this.setState({ [name]: value }); - } - - handleSubmit(e) { - e.preventDefault(); - this.setState({ submitted: true }); - const { username, password } = this.state; - LoopService.login(username, password) - .then( - user => { - const { from } = { from: { pathname: "/" } }; - this.props.history.push(from); - }, - error => { - const { from } = { from: { pathname: "/loginFailed" } }; - this.props.history.push(from); - console.log ("Basic login failed"); - } - ); - } - - render() { - const { username, password, submitted} = this.state; - return ( - <div> - <LoginHeaderStyle>Login</LoginHeaderStyle> - <form name="form" onSubmit={this.handleSubmit}> - <LoginDivStyle className={(submitted && !username ? ' has-error' : '')}> - <label htmlFor="username">Username</label> - <LoginTextInputStyle name="username" value={username} onChange={this.handleChange} /> - {submitted && !username && - <div className="help-block">Username is required</div> - } - </LoginDivStyle> - <LoginDivStyle className={(submitted && !password ? ' has-error' : '')}> - <label htmlFor="password">Password</label> - <LoginTextInputStyle type="password" name="password" value={password} onChange={this.handleChange} /> - {submitted && !password && - <div className="help-block">Password is required</div> - } - </LoginDivStyle> - <LoginDivStyle> - <LoginSubmitButtonStyle className="btn btn-primary">Login</LoginSubmitButtonStyle> - </LoginDivStyle> - </form> - </div> - ); - } -} diff --git a/ui-react/src/components/app/login/LoginPage.js b/ui-react/src/components/app/login/LoginPage.js deleted file mode 100644 index 5169435c2..000000000 --- a/ui-react/src/components/app/login/LoginPage.js +++ /dev/null @@ -1,48 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 AT&T Intellectual Property. All rights - * reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END============================================ - * =================================================================== - * - */ -import React from 'react'; - -import LoopService from '../../backend_communication/LoopService'; - -export default class LoginPage extends React.Component { - constructor(props) { - super(props); - console.log('LoginPage') - LoopService.login().then( - user => { - const { from } = { from: { pathname: "/" } }; - this.props.history.push(from); - }, - error => { - const { from } = { from: { pathname: "/" } }; - this.props.history.push(from); - console.log ("Certification login failed"); - } - ); - } - render() { - return ( - <div> - </div>); -} -} diff --git a/ui-react/src/components/backend_communication/LoopActionService.js b/ui-react/src/components/backend_communication/LoopActionService.js index 027243be1..9ce8ff0a9 100644 --- a/ui-react/src/components/backend_communication/LoopActionService.js +++ b/ui-react/src/components/backend_communication/LoopActionService.js @@ -20,37 +20,35 @@ * =================================================================== * */ -const clActionService = { - submit +const loopActionService = { + submit }; + function submit(uiAction) { - const cl_name = ""; - console.log("clActionServices perform action: " + uiAction + " closedloopName=" - + cl_name); - const svcAction = uiAction.toLowerCase(); - const svcUrl = "/restservices/clds/v2/loop/" + svcAction + "/" + cl_name; + const cl_name = ""; + console.log("clActionServices perform action: " + uiAction + " closedloopName=" + + cl_name); + const svcAction = uiAction.toLowerCase(); + const svcUrl = "/restservices/clds/v2/loop/" + svcAction + "/" + cl_name; - let options = { - method: 'GET' - }; - return sendRequest (svcUrl, svcAction, options); + let options = { + method: 'GET' + }; + return sendRequest(svcUrl, svcAction, options); } +function sendRequest(svcUrl, svcAction) { + fetch(svcUrl, options) + .then( + response => { + alertService.alertMessage("Action Successful: " + svcAction, 1) + }).error(error => { + alertService.alertMessage("Action Failure: " + svcAction, 2); + return Promise.reject(error); + }); + return response.json(); +}; -function sendRequest (svcUrl, svcAction) { - fetch(svcUrl, options) - .then( - response => { - alertService.alertMessage("Action Successful: " + svcAction, 1) - }).error( error => { - alertService.alertMessage("Action Failure: " + svcAction, 2); - return Promise.reject(error); - }); - - return response.json(); - }); -} - -export default clActionService; +export default loopActionService;
\ No newline at end of file diff --git a/ui-react/src/components/backend_communication/LoopCache.js b/ui-react/src/components/backend_communication/LoopCache.js index 7fd20596b..2ef839629 100644 --- a/ui-react/src/components/backend_communication/LoopCache.js +++ b/ui-react/src/components/backend_communication/LoopCache.js @@ -20,95 +20,95 @@ * =================================================================== * */ -class LoopCache -{ - constructor(loopJson) { - this.loopJsonCache=loopJson; +class LoopCache { + constructor() { + //this.loopJsonCache=loopJson; + this.loopJsonCache = require('./example.json'); //(with path) } - + updateMsProperties(type, newMsProperties) { - if (newMsProperties["name"] == type) { - for (p in this.loopJsonCache["microServicePolicies"]) { - if (this.loopJsonCache["microServicePolicies"][p]["name"] == type) { - this.loopJsonCache["microServicePolicies"][p] = newMsProperties; - } - } - } - } - - updateGlobalProperties(newGlobalProperties) { - this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties; - } - - updateOpPolicyProperties(newOpProperties) { - this.loopJsonCache["operationalPolicies"] = newOpProperties; - } - - getLoopName() { - return this.loopJsonCache["name"]; - } - - getOperationalPolicyProperty() { - return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]["0"]["configurationsJson"])); - } - - getOperationalPolicies() { - return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"])); - } - - getGlobalProperty() { - return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"])); - } - - getDeploymentProperties() { - return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"])); - } - - getMsJson(type) { - var msProperties = this.loopJsonCache["microServicePolicies"]; - for (p in msProperties) { - if (msProperties[p]["name"] == type) { - return JSON.parse(JSON.stringify(msProperties[p])); - } - } - return null; - } - - getMsProperty(type) { - var msProperties = this.loopJsonCache["microServicePolicies"]; - for (p in msProperties) { - if (msProperties[p]["name"] == type) { - if (msProperties[p]["properties"] !== null && msProperties[p]["properties"] !== undefined) { - return JSON.parse(JSON.stringify(msProperties[p]["properties"])); - } - } - } - return null; - } - - getMsUI(type) { - var msProperties = this.loopJsonCache["microServicePolicies"]; - for (p in msProperties) { - if (msProperties[p]["name"] == type) { - return JSON.parse(JSON.stringify(msProperties[p]["jsonRepresentation"])); - } - } - return null; - } - - getResourceDetailsVfProperty() { + if (newMsProperties["name"] == type) { + for (var policy in this.loopJsonCache["microServicePolicies"]) { + if (this.loopJsonCache["microServicePolicies"][policy]["name"] == type) { + this.loopJsonCache["microServicePolicies"][policy] = newMsProperties; + } + } + } + } + + updateGlobalProperties(newGlobalProperties) { + this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties; + } + + updateOpPolicyProperties(newOpProperties) { + this.loopJsonCache["operationalPolicies"] = newOpProperties; + } + + getLoopName() { + return this.loopJsonCache["name"]; + } + + getOperationalPolicyProperty() { + return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]["0"]["configurationsJson"])); + } + + getOperationalPolicies() { + return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"])); + } + + getGlobalProperty() { + return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"])); + } + + getDeploymentProperties() { + return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"])); + } + + getMsJson(type) { + var msProperties = this.loopJsonCache["microServicePolicies"]; + for (var policy in msProperties) { + if (msProperties[policy]["name"] == type) { + return JSON.parse(JSON.stringify(msProperties[policy])); + } + } + return null; + } + + getMsProperty(type) { + var msProperties = this.loopJsonCache["microServicePolicies"]; + for (var policy in msProperties) { + if (msProperties[policy]["name"] == type) { + if (msProperties[policy]["properties"] !== null && msProperties[policy]["properties"] !== undefined) { + return JSON.parse(JSON.stringify(msProperties[policy]["properties"])); + } + } + } + return null; + } + + getMsUI(type) { + var msProperties = this.loopJsonCache["microServicePolicies"]; + for (var policy in msProperties) { + if (msProperties[policy]["name"] == type) { + return JSON.parse(JSON.stringify(msProperties[policy]["jsonRepresentation"])); + } + } + return null; + } + + getResourceDetailsVfProperty() { return this.loopJsonCache["modelPropertiesJson"]["resourceDetails"]["VF"]; } - - getResourceDetailsVfModuleProperty() { + + getResourceDetailsVfModuleProperty() { return this.loopJsonCache["modelPropertiesJson"]["resourceDetails"]["VFModule"]; } - - getLoopLogsArray() { + + getLoopLogsArray() { return this.loopJsonCache.loopLogs; } - - getComponentStates() { + + getComponentStates() { return this.loopJsonCache.components; } diff --git a/ui-react/src/components/backend_communication/LoopService.js b/ui-react/src/components/backend_communication/LoopService.js deleted file mode 100644 index 982180df5..000000000 --- a/ui-react/src/components/backend_communication/LoopService.js +++ /dev/null @@ -1,66 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 AT&T Intellectual Property. All rights - * reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END============================================ - * =================================================================== - * - */ - -const LoopService = { - login -}; - -function login(username, password) { - let options = { - method: 'GET' - }; - if (username && password) { - options = { - method: 'GET', - credentials: 'include', - headers: { - 'Authorization': "Basic " + new Buffer(username + ":" + password).toString("base64") - } - }; - } - - return fetch(`/restservices/clds/v1/user/getUser`, options) - .then(response => handleResponse(response)) - .then(function(data) { - localStorage.setItem('user', data); - console.log(data); -}); -} - -function handleResponse(response) { - if (!response.ok || response.redirected === true) { - if (response.status === 401 || response.status === 500 || response.redirected === true) { - if (localStorage.getItem('tryBasicAuth')) { - // login failed, go to invalud login page - localStorage.removeItem('user'); - } else { - // try to login with username and password - localStorage.setItem('tryBasicAuth', true); - } - } - const error = response.statusText; - return Promise.reject(error); - } - return response.text(); -} -export default LoopService; diff --git a/ui-react/src/components/app/login/LoginFailedPage.js b/ui-react/src/components/backend_communication/UserService.js index fb398efd3..814539551 100644 --- a/ui-react/src/components/app/login/LoginFailedPage.js +++ b/ui-react/src/components/backend_communication/UserService.js @@ -20,16 +20,31 @@ * =================================================================== * */ -import React from 'react' +export default class UserService { -export default class LoginFailedPage extends React.Component { - render () { - return ( - <div id='main'> - <div class="divRow"><b>Login Failed!</b></div> - <div class="divRow">Please cick <a href="/">here</a> to go back to the main page.</div> - </div> - ); + static LOGIN() { + return fetch('/restservices/clds/v1/user/getUser', { + method: 'GET', + credentials: 'include', + }) + .then(function (response) { + if (response.ok) { + console.log("getUser response received: ", response.status); + return response.text(); + } else { + console.error("getUser failed with status code: ",response.status); + return "Anonymous"; + } + }) + .then(function (data) { + console.log ("User connected:",data) + return data; + }) + .catch(function(error) { + console.error("getUser error received",error); + return "Anonymous"; + }); } } + diff --git a/ui-react/src/components/backend_communication/example.json b/ui-react/src/components/backend_communication/example.json new file mode 100644 index 000000000..f3cc9e189 --- /dev/null +++ b/ui-react/src/components/backend_communication/example.json @@ -0,0 +1,417 @@ +{ + "name": "LOOP_h2NMX_v1_0_ResourceInstanceName1_tca", + "dcaeBlueprintId": "typeId-3a942643-a8f7-4e54-b2c1-eea8daba2b17", + "globalPropertiesJson": { + "dcaeDeployParameters": { + "location_id": "", + "service_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } + }, + "modelPropertiesJson": { + "serviceDetails": { + "serviceType": "", + "namingPolicy": "", + "environmentContext": "General_Revenue-Bearing", + "serviceEcompNaming": "true", + "serviceRole": "", + "name": "vLoadBalancerMS", + "description": "vLBMS", + "invariantUUID": "30ec5b59-4799-48d8-ac5f-1058a6b0e48f", + "ecompGeneratedNaming": "true", + "category": "Network L4+", + "type": "Service", + "UUID": "63cac700-ab9a-4115-a74f-7eac85e3fce0", + "instantiationType": "A-la-carte" + }, + "resourceDetails": { + "CP": {}, + "VL": {}, + "VF": { + "vLoadBalancerMS 0": { + "resourceVendor": "Test", + "resourceVendorModelNumber": "", + "name": "vLoadBalancerMS", + "description": "vLBMS", + "invariantUUID": "1a31b9f2-e50d-43b7-89b3-a040250cf506", + "subcategory": "Load Balancer", + "category": "Application L4+", + "type": "VF", + "UUID": "b4c4f3d7-929e-4b6d-a1cd-57e952ddc3e6", + "version": "1.0", + "resourceVendorRelease": "1.0", + "customizationUUID": "465246dc-7748-45f4-a013-308d92922552" + } + }, + "CR": {}, + "VFC": {}, + "PNF": {}, + "Service": {}, + "CVFC": {}, + "Service Proxy": {}, + "Configuration": {}, + "AllottedResource": {}, + "VFModule": { + "Vloadbalancerms..vpkg..module-1": { + "vfModuleModelInvariantUUID": "ca052563-eb92-4b5b-ad41-9111768ce043", + "vfModuleModelVersion": "1", + "vfModuleModelName": "Vloadbalancerms..vpkg..module-1", + "vfModuleModelUUID": "1e725ccc-b823-4f67-82b9-4f4367070dbc", + "vfModuleModelCustomizationUUID": "1bffdc31-a37d-4dee-b65c-dde623a76e52", + "min_vf_module_instances": 0, + "vf_module_label": "vpkg", + "max_vf_module_instances": 1, + "vf_module_type": "Expansion", + "isBase": false, + "initial_count": 0, + "volume_group": false + }, + "Vloadbalancerms..vdns..module-3": { + "vfModuleModelInvariantUUID": "4c10ba9b-f88f-415e-9de3-5d33336047fa", + "vfModuleModelVersion": "1", + "vfModuleModelName": "Vloadbalancerms..vdns..module-3", + "vfModuleModelUUID": "4fa73b49-8a6c-493e-816b-eb401567b720", + "vfModuleModelCustomizationUUID": "bafcdab0-801d-4d81-9ead-f464640a38b1", + "min_vf_module_instances": 0, + "vf_module_label": "vdns", + "max_vf_module_instances": 50, + "vf_module_type": "Expansion", + "isBase": false, + "initial_count": 0, + "volume_group": false + }, + "Vloadbalancerms..base_template..module-0": { + "vfModuleModelInvariantUUID": "921f7c96-ebdd-42e6-81b9-1cfc0c9796f3", + "vfModuleModelVersion": "1", + "vfModuleModelName": "Vloadbalancerms..base_template..module-0", + "vfModuleModelUUID": "63734409-f745-4e4d-a38b-131638a0edce", + "vfModuleModelCustomizationUUID": "86baddea-c730-4fb8-9410-cd2e17fd7f27", + "min_vf_module_instances": 1, + "vf_module_label": "base_template", + "max_vf_module_instances": 1, + "vf_module_type": "Base", + "isBase": true, + "initial_count": 1, + "volume_group": false + }, + "Vloadbalancerms..vlb..module-2": { + "vfModuleModelInvariantUUID": "a772a1f4-0064-412c-833d-4749b15828dd", + "vfModuleModelVersion": "1", + "vfModuleModelName": "Vloadbalancerms..vlb..module-2", + "vfModuleModelUUID": "0f5c3f6a-650a-4303-abb6-fff3e573a07a", + "vfModuleModelCustomizationUUID": "96a78aad-4ffb-4ef0-9c4f-deb03bf1d806", + "min_vf_module_instances": 0, + "vf_module_label": "vlb", + "max_vf_module_instances": 1, + "vf_module_type": "Expansion", + "isBase": false, + "initial_count": 0, + "volume_group": false + } + } + } + }, + "lastComputedState": "DESIGN", + "components": { + "POLICY": { + "componentState": { + "stateName": "NOT_SENT", + "description": "The policies defined have NOT yet been created on the policy engine" + } + }, + "DCAE": { + "componentState": { + "stateName": "BLUEPRINT_DEPLOYED", + "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop" + } + } + }, + "operationalPolicies": [ + { + "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", + "configurationsJson": { + "guard_policies": { + "guard.minmax.new": { + "recipe": "", + "clname": "LOOP_h2NMX_v1_0_ResourceInstanceName1_tca", + "actor": "", + "targets": "", + "min": "gg", + "max": "gg", + "limit": "", + "timeUnits": "", + "timeWindow": "", + "guardActiveStart": "00:00:00Z", + "guardActiveEnd": "00:00:01Z" + } + }, + "operational_policy": { + "controlLoop": { + "trigger_policy": "new", + "timeout": "0", + "abatement": "false", + "controlLoopName": "LOOP_h2NMX_v1_0_ResourceInstanceName1_tca" + }, + "policies": [ + { + "id": "new", + "recipe": "", + "retry": "0", + "timeout": "0", + "actor": "", + "payload": "", + "success": "", + "failure": "", + "failure_timeout": "", + "failure_retries": "", + "failure_exception": "", + "failure_guard": "", + "target": { + "type": "VM", + "resourceID": "" + } + } + ] + } + } + } + ], + "microServicePolicies": [ + { + "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca", + "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app", + "properties": { + "domain": "measurementsForVfScaling", + "metricsPerEventName": [ + { + "policyVersion": "ff", + "thresholds": [ + { + "severity": "CRITICAL", + "fieldPath": "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta", + "thresholdValue": 0, + "closedLoopEventStatus": "ONSET", + "closedLoopControlName": "ff", + "version": "ff", + "direction": "LESS" + } + ], + "policyName": "ff", + "controlLoopSchemaType": "VM", + "policyScope": "ff", + "eventName": "ff" + } + ] + }, + "shared": false, + "jsonRepresentation": { + "schema": { + "uniqueItems": "true", + "format": "tabs-top", + "type": "array", + "title": "TCA Policy JSON", + "items": { + "type": "object", + "title": "TCA Policy JSON", + "required": [ + "domain", + "metricsPerEventName" + ], + "properties": { + "domain": { + "propertyOrder": 1001, + "default": "measurementsForVfScaling", + "title": "Domain name to which TCA needs to be applied", + "type": "string" + }, + "metricsPerEventName": { + "propertyOrder": 1002, + "uniqueItems": "true", + "format": "tabs-top", + "title": "Contains eventName and threshold details that need to be applied to given eventName", + "type": "array", + "items": { + "type": "object", + "required": [ + "controlLoopSchemaType", + "eventName", + "policyName", + "policyScope", + "policyVersion", + "thresholds" + ], + "properties": { + "policyVersion": { + "propertyOrder": 1007, + "title": "TCA Policy Scope Version", + "type": "string" + }, + "thresholds": { + "propertyOrder": 1008, + "uniqueItems": "true", + "format": "tabs-top", + "title": "Thresholds associated with eventName", + "type": "array", + "items": { + "type": "object", + "required": [ + "closedLoopControlName", + "closedLoopEventStatus", + "direction", + "fieldPath", + "severity", + "thresholdValue", + "version" + ], + "properties": { + "severity": { + "propertyOrder": 1013, + "title": "Threshold Event Severity", + "type": "string", + "enum": [ + "CRITICAL", + "MAJOR", + "MINOR", + "WARNING", + "NORMAL" + ] + }, + "fieldPath": { + "propertyOrder": 1012, + "title": "Json field Path as per CEF message which needs to be analyzed for TCA", + "type": "string", + "enum": [ + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedOctetsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedUnicastPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedMulticastPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedBroadcastPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedDiscardedPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedErrorPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedOctetsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedUnicastPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedMulticastPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedBroadcastPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedDiscardedPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedErrorPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedTotalPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedOctetsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedUnicastPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedMulticastPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedBroadcastPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedDiscardedPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedErrorPacketsDelta", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedTotalPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedOctetsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedUnicastPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedMulticastPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedBroadcastPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedDiscardedPacketsAccumulated", + "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedErrorPacketsAccumulated", + "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuIdle", + "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageInterrupt", + "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageNice", + "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSoftIrq", + "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSteal", + "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSystem", + "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuWait", + "$.event.measurementsForVfScalingFields.cpuUsageArray[*].percentUsage", + "$.event.measurementsForVfScalingFields.meanRequestLatency", + "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryBuffered", + "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryCached", + "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryConfigured", + "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryFree", + "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryUsed", + "$.event.measurementsForVfScalingFields.additionalMeasurements[*].arrayOfFields[0].value" + ] + }, + "thresholdValue": { + "propertyOrder": 1014, + "title": "Threshold value for the field Path inside CEF message", + "type": "integer" + }, + "closedLoopEventStatus": { + "propertyOrder": 1010, + "title": "Closed Loop Event Status of the threshold", + "type": "string", + "enum": [ + "ONSET", + "ABATED" + ] + }, + "closedLoopControlName": { + "propertyOrder": 1009, + "title": "Closed Loop Control Name associated with the threshold", + "type": "string" + }, + "version": { + "propertyOrder": 1015, + "title": "Version number associated with the threshold", + "type": "string" + }, + "direction": { + "propertyOrder": 1011, + "title": "Direction of the threshold", + "type": "string", + "enum": [ + "LESS", + "LESS_OR_EQUAL", + "GREATER", + "GREATER_OR_EQUAL", + "EQUAL" + ] + } + } + } + }, + "policyName": { + "propertyOrder": 1005, + "title": "TCA Policy Scope Name", + "type": "string" + }, + "controlLoopSchemaType": { + "propertyOrder": 1003, + "title": "Specifies Control Loop Schema Type for the event Name e.g. VNF, VM", + "type": "string", + "enum": [ + "VM", + "VNF" + ] + }, + "policyScope": { + "propertyOrder": 1006, + "title": "TCA Policy Scope", + "type": "string" + }, + "eventName": { + "propertyOrder": 1004, + "title": "Event name to which thresholds need to be applied", + "type": "string" + } + } + } + } + } + } + } + } + } + ], + "loopLogs": [ + { + "id": 2, + "logType": "INFO", + "logComponent": "CLAMP", + "message": "Micro Service policies UPDATED", + "logInstant": "2019-07-08T09:44:53Z" + }, + { + "id": 1, + "logType": "INFO", + "logComponent": "CLAMP", + "message": "Operational and Guard policies UPDATED", + "logInstant": "2019-07-08T09:44:37Z" + } + ] +} diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.js deleted file mode 100644 index 7b4ed0f89..000000000 --- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.js +++ /dev/null @@ -1,486 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 AT&T Intellectual Property. All rights - * reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END============================================ - * =================================================================== - * - */ - -import React from 'react' -import Button from 'react-bootstrap/Button'; -import Modal from 'react-bootstrap/Modal'; - -import './OperationalPolicy.css' - -class OperationalPolicy extends React.Component { - - constructor(props, context) { - super(props, context); - - this.handleShow = this.handleShow.bind(this); - this.handleClose = this.handleClose.bind(this); - this.initPolicySelect = this.initPolicySelect.bind(this); - - this.allPolicies=[]; - this.policy_ids=[]; - - this.state = { - show: false, - }; - } - - handleClose() { - this.setState({ show: false }); - } - - handleShow() { - this.setState({ show: true }); - } - - initPolicySelect() { - if (this.allPolicies['operational_policy'] === undefined || this.allPolicies['operational_policy'] === null) { - this.allPolicies = getOperationalPolicyProperty(); - } - // Provision all policies ID first - if (policy_ids.length == 0 && this.allPolicies['operational_policy'] != undefined) { - $.each(this.allPolicies['operational_policy']['policies'], function() { - policy_ids.push(this['id']); - }); - } - } - - render() { - return ( - <> - <Button variant="primary" onClick={this.handleShow}> - Launch demo modal - </Button> - - <Modal size="lg" show={this.state.show} onHide={this.handleClose}> - <Modal.Header closeButton> - <Modal.Title>Modal heading</Modal.Title> - </Modal.Header> - <Modal.Body> - <div attribute-test="policywindowproperties" id="configure-widgets" - className="disabled-block-container"> - <div attribute-test="policywindowpropertiesh" className="modal-header"> - <button type="button" className="close" onClick="close(false)" - aria-hidden="true" style={{marginTop: '-3px'}}>×</button> - <h4>Operational Policy</h4> - </div> - - <div className="modal-body"> - <div attribute-test="policywindowpropertiesb" className="modal-body row"> - - <div className="panel panel-default col-sm-10 policyPanel"> - <form id="operationalPolicyHeaderForm" className="form-horizontal"> - <div className="form-group clearfix"> - <label className="col-sm-2">Parent policy</label> - <div className="col-sm-3" style={{padding: '0px'}}> - <select type="text" id="trigger_policy" name="trigger_policy" - className="form-control" ng-init="initPolicySelect()" - ng-options="policy for policy in policy_ids track by policy"> - <option value="">-- choose an option --</option> - </select> - </div> - - <label htmlFor="timeout" className="col-sm-3" - style={{paddingLeft: '5px', paddingRight: '10px'}}>Overall - Time Limit</label> - <div className="col-sm-2" style={{paddingLeft: '0px'}}> - <input type="text" ng-pattern="/^[0-9]*$/" ng-model="number" - className="form-control" id="timeout" name="timeout"/> - </div> - - <label htmlFor="abatement" className="col-sm-2">Abatement</label> - <div className="col-sm-2" style={{paddingLeft: '0px'}}> - <select className="form-control" id="abatement" name="abatement" onChange={this.handleChange}> - <option value="false">False</option> - <option value="true">True</option> - </select> - </div> - </div> - <div className="form-group clearfix row"> - <label className="col-sm-4 control-label" htmlFor="clname">ControlLoopName</label> - <div className="col-sm-8"> - <input type="text" className="form-control" name="controlLoopName" - readOnly="readonly" id="clname" ng-model="clname"/> - </div> - </div> - </form> - <div className="panel-heading" style={{backgroundColor: 'white'}}> - <ul id="nav_Tabs" className="nav nav-tabs"> - <li> - <a id="add_one_more" href="#desc_tab"> - <span - className="glyphicon glyphicon-plus" aria-hidden="true"> - </span> - </a> - </li> - </ul> - </div> - <div className="panel-body"> - <div className="tab-content"> - <div id="properties_tab" className="tab-pane fade in active"></div> - </div> - </div> - </div> - - <span id="formSpan" style={{display: 'none'}}> - <form className="policyProperties" className="form-horizontal" - style={{border:'2px dotted gray'}} - title="Operational Policy Properties"> - <div className="form-group clearfix"> - <label className="col-sm-4 control-label" htmlFor="id">ID</label> - <div className="col-sm-8"> - <input type="text" className="form-control" name="id" id="id" ng-model="duplicated" ng-init="duplicated = false" - ng-keyup="updateTabLabel($event)" /> - <span >ID must be unique</span> - </div> - </div> - <div className="form-group clearfix"> - <label className="col-sm-4 control-label" htmlFor="recipe">Recipe</label> - <div className="col-sm-8"> - <select className="form-control" name="recipe" id="recipe" - ng-model="recipe" ng-click="updateGuardRecipe($event)"> - <option value="">-- choose an option --</option> - <option value="Restart">Restart</option> - <option value="Rebuild">Rebuild</option> - <option value="Migrate">Migrate</option> - <option value="Health-Check">Health-Check</option> - <option value="ModifyConfig">ModifyConfig</option> - <option value="VF Module Create">VF Module Create</option> - <option value="VF Module Delete">VF Module Delete</option> - <option value="Reroute">Reroute</option> - </select> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="retry" className="col-sm-4 control-label"> Retry</label> - <div className="col-sm-8"> - <input type="text" maxLength="5" className="form-control" id="retry" - ng-pattern="/^[0-9]*$/" ng-model="number" name="retry"> - </input> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="timeout" className="col-sm-4 control-label"> - Timeout</label> - <div className="col-sm-8"> - <input type="text" maxLength="5" className="form-control" - id="timeout" ng-pattern="/^[0-9]*$/" ng-model="number" - name="timeout"></input> - </div> - </div> - - <div className="form-group clearfix"> - <label htmlFor="actor" className="col-sm-4 control-label"> Actor</label> - <div className="col-sm-8"> - <select className="form-control" id="actor" name="actor" ng-click="updateGuardActor($event)" ng-model="actor"> - <option value="">-- choose an option --</option> - <option value="APPC">APPC</option> - <option value="SO">SO</option> - <option value="VFC">VFC</option> - <option value="SDNC">SDNC</option>° - <option value="SDNR">SDNR</option>° - </select> - </div> - - <label htmlFor="payload" className="col-sm-4 control-label"> - Payload (YAML)</label> - <div className="col-sm-8"> - <textarea className="form-control" id="payload" name="payload"></textarea> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="success" className="col-sm-4 control-label">When - Success</label> - <div className="col-sm-8"> - <select className="form-control" id="success" name="success" - ng-model="null_dump" - ng-options="policy for policy in policy_ids track by policy"> - <option value="">-- choose an option --</option> - </select> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="failure" className="col-sm-4 control-label">When - Failure</label> - <div className="col-sm-8"> - <select className="form-control" id="failure" name="failure" - ng-model="null_dump" - ng-options="policy for policy in policy_ids track by policy"> - <option value="">-- choose an option --</option> - </select> - - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="failure_timeout" className="col-sm-4 control-label">When - Failure Timeout</label> - <div className="col-sm-8"> - <select className="form-control" id="failure_timeout" - name="failure_timeout" ng-model="null_dump" - ng-options="policy for policy in policy_ids track by policy"> - <option value="">-- choose an option --</option> - </select> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="failure_retries" className="col-sm-4 control-label">When - Failure Retries</label> - <div className="col-sm-8"> - <select className="form-control" id="failure_retries" - name="failure_retries" ng-model="null_dump" - ng-options="policy for policy in policy_ids track by policy"> - <option value="">-- choose an option --</option> - </select> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="failure_exception" className="col-sm-4 control-label">When - Failure Exception</label> - <div className="col-sm-8"> - <select className="form-control" id="failure_exception" - name="failure_exception" ng-model="null_dump" - ng-options="policy for policy in policy_ids track by policy"> - <option value="">-- choose an option --</option> - </select> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="failure_guard" className="col-sm-4 control-label">When - Failure Guard</label> - <div className="col-sm-8"> - <select className="form-control" id="failure_guard" - name="failure_guard" ng-model="null_dump" - ng-options="policy for policy in policy_ids track by policy"> - <option value="">-- choose an option --</option> - </select> - </div> - </div> - </form> - <form className="policyTarget" className="form-horizontal" - title="Operational Policy Target" style={{border: '2px dotted gray'}}> - <div className="form-group clearfix"> - <label htmlFor="type" className="col-sm-4 control-label"> Target - Type</label> - <div className="col-sm-8"> - <select className="form-control" name="type" id="type" - ng-click="initTargetResourceId($event)" ng-model="type"> - <option value="">-- choose an option --</option> - <option value="VFMODULE">VFMODULE</option> - <option value="VM">VM</option> - <option value="VNF">VNF</option> - </select> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="resourceID" className="col-sm-4 control-label"> - Target ResourceId</label> - <div className="col-sm-8"> - <select className="form-control" name="resourceID" id="resourceID" - ng-click="changeTargetResourceId($event)" - ng-model="resourceId"> - <option value="">-- choose an option --</option> - </select> - </div> - </div> - <div id="metadata"> - <div className="form-group clearfix"> - <label htmlFor="modelInvariantId" className="col-sm-4 control-label"> - Model Invariant Id</label> - <div className="col-sm-8"> - <input className="form-control" name="modelInvariantId" - id="modelInvariantId" readOnly/> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="modelVersionId" className="col-sm-4 control-label"> - Model Version Id</label> - <div className="col-sm-8"> - <input className="form-control" name="modelVersionId" - id="modelVersionId" readOnly/> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="modelName" className="col-sm-4 control-label"> - Model Name</label> - <div className="col-sm-8"> - <input className="form-control" name="modelName" id="modelName" - readOnly/> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="modelVersion" className="col-sm-4 control-label"> - Model Version</label> - <div className="col-sm-8"> - <input className="form-control" name="modelVersion" - id="modelVersion" readOnly/> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="modelCustomizationId" className="col-sm-4 control-label"> - Model Customization Id</label> - <div className="col-sm-8"> - <input className="form-control" name="modelCustomizationId" - id="modelCustomizationId" readOnly/> - </div> - </div> - </div> - </form> - <div className="form-group clearfix"> - <label htmlFor="enableGuardPolicy" className="col-sm-4 control-label"> - Enable Guard Policy</label> - <div className="col-sm-8"> - <input type="checkbox" className="form-control" - name="enableGuardPolicy" id="enableGuardPolicy" /> - </div> - - <div className="col-sm-8"> - <label htmlFor="guardPolicyType" className="col-sm-4 control-label"> - Guard Policy Type</label> <select className="form-control" - name="guardPolicyType" id="guardPolicyType" - ng-click="changeGuardPolicyType()" ng-model="guardType"> - <option value="GUARD_MIN_MAX">MinMax</option> - <option value="GUARD_YAML">FrequencyLimiter</option> - </select> - </div> - </div> - <form className="guardProperties" className="form-horizontal" - title="Guard policy associated" style={{border: '2px dotted gray'}}> - - <div className="form-group clearfix withnote"> - <label className="col-sm-4 control-label" htmlFor="id">Guard Policy ID</label> - <div className="col-sm-8"> - <input type="text" className="form-control" name="id" id="id" ng-blur="changeGuardId()" ng-model="id"/> - </div> - </div> - <div> - <label className="form-group note">Note: Prefix will be added to Guard Policy ID automatically based on Guard Policy Type</label> - </div> - <div className="form-group clearfix"> - <label className="col-sm-4 control-label" htmlFor="recipe">Recipe</label> - <div className="col-sm-8"> - <input type="text" className="form-control" name="recipe" - readOnly="readonly" id="recipe"/> - </div> - </div> - <div className="form-group clearfix"> - <label className="col-sm-4 control-label" htmlFor="clname">ControlLoopName</label> - <div className="col-sm-8"> - <input type="text" className="form-control" name="clname" - readOnly="readonly" id="clname" ng-model="clname" /> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="actor" className="col-sm-4 control-label">Actor</label> - <div className="col-sm-8"> - <input type="text" className="form-control" name="actor" - readOnly="readonly" id="actor" /> - </div> - </div> - <div className="form-group clearfix"> - - <label htmlFor="targets" className="col-sm-4 control-label">Guard - targets</label> - <div className="col-sm-8"> - <input className="form-control" name="targets" id="targets" /> - </div> - </div> - - <div className="form-group clearfix" id="minMaxGuardPolicyDiv"> - <label htmlFor="min" className="col-sm-4 control-label"> Min - Guard</label> - <div className="col-sm-8"> - <input className="form-control" name="min" id="min" /> - </div> - <label htmlFor="max" className="col-sm-4 control-label"> Max - Guard</label> - <div className="col-sm-8"> - <input className="form-control" name="max" id="max" /> - </div> - </div> - <div className="form-group clearfix" - id="frequencyLimiterGuardPolicyDiv" style={{display: 'none'}}> - <label htmlFor="limit" className="col-sm-4 control-label">Limit</label> - <div className="col-sm-8"> - <input className="form-control" name="limit" id="limit" /> - </div> - <label htmlFor="timeUnits" className="col-sm-4 control-label">Time Units</label> - <div className="col-sm-8"> - <select className="form-control" name="timeUnits" - id="timeUnits"> - <option value=""></option> - <option value="minute">minute</option> - <option value="hour">hour</option> - <option value="day">day</option> - <option value="week">week</option> - <option value="month">month</option> - <option value="year">year</option> - </select> - </div> - <label htmlFor="timeWindow" className="col-sm-4 control-label">Time Window</label> - <div className="col-sm-8"> - <input className="form-control" name="timeWindow" id="timeWindow" /> - </div> - </div> - <div className="form-group clearfix"> - <label htmlFor="guardActiveStart" className="col-sm-4 control-label"> - Guard Active Start</label> - <div className="col-sm-8"> - <input className="form-control" name="guardActiveStart" - id="guardActiveStart" value="00:00:00Z"/> - </div> - <label htmlFor="guardActiveEnd" className="col-sm-4 control-label"> - Guard Active End</label> - <div className="col-sm-8"> - <input className="form-control" name="guardActiveEnd" - id="guardActiveEnd" value="00:00:01Z"/> - </div> - </div> - - </form> - - </span> - </div> - </div> - - <div attribute-test="policywindowpropertiesf" className="modal-footer"> - <button id="savePropsBtn" className="btn btn-primary" ng-disabled="duplicated">Close</button> - <button ng-click="close(true)" id="close_button" - className="btn btn-primary">Cancel</button> - </div> - - </div> - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={this.handleClose}> - Close - </Button> - <Button variant="primary" onClick={this.handleClose}> - Save Changes - </Button> - </Modal.Footer> - </Modal> - </> - ); - } -} - -export default OperationalPolicy;
\ No newline at end of file diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js new file mode 100644 index 000000000..e52d930a2 --- /dev/null +++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js @@ -0,0 +1,555 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ + +import React from 'react' +import Button from 'react-bootstrap/Button'; +import Modal from 'react-bootstrap/Modal'; +import LoopCache from '../../backend_communication/LoopCache' +import './OperationalPolicy.css' +import styled from 'styled-components'; + +const ModalStyled = styled(Modal)` + background-color: transparent; +` + +export default class OperationalPolicyModal extends React.Component { + + constructor(props, context) { + super(props, context); + + this.loopCache = new LoopCache(); + + this.handleClose = this.handleClose.bind(this); + this.initPolicySelect = this.initPolicySelect.bind(this); + + this.allPolicies = []; + this.policyIds = []; + + this.initPolicySelect(); + + this.state = { + show: true, + }; + + } + + handleClose() { + this.setState({ show: false }); + } + + initPolicySelect() { + if (this.allPolicies['operational_policy'] === undefined || this.allPolicies['operational_policy'] === null) { + this.allPolicies = this.loopCache.getOperationalPolicyProperty(); + } + // Provision all policies ID first + if (this.policyIds.length == 0 && this.allPolicies['operational_policy'] != undefined) { + + for (let i = 0; i < this.allPolicies['operational_policy']['policies'].length; i++) { + this.policyIds.push(this.allPolicies['operational_policy']['policies'][i]['id']); + } + } + } + + renderPolicyIdSelect() { + return ( + <select type="text" id="trigger_policy" name="trigger_policy" + className="form-control"> + <option value="">-- choose an option --</option> + {this.policyIds.map(policyId => (<option key={policyId}>{policyId}</option>))} + </select> + ); + } + + serializeElement(element) { + var o = {}; + element.serializeArray().forEach(function () { + if (o[this.name]) { + if (!o[this.name].push) { + o[this.name] = [o[this.name]]; + } + o[this.name].push(this.value || ''); + } else { + o[this.name] = this.value || ''; + } + }); + return o; + } + + // When we change the name of a policy + isDuplicatedId (event) { + // update policy id structure + var formNum = document.getElementById(event.target).closest('.formId').attr('id').substring(6); + var policyId = document.getElementById(event.target).val(); + if (this.policyIds.includes(policyId)) { + console.log("Duplicated ID, cannot proceed"); + return true; + } else { + this.duplicated = false; + this.policyIds.splice(this.policyIds.indexOf(document.getElementById("#formId" + formNum + " #id").val()), 1); + this.policyIds.push(document.getElementById(event.target).val()); + // Update the tab now + document.getElementById("#go_properties_tab" + formNum).text(document.getElementById(event.target).val()); + } + } + + configureComponents() { + console.log("Load properties to op policy"); + // Set the header + document.getElementsByClassName('form-control').forEach(function() { + this.val(this.allPolicies['operational_policy']['controlLoop'][this.id]); + }); + // Set the sub-policies + this.allPolicies['operational_policy']['policies'].forEach(function(opPolicyElemIndex, opPolicyElemValue) { + +/* var formNum = add_one_more(); + forEach(document.getElementsByClassName('policyProperties').find('.form-control'), function(opPolicyPropIndex, opPolicyPropValue) { + + $("#formId" + formNum + " .policyProperties").find("#" + opPolicyPropValue.id).val( + allPolicies['operational_policy']['policies'][opPolicyElemIndex][opPolicyPropValue.id]); + }); + + // Initial TargetResourceId options + initTargetResourceIdOptions(allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target']['type'], formNum); + $.each($('.policyTarget').find('.form-control'), function(opPolicyTargetPropIndex, opPolicyTargetPropValue) { + + $("#formId" + formNum + " .policyTarget").find("#" + opPolicyTargetPropValue.id).val( + allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target'][opPolicyTargetPropValue.id]); + }); + + // update the current tab label + $("#go_properties_tab" + formNum).text( + allPolicies['operational_policy']['policies'][opPolicyElemIndex]['id']); + // Check if there is a guard set for it + $.each(allPolicies['guard_policies'], function(guardElemId, guardElemValue) { + + if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) { + // Found one, set all guard prop + $.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex, + guardPropElemValue) { + + guardElemValue['id'] = guardElemId; + $("#formId" + formNum + " .guardProperties").find("#" + guardPropElemValue.id).val( + guardElemValue[guardPropElemValue.id]); + }); + iniGuardPolicyType(guardElemId, formNum); + // And finally enable the flag + $("#formId" + formNum + " #enableGuardPolicy").prop("checked", true); + } + });*/ + }); + } + + render() { + return ( + <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}> + <Modal.Header closeButton> + <Modal.Title>Operational policies</Modal.Title> + </Modal.Header> + <Modal.Body> + <div attribute-test="policywindowproperties" id="configure-widgets" + className="disabled-block-container"> + <div attribute-test="policywindowpropertiesb" className="modal-body row"> + <div className="panel panel-default col-sm-10 policyPanel"> + <form id="operationalPolicyHeaderForm" className="form-horizontal"> + <div className="form-group clearfix"> + <label className="col-sm-2">Parent policy</label> + <div className="col-sm-3" style={{ padding: '0px' }}> + {this.renderPolicyIdSelect()} + </div> + + <label htmlFor="timeout" className="col-sm-3" + style={{ paddingLeft: '5px', paddingRight: '10px' }}>Overall + Time Limit</label> + <div className="col-sm-2" style={{ paddingLeft: '0px' }}> + <input type="text" ng-pattern="/^[0-9]*$/" ng-model="number" + className="form-control" id="timeout" name="timeout" /> + </div> + + <label htmlFor="abatement" className="col-sm-2">Abatement</label> + <div className="col-sm-2" style={{ paddingLeft: '0px' }}> + <select className="form-control" id="abatement" name="abatement"> + <option value="false">False</option> + <option value="true">True</option> + </select> + </div> + </div> + <div className="form-group clearfix row"> + <label className="col-sm-4 control-label" htmlFor="clname">ControlLoopName</label> + <div className="col-sm-8"> + <input type="text" className="form-control" name="controlLoopName" + readOnly="readonly" id="clname" value={this.loopCache.getLoopName()} /> + </div> + </div> + </form> + <div className="panel-heading" style={{ backgroundColor: 'white' }}> + <ul id="nav_Tabs" className="nav nav-tabs"> + <li> + <a id="add_one_more" href="#desc_tab"> + <span + className="glyphicon glyphicon-plus" aria-hidden="true"> + </span> + </a> + </li> + </ul> + </div> + <div className="panel-body"> + <div className="tab-content"> + <div id="properties_tab" className="tab-pane fade in active"></div> + </div> + </div> + </div> + + <span id="formSpan" style={{ display: 'none' }}> + <form className="policyProperties" className="form-horizontal" + style={{ border: '2px dotted gray' }} + title="Operational Policy Properties"> + <div className="form-group clearfix"> + <label className="col-sm-4 control-label" htmlFor="id">ID</label> + <div className="col-sm-8"> + <input type="text" className="form-control" name="id" id="id" + onKeyUp="updateTabLabel($event)" /> + <span >ID must be unique</span> + </div> + </div> + <div className="form-group clearfix"> + <label className="col-sm-4 control-label" htmlFor="recipe">Recipe</label> + <div className="col-sm-8"> + <select className="form-control" name="recipe" id="recipe" + ng-model="recipe" ng-click="updateGuardRecipe($event)"> + <option value="">-- choose an option --</option> + <option value="Restart">Restart</option> + <option value="Rebuild">Rebuild</option> + <option value="Migrate">Migrate</option> + <option value="Health-Check">Health-Check</option> + <option value="ModifyConfig">ModifyConfig</option> + <option value="VF Module Create">VF Module Create</option> + <option value="VF Module Delete">VF Module Delete</option> + <option value="Reroute">Reroute</option> + </select> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="retry" className="col-sm-4 control-label"> Retry</label> + <div className="col-sm-8"> + <input type="text" maxLength="5" className="form-control" id="retry" + ng-pattern="/^[0-9]*$/" ng-model="number" name="retry"> + </input> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="timeout" className="col-sm-4 control-label"> + Timeout</label> + <div className="col-sm-8"> + <input type="text" maxLength="5" className="form-control" + id="timeout" ng-pattern="/^[0-9]*$/" ng-model="number" + name="timeout"></input> + </div> + </div> + + <div className="form-group clearfix"> + <label htmlFor="actor" className="col-sm-4 control-label"> Actor</label> + <div className="col-sm-8"> + <select className="form-control" id="actor" name="actor" ng-click="updateGuardActor($event)" ng-model="actor"> + <option value="">-- choose an option --</option> + <option value="APPC">APPC</option> + <option value="SO">SO</option> + <option value="VFC">VFC</option> + <option value="SDNC">SDNC</option>° + <option value="SDNR">SDNR</option>° + </select> + </div> + + <label htmlFor="payload" className="col-sm-4 control-label"> + Payload (YAML)</label> + <div className="col-sm-8"> + <textarea className="form-control" id="payload" name="payload"></textarea> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="success" className="col-sm-4 control-label">When + Success</label> + <div className="col-sm-8"> + <select className="form-control" id="success" name="success" + ng-model="null_dump" + ng-options="policy for policy in policy_ids track by policy"> + <option value="">-- choose an option --</option> + </select> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="failure" className="col-sm-4 control-label">When + Failure</label> + <div className="col-sm-8"> + <select className="form-control" id="failure" name="failure" + ng-model="null_dump" + ng-options="policy for policy in policy_ids track by policy"> + <option value="">-- choose an option --</option> + </select> + + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="failure_timeout" className="col-sm-4 control-label">When + Failure Timeout</label> + <div className="col-sm-8"> + <select className="form-control" id="failure_timeout" + name="failure_timeout" ng-model="null_dump" + ng-options="policy for policy in policy_ids track by policy"> + <option value="">-- choose an option --</option> + </select> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="failure_retries" className="col-sm-4 control-label">When + Failure Retries</label> + <div className="col-sm-8"> + <select className="form-control" id="failure_retries" + name="failure_retries" ng-model="null_dump" + ng-options="policy for policy in policy_ids track by policy"> + <option value="">-- choose an option --</option> + </select> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="failure_exception" className="col-sm-4 control-label">When + Failure Exception</label> + <div className="col-sm-8"> + <select className="form-control" id="failure_exception" + name="failure_exception" ng-model="null_dump" + ng-options="policy for policy in policy_ids track by policy"> + <option value="">-- choose an option --</option> + </select> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="failure_guard" className="col-sm-4 control-label">When + Failure Guard</label> + <div className="col-sm-8"> + <select className="form-control" id="failure_guard" + name="failure_guard" ng-model="null_dump" + ng-options="policy for policy in policy_ids track by policy"> + <option value="">-- choose an option --</option> + </select> + </div> + </div> + </form> + <form className="policyTarget" className="form-horizontal" + title="Operational Policy Target" style={{ border: '2px dotted gray' }}> + <div className="form-group clearfix"> + <label htmlFor="type" className="col-sm-4 control-label"> Target + Type</label> + <div className="col-sm-8"> + <select className="form-control" name="type" id="type" + ng-click="initTargetResourceId($event)" ng-model="type"> + <option value="">-- choose an option --</option> + <option value="VFMODULE">VFMODULE</option> + <option value="VM">VM</option> + <option value="VNF">VNF</option> + </select> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="resourceID" className="col-sm-4 control-label"> + Target ResourceId</label> + <div className="col-sm-8"> + <select className="form-control" name="resourceID" id="resourceID" + ng-click="changeTargetResourceId($event)" + ng-model="resourceId"> + <option value="">-- choose an option --</option> + </select> + </div> + </div> + <div id="metadata"> + <div className="form-group clearfix"> + <label htmlFor="modelInvariantId" className="col-sm-4 control-label"> + Model Invariant Id</label> + <div className="col-sm-8"> + <input className="form-control" name="modelInvariantId" + id="modelInvariantId" readOnly /> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="modelVersionId" className="col-sm-4 control-label"> + Model Version Id</label> + <div className="col-sm-8"> + <input className="form-control" name="modelVersionId" + id="modelVersionId" readOnly /> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="modelName" className="col-sm-4 control-label"> + Model Name</label> + <div className="col-sm-8"> + <input className="form-control" name="modelName" id="modelName" + readOnly /> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="modelVersion" className="col-sm-4 control-label"> + Model Version</label> + <div className="col-sm-8"> + <input className="form-control" name="modelVersion" + id="modelVersion" readOnly /> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="modelCustomizationId" className="col-sm-4 control-label"> + Model Customization Id</label> + <div className="col-sm-8"> + <input className="form-control" name="modelCustomizationId" + id="modelCustomizationId" readOnly /> + </div> + </div> + </div> + </form> + <div className="form-group clearfix"> + <label htmlFor="enableGuardPolicy" className="col-sm-4 control-label"> + Enable Guard Policy</label> + <div className="col-sm-8"> + <input type="checkbox" className="form-control" + name="enableGuardPolicy" id="enableGuardPolicy" /> + </div> + + <div className="col-sm-8"> + <label htmlFor="guardPolicyType" className="col-sm-4 control-label"> + Guard Policy Type</label> <select className="form-control" + name="guardPolicyType" id="guardPolicyType" + ng-click="changeGuardPolicyType()" ng-model="guardType"> + <option value="GUARD_MIN_MAX">MinMax</option> + <option value="GUARD_YAML">FrequencyLimiter</option> + </select> + </div> + </div> + <form className="guardProperties" className="form-horizontal" + title="Guard policy associated" style={{ border: '2px dotted gray' }}> + + <div className="form-group clearfix withnote"> + <label className="col-sm-4 control-label" htmlFor="id">Guard Policy ID</label> + <div className="col-sm-8"> + <input type="text" className="form-control" name="id" id="id" ng-blur="changeGuardId()" ng-model="id" /> + </div> + </div> + <div> + <label className="form-group note">Note: Prefix will be added to Guard Policy ID automatically based on Guard Policy Type</label> + </div> + <div className="form-group clearfix"> + <label className="col-sm-4 control-label" htmlFor="recipe">Recipe</label> + <div className="col-sm-8"> + <input type="text" className="form-control" name="recipe" + readOnly="readonly" id="recipe" /> + </div> + </div> + <div className="form-group clearfix"> + <label className="col-sm-4 control-label" htmlFor="clname">ControlLoopName</label> + <div className="col-sm-8"> + <input type="text" className="form-control" name="clname" + readOnly="readonly" id="clname" ng-model="clname" /> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="actor" className="col-sm-4 control-label">Actor</label> + <div className="col-sm-8"> + <input type="text" className="form-control" name="actor" + readOnly="readonly" id="actor" /> + </div> + </div> + <div className="form-group clearfix"> + + <label htmlFor="targets" className="col-sm-4 control-label">Guard + targets</label> + <div className="col-sm-8"> + <input className="form-control" name="targets" id="targets" /> + </div> + </div> + + <div className="form-group clearfix" id="minMaxGuardPolicyDiv"> + <label htmlFor="min" className="col-sm-4 control-label"> Min + Guard</label> + <div className="col-sm-8"> + <input className="form-control" name="min" id="min" /> + </div> + <label htmlFor="max" className="col-sm-4 control-label"> Max + Guard</label> + <div className="col-sm-8"> + <input className="form-control" name="max" id="max" /> + </div> + </div> + <div className="form-group clearfix" + id="frequencyLimiterGuardPolicyDiv" style={{ display: 'none' }}> + <label htmlFor="limit" className="col-sm-4 control-label">Limit</label> + <div className="col-sm-8"> + <input className="form-control" name="limit" id="limit" /> + </div> + <label htmlFor="timeUnits" className="col-sm-4 control-label">Time Units</label> + <div className="col-sm-8"> + <select className="form-control" name="timeUnits" + id="timeUnits"> + <option value=""></option> + <option value="minute">minute</option> + <option value="hour">hour</option> + <option value="day">day</option> + <option value="week">week</option> + <option value="month">month</option> + <option value="year">year</option> + </select> + </div> + <label htmlFor="timeWindow" className="col-sm-4 control-label">Time Window</label> + <div className="col-sm-8"> + <input className="form-control" name="timeWindow" id="timeWindow" /> + </div> + </div> + <div className="form-group clearfix"> + <label htmlFor="guardActiveStart" className="col-sm-4 control-label"> + Guard Active Start</label> + <div className="col-sm-8"> + <input className="form-control" name="guardActiveStart" + id="guardActiveStart" value="00:00:00Z" /> + </div> + <label htmlFor="guardActiveEnd" className="col-sm-4 control-label"> + Guard Active End</label> + <div className="col-sm-8"> + <input className="form-control" name="guardActiveEnd" + id="guardActiveEnd" value="00:00:01Z" /> + </div> + </div> + + </form> + + </span> + </div> + </div> + + </Modal.Body> + <Modal.Footer> + <Button variant="secondary" onClick={this.handleClose}> + Close + </Button> + <Button variant="primary" onClick={this.handleClose}> + Save Changes + </Button> + </Modal.Footer> + </ModalStyled> + + ); + } +} diff --git a/ui-react/src/components/dialogs/OperationalPolicy/template.json b/ui-react/src/components/dialogs/OperationalPolicy/template.json new file mode 100644 index 000000000..6b4477f88 --- /dev/null +++ b/ui-react/src/components/dialogs/OperationalPolicy/template.json @@ -0,0 +1,52 @@ +{ + "operationalPolicies": [ + { + "name": "OPERATIONAL_LOOP_NAME", + "configurationsJson": { + "guard_policies": { + "guard.minmax.new": { + "recipe": "", + "clname": "LOOP_NAME", + "actor": "", + "targets": "", + "min": "", + "max": "", + "limit": "", + "timeUnits": "", + "timeWindow": "", + "guardActiveStart": "00:00:00Z", + "guardActiveEnd": "00:00:01Z" + } + }, + "operational_policy": { + "controlLoop": { + "trigger_policy": "new", + "timeout": "0", + "abatement": "false", + "controlLoopName": "LOOP_h2NMX_v1_0_ResourceInstanceName1_tca" + }, + "policies": [ + { + "id": "new", + "recipe": "", + "retry": "0", + "timeout": "0", + "actor": "", + "payload": "", + "success": "", + "failure": "", + "failure_timeout": "", + "failure_retries": "", + "failure_exception": "", + "failure_guard": "", + "target": { + "type": "VM", + "resourceID": "" + } + } + ] + } + } + } + ] +}
\ No newline at end of file diff --git a/ui-react/src/components/loop_viewer/svg/example.svg b/ui-react/src/components/loop_viewer/svg/example.svg index bb3327042..2f5ebd037 100644 --- a/ui-react/src/components/loop_viewer/svg/example.svg +++ b/ui-react/src/components/loop_viewer/svg/example.svg @@ -1,13 +1,444 @@ -<svg width="400" height="200"> - <defs> - <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"> - <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> - </filter> - </defs> - <rect x="1" y="1" width="198" height="118" fill="#cccccc" /> - <g filter="url(#MyFilter)"> - <path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /> - <text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text> - </g> - Sorry, your browser does not support inline SVG. +<svg xmlns="http://www.w3.org/2000/svg"> + <g + fill-opacity="1" + color-rendering="auto" + color-interpolation="auto" + text-rendering="auto" + stroke="black" + stroke-linecap="square" + stroke-miterlimit="10" + shape-rendering="auto" + stroke-opacity="1" + fill="black" + stroke-dasharray="none" + font-weight="normal" + stroke-width="1" + font-family="'Dialog'" + font-style="normal" + data-element-id="start-circle" + stroke-linejoin="miter" + font-size="12px" + image-rendering="auto" + stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator --> + <defs id="genericDefs" /> + <g> + <g + shape-rendering="geometricPrecision" + text-rendering="optimizeQuality" + stroke-width="2"> + <circle + fill="none" + r="17" + cx="18" + cy="41" /> + </g> + </g> + </g> + <g + fill-opacity="1" + color-rendering="auto" + color-interpolation="auto" + text-rendering="auto" + stroke="black" + stroke-linecap="square" + stroke-miterlimit="10" + shape-rendering="auto" + stroke-opacity="1" + fill="black" + stroke-dasharray="none" + font-weight="normal" + stroke-width="1" + font-family="'Dialog'" + font-style="normal" + data-element-id="Arrow-411c11ec-37fe-40bc-8544-417c2c05e4a7" + stroke-linejoin="miter" + font-size="12px" + image-rendering="auto" + stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator --> + <defs id="genericDefs" /> + <g> + <g + shape-rendering="geometricPrecision" + text-rendering="optimizeQuality" + stroke-width="2"> + <line + y2="41" + fill="none" + x1="35" + x2="123" + y1="41" /> + <polygon + fill="none" + points=" 121 39 121 43 125 41" /> + <polygon + points=" 121 39 121 43 125 41" + stroke="none" /> + </g> + </g> + </g> + <g + fill-opacity="1" + color-rendering="auto" + color-interpolation="auto" + text-rendering="auto" + stroke="black" + stroke-linecap="square" + stroke-miterlimit="10" + shape-rendering="auto" + stroke-opacity="1" + fill="black" + stroke-dasharray="none" + font-weight="normal" + stroke-width="1" + font-family="'Dialog'" + font-style="normal" + data-element-id="VES" + stroke-linejoin="miter" + font-size="12px" + image-rendering="auto" + stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator --> + <defs id="genericDefs" /> + <g> + <g + shape-rendering="geometricPrecision" + text-rendering="optimizeQuality" + stroke-width="2"> + <rect + fill="none" + x="127" + width="123" + y="1" + height="82" /> + </g> + <g + fill-opacity="0" + fill="rgb(0,0,0)" + text-rendering="optimizeQuality" + shape-rendering="geometricPrecision" + stroke="rgb(0,0,0)" + stroke-opacity="0" + stroke-width="2"> + <rect + x="127" + width="123" + y="1" + height="82" + stroke="none" /> + </g> + <g + text-rendering="optimizeQuality" + stroke-width="2" + shape-rendering="geometricPrecision" + font-family="sans-serif"> + <text + x="176.5" + xml:space="preserve" + y="46.5" + stroke="none">VES</text> + <line + y2="83" + fill="none" + x1="147" + x2="147" + y1="1" /> + </g> + </g> + </g> + <g + fill-opacity="1" + color-rendering="auto" + color-interpolation="auto" + text-rendering="auto" + stroke="black" + stroke-linecap="square" + stroke-miterlimit="10" + shape-rendering="auto" + stroke-opacity="1" + fill="black" + stroke-dasharray="none" + font-weight="normal" + stroke-width="1" + font-family="'Dialog'" + font-style="normal" + data-element-id="Arrow-17086665-1142-4cbf-9681-cf4462954c96" + stroke-linejoin="miter" + font-size="12px" + image-rendering="auto" + stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator --> + <defs id="genericDefs" /> + <g> + <g + shape-rendering="geometricPrecision" + text-rendering="optimizeQuality" + stroke-width="2"> + <line + y2="41" + fill="none" + x1="250" + x2="338" + y1="41" /> + <polygon + fill="none" + points=" 336 39 336 43 340 41" /> + <polygon + points=" 336 39 336 43 340 41" + stroke="none" /> + </g> + </g> + </g> + <g + fill-opacity="1" + color-rendering="auto" + color-interpolation="auto" + text-rendering="auto" + stroke="black" + stroke-linecap="square" + stroke-miterlimit="10" + shape-rendering="auto" + stroke-opacity="1" + fill="black" + stroke-dasharray="none" + font-weight="normal" + stroke-width="1" + font-family="'Dialog'" + font-style="normal" + data-element-id="tca_k8s_aLs74_v1_0_ResourceInstanceName2_tca_2" + stroke-linejoin="miter" + font-size="12px" + image-rendering="auto" + stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator --> + <defs id="genericDefs" /> + <g> + <g + shape-rendering="geometricPrecision" + text-rendering="optimizeQuality" + stroke-width="2"> + <rect + fill="none" + x="342" + width="123" + y="1" + height="82" /> + </g> + <g + fill-opacity="0" + fill="rgb(0,0,0)" + text-rendering="optimizeQuality" + shape-rendering="geometricPrecision" + stroke="rgb(0,0,0)" + stroke-opacity="0" + stroke-width="2"> + <rect + x="342" + width="123" + y="1" + height="82" + stroke="none" /> + </g> + <g + text-rendering="optimizeQuality" + stroke-width="2" + shape-rendering="geometricPrecision" + font-family="sans-serif"> + <text + x="379.5" + xml:space="preserve" + y="46.5" + stroke="none">tca_k8s</text> + <line + y2="61" + fill="none" + x1="342" + x2="465" + y1="61" /> + </g> + </g> + </g> + <g + fill-opacity="1" + color-rendering="auto" + color-interpolation="auto" + text-rendering="auto" + stroke="black" + stroke-linecap="square" + stroke-miterlimit="10" + shape-rendering="auto" + stroke-opacity="1" + fill="black" + stroke-dasharray="none" + font-weight="normal" + stroke-width="1" + font-family="'Dialog'" + font-style="normal" + data-element-id="Arrow-d48a7f5f-643d-4550-8045-ee46bb05ddfa" + stroke-linejoin="miter" + font-size="12px" + image-rendering="auto" + stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator --> + <defs id="genericDefs" /> + <g> + <g + shape-rendering="geometricPrecision" + text-rendering="optimizeQuality" + stroke-width="2"> + <line + y2="41" + fill="none" + x1="465" + x2="553" + y1="41" /> + <polygon + fill="none" + points=" 551 39 551 43 555 41" /> + <polygon + points=" 551 39 551 43 555 41" + stroke="none" /> + </g> + </g> + </g> + <g + fill-opacity="1" + color-rendering="auto" + color-interpolation="auto" + text-rendering="auto" + stroke="black" + stroke-linecap="square" + stroke-miterlimit="10" + shape-rendering="auto" + stroke-opacity="1" + fill="black" + stroke-dasharray="none" + font-weight="normal" + stroke-width="1" + font-family="'Dialog'" + font-style="normal" + data-element-id="OperationalPolicy" + stroke-linejoin="miter" + font-size="12px" + image-rendering="auto" + stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator --> + <defs id="genericDefs" /> + <g> + <g + shape-rendering="geometricPrecision" + text-rendering="optimizeQuality" + stroke-width="2"> + <rect + fill="none" + x="557" + width="123" + y="1" + height="82" /> + </g> + <g + fill-opacity="0" + fill="rgb(0,0,0)" + text-rendering="optimizeQuality" + shape-rendering="geometricPrecision" + stroke="rgb(0,0,0)" + stroke-opacity="0" + stroke-width="2"> + <rect + x="557" + width="123" + y="1" + height="82" + stroke="none" /> + </g> + <g + text-rendering="optimizeQuality" + stroke-width="2" + shape-rendering="geometricPrecision" + font-family="sans-serif"> + <text + x="564.5" + xml:space="preserve" + y="46.5" + stroke="none">OperationalPolicy</text> + <line + y2="1" + fill="none" + x1="557" + x2="618" + y1="42" /> + </g> + </g> + </g> + <g + fill-opacity="1" + color-rendering="auto" + color-interpolation="auto" + text-rendering="auto" + stroke="black" + stroke-linecap="square" + stroke-miterlimit="10" + shape-rendering="auto" + stroke-opacity="1" + fill="black" + stroke-dasharray="none" + font-weight="normal" + stroke-width="1" + font-family="'Dialog'" + font-style="normal" + data-element-id="Arrow-79f11b91-5a48-4945-9d2c-18a423105a7d" + stroke-linejoin="miter" + font-size="12px" + image-rendering="auto" + stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator --> + <defs id="genericDefs" /> + <g> + <g + shape-rendering="geometricPrecision" + text-rendering="optimizeQuality" + stroke-width="2"> + <line + y2="41" + fill="none" + x1="680" + x2="768" + y1="41" /> + <polygon + fill="none" + points=" 766 39 766 43 770 41" /> + <polygon + points=" 766 39 766 43 770 41" + stroke="none" /> + </g> + </g> + </g> + <g + fill-opacity="1" + color-rendering="auto" + color-interpolation="auto" + text-rendering="auto" + stroke="black" + stroke-linecap="square" + stroke-miterlimit="10" + shape-rendering="auto" + stroke-opacity="1" + fill="black" + stroke-dasharray="none" + font-weight="normal" + stroke-width="1" + font-family="'Dialog'" + font-style="normal" + data-element-id="stop-circle" + stroke-linejoin="miter" + font-size="12px" + image-rendering="auto" + stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator --> + <defs id="genericDefs" /> + <g> + <g + shape-rendering="geometricPrecision" + text-rendering="optimizeQuality" + stroke-width="4"> + <circle + fill="none" + r="17" + cx="789" + cy="41" /> + </g> + </g> + </g> </svg>
\ No newline at end of file diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js index 348541968..85d32c539 100644 --- a/ui-react/src/components/menu/MenuBar.js +++ b/ui-react/src/components/menu/MenuBar.js @@ -35,13 +35,6 @@ const StyledNavDropdownItem = styled(NavDropdown.Item)` `; export default class MenuBar extends React.Component { - - openEmailConsole() { - console.log("contactUs"); - var link = "mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please " - + "send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect."; - window.location.href = link; - }; render () { return ( @@ -52,7 +45,7 @@ export default class MenuBar extends React.Component { <StyledNavDropdownItem href="#action/3.3">Close Model</StyledNavDropdownItem> </NavDropdown> <NavDropdown title="Manage" id="basic-nav-dropdown"> - <StyledNavDropdownItem href="#action/3.1">Submit</StyledNavDropdownItem> + <StyledNavDropdownItem href="/operationalPolicyModal">Submit</StyledNavDropdownItem> <StyledNavDropdownItem href="#action/3.2">Stop</StyledNavDropdownItem> <StyledNavDropdownItem href="#action/3.3">Restart</StyledNavDropdownItem> <StyledNavDropdownItem href="#action/3.3">Delete</StyledNavDropdownItem> @@ -63,14 +56,12 @@ export default class MenuBar extends React.Component { <StyledNavDropdownItem href="#action/3.1">Refresh Status</StyledNavDropdownItem> </NavDropdown> <NavDropdown title="Help" id="basic-nav-dropdown"> - <NavDropdown.Item onClick={()=> window.open("https://wiki.onap.org/", "_blank")}>Wiki</NavDropdown.Item> - <NavDropdown.Item onClick={()=> this.openEmailConsole()}>Contact Us</NavDropdown.Item> + <StyledNavDropdownItem href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavDropdownItem> + <StyledNavDropdownItem href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavDropdownItem> <StyledNavDropdownItem href="#action/3.3">User Info</StyledNavDropdownItem> </NavDropdown> </Navbar.Collapse> - - - ); + ); } } diff --git a/ui-react/src/components/route/LoginRoute.js b/ui-react/src/components/route/LoginRoute.js deleted file mode 100644 index f24e31b4a..000000000 --- a/ui-react/src/components/route/LoginRoute.js +++ /dev/null @@ -1,36 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 AT&T Intellectual Property. All rights - * reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END============================================ - * =================================================================== - * - */ -import React from 'react'; -import { Route, Redirect } from 'react-router-dom'; - -const LoginRoute = ({ component: Component, ...rest }) => ( - <Route {...rest} render={props => ( - localStorage.getItem('user') - ? <Component {...props} /> - : localStorage.getItem('tryBasicAuth') - ? <Redirect to={{ pathname: '/basicAuthLogin', state: { from: props.location } }} /> - : <Redirect to={{ pathname: '/login', state: { from: props.location } }} /> - )} /> -) - -export default LoginRoute; diff --git a/ui-react/src/index.js b/ui-react/src/index.js index 8236eb15c..1b2f2f595 100644 --- a/ui-react/src/index.js +++ b/ui-react/src/index.js @@ -22,28 +22,19 @@ */ import React from 'react'; import ReactDOM from 'react-dom'; - -import { Route, Switch, BrowserRouter } from 'react-router-dom' import OnapClamp from './OnapClamp'; -import NotFound from './components/app/NotFound'; -import LoginPage from './components/app/login/LoginPage'; -import LoginFailedPage from './components/app/login/LoginFailedPage'; -import BasicAuthLogin from './components/app/login/BasicAuthLogin'; -import LoginRoute from './components/route/LoginRoute'; +import { Route, BrowserRouter } from 'react-router-dom' +import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal'; const routing = ( - <BrowserRouter> - <div> - <Switch> - <LoginRoute exact path="/" component={OnapClamp} /> - <Route path="/basicAuthLogin" component={BasicAuthLogin} /> - <Route path="/login" component={LoginPage} /> - <Route path="/loginFailed" component={LoginFailedPage} /> - <Route component={NotFound} /> - </Switch> - </div> - </BrowserRouter> -) + <BrowserRouter > + <OnapClamp /> + <Route path="/operationalPolicyModal" render={() => <OperationalPolicyModal />} /> + </BrowserRouter> +); -ReactDOM.render(routing, document.getElementById('root')) +ReactDOM.render( + routing, + document.getElementById('root') +) |
