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';
24 import {connect} from 'react-redux';
31 import {VerticalFilterBar} from 'vertical-filter-bar';
32 import {CollapsibleSlidingPanel} from 'collapsible-sliding-panel';
34 import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
39 VNF_SEARCH_FILTER_NAME
40 } from 'app/vnfSearch/VnfSearchConstants.js';
43 processVnfVisualizationsOnFilterChange,
44 processVnfFilterPanelCollapse,
47 } from 'app/vnfSearch/VnfSearchActions.js';
49 import VnfSearchOrchStatusVisualizations from 'app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx';
50 import VnfSearchProvStatusVisualizations from 'app/vnfSearch/VnfSearchProvStatusVisualization.jsx';
51 import VnfSearchNfTypeVisualizations from 'app/vnfSearch/VnfSearchNfTypeVisualization.jsx';
52 import VnfSearchNfRoleVisualizations from 'app/vnfSearch/VnfSearchNfRoleVisualization.jsx';
53 import VnfSearchTotalCountVisualization from 'app/vnfSearch/VnfSearchTotalCountVisualization.jsx';
54 import i18n from 'utils/i18n/i18n';
55 import {changeUrlAddress, buildRouteObjWithFilters} from 'utils/Routes.js';
59 processFilterSelection,
62 setNonConvertedFilterValues,
63 setFilterSelectionsToDefaults,
64 convertNonConvertedValues
65 } from 'filter-bar-utils';
68 globalInlineMessageBarActionTypes
69 } from 'app/globalInlineMessageBar/GlobalInlineMessageBarConstants.js';
74 } from 'utils/GlobalConstants.js';
76 const mapStateToProps = ({vnfSearch}) => {
79 feedbackMsgSeverity = '',
81 selectedFilterValues = {},
83 vnfVisualizationPanelClass = 'collapsible-panel-main-panel',
84 unifiedFilterValues = {},
85 nonConvertedFilters = {}
94 vnfVisualizationPanelClass,
100 let mapActionToProps = (dispatch) => {
102 onSetViewTitle: (title) => {
103 dispatch(setSecondaryTitle(title));
105 onInitializeVnfSearchFilters: () => {
106 // first time to the page, need to get the list of available filters
107 dispatch(getUnifiedFilters(UNIFIED_FILTERS_URL, VNF_SEARCH_FILTER_NAME,
108 vnfActionTypes.VNF_SEARCH_FILTERS_RECEIVED, globalInlineMessageBarActionTypes.SET_GLOBAL_MESSAGE));
110 onFilterPanelCollapse: (isOpen) => {
111 // expand/collapse the filter panel
112 dispatch(processVnfFilterPanelCollapse(isOpen));
114 onFilterSelection: (selectedFilters, allFilters) => {
115 // callback for filter bar whenever a selection is made... need to
116 // convert and save the selected value(s)
117 if (Object.keys(allFilters).length > 0) {
118 // only process the selection if allFilters has values (possible that
119 // filter bar is sending back the default filter selections before
120 // we have received the list of available filters i.e. allFilters)
121 dispatch(processFilterSelection(filterBarActionTypes.NEW_SELECTIONS, selectedFilters, allFilters));
124 onFilterValueChange: (convertedFilterValues) => {
125 // filter values have been converted, now update the VNF visualizations
126 dispatch(processVnfVisualizationsOnFilterChange(convertedFilterValues));
128 onReceiveNewFilterValueParams: (filterValueString) => {
129 // new filter values have been received as URL parameters, save the
130 // non-converted values (later to be converted and sent to filter bar)
131 // and update the VNF visualizations
132 let filterValueMap = buildFilterValueMap(filterValueString);
134 dispatch(setNonConvertedFilterValues(filterBarActionTypes.SET_NON_CONVERTED_VALUES, filterValueMap));
135 dispatch(processVnfVisualizationsOnFilterChange(filterValueMap));
137 // incase url param was changed manually, need to update vnfFilterValues
139 onResetFilterBarToDefaults: (filters, filterValues) => {
140 dispatch(setFilterSelectionsToDefaults(filterBarActionTypes.SET_UNIFIED_VALUES,
141 filterBarActionTypes.SET_NON_CONVERTED_VALUES, filters, filterValues));
143 onPrepareToUnmount: () => {
145 // 1- clear the VNF data
146 // 2- ensure filter bar is closed
147 dispatch(clearVnfSearchData());
148 dispatch(processVnfFilterPanelCollapse(false));
150 onConvertFilterValues: (nonConvertedValues, allFilters, currentlySetFilterValues) => {
151 // we have saved non-converted filter values received from URL params,
152 // time to convert them so can update filter bar selections programatically
153 dispatch(convertNonConvertedValues(filterBarActionTypes.SET_CONVERTED_VALUES, nonConvertedValues,
154 allFilters, currentlySetFilterValues));
156 onMessageStateChange: (msgText, msgSeverity) => {
157 dispatch(setNotificationText(msgText, msgSeverity));
162 class vnfSearch extends Component {
164 feedbackMsgText: React.PropTypes.string,
165 feedbackSeverity: React.PropTypes.string,
166 vnfFilters: React.PropTypes.object,
167 selectedFilterValues: React.PropTypes.object,
168 vnfFilterValues: React.PropTypes.object,
169 vnfVisualizationPanelClass: React.PropTypes.string,
170 unifiedFilterValues: React.PropTypes.object,
171 nonConvertedFilters: React.PropTypes.object
174 componentWillMount() {
175 this.props.onSetViewTitle(i18n(VNF_TITLE));
176 this.props.onInitializeVnfSearchFilters();
178 if (this.props.match &&
179 this.props.match.params &&
180 this.props.match.params.filters) {
181 this.props.onReceiveNewFilterValueParams(this.props.match.params.filters);
184 if (this.props.feedbackMsgText) {
185 this.props.onMessageStateChange(this.props.feedbackMsgText,
186 this.props.feedbackMsgSeverity);
190 componentWillReceiveProps(nextProps) {
191 if (nextProps.feedbackMsgText && nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
192 this.props.onMessageStateChange(nextProps.feedbackMsgText, nextProps.feedbackMsgSeverity);
195 if (nextProps.vnfFilterValues && !isEqual(nextProps.vnfFilterValues, this.props.vnfFilterValues) &&
196 this.props.vnfFilters) {
197 this.props.onFilterValueChange(nextProps.vnfFilterValues);
198 changeUrlAddress(buildRouteObjWithFilters(VNFS_ROUTE, nextProps.vnfFilterValues), this.props.history);
201 if (nextProps.match &&
202 nextProps.match.params &&
203 nextProps.match.params.filters &&
204 !isEqual(nextProps.match.params.filters, this.props.match.params.filters)) {
205 // added line below to reload the filters if filter changes, this will load new filters
206 this.props.onInitializeVnfSearchFilters();
207 this.props.onReceiveNewFilterValueParams(nextProps.match.params.filters);
208 } else if (Object.keys(nextProps.nonConvertedFilters).length > 0 &&
209 !isEqual(this.props.nonConvertedFilters, nextProps.nonConvertedFilters)) {
210 if (Object.keys(this.props.vnfFilters).length > 0) {
211 this.props.onConvertFilterValues(nextProps.nonConvertedFilters, this.props.vnfFilters,
212 this.props.vnfFilterValues);
214 } else if ((!nextProps.match || !nextProps.match.params || !nextProps.match.params.filters) &&
215 this.props.match.params.filters && this.props.vnfFilters && this.props.vnfFilterValues) {
216 // VNF Search navigation button was pressed while the view is still visible ... need to reset
217 // the filter bar selections to the default values
218 this.props.onResetFilterBarToDefaults(this.props.vnfFilters, this.props.vnfFilterValues);
221 if (nextProps.vnfFilters && !isEqual(nextProps.vnfFilters, this.props.vnfFilters) &&
222 Object.keys(this.props.nonConvertedFilters).length > 0) {
223 // just received list of available filters and there is are nonConvertedFilters (previously
224 // set from url params), need to convert those values and update the filter bar selections
226 this.props.onConvertFilterValues(this.props.nonConvertedFilters, nextProps.vnfFilters,
227 this.props.vnfFilterValues);
229 } else if (nextProps.vnfFilters && !isEqual(nextProps.vnfFilters, this.props.vnfFilters) &&
230 isEmpty(this.props.vnfFilterValues)) {
231 // filter bar previously returned the default filter selections (but we didn't have the list
232 // of available filters at the time, so couldn't do anything. Now receiving the list of
233 // available filters, so triger the filter selection action in order to load the visualization data
234 this.props.onResetFilterBarToDefaults(nextProps.vnfFilters, this.props.vnfFilterValues);
238 componentWillUnmount() {
239 // set the data to 'NO DATA' so upon return, the view is rendered with
240 // no data until the request for new data is returned
241 this.props.onPrepareToUnmount();
247 filtersConfig={this.props.vnfFilters}
248 filterValues={this.props.unifiedFilterValues}
249 filterTitle={FilterBarConstants.FILTER_BAR_TITLE}
250 onFilterChange={(selectedFilters) =>
251 this.props.onFilterSelection(selectedFilters, this.props.vnfFilters)} /> );
255 let filterBar = this.getFilterBar();
258 <div className='view-container'>
259 <CollapsibleSlidingPanel
260 slidingPanelClassName='collapsible-sliding-panel'
261 slidingPanelClosedClassName='collapsible-sliding-panel-is-closed'
262 expanderHandleClassName='collapsible-sliding-panel-expander'
263 slidingPanelContent={filterBar}>
264 <div className={this.props.vnfVisualizationPanelClass}>
265 <VnfSearchTotalCountVisualization />
266 <VnfSearchProvStatusVisualizations />
267 <VnfSearchOrchStatusVisualizations />
268 <VnfSearchNfTypeVisualizations />
269 <VnfSearchNfRoleVisualizations />
271 </CollapsibleSlidingPanel>
276 export default connect(mapStateToProps, mapActionToProps)(vnfSearch);