feat(ui) - errors details modal

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Pagination } from 'UI';
+import { Pagination, NoContent } from 'UI';
 import ErrorListItem from '../../../components/Errors/ErrorListItem';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { useModal } from 'App/components/Modal';
@@ -30,7 +30,7 @@ function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
     }, [errorId])
 
     return (
-        <div>
+        <NoContent show={metric.data.errors && metric.data.errors === 0}>
             {metric.data.errors && metric.data.errors.map((error: any, index: any) => (
                 <ErrorListItem error={error} onClick={() => onErrorClick(error)} />
             ))}
@@ -50,7 +50,7 @@ function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
             {!isEdit && (
                 <ViewMore total={metric.data.total} limit={metric.limit} />
             )}
-        </div>
+        </NoContent>
     );
 }
 

frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FunnelStepText from './FunnelStepText';
-import { Icon } from 'UI';
+import { Icon, Popup } from 'UI';
 
 interface Props {
     filter: any;
@@ -32,6 +32,28 @@ function FunnelBar(props: Props) {
                 }}>
                     <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">{filter.completedPercentage}%</div>
                 </div>
+                {filter.dropDueToIssues > 0 && (
+                    <div className="flex items-center justify-end" style={{
+                        width: `${filter.dropDueToIssuesPercentage}%`,
+                        position: 'absolute',
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: `${filter.completedPercentage}%`,
+                        // height: '10px',
+                        backgroundColor: '#ff5a5f',
+                        opacity: 0.5,
+                    }}>
+                        <Popup
+                            content="Drop due to issues"
+                            // offset={100}
+                            sticky={true}
+                        >
+                            <div className="color-white w-full flex items-center font-medium mr-2 leading-3">{filter.dropDueToIssuesPercentage}%</div>
+                        </Popup>
+                    </div>
+                    
+                )}
             </div>
             <div className="flex justify-between py-2">
                 <div className="flex items-center">

frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Widget from 'App/mstore/types/widget';
 import Funnelbar from './FunnelBar';
 import cn from 'classnames';
@@ -84,7 +84,7 @@ function EmptyStage({ total }: any) {
 }
 
 function Stage({ stage, index, isWidget }: any) {
-    return useObserver( () => (
+    return useObserver(() => stage && (
         <div className={cn("flex items-start", stl.step, { [stl['step-disabled']] : !stage.isActive })}>
             <IndexNumber index={index } />
             <Funnelbar filter={stage} />

frontend/app/mstore/dashboardStore.ts

@@ -138,7 +138,7 @@ export default class DashboardStore implements IDashboardSotre {
             fetchMetricChartData: action
         })
 
-        this.drillDownPeriod = Period({ rangeName: LAST_24_HOURS });
+        this.drillDownPeriod = Period({ rangeName: LAST_30_DAYS });
         const timeStamps = this.drillDownPeriod.toTimestamps();
         this.drillDownFilter.updateKey('startTimestamp', timeStamps.startTimestamp)
         this.drillDownFilter.updateKey('endTimestamp', timeStamps.endTimestamp)

frontend/app/mstore/types/funnel.ts

@@ -1,4 +1,5 @@
 import FunnelStage from './funnelStage'
+// import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx"
 
 export interface IFunnel {
     affectedUsers: number;
@@ -9,8 +10,6 @@ export interface IFunnel {
     lostConversionsPercentage: number
     isPublic: boolean
     fromJSON: (json: any) => void
-    toJSON: () => any
-    exists: () => boolean
 }
 
 export default class Funnel implements IFunnel {
@@ -22,20 +21,26 @@ export default class Funnel implements IFunnel {
     totalConversionsPercentage: number = 0
     isPublic: boolean = false
     stages: FunnelStage[] = []
+    raw: any = null
 
     constructor() {
     }
 
     fromJSON(json: any) {
+        if (!this.raw) {
+            this.raw = json
+        }
+        
         if (json.stages.length >= 1) {
             const firstStage = json.stages[0]
-            const lastStage = json.stages[json.stages.length - 1]
+            this.stages = json.stages ? json.stages.map((stage: any, index: number) => new FunnelStage().fromJSON(stage, firstStage.sessionsCount, index > 0 ? json.stages[index - 1].sessionsCount : stage.sessionsCount)) : []
+            const filteredStages = this.stages.filter((stage: any) => stage.isActive)
+            const lastStage = filteredStages[filteredStages.length - 1]
             this.lostConversions = firstStage.sessionsCount - lastStage.sessionsCount
             this.lostConversionsPercentage = Math.round(this.lostConversions / firstStage.sessionsCount * 100)
             this.totalConversions = lastStage.sessionsCount
             this.totalConversionsPercentage = Math.round(this.totalConversions / firstStage.sessionsCount * 100)
             this.conversionImpact = this.lostConversions ? Math.round((this.lostConversions / firstStage.sessionsCount) * 100) : 0;
-            this.stages = json.stages ? json.stages.map((stage: any, index: number) => new FunnelStage().fromJSON(stage, firstStage.sessionsCount, index > 0 ? json.stages[index - 1].sessionsCount : stage.sessionsCount)) : []
             this.affectedUsers = firstStage.usersCount ? firstStage.usersCount - lastStage.usersCount : 0;
         }
 

frontend/app/mstore/types/funnelStage.ts

@@ -2,6 +2,7 @@ import { makeAutoObservable, observable, action } from "mobx"
 import { filterLabelMap } from 'Types/filter/newFilter';
 export default class FunnelStage {
     dropDueToIssues: number = 0;
+    dropDueToIssuesPercentage: number = 0;
     dropPct: number = 0;
     operator: string = "";
     sessionsCount: number = 0;
@@ -30,6 +31,7 @@ export default class FunnelStage {
         this.type = json.type;
         this.label = filterLabelMap[json.type] || json.type;
         this.completedPercentage = total ? Math.round((this.sessionsCount / total) * 100) : 0;
+        this.dropDueToIssuesPercentage = total ? Math.round((this.dropDueToIssues / total) * 100) : 0;
         this.droppedCount = previousSessionCount - this.sessionsCount;
         return this;
     }