Improve realtime visitor log widget (#12659)

* Show referrer information in realt time visitors widget same as in visitor log

* Reuse exisiting logic for realtime log

* do not show 'keyword not defined' tooltip in visitor log

4 files changed, 66 insertions, 80 deletions

diff --git a/plugins/Live/Controller.php b/plugins/Live/Controller.php
index 7aa23dfe2e..f57f2a2378 100644
--- a/plugins/Live/Controller.php
+++ b/plugins/Live/Controller.php
@@ -86,11 +86,8 @@ class Controller extends \Piwik\Plugin\Controller
 
         $view = new View('@Live/getLastVisitsStart');
         $view->idSite = (int) $this->idSite;
-        $api = new Request("method=Live.getLastVisitsDetails&idSite={$this->idSite}&filter_limit=10&format=php&serialize=0&disable_generic_filters=1");
+        $api = new Request("method=Live.getLastVisitsDetails&idSite={$this->idSite}&filter_limit=10&format=original&serialize=0&disable_generic_filters=1");
         $visitors = $api->process();
-        if (!empty($visitors['result']) && $visitors['result'] === 'error' && !empty($visitors['message'])) {
-            throw new \Exception($visitors['message']);
-        }
         $view->visitors = $visitors;
 
         return $this->render($view);
diff --git a/plugins/Live/javascripts/live.js b/plugins/Live/javascripts/live.js
index 95688e147d..15076b1f66 100644
--- a/plugins/Live/javascripts/live.js
+++ b/plugins/Live/javascripts/live.js
@@ -108,10 +108,28 @@
                 return;
             }
 
-            var items = $('li', $(data));
+            var items = $('li.visit', $(data));
             for (var i = items.length; i--;) {
                 this._parseItem(items[i]);
             }
