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-dom";
  27 import LoopService from '../../../api/LoopService';
  28 import LoopComponentConverter from './LoopComponentConverter';
  29
  30 const LoopViewSvgDivStyled = styled.svg`
  31         display: flex;
  32         flex-direction: row;
  33         overflow-x: scroll;
  34         background-color: ${props => (props.theme.loopViewerBackgroundColor)};
  35         border: 1px solid;
  36         border-color: ${props => (props.theme.loopViewerHeaderColor)};
  37         margin-top: 1em;
  38         margin-left: auto;
  39         margin-right:auto;
  40         margin-bottom: -3em;
  41         align-items: center;
  42         height: 100%;
  43         width: 100%;
  44
  45 `
  46
  47 class LoopViewSvg extends React.Component {
  48
  49         static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
  50
  51         state = {
  52                 svgContent: LoopViewSvg.emptySvg,
  53                 loopCache: new LoopCache({}),
  54                 componentModalMapping: new Map([])
  55         }
  56
  57         constructor(props) {
  58                 super(props);
  59                 this.handleSvgClick = this.handleSvgClick.bind(this);
  60                 this.getSvg = this.getSvg.bind(this);
  61                 this.state.loopCache = props.loopCache;
  62                 this.state.componentModalMapping = LoopComponentConverter.buildMapOfComponents(props.loopCache);
  63                 this.getSvg(props.loopCache.getLoopName());
  64         }
  65
  66         shouldComponentUpdate(nextProps, nextState) {
  67                 return this.state.svgContent !== nextState.svgContent;
  68         }
  69
  70         componentWillReceiveProps(newProps) {
  71                 if (this.state.loopCache !== newProps.loopCache) {
  72                         this.setState({
  73                                 loopCache: newProps.loopCache,
  74                                 componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache)
  75                         });
  76                         this.getSvg(newProps.loopCache.getLoopName());
  77                 }
  78         }
  79
  80         getSvg(loopName) {
  81                 if (typeof loopName !== "undefined") {
  82                         LoopService.getSvg(loopName).then(svgXml => {
  83                                 if (svgXml.length !== 0) {
  84                                         this.setState({ svgContent: svgXml })
  85                                 } else {
  86                                         this.setState({ svgContent: LoopViewSvg.emptySvg })
  87                                 }
  88                         });
  89                 } else {
  90                         this.setState({ svgContent: LoopViewSvg.emptySvg })
  91                 }
  92         }
  93
  94         handleSvgClick(event) {
  95                 console.debug("svg click event received");
  96                 var elementName = event.target.parentNode.parentNode.parentNode.getAttribute('data-element-id');
  97                 console.info("SVG element clicked", elementName);
  98                 this.props.history.push(this.state.componentModalMapping.get(elementName));
  99         }
 100
 101         render() {
 102                 return (
 103                         <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
 104
 105                         </LoopViewSvgDivStyled>
 106                 );
 107         }
 108 }
 109
 110 export default withRouter(LoopViewSvg);