Skip to content

Migrate app frontend to Vue - #936

Merged
susnux merged 17 commits into
masterfrom
feat/migrate-to-vue
Jul 21, 2023
Merged

Migrate app frontend to Vue#936
susnux merged 17 commits into
masterfrom
feat/migrate-to-vue

Conversation

@susnux

@susnuxsusnux commented Jul 11, 2023•
edited
Loading

Copy link
Copy Markdown
Contributor

Rewrite of the frontend code using Typescript + Vue and building with Vite.

Changes ✨

  • Rewrite using Vue instead of React
  • Loading a local log file is supported
  • Sorting log table by level, app or time
  • Filtering log table by search query (by default also listens on CTRL+F to block unified search (except when a11y shortcuts is configured).
  • Show raw log entries in details modal
  • Keep features of React version (copy entries (raw & formatted), exception parsing and displaying, multiple time display formats (raw, local style, UTC), etc.
  • 100% code coverage (unit tests) on logic (stores, utils).

Resolves 🐛

Screenshots 🖼️

whatimage
familiar ui look (tried to keep basic layout the same)image
proper action menu for copy and to open the details modalimage
details modal for raw log entry or the full exception (incl. stack trace)image
consistent setting dialogimage
local log files are possible to loadimage

Screen recording 📹

logreader.mp4

(Note that the local log file did not magically appear but the upload dialog was simply not part of the recorded window 😉 )

Done ✔️

  • Migrate build environment (configs etc)
  • Migrate log table
  • Logic for app settings
    • Backend API for settings and initial state
    • Frontend store
  • Logic for handling server logs
    • Parsing
    • Manually loading
    • Polling
  • Automatic loading of new / old log entries aka infinite scroll
  • Sorting the table
  • Searching and filtering the table
    • Replaces the not working search
  • Handling / Loading local log files
  • Add back the exception parser
  • Add back the exception component
  • Add tests
    • Backend changes
    • stores - unit tests
    • utils - unit tests

To do 🚧

  • Squash commits ⚠️

Follow Up

  • Use something like the RecycleScroller (Problem: Unknown height of elements if expanded).
  • Paste log entries
  • tfoot for "no more older entries"
  • Add more tests
    • Log table - unit tests
    • App - unit tests
    • Settings - unit tests
    • E2E Cypress

@susnux
susnuxforce-pushed the feat/migrate-to-vue branch 2 times, most recently from 530d696 to 8e4876dCompareJuly 12, 2023 16:33
@susnux
susnuxforce-pushed the feat/migrate-to-vue branch 2 times, most recently from e3abe22 to 1c1ef7cCompareJuly 12, 2023 18:10
@codecov

codecovBot commented Jul 12, 2023•
edited
Loading

Copy link
Copy Markdown

Codecov Report

❗ No coverage uploaded for pull request base (master@42071b1). Click here to learn what that means.
Patch has no changes to coverable lines.

Additional details and impacted files
@@ Coverage Diff @@## master #936 +/- ##
=========================================
Coverage ? 42.26% Complexity ? 139 =========================================
Files ? 23 Lines ? 601 Branches ? 31 =========================================
Hits ? 254 Misses ? 347 Partials ? 0
FlagCoverage Δ
unit19.86% <0.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

@susnux
susnuxforce-pushed the feat/migrate-to-vue branch from 1c1ef7c to 7abce9dCompareJuly 12, 2023 18:21
@icewind1991

icewind1991 commented Jul 14, 2023

Copy link
Copy Markdown
Member

Note that having the compiled files as .mjs breaks some setups that don't have a proper mimetype configured for that extension.

@susnux
susnuxforce-pushed the feat/migrate-to-vue branch from 7abce9d to 865da29CompareJuly 17, 2023 15:16
@susnux
susnux marked this pull request as ready for review July 17, 2023 15:18
@susnux

susnux commented Jul 17, 2023

Copy link
Copy Markdown
ContributorAuthor

Note that having the compiled files as .mjs breaks some setups that don't have a proper mimetype configured for that extension.

For Apache server this is done automatically since Nextcloud 27 (nextcloud/server#36057 and nextcloud/server#38688) for Nginx this is also documented for Nextcloud 27 (nextcloud/documentation#10575). So as this targets Nextcloud 28 it should be "safe".

@susnux
susnuxforce-pushed the feat/migrate-to-vue branch from 19bafc4 to 3f4f047CompareJuly 18, 2023 08:51
@szaimen

This comment was marked as resolved.

Sign in to view
@susnux
susnuxforce-pushed the feat/migrate-to-vue branch from 3f4f047 to d20c666CompareJuly 18, 2023 09:44
@susnux

This comment was marked as resolved.

Sign in to view
susnux added 2 commits July 20, 2023 17:47
@susnux
fix: Add tests for backend logic
883b5d6
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
feat(ci): Check linter results on frontend files
ab06deb
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
susnuxforce-pushed the feat/migrate-to-vue branch from cdff465 to 5de6509CompareJuly 20, 2023 15:49
susnux added 10 commits July 20, 2023 17:57
@susnux
Migrate to vue: Prepare config files and add log table components
f90c229
Reimplement frontend settings and log entry actions
* Move to `NcAppSettingsDialog`
* Make table header sticky
* Make table columns fixed width
* Add actions to rows
* Add modal to view raw data of log entry
* Add helpers and settings store
* Add store for fetching and polling log entries
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
chore: Drop old React components
6420918
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
feat(frontend): Implement local search / filtering log entries by search
4a92b8a
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
fix: Restructure frontend files for Typescript interfaces and fix mis…
5f88552
…sing functions
* Allow polling (live log)
* Allow downloading log files
* Implement infinite scroll
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
feat(frontend): Implement local logfile parsing
d698ea4
And fix handling quoted log entries when parsing a file (did not even work in React)
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
feat(CI): Check code coverage of PHP and frontend code
d5bafec
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
feat(tests): Add unit tests for frontend code (utils & stores)
da32e4a
Important: Note that the tests are run with timezone **not** set to UTC,
this allows to test if there is a difference between local TZ and UTC.
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
fix: Reorder files and remove unused imports + Add Exception componen…
d15f0d8
…ts and parse even old exception types
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
fix: Add more unit tests
e180c40
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
fix: Improve design and accessibility
d0e659e
* Use secondary button style for filtered columns
* Minor typo in dialog name
* Make table border and log level colors less annoying
* Add header to app
* Make `<hr>` look less bright
* Only try to load entries from server if file logging is enabled
* Clear local log entries when switching to server log
* Make filter button primary when active
* Add default name to downloaded log file
* Remove 'hide raw entry' button
* Datetime format on settings dialog
* LogDetailsModal should display the information in vertical list on mobile
* Move actions inside the details modal
* Add name to settings button
* Move copy actions in modal to the same row as the 'hide exception' button
* Make sure only the table is scrolled and the settings button is always displayed
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
susnuxforce-pushed the feat/migrate-to-vue branch 2 times, most recently from f0dd06d to 4496515CompareJuly 21, 2023 18:48
@susnux

susnux commented Jul 21, 2023

Copy link
Copy Markdown
ContributorAuthor

/compile amend

@susnux@nextcloud-command
chore: Compile assets
9219831
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
@susnux
susnux merged commit 47fa999 into masterJul 21, 2023
@delete-merged-branch
delete-merged-branchBot deleted the feat/migrate-to-vue branch July 21, 2023 22:56
This was referenced Jul 21, 2023
Closed
Closed
Merged
@icewind1991icewind1991 mentioned this pull request Aug 14, 2023
Merged
@github-actions

github-actionsBot commented Aug 20, 2023

Copy link
Copy Markdown
Contributor

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the reviewing process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR reviewing process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

This was referenced Nov 11, 2023
Closed
Closed
Closed
Closed
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment