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';
22 import {connect} from 'react-redux';
29 import {VerticalFilterBar} from 'vertical-filter-bar';
30 import {CollapsibleSlidingPanel} from 'collapsible-sliding-panel';
32 import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
37 VNF_SEARCH_FILTER_NAME
38 } from 'app/vnfSearch/VnfSearchConstants.js';
41 processVnfVisualizationsOnFilterChange,
42 processVnfFilterPanelCollapse,
45 } from 'app/vnfSearch/VnfSearchActions.js';
47 import VnfSearchOrchStatusVisualizations from 'app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx';
48 import VnfSearchProvStatusVisualizations from 'app/vnfSearch/VnfSearchProvStatusVisualization.jsx';
49 import VnfSearchNfTypeVisualizations from 'app/vnfSearch/VnfSearchNfTypeVisualization.jsx';
50 import VnfSearchNfRoleVisualizations from 'app/vnfSearch/VnfSearchNfRoleVisualization.jsx';
51 import VnfSearchTotalCountVisualization from 'app/vnfSearch/VnfSearchTotalCountVisualization.jsx';
52 import i18n from 'utils/i18n/i18n';
53 import {changeUrlAddress, buildRouteObjWithFilters} from 'utils/Routes.js';
57 processFilterSelection,
60 setNonConvertedFilterValues,
61 setFilterSelectionsToDefaults,
62 convertNonConvertedValues
63 } from 'filter-bar-utils';
66 globalInlineMessageBarActionTypes
67 } from 'app/globalInlineMessageBar/GlobalInlineMessageBarConstants.js';
72 } from 'utils/GlobalConstants.js';
74 const mapStateToProps = ({vnfSearch}) => {
77 feedbackMsgSeverity = '',
79 selectedFilterValues = {},
81 vnfVisualizationPanelClass = 'collapsible-panel-main-panel',
82 unifiedFilterValues = {},
83 nonConvertedFilters = {}
92 vnfVisualizationPanelClass,
98 let mapActionToProps = (dispatch) => {
100 onSetViewTitle: (title) => {
101 dispatch(setSecondaryTitle(title));
103 onInitializeVnfSearchFilters: () => {
104 // first time to the page, need to get the list of available filters
105 dispatch(getUnifiedFilters(UNIFIED_FILTERS_URL, VNF_SEARCH_FILTER_NAME,
106 vnfActionTypes.VNF_SEARCH_FILTERS_RECEIVED, globalInlineMessageBarActionTypes.SET_GLOBAL_MESSAGE));
108 onFilterPanelCollapse: (isOpen) => {
109 // expand/collapse the filter panel
110 dispatch(processVnfFilterPanelCollapse(isOpen));
112 onFilterSelection: (selectedFilters, allFilters) => {
113 // callback for filter bar whenever a selection is made... need to
114 // convert and save the selected value(s)
115 if (Object.keys(allFilters).length > 0) {
116 // only process the selection if allFilters has values (possible that
117 // filter bar is sending back the default filter selections before
118 // we have received the list of available filters i.e. allFilters)
119 dispatch(processFilterSelection(filterBarActionTypes.NEW_SELECTIONS, selectedFilters, allFilters));
122 onFilterValueChange: (convertedFilterValues) => {
123 // filter values have been converted, now update the VNF visualizations
124 dispatch(processVnfVisualizationsOnFilterChange(convertedFilterValues));
126 onReceiveNewFilterValueParams: (filterValueString) => {
127 // new filter values have been received as URL parameters, save the
128 // non-converted values (later to be converted and sent to filter bar)
129 // and update the VNF visualizations
130 let filterValueMap = buildFilterValueMap(filterValueString);
132 dispatch(setNonConvertedFilterValues(filterBarActionTypes.SET_NON_CONVERTED_VALUES, filterValueMap));
133 dispatch(processVnfVisualizationsOnFilterChange(filterValueMap));
135 // incase url param was changed manually, need to update vnfFilterValues
137 onResetFilterBarToDefaults: (filters, filterValues) => {
138 dispatch(setFilterSelectionsToDefaults(filterBarActionTypes.SET_UNIFIED_VALUES,
139 filterBarActionTypes.SET_NON_CONVERTED_VALUES, filters, filterValues));
141 onPrepareToUnmount: () => {
143 // 1- clear the VNF data
144 // 2- ensure filter bar is closed
145 dispatch(clearVnfSearchData());
146 dispatch(processVnfFilterPanelCollapse(false));
148 onConvertFilterValues: (nonConvertedValues, allFilters, currentlySetFilterValues) => {
149 // we have saved non-converted filter values received from URL params,
150 // time to convert them so can update filter bar selections programatically
151 dispatch(convertNonConvertedValues(filterBarActionTypes.SET_CONVERTED_VALUES, nonConvertedValues,
152 allFilters, currentlySetFilterValues));
154 onMessageStateChange: (msgText, msgSeverity) => {
155 dispatch(setNotificationText(msgText, msgSeverity));
160 export class vnfSearch extends Component {
162 feedbackMsgText: React.PropTypes.string,
163 feedbackSeverity: React.PropTypes.string,
164 vnfFilters: React.PropTypes.object,
165 selectedFilterValues: React.PropTypes.object,
166 vnfFilterValues: React.PropTypes.object,
167 vnfVisualizationPanelClass: React.PropTypes.string,
168 unifiedFilterValues: React.PropTypes.object,
169 nonConvertedFilters: React.PropTypes.object
172 componentWillMount() {
173 this.props.onSetViewTitle(i18n(VNF_TITLE));
174 this.props.onInitializeVnfSearchFilters();
176 if (this.props.match &&
177 this.props.match.params &&
178 this.props.match.params.filters) {
179 this.props.onReceiveNewFilterValueParams(this.props.match.params.filters);
182 if (this.props.feedbackMsgText) {
183 this.props.onMessageStateChange(this.props.feedbackMsgText,
184 this.props.feedbackMsgSeverity);
188 componentWillReceiveProps(nextProps) {
189 if (nextProps.feedbackMsgText && nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
190 this.props.onMessageStateChange(nextProps.feedbackMsgText, nextProps.feedbackMsgSeverity);
193 if (nextProps.vnfFilterValues && !isEqual(nextProps.vnfFilterValues, this.props.vnfFilterValues) &&
194 this.props.vnfFilters) {
195 this.props.onFilterValueChange(nextProps.vnfFilterValues);
196 changeUrlAddress(buildRouteObjWithFilters(VNFS_ROUTE, nextProps.vnfFilterValues), this.props.history);
199 if (nextProps.match &&
200 nextProps.match.params &&
201 nextProps.match.params.filters &&
202 !isEqual(nextProps.match.params.filters, this.props.match.params.filters)) {
203 // added line below to reload the filters if filter changes, this will load new filters
204 this.props.onInitializeVnfSearchFilters();
205 this.props.onReceiveNewFilterValueParams(nextProps.match.params.filters);
206 } else if (Object.keys(nextProps.nonConvertedFilters).length > 0 &&
207 !isEqual(this.props.nonConvertedFilters, nextProps.nonConvertedFilters)) {
208 if (Object.keys(this.props.vnfFilters).length > 0) {
209 this.props.onConvertFilterValues(nextProps.nonConvertedFilters, this.props.vnfFilters,
210 this.props.vnfFilterValues);
212 } else if ((!nextProps.match || !nextProps.match.params || !nextProps.match.params.filters) &&
213 this.props.match.params.filters && this.props.vnfFilters && this.props.vnfFilterValues) {
214 // VNF Search navigation button was pressed while the view is still visible ... need to reset
215 // the filter bar selections to the default values
216 this.props.onResetFilterBarToDefaults(this.props.vnfFilters, this.props.vnfFilterValues);
219 if (nextProps.vnfFilters && !isEqual(nextProps.vnfFilters, this.props.vnfFilters) &&
220 Object.keys(this.props.nonConvertedFilters).length > 0) {
221 // just received list of available filters and there is are nonConvertedFilters (previously
222 // set from url params), need to convert those values and update the filter bar selections
224 this.props.onConvertFilterValues(this.props.nonConvertedFilters, nextProps.vnfFilters,
225 this.props.vnfFilterValues);
227 } else if (nextProps.vnfFilters && !isEqual(nextProps.vnfFilters, this.props.vnfFilters) &&
228 isEmpty(this.props.vnfFilterValues)) {
229 // filter bar previously returned the default filter selections (but we didn't have the list
230 // of available filters at the time, so couldn't do anything. Now receiving the list of
231 // available filters, so triger the filter selection action in order to load the visualization data
232 this.props.onResetFilterBarToDefaults(nextProps.vnfFilters, this.props.vnfFilterValues);
236 componentWillUnmount() {
237 // set the data to 'NO DATA' so upon return, the view is rendered with
238 // no data until the request for new data is returned
239 this.props.onPrepareToUnmount();
245 filtersConfig={this.props.vnfFilters}
246 filterValues={this.props.unifiedFilterValues}
247 filterTitle={FilterBarConstants.FILTER_BAR_TITLE}
248 onFilterChange={(selectedFilters) =>
249 this.props.onFilterSelection(selectedFilters, this.props.vnfFilters)} /> );
253 let filterBar = this.getFilterBar();
256 <div className='view-container'>
257 <CollapsibleSlidingPanel
258 slidingPanelClassName='collapsible-sliding-panel'
259 slidingPanelClosedClassName='collapsible-sliding-panel-is-closed'
260 expanderHandleClassName='collapsible-sliding-panel-expander'
261 slidingPanelContent={filterBar}>
262 <div className={this.props.vnfVisualizationPanelClass}>
263 <VnfSearchTotalCountVisualization />
264 <VnfSearchProvStatusVisualizations />
265 <VnfSearchOrchStatusVisualizations />
266 <VnfSearchNfTypeVisualizations />
267 <VnfSearchNfRoleVisualizations />
269 </CollapsibleSlidingPanel>
274 export default connect(mapStateToProps, mapActionToProps)(vnfSearch);