Improve error visuals for All Websites Dashboard (#22872)

* Add new message for All Websites error message * Move Error message on All Websites and suppress error notification * Build vue files * Fixed UI test failure caused by updating All Websites Dashboard error location * Reset files changed by vue compilation * remove unnecessary placeholder values * resolve merge conflict issues and odd file generation * Add removed UI test image * Build vue files * Update UI test due to moving error location on page * reset files modified by vue compilation --------- Co-authored-by: innocraft-automation <[email protected]>
matomo-org · Dec 19, 2024 · ab4ca64 · ab4ca64
1 parent c7c1027
commit ab4ca64
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 112 deletions.
diff --git a/plugins/MultiSites/MultiSites.php b/plugins/MultiSites/MultiSites.php
@@ -90,6 +90,7 @@ public function getClientSideTranslationKeys(&$translations)
         $translations[] = 'MultiSites_TotalHits';
         $translations[] = 'MultiSites_TotalPageviews';
         $translations[] = 'MultiSites_TotalVisits';
+        $translations[] = 'MultiSites_AllWebsitesDashboardErrorMessage';
     }
 
     public function getStylesheetFiles(&$stylesheets)

diff --git a/plugins/MultiSites/lang/en.json b/plugins/MultiSites/lang/en.json
@@ -7,6 +7,7 @@
         "SingleWebsitesDashboardDocumentation": "This report gives you an informational overview for a specific website, containing the most general metrics about your visitors.",
         "AllWebsitesDashboardDocumentation": "This report gives you an informational overview for each of your websites, containing the most general metrics about your visitors.",
         "AllWebsitesDashboardTitle": "All Websites",
+        "AllWebsitesDashboardErrorMessage": "Data is currently unavailable. This could be due to a temporary server issue or the report containing too much data. Please try again later. If the problem continues, please contact your Matomo administrator for assistance.",
         "EvolutionComparisonIncomplete": "The currently selected time period is %1$s complete.",
         "EvolutionComparisonProportional": "When the previous period was also %1$s complete, there would have been an estimated %2$s %3$s\n(out of a total of %4$s %3$s in the previous period).",
         "EvolutionComparisonDay": "%1$s %2$s this day compared to %3$s %2$s in the previous partial period (%4$s) Evolution: %5$s",

diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_error.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_error.png
diff --git a/plugins/MultiSites/vue/dist/MultiSites.umd.js b/plugins/MultiSites/vue/dist/MultiSites.umd.js
diff --git a/plugins/MultiSites/vue/dist/MultiSites.umd.min.js b/plugins/MultiSites/vue/dist/MultiSites.umd.min.js
diff --git a/plugins/MultiSites/vue/src/AllWebsitesDashboard/AllWebsitesDashboard.store.ts b/plugins/MultiSites/vue/src/AllWebsitesDashboard/AllWebsitesDashboard.store.ts
@@ -242,10 +242,12 @@ class DashboardStore {
     if (this.searchTerm) {
       params.pattern = this.searchTerm;
     }
-
     return AjaxHelper.fetch<GetAllWithGroupsDataResponse>(
       params,
-      { abortController: this.fetchAbort },
+      {
+        abortController: this.fetchAbort,
+        createErrorNotification: false,
+      },
     ).then((response) => {
       if (!onlySites) {
         this.updateDashboardKPIs(response);

diff --git a/plugins/MultiSites/vue/src/AllWebsitesDashboard/AllWebsitesDashboard.vue b/plugins/MultiSites/vue/src/AllWebsitesDashboard/AllWebsitesDashboard.vue
@@ -16,6 +16,31 @@
     </h1>
   </div>
 
+  <div v-if="errorLoading">
+      <div class="notification system notification-error">
+        {{ translate('MultiSites_AllWebsitesDashboardErrorMessage') }}
+        <br /><br />
+        {{ translate('General_NeedMoreHelp', '', '') }}
+        <a
+            rel="noreferrer noopener"
+            target="_blank"
+            :href="externalRawLink('https://matomo.org/faq/troubleshooting/faq_19489/')"
+        >{{ translate('General_Faq') }}</a>
+        &#x2013;
+        <a
+            rel="noreferrer noopener"
+            target="_blank"
+            :href="externalRawLink('https://forum.matomo.org/')"
+        >{{ translate('Feedback_CommunityHelp') }}</a>
+        &#x2013;
+        <a
+            rel="noreferrer noopener"
+            target="_blank"
+            :href="externalRawLink('https://matomo.org/support-plans/')"
+        >{{ translate('Feedback_ProfessionalHelp') }}</a>.
+      </div>
+  </div>
+
   <KPICardContainer
       :is-loading="isLoadingKPIs"
       :model-value="kpis"
@@ -121,6 +146,9 @@ export default defineComponent({
     isLoadingKPIs(): boolean {
       return DashboardStore.state.value.isLoadingKPIs;
     },
+    errorLoading(): boolean {
+      return DashboardStore.state.value.errorLoading;
+    },
     kpis(): KPICardData[] {
       const { dashboardKPIs } = DashboardStore.state.value;
 

diff --git a/plugins/MultiSites/vue/src/AllWebsitesDashboard/SitesTable.vue b/plugins/MultiSites/vue/src/AllWebsitesDashboard/SitesTable.vue
@@ -96,34 +96,6 @@
           </td>
         </tr>
 
-        <tr v-else-if="errorLoading">
-          <td colspan="7">
-            <div class="notification system notification-error">
-              {{ translate('General_ErrorRequest', '', '') }}
-              <br /><br />
-              {{ translate('General_NeedMoreHelp') }}
-              <a
-                  rel="noreferrer noopener"
-                  target="_blank"
-                  :href="externalRawLink('https://matomo.org/faq/troubleshooting/faq_19489/')"
-              >{{ translate('General_Faq') }}</a>
-              &#x2013;
-              <a
-                  rel="noreferrer noopener"
-                  target="_blank"
-                  :href="externalRawLink('https://forum.matomo.org/')"
-              >{{ translate('Feedback_CommunityHelp') }}</a>
-              <span v-show="errorShowProfessionalHelp"> &#x2013; </span>
-              <a
-                  rel="noreferrer noopener"
-                  target="_blank"
-                  :href="externalRawLink('https://matomo.org/support-plans/')"
-                  v-show="errorShowProfessionalHelp"
-              >{{ translate('Feedback_ProfessionalHelp') }}</a>.
-            </div>
-          </td>
-        </tr>
-
         <SitesTableSite
             v-else
             v-for="site in sites"