[Vue] remove angularjs from the Live plugin #19418

diosmosis · 2022-06-28T00:06:47Z

Description:

This PR is based off of #19390.

Changes:

Add Passthrough component to CoreHome for easy way to conditionally surround elements w/ a component (see LivePage.vue for use).
Move twig contents in Live that use angularjs directives to new Vue components.
Replace uses of $rootScope.$emit w/ Matomo.postEvent.

Review

…ainer for more convenient embedding of vue-entry use from within other Vue components (primarily for supporting twig Template... events in Vue).

…larjs-Live

…-org/matomo into vue-remove-angularjs-SitesManager

…larjs-Live

…omo into vue-remove-angularjs-Live

…larjs-Live

github-actions · 2022-07-19T02:13:43Z

This issue is in "needs review" but there has been no activity for 7 days. ping @matomo-org/core-reviewers

github-actions · 2022-07-28T02:12:39Z

This issue is in "needs review" but there has been no activity for 7 days. ping @matomo-org/core-reviewers

diosmosis · 2022-08-16T13:13:23Z

@sgiehl I see, should be fixed

sgiehl

works now

sgiehl · 2022-08-16T14:21:24Z

@diosmosis found another issue. It seems that the real time widget looses its head on the first refresh. Guess that is caused by this code:

matomo/plugins/Live/vue/src/LiveWidget/LiveWidgetRefresh.ts

Lines 27 to 38 in d868c5c

    
           AjaxHelper.fetch( 
        
             { 
        
               module: 'Live', 
        
               action: 'ajaxTotalVisitors', 
        
               segment, 
        
             }, 
        
             { 
        
               format: 'html', 
        
             }, 
        
           ).then((r) => { 
        
             $(el).find('#visitsTotal').replaceWith(r); 
        
           });

Guess the vue component would need to be initialized after the content was replaced...

diosmosis · 2022-08-16T19:54:53Z

@sgiehl fixed

sgiehl · 2022-08-17T13:49:32Z

@diosmosis this seems to work on the real time page now. but not when displayed as a widget. In the widget the header seems not to be replaced at all.

diosmosis · 2022-08-17T14:25:45Z

@sgiehl interesting, I only tested in the widget on the dashboard. Tested again on both sites and it works for me. Could it be a caching issue on your end? Can you test again?

sgiehl · 2022-08-18T08:49:54Z

Tried it again. But it still doesn't work in the widget. I can see that the requests are sent out. But the result seems not be placed in the widget. I have the visitor generator running in parallel to ensure the numbers in the widget would change. So I'm able to validated that they don't 🤷

diosmosis · 2022-08-19T18:38:27Z

Ok, I'll try again w/ visitor generator running in parallel

diosmosis · 2022-08-19T20:15:04Z

@sgiehl ok, its definitely working for me. I looked at the network tab for getLastVisitsStart requests and checked that the response was used when completed. When the response had different HTML there was a visual change in the widget. I did notice however, it took quite a while for that response to actually be different. From previous experience w/ the visitor generator I think it might be due to time zone issues w/ visits being tracked, or visits tracked out of order, or something like that, so they don't always register as more recent than what's displayed.

sgiehl · 2022-08-22T09:31:18Z

@diosmosis the list of visits is refreshing correctly. What doesn't seem to refresh is the summary above. That should be handled by the request for ajaxTotalVisitors. The numbers shown for last 24h / 30m always stay the same, even if the request would contain other numbers.

diosmosis · 2022-08-22T17:21:17Z

@sgiehl I see, I get it now. Apologies it took a while for me to understand. Will take a look.

diosmosis · 2022-08-22T19:06:46Z

@sgiehl Ok, I checked again, and this is working for me too. I saw the following scenarios:

The visits list doesn't change, so the following code in live.js does not trigger:
```
if ($('#' + visitId, this.element).html() != $(item).html()) {
    this.updated = true;
}
```
This results in the onUpdate() function not being called, which means the count doesn't update.
The visits list changes, but ajaxTotalVisits returns the same count as before.
The visits list changes and the ajaxTotalVisits request returns a different count, in which case it updates.

Can you check that:

the getLastVisitsStart request returns something different
when it does, ajaxTotalVisits is then requested,
when the response for ajaxTotalVisits is different, the value is updated in the UI
?

plugins/Live/templates/_totalVisitors.twig

…omo into vue-remove-angularjs-Live

sgiehl

Can't see any further issues right now.

* Remove use of angularjs from SitesManager plugin and add VueEntryContainer for more convenient embedding of vue-entry use from within other Vue components (primarily for supporting twig Template... events in Vue). * remove use of angularjs from Live plugin * built vue files * forgot to export * built vue files * fix ui test issues * move inline script to vue directive + fix a couple vue warnings * remove use of unneeded html_attr escape * remove use of unneeded twig html_attr escape * use html filter explicitly * use href so command+click works * get rid of two vue warnings * use anonymous function for jquery event so this can be used properly * destroy/compile vue components when refreshing live widget * built vue files * try to fix live refresh issue * improve css, so whitespaces are always hidden between images Co-authored-by: sgiehl <stefan@matomo.org> Co-authored-by: sgiehl <sgiehl@users.noreply.github.com>

diosmosis added 2 commits June 22, 2022 17:18

Remove use of angularjs from SitesManager plugin and add VueEntryCont…

5d7b7e5

…ainer for more convenient embedding of vue-entry use from within other Vue components (primarily for supporting twig Template... events in Vue).

remove use of angularjs from Live plugin

5a3d1a0

diosmosis force-pushed the vue-remove-angularjs-Live branch from 709baa5 to 5a3d1a0 Compare June 28, 2022 00:07

