8000 feat/fix: Toggle "time ago" and timestamp with interactive tooltip by RomanLamsal1337 · Pull Request #1043 · tchiotludo/akhq · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat/fix: Toggle "time ago" and timestamp with interactive tooltip #1043

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 “ 8000 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

Jump to bottom
Merged
merged 10 commits into from
Apr 20, 2022
Merged

feat/fix: Toggle "time ago" and timestamp with interactive tooltip #1043

merged 10 commits into from
Apr 20, 2022

Conversation

RomanLamsal1337
Copy link
Contributor

Fixes the current behavior of not being able to select the ISO date displayed in the tooltips of the TopicData table (see comment below).

Also added a dropdown to switch between displaying relative times via react-timeago or plain ISO dates. The tooltip remains, but switches to either option.

fixes #938

LukasHanke3006 and others added 2 commits March 17, 2022 09:13
@LukasHanke3006 @romanlamsal
@IngoStrauch2020 @FabianBesner2020 @timonback @MartinSchuenemann2000
feat(ui): add date format options to TopicData.jsx view (tchiotludo#938)
1687e51 
Co-authored-by: Roman Lamsal <roman@lamsal.de>
Co-authored-by: Ingo Strauch <ingo.strauch@otto.de>
Co-authored-by: Fabian Besner <fabian.besner@otto.de>
Co-authored-by: Timon Back <timon.back@otto.de>
Co-authored-by: Martin Schuenemann <martin.schuenemann@otto.de>
@LukasHanke3006 @romanlamsal
@IngoStrauch2020 @FabianBesner2020 @timonback @MartinSchuenemann2000
fix(ui): skip extraRow columns in colspan calculation
c583042 
Co-authored-by: Roman Lamsal <roman@lamsal.de>
Co-authored-by: Ingo Strauch <ingo.strauch@otto.de>
Co-authored-by: Fabian Besner <fabian.besner@otto.de>
Co-authored-by: Timon Back <timon.back@otto.de>
Co-authored-by: Martin Schuenemann <martin.schuenemann@otto.de>
RomanLamsal1337
RomanLamsal1337 commented Mar 17, 2022
View reviewed changes
client/src/containers/Topic/Topic/TopicData/TopicData.jsx Outdated
const isoDate = obj[col.accessor]
const TimeAgoComp = <TimeAgo date={Date.parse(isoDate)} title={""}/>
return (
<Tooltip arrow title={!this.state.showRelativeTimes ? TimeAgoComp : isoDate} interactive>
Copy link
Contributor Author
@RomanLamsal1337 RomanLamsal1337 Mar 17, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

The material-ui tooltip interactive prop ensures that the tooltip's content can be copied.

@RomanLamsal1337
Copy link
Contributor Author
RomanLamsal1337 commented Mar 17, 2022 •
edited
Loading

We decided to not add the showRelativeTimes flag to the URL queryparams as the settings only affects the view and not the actual data set which will be displayed.

Might be added to localstorage, any thoughts on this?

@tchiotludo
Copy link
Owner

Hi,
thanks for that !
The better will be to uses Ui Options that will be configurable on backend and save also on client side on localstorage ?
What do you think about that ?

@lhanke-dev
Copy link
Contributor

Hi @tchiotludo, i'll create a UiOptions property for that and add it to the settings page.

Are you nevertheless okay with keeping the toggle in the filter bar of the table?
I'd say it's easier to be found in that location, especially when one's new to AKHQ.

Summary: UiOption backend + UiOption frontend settings page + Toggle in the table header

@tchiotludo
Copy link
Owner

@lhanke-dev : Perfect, I didn't notice the toggle, I will look at this weekend if possible.
If it's already here, keep it, If it annoyed me, I will remove myself ;)

@lhanke-dev
Copy link
Contributor

I just added the requested settings.

During implementation i noticed that in addition to the topic data view, the topic list and tail view also display relative timestamps.

I'll enhance the PR to respect the setting in both of these views too.

@lhanke-dev
Copy link
Contributor
lhanke-dev commented Mar 20, 2022 •
edited
Loading

@tchiotludo: The date-time-format setting is now used in TopicList, TopicData and Tail view. I think you can have a look at it again. :)

@tchiotludo tchiotludo force-pushed the feature/akhq-938-date-format-on-topic-data-view branch from 1f96a3e to 898a302 Compare March 23, 2022 09:46
@tchiotludo tchiotludo merged commit b665127 into tchiotludo:dev Apr 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Allow to toggle "time ago" and timestamp
4 participants
@RomanLamsal1337 @tchiotludo @lhanke-dev @LukasHanke3006
0