diff options
24 files changed, 1036 insertions, 502 deletions
diff --git a/ui-react/package.json b/ui-react/package.json index 943ed7ad1..7d0e407b3 100644 --- a/ui-react/package.json +++ b/ui-react/package.json @@ -12,12 +12,13 @@ "author": "ONAP Clamp Team", "license": "Apache-2.0", "dependencies": { - "json-editor": "^0.7.28", - "react": "~16.8.0", - "react-dom": "~16.8.0", - "react-scripts": "~3.0.1", + "json-editor": "0.7.28", + "react": "16.8.0", + "react-dom": "16.8.0", + "react-scripts": "3.0.1", "react-bootstrap": "1.0.0-beta.9", - "bootstrap-css-only": "4.3.1" + "bootstrap-css-only": "4.3.1", + "styled-components": "4.3.2" }, "browserslist": [ ">0.2%", diff --git a/ui-react/src/ClampHeader.js b/ui-react/src/ClampHeader.js deleted file mode 100644 index 9460023f6..000000000 --- a/ui-react/src/ClampHeader.js +++ /dev/null @@ -1,45 +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 ClampLogoImg from './ClampLogoImg'; -import ClampLogo from './ClampLogo'; -import UserBar from './UserBar'; -import MenuBar from './MenuBar'; -import Navbar from 'react-bootstrap/Navbar'; -import 'bootstrap-css-only/css/bootstrap.min.css'; - -class ClampHeader extends React.Component { - render() { - return ( - <Navbar bg="light" expand="lg"> - <ClampLogoImg /> - <ClampLogo /> - <MenuBar /> - <UserBar /> - </Navbar> - ); - } -} - -export default ClampHeader; diff --git a/ui-react/src/ClampLogo.js b/ui-react/src/ClampLogo.js deleted file mode 100644 index ffceee1df..000000000 --- a/ui-react/src/ClampLogo.js +++ /dev/null @@ -1,42 +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 Navbar from 'react-bootstrap/Navbar'; -import Nav from 'react-bootstrap/Nav'; -import './css/index.css'; -import 'bootstrap-css-only/css/bootstrap.min.css'; - -class ClampLogo extends React.Component { - render() { - return ( - <Nav className="justify-content-left logo_text"> - <Navbar.Text> - Clamp - </Navbar.Text> - </Nav> - ); - } -} - -export default ClampLogo; diff --git a/ui-react/src/ClampLogoImg.js b/ui-react/src/ClampLogoImg.js deleted file mode 100644 index 8b34dad9c..000000000 --- a/ui-react/src/ClampLogoImg.js +++ /dev/null @@ -1,40 +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 Navbar from 'react-bootstrap/Navbar'; -import 'bootstrap-css-only/css/bootstrap.min.css'; - -class ClampLogoImg extends React.Component { - render() { - return ( - <Navbar.Brand> - <img alt="" src={require('./images/logo_onap_2017.png')} - height="50px" width="234px" - className="d-inline-block align-top"/> - </Navbar.Brand> - ); - } -} - -export default ClampLogoImg; diff --git a/ui-react/src/ClosedLoopView.js b/ui-react/src/ClosedLoopView.js deleted file mode 100644 index daa366062..000000000 --- a/ui-react/src/ClosedLoopView.js +++ /dev/null @@ -1,41 +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 ClosedLoopViewHeader from './ClosedLoopViewHeader'; -import ClosedLoopViewBody from './ClosedLoopViewBody'; -import './css/index.css'; - - class ClosedLoopView extends React.Component { - render() { - return ( - <div className="container-fluid cldsmodelling"> - <div className="cl_panel"> - <ClosedLoopViewHeader /> - <ClosedLoopViewBody /> - </div> - </div> - ); - } - } - - export default ClosedLoopView; diff --git a/ui-react/src/ClosedLoopViewBody.js b/ui-react/src/ClosedLoopViewBody.js deleted file mode 100644 index bfa05f8b9..000000000 --- a/ui-react/src/ClosedLoopViewBody.js +++ /dev/null @@ -1,70 +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 ClosedLoopSVG from './ClosedLoopSVG'; -import ClosedLoopLogs from './ClosedLoopLogs'; -import ClosedLoopStatus from './ClosedLoopStatus'; -import './css/index.css'; - - class ClosedLoopViewBody extends React.Component { - - constructor(props) { - super(props); - this.state = { - disableDiv: false - }; - this.disableDiv = this.disableDiv.bind(this); - this.enableDiv = this.enableDiv.bind(this); - } - - disableDiv() { - this.setState({ - disableDiv:true - }); - } - - enableDiv() { - this.setState({ - disableDiv:false - }); - } - - - render() { - var divStyle = { - display:this.state.disableDiv?'block':'none' - }; - return ( - <div id="paletteDiv" className="cl_view_body" style={divStyle}> - <div id="js-canvas" className="js_canvas"> - <ClosedLoopSVG /> - <ClosedLoopLogs /> - </div> - <ClosedLoopStatus /> - </div> - ); - } - } - - - export default ClosedLoopViewBody; diff --git a/ui-react/src/ClosedLoopViewHeader.js b/ui-react/src/ClosedLoopViewHeader.js deleted file mode 100644 index 8f2d845f1..000000000 --- a/ui-react/src/ClosedLoopViewHeader.js +++ /dev/null @@ -1,43 +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 './css/index.css'; - -class ClosedLoopViewHeader extends React.Component { - render() { - return ( - <div className="cl_panel_heading clearfix"> - <div className="color_white"> - <span className="pull-left"> <span id="modeler_name">Closed - Loop Modeler</span> - </span> <span className="pull-right"> <span id="loop_name">No - LOOP loaded yet</span> <i ></i> - </span> - </div> - </div> - ); - } -} - -export default ClosedLoopViewHeader; diff --git a/ui-react/src/MenuBar.js b/ui-react/src/MenuBar.js deleted file mode 100644 index ce962f338..000000000 --- a/ui-react/src/MenuBar.js +++ /dev/null @@ -1,62 +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 Navbar from 'react-bootstrap/Navbar'; -import NavDropdown from 'react-bootstrap/NavDropdown'; -import 'bootstrap-css-only/css/bootstrap.min.css'; - -class MenuBar extends React.Component { - render () { - return ( - <Navbar.Collapse id="basic-navbar-nav" className="justify-content-center"> - <NavDropdown title="Closed Loop" id="basic-nav-dropdown"> - <NavDropdown.Item href="#action/3.1">Open CL</NavDropdown.Item> - <NavDropdown.Item href="#action/3.2">Properties CL</NavDropdown.Item> - <NavDropdown.Item href="#action/3.3">Close Model</NavDropdown.Item> - </NavDropdown> - <NavDropdown title="Manage" id="basic-nav-dropdown"> - <NavDropdown.Item href="#action/3.1">Submit</NavDropdown.Item> - <NavDropdown.Item href="#action/3.2">Stop</NavDropdown.Item> - <NavDropdown.Item href="#action/3.3">Restart</NavDropdown.Item> - <NavDropdown.Item href="#action/3.3">Delete</NavDropdown.Item> - <NavDropdown.Item href="#action/3.3">Deploy</NavDropdown.Item> - <NavDropdown.Item href="#action/3.3">UnDeploy</NavDropdown.Item> - </NavDropdown> - <NavDropdown title="View" id="basic-nav-dropdown"> - <NavDropdown.Item href="#action/3.1">Refresh Status</NavDropdown.Item> - </NavDropdown> - <NavDropdown title="Help" id="basic-nav-dropdown"> - <NavDropdown.Item href="#action/3.1">Wiki</NavDropdown.Item> - <NavDropdown.Item href="#action/3.2">Contact Us</NavDropdown.Item> - <NavDropdown.Item href="#action/3.3">User Info</NavDropdown.Item> - </NavDropdown> - </Navbar.Collapse> - - - ); - } -} - - - -export default MenuBar; diff --git a/ui-react/src/Clamp.js b/ui-react/src/OnapClamp.js index 38634b3a4..bdcea6290 100644 --- a/ui-react/src/Clamp.js +++ b/ui-react/src/OnapClamp.js @@ -22,19 +22,18 @@ */ import React from 'react'; -import ClampHeader from './ClampHeader'; -import ClosedLoopView from './ClosedLoopView'; +import LoopUI from './components/app/LoopUI' +import { ThemeProvider } from 'styled-components'; +import { DefaultClampTheme } from './theme/globalStyle.js'; - -class Clamp extends React.Component { +export default class OnapClamp extends LoopUI { + render() { + console.log("Onap Clamp UI starting"); return ( - <div> - <ClampHeader /> - <ClosedLoopView /> - </div> - ); + <ThemeProvider theme={DefaultClampTheme}> + {super.render()} + </ThemeProvider>); } } -export default Clamp; diff --git a/ui-react/src/UserBar.js b/ui-react/src/UserBar.js deleted file mode 100644 index d4b3ede74..000000000 --- a/ui-react/src/UserBar.js +++ /dev/null @@ -1,42 +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 Navbar from 'react-bootstrap/Navbar'; -import 'bootstrap-css-only/css/bootstrap.min.css'; - -class UserBar extends React.Component { - render () { - const user = this.props.user; - return ( - - <Navbar.Collapse className="justify-content-end"> - <Navbar.Text> - Hello: <a>{user}</a> - </Navbar.Text> -</Navbar.Collapse> - - ); - } -} - -export default UserBar; 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 ( + <MenuBar /> + ); + } + + renderUserLoggedNavBar() { + return ( + <Navbar.Text> + Signed in as: <a href="login">{this.user}</a> + </Navbar.Text> + ); + } + + renderLogoNavBar() { + return ( + <Navbar.Brand> + <img height="50px" width="234px" src={logo} alt=""/> + <ProjectNameStyle>CLAMP</ProjectNameStyle> + </Navbar.Brand> + ); + } + + renderNavBar() { + return ( + <Navbar expand="lg"> + {this.renderLogoNavBar()} + {this.renderMenuNavBar()} + {this.renderUserLoggedNavBar()} + </Navbar> + ); + } + + renderLoopViewHeader() { + return ( + <LoopViewHeaderDivStyle> + Loop Viewer - <LoopViewLoopNameSpanStyle id="loop_name">{this.loopName}</LoopViewLoopNameSpanStyle> + </LoopViewHeaderDivStyle> + ); + } + + renderLoopViewBody() { + return ( + <LoopViewBodyDivStyle> + <ClosedLoopSvg /> + <ClosedLoopLogs /> + <ClosedLoopStatus /> + </LoopViewBodyDivStyle> + ); + } + + renderLoopViewer() { + return ( + <LoopViewDivStyle> + {this.renderLoopViewHeader()} + {this.renderLoopViewBody()} + </LoopViewDivStyle> + ); + } + + render() { + return ( + <div> + <GlobalClampStyle /> + {this.renderNavBar()} + {this.renderLoopViewer()} + </div> + ); + } +} diff --git a/ui-react/src/images/logo_onap_2017.png b/ui-react/src/components/app/logo.png Binary files differindex c6f6857a5..c6f6857a5 100644 --- a/ui-react/src/images/logo_onap_2017.png +++ b/ui-react/src/components/app/logo.png 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 ( + <> + <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/ClosedLoopLogs.js b/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js index 65e057cce..709cec96a 100644 --- a/ui-react/src/ClosedLoopLogs.js +++ b/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js @@ -22,9 +22,9 @@ */ import React from 'react'; import Table from 'react-bootstrap/Table'; -import './css/index.css'; +import './ClosedLoopLogs.css'; -class ClosedLoopViewLogs extends React.Component { +export default class ClosedLoopViewLogs extends React.Component { render() { return ( <div className="log_div"> @@ -53,5 +53,3 @@ class ClosedLoopViewLogs extends React.Component { ); } } - -export default ClosedLoopViewLogs; 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/ClosedLoopStatus.js b/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js index 5f4274649..da5969e46 100644 --- a/ui-react/src/ClosedLoopStatus.js +++ b/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js @@ -22,9 +22,9 @@ */ import React from 'react'; import Table from 'react-bootstrap/Table'; -import './css/index.css'; +import './ClosedLoopStatus.css'; -class ClosedLoopStatus extends React.Component { +export default class ClosedLoopStatus extends React.Component { render() { return ( <div> @@ -53,4 +53,3 @@ class ClosedLoopStatus extends React.Component { } } -export default ClosedLoopStatus; diff --git a/ui-react/src/ClosedLoopSVG.js b/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js index ffba83093..d9f5eaf80 100644 --- a/ui-react/src/ClosedLoopSVG.js +++ b/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js @@ -21,15 +21,23 @@ * */ import React from 'react'; -import './css/index.css'; +import styled from 'styled-components'; +import { ReactComponent as SvgExample } from './example.svg'; +const LoopViewSvgDivStyle = styled.div` -class ClosedLoopViewSVG extends React.Component { + 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 ( - <div id="loop_content"> - </div> + <LoopViewSvgDivStyle id="loop_svg"> + <SvgExample /> + </LoopViewSvgDivStyle> ); } } -export default ClosedLoopViewSVG; 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 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>
\ 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 ( + <Navbar.Collapse id="basic-navbar-nav" className="justify-content-center"> + <NavDropdown title="Closed Loop" id="basic-nav-dropdown"> + <StyledNavDropdownItem href="#action/3.1">Open CL</StyledNavDropdownItem> + <StyledNavDropdownItem href="#action/3.2">Properties CL</StyledNavDropdownItem> + <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="#action/3.2">Stop</StyledNavDropdownItem> + <StyledNavDropdownItem href="#action/3.3">Restart</StyledNavDropdownItem> + <StyledNavDropdownItem href="#action/3.3">Delete</StyledNavDropdownItem> + <StyledNavDropdownItem href="#action/3.3">Deploy</StyledNavDropdownItem> + <StyledNavDropdownItem href="#action/3.3">UnDeploy</StyledNavDropdownItem> + </NavDropdown> + <NavDropdown title="View" id="basic-nav-dropdown"> + <StyledNavDropdownItem href="#action/3.1">Refresh Status</StyledNavDropdownItem> + </NavDropdown> + <NavDropdown title="Help" id="basic-nav-dropdown"> + <StyledNavDropdownItem href="#action/3.1">Wiki</StyledNavDropdownItem> + <StyledNavDropdownItem href="#action/3.2">Contact Us</StyledNavDropdownItem> + <StyledNavDropdownItem href="#action/3.3">User Info</StyledNavDropdownItem> + </NavDropdown> + </Navbar.Collapse> + + + ); + } +} + diff --git a/ui-react/src/css/index.css b/ui-react/src/css/index.css deleted file mode 100644 index 5a06c3b2b..000000000 --- a/ui-react/src/css/index.css +++ /dev/null @@ -1,88 +0,0 @@ -.cldsmodelling { - height: 90vh; - overflow: hidden; - margin-left: 1px; - margin-right: 1px; -} -.cl_panel { - margin-bottom: 20px; - background-color: #fff; - border: 1px solid transparent; - border-radius: 4px; - box-shadow: 0 1px 1px rgba(0, 0, 0, .05); - width:100% ; - height: 100%; - border-color: #337ab7; -} -.cl_panel_heading{ - color: #fff; - background-color: #337ab7; - border-color: #337ab7; - padding: 10px 15px; - border-bottom: 1px solid transparent; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - font-size: 12px; -} -.pull-left{ - float: left !important; -} -.pull-right{ - float: right !important; -} - -.color_white { - color: white; -} -.cl_view_body { - height: 83.5vh; width: 100%; -} -.logo_text { - font-size: 20px; - font-weight: bold; -} -.js_canvas { - margin-top: 200px; - margin-left: 20px; - margin-right: 20px; -} -.log_div{ - border: 2px solid gray; - margin-right: 20px; - font-size: 12px; -} -.log_table { - width: 100%; - height: 87%; - overflow: auto; -} -.row_10_per { - width: 10%; -} -.row_30_per { - width: 30%; -} -.row_70_per { - width: 70%; -} -.table_header { - font-weight: bold; -} -.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; -} diff --git a/ui-react/src/index.js b/ui-react/src/index.js index 39162f562..b2fc3b0f6 100644 --- a/ui-react/src/index.js +++ b/ui-react/src/index.js @@ -22,9 +22,10 @@ */ import React from 'react'; import ReactDOM from 'react-dom'; -import Clamp from './Clamp'; +import OnapClamp from './OnapClamp'; + ReactDOM.render( - <Clamp />, + <OnapClamp/>, document.getElementById('root') ) diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js new file mode 100644 index 000000000..df9126296 --- /dev/null +++ b/ui-react/src/theme/globalStyle.js @@ -0,0 +1,79 @@ +/*- + * ============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 { createGlobalStyle } from 'styled-components'; + +export const GlobalClampStyle = createGlobalStyle` + body { + padding: 0; + margin: 0; + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: normal; + color: ${props => props.theme.fontNormal}; + background-color: ${props => props.theme.backgroundColor}; + } + + span { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: bold; + color: ${props => props.theme.fontNormal}; + background-color: ${props => props.theme.backgroundColor}; + } + + a { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: bold; + color: ${props => props.theme.fontNormal}; + background-color: ${props => props.theme.backgroundColor}; + + } + + div { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + border-radius: 4px; + color: ${props => props.theme.fontNormal}; + background-color: ${props => (props.theme.backgroundColor)}; + } +` + +export const DefaultClampTheme = { + fontDanger: '#eb238e', + fontWarning: '#eb238e', + fontLight: '#ffffff', + fontDark: '#888888', + fontHighlight: '#ffff00', + fontNormal: 'black', + + backgroundColor: '#eeeeee', + fontFamily: 'Arial, Sans-serif', + fontSize: '15px', + + loopViewerBackgroundColor: 'white', + loopViewerFontColor: 'yellow', + loopViewerHeaderBackgroundColor: '#337ab7', + loopViewerHeaderFontColor: 'white', +}; |
