Moved Buttons to toolbars

Signed-off-by: Alberto Gutierrez <aljesusg@gmail.com>
jaegertracing · Oct 18, 2018 · 38e00a2 · 38e00a2
1 parent ed9f3d3
commit 38e00a2
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 23 deletions.
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
@@ -15,7 +15,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Select } from 'antd';
+import { Button, Col, Select } from 'antd';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
 
 import DiffSelection from './DiffSelection';
@@ -41,6 +41,7 @@ type SearchResultsProps = {
   hideGraph?: boolean,
   disableComparision?: boolean,
   loading: boolean,
+  onGoFullClicked: () => void,
   maxTraceDuration: number,
   skipMessage?: boolean,
   traces: TraceSummary[],
@@ -110,7 +111,7 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
         </React.Fragment>
       );
     }
-    const { goToTrace, isEmbed, hideGraph, disableComparision, maxTraceDuration } = this.props;
+    const { goToTrace, isEmbed, hideGraph, disableComparision, onGoFullClicked, maxTraceDuration } = this.props;
     const cohortIds = new Set(diffCohort.map(datum => datum.id));
     return (
       <div>
@@ -134,6 +135,11 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
             )}
             <div className="SearchResults--headerOverview">
               <SelectSort />
+              {isEmbed && (
+                <label className="ub-right">
+                  <Button className="ub-mr2 ub-flex ub-items-center" onClick={onGoFullClicked}>View Results</Button>
+                </label>
+              )}
               <h2 className="ub-m0">
                 {traces.length} Trace{traces.length > 1 && 's'}
               </h2>

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/index.js b/packages/jaeger-ui/src/components/SearchTracePage/index.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React, { Component } from 'react';
-import { Col, Row, Button } from 'antd';
+import { Col, Row } from 'antd';
 import PropTypes from 'prop-types';
 import queryString from 'query-string';
 import { connect } from 'react-redux';
@@ -102,7 +102,6 @@ export class SearchTracePageImpl extends Component {
             </Col>
           )}
           <Col span={18} className="SearchTracePage--column">
