[Logs UI] Use short timestamps in the log stream view #47042
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
afgomez
added
v8.0.0
Feature:Logs UI
|
Pinging @elastic/infra-logs-ui |
💔 Build Failed |
afgomez
force-pushed
the
45986-log-short-timestamp
branch
from
be227dc to
039c171
Compare
💔 Build Failed |
jfsiii
reviewed
Oct 2, 2019
x-pack/legacy/plugins/infra/public/components/formatted_time.tsx
Outdated
Show resolved
Hide resolved
jfsiii
reviewed
Oct 2, 2019
x-pack/legacy/plugins/infra/public/components/formatted_time.tsx
Outdated
Show resolved
Hide resolved
jfsiii
reviewed
Oct 2, 2019
x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx
Outdated
Show resolved
Hide resolved
afgomez
force-pushed
the
45986-log-short-timestamp
branch
from
039c171 to
934f683
Compare
💔 Build Failed |
afgomez
force-pushed
the
45986-log-short-timestamp
branch
2 times, most recently
from
9bb2fc1 to
643f539
Compare
💔 Build Failed |
afgomez
force-pushed
the
45986-log-short-timestamp
branch
from
643f539 to
d3bdd0a
Compare
💔 Build Failed |
afgomez
force-pushed
the
45986-log-short-timestamp
branch
from
d3bdd0a to
10ac82e
Compare
jfsiii
reviewed
Oct 2, 2019
x-pack/legacy/plugins/infra/public/components/formatted_time.tsx
Outdated
Show resolved
Hide resolved
| columnWidth={columnWidths[columnConfiguration.timestampColumn.id]} | ||
| data-test-subj="logColumnHeader timestampLogColumnHeader" | ||
| > | ||
| {firstVisiblePosition ? localizedDate(firstVisiblePosition.time) : 'Timestamp'} |
There was a problem hiding this comment.
👍 I like that localizedDate is a utility function which can be used directly, by hooks, etc
x-pack/legacy/plugins/infra/public/utils/formatters/datetime.ts
Outdated
Show resolved
Hide resolved
💔 Build Failed |
💔 Build Failed
|
afgomez
force-pushed
the
45986-log-short-timestamp
branch
from
7a237c0 to
94ae431
Compare
💔 Build Failed
|
💔 Build Failed
|
afgomez
force-pushed
the
45986-log-short-timestamp
branch
from
b766a14 to
d9af56d
Compare
💚 Build Succeeded
|
katrin-freihofner
approved these changes
Oct 7, 2019
| @@ -83,13 +89,16 @@ const LogColumnHeadersWrapper = euiStyled.div.attrs({ | |||
| justify-content: flex-start; | |||
| overflow: hidden; | |||
| padding-right: ${ASSUMED_SCROLLBAR_WIDTH}px; | |||
| border-bottom: ${props => props.theme.eui.euiBorderThin}; | |||
| box-shadow: 0 2px 2px -1px ${props => transparentize(0.3, props.theme.eui.euiColorLightShade)}; | |||
There was a problem hiding this comment.
I think we could use the euiSlightShadow mixin here.
There was a problem hiding this comment.
I think we could use the
euiSlightShadowmixin here.
I'm not sure that can be done with the CSS-in-JS library we use. I'll give it a shot
added 9 commits
October 17, 2019 12:39
Allows the consumers of the hook to specify if they want to show the full date and time or just the time.
I tweaked the `RendererResult` type to allow returning strings as well in the renderer of `WithLogPosition`.
Make the wrapper relative to ensure the shadow stays on top of the rows, even when they are hovered.
afgomez
force-pushed
the
45986-log-short-timestamp
branch
from
d9af56d to
0347e3e
Compare
💚 Build Succeeded |
Kerry350
approved these changes
Oct 17, 2019
afgomez
pushed a commit
to afgomez/kibana
that referenced
this pull request
Oct 17, 2019
This commit changes the appearance of the log stream page. It removes the date value from the timestamp column, making it shorter and giving more space for the message of the log When the date of two log entries is different, we add a marker to indicate this change. The date of the first visible log item is written in the header of the table.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR changes the appearance of the log stream page. It removes the date value from the timestamp column, making it shorter and giving more space for the message.
When the date of two log entries is different, we add a marker to indicate this change. The date of the first visible log item is written in the header of the table.
Screenshots
Before:
After:
Known issues
When the user scrolls past a date marker the table header takes around a second to update. This is related to how we handle scrolling in this view. Since this also affects other parts of the view (i.e., how the minimap updates) and needs a big refactor, I would suggest to fix it in a different PR.
Closes #45986.
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n supportDocumentation was added for features that require explanation or tutorialsThis was checked for keyboard-only and screenreader accessibilityFor maintainers
This was checked for breaking API changes and was labeled appropriately