2 * ============LICENSE_START===================================================
3 * SPARKY (AAI UI service)
4 * ============================================================================
5 * Copyright © 2017 AT&T Intellectual Property.
6 * Copyright © 2017 Amdocs
8 * ============================================================================
9 * Licensed under the Apache License, Version 2.0 (the "License");
10 * you may not use this file except in compliance with the License.
11 * You may obtain a copy of the License at
13 * http://www.apache.org/licenses/LICENSE-2.0
15 * Unless required by applicable law or agreed to in writing, software
16 * distributed under the License is distributed on an "AS IS" BASIS,
17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18 * See the License for the specific language governing permissions and
19 * limitations under the License.
20 * ============LICENSE_END=====================================================
22 * ECOMP and OpenECOMP are trademarks
23 * and service marks of AT&T Intellectual Property.
26 import React, {Component} from 'react';
28 import ComponentManagerContainer from
29 'generic-components/componentManager/ComponentManagerContainer.jsx';
36 } from 'generic-components/componentManager/ComponentManagerConstants.js';
38 var widthProvider = require('react-grid-layout').WidthProvider;
39 var ReactGridLayout = require('react-grid-layout');
40 ReactGridLayout = widthProvider(ReactGridLayout);
42 export default class ComponentManager extends Component {
46 if (props.layoutType === LAYOUT_STATIC &&
47 Object.keys(props.layoutFormat).length > 0) {
49 layout: props.layoutFormat.layout,
50 panels: props.layoutFormat.panels,
51 containers: props.layoutFormat.containers
60 this.onLayoutChange = this.onLayoutChange.bind(this);
64 containerId, xPos, yPos, width, height, staticLayout = false) {
85 minW: MIN_PANEL_WIDTH,
86 maxW: MAX_PANEL_WIDTH,
87 minH: MIN_PANEL_HEIGHT
93 createPanel(id, title, panelSource, panelProps, actionList) {
103 addNewComponent(compProps, containingContainerId) {
104 let containerId = containingContainerId;
105 let actionsList = [];
107 if (typeof containerId === 'undefined' || containerId === null) {
108 // new component being added isn't associated with a
109 // container yet, so create one
110 containerId = 'container:' + (new Date).getTime();
111 let updatedContainerProps = [];
112 this.state.containers.forEach((containerProps) => {
113 updatedContainerProps.push(containerProps);
115 updatedContainerProps.push(
116 this.createContainer(containerId, 0, Infinity, 12, 2));
117 this.setState({containers: updatedContainerProps});
121 type: 'close', id: containerId, callback: () => {
122 this.removeExistingComponent(containerId);
127 // we are updating a static container with a new panel, add the edit
128 // action so it can be updated moving forward
132 id: containingContainerId,
135 this.props.addPanelCallback(containingContainerId);
141 let updatedPanelProps = [];
142 this.state.panels.forEach((panelProp) => {
143 if (panelProp.id !== containingContainerId) {
144 // add all existing panels except the one with a
145 // matching id (this is an edit scenario, will replace
146 // with new panel below
147 updatedPanelProps.push(panelProp);
150 updatedPanelProps.push(
154 compProps.visualizationSource,
155 compProps.visualizationProps,
157 this.setState({panels: updatedPanelProps});
160 removeExistingComponent(id) {
161 let updatedPanelProps = this.state.panels.filter((panelProp) => {
162 return id !== panelProp.id;
164 this.setState({panels: updatedPanelProps});
166 let updatedContainerProps = this.state.containers.filter(
168 return id !== containerProp.id;
170 this.setState({containers: updatedContainerProps});
173 getLayoutProperties() {
175 layout: this.state.layout,
176 containers: this.state.containers,
177 panels: this.state.panels
181 setLayoutProperties(layoutProperties) {
183 layout: layoutProperties.layout,
184 containers: layoutProperties.containers,
185 panels: layoutProperties.panels
189 fetchMatchingPanel(containerId) {
190 let actionsList = [];
191 let matchingPanel = (
192 <ComponentManagerContainer
193 showHeader={this.props.showHeader}
194 showTitle={this.props.showTitle}
195 showBorder={this.props.showBorder}
196 actions={actionsList}>
197 {'Please select a visualization'}
198 </ComponentManagerContainer>
200 this.state.panels.forEach((panel) => {
201 if (panel.id === containerId) {
202 let GeneratedComponent =
203 this.props.componentPropertiesProvider[panel.source].component.class;
204 let visProps = panel.props;
206 <ComponentManagerContainer
207 showHeader={this.props.showHeader}
208 showTitle={this.props.showTitle}
209 showBorder={this.props.showBorder}
211 actions={panel.actions}>
212 <GeneratedComponent {...visProps}/>
213 </ComponentManagerContainer>
217 return matchingPanel;
220 preparedContainers() {
221 let containersToRender = [];
223 this.state.containers.forEach((container) => {
224 let matchingPanel = this.fetchMatchingPanel(container.id);
226 containersToRender.push(<div key={container.id}
227 data-grid={{...(container.properties)}}>
232 return containersToRender;
235 onLayoutChange(layout) {
236 this.setState({layout: layout});
237 this.props.onLayoutChange(layout);
240 buildStaticContainers(layoutFormat) {
241 let staticContainers = [];
242 let nextRowIndex = 0;
244 layoutFormat.layout.forEach((row) => {
245 let nextColIndex = 0;
246 let currentTallestContainer = 0;
248 row.forEach((col) => {
249 let containerId = 'container:' + nextRowIndex + '-' + nextColIndex;
250 let xPos = nextColIndex;
251 let yPos = nextRowIndex;
252 let width = 12 * col.width;
253 let height = col.height;
255 nextColIndex = nextColIndex + width;
256 currentTallestContainer = Math.max(currentTallestContainer, col.height);
258 staticContainers.push(
259 this.createContainer(
270 nextRowIndex = currentTallestContainer;
273 return staticContainers;
276 componentWillReceiveProps(nextProps) {
277 if (nextProps.layoutFormat !== this.props.layoutFormat) {
278 // layout format being passed in are the containers, panels and layout
279 // for the newly view
281 layout: nextProps.layoutFormat.layout,
282 panels: nextProps.layoutFormat.panels,
283 containers: nextProps.layoutFormat.containers
291 <div className='component-manager'>
293 className='content app-components'
295 onLayoutChange={this.onLayoutChange}
296 layout={this.state.layout}>
297 {this.preparedContainers()}
303 ComponentManager.defaultProps = {
306 onLayoutChange: function () {