Introduce modal
Test Modal for Operational policy and use react-router to show it
Issue-ID: CLAMP-415
Change-Id: Ie0df5f1085925224076062c7d331dc2f4c72d032
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
diff --git a/ui-react/package.json b/ui-react/package.json
index 791ab9d..c6369a3 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 7de6ad0..d058543 100644
--- a/ui-react/src/components/app/LoopUI.js
+++ b/ui-react/src/components/app/LoopUI.js
@@ -31,14 +31,15 @@
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 @@
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 @@
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 994255c..0000000
--- 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 5169435..0000000
--- 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 027243b..9ce8ff0 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 7fd2059..2ef8396 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;
- }
- }
- }
+ 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;
+
+ updateGlobalProperties(newGlobalProperties) {
+ this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties;
}
-
- updateOpPolicyProperties(newOpProperties) {
- this.loopJsonCache["operationalPolicies"] = newOpProperties;
+
+ updateOpPolicyProperties(newOpProperties) {
+ this.loopJsonCache["operationalPolicies"] = newOpProperties;
}
-
- getLoopName() {
- return this.loopJsonCache["name"];
+
+ getLoopName() {
+ return this.loopJsonCache["name"];
}
-
- getOperationalPolicyProperty() {
- return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]["0"]["configurationsJson"]));
+
+ getOperationalPolicyProperty() {
+ return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]["0"]["configurationsJson"]));
}
-
- getOperationalPolicies() {
- return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]));
+
+ getOperationalPolicies() {
+ return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]));
}
-
- getGlobalProperty() {
- return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]));
+
+ getGlobalProperty() {
+ return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]));
}
-
- getDeploymentProperties() {
- return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"]));
+
+ 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;
+
+ 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 (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;
+
+ 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 (p in msProperties) {
- if (msProperties[p]["name"] == type) {
- return JSON.parse(JSON.stringify(msProperties[p]["jsonRepresentation"]));
- }
- }
- 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() {
+
+ 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 982180d..0000000
--- 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
similarity index 63%
rename from ui-react/src/components/app/login/LoginFailedPage.js
rename to ui-react/src/components/backend_communication/UserService.js
index fb398ef..8145395 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 0000000..f3cc9e1
--- /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 7b4ed0f..0000000
--- 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 0000000..e52d930
--- /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 0000000..6b4477f
--- /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 bb33270..2f5ebd0 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 3485419..85d32c5 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -35,13 +35,6 @@
`;
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 @@
<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 @@
<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 f24e31b..0000000
--- 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 8236eb1..1b2f2f5 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')
+)
