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 { PropTypes } from 'prop-types';
23 import {connect} from 'react-redux';
30 import {VerticalFilterBar} from 'vertical-filter-bar';
31 import {CollapsibleSlidingPanel} from 'collapsible-sliding-panel';
33 import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
38 VNF_SEARCH_FILTER_NAME
39 } from 'app/vnfSearch/VnfSearchConstants.js';
42 processVnfVisualizationsOnFilterChange,
43 processVnfFilterPanelCollapse,
46 } from 'app/vnfSearch/VnfSearchActions.js';
48 import VnfSearchOrchStatusVisualizations from 'app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx';
49 import VnfSearchProvStatusVisualizations from 'app/vnfSearch/VnfSearchProvStatusVisualization.jsx';
50 import VnfSearchNfTypeVisualizations from 'app/vnfSearch/VnfSearchNfTypeVisualization.jsx';
51 import VnfSearchNfRoleVisualizations from 'app/vnfSearch/VnfSearchNfRoleVisualization.jsx';
52 import VnfSearchTotalCountVisualization from 'app/vnfSearch/VnfSearchTotalCountVisualization.jsx';
53 import i18n from 'utils/i18n/i18n';
54 import {changeUrlAddress, buildRouteObjWithFilters} from 'utils/Routes.js';
58 processFilterSelection,
61 setNonConvertedFilterValues,
62 setFilterSelectionsToDefaults,
63 convertNonConvertedValues
64 } from 'filter-bar-utils';
67 globalInlineMessageBarActionTypes
68 } from 'app/globalInlineMessageBar/GlobalInlineMessageBarConstants.js';
73 } from 'utils/GlobalConstants.js';
75 const mapStateToProps = ({vnfSearch}) => {
78 feedbackMsgSeverity = '',
80 selectedFilterValues = {},
82 vnfVisualizationPanelClass = 'collapsible-panel-main-panel',
83 unifiedFilterValues = {},
84 nonConvertedFilters = {}
93 vnfVisualizationPanelClass,
99 let mapActionToProps = (dispatch) => {
101 onSetViewTitle: (title) => {
102 dispatch(setSecondaryTitle(title));
104 onInitializeVnfSearchFilters: () => {
105 // first time to the page, need to get the list of available filters
106 dispatch(getUnifiedFilters(UNIFIED_FILTERS_URL, VNF_SEARCH_FILTER_NAME,
107 vnfActionTypes.VNF_SEARCH_FILTERS_RECEIVED, globalInlineMessageBarActionTypes.SET_GLOBAL_MESSAGE));
109 onFilterPanelCollapse: (isOpen) => {
110 // expand/collapse the filter panel
111 dispatch(processVnfFilterPanelCollapse(isOpen));
113 onFilterSelection: (selectedFilters, allFilters) => {
114 // callback for filter bar whenever a selection is made... need to
115 // convert and save the selected value(s)
116 if (Object.keys(allFilters).length > 0) {
117 // only process the selection if allFilters has values (possible that
118 // filter bar is sending back the default filter selections before
119 // we have received the list of available filters i.e. allFilters)
120 dispatch(processFilterSelection(filterBarActionTypes.NEW_SELECTIONS, selectedFilters, allFilters));
123 onFilterValueChange: (convertedFilterValues) => {
124 // filter values have been converted, now update the VNF visualizations
125 dispatch(processVnfVisualizationsOnFilterChange(convertedFilterValues));
127 onReceiveNewFilterValueParams: (filterValueString) => {
128 // new filter values have been received as URL parameters, save the
129 // non-converted values (later to be converted and sent to filter bar)
130 // and update the VNF visualizations
131 let filterValueMap = buildFilterValueMap(filterValueString);
133 dispatch(setNonConvertedFilterValues(filterBarActionTypes.SET_NON_CONVERTED_VALUES, filterValueMap));
134 dispatch(processVnfVisualizationsOnFilterChange(filterValueMap));
136 // incase url param was changed manually, need to update vnfFilterValues
138 onResetFilterBarToDefaults: (filters, filterValues) => {
139 dispatch(setFilterSelectionsToDefaults(filterBarActionTypes.SET_UNIFIED_VALUES,
140 filterBarActionTypes.SET_NON_CONVERTED_VALUES, filters, filterValues));
142 onPrepareToUnmount: () => {
144 // 1- clear the VNF data
145 // 2- ensure filter bar is closed
146 dispatch(clearVnfSearchData());
147 dispatch(processVnfFilterPanelCollapse(false));
149 onConvertFilterValues: (nonConvertedValues, allFilters, currentlySetFilterValues) => {
150 // we have saved non-converted filter values received from URL params,
151 // time to convert them so can update filter bar selections programatically
152 dispatch(convertNonConvertedValues(filterBarActionTypes.SET_CONVERTED_VALUES, nonConvertedValues,
153 allFilters, currentlySetFilterValues));
155 onMessageStateChange: (msgText, msgSeverity) => {
156 dispatch(setNotificationText(msgText, msgSeverity));
161 export class vnfSearch extends Component {
163 feedbackMsgText: PropTypes.string,
164 feedbackSeverity: PropTypes.string,
165 vnfFilters: PropTypes.object,
166 selectedFilterValues: PropTypes.object,
167 vnfFilterValues: PropTypes.object,
168 vnfVisualizationPanelClass: PropTypes.string,
169 unifiedFilterValues: PropTypes.object,
170 nonConvertedFilters: PropTypes.object
173 componentWillMount() {
174 this.props.onSetViewTitle(i18n(VNF_TITLE));
175 this.props.onInitializeVnfSearchFilters();
177 if (this.props.match &&
178 this.props.match.params &&
179 this.props.match.params.filters) {
180 this.props.onReceiveNewFilterValueParams(this.props.match.params.filters);
183 if (this.props.feedbackMsgText) {
184 this.props.onMessageStateChange(this.props.feedbackMsgText,
185 this.props.feedbackMsgSeverity);
189 componentWillReceiveProps(nextProps) {
190 if (nextProps.feedbackMsgText && nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
191 this.props.onMessageStateChange(nextProps.feedbackMsgText, nextProps.feedbackMsgSeverity);
194 if (nextProps.vnfFilterValues && !isEqual(nextProps.vnfFilterValues, this.props.vnfFilterValues) &&
195 this.props.vnfFilters) {
196 this.props.onFilterValueChange(nextProps.vnfFilterValues);
197 changeUrlAddress(buildRouteObjWithFilters(VNFS_ROUTE, nextProps.vnfFilterValues), this.props.history);
200 if (nextProps.match &&
201 nextProps.match.params &&
202 nextProps.match.params.filters &&
203 !isEqual(nextProps.match.params.filters, this.props.match.params.filters)) {
204 // added line below to reload the filters if filter changes, this will load new filters
205 this.props.onInitializeVnfSearchFilters();
206 this.props.onReceiveNewFilterValueParams(nextProps.match.params.filters);
207 } else if (Object.keys(nextProps.nonConvertedFilters).length > 0 &&
208 !isEqual(this.props.nonConvertedFilters, nextProps.nonConvertedFilters)) {
209 if (Object.keys(this.props.vnfFilters).length > 0) {
210 this.props.onConvertFilterValues(nextProps.nonConvertedFilters, this.props.vnfFilters,
211 this.props.vnfFilterValues);
213 } else if ((!nextProps.match || !nextProps.match.params || !nextProps.match.params.filters) &&
214 this.props.match.params.filters && this.props.vnfFilters && this.props.vnfFilterValues) {
215 // VNF Search navigation button was pressed while the view is still visible ... need to reset
216 // the filter bar selections to the default values
217 this.props.onResetFilterBarToDefaults(this.props.vnfFilters, this.props.vnfFilterValues);
220 if (nextProps.vnfFilters && !isEqual(nextProps.vnfFilters, this.props.vnfFilters) &&
221 Object.keys(this.props.nonConvertedFilters).length > 0) {
222 // just received list of available filters and there is are nonConvertedFilters (previously
223 // set from url params), need to convert those values and update the filter bar selections
225 this.props.onConvertFilterValues(this.props.nonConvertedFilters, nextProps.vnfFilters,
226 this.props.vnfFilterValues);
228 } else if (nextProps.vnfFilters && !isEqual(nextProps.vnfFilters, this.props.vnfFilters) &&
229 isEmpty(this.props.vnfFilterValues)) {
230 // filter bar previously returned the default filter selections (but we didn't have the list
231 // of available filters at the time, so couldn't do anything. Now receiving the list of
232 // available filters, so triger the filter selection action in order to load the visualization data
233 this.props.onResetFilterBarToDefaults(nextProps.vnfFilters, this.props.vnfFilterValues);
237 componentWillUnmount() {
238 // set the data to 'NO DATA' so upon return, the view is rendered with
239 // no data until the request for new data is returned
240 this.props.onPrepareToUnmount();
246 filtersConfig={this.props.vnfFilters}
247 filterValues={this.props.unifiedFilterValues}
248 filterTitle={FilterBarConstants.FILTER_BAR_TITLE}
249 onFilterChange={(selectedFilters) =>
250 this.props.onFilterSelection(selectedFilters, this.props.vnfFilters)} /> );
254 let filterBar = this.getFilterBar();
257 <div className='view-container'>
258 <CollapsibleSlidingPanel
259 slidingPanelClassName='collapsible-sliding-panel'
260 slidingPanelClosedClassName='collapsible-sliding-panel-is-closed'
261 expanderHandleClassName='collapsible-sliding-panel-expander'
262 slidingPanelContent={filterBar}>
263 <div className={this.props.vnfVisualizationPanelClass}>
264 <VnfSearchTotalCountVisualization />
265 <VnfSearchProvStatusVisualizations />
266 <VnfSearchOrchStatusVisualizations />
267 <VnfSearchNfTypeVisualizations />
268 <VnfSearchNfRoleVisualizations />
270 </CollapsibleSlidingPanel>
275 export default connect(mapStateToProps, mapActionToProps)(vnfSearch);