Realtime percentage of tasks in the tab title

[GarvitSinghal47]

Fixes: #8011

Summary

Implemented a watch function for real-time tracking of percentage value changes. The document title now dynamically updates based on these changes for a more informative user experience.
…

References

…

Reviewer guidance

…

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b10.dev0_git.593.g46432fa5.pex
Windows Installer (EXE)	kolibri-0.16.0b10.dev0+git.593.g46432fa5-unsigned.exe
Debian Package	kolibri_0.16.0b10.dev0+git.593.g46432fa5-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b10.dev0+git.593.g46432fa5-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b10.dev0+git.593.g46432fa5-0.1.0-debug.apk
TAR file	kolibri-0.16.0b10.dev0+git.593.g46432fa5.tar.gz
WHL file	kolibri-0.16.0b10.dev0+git.593.g46432fa5-py2.py3-none-any.whl

[MisRob]

Thank you, @GarvitSinghal47!

[rtibbles]

General code approach is sound, but internationalization needs to be addressed. Feel free to follow up if you have any questions about this!

[rtibbles]

Thanks for these updates, @GarvitSinghal47! I have not tested this, but it is looking good to me codewise.

One thing I realized when looking through the code just now, is that we do already use the VueJS MetaInfo plugin for setting document.title, and it is possible to use this to do both:

1. A reactively updating title using the titleTemplate key: https://vue-meta.nuxtjs.org/api/#titletemplate
2. Include the existing title to enhance it and create nested titles, as you are doing here.

If you would rather merge this as in, I'd be happy to file this as a follow up, but wanted to give the option of exploring this if you were interested.

[GarvitSinghal47]

@rtibbles Quick update on the recent changes I made. I managed to get the title updating using the metaInfo approach, and things are looking good. However, there's a tiny hiccup now.

It seems that every time the refresh on meta is called, it's updating the title value based on the latest task number ( i think it is just getting it for the all and updating it for each one so get set to last task by default), not taking into account the remaining tasks or change in there percentage value until they are cleared from the page . Unlike the previous approach where it worked smoothly for all tasks.

Any ideas on how to resolve this? I'd appreciate your insights!

[rtibbles]

Did you try using the titleTemplate function rather than just title? That should be reactive and avoid you having to do refreshes on the meta based on watchers.

That means any logic encapsulated in the computed prop you have created should be the driver of what is displayed.

[GarvitSinghal47]

@rtibbles attempted the method you recommended, but the issue persists. The problem lies in the fact that it only considers the most recent changes in the title for the last process . While it updates the title for the last item, it fails to display changes for any preceding ones in the case of multiple processes until the last added process is cleared.

[rtibbles]

Oh - I think the issue may be that we are setting the title in the wrong place. We should be doing it within the ManageTasks/index.vue component - where all of the tasks are available. That way you can aggregate across each task and choose the specific one you want to display for in the title.

As it is currently in the TaskPanel component, we create an instance of this component for each running task - so they will be fighting it out for who has control over the title!

[rtibbles]

This is still not quite what I meant, as issuing the title update from each individual TaskPanel component will still result in 'last updated wins' title updates, which could be unpredictable. Instead, we should be managing this all from within the parent component, and aggregating over each individual task to determine what the overall title should be.

If there is only one active task, we should use that for the title, otherwise, we should aggregate over multiple tasks.

[GarvitSinghal47]

@rtibbles Understood. I'm currently illustrating the percentage changes for each channel individually, but you prefer a consolidated display for all channels rather than showing individual percentages. I'll make this adjustment shortly.

However, I have a few questions regarding handling failed tasks. Should I display a fail status at the top only if all tasks fail, or is there another preferred approach?

Additionally, for the display format, I'll present it as "percentage - completed" for both import and delete tasks now combined , as for the combined channel name and the type will not matter then i think.

Also I noticed that you've assigned the task to yourself, and I want to express my eagerness to continue working on resolving it from my end. If there's no inconvenience, I'd appreciate the opportunity to contribute to finding a solution.

[rtibbles]

I have assigned the PR to myself - because I am responsible for reviewing, and we are starting to use assignment to help track who is the responsible reviewer for pull requests - so no worries, I am not taking over!

I think maybe there is a prioritization here:

If one task has failed, we should display <name of task> failed.
If more than one task has failed we should display <number> tasks failed.
If one task is in progress we should display the percentage progress for that task and the name of the task.
If multiple tasks are in progress, we should display the average progress for all the tasks, and the appbar title.

We can then do cancelling and finally cancelled as the prioritization of the remaining displays.

[GarvitSinghal47]

Just a quick clarification: are you suggesting that in the event of task failures, the display should prioritize showing the number of failed tasks at the top, and specifically adhere to the specified order of presentation, i.e., failed tasks first, followed by percentage changes, and then cancellations? In other words, if there are failed tasks, only showcase them initially, and update the display with percentage changes when they occur.

So, if there are failed tasks, should the display remain static with the failed tasks, or should it update to show percentages for tasks that are not failed?

[rtibbles]

I think we can have it stay static with failed tasks, and only start displaying progress again when someone has cleared the failed tasks.

[GarvitSinghal47]

@rtibbles I have successfully implemented the logic, and it is functioning as expected. However, I am currently facing challenges in accessing and utilizing the translations present in the TaskPanel component from the index.vue file. Could you provide guidance on how to achieve this?

[rtibbles]

Probably the best thing to do is to move these strings out of the TaskPanel component, and into this reusable common strings translator: https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/device/assets/src/views/commonDeviceStrings.js

They can then be referenced using the deviceString method: https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/device/assets/src/views/commonDeviceStrings.js which is added using the commonDeviceStrings mixin: https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue#L85

[rtibbles]

Code changes look good, and manual testing checks out. Thank you!