diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx index 1993cd2f6..6d55eb5d2 100644 --- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx +++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react'; import { useStore } from 'App/mstore'; +import { Icon, Loader, Link } from 'UI'; import WidgetForm from '../WidgetForm'; import WidgetPreview from '../WidgetPreview'; import WidgetSessions from '../WidgetSessions'; -import { Icon, BackLink, Loader } from 'UI'; import { useObserver } from 'mobx-react-lite'; import { withSiteId } from 'App/routes'; import WidgetName from '../WidgetName'; + interface Props { history: any; match: any @@ -29,7 +30,7 @@ function WidgetView(props: Props) { const onBackHandler = () => { if (dashboardId) { - props.history.push(withSiteId(`/dashboard/${dashboardId}`, siteId)); + props.history.push(withSiteId(`/dashboard/${dashboardId}`, siteId)); } else { props.history.push(withSiteId(`/metrics`, siteId)); } @@ -37,8 +38,17 @@ function WidgetView(props: Props) { return useObserver(() => ( +
+ +
+ Dashboards + / + Metrics + / + {widget.name} +
+
-

@@ -69,4 +79,4 @@ function WidgetView(props: Props) { )); } -export default WidgetView; \ No newline at end of file +export default WidgetView; diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx index cfccd664c..03c14ff9c 100644 --- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx +++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx @@ -111,7 +111,7 @@ function WidgetWrapper(props: Props) { disabled: widget.metricType === 'predefined', }, { - text: 'Remove from view', + text: 'Hide', onClick: onDelete }, ]} diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index 56c92e4b9..922b83536 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/frontend/app/mstore/dashboardStore.ts @@ -4,7 +4,7 @@ import Widget, { IWidget } from "./types/widget"; import { dashboardService, metricService } from "App/services"; import { toast } from 'react-toastify'; import Period, { LAST_24_HOURS, LAST_7_DAYS } from 'Types/app/period'; -import { getChartFormatter } from 'Types/dashboard/helper'; +import { getChartFormatter } from 'Types/dashboard/helper'; import Filter, { IFilter } from "./types/filter"; export interface IDashboardSotre { @@ -24,7 +24,7 @@ export interface IDashboardSotre { metricsPage: number metricsPageSize: number metricsSearch: string - + isLoading: boolean isSaving: boolean isDeleting: boolean @@ -37,7 +37,7 @@ export interface IDashboardSotre { toggleAllSelectedWidgets: (isSelected: boolean) => void removeSelectedWidgetByCategory(category: string): void toggleWidgetSelection(widget: IWidget): void - + initDashboard(dashboard?: IDashboard): void updateKey(key: string, value: any): void resetCurrentWidget(): void @@ -82,12 +82,12 @@ export default class DashboardStore implements IDashboardSotre { drillDownFilter: Filter = new Filter() startTimestamp: number = 0 endTimestamp: number = 0 - + // Metrics metricsPage: number = 1 metricsPageSize: number = 10 metricsSearch: string = '' - + // Loading states isLoading: boolean = true isSaving: boolean = false @@ -109,7 +109,7 @@ export default class DashboardStore implements IDashboardSotre { getDashboardByIndex: action, getDashboardCount: action, selectDashboardById: action, - selectDefaultDashboard: action, + selectDefaultDashboard: action, toJson: action, fromJson: action, setSiteId: action, @@ -213,9 +213,9 @@ export default class DashboardStore implements IDashboardSotre { save(dashboard: IDashboard): Promise { this.isSaving = true const isCreating = !dashboard.dashboardId - + dashboard.metrics = this.selectedWidgets.map(w => w.metricId) - + return new Promise((resolve, reject) => { dashboardService.saveDashboard(dashboard).then(_dashboard => { runInAction(() => { @@ -381,7 +381,7 @@ export default class DashboardStore implements IDashboardSotre { deleteDashboardWidget(dashboardId: string, widgetId: string) { this.isDeleting = true return dashboardService.deleteWidget(dashboardId, widgetId).then(() => { - toast.success('Widget deleted successfully') + toast.success('Dashboard updated successfully') runInAction(() => { this.selectedDashboard?.removeWidget(widgetId) }) @@ -420,7 +420,7 @@ export default class DashboardStore implements IDashboardSotre { // this.isSaving = false }) } - + setPeriod(period: any) { this.period = Period({ start: period.startDate, end: period.endDate, rangeName: period.rangeValue }) } @@ -463,7 +463,7 @@ export default class DashboardStore implements IDashboardSotre { return unique; }, []) : [] } - + metric.setData(_data) resolve(_data); } @@ -472,4 +472,4 @@ export default class DashboardStore implements IDashboardSotre { }) }) } -} \ No newline at end of file +} diff --git a/frontend/app/mstore/types/dashboard.ts b/frontend/app/mstore/types/dashboard.ts index c4ee376c6..948cb916a 100644 --- a/frontend/app/mstore/types/dashboard.ts +++ b/frontend/app/mstore/types/dashboard.ts @@ -44,7 +44,7 @@ export default class Dashboard implements IDashboard { isPinned: boolean = false currentWidget: IWidget = new Widget() config: any = {} - + constructor() { makeAutoObservable(this, { name: observable, @@ -158,7 +158,7 @@ export default class Dashboard implements IDashboard { dashboardService.saveWidget(this.dashboardId, widgetA), dashboardService.saveWidget(this.dashboardId, widgetB) ]).then(() => { - toast.success("Widget position updated") + toast.success("Dashboard updated successfully") resolve() }).catch(() => { toast.error("Error updating widget position")