-            {isEmbed && <Button onClick={this.goFullView}>Show full view</Button>}
             {showErrors && (
               <div className="js-test-error-message">
                 <h2>There was an error querying for traces:</h2>
@@ -118,6 +117,7 @@ export class SearchTracePageImpl extends Component {
                 cohortRemoveTrace={cohortRemoveTrace}
                 diffCohort={diffCohort}
                 skipMessage={isHomepage}
+                onGoFullClicked={this.goFullView}
                 traces={traceResults}
                 isEmbed={isEmbed}
                 hideGraph={hideGraph}

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/index.test.js b/packages/jaeger-ui/src/components/SearchTracePage/index.test.js
@@ -34,7 +34,6 @@ import { shallow, mount } from 'enzyme';
 import store from 'store';
 
 import { SearchTracePageImpl as SearchTracePage, mapStateToProps } from './index';
-import { Button } from 'antd';
 import SearchForm from './SearchForm';
 import LoadingIndicator from '../common/LoadingIndicator';
 import { fetchedState } from '../../constants';
@@ -106,11 +105,6 @@ describe('<SearchTracePage>', () => {
     expect(wrapper.find('.js-test-logo').length).toBe(1);
   });
 
-  it('shows button with a link to the Search page if is embed', () => {
-    wrapper.setProps({ isEmbed: true });
-    expect(wrapper.find(Button).length).toBe(1);
-  });
-
   it('hide SearchForm if is embed', () => {
     wrapper.setProps({ isEmbed: true });
     expect(wrapper.find(SearchForm).length).toBe(0);

diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js
@@ -45,6 +45,9 @@ type TracePageHeaderProps = {
   resultCount: number,
   archiveButtonVisible: boolean,
   onArchiveClicked: () => void,
+  onGoBackClicked: () => void,
+  onGoFullViewClicked: () => void,
+  embed: boolean,
   // these props are used by the `HEADER_ITEMS`
   // eslint-disable-next-line react/no-unused-prop-types
   timestamp: number,
@@ -104,13 +107,16 @@ export function TracePageHeaderFn(props: TracePageHeaderProps) {
     name,
     slimView,
     onSlimViewClicked,
+    onGoBackClicked,
+    onGoFullViewClicked,
     updateTextFilter,
     textFilter,
     prevResult,
     nextResult,
     clearSearch,
     resultCount,
     forwardedRef,
+    embed,
   } = props;
 
   if (!traceID) {
@@ -173,12 +179,18 @@ export function TracePageHeaderFn(props: TracePageHeaderProps) {
   return (
     <header>
       <div className="TracePageHeader--titleRow">
+        { embed && (
+          <Button className="ub-mr2 ub-flex ub-items-center" onClick={onGoBackClicked}>Go back</Button>
+        )}
         <a className="ub-flex-auto ub-mr2" onClick={onSlimViewClicked} role="switch" aria-checked={!slimView}>
           <h1 className="TracePageHeader--title ub-flex ub-items-center">
             {slimView ? <IoChevronRight className="ub-mr2" /> : <IoChevronDown className="ub-mr2" />}
             {name || FALLBACK_TRACE_NAME}
           </h1>
         </a>
+        { embed && (
+          <Button className="ub-mr2 ub-flex ub-items-center" onClick={onGoFullViewClicked}>View Trace</Button>
+        )}
         <KeyboardShortcutsHelp className="ub-mr2" />
         <TracePageSearchBar
           updateTextFilter={updateTextFilter}

diff --git a/packages/jaeger-ui/src/components/TracePage/index.js b/packages/jaeger-ui/src/components/TracePage/index.js
@@ -23,7 +23,7 @@ import { connect } from 'react-redux';
 import queryString from 'query-string';
 import type { RouterHistory, Match } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
-import { Input, Button } from 'antd';
+import { Input } from 'antd';
 
 import ArchiveNotifier from './ArchiveNotifier';
 import { actions as archiveActions } from './ArchiveNotifier/duck';
@@ -353,12 +353,6 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
     const numberOfServices = new Set(_values(processes).map(p => p.serviceName)).size;
     return (
       <div>
-        {isEmbed && (
-          <div>
-            <Button onClick={this.goBackSearch}>Go back</Button>
-            <Button onClick={this.goFullView}>Show full view</Button>
-          </div>
-        )}
         {archiveEnabled && (
           <ArchiveNotifier acknowledge={this.acknowledgeArchive} archivedState={archiveTraceState} />
         )}
@@ -381,6 +375,9 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
             updateTextFilter={this.updateTextFilter}
             archiveButtonVisible={archiveEnabled}
             onArchiveClicked={this.archiveTrace}
+            onGoBackClicked={this.goBackSearch}
+            onGoFullViewClicked={this.goFullView}
+            embed={isEmbed}
             ref={this._searchBar}
           />
           {!slimView && (

diff --git a/packages/jaeger-ui/src/components/TracePage/index.test.js b/packages/jaeger-ui/src/components/TracePage/index.test.js
@@ -39,7 +39,6 @@ import * as track from './index.track';
 import { reset as resetShortcuts } from './keyboard-shortcuts';
 import { cancel as cancelScroll } from './scroll-page';
 import SpanGraph from './SpanGraph';
-import { Button } from 'antd';
 import TracePageHeader from './TracePageHeader';
 import { trackSlimHeaderToggle } from './TracePageHeader.track';
 import TraceTimelineViewer from './TraceTimelineViewer';
@@ -159,11 +158,6 @@ describe('<TracePage>', () => {
     expect(wrapper.find(SpanGraph).length).toBe(0);
   });
 
-  it('show buttons with links to the full site and search if is embed', () => {
-    wrapper.setProps({ isEmbed: true });
-    expect(wrapper.find(Button).length).toBe(2);
-  });
-
   it('open a window when goFullView is called', () => {
     wrapper.setProps({ id: '12345' });
     global.open = jest.fn();