Skip to content

Commit

Permalink
Commnets addressed
Browse files Browse the repository at this point in the history 
Signed-off-by: Alberto Gutierrez <aljesusg@gmail.com>
  • Loading branch information
@aljesusg
aljesusg committed Nov 12, 2018
1 parent fdf717e commit 939104c
Show file tree
Hide file tree
Showing 8 changed files with 255 additions and 143 deletions.
7 changes: 4 additions & 3 deletions packages/jaeger-ui/src/components/App/Page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
// limitations under the License.

import * as React from 'react';
import queryString from 'query-string';
import { Layout } from 'antd';
import Helmet from 'react-helmet';
import { connect } from 'react-redux';
Expand Down Expand Up @@ -52,17 +53,17 @@ export class PageImpl extends React.Component<Props> {
}

render() {
const isEmbed = this.props.search.includes('embed');
const { embed } = queryString.parse(this.props.search);
return (
<div>
<Helmet title="Jaeger UI" />
<Layout>
{!isEmbed && (
{embed === undefined && (
<Header className="Page--topNav">
<TopNav />
</Header>
)}
<Content className={ !isEmbed && "Page--content"}>{this.props.children}</Content>
<Content className={embed === undefined && 'Page--content'}>{this.props.children}</Content>
</Layout>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ export default class ResultItem extends React.PureComponent<Props> {

render() {
const {
disableComparision,
durationPercent,
isInDiffCohort,
linkTo,
disableComparision,
toggleComparison,
trace,
} = this.props;
Expand Down
25 changes: 11 additions & 14 deletions packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
// limitations under the License.

import * as React from 'react';
import { Button, Select } from 'antd';
import { Select, Button } from 'antd';
import { Field, reduxForm, formValueSelector } from 'redux-form';

import DiffSelection from './DiffSelection';
Expand All @@ -39,9 +39,8 @@ type SearchResultsProps = {
goToTrace: string => void,
isEmbed?: boolean,
hideGraph?: boolean,
disableComparision?: boolean,
loading: boolean,
onGoFullClicked: () => void,
getSearchURL: () => string,
maxTraceDuration: number,
skipMessage?: boolean,
traces: TraceSummary[],
Expand Down Expand Up @@ -111,14 +110,7 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
</React.Fragment>
);
}
const {
goToTrace,
isEmbed,
hideGraph,
disableComparision,
onGoFullClicked,
maxTraceDuration,
} = this.props;
const { goToTrace, isEmbed, hideGraph, getSearchURL, maxTraceDuration } = this.props;
const cohortIds = new Set(diffCohort.map(datum => datum.id));
return (
<div>
Expand All @@ -144,7 +136,12 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
<SelectSort />
{isEmbed && (
<label className="ub-right">
<Button className="ub-mr2 ub-flex ub-items-center" onClick={onGoFullClicked}>
<Button
className="ub-mr2 ub-items-center"
icon="export"
target="_blank"
href={getSearchURL()}
>
View Results
</Button>
</label>
Expand All @@ -156,7 +153,7 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
</div>
</div>
<div>
{!disableComparision && diffSelection}
{diffSelection}
<ul className="ub-list-reset">
{traces.map(trace => (
<li className="ub-my3" key={trace.traceID}>
Expand All @@ -166,7 +163,7 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
linkTo={prefixUrl(isEmbed ? `/trace/${trace.traceID}?embed` : `/trace/${trace.traceID}`)}
toggleComparison={this.toggleComparison}
trace={trace}
disableComparision={disableComparision}
disableComparision={isEmbed}
/>
</li>
))}
Expand Down
21 changes: 7 additions & 14 deletions packages/jaeger-ui/src/components/SearchTracePage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,10 @@ export class SearchTracePageImpl extends Component {
this.props.history.push(prefixUrl(url));
};

goFullView = () => {
getSearchURL = () => {
const urlQuery = this.props.query;
delete urlQuery.embed;
const url = `/search?${queryString.stringify(urlQuery)}`;
window.open(prefixUrl(url), '_blank');
return `/search?${queryString.stringify(urlQuery)}`;
};

render() {
Expand All @@ -85,7 +84,6 @@ export class SearchTracePageImpl extends Component {
traceResults,
isEmbed,
hideGraph,
disableComparision,
} = this.props;
const hasTraceResults = traceResults && traceResults.length > 0;
const showErrors = errors && !loadingTraces;
Expand All @@ -101,7 +99,7 @@ export class SearchTracePageImpl extends Component {
</div>
</Col>
)}
<Col span={18} className="SearchTracePage--column">
<Col span={!isEmbed ? 18 : 24} className="SearchTracePage--column">
{showErrors && (
<div className="js-test-error-message">
<h2>There was an error querying for traces:</h2>
Expand All @@ -117,11 +115,10 @@ export class SearchTracePageImpl extends Component {
cohortRemoveTrace={cohortRemoveTrace}
diffCohort={diffCohort}
skipMessage={isHomepage}
onGoFullClicked={this.goFullView}
getSearchURL={this.getSearchURL}
traces={traceResults}
isEmbed={isEmbed}
hideGraph={hideGraph}
disableComparision={disableComparision}
/>
)}
{showLogo &&
Expand All @@ -145,7 +142,6 @@ SearchTracePageImpl.propTypes = {
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,
Expand Down Expand Up @@ -218,9 +214,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 hideGraph = 'hideGraph' in query;
const disableComparision = 'disableComparision' in query;
const { embed, hideGraph } = queryString.parse(state.router.location.search);
const isHomepage = !Object.keys(query).length;
const { traces, maxDuration, traceError, loadingTraces } = stateTraceXformer(state.trace);
const diffCohort = stateTraceDiffXformer(state.trace, state.traceDiff);
Expand All @@ -237,9 +231,8 @@ export function mapStateToProps(state) {
return {
query,
diffCohort,
isEmbed,
hideGraph,
disableComparision,
isEmbed: embed !== undefined,
hideGraph: hideGraph !== undefined,
isHomepage,
loadingServices,
loadingTraces,
Expand Down
11 changes: 2 additions & 9 deletions packages/jaeger-ui/src/components/TracePage/TracePageHeader.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,19 @@ limitations under the License.
display: flex;
}

Divider {
color: red;
}

.TracePageHeader--titleRowEmbed {
align-items: center;
background-color: #ececec;
border-bottom: 1px solid #d8d8d8;
display: flex;
}

.TracePageHeader--title {
.TracePageHeader--title,
TracePageHeader--titleEmbed {
margin: 0;
padding: 0.25rem 0.5rem;
}

.TracePageHeader--titleEmbed {
margin: 0;
padding: 0.25rem 0.5rem;
}
.TracePageHeader--title:hover {
background: #f5f5f5;
}
Expand Down
106 changes: 31 additions & 75 deletions packages/jaeger-ui/src/components/TracePage/TracePageHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,9 @@
// limitations under the License.

import * as React from 'react';
import { Button, Dropdown, Icon, Input, Menu, Divider } from 'antd';
import { Button, Dropdown, Icon, Input, Menu } from 'antd';
import IoChevronDown from 'react-icons/lib/io/chevron-down';
import IoChevronRight from 'react-icons/lib/io/chevron-right';
import IoChevronLeft from 'react-icons/lib/io/chevron-left';
import IoIosFilingOutline from 'react-icons/lib/io/ios-filing-outline';
import { Link } from 'react-router-dom';

Expand Down Expand Up @@ -46,10 +45,6 @@ type TracePageHeaderProps = {
resultCount: number,
archiveButtonVisible: boolean,
onArchiveClicked: () => void,
onGoBackClicked: () => void,
onGoFullViewClicked: () => void,
embed: boolean,
details: boolean,
// these props are used by the `HEADER_ITEMS`
// eslint-disable-next-line react/no-unused-prop-types
timestamp: number,
Expand Down Expand Up @@ -109,17 +104,13 @@ export function TracePageHeaderFn(props: TracePageHeaderProps) {
name,
slimView,
onSlimViewClicked,
onGoBackClicked,
onGoFullViewClicked,
updateTextFilter,
textFilter,
prevResult,
nextResult,
clearSearch,
resultCount,
forwardedRef,
embed,
details,
} = props;

if (!traceID) {
Expand Down Expand Up @@ -179,74 +170,39 @@ export function TracePageHeaderFn(props: TracePageHeaderProps) {
},
];

const embedComponent = (
<div className="TracePageHeader--titleRowEmbed">
<a className="ub-mr2 ub-flex ub-items-center" onClick={onGoBackClicked}>
<IoChevronLeft className="ub-mr2" />Go back
</a>
<Divider type="vertical" />
<h1 className="TracePageHeader--titleEmbed ub-flex-auto ub-mr2 ub-items-center">
{name || FALLBACK_TRACE_NAME}
</h1>
<a className="ub-mr2 ub-flex ub-items-center" onClick={onGoFullViewClicked}>
View Trace
</a>
<TracePageSearchBar
updateTextFilter={updateTextFilter}
textFilter={textFilter}
prevResult={prevResult}
nextResult={nextResult}
clearSearch={clearSearch}
resultCount={resultCount}
ref={forwardedRef}
/>
</div>
);

return (
<header>
{embed ? (
embedComponent
) : (
<div className="TracePageHeader--titleRow">
<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>
<KeyboardShortcutsHelp className="ub-mr2" />
<TracePageSearchBar
updateTextFilter={updateTextFilter}
textFilter={textFilter}
prevResult={prevResult}
nextResult={nextResult}
clearSearch={clearSearch}
resultCount={resultCount}
ref={forwardedRef}
/>
<Dropdown overlay={viewMenu}>
<Button className="ub-mr2">
View Options <Icon type="down" />
</Button>
</Dropdown>
<div className="TracePageHeader--titleRow">
<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>
<KeyboardShortcutsHelp className="ub-mr2" />
<TracePageSearchBar
updateTextFilter={updateTextFilter}
textFilter={textFilter}
prevResult={prevResult}
nextResult={nextResult}
clearSearch={clearSearch}
resultCount={resultCount}
ref={forwardedRef}
/>
<Dropdown overlay={viewMenu}>
<Button className="ub-mr2">
View Options <Icon type="down" />
</Button>
</Dropdown>

{archiveButtonVisible && (
<Button className="ub-mr2 ub-flex ub-items-center" onClick={onArchiveClicked}>
<IoIosFilingOutline className="TracePageHeader--archiveIcon" />
Archive Trace
</Button>
)}
</div>
)}
{((!slimView && !embed) || (embed && details)) && (
<LabeledList className="TracePageHeader--overviewItems" items={overviewItems} />
)}
{archiveButtonVisible && (
<Button className="ub-mr2 ub-flex ub-items-center" onClick={onArchiveClicked}>
<IoIosFilingOutline className="TracePageHeader--archiveIcon" />
Archive Trace
</Button>
)}
</div>
{!slimView && <LabeledList className="TracePageHeader--overviewItems" items={overviewItems} />}
</header>
);
}
Expand Down
Loading

0 comments on commit 939104c

Please sign in to comment.