Embed components

jaegertracing · Oct 8, 2018 · 9909f47 · 9909f47
1 parent d7c7e10
commit 9909f47
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/packages/jaeger-ui/src/components/App/Page.js b/packages/jaeger-ui/src/components/App/Page.js
@@ -52,13 +52,16 @@ 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>
+          {!isEmbed && (
+            <Header className="Page--topNav">
+              <TopNav />
+            </Header>
+          )}
           <Content className="Page--content">{this.props.children}</Content>
         </Layout>
       </div>

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
@@ -37,6 +37,7 @@ type SearchResultsProps = {
   cohortRemoveTrace: string => void,
   diffCohort: FetchedTrace[],
   goToTrace: string => void,
+  isEmbed?: boolean,
   loading: boolean,
   maxTraceDuration: number,
   skipMessage?: boolean,
@@ -107,7 +108,7 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
         </React.Fragment>
       );
     }
-    const { goToTrace, maxTraceDuration } = this.props;
+    const { goToTrace, isEmbed, maxTraceDuration } = this.props;
     const cohortIds = new Set(diffCohort.map(datum => datum.id));
     return (
       <div>
@@ -143,7 +144,7 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
                 <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}
                 />

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/index.js b/packages/jaeger-ui/src/components/SearchTracePage/index.js
@@ -60,7 +60,8 @@ 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));
   };
 
   render() {
@@ -75,19 +76,22 @@ export class SearchTracePageImpl extends Component {
       maxTraceDuration,
       services,
       traceResults,
+      isEmbed,
     } = 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">
@@ -105,16 +109,18 @@ export class SearchTracePageImpl extends Component {
                 diffCohort={diffCohort}
                 skipMessage={isHomepage}
                 traces={traceResults}
+                isEmbed={isEmbed}
               />
             )}
-            {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>
@@ -124,6 +130,7 @@ export class SearchTracePageImpl extends Component {
 
 SearchTracePageImpl.propTypes = {
   isHomepage: PropTypes.bool,
+  isEmbed: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
   traceResults: PropTypes.array,
   diffCohort: PropTypes.array,
@@ -196,6 +203,7 @@ 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 isHomepage = !Object.keys(query).length;
   const { traces, maxDuration, traceError, loadingTraces } = stateTraceXformer(state.trace);
   const diffCohort = stateTraceDiffXformer(state.trace, state.traceDiff);
@@ -211,6 +219,7 @@ export function mapStateToProps(state) {
   const traceResults = sortedTracesXformer(traces, sortBy);
   return {
     diffCohort,
+    isEmbed,
     isHomepage,
     loadingServices,
     loadingTraces,