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 { withRouter } from "react-router";
  26 import LoopCache from '../../../api/LoopCache'
  27 import LoopService from '../../../api/LoopService'
  28
  29 const LoopViewSvgDivStyled = styled.div`
  30         overflow: hidden;
  31         background-color: ${props => (props.theme.loopViewerBackgroundColor)};
  32         border: 1px solid;
  33         border-color: ${props => (props.theme.loopViewerHeaderColor)};
  34         height: 50%;
  35 `
  36
  37 class LoopViewSvg extends React.Component {
  38
  39         static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
  40         static operationalPolicyDataElementId = "OperationalPolicy";
  41
  42
  43         state = {
  44                 svgContent: LoopViewSvg.emptySvg,
  45                 loopCache: this.props.loopCache,
  46         }
  47
  48         constructor(props) {
  49                 super(props);
  50                 this.state.loopCache = props.loopCache;
  51                 this.handleSvgClick = this.handleSvgClick.bind(this);
  52                 this.getSvg = this.getSvg.bind(this);
  53         }
  54
  55         shouldComponentUpdate(nextProps, nextState) {
  56                 return this.state.svgContent !== nextState.svgContent;
  57         }
  58
  59         componentWillReceiveProps(newProps) {
  60                 this.state.loopCache = newProps.loopCache;
  61                 this.getSvg();
  62         }
  63
  64         getSvg() {
  65                 LoopService.getSvg(this.state.loopCache.getLoopName()).then(svgXml => {
  66                         if (svgXml.length != 0) {
  67                                 this.setState({ svgContent: svgXml })
  68                         } else {
  69                                 this.setState({ svgContent: LoopViewSvg.emptySvg })
  70                         }
  71                 });
  72         }
  73
  74         handleSvgClick(event) {
  75                 console.debug("svg click event received");
  76                 var elementName = event.target.parentNode.parentNode.parentNode.getAttribute('data-element-id');
  77                 console.info("SVG element clicked", elementName);
  78                 if (typeof elementName === "undefined" || elementName === "VES") {
  79                         return;
  80                 } else if (elementName === LoopViewSvg.operationalPolicyDataElementId) {
  81                         this.props.history.push('/operationalPolicyModal');
  82                 } else {
  83                         this.props.history.push('/configurationPolicyModal');
  84                 }
  85         }
  86
  87         render() {
  88                 return (
  89                         <LoopViewSvgDivStyled id="loop_svg" dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
  90
  91                         </LoopViewSvgDivStyled>
  92                 );
  93         }
  94 }
  95
  96 export default withRouter(LoopViewSvg);