fix(ui) - no data msg and padding

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

@@ -39,30 +39,30 @@ function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
 
     return (
         <NoContent
-            title="No data found"
-            subtext=""
-            show={metric.data.errors && metric.data.errors === 0}
+            show={!metric.data.errors || metric.data.errors.length === 0}
             size="small"
         >
-            {metric.data.errors && metric.data.errors.map((error: any, index: any) => (
-                <ErrorListItem key={index} error={error} onClick={(e) => onErrorClick(e, error)} />
-            ))}
+            <div className="pb-4">
+                {metric.data.errors && metric.data.errors.map((error: any, index: any) => (
+                    <ErrorListItem key={index} error={error} onClick={(e) => onErrorClick(e, error)} />
+                ))}
 
-            {isEdit && (
-                <div className="my-6 flex items-center justify-center">
-                    <Pagination
-                        page={metric.page}
-                        totalPages={Math.ceil(metric.data.total / metric.limit)}
-                        onPageChange={(page: any) => metric.updateKey('page', page)}
-                        limit={metric.limit}
-                        debounceRequest={500}
-                    />
-                </div>
-            )}
+                {isEdit && (
+                    <div className="my-6 flex items-center justify-center">
+                        <Pagination
+                            page={metric.page}
+                            totalPages={Math.ceil(metric.data.total / metric.limit)}
+                            onPageChange={(page: any) => metric.updateKey('page', page)}
+                            limit={metric.limit}
+                            debounceRequest={500}
+                        />
+                    </div>
+                )}
 
-            {!isEdit && (
-                <ViewMore total={metric.data.total} limit={metric.limit} />
-            )}
+                {!isEdit && (
+                    <ViewMore total={metric.data.total} limit={metric.limit} />
+                )}
+            </div>
         </NoContent>
     );
 }