diosmosis marked this pull request as draft June 28, 2022 00:07

diosmosis added 4 commits June 28, 2022 00:22

built vue files

032eac9

forgot to export

6723bcc

Merge branch 'vue-remove-angularjs-SitesManager' into vue-remove-angu…

498c331

…larjs-Live

built vue files

18b943e

This was referenced Jun 28, 2022

[Vue] remove angularjs from Installation plugin #19425

Merged

[Vue] remove angularjs from Diagnostics plugin #19434

Merged

diosmosis added 12 commits July 2, 2022 15:02

Merge branch '5.x-dev' into vue-remove-angularjs-SitesManager

4214d94

Merge branch 'vue-remove-angularjs-SitesManager' of github.com:matomo…

81fe893

…-org/matomo into vue-remove-angularjs-SitesManager

fix ui test issues

f89b1b9

Merge branch 'vue-remove-angularjs-SitesManager' into vue-remove-angu…

73cb847

…larjs-Live

Merge branch '5.x-dev' into vue-remove-angularjs-Live

e088e9c

Merge branch 'vue-remove-angularjs-Live' of github.com:matomo-org/mat…

28ae7c6

…omo into vue-remove-angularjs-Live

move inline script to vue directive + fix a couple vue warnings

3d25452

Merge branch '5.x-dev' into vue-remove-angularjs-Live

46183d1

Merge branch '5.x-dev' into vue-remove-angularjs-SitesManager

5069b71

remove use of unneeded html_attr escape

3028203

Merge branch 'vue-remove-angularjs-SitesManager' into vue-remove-angu…

999082d

…larjs-Live

remove use of unneeded twig html_attr escape

d52cfc3

diosmosis added the Needs Review PRs that need a code review label Jul 11, 2022

diosmosis marked this pull request as ready for review July 11, 2022 02:28

github-actions bot added the Stale The label used by the Close Stale Issues action label Jul 19, 2022

diosmosis added the Do not close PRs with this label won't be marked as stale by the Close Stale Issues action label Jul 19, 2022

github-actions bot removed the Stale The label used by the Close Stale Issues action label Jul 20, 2022

github-actions bot added the Stale The label used by the Close Stale Issues action label Jul 28, 2022

sgiehl approved these changes Aug 16, 2022

View reviewed changes

destroy/compile vue components when refreshing live widget

c7a48c9

Merge branch '5.x-dev' into vue-remove-angularjs-Live

962f63f

Merge branch '5.x-dev' into vue-remove-angularjs-Live

2f8716c

sgiehl and others added 2 commits August 24, 2022 11:40

Merge branch '5.x-dev' into vue-remove-angularjs-Live

d763b7b

built vue files

021ff6e

sgiehl reviewed Aug 24, 2022

View reviewed changes

plugins/Live/templates/_totalVisitors.twig Outdated Show resolved Hide resolved

diosmosis added 2 commits August 24, 2022 10:20

try to fix live refresh issue

401d60a

Merge branch 'vue-remove-angularjs-Live' of github.com:matomo-org/mat…

4779df7

…omo into vue-remove-angularjs-Live

sgiehl approved these changes Aug 25, 2022

View reviewed changes

improve css, so whitespaces are always hidden between images

aee3052

sgiehl force-pushed the vue-remove-angularjs-Live branch from 6c3fb4c to aee3052 Compare August 25, 2022 10:14

sgiehl merged commit f679725 into 5.x-dev Aug 25, 2022

sgiehl deleted the vue-remove-angularjs-Live branch August 25, 2022 12:46

justinvelluppillai added the not-in-changelog For issues or pull requests that should not be included in our release changelog on matomo.org. label Sep 29, 2022

michalkleiner mentioned this pull request Apr 24, 2023

More then 20 actions bleed over from widgets #20622

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Vue] remove angularjs from the Live plugin #19418

[Vue] remove angularjs from the Live plugin #19418

diosmosis commented Jun 28, 2022 •

edited

github-actions bot commented Jul 19, 2022

github-actions bot commented Jul 28, 2022

diosmosis commented Aug 16, 2022

sgiehl left a comment

sgiehl commented Aug 16, 2022 •

edited

diosmosis commented Aug 16, 2022

sgiehl commented Aug 17, 2022

diosmosis commented Aug 17, 2022

sgiehl commented Aug 18, 2022

diosmosis commented Aug 19, 2022

diosmosis commented Aug 19, 2022 •

edited

sgiehl commented Aug 22, 2022

diosmosis commented Aug 22, 2022

diosmosis commented Aug 22, 2022

sgiehl left a comment

[Vue] remove angularjs from the Live plugin #19418

[Vue] remove angularjs from the Live plugin #19418

Conversation

diosmosis commented Jun 28, 2022 • edited

Description:

Review

github-actions bot commented Jul 19, 2022

github-actions bot commented Jul 28, 2022

diosmosis commented Aug 16, 2022

sgiehl left a comment

Choose a reason for hiding this comment

sgiehl commented Aug 16, 2022 • edited

diosmosis commented Aug 16, 2022

sgiehl commented Aug 17, 2022

diosmosis commented Aug 17, 2022

sgiehl commented Aug 18, 2022

diosmosis commented Aug 19, 2022

diosmosis commented Aug 19, 2022 • edited

sgiehl commented Aug 22, 2022

diosmosis commented Aug 22, 2022

diosmosis commented Aug 22, 2022

sgiehl left a comment

Choose a reason for hiding this comment

diosmosis commented Jun 28, 2022 •

edited

sgiehl commented Aug 16, 2022 •

edited

diosmosis commented Aug 19, 2022 •

edited