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 --- ui-react/src/components/app/LoopUI.js | 146 +++++++ ui-react/src/components/app/logo.png | Bin 0 -> 21360 bytes .../components/backend_communication/LoopCache.js | 116 +++++ .../OperationalPolicy/OperationalPolicy.css | 73 ++++ .../dialogs/OperationalPolicy/OperationalPolicy.js | 486 +++++++++++++++++++++ .../components/loop_viewer/logs/ClosedLoopLogs.js | 55 +++ .../loop_viewer/status/ClosedLoopStatus.css | 19 + .../loop_viewer/status/ClosedLoopStatus.js | 55 +++ .../components/loop_viewer/svg/ClosedLoopSvg.js | 43 ++ .../src/components/loop_viewer/svg/example.svg | 13 + ui-react/src/components/menu/MenuBar.js | 69 +++ 11 files changed, 1075 insertions(+) create mode 100644 ui-react/src/components/app/LoopUI.js create mode 100644 ui-react/src/components/app/logo.png create mode 100644 ui-react/src/components/backend_communication/LoopCache.js create mode 100644 ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css create mode 100644 ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.js create mode 100644 ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js create mode 100644 ui-react/src/components/loop_viewer/status/ClosedLoopStatus.css create mode 100644 ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js create mode 100644 ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js create mode 100644 ui-react/src/components/loop_viewer/svg/example.svg create mode 100644 ui-react/src/components/menu/MenuBar.js (limited to 'ui-react/src/components') diff --git a/ui-react/src/components/app/LoopUI.js b/ui-react/src/components/app/LoopUI.js new file mode 100644 index 000000000..d0f5aa329 --- /dev/null +++ b/ui-react/src/components/app/LoopUI.js @@ -0,0 +1,146 @@ +/*- + * ============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 MenuBar from '../menu/MenuBar'; +import Navbar from 'react-bootstrap/Navbar'; +import logo from './logo.png'; +import { GlobalClampStyle } from '../../theme/globalStyle.js'; + +import ClosedLoopSvg from '../loop_viewer/svg/ClosedLoopSvg'; +import ClosedLoopLogs from '../loop_viewer/logs/ClosedLoopLogs'; +import ClosedLoopStatus from '../loop_viewer/status/ClosedLoopStatus'; + +const ProjectNameStyle = styled.a` + vertical-align: middle; + padding-left: 30px; + font-size: 30px; + +` +const LoopViewDivStyle = styled.div` + height: 90vh; + overflow: hidden; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 10px; + color: ${props => props.theme.loopViewerFontColor}; + background-color: ${props => props.theme.loopViewerBackgroundColor}; + border: 1px solid transparent; + border-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; +` + +const LoopViewHeaderDivStyle = styled.div` + background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; + padding: 10px 10px; + color: ${props => props.theme.loopViewerHeaderFontColor}; +` + +const LoopViewBodyDivStyle = styled.div` + background-color: ${props => (props.theme.loopViewerBackgroundColor)}; + padding: 10px 10px; + color: ${props => (props.theme.loopViewerHeaderFontColor)}; + height: 95%; +` + +const LoopViewLoopNameSpanStyle = styled.span` + font-weight: bold; + color: ${props => (props.theme.loopViewerHeaderFontColor)}; + background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)}; +` + +export default class LoopUI extends React.Component { + + user = "testuser"; + loopName="Empty (NO loop loaded yet)"; + + renderMenuNavBar() { + return ( + + ); + } + + renderUserLoggedNavBar() { + return ( + + Signed in as: {this.user} + + ); + } + + renderLogoNavBar() { + return ( + + + CLAMP + + ); + } + + renderNavBar() { + return ( + + {this.renderLogoNavBar()} + {this.renderMenuNavBar()} + {this.renderUserLoggedNavBar()} + + ); + } + + renderLoopViewHeader() { + return ( + + Loop Viewer - {this.loopName} + + ); + } + + renderLoopViewBody() { + return ( + + + + + + ); + } + + renderLoopViewer() { + return ( + + {this.renderLoopViewHeader()} + {this.renderLoopViewBody()} + + ); + } + + render() { + return ( +
+ + {this.renderNavBar()} + {this.renderLoopViewer()} +
+ ); + } +} diff --git a/ui-react/src/components/app/logo.png b/ui-react/src/components/app/logo.png new file mode 100644 index 000000000..c6f6857a5 Binary files /dev/null and b/ui-react/src/components/app/logo.png differ diff --git a/ui-react/src/components/backend_communication/LoopCache.js b/ui-react/src/components/backend_communication/LoopCache.js new file mode 100644 index 000000000..7fd20596b --- /dev/null +++ b/ui-react/src/components/backend_communication/LoopCache.js @@ -0,0 +1,116 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ +class LoopCache +{ + constructor(loopJson) { + this.loopJsonCache=loopJson; + } + + updateMsProperties(type, newMsProperties) { + if (newMsProperties["name"] == type) { + for (p in this.loopJsonCache["microServicePolicies"]) { + if (this.loopJsonCache["microServicePolicies"][p]["name"] == type) { + this.loopJsonCache["microServicePolicies"][p] = newMsProperties; + } + } + } + } + + updateGlobalProperties(newGlobalProperties) { + this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties; + } + + updateOpPolicyProperties(newOpProperties) { + this.loopJsonCache["operationalPolicies"] = newOpProperties; + } + + getLoopName() { + return this.loopJsonCache["name"]; + } + + getOperationalPolicyProperty() { + return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]["0"]["configurationsJson"])); + } + + getOperationalPolicies() { + return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"])); + } + + getGlobalProperty() { + return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"])); + } + + getDeploymentProperties() { + return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"])); + } + + getMsJson(type) { + var msProperties = this.loopJsonCache["microServicePolicies"]; + for (p in msProperties) { + if (msProperties[p]["name"] == type) { + return JSON.parse(JSON.stringify(msProperties[p])); + } + } + return null; + } + + getMsProperty(type) { + var msProperties = this.loopJsonCache["microServicePolicies"]; + for (p in msProperties) { + if (msProperties[p]["name"] == type) { + if (msProperties[p]["properties"] !== null && msProperties[p]["properties"] !== undefined) { + return JSON.parse(JSON.stringify(msProperties[p]["properties"])); + } + } + } + return null; + } + + getMsUI(type) { + var msProperties = this.loopJsonCache["microServicePolicies"]; + for (p in msProperties) { + if (msProperties[p]["name"] == type) { + return JSON.parse(JSON.stringify(msProperties[p]["jsonRepresentation"])); + } + } + return null; + } + + getResourceDetailsVfProperty() { + return this.loopJsonCache["modelPropertiesJson"]["resourceDetails"]["VF"]; + } + + getResourceDetailsVfModuleProperty() { + return this.loopJsonCache["modelPropertiesJson"]["resourceDetails"]["VFModule"]; + } + + getLoopLogsArray() { + return this.loopJsonCache.loopLogs; + } + + getComponentStates() { + return this.loopJsonCache.components; + } + +} +export default LoopCache; 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 000000000..94a91c234 --- /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 000000000..7b4ed0f89 --- /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 diff --git a/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js b/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js new file mode 100644 index 000000000..709cec96a --- /dev/null +++ b/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js @@ -0,0 +1,55 @@ +/*- + * ============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 Table from 'react-bootstrap/Table'; +import './ClosedLoopLogs.css'; + +export default class ClosedLoopViewLogs extends React.Component { + render() { + return ( +
+
+ + + + + + + + + + + + + + + + + + +
DateTypeComponentLog
testtesttesttest
+
+
+ ); + } +} diff --git a/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.css b/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.css new file mode 100644 index 000000000..14add0f53 --- /dev/null +++ b/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.css @@ -0,0 +1,19 @@ + +.status_title{ + position: absolute; + left: 61%; + top: 151px; + font-size:20px; +} +.status{ + background-color: gray; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; +} +.status_table { + position: absolute; + left: 61%; + top: 191px; + font-size:10px; +} \ No newline at end of file diff --git a/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js b/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js new file mode 100644 index 000000000..da5969e46 --- /dev/null +++ b/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js @@ -0,0 +1,55 @@ +/*- +* ============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 Table from 'react-bootstrap/Table'; +import './ClosedLoopStatus.css'; + +export default class ClosedLoopStatus extends React.Component { + render() { + return ( +
+ Status: +    TestStatus    + + +
+ + + + + + + + + + + + + +
ComponentStateDescription
long test Statetest description very very very long description
+
+
+ ); + } +} + diff --git a/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js b/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js new file mode 100644 index 000000000..d9f5eaf80 --- /dev/null +++ b/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js @@ -0,0 +1,43 @@ +/*- + * ============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 { ReactComponent as SvgExample } from './example.svg'; +const LoopViewSvgDivStyle = styled.div` + + overflow: hidden; + background-color: ${props => (props.theme.loopViewerBackgroundColor)}; + border: 1px solid transparent; + border-color: ${props => (props.theme.loopViewerHeaderColor)}; +` + +export default class ClosedLoopViewSvg extends React.Component { + render() { + return ( + + + + ); + } +} + diff --git a/ui-react/src/components/loop_viewer/svg/example.svg b/ui-react/src/components/loop_viewer/svg/example.svg new file mode 100644 index 000000000..bb3327042 --- /dev/null +++ b/ui-react/src/components/loop_viewer/svg/example.svg @@ -0,0 +1,13 @@ + + + + + + + + + + SVG + + Sorry, your browser does not support inline 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 new file mode 100644 index 000000000..3077bde65 --- /dev/null +++ b/ui-react/src/components/menu/MenuBar.js @@ -0,0 +1,69 @@ +/*- + * ============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 Navbar from 'react-bootstrap/Navbar'; +import NavDropdown from 'react-bootstrap/NavDropdown'; +import 'bootstrap-css-only/css/bootstrap.min.css'; +import styled from 'styled-components'; + +const StyledNavDropdownItem = styled(NavDropdown.Item)` + color: ${props => props.theme.fontNormal}; + :hover { + background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; + color: ${props => props.theme.loopViewerHeaderFontColor} + } +`; + +export default class MenuBar extends React.Component { + + render () { + return ( + + + Open CL + Properties CL + Close Model + + + Submit + Stop + Restart + Delete + Deploy + UnDeploy + + + Refresh Status + + + Wiki + Contact Us + User Info + + + + + ); + } +} + -- cgit