fix(ui): fix predefined metrics data fetch (#661)

* fix(ui): fix predefined metrics data fetch

* fix(ui): remove unused code

frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx

@@ -4,7 +4,7 @@ import { NoContent } from 'UI';
 import { Styles } from '../../common';
 import { 
     BarChart, Bar, CartesianGrid, Tooltip,
-    LineChart, Line, Legend, ResponsiveContainer, 
+    Legend, ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
 
@@ -13,7 +13,8 @@ interface Props {
     metric?: any
 }
 function ErrorsByOrigin(props: Props) {
-    const { data, metric } = props;
+    const { metric } = props;
+
     return (
         <NoContent
           size="small"
@@ -49,4 +50,4 @@ function ErrorsByOrigin(props: Props) {
     );
 }
 
-export default ErrorsByOrigin;
+export default ErrorsByOrigin;

frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx

@@ -79,8 +79,8 @@ function WidgetChart(props: Props) {
     const debounceRequest: any = React.useCallback(debounce(fetchMetricChartData, 500), []);
     useEffect(() => {
         if (prevMetricRef.current && prevMetricRef.current.name !== metric.name) {
-          prevMetricRef.current = metric;
-          return
+            prevMetricRef.current = metric;
+            return
         };
         prevMetricRef.current = metric;
         const timestmaps = drillDownPeriod.toTimestamps();
@@ -106,10 +106,11 @@ function WidgetChart(props: Props) {
         }
 
         if (metricType === 'predefined') {
+            const defaultMetric = metric.data.chart.length === 0 ? metricWithData : metric
             if (isOverviewWidget) {
                 return <CustomMetricOverviewChart data={data} />
             }
-            return <WidgetPredefinedChart isTemplate={isTemplate} metric={metric} data={data} predefinedKey={metric.predefinedKey} />
+            return <WidgetPredefinedChart isTemplate={isTemplate} metric={defaultMetric} data={data} predefinedKey={metric.predefinedKey} />
         }
 
         if (metricType === 'timeseries') {

frontend/app/mstore/dashboardStore.ts

@@ -19,7 +19,7 @@ import Session from "./types/session";
 import Error from "./types/error";
 import { FilterKey } from "Types/filter/filterType";
 
-export interface IDashboardSotre {
+export interface IDashboardStore {
     dashboards: IDashboard[];
     selectedDashboard: IDashboard | null;
     dashboardInstance: IDashboard;
@@ -85,12 +85,12 @@ export interface IDashboardSotre {
     ): Promise<any>;
     setPeriod(period: any): void;
 }
-export default class DashboardStore implements IDashboardSotre {
+export default class DashboardStore implements IDashboardStore {
     siteId: any = null;
     // Dashbaord / Widgets
     dashboards: Dashboard[] = [];
     selectedDashboard: Dashboard | null = null;
-    dashboardInstance: IDashboard = new Dashboard();
+    dashboardInstance: Dashboard = new Dashboard();
     selectedWidgets: IWidget[] = [];
     currentWidget: Widget = new Widget();
     widgetCategories: any[] = [];
@@ -214,7 +214,7 @@ export default class DashboardStore implements IDashboardSotre {
     }
 
     fetch(dashboardId: string): Promise<any> {
-        this.fetchingDashboard = true;
+        this.setFetchingDashboard(true);
         return dashboardService
             .getDashboard(dashboardId)
             .then((response) => {
@@ -223,10 +223,14 @@ export default class DashboardStore implements IDashboardSotre {
                 });
             })
             .finally(() => {
-                this.fetchingDashboard = false;
+                this.setFetchingDashboard(false);
             });
     }
 
+    setFetchingDashboard(value: boolean) {
+        this.fetchingDashboard = value;
+    }
+
     save(dashboard: IDashboard): Promise<any> {
         this.isSaving = true;
         const isCreating = !dashboard.dashboardId;

frontend/app/mstore/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DashboardStore, { IDashboardSotre } from './dashboardStore';
+import DashboardStore, { IDashboardStore } from './dashboardStore';
 import MetricStore, { IMetricStore } from './metricStore';
 import UserStore from './userStore';
 import RoleStore from './roleStore';
@@ -12,7 +12,7 @@ import NotificationStore from './notificationStore';
 import ErrorStore from './errorStore';
 
 export class RootStore {
-    dashboardStore: IDashboardSotre;
+    dashboardStore: IDashboardStore;
     metricStore: IMetricStore;
     funnelStore: FunnelStore;
     settingsStore: SettingsStore;

frontend/app/mstore/notificationStore.ts

@@ -18,6 +18,7 @@ export default class NotificationStore {
             fetchNotifications: action,
             ignoreAllNotifications: action,
             ignoreNotification: action,
+            setNotificationsCount: action,
         });
     }
 
@@ -74,15 +75,19 @@ export default class NotificationStore {
         });
     }
 
+    setNotificationsCount(count: number) {
+        this.notificationsCount = count;
+    }
+
     fetchNotificationsCount(): Promise<any> {
         return new Promise((resolve, reject) => {
             userService.getNotificationsCount()
                 .then((response: any) => {
-                    this.notificationsCount = response.count;
+                    this.setNotificationsCount(response.count);
                     resolve(response);
                 }).catch((error: any) => {
                     reject(error);
                 });
         });
     }
-}
+}

frontend/app/mstore/userStore.ts

@@ -23,6 +23,7 @@ export default class UserStore {
             updateUser: action,
             updateKey: action,
             initUser: action,
+            setLimits: action,
         })
     }
 
@@ -30,7 +31,7 @@ export default class UserStore {
         return new Promise((resolve, reject) => {
             userService.getLimits()
                 .then((response: any) => {
-                    this.limits = response;
+                    this.setLimits(response);
                     resolve(response);
                 }).catch((error: any) => {
                     reject(error);
@@ -38,6 +39,10 @@ export default class UserStore {
         });
     }
 
+    setLimits(limits: any) {
+        this.limits = limits;
+    }
+
     initUser(user?: any ): Promise<void> {
         return new Promise((resolve, reject) => {
             if (user) {
@@ -175,4 +180,4 @@ export default class UserStore {
 
         return promise;
     }
-}
+}