Rework the Open CL window of the Clamp UI.
Issue-ID: CLAMP-420
Change-Id: Ic7e1e6add4067bc2ee94bd758d76e15397d941df
Signed-off-by: xuegao <xg353y@intl.att.com>
"react-bootstrap": "1.0.0-beta.9",
"bootstrap-css-only": "4.3.1",
"styled-components": "4.3.2",
- "react-router-dom": "5.0.1"
+ "react-router-dom": "5.0.1",
+ "react-select": "3.0.4"
},
"browserslist": [
">0.2%",
* limitations under the License.
* ============LICENSE_END============================================
* ===================================================================
- *
+ *
*/
class LoopCache {
}
updateMsProperties(type, newMsProperties) {
- if (newMsProperties["name"] == type) {
+ if (newMsProperties["name"] === type) {
for (var policy in this.loopJsonCache["microServicePolicies"]) {
- if (this.loopJsonCache["microServicePolicies"][policy]["name"] == type) {
+ if (this.loopJsonCache["microServicePolicies"][policy]["name"] === type) {
this.loopJsonCache["microServicePolicies"][policy] = newMsProperties;
}
}
getMsJson(type) {
var msProperties = this.loopJsonCache["microServicePolicies"];
for (var policy in msProperties) {
- if (msProperties[policy]["name"] == type) {
+ if (msProperties[policy]["name"] === type) {
return JSON.parse(JSON.stringify(msProperties[policy]));
}
}
getMsProperty(type) {
var msProperties = this.loopJsonCache["microServicePolicies"];
for (var policy in msProperties) {
- if (msProperties[policy]["name"] == type) {
+ if (msProperties[policy]["name"] === type) {
if (msProperties[policy]["properties"] !== null && msProperties[policy]["properties"] !== undefined) {
return JSON.parse(JSON.stringify(msProperties[policy]["properties"]));
}
getMsUI(type) {
var msProperties = this.loopJsonCache["microServicePolicies"];
for (var policy in msProperties) {
- if (msProperties[policy]["name"] == type) {
+ if (msProperties[policy]["name"] === type) {
return JSON.parse(JSON.stringify(msProperties[policy]["jsonRepresentation"]));
}
}
--- /dev/null
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+export default class LoopService {
+ static getLoopNames() {
+ const url = '/restservices/clds/v2/loop/getAllNames';
+ const options = {
+ method: 'GET'
+ };
+ return fetch(url,options)
+ .then(function (response) {
+ if (response.ok) {
+ console.log("GetLoopNames response received: ", response.status);
+ return response.json();
+ } else {
+ let errorMsg = "GetLoopNames failed with status code: " + response.status;
+ console.error(errorMsg);
+ return Promise.reject(errorMsg);
+ }
+ })
+ .then(function (data) {
+ return data;
+ })
+ .catch(function(error) {
+ console.error("GetLoopNames error received",error);
+ return Promise.reject(error);
+ });
+ }
+
+ static getLoop(loopName) {
+ const url = '/restservices/clds/v2/loop/' + loopName;
+ const options = {
+ method: 'GET',
+ headers: {
+ "Content-Type": "application/json"
+ }
+ };
+ return fetch(url,options)
+ .then(function (response) {
+ if (response.ok) {
+ console.log("GetLoop response received: ", response.status);
+ return response.json();
+ } else {
+ let errorMsg = "GetLoop failed with status code: " + response.status;
+ console.error(errorMsg);
+ return Promise.reject(errorMsg);
+ }
+ })
+ .then(function (data) {
+ return data;
+ })
+ .catch(function(error) {
+ console.error("GetLoop error received",error);
+ return Promise.reject(error);
+ });
+ }
+}
--- /dev/null
+/*-
+ * ============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 Select from 'react-select';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import FormCheck from 'react-bootstrap/FormCheck'
+import styled from 'styled-components';
+import LoopService from '../../api/LoopService';
+import LoopCache from '../../api/LoopCache';
+
+const ModalStyled = styled(Modal)`
+ background-color: transparent;
+`
+const CheckBoxStyled = styled(FormCheck.Input)`
+ margin-left:3rem;
+`
+
+export default class LoopModal extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.getLoopNames = this.getLoopNames.bind(this);
+ this.openModel = this.openModel.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
+ this.state = {
+ show: true,
+ chosenLoopName: '',
+ loopNames:[]
+ };
+ }
+ componentDidMount() {
+ this.getLoopNames();
+ }
+ handleClose() {
+ this.setState({ show: false });
+ this.props.history.push('/');
+ }
+ handleDropdownListChange(e) {
+ this.setState({ chosenLoopName: e.value});
+ }
+ getLoopNames() {
+ LoopService.getLoopNames().then(loopNames => {
+ const loopOptions = loopNames.map((loopName) => { return {label: loopName, value: loopName}});
+ this.setState({loopNames:loopOptions})
+ });
+ }
+ openModel() {
+ this.setState({ show: false });
+ this.props.history.push('/');
+ // Open selected model
+ console.log("Loop " + this.state.chosenLoopName + " is chosen");
+ LoopService.getLoop(this.state.chosenLoopName).then(loop => {
+ console.log("Initialize the loop cache");
+ new LoopCache(loop);
+ });
+ }
+ render() {
+ return (
+ <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+ <Modal.Header closeButton>
+ <Modal.Title>Open Model</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <Form.Group as={Row} controlId="formPlaintextEmail">
+ <Form.Label column sm="2">Model Name</Form.Label>
+ <Col sm="10">
+ <Select onChange={this.handleDropdownListChange} options={ this.state.loopNames } />
+ </Col>
+ </Form.Group>
+ <Form.Group controlId="formBasicChecbox">
+ <Form.Check>
+ <FormCheck.Label>Read Only</FormCheck.Label>
+ <CheckBoxStyled type="checkbox" />
+ </Form.Check>
+ </Form.Group>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
+ <Button variant="primary" type="submit" onClick={this.openModel}>OK</Button>
+ </Modal.Footer>
+ </ModalStyled>
+
+ );
+ }
+}
this.allPolicies = LOOP_CACHE.getOperationalPolicyProperty();
}
// Provision all policies ID first
- if (this.policyIds.length == 0 && this.allPolicies['operational_policy'] != undefined) {
+ 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']);
</span>
</div>
</div>
-
+
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
*/
import React from 'react';
import Table from 'react-bootstrap/Table';
-import './ClosedLoopLogs.css';
export default class ClosedLoopViewLogs 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="/openLoop">Open CL</StyledNavDropdownItem>
<StyledNavDropdownItem href="#action/3.2">Properties CL</StyledNavDropdownItem>
<StyledNavDropdownItem href="#action/3.3">Close Model</StyledNavDropdownItem>
</NavDropdown>
);
}
}
-
import ReactDOM from 'react-dom';
import OnapClamp from './OnapClamp';
import { Route, BrowserRouter } from 'react-router-dom'
-
+import LoopModal from './components/dialogs/LoopModal';
import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
const routing = (
<BrowserRouter >
<OnapClamp />
<Route path="/operationalPolicyModal" render={() => <OperationalPolicyModal />} />
+ <Route path="/openLoop" component={ LoopModal } />
</BrowserRouter>
);
Code Review / clamp.git / commitdiff