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