2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017 Amdocs
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
12 * http://www.apache.org/licenses/LICENSE-2.0
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=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
23 import React, {Component} from 'react';
25 import ComponentManagerContainer from
26 'generic-components/componentManager/ComponentManagerContainer.jsx';
33 } from 'generic-components/componentManager/ComponentManagerConstants.js';
35 var widthProvider = require('react-grid-layout').WidthProvider;
36 var ReactGridLayout = require('react-grid-layout');
37 ReactGridLayout = widthProvider(ReactGridLayout);
39 export default class ComponentManager extends Component {
43 if (props.layoutType === LAYOUT_STATIC &&
44 Object.keys(props.layoutFormat).length > 0) {
46 layout: props.layoutFormat.layout,
47 panels: props.layoutFormat.panels,
48 containers: props.layoutFormat.containers
57 this.onLayoutChange = this.onLayoutChange.bind(this);
61 containerId, xPos, yPos, width, height, staticLayout = false) {
82 minW: MIN_PANEL_WIDTH,
83 maxW: MAX_PANEL_WIDTH,
84 minH: MIN_PANEL_HEIGHT
90 createPanel(id, title, panelSource, panelProps, actionList) {
100 addNewComponent(compProps, containingContainerId) {
101 let containerId = containingContainerId;
102 let actionsList = [];
104 if (typeof containerId === 'undefined' || containerId === null) {
105 // new component being added isn't associated with a
106 // container yet, so create one
107 containerId = 'container:' + (new Date).getTime();
108 let updatedContainerProps = [];
109 this.state.containers.forEach((containerProps) => {
110 updatedContainerProps.push(containerProps);
112 updatedContainerProps.push(
113 this.createContainer(containerId, 0, Infinity, 12, 2));
114 this.setState({containers: updatedContainerProps});
118 type: 'close', id: containerId, callback: () => {
119 this.removeExistingComponent(containerId);
124 // we are updating a static container with a new panel, add the edit
125 // action so it can be updated moving forward
129 id: containingContainerId,
132 this.props.addPanelCallback(containingContainerId);
138 let updatedPanelProps = [];
139 this.state.panels.forEach((panelProp) => {
140 if (panelProp.id !== containingContainerId) {
141 // add all existing panels except the one with a
142 // matching id (this is an edit scenario, will replace
143 // with new panel below
144 updatedPanelProps.push(panelProp);
147 updatedPanelProps.push(
151 compProps.visualizationSource,
152 compProps.visualizationProps,
154 this.setState({panels: updatedPanelProps});
157 removeExistingComponent(id) {
158 let updatedPanelProps = this.state.panels.filter((panelProp) => {
159 return id !== panelProp.id;
161 this.setState({panels: updatedPanelProps});
163 let updatedContainerProps = this.state.containers.filter(
165 return id !== containerProp.id;
167 this.setState({containers: updatedContainerProps});
170 getLayoutProperties() {
172 layout: this.state.layout,
173 containers: this.state.containers,
174 panels: this.state.panels
178 setLayoutProperties(layoutProperties) {
180 layout: layoutProperties.layout,
181 containers: layoutProperties.containers,
182 panels: layoutProperties.panels
186 fetchMatchingPanel(containerId) {
187 let actionsList = [];
188 let matchingPanel = (
189 <ComponentManagerContainer
190 showHeader={this.props.showHeader}
191 showTitle={this.props.showTitle}
192 showBorder={this.props.showBorder}
193 actions={actionsList}>
194 {'Please select a visualization'}
195 </ComponentManagerContainer>
197 this.state.panels.forEach((panel) => {
198 if (panel.id === containerId) {
199 let GeneratedComponent =
200 this.props.componentPropertiesProvider[panel.source].component.class;
201 let visProps = panel.props;
203 <ComponentManagerContainer
204 showHeader={this.props.showHeader}
205 showTitle={this.props.showTitle}
206 showBorder={this.props.showBorder}
208 actions={panel.actions}>
209 <GeneratedComponent {...visProps}/>
210 </ComponentManagerContainer>
214 return matchingPanel;
217 preparedContainers() {
218 let containersToRender = [];
220 this.state.containers.forEach((container) => {
221 let matchingPanel = this.fetchMatchingPanel(container.id);
223 containersToRender.push(<div key={container.id}
224 data-grid={{...(container.properties)}}>
229 return containersToRender;
232 onLayoutChange(layout) {
233 this.setState({layout: layout});
234 this.props.onLayoutChange(layout);
237 buildStaticContainers(layoutFormat) {
238 let staticContainers = [];
239 let nextRowIndex = 0;
241 layoutFormat.layout.forEach((row) => {
242 let nextColIndex = 0;
243 let currentTallestContainer = 0;
245 row.forEach((col) => {
246 let containerId = 'container:' + nextRowIndex + '-' + nextColIndex;
247 let xPos = nextColIndex;
248 let yPos = nextRowIndex;
249 let width = 12 * col.width;
250 let height = col.height;
252 nextColIndex = nextColIndex + width;
253 currentTallestContainer = Math.max(currentTallestContainer, col.height);
255 staticContainers.push(
256 this.createContainer(
267 nextRowIndex = currentTallestContainer;
270 return staticContainers;
273 componentWillReceiveProps(nextProps) {
274 if (nextProps.layoutFormat !== this.props.layoutFormat) {
275 // layout format being passed in are the containers, panels and layout
276 // for the newly view
278 layout: nextProps.layoutFormat.layout,
279 panels: nextProps.layoutFormat.panels,
280 containers: nextProps.layoutFormat.containers
288 <div className='component-manager'>
290 className='content app-components'
292 onLayoutChange={this.onLayoutChange}
293 layout={this.state.layout}>
294 {this.preparedContainers()}
300 ComponentManager.defaultProps = {
303 onLayoutChange: function () {