diff options
Diffstat (limited to 'src/app/globalAutoCompleteSearchBar')
4 files changed, 439 insertions, 0 deletions
diff --git a/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx new file mode 100644 index 0000000..92f74bc --- /dev/null +++ b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx @@ -0,0 +1,105 @@ +/* + * ============LICENSE_START=================================================== + * SPARKY (AAI UI service) + * ============================================================================ + * Copyright © 2017 AT&T Intellectual Property. + * Copyright © 2017 Amdocs + * All rights reserved. + * ============================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END===================================================== + * + * ECOMP and OpenECOMP are trademarks + * and service marks of AT&T Intellectual Property. + */ + +import {connect} from 'react-redux'; +import React, {Component} from 'react'; +import AutoCompleteSearchBar from 'generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx'; +import {postAnalyticsData} from 'app/analytics/AnalyticsActions.js'; +import {getClearGlobalMessageEvent} from 'app/GlobalInlineMessageBar/GlobalInlineMessageBarActions.js'; +import { + queryRequestedValues, + clearSuggestionsTextField, + onSuggestionsChange, + onSuggestionsClearRequested, + getInvalidSearchInputEvent, + setNotificationText +} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js'; + +let mapActionToProps = (dispatch) => { + return { + onSuggestionsFetchRequested: ({value}) => dispatch( + queryRequestedValues(value)), + onClearSuggestionsTextFieldRequested: () => { + dispatch(getClearGlobalMessageEvent()); + dispatch(clearSuggestionsTextField()); + }, + onInputChange: (event, {newValue}) => { + dispatch(getClearGlobalMessageEvent()); + dispatch(onSuggestionsChange(event, newValue)); + }, + onSuggestionsClearRequested: () => dispatch(onSuggestionsClearRequested()), + dispatchAnalytics: () => dispatch( + postAnalyticsData(document.documentElement.outerHTML.replace('\s+', ''))), + onInvalidSearch: (searchText) => { + dispatch(getInvalidSearchInputEvent(searchText)); + }, + onMessageStateChange: (msgText, msgSeverity) => { + dispatch(setNotificationText(msgText, msgSeverity)); + } + }; +}; + +let mapStateToProps = ({globalAutoCompleteSearchBarReducer}) => { + let { + value = '', + suggestions = [], + cachedSuggestions = [], + suggestionName = 'text', + clearSearchText = false, + feedbackMsgText = '', + feedbackMsgSeverity = '' + } = globalAutoCompleteSearchBarReducer; + + return { + value, + suggestions, + cachedSuggestions, + suggestionName, + clearSearchText, + feedbackMsgText, + feedbackMsgSeverity + }; +}; + +export class GlobalAutoCompleteSearchBar extends Component { + componentWillReceiveProps(nextProps) { + if (nextProps.clearSearchText) { + this.props.onClearSuggestionsTextFieldRequested(); + } + + if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) { + this.props.onMessageStateChange(nextProps.feedbackMsgText, + nextProps.feedbackMsgSeverity); + } + } + + render() { + return ( + <AutoCompleteSearchBar {...this.props} /> + ); + } +} +export default connect(mapStateToProps, mapActionToProps)( + GlobalAutoCompleteSearchBar); diff --git a/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js new file mode 100644 index 0000000..4ef684d --- /dev/null +++ b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js @@ -0,0 +1,176 @@ +/* + * ============LICENSE_START=================================================== + * SPARKY (AAI UI service) + * ============================================================================ + * Copyright © 2017 AT&T Intellectual Property. + * Copyright © 2017 Amdocs + * All rights reserved. + * ============================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END===================================================== + * + * ECOMP and OpenECOMP are trademarks + * and service marks of AT&T Intellectual Property. + */ + +import {getTSUIElasticSearchQueryString} from 'app/networking/NetworkUtil.js'; +import networkCall from 'app/networking/NetworkCalls.js'; +import { + POST, + POST_HEADER, + ERROR_RETRIEVING_DATA +} from 'app/networking/NetworkConstants.js'; + +import { + globalAutoCompleteSearchBarActionTypes, + ERROR_INVALID_SEARCH_TERMS, + GLOBAL_SEARCH_URL +} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js'; +import { + getSetGlobalMessageEvent, + getClearGlobalMessageEvent +} from 'app/GlobalInlineMessageBar/GlobalInlineMessageBarActions.js'; + + +function createSuggestionFoundEvent({suggestions}) { + return { + type: globalAutoCompleteSearchBarActionTypes.SUGGESTION_FOUND, + data: {suggestions} + }; +} + +function createSuggestionNotFoundEvent() { + return { + type: globalAutoCompleteSearchBarActionTypes.SUGGESTION_NOT_FOUND + }; +} + +function createSuggestionChangedEvent(value) { + return { + type: globalAutoCompleteSearchBarActionTypes.SUGGESTION_CHANGED, + data: value + }; +} + +function getInvalidQueryEvent(value) { + return { + type: globalAutoCompleteSearchBarActionTypes.NETWORK_ERROR, + data: {value: value, errorMsg: ERROR_RETRIEVING_DATA} + }; +} + +function getSearchBarWarningMessageEvent(message) { + return { + type: globalAutoCompleteSearchBarActionTypes.SEARCH_WARNING_EVENT, + data: {errorMsg: message} + }; +} +export function getInvalidSearchInputEvent(value) { + return getSearchBarWarningMessageEvent( + ERROR_INVALID_SEARCH_TERMS + ': ' + value); +} + + +function fetchView(selectedSuggestion) { + return { + type: globalAutoCompleteSearchBarActionTypes.SUGGESTION_CLICKED, + data: {selectedSuggestion: selectedSuggestion} + }; +} + + +export function populateView( + searchRequestObject, keyWord, selectedNodeFetchRequest) { + if (selectedNodeFetchRequest === undefined) { + let postBody = JSON.stringify(searchRequestObject); + selectedNodeFetchRequest = + () => networkCall.fetchRequest('', POST, + POST_HEADER, postBody); + } + + return dispatch => { + dispatch(fetchView(searchRequestObject)); + }; +} + + +export function fetchRequestedValues(fetchRequestCallback, keyWord) { + return dispatch => { + return fetchRequestCallback().then( + (responseJson) => responseJson.suggestions + ).then( + (filteredResults)=> { + if (filteredResults.length > 0) { + dispatch(createSuggestionFoundEvent({suggestions: filteredResults})); + } else { + dispatch(createSuggestionNotFoundEvent()); + } + } + ).catch( + () => { + dispatch(getInvalidQueryEvent(keyWord)); + } + ); + }; +} + +export function queryRequestedValues(keyWord, requestedFetchRequest) { + if (requestedFetchRequest === undefined) { + let postBody = JSON.stringify(getTSUIElasticSearchQueryString(keyWord)); + requestedFetchRequest = + () => networkCall.fetchRequest(GLOBAL_SEARCH_URL, POST, POST_HEADER, + postBody); + } + return dispatch => { + dispatch(fetchRequestedValues(requestedFetchRequest, keyWord), keyWord); + }; +} + +export function clearSuggestionsTextField() { + return dispatch => { + dispatch( + {type: globalAutoCompleteSearchBarActionTypes.CLEAR_SUGGESTIONS_TEXT_FIELD}); + }; +} + +export function onSuggestionsChange(event, value) { + return dispatch => { + dispatch(createSuggestionChangedEvent(value)); + //Only fetch values if the enter key is used. + if (event.keyCode === 13) { + let postBody = JSON.stringify(getTSUIElasticSearchQueryString(value)); + dispatch(fetchRequestedValues( + () => networkCall.fetchRequest(GLOBAL_SEARCH_URL, POST, POST_HEADER, + postBody), value)); + } + }; +} + +export function onSuggestionsClearRequested() { + return dispatch => { + dispatch({type: globalAutoCompleteSearchBarActionTypes.CLEAR_SUGGESTIONS}); + }; +} + +export function setNotificationText(msgText, msgSeverity) { + if (msgText.length > 0) { + return dispatch => { + dispatch( + getSetGlobalMessageEvent(msgText, msgSeverity)); + }; + } else { + return dispatch => { + dispatch(getClearGlobalMessageEvent()); + }; + } +} diff --git a/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js new file mode 100644 index 0000000..734696f --- /dev/null +++ b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js @@ -0,0 +1,53 @@ +/* + * ============LICENSE_START=================================================== + * SPARKY (AAI UI service) + * ============================================================================ + * Copyright © 2017 AT&T Intellectual Property. + * Copyright © 2017 Amdocs + * All rights reserved. + * ============================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END===================================================== + * + * ECOMP and OpenECOMP are trademarks + * and service marks of AT&T Intellectual Property. + */ + + +import keyMirror from 'utils/KeyMirror.js'; +import {BASE_URL} from 'app/networking/NetworkConstants.js'; + +export const globalAutoCompleteSearchBarActionTypes = keyMirror({ + SUGGESTION_FOUND: null, + SUGGESTION_CHANGED: null, + SUGGESTION_NOT_FOUND: null, + CLEAR_SUGGESTIONS_TEXT_FIELD: null, + CLEAR_SUGGESTIONS: null, + SUGGESTION_CLICKED: null, + NETWORK_ERROR: null, + SEARCH_WARNING_EVENT: null, + SEARCH_INVALID_TERMS: null +}); + +export const GLOBAL_SEARCH_URL = BASE_URL + '/search/querysearch/'; + +export const NO_MATCHES_FOUND = 'No Matches Found'; +export const ERROR_INVALID_SEARCH_TERMS = 'Invalid search terms'; +export const SEARCH_DEBOUNCE_TIME = 300; + +export const ICON_CLASS_SEARCH = 'fa fa-search fa-lg'; +export const ICON_CLASS_CLEAR = 'fa fa-times fa-lg'; +export const SEARCH_SELECTED_NODE_PATH = '/visualization/prepareVisualization'; + + + diff --git a/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarReducer.js b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarReducer.js new file mode 100644 index 0000000..1f52c08 --- /dev/null +++ b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarReducer.js @@ -0,0 +1,105 @@ +/* + * ============LICENSE_START=================================================== + * SPARKY (AAI UI service) + * ============================================================================ + * Copyright © 2017 AT&T Intellectual Property. + * Copyright © 2017 Amdocs + * All rights reserved. + * ============================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END===================================================== + * + * ECOMP and OpenECOMP are trademarks + * and service marks of AT&T Intellectual Property. + */ + +import i18n from 'utils/i18n/i18n'; + +import { + globalAutoCompleteSearchBarActionTypes, + NO_MATCHES_FOUND +} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js'; +import { + MESSAGE_LEVEL_WARNING, + MESSAGE_LEVEL_DANGER +} from 'utils/GlobalConstants.js'; + +export default (state = {}, action) => { + switch (action.type) { + case globalAutoCompleteSearchBarActionTypes.SUGGESTION_FOUND: + return { + ...state, + suggestions: action.data.suggestions, + cachedSuggestions: action.data.suggestions, + feedbackMsgText: action.data.errorMsg, + feedbackMsgSeverity: MESSAGE_LEVEL_DANGER + }; + case globalAutoCompleteSearchBarActionTypes.SUGGESTION_NOT_FOUND: + return { + ...state, + suggestions: [{ text: i18n(NO_MATCHES_FOUND)}], + cachedSuggestions: [{ + entityType: i18n(NO_MATCHES_FOUND) + }], + feedbackMsgText: '', + feedbackMsgSeverity: '' + }; + case globalAutoCompleteSearchBarActionTypes.CLEAR_SUGGESTIONS_TEXT_FIELD: + return { + ...state, + suggestions: [], + cachedSuggestions: [], + value: '', + feedbackMsgText: '', + feedbackMsgSeverity: '', + clearSearchText: false + }; + case globalAutoCompleteSearchBarActionTypes.CLEAR_SUGGESTIONS: + return { + ...state, + suggestions: [] + }; + case globalAutoCompleteSearchBarActionTypes.SUGGESTION_CHANGED: + return { + ...state, + value: action.data, + feedbackMsgText: '', + feedbackMsgSeverity: '' + }; + case globalAutoCompleteSearchBarActionTypes.SUGGESTION_CLICKED: + return { + ...state, + selectedSuggestion: action.data.selectedSuggestion, + performPrepareVisualization: true, + feedbackMsgText: '', + feedbackMsgSeverity: '' + }; + case globalAutoCompleteSearchBarActionTypes.NETWORK_ERROR: + return { + ...state, + suggestions: [], + cachedSuggestions: [], + feedbackMsgText: action.data.errorMsg, + feedbackMsgSeverity: MESSAGE_LEVEL_DANGER + }; + case globalAutoCompleteSearchBarActionTypes.SEARCH_WARNING_EVENT: + return { + ...state, + suggestions: [], + cachedSuggestions: [], + feedbackMsgText: action.data.errorMsg, + feedbackMsgSeverity: MESSAGE_LEVEL_WARNING + }; + } + return state; +}; |