Add shortcuts

Signed-off-by: Davit Yeghshatyan <davo@uber.com>
jaegertracing · Aug 16, 2018 · cc48630 · cc48630
1 parent fe9df64
commit cc48630
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 7 deletions.
diff --git a/packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.js b/packages/jaeger-ui/src/components/TracePage/KeyboardShortcutsHelp.js
@@ -53,6 +53,8 @@ const descriptions = {
   expandAll: 'Expand All',
   collapseOne: 'Collapse One Level',
   expandOne: 'Expand One Level',
+  searchSpans: 'Search Spans',
+  clearSearch: 'Clear Search',
 };
 
 function convertKeys(keyConfig: string | string[]): string[][] {

diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js
@@ -40,6 +40,7 @@ type TracePageHeaderProps = {
   textFilter: string,
   prevResult: () => void,
   nextResult: () => void,
+  clearSearch: () => void,
   resultCount: number,
   archiveButtonVisible: boolean,
   onArchiveClicked: () => void,
@@ -89,7 +90,7 @@ export const HEADER_ITEMS = [
   },
 ];
 
-export default function TracePageHeader(props: TracePageHeaderProps) {
+function TracePageHeader(props: TracePageHeaderProps, ref: any) {
   const {
     archiveButtonVisible,
     onArchiveClicked,
@@ -106,6 +107,7 @@ export default function TracePageHeader(props: TracePageHeaderProps) {
     textFilter,
     prevResult,
     nextResult,
+    clearSearch,
     resultCount,
   } = props;
 
@@ -181,7 +183,9 @@ export default function TracePageHeader(props: TracePageHeaderProps) {
           textFilter={textFilter}
           prevResult={prevResult}
           nextResult={nextResult}
+          clearSearch={clearSearch}
           resultCount={resultCount}
+          ref={ref}
         />
         <Dropdown overlay={viewMenu}>
           <Button className="ub-mr2">
@@ -199,3 +203,7 @@ export default function TracePageHeader(props: TracePageHeaderProps) {
     </header>
   );
 }
+
+// ghetto fabulous cast because the 16.3 API is not in flow yet
+// https://github.com/facebook/flow/issues/6103
+export default (React: any).forwardRef(TracePageHeader);
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.css b/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.css
@@ -28,7 +28,7 @@ limitations under the License.
 }
 
 .TracePageSearchBar--btn {
-  transition: 0.5s;
+  transition: 0.2s;
 }
 
 .TracePageSearchBar--btn.is-disabled {

diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.js b/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.js
@@ -26,18 +26,21 @@ type TracePageSearchBarProps = {
   textFilter: string,
   prevResult: () => void,
   nextResult: () => void,
+  clearSearch: () => void,
   resultCount: number,
 };
 
-export default function TracePageSearchBar(props: TracePageSearchBarProps) {
-  const { prevResult, nextResult, resultCount, updateTextFilter, textFilter } = props;
+function TracePageSearchBar(props: TracePageSearchBarProps, ref: any) {
+  const { prevResult, nextResult, clearSearch, resultCount, updateTextFilter, textFilter } = props;
 
   const count = textFilter ? (
     <span className="TracePageSearchBar--count">{resultCount.toString()}</span>
   ) : null;
 
   const updateFilter = event => updateTextFilter(event.target.value);
-  const clearFilter = () => updateTextFilter('');
+  const onKeyDown = e => {
+    if (e.keyCode === 27) clearSearch();
+  };
 
   const btnClass = `TracePageSearchBar--btn${textFilter ? '' : ' is-disabled'}`;
 
@@ -53,11 +56,18 @@ export default function TracePageSearchBar(props: TracePageSearchBarProps) {
           value={textFilter}
           data-test={markers.IN_TRACE_SEARCH}
           suffix={count}
+          ref={ref}
+          onKeyDown={onKeyDown}
+          onPressEnter={nextResult}
         />
         <Button className={btnClass} disabled={!textFilter} icon="up" onClick={prevResult} />
         <Button className={btnClass} disabled={!textFilter} icon="down" onClick={nextResult} />
-        <Button className={btnClass} disabled={!textFilter} icon="close" onClick={clearFilter} />
+        <Button className={btnClass} disabled={!textFilter} icon="close" onClick={clearSearch} />
       </Input.Group>
     </div>
   );
 }
+
+// ghetto fabulous cast because the 16.3 API is not in flow yet
+// https://github.com/facebook/flow/issues/6103
+export default (React: any).forwardRef(TracePageSearchBar);
diff --git a/packages/jaeger-ui/src/components/TracePage/index.js b/packages/jaeger-ui/src/components/TracePage/index.js
@@ -101,6 +101,7 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
   state: TracePageState;
 
   _headerElm: ?Element;
+  _searchBar: any;
   _scrollManager: ScrollManager;
 
   constructor(props: TracePageProps) {
@@ -122,6 +123,7 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
       scrollBy,
       scrollTo,
     });
+    this._searchBar = React.createRef();
     resetShortcuts();
   }
 
@@ -144,6 +146,8 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
     shortcutCallbacks.scrollPageUp = scrollPageUp;
     shortcutCallbacks.scrollToNextVisibleSpan = scrollToNextVisibleSpan;
     shortcutCallbacks.scrollToPrevVisibleSpan = scrollToPrevVisibleSpan;
+    shortcutCallbacks.clearSearch = this.clearSearch;
+    shortcutCallbacks.searchSpans = this.focusOnSearchBar;
     mergeShortcuts(shortcutCallbacks);
   }
 
@@ -163,7 +167,7 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
     }
     if (prevID !== id) {
       this.updateViewRangeTime(0, 1);
-      this.updateTextFilter('');
+      this.clearSearch();
     }
   }
 
@@ -223,6 +227,15 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
     this.setState({ textFilter, findMatchesIDs });
   };
 
+  clearSearch = () => {
+    this.updateTextFilter('');
+    this._searchBar.current.blur();
+  };
+
+  focusOnSearchBar = () => {
+    this._searchBar.current.focus();
+  };
+
   updateViewRangeTime = (start: number, end: number, trackSrc?: string) => {
     if (trackSrc) {
       trackRange(trackSrc, [start, end], this.state.viewRange.time.current);
@@ -298,10 +311,12 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
             textFilter={textFilter}
             prevResult={this._scrollManager.scrollToPrevVisibleSpan}
             nextResult={this._scrollManager.scrollToNextVisibleSpan}
+            clearSearch={this.clearSearch}
             resultCount={findMatchesIDs ? findMatchesIDs.size : 0}
             updateTextFilter={this.updateTextFilter}
             archiveButtonVisible={archiveEnabled}
             onArchiveClicked={this.archiveTrace}
+            ref={this._searchBar}
           />
           {!slimView && (
             <SpanGraph

diff --git a/packages/jaeger-ui/src/components/TracePage/keyboard-shortcuts.js b/packages/jaeger-ui/src/components/TracePage/keyboard-shortcuts.js
@@ -45,6 +45,9 @@ export type ShortcutCallbacks = {
   expandAll?: CombokeysHandler,
   collapseOne?: CombokeysHandler,
   expandOne?: CombokeysHandler,
+  // search
+  searchSpans?: CombokeysHandler,
+  clearSearch?: CombokeysHandler,
 };
 
 export const kbdMappings = {
@@ -64,6 +67,8 @@ export const kbdMappings = {
   expandAll: '[',
   collapseOne: 'p',
   expandOne: 'o',
+  searchSpans: 'ctrl+b',
+  clearSearch: 'escape',
 };
 
 let instance: ?CombokeysType;