src/app/vnfSearch/VnfSearch.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   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
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  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=========================================================
  20  */
  21 import React, {Component} from 'react';
  22 import {connect} from 'react-redux';
  23
  24 import {
  25   isEqual,
  26   isEmpty
  27 } from 'lodash';
  28
  29 import {VerticalFilterBar} from 'vertical-filter-bar';
  30 import {CollapsibleSlidingPanel} from 'collapsible-sliding-panel';
  31
  32 import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
  33 import {
  34   vnfActionTypes,
  35   VNF_TITLE,
  36   VNFS_ROUTE,
  37   VNF_SEARCH_FILTER_NAME
  38 } from 'app/vnfSearch/VnfSearchConstants.js';
  39
  40 import {
  41   processVnfVisualizationsOnFilterChange,
  42   processVnfFilterPanelCollapse,
  43   setNotificationText,
  44   clearVnfSearchData
  45 } from 'app/vnfSearch/VnfSearchActions.js';
  46
  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';
  54
  55 import {
  56   FilterBarConstants,
  57   processFilterSelection,
  58   getUnifiedFilters,
  59   buildFilterValueMap,
  60   setNonConvertedFilterValues,
  61   setFilterSelectionsToDefaults,
  62   convertNonConvertedValues
  63 } from 'filter-bar-utils';
  64
  65 import {
  66   globalInlineMessageBarActionTypes
  67 } from 'app/globalInlineMessageBar/GlobalInlineMessageBarConstants.js';
  68
  69 import {
  70   UNIFIED_FILTERS_URL,
  71   filterBarActionTypes
  72 } from 'utils/GlobalConstants.js';
  73
  74 const mapStateToProps = ({vnfSearch}) => {
  75   let {
  76     feedbackMsgText = '',
  77     feedbackMsgSeverity = '',
  78     vnfFilters = {},
  79     selectedFilterValues = {},
  80     vnfFilterValues = {},
  81     vnfVisualizationPanelClass = 'collapsible-panel-main-panel',
  82     unifiedFilterValues = {},
  83     nonConvertedFilters = {}
  84   } = vnfSearch;
  85
  86   return {
  87     feedbackMsgText,
  88     feedbackMsgSeverity,
  89     vnfFilters,
  90     selectedFilterValues,
  91     vnfFilterValues,
  92     vnfVisualizationPanelClass,
  93     unifiedFilterValues,
  94     nonConvertedFilters
  95   };
  96 };
  97
  98 let mapActionToProps = (dispatch) => {
  99   return {
 100     onSetViewTitle: (title) => {
 101       dispatch(setSecondaryTitle(title));
 102     },
 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));
 107     },
 108     onFilterPanelCollapse: (isOpen) => {
 109       // expand/collapse the filter panel
 110       dispatch(processVnfFilterPanelCollapse(isOpen));
 111     },
 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));
 120       }
 121     },
 122     onFilterValueChange: (convertedFilterValues) => {
 123       // filter values have been converted, now update the VNF visualizations
 124       dispatch(processVnfVisualizationsOnFilterChange(convertedFilterValues));
 125     },
 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);
 131
 132       dispatch(setNonConvertedFilterValues(filterBarActionTypes.SET_NON_CONVERTED_VALUES, filterValueMap));
 133       dispatch(processVnfVisualizationsOnFilterChange(filterValueMap));
 134
 135       // incase url param was changed manually, need to update vnfFilterValues
 136     },
 137     onResetFilterBarToDefaults: (filters, filterValues) => {
 138       dispatch(setFilterSelectionsToDefaults(filterBarActionTypes.SET_UNIFIED_VALUES,
 139         filterBarActionTypes.SET_NON_CONVERTED_VALUES, filters, filterValues));
 140     },
 141     onPrepareToUnmount: () => {
 142       // clean things up:
 143       // 1- clear the VNF data
 144       // 2- ensure filter bar is closed
 145       dispatch(clearVnfSearchData());
 146       dispatch(processVnfFilterPanelCollapse(false));
 147     },
 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));
 153     },
 154     onMessageStateChange: (msgText, msgSeverity) => {
 155       dispatch(setNotificationText(msgText, msgSeverity));
 156     }
 157   };
 158 };
 159
 160 class vnfSearch extends Component {
 161   static propTypes = {
 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
 170   };
 171
 172   componentWillMount() {
 173     this.props.onSetViewTitle(i18n(VNF_TITLE));
 174     this.props.onInitializeVnfSearchFilters();
 175
 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);
 180     }
 181
 182     if (this.props.feedbackMsgText) {
 183       this.props.onMessageStateChange(this.props.feedbackMsgText,
 184         this.props.feedbackMsgSeverity);
 185     }
 186   }
 187
 188   componentWillReceiveProps(nextProps) {
 189     if (nextProps.feedbackMsgText && nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
 190       this.props.onMessageStateChange(nextProps.feedbackMsgText, nextProps.feedbackMsgSeverity);
 191     }
 192
 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);
 197     }
 198
 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);
 211       }
 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);
 217     }
 218
 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
 223
 224       this.props.onConvertFilterValues(this.props.nonConvertedFilters, nextProps.vnfFilters,
 225         this.props.vnfFilterValues);
 226
 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);
 233     }
 234   }
 235
 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();
 240   }
 241
 242   getFilterBar() {
 243     return (
 244       <VerticalFilterBar
 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)} />    );
 250   }
 251
 252   render() {
 253     let filterBar = this.getFilterBar();
 254
 255     return (
 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 />
 268           </div>
 269         </CollapsibleSlidingPanel>
 270       </div>
 271     );
 272   }
 273 }
 274 export default connect(mapStateToProps, mapActionToProps)(vnfSearch);