Migrate app frontend to Vue

[susnux]

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 🐛

• Resolves [BITV] 9.1.4.4/0.1 - Note: For the review, the browser window size of 1280x768 px and a 200% zoom magnification was used. (1) server#36960
• Resolves [BITV] 9.1.4.4/7.1 - The button to copy a log entry is not accessible when zoomed to 200%. (1) server#36961
• Resolves [BITV] 9.2.1.1/7.1 - Elements of the "Copy" menu are not focusable and activatable with the keyboard. (1) server#36983
• Resolves [BITV] 9.2.4.7/7.1 - "Copy" buttons in the table do not receive a visible keyboard focus. (1) server#37016
• Resolves [BITV] 9.4.1.2/7.4 - The "TypeError" accordion buttons in the table are not accessible to users of assistive technology, as both the appropriate role of "Button" and the aria-expanded attribute are missing. server#37132
• Resolves [BITV] 9.4.1.2/7.6 - The "Log levels" button in the "Level" column header should be implemented as a button with an aria-expanded attribute. server#37134

Screenshots 🖼️

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

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

[codecov]

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           

Flag	Coverage Δ
unit	19.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.

[icewind1991]

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

[susnux]

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]

/compile amend

[github-actions]

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!