From c8d6130e6355a6f8f460c114ed7bac0221eb0020 Mon Sep 17 00:00:00 2001 From: sebdet Date: Thu, 4 Jul 2019 15:50:34 +0200 Subject: More modular approach Modular approach for React components and CSS + theming Issue-ID: CLAMP-418 Change-Id: I359f31e92492ae75ac26ef297abde822c6cd56ea Signed-off-by: sebdet --- .../OperationalPolicy/OperationalPolicy.css | 73 ++++ .../dialogs/OperationalPolicy/OperationalPolicy.js | 486 +++++++++++++++++++++ 2 files changed, 559 insertions(+) create mode 100644 ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css create mode 100644 ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.js (limited to 'ui-react/src/components/dialogs/OperationalPolicy') diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css new file mode 100644 index 00000000..94a91c23 --- /dev/null +++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css @@ -0,0 +1,73 @@ +.disabled { + background-color: #dddd; +} + +label { + text-align: right; + vertical-align: middle; +} + +.leftPolicyPanel { + padding: 0 10px 0 0; +} + +.idError { + color: red; + padding: 50px 0px; + text-align: center; + display: none; +} + +.policyPanel { + background-color: #f5f5f5; + padding: 15px 5px 0 5px; +} + +.form-group.clearfix { + display: -webkit-flex; + display: flex; + align-items: center; +} + +label { + margin-bottom: 0px; +} + +.withnote { + margin-bottom: 0px; +} + +.note { + font-size:10px; + margin-left: 250px; + font-weight: normal; +} + +#policyTable { + cursor: pointer; + width: 100%; +} + +#policyTable tr { + border-bottom: 1px solid #ddd; + border-collapse: collapse; + text-align: left; + font-size: 12px; + font-weight: normal; +} + +#policyTable td { + padding: 8px 10px; +} + +#policyTable tr.highlight { + background-color: #f5f5f5; + font-weight: bold; + font-size: 13px; +} + +#policyTableHolder { + height: 200px; + width: 100%; + overflow: auto; +} \ No newline at end of file diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.js new file mode 100644 index 00000000..7b4ed0f8 --- /dev/null +++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.js @@ -0,0 +1,486 @@ +/*- + * ============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 ( + <> + + + + + Modal heading + + +
+
+ +

Operational Policy

+
+ +
+
+ +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+ +
+ + ID must be unique +
+
+
+ +
+ +
+
+
+ +
+ + +
+
+
+ +
+ +
+
+ +
+ +
+ +
+ + +
+ +
+
+
+ +
+ +
+
+
+ +
+ + +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ + +
+ +
+
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+ +
+ + +
+
+ +
+ + +
+ +
+ + + + + + + + ); + } +} + +export default OperationalPolicy; \ No newline at end of file -- cgit