Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add uiFind icons, scroll to first match #367

Merged
merged 14 commits into from
May 3, 2019
Merged

add uiFind icons, scroll to first match #367

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a0e296a
WIP - add uiFind icons, scroll to first match
everett980 Apr 2, 2019
ebf9473
Use componentDidUpdate instead of setTimeout
everett980 Apr 11, 2019
37f9a20
Clarify focusUiFind function name, fix existing
everett980 Apr 11, 2019
bb66f09
Add scrollToFirstVisibleSpan tests
everett980 Apr 11, 2019
79f04af
Add scrollToFirstVisibleSpan tests
everett980 Apr 11, 2019
79eb6df
Bolster test coverage for files in PR
everett980 Apr 12, 2019
8a268c2
Improve TracePageSearchBar styling, choose icons
everett980 Apr 15, 2019
5a146ef
Move scroll indicator from set/map to standalone
everett980 Apr 23, 2019
43a8ca5
Update CopyIcon to support spanID deep link
everett980 Apr 24, 2019
5801d3e
Fix CopyIcon css, Swap in copy-to-clipboard
everett980 Apr 25, 2019
73e8691
Improve VirtualizedTraceView shouldComponentUpdate
everett980 Apr 25, 2019
7651dbc
Merge branch 'master' into issue-361-and-360-improve-uiFind-interactions
tiffon Apr 26, 2019
9b9f5c0
Remove unnecessary function calls, improve names
everett980 May 2, 2019
cdbdd9d
Remove nonfunctional focusUiFindMatches call
everett980 May 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Improve TracePageSearchBar styling, choose icons 
Signed-off-by: Everett Ross <reverett@uber.com>
  • Loading branch information
@everett980
everett980 committed Apr 15, 2019
commit 8a268c2c307d8419434b599c6a9a2dd14dbaaaa2
3 changes: 1 addition & 2 deletions packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,6 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
) : (
title
)}
{showShortcutsHelp && <KeyboardShortcutsHelp className="ub-mr2" />}
<TracePageSearchBar
clearSearch={clearSearch}
focusUiFindMatches={focusUiFindMatches}
Expand All @@ -174,7 +173,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
textFilter={textFilter}
navigable={!traceGraphView}
/>

{showShortcutsHelp && <KeyboardShortcutsHelp className="ub-m2" />}
{showViewOptions && (
<AltViewOptions
onTraceGraphViewClicked={onTraceGraphViewClicked}
Expand Down
13 changes: 11 additions & 2 deletions packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,19 @@ limitations under the License.
*/

.TracePageSearchBar {
max-width: 20rem;
width: 40%;
}

.TracePageSearchBar--InputGroup {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should have an initial lowercase:

.TracePageSearchBar--inputGroup

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, you can use the util class .ub-justify-end.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, updated
Where is the list of .ub- classes?

justify-content: flex-end;
}

.TracePageSearchBar--bar {
display: flex;
max-width: 100%;
transition: max-width 1.5s;
}

.TracePageSearchBar--bar:not(:focus-within) {
everett980 marked this conversation as resolved.
Show resolved Hide resolved
max-width: 20rem;
}

Expand All @@ -28,6 +36,7 @@ limitations under the License.
}

.TracePageSearchBar--btn {
border-left: none;
transition: 0.2s;
}

Expand Down
25 changes: 13 additions & 12 deletions packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import * as React from 'react';
import { Button, Input } from 'antd';
import cx from 'classnames';
import IoAndroidLocate from 'react-icons/lib/io/android-locate';

import * as markers from './TracePageSearchBar.markers';
import { trackFilter } from '../index.track';
Expand Down Expand Up @@ -47,7 +48,6 @@ export function TracePageSearchBarFn(props: TracePageSearchBarProps & { forwarde

const count = textFilter ? <span className="TracePageSearchBar--count">{resultCount}</span> : null;

const navigationBtnClass = cx('TracePageSearchBar--btn', { 'is-disabled': !textFilter });
const btnClass = cx('TracePageSearchBar--btn', { 'is-disabled': !textFilter });
const uiFindInputInputProps = {
'data-test': markers.IN_TRACE_SEARCH,
Expand All @@ -57,9 +57,9 @@ export function TracePageSearchBarFn(props: TracePageSearchBarProps & { forwarde
};

return (
<div className="ub-flex-auto ub-mx2 TracePageSearchBar">
<div className="TracePageSearchBar">
{/* style inline because compact overwrites the display */}
<Input.Group compact style={{ display: 'flex' }}>
<Input.Group className="TracePageSearchBar--InputGroup" compact style={{ display: 'flex' }}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please avoid using style unless the style is dynamic and needs to be calculated.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's pre-existing. I can take a stab at fixing it though.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment above the inline style seems to be accurate. I'm going to leave it as is.

<UiFindInput
inputProps={uiFindInputInputProps}
forwardedRef={forwardedRef}
Expand All @@ -68,26 +68,27 @@ export function TracePageSearchBarFn(props: TracePageSearchBarProps & { forwarde
{navigable && (
<>
<Button
className={navigationBtnClass}
className={cx(btnClass, 'ant-btn-icon-only')}
disabled={!textFilter}
htmlType="button"
onClick={focusUiFindMatches}
>
<IoAndroidLocate />
tiffon marked this conversation as resolved.
Show resolved Hide resolved
</Button>
<Button
className={btnClass}
disabled={!textFilter}
htmlType="button"
icon="up"
onClick={prevResult}
/>
<Button
className={navigationBtnClass}
className={btnClass}
disabled={!textFilter}
htmlType="button"
icon="down"
onClick={nextResult}
/>
<Button
className={navigationBtnClass}
disabled={!textFilter}
htmlType="button"
icon="search"
onClick={focusUiFindMatches}
/>
</>
)}
<Button
Expand Down
8 changes: 5 additions & 3 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@

import React from 'react';
import { Button, Divider, Tooltip } from 'antd';
import ZoomIn from 'react-icons/lib/ti/zoom-in';

import AccordianKeyValues from './AccordianKeyValues';
import AccordianLogs from './AccordianLogs';
Expand Down Expand Up @@ -117,11 +118,12 @@ export default function SpanDetail(props: SpanDetailProps) {
<span className="SpanDetail--debugLabel" data-label="SpanID:" /> {spanID}
<Tooltip placement="topRight" title="Click to add to filter for deep linking">
<Button
className="SpanDetail--debugValue"
className="SpanDetail--debugValue ant-btn-icon-only"
htmlType="button"
icon="down"
onClick={() => addToUiFind(spanID)}
/>
>
<ZoomIn size="1.4em" />
tiffon marked this conversation as resolved.
Show resolved Hide resolved
</Button>
</Tooltip>
</small>
</div>
Expand Down