SearchTrace and TracePage Embedded components

Signed-off-by: Alberto Gutierrez <aljesusg@gmail.com>

packages/jaeger-ui/src/components/App/Page.js

@@ -52,14 +52,17 @@ export class PageImpl extends React.Component<Props> {
   }
 
   render() {
+    const isEmbed = this.props.search.includes('embed');
     return (
       <div>
         <Helmet title="Jaeger UI" />
         <Layout>
-          <Header className="Page--topNav">
-            <TopNav />
-          </Header>
-          <Content className="Page--content">{this.props.children}</Content>
+          {!isEmbed && (
+            <Header className="Page--topNav">
+              <TopNav />
+            </Header>
+          )}
+          <Content className={ !isEmbed && "Page--content"}>{this.props.children}</Content>
         </Layout>
       </div>
     );

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.js

@@ -36,6 +36,7 @@ type Props = {
   linkTo: string,
   toggleComparison: string => void,
   trace: Trace,
+  disableComparision: boolean,
 };
 
 const isErrorTag = ({ key, value }) => key === 'error' && (value === true || value === 'true');
@@ -44,7 +45,14 @@ export default class ResultItem extends React.PureComponent<Props> {
   props: Props;
 
   render() {
-    const { durationPercent, isInDiffCohort, linkTo, toggleComparison, trace } = this.props;
+    const {
+      durationPercent,
+      isInDiffCohort,
+      linkTo,
+      disableComparision,
+      toggleComparison,
+      trace,
+    } = this.props;
     const { duration, services, startTime, spans, traceName, traceID } = trace;
     const mDate = moment(startTime / 1000);
     const timeStr = mDate.format('h:mm:ss a');
@@ -61,6 +69,7 @@ export default class ResultItem extends React.PureComponent<Props> {
           toggleComparison={toggleComparison}
           traceID={traceID}
           traceName={traceName}
+          disableComparision={disableComparision}
         />
         <Link to={linkTo}>
           <Row>

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.js

@@ -37,6 +37,7 @@ type Props = {
   toggleComparison: (string, boolean) => void,
   traceID: string,
   traceName: string,
+  disableComparision?: boolean,
 };
 
 export default class ResultItemTitle extends React.PureComponent<Props> {
@@ -64,6 +65,7 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
       state,
       traceID,
       traceName,
+      disableComparision,
     } = this.props;
     let WrapperComponent = 'div';
     const wrapperProps: { [string]: string } = { className: 'ResultItemTitle--item ub-flex-auto' };
@@ -74,12 +76,14 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
     const isErred = state === fetchedState.ERROR;
     return (
       <div className="ResultItemTitle">
-        <Checkbox
-          className="ResultItemTitle--item ub-flex-none"
-          checked={!isErred && isInDiffCohort}
-          disabled={isErred}
-          onChange={this.toggleComparison}
-        />
+        {!disableComparision && (
+          <Checkbox
+            className="ResultItemTitle--item ub-flex-none"
+            checked={!isErred && isInDiffCohort}
+            disabled={isErred}
+            onChange={this.toggleComparison}
+          />
+        )}
         <WrapperComponent {...wrapperProps}>
           <span className="ResultItemTitle--durationBar" style={{ width: `${durationPercent}%` }} />
           {duration != null && <span className="ub-right ub-relative">{formatDuration(duration)}</span>}

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, Select } from 'antd';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
 
 import DiffSelection from './DiffSelection';
@@ -37,7 +37,11 @@ type SearchResultsProps = {
   cohortRemoveTrace: string => void,
   diffCohort: FetchedTrace[],
   goToTrace: string => void,
+  isEmbed?: boolean,
+  hideGraph?: boolean,
+  disableComparision?: boolean,
   loading: boolean,
+  onGoFullClicked: () => void,
   maxTraceDuration: number,
   skipMessage?: boolean,
   traces: TraceSummary[],
@@ -107,45 +111,62 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
         </React.Fragment>
       );
     }
-    const { goToTrace, maxTraceDuration } = this.props;
+    const {
+      goToTrace,
+      isEmbed,
+      hideGraph,
+      disableComparision,
+      onGoFullClicked,
+      maxTraceDuration,
+    } = this.props;
     const cohortIds = new Set(diffCohort.map(datum => datum.id));
     return (
       <div>
         <div>
           <div className="SearchResults--header">
-            <div className="ub-p3">
-              <ScatterPlot
-                data={traces.map(t => ({
-                  x: t.startTime,
-                  y: t.duration,
-                  traceID: t.traceID,
-                  size: t.spans.length,
-                  name: t.traceName,
-                }))}
-                onValueClick={t => {
-                  goToTrace(t.traceID);
-                }}
-              />
-            </div>
+            {!hideGraph && (
+              <div className="ub-p3">
+                <ScatterPlot
+                  data={traces.map(t => ({
+                    x: t.startTime,
+                    y: t.duration,
+                    traceID: t.traceID,
+                    size: t.spans.length,
+                    name: t.traceName,
+                  }))}
+                  onValueClick={t => {
+                    goToTrace(t.traceID);
+                  }}
+                />
+              </div>
+            )}
             <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>
             </div>
           </div>
         </div>
         <div>
-          {diffSelection}
+          {!disableComparision && diffSelection}
           <ul className="ub-list-reset">
             {traces.map(trace => (
               <li className="ub-my3" key={trace.traceID}>
                 <ResultItem
                   durationPercent={getPercentageOfDuration(trace.duration, maxTraceDuration)}
                   isInDiffCohort={cohortIds.has(trace.traceID)}
-                  linkTo={prefixUrl(`/trace/${trace.traceID}`)}
+                  linkTo={prefixUrl(isEmbed ? `/trace/${trace.traceID}?embed` : `/trace/${trace.traceID}`)}
                   toggleComparison={this.toggleComparison}
                   trace={trace}
+                  disableComparision={disableComparision}
                 />
               </li>
             ))}

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js

@@ -20,6 +20,7 @@ import * as markers from './index.markers';
 import ResultItem from './ResultItem';
 import ScatterPlot from './ScatterPlot';
 import LoadingIndicator from '../../common/LoadingIndicator';
+import DiffSelection from './DiffSelection';
 
 describe('<SearchResults>', () => {
   let wrapper;
@@ -48,6 +49,16 @@ describe('<SearchResults>', () => {
     expect(wrapper.find(LoadingIndicator).length).toBe(1);
   });
 
+  it('hide scatter plot if queryparam hideGraph', () => {
+    wrapper.setProps({ hideGraph: true });
+    expect(wrapper.find(ScatterPlot).length).toBe(0);
+  });
+
+  it('hide DiffSelection if queryparam disableComparision', () => {
+    wrapper.setProps({ disableComparision: true });
+    expect(wrapper.find(DiffSelection).length).toBe(0);
+  });
+
   describe('search finished with results', () => {
     it('shows a scatter plot', () => {
       expect(wrapper.find(ScatterPlot).length).toBe(1);

packages/jaeger-ui/src/components/SearchTracePage/index.js

@@ -60,7 +60,15 @@ export class SearchTracePageImpl extends Component {
   }
 
   goToTrace = traceID => {
-    this.props.history.push(prefixUrl(`/trace/${traceID}`));
+    const url = this.props.isEmbed ? `/trace/${traceID}?embed` : `/trace/${traceID}`;
+    this.props.history.push(prefixUrl(url));
+  };
+
+  goFullView = () => {
+    const urlQuery = this.props.query;
+    delete urlQuery.embed;
+    const url = `/search?${queryString.stringify(urlQuery)}`;
+    window.open(prefixUrl(url), '_blank');
   };
 
   render() {
@@ -75,19 +83,24 @@ export class SearchTracePageImpl extends Component {
       maxTraceDuration,
       services,
       traceResults,
+      isEmbed,
+      hideGraph,
+      disableComparision,
     } = this.props;
     const hasTraceResults = traceResults && traceResults.length > 0;
     const showErrors = errors && !loadingTraces;
     const showLogo = isHomepage && !hasTraceResults && !loadingTraces && !errors;
     return (
       <div>
         <Row>
-          <Col span={6} className="SearchTracePage--column">
-            <div className="SearchTracePage--find">
-              <h2>Find Traces</h2>
-              {!loadingServices && services ? <SearchForm services={services} /> : <LoadingIndicator />}
-            </div>
-          </Col>
+          {!isEmbed && (
+            <Col span={6} className="SearchTracePage--column">
+              <div className="SearchTracePage--find">
+                <h2>Find Traces</h2>
+                {!loadingServices && services ? <SearchForm services={services} /> : <LoadingIndicator />}
+              </div>
+            </Col>
+          )}
           <Col span={18} className="SearchTracePage--column">
             {showErrors && (
               <div className="js-test-error-message">
@@ -104,17 +117,22 @@ export class SearchTracePageImpl extends Component {
                 cohortRemoveTrace={cohortRemoveTrace}
                 diffCohort={diffCohort}
                 skipMessage={isHomepage}
+                onGoFullClicked={this.goFullView}
                 traces={traceResults}
+                isEmbed={isEmbed}
+                hideGraph={hideGraph}
+                disableComparision={disableComparision}
               />
             )}
-            {showLogo && (
-              <img
-                className="SearchTracePage--logo js-test-logo"
-                alt="presentation"
-                src={JaegerLogo}
-                width="400"
-              />
-            )}
+            {showLogo &&
+              !isEmbed && (
+                <img
+                  className="SearchTracePage--logo js-test-logo"
+                  alt="presentation"
+                  src={JaegerLogo}
+                  width="400"
+                />
+              )}
           </Col>
         </Row>
       </div>
@@ -123,7 +141,11 @@ export class SearchTracePageImpl extends Component {
 }
 
 SearchTracePageImpl.propTypes = {
+  query: PropTypes.object,
   isHomepage: PropTypes.bool,
+  isEmbed: PropTypes.bool,
+  hideGraph: PropTypes.bool,
+  disableComparision: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
   traceResults: PropTypes.array,
   diffCohort: PropTypes.array,
@@ -196,6 +218,9 @@ const stateServicesXformer = getLastXformCacher(stateServices => {
 // export to test
 export function mapStateToProps(state) {
   const query = queryString.parse(state.router.location.search);
+  const isEmbed = 'embed' in query;
+  const hideGraph = 'hideGraph' in query;
+  const disableComparision = 'disableComparision' in query;
   const isHomepage = !Object.keys(query).length;
   const { traces, maxDuration, traceError, loadingTraces } = stateTraceXformer(state.trace);
   const diffCohort = stateTraceDiffXformer(state.trace, state.traceDiff);
@@ -210,7 +235,11 @@ export function mapStateToProps(state) {
   const sortBy = sortFormSelector(state, 'sortBy');
   const traceResults = sortedTracesXformer(traces, sortBy);
   return {
+    query,
     diffCohort,
+    isEmbed,
+    hideGraph,
+    disableComparision,
     isHomepage,
     loadingServices,
     loadingTraces,

packages/jaeger-ui/src/components/SearchTracePage/index.test.js

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import prefixUrl from '../../utils/prefix-url';
+
 jest.mock('redux-form', () => {
   function reduxForm() {
     return component => component;
@@ -48,6 +50,8 @@ describe('<SearchTracePage>', () => {
     traceResults = [{ traceID: 'a', spans: [], processes: {} }, { traceID: 'b', spans: [], processes: {} }];
     props = {
       traceResults,
+      isEmbed: false,
+      disableComparision: false,
       isHomepage: false,
       loadingServices: false,
       loadingTraces: false,
@@ -100,6 +104,23 @@ describe('<SearchTracePage>', () => {
     wrapper.setProps({ isHomepage: true, traceResults: [] });
     expect(wrapper.find('.js-test-logo').length).toBe(1);
   });
+
+  it('hide SearchForm if is embed', () => {
+    wrapper.setProps({ isEmbed: true });
+    expect(wrapper.find(SearchForm).length).toBe(0);
+  });
+
+  it('hide logo if is embed', () => {
+    wrapper.setProps({ isEmbed: true });
+    expect(wrapper.find('.js-test-logo').length).toBe(0);
+  });
+
+  it('open a window when goFullView is called', () => {
+    wrapper.setProps({ query: { embed: 'embed', service: 'jaeger-query' } });
+    global.open = jest.fn();
+    wrapper.instance().goFullView();
+    expect(global.open).toBeCalledWith(prefixUrl('/search?service=jaeger-query'), '_blank');
+  });
 });
 
 describe('mapStateToProps()', () => {
@@ -140,6 +161,10 @@ describe('mapStateToProps()', () => {
     expect(diffCohort[0].data.traceID).toBe(trace.traceID);
 
     expect(rest).toEqual({
+      isEmbed: false,
+      hideGraph: false,
+      disableComparision: false,
+      query: {},
       isHomepage: true,
       // the redux-form `formValueSelector` mock returns `null` for "sortBy"
       sortTracesBy: null,