2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017-2018 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 import React, {Component} from 'react';
23 import ComponentManagerContainer from
24 'generic-components/componentManager/ComponentManagerContainer.jsx';
31 } from 'generic-components/componentManager/ComponentManagerConstants.js';
33 var widthProvider = require('react-grid-layout').WidthProvider;
34 var ReactGridLayout = require('react-grid-layout');
35 ReactGridLayout = widthProvider(ReactGridLayout);
37 export default class ComponentManager extends Component {
41 if (props.layoutType === LAYOUT_STATIC &&
42 Object.keys(props.layoutFormat).length > 0) {
44 layout: props.layoutFormat.layout,
45 panels: props.layoutFormat.panels,
46 containers: props.layoutFormat.containers
55 this.onLayoutChange = this.onLayoutChange.bind(this);
59 containerId, xPos, yPos, width, height, staticLayout = false) {
80 minW: MIN_PANEL_WIDTH,
81 maxW: MAX_PANEL_WIDTH,
82 minH: MIN_PANEL_HEIGHT
88 createPanel(id, title, panelSource, panelProps, actionList) {
98 addNewComponent(compProps, containingContainerId) {
99 let containerId = containingContainerId;
100 let actionsList = [];
102 if (typeof containerId === 'undefined' || containerId === null) {
103 // new component being added isn't associated with a
104 // container yet, so create one
105 containerId = 'container:' + (new Date).getTime();
106 let updatedContainerProps = [];
107 this.state.containers.forEach((containerProps) => {
108 updatedContainerProps.push(containerProps);
110 updatedContainerProps.push(
111 this.createContainer(containerId, 0, Infinity, 12, 2));
112 this.setState({containers: updatedContainerProps});
116 type: 'close', id: containerId, callback: () => {
117 this.removeExistingComponent(containerId);
122 // we are updating a static container with a new panel, add the edit
123 // action so it can be updated moving forward
127 id: containingContainerId,
130 this.props.addPanelCallback(containingContainerId);
136 let updatedPanelProps = [];
137 this.state.panels.forEach((panelProp) => {
138 if (panelProp.id !== containingContainerId) {
139 // add all existing panels except the one with a
140 // matching id (this is an edit scenario, will replace
141 // with new panel below
142 updatedPanelProps.push(panelProp);
145 updatedPanelProps.push(
149 compProps.visualizationSource,
150 compProps.visualizationProps,
152 this.setState({panels: updatedPanelProps});
155 removeExistingComponent(id) {
156 let updatedPanelProps = this.state.panels.filter((panelProp) => {
157 return id !== panelProp.id;
159 this.setState({panels: updatedPanelProps});
161 let updatedContainerProps = this.state.containers.filter(
163 return id !== containerProp.id;
165 this.setState({containers: updatedContainerProps});
168 getLayoutProperties() {
170 layout: this.state.layout,
171 containers: this.state.containers,
172 panels: this.state.panels
176 setLayoutProperties(layoutProperties) {
178 layout: layoutProperties.layout,
179 containers: layoutProperties.containers,
180 panels: layoutProperties.panels
184 fetchMatchingPanel(containerId) {
185 let actionsList = [];
186 let matchingPanel = (
187 <ComponentManagerContainer
188 showHeader={this.props.showHeader}
189 showTitle={this.props.showTitle}
190 showBorder={this.props.showBorder}
191 actions={actionsList}>
192 {'Please select a visualization'}
193 </ComponentManagerContainer>
195 this.state.panels.forEach((panel) => {
196 if (panel.id === containerId) {
197 let GeneratedComponent =
198 this.props.componentPropertiesProvider[panel.source].component.class;
199 let visProps = panel.props;
201 <ComponentManagerContainer
202 showHeader={this.props.showHeader}
203 showTitle={this.props.showTitle}
204 showBorder={this.props.showBorder}
206 actions={panel.actions}>
207 <GeneratedComponent {...visProps}/>
208 </ComponentManagerContainer>
212 return matchingPanel;
215 preparedContainers() {
216 let containersToRender = [];
218 this.state.containers.forEach((container) => {
219 let matchingPanel = this.fetchMatchingPanel(container.id);
221 containersToRender.push(<div key={container.id}
222 data-grid={{...(container.properties)}}>
227 return containersToRender;
230 onLayoutChange(layout) {
231 this.setState({layout: layout});
232 this.props.onLayoutChange(layout);
235 buildStaticContainers(layoutFormat) {
236 let staticContainers = [];
237 let nextRowIndex = 0;
239 layoutFormat.layout.forEach((row) => {
240 let nextColIndex = 0;
241 let currentTallestContainer = 0;
243 row.forEach((col) => {
244 let containerId = 'container:' + nextRowIndex + '-' + nextColIndex;
245 let xPos = nextColIndex;
246 let yPos = nextRowIndex;
247 let width = 12 * col.width;
248 let height = col.height;
250 nextColIndex = nextColIndex + width;
251 currentTallestContainer = Math.max(currentTallestContainer, col.height);
253 staticContainers.push(
254 this.createContainer(
265 nextRowIndex = currentTallestContainer;
268 return staticContainers;
271 componentWillReceiveProps(nextProps) {
272 if (nextProps.layoutFormat !== this.props.layoutFormat) {
273 // layout format being passed in are the containers, panels and layout
274 // for the newly view
276 layout: nextProps.layoutFormat.layout,
277 panels: nextProps.layoutFormat.panels,
278 containers: nextProps.layoutFormat.containers
286 <div className='component-manager'>
288 className='content app-components'
290 onLayoutChange={this.onLayoutChange}
291 layout={this.state.layout}>
292 {this.preparedContainers()}
298 ComponentManager.defaultProps = {
301 onLayoutChange: function () {