/*-
* ============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 { withRouter } from "react-router-dom";
import LoopCache from '../../../api/LoopCache';
import OnapConstant from '../../../utils/OnapConstants';
const DivStyled = styled.div`
overflow-x: scroll;
display: flex;
width: 100%;
height: 100%;
`
const emptySvg = ();
class SvgGenerator extends React.Component {
boxWidth = 200;
boxHeight = 100;
boxSpace = 50;
static GENERATED_FROM_INSTANCE = "INSTANCE";
static GENERATED_FROM_TEMPLATE = "TEMPLATE";
state = {
loopCache: new LoopCache({}),
clickable: false,
generatedFrom: SvgGenerator.GENERATED_FROM_INSTANCE, // INSTANCE / TEMPLATE
}
constructor(props) {
super(props);
this.state.loopCache = props.loopCache;
this.state.clickable = props.clickable;
this.state.generatedFrom = props.generatedFrom;
this.handleSvgClick = this.handleSvgClick.bind(this);
this.renderSvg = this.renderSvg.bind(this);
}
shouldComponentUpdate(nextProps, nextState) {
return this.state.loopCache !== nextProps.loopCache;
}
componentDidUpdate(prevProps) {
if (prevProps.loopCache !== this.props.loopCache) {
this.setState({
loopCache: this.props.loopCache,
});
}
}
handleSvgClick(event) {
console.debug("svg click event received");
if (this.state.clickable) {
var elementName = event.target.parentNode.getAttribute('policyId');
console.info("SVG element clicked", elementName);
// Only allow movement to policy editing IF there busyLoadingCOunt is 0,
// meaning we are not waiting for refreshStatus to complete, for example
if (elementName !== null && !this.props.isBusyLoading()) {
this.props.history.push("/policyModal/"+event.target.parentNode.getAttribute('policyType')+"/"+elementName);
}
}
}
createVesBox (xPos) {
return this.createOneBox(xPos,null,null,'VES Collector','VES',null);
}
createOneArrow(xPos) {
return (
);
}
createBeginCircle(xPos, text) {
return (
);
}
createEndCircle(xPos, text) {
return (
);
}
createOneBox(xPos, policyId, loopElementModelId , name, title, policyType) {
return (
);
}
createSvgFromTemplate() {
const allElements = [];
var xPos = 0;
allElements.push(this.createBeginCircle(xPos,"Start"))
xPos+=(this.boxWidth+this.boxSpace);
allElements.push(this.createOneArrow(xPos-this.boxSpace));
allElements.push(this.createVesBox(xPos));
xPos+=(this.boxWidth+this.boxSpace);
allElements.push(this.createOneArrow(xPos-this.boxSpace));
//createOneBox(xPos, policyId, loopElementModelId , name, title, policyType)
for (var loopElement of this.state.loopCache.getAllLoopElementModels()) {
allElements.push(this.createOneBox(xPos,
loopElement['name'],
loopElement['name'],
loopElement['shortName'],
loopElement['loopElementType'],
loopElement['loopElementType']))
xPos+=(this.boxWidth+this.boxSpace);
allElements.push(this.createOneArrow(xPos-this.boxSpace));
}
allElements.push(this.createEndCircle(xPos, "End"))
xPos+=(this.boxWidth+this.boxSpace);
return allElements;
}
createSvgFromInstance() {
const allElements = [];
var xPos = 0;
allElements.push(this.createBeginCircle(xPos,"Start"))
xPos+=(this.boxWidth+this.boxSpace);
allElements.push(this.createOneArrow(xPos-this.boxSpace));
allElements.push(this.createVesBox(xPos));
xPos+=(this.boxWidth+this.boxSpace);
allElements.push(this.createOneArrow(xPos-this.boxSpace));
for (var msPolicy in this.state.loopCache.getMicroServicePolicies()) {
var loopElementModelName = this.state.loopCache.getMicroServicePolicies()[msPolicy]['loopElementModel'];
if (loopElementModelName !== undefined) {
loopElementModelName = loopElementModelName['name'];
}
allElements.push(this.createOneBox(xPos,
this.state.loopCache.getMicroServicePolicies()[msPolicy]['name'],
loopElementModelName,
this.state.loopCache.getMicroServicePolicies()[msPolicy]['policyModel']['policyAcronym'],
'microservice',
OnapConstant.microServiceType))
xPos+=(this.boxWidth+this.boxSpace);
allElements.push(this.createOneArrow(xPos-this.boxSpace));
}
for (var opPolicy in this.state.loopCache.getOperationalPolicies()) {
loopElementModelName = this.state.loopCache.getOperationalPolicies()[opPolicy]['loopElementModel'];
if (loopElementModelName !== undefined) {
loopElementModelName = loopElementModelName['name'];
}
allElements.push(this.createOneBox(xPos,
this.state.loopCache.getOperationalPolicies()[opPolicy]['name'],
loopElementModelName,
this.state.loopCache.getOperationalPolicies()[opPolicy]['policyModel']['policyAcronym'],
'operational',
OnapConstant.operationalPolicyType))
xPos+=(this.boxWidth+this.boxSpace);
allElements.push(this.createOneArrow(xPos-this.boxSpace));
}
allElements.push(this.createEndCircle(xPos, "End"))
xPos+=(this.boxWidth+this.boxSpace);
return allElements;
}
renderSvg() {
if (this.state.loopCache.getLoopName() === undefined) {
return [emptySvg];
}
if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_INSTANCE) {
return this.createSvgFromInstance();
} else if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_TEMPLATE) {
return this.createSvgFromTemplate();
}
}
render() {
var allTheElements = this.renderSvg();
var svgWidth = this.boxWidth*allTheElements.length;
var svgHeight = this.boxHeight+50;
return (
);
}
}
export default withRouter(SvgGenerator);