From 5a135b9e5b0f889a3138dbaafd6b2344d1b85c24 Mon Sep 17 00:00:00 2001 From: Jason Bulicek Date: Wed, 30 Sep 2020 17:38:47 -0700 Subject: [PATCH] move search help to documentation, increase size of history panel --- .../universalSearch/searchBar/autosuggest.jsx | 4 +- .../searchBar/autosuggest.less | 5 +- .../universalSearch/searchBar/guide.jsx | 89 ------------------- .../searchBar/searchHistory.jsx | 46 ++++++++++ 4 files changed, 51 insertions(+), 93 deletions(-) delete mode 100644 src/components/universalSearch/searchBar/guide.jsx create mode 100644 src/components/universalSearch/searchBar/searchHistory.jsx diff --git a/src/components/universalSearch/searchBar/autosuggest.jsx b/src/components/universalSearch/searchBar/autosuggest.jsx index 121b1eba..7ca08e5e 100644 --- a/src/components/universalSearch/searchBar/autosuggest.jsx +++ b/src/components/universalSearch/searchBar/autosuggest.jsx @@ -23,7 +23,7 @@ import {when} from 'mobx'; import TimeWindowPicker from './timeWindowPicker'; import Chips from './chips'; import QueryBank from './queryBank'; -import Guide from './guide'; +import SearchHistory from './searchHistory'; import Suggestions from './suggestions'; import SearchSubmit from './searchSubmit'; @@ -536,7 +536,7 @@ export default class Autosuggest extends React.Component { suggestedOnType={this.state.suggestedOnType} suggestedOnValue={this.state.suggestedOnValue} /> - + diff --git a/src/components/universalSearch/searchBar/autosuggest.less b/src/components/universalSearch/searchBar/autosuggest.less index 67182a78..e4d90411 100644 --- a/src/components/universalSearch/searchBar/autosuggest.less +++ b/src/components/universalSearch/searchBar/autosuggest.less @@ -239,9 +239,10 @@ } .usb-suggestions__guide-history-list { - list-style-type: none; + list-style-type: circle; overflow-y: scroll; - max-height: 100px; + max-height: 365px; + min-height: 100px; } .usb-reset-button { diff --git a/src/components/universalSearch/searchBar/guide.jsx b/src/components/universalSearch/searchBar/guide.jsx deleted file mode 100644 index 26166543..00000000 --- a/src/components/universalSearch/searchBar/guide.jsx +++ /dev/null @@ -1,89 +0,0 @@ -/* - * Copyright 2018 Expedia Group - * - * 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. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; - -const subsystems = (window.haystackUiConfig && window.haystackUiConfig.subsystems) || []; -const tracesEnabled = subsystems.includes('traces'); -const trendsEnabled = subsystems.includes('trends'); -const alertsEnabled = subsystems.includes('alerts'); -const serviceGraphEnabled = subsystems.includes('serviceGraph'); -const servicePerformanceEnabled = window.haystackUiConfig.enableServicePerformance; -const serviceInsightsEnabled = subsystems.includes('serviceInsights'); - -const Guide = ({searchHistory}) => { - const historyList = searchHistory.map((searchObject) => ( -
  • {searchObject.split('&').join(', ')}
    • - )); - const history = historyList.length ? - (
    -
    History
    -
      - {historyList} -
    -
    ) - : null; - - return ( -
    -
    -
    How to search
    -
    Create a query by specifying key/value pairs in key=value format to search for traces containing tags. One query can have multiple key/value pairs, eg:
    -
      -
    • Traces having traceId xxxx :traceId=xxxx
      • -
    • Traces containing a span with test-svc service: serviceName=test-svc
      • -
    • Traces containing an error span with test-svc service: serviceName=test-svc error=true
      • -
    -
    -
    -
    How tabs show up
    -
    -
  • If no tag searched: - - {serviceGraphEnabled && <> Service Graph } - {servicePerformanceEnabled && <> Service Performance } - -
    • -
  • If only serviceName (and/or operationName) searched: -
    - - {tracesEnabled && <> Traces } - {trendsEnabled && <> Trends } - {alertsEnabled && <> Alerts } - {serviceGraphEnabled && <> Service Graph } - {serviceInsightsEnabled && <> Service Insights } - -
    • - { tracesEnabled && -
  • Any other combination of tags searched: - - Traces - -
    • - } -
    -
    - {history} -
    - ); -}; - -Guide.propTypes = { - searchHistory: PropTypes.object.isRequired -}; - -export default Guide; diff --git a/src/components/universalSearch/searchBar/searchHistory.jsx b/src/components/universalSearch/searchBar/searchHistory.jsx new file mode 100644 index 00000000..19bc85aa --- /dev/null +++ b/src/components/universalSearch/searchBar/searchHistory.jsx @@ -0,0 +1,46 @@ +/* + * Copyright 2018 Expedia Group + * + * 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. + */ + +import React from 'react'; +import PropTypes from 'prop-types'; + +const SearchHistory = ({history}) => { + const historyListItems = history.map((searchObject) => ( +
  • {searchObject.split('&').join(', ')}
    • + )); + const historyList = + (
    +
    History
    +
      + {historyListItems.length ? historyListItems :
    • No search history found - searches will be saved here
      • } +
    +
    ); + + return ( +
    +
    + +
    + {historyList} +
    + ); +}; + +SearchHistory.propTypes = { + history: PropTypes.object.isRequired +}; + +export default SearchHistory;