From 7d19b77e94da0964f13d490a45f175946536be58 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 24 Jun 2022 15:24:02 +0200 Subject: [PATCH] fix(ui) - no data msg and padding --- .../CustomMetricTableErrors.tsx | 42 ++++++++-------- .../CustomMetricTableSessions.tsx | 50 ++++++++++--------- .../Errors/ErrorListItem/ErrorListItem.tsx | 2 +- .../components/WidgetForm/WidgetForm.tsx | 3 +- frontend/app/mstore/dashboardStore.ts | 8 +-- 5 files changed, 55 insertions(+), 50 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx index b4ec284b0..b8e982b62 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx @@ -39,30 +39,30 @@ function CustomMetricTableErrors(props: RouteComponentProps) { return ( - {metric.data.errors && metric.data.errors.map((error: any, index: any) => ( - onErrorClick(e, error)} /> - ))} +
+ {metric.data.errors && metric.data.errors.map((error: any, index: any) => ( + onErrorClick(e, error)} /> + ))} - {isEdit && ( -
- metric.updateKey('page', page)} - limit={metric.limit} - debounceRequest={500} - /> -
- )} + {isEdit && ( +
+ metric.updateKey('page', page)} + limit={metric.limit} + debounceRequest={500} + /> +
+ )} - {!isEdit && ( - - )} + {!isEdit && ( + + )} +
); } @@ -70,7 +70,7 @@ function CustomMetricTableErrors(props: RouteComponentProps) { export default withRouter(CustomMetricTableErrors) as React.FunctionComponent>; const ViewMore = ({ total, limit }: any) => total > limit && ( -
+
All {total} errors diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx index 8e2fa38ea..4c06664c7 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx @@ -14,29 +14,33 @@ function CustomMetricTableSessions(props: Props) { const { isEdit = false, metric } = props; return useObserver(() => ( - - {metric.data.sessions && metric.data.sessions.map((session: any, index: any) => ( - <> - -
- - ))} - - {isEdit && ( -
- metric.updateKey('page', page)} - limit={metric.data.total} - debounceRequest={500} - /> -
- )} + +
+ {metric.data.sessions && metric.data.sessions.map((session: any, index: any) => ( +
+ +
+ ))} + + {isEdit && ( +
+ metric.updateKey('page', page)} + limit={metric.data.total} + debounceRequest={500} + /> +
+ )} - {!isEdit && ( - - )} + {!isEdit && ( + + )} +
)); } @@ -44,7 +48,7 @@ function CustomMetricTableSessions(props: Props) { export default CustomMetricTableSessions; const ViewMore = ({ total, limit }: any) => total > limit && ( -
+
All {total} sessions diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorListItem/ErrorListItem.tsx b/frontend/app/components/Dashboard/components/Errors/ErrorListItem/ErrorListItem.tsx index a5469b128..bb91826a6 100644 --- a/frontend/app/components/Dashboard/components/Errors/ErrorListItem/ErrorListItem.tsx +++ b/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; diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx index dd018f16b..776368e9c 100644 --- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx +++ b/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) { diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index 67a7eb644..07c75a7a6 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/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)