@@ -70,7 +70,7 @@ function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
 export default withRouter(CustomMetricTableErrors) as React.FunctionComponent<RouteComponentProps<Props>>;
 
 const ViewMore = ({ total, limit }: any) => total > limit && (
-    <div className="my-4 flex items-center justify-center cursor-pointer w-fit mx-auto">
+    <div className="mt-4 flex items-center justify-center cursor-pointer w-fit mx-auto">
         <div className="text-center">
             <div className="color-teal text-lg">
                 All <span className="font-medium">{total}</span> errors

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

@@ -14,29 +14,33 @@ function CustomMetricTableSessions(props: Props) {
     const { isEdit = false, metric } = props;
     
     return useObserver(() => (
-        <NoContent show={!metric || !metric.data || !metric.data.sessions || metric.data.sessions.length === 0} size="small">
-            {metric.data.sessions && metric.data.sessions.map((session: any, index: any) => (
-                <>
-                    <SessionItem session={session} key={session.sessionId} />
-                    <div className="border-b" />
-                </>
-            ))}
-            
-            {isEdit && (
-                <div className="my-6 flex items-center justify-center">
-                    <Pagination
-                        page={metric.page}
-                        totalPages={Math.ceil(metric.data.total / metric.limit)}
-                        onPageChange={(page: any) => metric.updateKey('page', page)}
-                        limit={metric.data.total}
-                        debounceRequest={500}
-                    />
-                </div>
-            )}
+        <NoContent
+            show={!metric || !metric.data || !metric.data.sessions || metric.data.sessions.length === 0}
+            size="small"
+        >
+            <div className="pb-4">
+                {metric.data.sessions && metric.data.sessions.map((session: any, index: any) => (
+                    <div className="border-b last:border-none">
+                        <SessionItem session={session} key={session.sessionId} />
+                    </div>
+                ))}
+                
+                {isEdit && (
+                    <div className="mt-6 flex items-center justify-center">
+                        <Pagination
+                            page={metric.page}
+                            totalPages={Math.ceil(metric.data.total / metric.limit)}
+                            onPageChange={(page: any) => metric.updateKey('page', page)}
+                            limit={metric.data.total}
+                            debounceRequest={500}
+                        />
+                    </div>
+                )}
 
-            {!isEdit && (
-                <ViewMore total={metric.data.total} limit={metric.limit} />
-            )}
+                {!isEdit && (
+                    <ViewMore total={metric.data.total} limit={metric.limit} />
+                )}
+            </div>
         </NoContent>
     ));
 }
@@ -44,7 +48,7 @@ function CustomMetricTableSessions(props: Props) {
 export default CustomMetricTableSessions;
 
 const ViewMore = ({ total, limit }: any) => total > limit && (
-    <div className="my-4 flex items-center justify-center cursor-pointer w-fit mx-auto">
+    <div className="mt-4 flex items-center justify-center cursor-pointer w-fit mx-auto">
         <div className="text-center">
             <div className="color-teal text-lg">
                 All <span className="font-medium">{total}</span> sessions

frontend/app/components/Dashboard/components/Errors/ErrorListItem/ErrorListItem.tsx

@@ -15,7 +15,7 @@ import ErrorDetailsModal from '../ErrorDetailsModal';
 interface Props {
     error: any;
     className?: string;
-	onClick: () => void;
+	onClick: (e: any) => void;
 }
 function ErrorListItem(props: Props) {
     const { error, className = '' } = props;

frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx

@@ -30,6 +30,7 @@ function WidgetForm(props: Props) {
     const isFunnel = metric.metricType === 'funnel';
     const canAddToDashboard = metric.exists() && dashboards.length > 0;
     const canAddSeries = metric.series.length < 3;
+    const cannotSaveFunnel = isFunnel && !metric.series[0] && metric.series[0].filter.filters.length <= 1;
 
     const writeOption = ({ value, name }: any) => {
         value = Array.isArray(value) ? value : value.value
@@ -188,7 +189,7 @@ function WidgetForm(props: Props) {
                 <Button
                     variant="primary"
                     onClick={onSave}
-                    disabled={isSaving}
+                    disabled={isSaving || cannotSaveFunnel}
                 >
                     {metric.exists() ? 'Update' : 'Create'}
                 </Button>

frontend/app/mstore/dashboardStore.ts

@@ -3,7 +3,7 @@ import Dashboard, { IDashboard } from "./types/dashboard"
 import Widget, { IWidget } from "./types/widget";
 import { dashboardService, metricService } from "App/services";
 import { toast } from 'react-toastify';
-import Period, { LAST_24_HOURS, LAST_30_DAYS } from 'Types/app/period';
+import Period, { LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS } from 'Types/app/period';
 import { getChartFormatter } from 'Types/dashboard/helper';
 import Filter, { IFilter } from "./types/filter";
 import Funnel from "./types/funnel";
@@ -83,9 +83,9 @@ export default class DashboardStore implements IDashboardSotre {
     currentWidget: Widget = new Widget()
     widgetCategories: any[] = []
     widgets: Widget[] = []
-    period: Period = Period({ rangeName: LAST_30_DAYS })
+    period: Period = Period({ rangeName: LAST_24_HOURS })
     drillDownFilter: Filter = new Filter()
-    drillDownPeriod: Period = Period({ rangeName: LAST_30_DAYS });
+    drillDownPeriod: Period = Period({ rangeName: LAST_7_DAYS });
     startTimestamp: number = 0
     endTimestamp: number = 0
 
@@ -138,7 +138,7 @@ export default class DashboardStore implements IDashboardSotre {
             fetchMetricChartData: action
         })
 
-        this.drillDownPeriod = Period({ rangeName: LAST_30_DAYS });
+        this.drillDownPeriod = Period({ rangeName: LAST_7_DAYS });
         const timeStamps = this.drillDownPeriod.toTimestamps();
         this.drillDownFilter.updateKey('startTimestamp', timeStamps.startTimestamp)
         this.drillDownFilter.updateKey('endTimestamp', timeStamps.endTimestamp)