Feature/nextcloud widgets #740

marekful · 2022-06-19T16:08:22Z

Category:

Feature

Overview

Add Nextcloud widgets

NextcloudUser

a small widget showing branding and uesr info, including quota

NextcloudNotifications

show and delete Nextcloud notifications

NextcloudUserStatus

display user statuses of selected users

NextcloudStats (admin only)

display Nextcloud usage statistics (users, files, shares, apps)

NextcloudSystem (admin only)

visualise CPU load and memory utilisation, show server versions

NextcloudPhpOpcache (admin only)

show statistics about PHP opcache performance

Screenshot

Code Quality Checklist (Please complete)

All changes are backwards compatible
All lint checks and tests are passing
There are no (new) build warnings or errors
(If a new config option is added) Attribute is outlined in the schema and documented
(If a new dependency is added) Package is essential, and has been checked out for security or performance
Bumps version, if new feature added

Add a widget supporting the `capabilites`, `user` and `serverinfo` Nextcloud APIs. Basic branding, user and quota information is always displayed and when the provided credentials are for and admin user then server information is also displayed. APIs: * [capabilities](https://docs.nextcloud.com/server/latest/developer_manual/client_apis/OCS/ocs-api-overview.html#capabilities-api) * [user](https://docs.nextcloud.com/server/latest/developer_manual/client_apis/OCS/ocs-api-overview.html#user-metadata) * [serverinfo](https://github.com/nextcloud/serverinfo)

plus * some template and style tweaking * improve tooltips * enforce Nextcloud app-password instead of login password

* ♻️ segment into smaller widgets, improve mixin * ♻️ change NextcloudInfo to NextcloudUser * a small widget showing branding and uesr info, including quota * ✨ add NextcloudNotifications widget * show and delete Nextcloud notifications * ✨ add NextcloudUserStatus widget * display user statuses of selected users * ✨ add NextcloudStats widget (admin only) * display Nextcloud usage statistics (users, files, shares) * ✨ add NextcloudSystem widget (admin only) * visualise cpu load and memory utilisation, show server versions * ✨ add NextcloudPhpOpcache widget (admin only) * show statistics about php opcache performance * ✨ add a misc helper for formatting nunbers * 🌐 add translations to widget templates * 🌐 add translation entries for en * 🍱 add scss styles file, shared by all widgets

When a user status doesn't include a status message, it still may have a status emoji and it always has a status indicator (e.g. online). When {showEmpty=true} then statuses without a message are shown, otherwise hidden. Defaults to {false}.

Limit displayed notifications either by count or by age. An integer value is interpeted as count limit, a number suffixed with 'm', 'h' or 'd' is converted to minutes, hours or days, respectively, and older notifications are not shown.

netlify · 2022-06-19T16:08:27Z

✅ Deploy Preview for dashy-dev ready!

Name	Link
🔨 Latest commit	`c9cd8da`
🔍 Latest deploy log	https://app.netlify.com/sites/dashy-dev/deploys/62b0c3d130ae390009dd8b73
😎 Deploy Preview	https://deploy-preview-740--dashy-dev.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

viezly · 2022-06-19T16:08:51Z

Changes preview:

Legend:

👀 Review pull request on Viezly

marekful · 2022-06-19T16:16:40Z

Hey, I thought these widgets could be useful. I'm going to check Sonar and DeepScan reports and see if I can improve a bit, and also add some docs. Open to any suggestions or change requests in the meantime. Cheers :)

Lissy93 · 2022-06-19T16:22:06Z

This looks AWESOME! I'll check through it properly later this evening / tomorrow morning.
Don't worry too much about the failing checks, Sonar especially is often full of false positives.

src/mixins/NextcloudMixin.js

marekful · 2022-06-19T19:16:35Z

src/components/Widgets/NextcloudSystem.vue

+      max-width: 44%;
+      small {
+        font-size: 12px;
+        color: #999999;


Here, I was trying to match the colour to the small text above the cpu-load-chart, with limited success.

Maybe

color: var(--widget-text-color); opacity: var(--dimming-factor);`

Not sure if this will match, but at least it can be modified by the current theme, or on the users side if need be.

On a side note, very minor but if possible rem is preferred over px. Originally this was to respect the users browser preferences / for accessibility, but now it's mostly just for consistency. So this would be font-side: 0.75rem.

Lissy93

All looks great! Some really awesome, and neatly built widgets :) 🙌

Once the docs are added (probably under Self-Hosted Services Widgets), then I'll approve changes.

The only feedback I have is just aesthetic, nothing major at all

Try and keep CSS units consistent, mixing px, % em, gets confusing. For text rem is preferred
Where possible, try to use CSS variables especially for colors. It makes makes it easier for the user to override, and also makes theming easier.
If a data attribute is used just to apply styles, (like data-nc-updates), then classes are usually preferred instead

- use consistent css units - replace hard-coded color values with variables - update disk quota chart render (to allow for variable colors) - small style update to the notifications widget

marekful · 2022-06-20T19:03:32Z

All looks great! Some really awesome, and neatly built widgets :) 🙌

Once the docs are added (probably under Self-Hosted Services Widgets), then I'll approve changes.

The only feedback I have is just aesthetic, nothing major at all

Try and keep CSS units consistent, mixing px, % em, gets confusing. For text rem is preferred

Where possible, try to use CSS variables especially for colors. It makes makes it easier for the user to override, and also makes theming easier.

If a data attribute is used just to apply styles, (like data-nc-updates), then classes are usually preferred instead

The only place I left px is for that small text from the other comment because it's in px too in the other graph I want to match it to (well, it's svg text {} browser style, I guess?).

Building these widgets was a really pleasant job even as a first time Vue user, Dashy is cool! :)

Lissy93

Really awesome work 👏

marekful added 8 commits June 11, 2022 23:41

🩹 Handle plural/singular for availabel updates

ff1bcdb

🎨 Add HTML comments

caf131d

🚧 Move user processing from widget to mixin

a43988f

plus * some template and style tweaking * improve tooltips * enforce Nextcloud app-password instead of login password

✏️ Fix typo in translation

4b93093

marekful requested a review from Lissy93 as a code owner June 19, 2022 16:08

🔥 Remove references to mock data

db0fc04

Lissy93 added the ✨ New Feature [PR] Contains implementation of a new feature label Jun 19, 2022

marekful added 3 commits June 19, 2022 16:31

🩹 Move schema to Component.data + remove unnecessary null checks

991cf0b

Remove unnecessary null check

cf25dbc

🩹 Address Sonar code smell report findings

3ac0585

marekful commented Jun 19, 2022

View reviewed changes

src/mixins/NextcloudMixin.js Show resolved Hide resolved

marekful commented Jun 19, 2022

View reviewed changes

marekful added 2 commits June 19, 2022 21:01

♻️ Remove MiscHelpers direct dependency

168fe94

♻️ Simplify expressiono

ee46f2a

Lissy93 reviewed Jun 19, 2022

View reviewed changes

marekful added 5 commits June 20, 2022 17:38

🔒 Feed input through parseFlot() as means of sanitisation

7d8d307

♻️ Style optimisation + minor refactor

278a6fc

- use consistent css units - replace hard-coded color values with variables - update disk quota chart render (to allow for variable colors) - small style update to the notifications widget

💄 Facelifto

f00b762

📝 Add widget documentation

2ee853d

💄 Missed style update

c9cd8da

marekful requested a review from Lissy93 June 20, 2022 19:16

Lissy93 approved these changes Jun 20, 2022

View reviewed changes

Lissy93 merged commit dbb261c into Lissy93:master Jun 20, 2022

marekful mentioned this pull request Jun 22, 2022

🩹 Add back some styling #751

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/nextcloud widgets #740

Feature/nextcloud widgets #740

marekful commented Jun 19, 2022 •

edited by pull-request-badge bot

Loading

netlify bot commented Jun 19, 2022 •

edited

Loading

viezly bot commented Jun 19, 2022 •

edited

Loading

marekful commented Jun 19, 2022

Lissy93 commented Jun 19, 2022

marekful Jun 19, 2022 •

edited

Loading

Lissy93 Jun 19, 2022

Lissy93 left a comment

marekful commented Jun 20, 2022 •

edited

Loading

Lissy93 left a comment

Feature/nextcloud widgets #740

Feature/nextcloud widgets #740

Conversation

marekful commented Jun 19, 2022 • edited by pull-request-badge bot Loading

netlify bot commented Jun 19, 2022 • edited Loading

✅ Deploy Preview for dashy-dev ready!

viezly bot commented Jun 19, 2022 • edited Loading

marekful commented Jun 19, 2022

Lissy93 commented Jun 19, 2022

marekful Jun 19, 2022 • edited Loading

Choose a reason for hiding this comment

Lissy93 Jun 19, 2022

Choose a reason for hiding this comment

Lissy93 left a comment

Choose a reason for hiding this comment

marekful commented Jun 20, 2022 • edited Loading

Lissy93 left a comment

Choose a reason for hiding this comment

marekful commented Jun 19, 2022 •

edited by pull-request-badge bot

Loading

netlify bot commented Jun 19, 2022 •

edited

Loading

viezly bot commented Jun 19, 2022 •

edited

Loading

marekful Jun 19, 2022 •

edited

Loading

marekful commented Jun 20, 2022 •

edited

Loading