+
+            this._initTooltips();
+        },
+
+        /**
+         * Initializes the icon tooltips
+         */
+        _initTooltips: function() {
+            $('li.visit').tooltip({
+                items: '.visitorLogIconWithDetails',
+                track: true,
+                show: false,
+                hide: false,
+                content: function() {
+                    return $('<ul>').html($('ul', $(this)).html());
+                },
+                tooltipClass: 'small'
+            });
         },
 
         /**
@@ -135,7 +153,7 @@
                 $(item).fadeIn(this.options.fadeInSpeed);
             }
             // remove rows if there are more than the maximum
-            $('li:gt(' + (this.options.maxRows - 1) + ')', this.element).remove();
+            $('li.visit:gt(' + (this.options.maxRows - 1) + ')', this.element).remove();
         },
 
         /**
@@ -154,6 +172,8 @@
 
             var self = this;
 
+            this._initTooltips();
+
             this.updateInterval = window.setTimeout(function() { self._update(); }, this.currentInterval);
         },
 
diff --git a/plugins/Live/stylesheets/live.less b/plugins/Live/stylesheets/live.less
index ebdba91863..84e8a818b3 100644
--- a/plugins/Live/stylesheets/live.less
+++ b/plugins/Live/stylesheets/live.less
@@ -370,6 +370,29 @@ a.visitor-log-visitor-profile-link {
   background-image: url('plugins/Live/images/visitorlog-hover.png');
 }
 
+#widgetLivewidget {
+  .visitorLogIcons {
+    display: inline;
+  }
+
+  .visitorLogIconWithDetails.flag {
+    display: inline;
+  }
+
+  .visitorDetails {
+    display: inline-block;
+  }
+
+  .visitorLogIconWithDetails {
+    margin-right: 5px;
+  }
+
+  .visitorType {
+    display: inline-block;
+    float: left;
+    margin-right: 15px;
+  }
+}
 
 @media only screen and (max-width: 600px) {
   .own-visitor-column {
diff --git a/plugins/Live/templates/getLastVisitsStart.twig b/plugins/Live/templates/getLastVisitsStart.twig
index 943a51f28f..50b3cf51e8 100644
--- a/plugins/Live/templates/getLastVisitsStart.twig
+++ b/plugins/Live/templates/getLastVisitsStart.twig
@@ -1,90 +1,36 @@
 {# some users view thousands of pages which can crash the browser viewing Live! #}
 {% set maxPagesDisplayedByVisitor=100 %}
 
-<ul id='visitsLive'>
-    {% for visitor in visitors %}
-        <li id="{{ visitor.idVisit }}" class="visit">
+<ul id="visitsLive">
+    {% for visitor in visitors.getRows() %}
+        <li id="{{ visitor.getColumn('idVisit') }}" class="visit">
             <div style="display:none;" class="idvisit">{{ visitor.idVisit }}</div>
-            <div title="{{ visitor.actionDetails|length }} {{ 'General_Actions'|translate }}" class="datetime">
-                <span style="display:none;" class="serverTimestamp">{{ visitor.serverTimestamp|raw }}</span>
+            <div title="{{ visitor.getColumn('actionDetails')|length }} {{ 'General_Actions'|translate }}" class="datetime">
+                <span style="display:none;" class="serverTimestamp">{{ visitor.getColumn('serverTimestamp')|raw }}</span>
                 {{ postEvent('Live.visitorLogWidgetViewBeforeVisitInfo', visitor) }}
-                {% set year = visitor.serverTimestamp|date('Y') %}
-                <span class="realTimeWidget_datetime">{{ visitor.serverDatePretty|replace({(year): ' '}) }} - {{ visitor.serverTimePretty }} {% if visitor.visitDuration > 0 %}({{ visitor.visitDurationPretty|raw }}){% endif %}</span>
-                {% if visitor.visitorId|default(false) is not empty %}
-                  &nbsp;  <a class="visits-live-launch-visitor-profile rightLink" title="{{ 'Live_ViewVisitorProfile'|translate }} {% if visitor.userId is not empty %}{{ visitor.userId|raw }}{% endif %}" data-visitor-id="{{ visitor.visitorId }}">
-                        {% if visitor.userId is not empty %}<br/>{% endif %}
+                {% set year = visitor.getColumn('serverTimestamp')|date('Y') %}
+                <span class="realTimeWidget_datetime">{{ visitor.getColumn('serverDatePretty')|replace({(year): ' '}) }} - {{ visitor.getColumn('serverTimePretty') }} {% if visitor.getColumn('visitDuration') > 0 %}({{ visitor.getColumn('visitDurationPretty')|raw }}){% endif %}</span>
+                {% if visitor.getColumn('visitorId')|default(false) is not empty %}
+                  &nbsp;  <a class="visits-live-launch-visitor-profile rightLink" title="{{ 'Live_ViewVisitorProfile'|translate }} {% if visitor.getColumn('userId') is not empty %}{{ visitor.getColumn('userId')|raw }}{% endif %}" data-visitor-id="{{ visitor.getColumn('visitorId') }}">
+                        {% if visitor.getColumn('userId') is not empty %}<br/>{% endif %}
                         <img src="plugins/Live/images/visitorProfileLaunch.png"/>
-                        {{ visitor.userId|default('')|raw }}
+                        {{ visitor.getColumn('userId')|default('')|raw }}
                     </a>
                 {% endif %}
                 <br />
 
-                {% if visitor.countryFlag is defined %}&nbsp;<img height="16px" src="{{ visitor.countryFlag }}" title="{{ visitor.location|e('html_attr') }}, {{ 'Provider_ColumnProvider'|translate }} {% if visitor.providerName is defined %}{{ visitor.providerName }}{% endif %}"/>{% endif %}
-                {% if visitor.browserIcon is defined %}&nbsp;<img width="16px" height="16px" src="{{ visitor.browserIcon }}" title="{{ visitor.browser|e('html_attr') }}{% if visitor.plugins is defined %}, {{ 'General_Plugins'|translate }}: {{ visitor.plugins }}{% endif %}"/>{% endif %}
-                {% if visitor.operatingSystemIcon is defined %}&nbsp;<img width="16px" height="16px" src="{{ visitor.operatingSystemIcon }}" title="{{ visitor.operatingSystem }}{% if visitor.resolution is defined %}, {{ visitor.resolution }}{% endif %}"/>{% endif %}
-                &nbsp;
-                {% if visitor.visitConverted %}
-                <span title="{{ 'General_VisitConvertedNGoals'|translate(visitor.goalConversions) }}"
-                      class='visitorRank'>
-                    <img src="{{ visitor.visitConvertedIcon }}" />
-                    <span class='hash'>#</span>
-                    {{ visitor.goalConversions }}
-                    {% if visitor.visitEcommerceStatusIcon %}
+                {{ postEvent('Live.renderVisitorIcons', visitor) }}
 
-                        <img src="{{ visitor.visitEcommerceStatusIcon }}" title="{{ visitor.visitEcommerceStatus|e('html_attr') }}"/>
-                    {% endif %}
-                </span>
-                {% endif %}
-                {% if visitor.visitorTypeIcon %}
-                    <img src="{{ visitor.visitorTypeIcon }}"
-                         title="{{ 'General_ReturningVisitor'|translate }}"/>
-                {% endif %}
-
-                {% if visitor.visitIp %} <span title="{% if visitor.visitorId is not empty %}{{ 'General_VisitorID'|translate }}: {{ visitor.visitorId }}{% endif %}">
-                    IP: {{ visitor.visitIp }}</span>
-                {% endif %}
-            <!--<div class="settings"></div>-->
-            <span class="referrer">
-                {% if visitor.referrerType is defined and visitor.referrerType != 'direct' %}
-                    {{ 'General_FromReferrer'|translate }}
-                    {% if visitor.referrerUrl is not empty %}
-                        <a rel="noreferrer" target="_blank"
-                           href="{{ visitor.referrerUrl|e('html_attr') }}">
-                    {% endif %}
-
-                    {% if visitor.searchEngineIcon is defined %}
-                        <img src="{{ visitor.searchEngineIcon }}" />
-                    {% endif %}
-
-                    {{ visitor.referrerName }}
-
-                    {% if visitor.referrerUrl is not empty %}
-                        </a>
-                    {% endif %}
-
-                    {% if visitor.referrerKeyword is not empty %} - "{{ visitor.referrerKeyword }}"{% endif %}
-
-                    {% set keyword %}{{ visitor.referrerKeyword }}{% endset %}
-                    {% set searchName %}{{ visitor.referrerName }}{% endset %}
-                    {% set position %}#{{ visitor.referrerKeywordPosition}}{% endset %}
-
-                    {% if visitor.referrerKeywordPosition is not empty %}
-                        <span title='{{ 'Live_KeywordRankedOnSearchResultForThisVisitor'|translate(keyword,position,searchName) }}'
-                              class='visitorRank'>
-                            <span class='hash'>#</span> {{ visitor.referrerKeywordPosition }}
-                        </span>
-                    {% endif %}
-
-                {% elseif visitor.referrerType is defined %}
-                    {{ 'Referrers_DirectEntry'|translate }}
-                {% endif %}
-            </span></div>
-            <div id="{{ visitor.idVisit|e('html_attr') }}_actions" class="settings">
+                <span class="referrer">
+                    {% include "@Referrers/_visitorDetails.twig" with {'visitInfo': visitor} %}
+                 </span>
+            </div>
+            <div id="{{ visitor.getColumn('idVisit')|e('html_attr') }}_actions" class="settings">
                 <span class="pagesTitle"
-                      title="{{ visitor.actionDetails|length }} {{ 'General_Actions'|translate }}"
+                      title="{{ visitor.getColumn('actionDetails')|length }} {{ 'General_Actions'|translate }}"
                       >{{ 'General_Actions'|translate }}:</span>&nbsp;
                 {% set col = 0 %}
-                {% for action in visitor.actionDetails %}
+                {% for action in visitor.getColumn('actionDetails') %}
                     {% if loop.index <= maxPagesDisplayedByVisitor %}
 
                         {% if action.type == 'ecommerceOrder' or action.type == 'ecommerceAbandonedCart' %}
@@ -159,7 +105,7 @@
                     {% endif %}
                 {% endfor %}
 
-                {% if visitor.actionDetails|length > maxPagesDisplayedByVisitor %}
+                {% if visitor.getColumn('actionDetails')|length > maxPagesDisplayedByVisitor %}
                     ({{ 'Live_MorePagesNotDisplayed'|translate }})
                 {% endif %}
             </div>