From 8e0b30ece40e7dd7d9aa86d37a13cfbbc6387dfc Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 19 May 2025 13:43:28 +0200 Subject: [PATCH] ui: delete deprecated components, fix widgetchart props, fix dashboard page reload check --- .../DashboardMetricSelection.tsx | 143 +----------------- .../DashboardModal/DashboardModal.tsx | 109 ------------- .../components/DashboardModal/index.ts | 1 - .../DashboardView/DashboardView.tsx | 25 +-- .../DashboardWidgetGrid/AddMetric.tsx | 129 ---------------- .../AddMetricContainer.tsx | 138 ----------------- .../DashboardWidgetGrid.tsx | 1 - .../components/MetricsList/GridView.tsx | 37 ----- .../components/WidgetChart/WidgetChart.tsx | 56 +++---- .../WidgetDateRange/WidgetDateRange.tsx | 1 - .../WidgetWrapper/WidgetWrapper.tsx | 11 +- .../WidgetWrapper/WidgetWrapperNew.tsx | 4 +- frontend/app/mstore/dashboardStore.ts | 57 +++---- 13 files changed, 61 insertions(+), 651 deletions(-) delete mode 100644 frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx delete mode 100644 frontend/app/components/Dashboard/components/DashboardModal/index.ts delete mode 100644 frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx delete mode 100644 frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx delete mode 100644 frontend/app/components/Dashboard/components/MetricsList/GridView.tsx diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx index 491219d7d..3872ead56 100644 --- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx +++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx @@ -1,10 +1,7 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { useObserver } from 'mobx-react-lite'; -import { Icon, Loader } from 'UI'; +import { Icon } from 'UI'; import cn from 'classnames'; -import { useStore } from 'App/mstore'; -import WidgetWrapper from '../WidgetWrapper'; -import { useTranslation } from 'react-i18next'; interface IWiProps { category: Record; @@ -57,139 +54,3 @@ export function WidgetCategoryItem({ ); } - -interface IProps { - handleCreateNew?: () => void; - isDashboardExists?: boolean; -} - -function DashboardMetricSelection(props: IProps) { - const { t } = useTranslation(); - const { dashboardStore } = useStore(); - const widgetCategories: any[] = useObserver( - () => dashboardStore.widgetCategories, - ); - const loadingTemplates = useObserver(() => dashboardStore.loadingTemplates); - const [activeCategory, setActiveCategory] = React.useState(); - const [selectAllCheck, setSelectAllCheck] = React.useState(false); - const selectedWidgetIds = useObserver(() => - dashboardStore.selectedWidgets.map((widget: any) => widget.metricId), - ); - const scrollContainer = React.useRef(null); - - useEffect(() => { - dashboardStore?.fetchTemplates(true).then((categories) => { - setActiveCategory(categories[0]); - }); - }, []); - - useEffect(() => { - if (scrollContainer.current) { - scrollContainer.current.scrollTop = 0; - } - }, [activeCategory, scrollContainer.current]); - - const handleWidgetCategoryClick = (category: any) => { - setActiveCategory(category); - setSelectAllCheck(false); - }; - - const toggleAllWidgets = ({ target: { checked } }) => { - setSelectAllCheck(checked); - if (checked) { - dashboardStore.selectWidgetsByCategory(activeCategory.name); - } else { - dashboardStore.removeSelectedWidgetByCategory(activeCategory); - } - }; - - return useObserver(() => ( - -
-
-
{t('Type')}
-
- -
- {activeCategory && ( - <> -
-

{activeCategory.name}

- - {activeCategory.widgets.length} - -
- -
- -
- - )} -
-
-
-
-
- {activeCategory && - widgetCategories.map((category, index) => ( - - ))} -
-
-
-
- {activeCategory && - activeCategory.widgets.map((widget: any) => ( - dashboardStore.toggleWidgetSelection(widget)} - /> - ))} - {props.isDashboardExists && activeCategory?.name === 'custom' && ( -
- - {t('Create Metric')} -
- )} -
-
-
- - )); -} - -export default DashboardMetricSelection; diff --git a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx deleted file mode 100644 index e175c8ccb..000000000 --- a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import React from 'react'; -import { useObserver } from 'mobx-react-lite'; -import { Button } from 'antd'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; -import { useStore } from 'App/mstore'; -import { useModal } from 'App/components/Modal'; -import { dashboardMetricCreate, withSiteId } from 'App/routes'; -import DashboardForm from '../DashboardForm'; -import DashboardMetricSelection from '../DashboardMetricSelection'; -import { useTranslation } from 'react-i18next'; -import { PANEL_SIZES } from 'App/constants/panelSizes' - -interface Props extends RouteComponentProps { - history: any; - siteId?: string; - dashboardId?: string; - onMetricAdd?: () => void; -} -function DashboardModal(props: Props) { - const { t } = useTranslation(); - const { history, siteId, dashboardId } = props; - const { dashboardStore } = useStore(); - const selectedWidgetsCount = useObserver( - () => dashboardStore.selectedWidgets.length, - ); - const { hideModal } = useModal(); - const dashboard = useObserver(() => dashboardStore.dashboardInstance); - const loading = useObserver(() => dashboardStore.isSaving); - - const onSave = () => { - dashboardStore - .save(dashboard) - .then(async (syncedDashboard) => { - if (dashboard.exists()) { - await dashboardStore.fetch(dashboard.dashboardId); - } - dashboardStore.selectDashboardById(syncedDashboard.dashboardId); - history.push( - withSiteId(`/dashboard/${syncedDashboard.dashboardId}`, siteId), - ); - }) - .then(hideModal); - }; - - const handleCreateNew = () => { - const path = withSiteId(dashboardMetricCreate(dashboardId), siteId); - props.onMetricAdd(); - history.push(path); - hideModal(); - }; - const isDashboardExists = dashboard.exists(); - - return useObserver(() => ( -
-
-
-
-

- {isDashboardExists - ? t('Add metrics to dashboard') - : t('Create Dashboard')} -

-
-
- {t('Past 7 days data')} -
-
- {!isDashboardExists && ( - <> - -

- {t( - 'Create new dashboard by choosing from the range of predefined metrics that you care about. You can always add your custom metrics later.', - )} -

- - )} - - -
- - - {selectedWidgetsCount} {t('Metrics')} - -
-
-
- )); -} - -export default withRouter(DashboardModal); diff --git a/frontend/app/components/Dashboard/components/DashboardModal/index.ts b/frontend/app/components/Dashboard/components/DashboardModal/index.ts deleted file mode 100644 index ff9b51745..000000000 --- a/frontend/app/components/Dashboard/components/DashboardModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './DashboardModal'; diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx index 85b15b17e..02c7d73fe 100644 --- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx +++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx @@ -11,7 +11,6 @@ import withPageTitle from 'HOCs/withPageTitle'; import withReport from 'App/components/hocs/withReport'; import { useHistory } from 'react-router'; import DashboardHeader from '../DashboardHeader'; -import DashboardModal from '../DashboardModal'; import DashboardWidgetGrid from '../DashboardWidgetGrid'; import AiQuery from './AiQuery'; import { PANEL_SIZES } from 'App/constants/panelSizes' @@ -69,15 +68,18 @@ function DashboardView(props: Props) { onAddWidgets(); trimQuery(); } + dashboardStore.resetDensity(); return () => dashboardStore.resetSelectedDashboard(); }, []); useEffect(() => { - const isExists = dashboardStore.getDashboardById(dashboardId); - if (!isExists) { - history.push(withSiteId('/dashboard', siteId)); - } + const isExists = async () => dashboardStore.getDashboardById(dashboardId); + isExists().then((res) => { + if (!res) { + history.push(withSiteId('/dashboard', siteId)); + } + }) }, [dashboardId]); useEffect(() => { @@ -85,18 +87,6 @@ function DashboardView(props: Props) { dashboardStore.fetch(dashboard.dashboardId); }, [dashboard]); - const onAddWidgets = () => { - dashboardStore.initDashboard(dashboard); - showModal( - , - { right: true }, - ); - }; - if (!dashboard) return null; const originStr = window.env.ORIGIN || window.location.origin; @@ -117,7 +107,6 @@ function DashboardView(props: Props) { diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx deleted file mode 100644 index 4220045a4..000000000 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import React from 'react'; -import { observer } from 'mobx-react-lite'; -import { Loader } from 'UI'; -import { Button } from 'antd'; -import WidgetWrapper from 'App/components/Dashboard/components/WidgetWrapper'; -import { useStore } from 'App/mstore'; -import { useModal } from 'App/components/Modal'; -import { dashboardMetricCreate, withSiteId } from 'App/routes'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; -import { useTranslation } from 'react-i18next'; - -interface IProps extends RouteComponentProps { - siteId: string; - title: string; - description: string; -} - -function AddMetric({ history, siteId, title, description }: IProps) { - const { t } = useTranslation(); - const [metrics, setMetrics] = React.useState[]>([]); - - const { dashboardStore } = useStore(); - const { hideModal } = useModal(); - - React.useEffect(() => { - dashboardStore?.fetchTemplates(true).then((cats: any[]) => { - const customMetrics = - cats.find((category) => category.name === 'custom')?.widgets || []; - - setMetrics(customMetrics); - }); - }, []); - - const dashboard = dashboardStore.selectedDashboard; - const selectedWidgetIds = dashboardStore.selectedWidgets.map( - (widget: any) => widget.metricId, - ); - const queryParams = new URLSearchParams(location.search); - - const onSave = () => { - if (selectedWidgetIds.length === 0) return; - dashboardStore - .save(dashboard) - .then(async (syncedDashboard: Record) => { - if (dashboard.exists()) { - await dashboardStore.fetch(dashboard.dashboardId); - } - dashboardStore.selectDashboardById(syncedDashboard.dashboardId); - }) - .then(hideModal); - }; - - const onCreateNew = () => { - const path = withSiteId( - dashboardMetricCreate(dashboard.dashboardId), - siteId, - ); - if (!queryParams.has('modal')) history.push('?modal=addMetric'); - history.push(path); - hideModal(); - }; - - return ( -
-
-
-
-

{title}

-
{description}
-
- - -
- -
- {metrics ? ( - metrics.map((metric: any) => ( - dashboardStore.toggleWidgetSelection(metric)} - /> - )) - ) : ( -
{t('No custom metrics created.')}
- )} -
- - -
-
- {t('Selected')} - {selectedWidgetIds.length} -  {t('out of')}  - {metrics ? metrics.length : 0} -
- -
-
-
- ); -} - -export default withRouter(observer(AddMetric)); diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx deleted file mode 100644 index 7f768002e..000000000 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React from 'react'; -import { observer } from 'mobx-react-lite'; -import { Icon } from 'UI'; -import { useModal } from 'App/components/Modal'; -import { useStore } from 'App/mstore'; -import cn from 'classnames'; -import AddMetric from './AddMetric'; -import AddPredefinedMetric from './AddPredefinedMetric'; - -interface AddMetricButtonProps { - iconName: 'bar-pencil' | 'grid-check'; - title: string; - description: string; - isPremade?: boolean; - isPopup?: boolean; - onClick: () => void; -} - -function AddMetricButton({ - iconName, - title, - description, - onClick, - isPremade, - isPopup, -}: AddMetricButtonProps) { - return ( -
-
- -
-
-
- {title} -
-
- {description} -
-
-
- ); -} - -interface Props { - siteId: string; - isPopup?: boolean; - onAction?: () => void; -} - -function AddMetricContainer({ siteId, isPopup, onAction }: Props) { - const { showModal } = useModal(); - const { dashboardStore } = useStore(); - - const onAddCustomMetrics = () => { - onAction?.(); - dashboardStore.initDashboard(dashboardStore.selectedDashboard); - showModal( - , - { right: true }, - ); - }; - - const onAddPredefinedMetrics = () => { - onAction?.(); - dashboardStore.initDashboard(dashboardStore.selectedDashboard); - showModal( - , - { right: true }, - ); - }; - - const classes = isPopup - ? 'bg-white border rounded p-4 grid grid-rows-2 gap-4' - : 'bg-white border border-dashed hover:!border-gray-medium rounded p-8 grid grid-cols-2 gap-8'; - return ( -
- - -
- ); -} - -export default observer(AddMetricContainer); diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx index 15241457d..117719eaa 100644 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx +++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx @@ -12,7 +12,6 @@ import { useTranslation } from 'react-i18next'; interface Props { siteId: string; dashboardId: string; - onEditHandler: () => void; id?: string; } diff --git a/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx b/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx deleted file mode 100644 index a7b989871..000000000 --- a/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import WidgetWrapper from 'App/components/Dashboard/components/WidgetWrapper'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; -import { withSiteId } from 'App/routes'; - -interface Props extends RouteComponentProps { - list: any; - siteId: any; - selectedList: any; -} -function GridView(props: Props) { - const { siteId, list, selectedList, history } = props; - - const onItemClick = (metricId: number) => { - const path = withSiteId(`/metrics/${metricId}`, siteId); - history.push(path); - }; - - return ( -
- {list.map((metric: any) => ( - - onItemClick(parseInt(metric.metricId))} - /> - - ))} -
- ); -} - -export default withRouter(GridView); diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx index 49235d131..3106177d0 100644 --- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx @@ -54,7 +54,7 @@ function WidgetChart(props: Props) { }); const { isSaved = false, metric, isTemplate } = props; const { dashboardStore, metricStore } = useStore(); - const _metric: any = props.isPreview ? metricStore.instance : props.metric; + const _metric: any = props.metric; const data = _metric.data; const { period } = dashboardStore; const { drillDownPeriod } = dashboardStore; @@ -66,7 +66,6 @@ function WidgetChart(props: Props) { const metricParams = _metric.params; const prevMetricRef = useRef(); const isMounted = useIsMounted(); - const [metricData, setMetricData] = useState(data); const [compData, setCompData] = useState(null); const [enabledRows, setEnabledRows] = useState( _metric.series.map((s) => s.name), @@ -158,16 +157,9 @@ function WidgetChart(props: Props) { setStale(true); }, 4000); dashboardStore - .fetchMetricChartData( - metric, - payload, - isSaved, - period, - isComparison - ) + .fetchMetricChartData(metric, payload, isSaved, period, isComparison) .then((res) => { if (isComparison) setCompData(res); - else setMetricData(res); clearTimeout(tm); setStale(false); }) @@ -189,10 +181,10 @@ function WidgetChart(props: Props) { } prevMetricRef.current = _metric; const timestmaps = drillDownPeriod.toTimestamps(); - const density = props.isPreview ? metric.density : dashboardStore.selectedDensity + const density = dashboardStore.selectedDensity; const payload = isSaved - ? { ...metricParams, density } - : { ...params, ...timestmaps, ..._metric.toJson(), density }; + ? { ...metricParams, density } + : { ...params, ...timestmaps, ..._metric.toJson(), density }; debounceRequest( _metric, payload, @@ -260,7 +252,7 @@ function WidgetChart(props: Props) { const renderChart = React.useCallback(() => { const { metricType, metricOf } = _metric; const { viewType } = _metric; - const metricWithData = { ..._metric, data: metricData }; + const metricWithData = { ..._metric, data }; if (metricType === FUNNEL) { if (viewType === 'table') { @@ -274,7 +266,7 @@ function WidgetChart(props: Props) { valueLabel?: string; }[] = [ { - value: metricData.funnel.totalConversionsPercentage, + value: data.funnel.totalConversionsPercentage, compData: compData ? compData.funnel.totalConversionsPercentage : undefined, @@ -298,7 +290,7 @@ function WidgetChart(props: Props) { return ( @@ -314,14 +306,14 @@ function WidgetChart(props: Props) { ); } if (metricType === TIMESERIES) { - const chartData = { ...metricData }; + const chartData = { ...data }; chartData.namesMap = Array.isArray(chartData.namesMap) ? chartData.namesMap.map((n) => (enabledRows.includes(n) ? n : null)) : chartData.namesMap; @@ -419,7 +411,7 @@ function WidgetChart(props: Props) { return ( acc + curr[metricData.namesMap[i]], + value: data.chart.reduce( + (acc, curr) => acc + curr[data.namesMap[i]], 0, ), compData: compData @@ -452,7 +444,7 @@ function WidgetChart(props: Props) { 0, ) : undefined, - series: metricData.namesMap[i], + series: data.namesMap[i], }); } @@ -477,7 +469,7 @@ function WidgetChart(props: Props) { return ( @@ -487,7 +479,7 @@ function WidgetChart(props: Props) { return ( @@ -497,7 +489,7 @@ function WidgetChart(props: Props) { return ( @@ -530,10 +522,10 @@ function WidgetChart(props: Props) { } if (metricType === INSIGHTS) { - return ; + return ; } - if (metricType === USER_PATH && metricData && metricData.links) { + if (metricType === USER_PATH && data && data.links) { const isUngrouped = props.isPreview ? !(_metric.hideExcess ?? true) : false; @@ -541,7 +533,7 @@ function WidgetChart(props: Props) { return ( { dashboardStore.drillDownFilter.merge({ filters, page: 1 }); @@ -556,7 +548,7 @@ function WidgetChart(props: Props) { if (viewType === 'trend') { return ( {t('Unknown metric type')}; - }, [data, compData, enabledRows, _metric, metricData]); + }, [data, compData, enabledRows, _metric, data]); const showTable = _metric.metricType === TIMESERIES && diff --git a/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx b/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx index ad11b6703..7a3a2e915 100644 --- a/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx +++ b/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx @@ -6,7 +6,6 @@ import { Space } from 'antd'; import { CUSTOM_RANGE, DATE_RANGE_COMPARISON_OPTIONS } from 'App/dateRange'; import Period from 'Types/app/period'; import RangeGranularity from './RangeGranularity'; -import { useTranslation } from 'react-i18next'; function WidgetDateRange({ label = 'Time Range', diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx index d8472bc76..b3b24118f 100644 --- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx +++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx @@ -1,13 +1,12 @@ import React, { useRef, lazy } from 'react'; import cn from 'classnames'; -import { ItemMenu, TextEllipsis } from 'UI'; +import { TextEllipsis } from 'UI'; import { useDrag, useDrop } from 'react-dnd'; import { observer } from 'mobx-react-lite'; import { useStore } from 'App/mstore'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import { withSiteId, dashboardMetricDetails } from 'App/routes'; import { FilterKey } from 'App/types/filter/filterType'; -import { TIMESERIES } from 'App/constants/card'; import TemplateOverlay from './TemplateOverlay'; const WidgetChart = lazy( @@ -45,7 +44,6 @@ function WidgetWrapper(props: Props & RouteComponentProps) { isGridView = false, } = props; const { widget } = props; - const isTimeSeries = widget.metricType === TIMESERIES; const isPredefined = widget.metricType === 'predefined'; const dashboard = dashboardStore.selectedDashboard; @@ -73,13 +71,6 @@ function WidgetWrapper(props: Props & RouteComponentProps) { }), }); - const onDelete = async () => { - dashboardStore.deleteDashboardWidget( - dashboard?.dashboardId!, - widget.widgetId, - ); - }; - const onChartClick = () => { if (!isSaved || isPredefined) return; diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx index 1b8bf5cb9..a6569da29 100644 --- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx +++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx @@ -38,7 +38,7 @@ interface Props { isSaved?: boolean; } -function WidgetWrapperNew(props: Props & RouteComponentProps) { +function WidgetWrapperDashboard(props: Props & RouteComponentProps) { const { dashboardStore, metricStore } = useStore(); const { isWidget = false, @@ -178,4 +178,4 @@ function WidgetWrapperNew(props: Props & RouteComponentProps) { ); } -export default withRouter(observer(WidgetWrapperNew)); +export default withRouter(observer(WidgetWrapperDashboard)); diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index f5e3bbce7..bac09a4e2 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/frontend/app/mstore/dashboardStore.ts @@ -14,70 +14,39 @@ interface DashboardFilter { } export default class DashboardStore { siteId: any = null; - dashboards: Dashboard[] = []; - selectedDashboard: Dashboard | null = null; - dashboardInstance: Dashboard = new Dashboard(); - selectedWidgets: Widget[] = []; - currentWidget: Widget = new Widget(); - widgetCategories: any[] = []; - widgets: Widget[] = []; - period: Record = Period({ rangeName: LAST_24_HOURS }); - drillDownFilter: Filter = new Filter(); - comparisonFilter: Filter = new Filter(); - drillDownPeriod: Record = Period({ rangeName: LAST_24_HOURS }); - selectedDensity: number = 7; - comparisonPeriods: Record = {}; - startTimestamp: number = 0; - endTimestamp: number = 0; - pendingRequests: number = 0; - filter: DashboardFilter = { showMine: false, query: '' }; - // Metrics metricsPage: number = 1; - metricsPageSize: number = 10; - metricsSearch: string = ''; - // Loading states isLoading: boolean = false; - isSaving: boolean = false; - isDeleting: boolean = false; - loadingTemplates: boolean = false; - fetchingDashboard: boolean = false; - sessionsLoading: boolean = false; - showAlertModal: boolean = false; - // Pagination page: number = 1; - pageSize: number = 10; - dashboardsSearch: string = ''; - sort: any = { by: 'desc' }; constructor() { @@ -94,6 +63,10 @@ export default class DashboardStore { ) } + resetDensity = () => { + this.createDensity(this.period.getDuration()); + } + createDensity = (duration: number) => { const densityOpts = calculateGranularities(duration); const defaultOption = densityOpts[densityOpts.length - 2]; @@ -212,6 +185,7 @@ export default class DashboardStore { this.currentWidget.update(widget); } + listFetched = false; fetchList(): Promise { this.isLoading = true; @@ -226,6 +200,7 @@ export default class DashboardStore { }) .finally(() => { runInAction(() => { + this.listFetched = true; this.isLoading = false; }); }); @@ -388,7 +363,24 @@ export default class DashboardStore { new Dashboard(); }; - getDashboardById = (dashboardId: string) => { + getDashboardById = async (dashboardId: string) => { + if (!this.listFetched) { + const maxWait = (5*1000)/250; + let count = 0; + await new Promise((resolve) => { + const interval = setInterval(() => { + if (this.listFetched) { + clearInterval(interval); + resolve(true); + } + if (count >= maxWait) { + clearInterval(interval); + resolve(false); + } + count++; + }, 250); + }) + } const dashboard = this.dashboards.find((d) => d.dashboardId == dashboardId); if (dashboard) { @@ -546,6 +538,7 @@ export default class DashboardStore { params, isSaved ); + console.log('db store', params) const res = metric.setData(data, period, isComparison, data.density) resolve(res); } catch (error) {