Rework the status
[clamp.git] / ui-react / src / components / loop_viewer / svg / LoopSvg.js
1 /*-
2  * ============LICENSE_START=======================================================
3  * ONAP CLAMP
4  * ================================================================================
5  * Copyright (C) 2019 AT&T Intellectual Property. All rights
6  *                             reserved.
7  * ================================================================================
8  * Licensed under the Apache License, Version 2.0 (the "License");
9  * you may not use this file except in compliance with the License.
10  * You may obtain a copy of the License at
11  *
12  * http://www.apache.org/licenses/LICENSE-2.0
13  *
14  * Unless required by applicable law or agreed to in writing, software
15  * distributed under the License is distributed on an "AS IS" BASIS,
16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17  * See the License for the specific language governing permissions and
18  * limitations under the License.
19  * ============LICENSE_END============================================
20  * ===================================================================
21  *
22  */
23 import React from 'react';
24 import styled from 'styled-components';
25 import LoopCache from '../../../api/LoopCache';
26 import { withRouter } from "react-router";
27 import LoopService from '../../../api/LoopService';
28 import LoopComponentConverter from './LoopComponentConverter';
29
30 const LoopViewSvgDivStyled = styled.div`
31         overflow: hidden;
32         background-color: ${props => (props.theme.loopViewerBackgroundColor)};
33         border: 1px solid;
34         border-color: ${props => (props.theme.loopViewerHeaderColor)};
35         margin-left: auto;
36         margin-right:auto;
37         text-align: center;
38
39 `
40
41 class LoopViewSvg extends React.Component {
42
43         static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
44
45         state = {
46                 svgContent: LoopViewSvg.emptySvg,
47                 loopCache: new LoopCache({}),
48                 componentModalMapping: new Map([]),
49         }
50
51         constructor(props) {
52                 super(props);
53                 this.handleSvgClick = this.handleSvgClick.bind(this);
54                 this.getSvg = this.getSvg.bind(this);
55                 this.state.loopCache = props.loopCache;
56                 this.state.componentModalMapping = LoopComponentConverter.buildMapOfComponents(props.loopCache);
57                 this.getSvg(props.loopCache.getLoopName());
58         }
59
60         shouldComponentUpdate(nextProps, nextState) {
61                 return this.state.svgContent !== nextState.svgContent;
62         }
63
64         componentWillReceiveProps(newProps) {
65                 this.setState({
66                         loopCache: newProps.loopCache,
67                         componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache),
68
69                 });
70                 this.getSvg(newProps.loopCache.getLoopName());
71         }
72
73         getSvg(loopName) {
74                 if (typeof loopName !== "undefined") {
75                         LoopService.getSvg(loopName).then(svgXml => {
76                                 if (svgXml.length !== 0) {
77                                         this.setState({ svgContent: svgXml })
78                                 } else {
79                                         this.setState({ svgContent: LoopViewSvg.emptySvg })
80                                 }
81                         });
82                 }
83         }
84
85         handleSvgClick(event) {
86                 console.debug("svg click event received");
87                 var elementName = event.target.parentNode.parentNode.parentNode.getAttribute('data-element-id');
88                 console.info("SVG element clicked", elementName);
89                 this.props.history.push(this.state.componentModalMapping.get(elementName));
90         }
91
92         render() {
93                 return (
94                         <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
95
96                         </LoopViewSvgDivStyled>
97                 );
98         }
99 }
100
101 export default withRouter(LoopViewSvg);