setExpanded(!expanded)}
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index f426dac6e..c667ae171 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -6,6 +6,9 @@ import WidgetChart from '../WidgetChart';
import { useObserver } from 'mobx-react-lite';
import { confirm } from 'UI/Confirmation';
import { useStore } from 'App/mstore';
+import LazyLoad from 'react-lazyload';
+import { withRouter } from 'react-router-dom';
+import { withSiteId, dashboardMetricDetails } from 'App/routes';
interface Props {
className?: string;
@@ -13,11 +16,15 @@ interface Props {
index?: number;
moveListItem?: any;
isPreview?: boolean;
+ isTemplate?: boolean
dashboardId?: string;
+ siteId?: string,
+ active?: boolean;
+ history?: any
}
function WidgetWrapper(props: Props) {
const { dashboardStore } = useStore();
- const { widget, index = 0, moveListItem = null, isPreview = false, dashboardId } = props;
+ const { active = false, widget, index = 0, moveListItem = null, isPreview = false, isTemplate = false, dashboardId, siteId } = props;
const [{ opacity, isDragging }, dragRef] = useDrag({
type: 'item',
@@ -47,54 +54,62 @@ function WidgetWrapper(props: Props) {
confirmButton: 'Yes, Delete',
confirmation: `Are you sure you want to permanently delete this Dashboard?`
})) {
- dashboardStore.deleteDashboardWidget(dashboardId!, widget.widgetId).then(() => {
-
- })
+ dashboardStore.deleteDashboardWidget(dashboardId!, widget.widgetId);
}
}
+ const editHandler = () => {
+ console.log('clicked', widget.metricId);
+ }
+
+ const onChartClick = () => {
+ if (isPreview || isTemplate) return;
+ props.history.push(withSiteId(dashboardMetricDetails(dashboardId, widget.metricId),siteId));
+ }
+
const ref: any = useRef(null)
const dragDropRef: any = dragRef(dropRef(ref))
return useObserver(() => (
- {/*
*/}
-
- {widget.name}
+
+
+
{widget.name}
+ {!isPreview && !isTemplate && (
{
- console.log('edit');
- }
+ text: 'Edit', onClick: editHandler,
},
{
- text: 'Hide from view' + dashboardId,
+ text: 'Hide from view',
onClick: onDelete
},
]}
/>
-
+ )}
+
-
));
}
-export default WidgetWrapper;
\ No newline at end of file
+export default withRouter(WidgetWrapper);
\ No newline at end of file
diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.js b/frontend/app/components/ui/ItemMenu/ItemMenu.js
index 1d908c33e..1938f5a3c 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.js
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.js
@@ -1,35 +1,18 @@
import { Icon } from 'UI';
import styles from './itemMenu.css';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
export default class ItemMenu extends React.PureComponent {
state = {
displayed: false,
};
- componentDidMount() {
- document.addEventListener('click', this.handleClickOutside);
- }
-
- componentWillUnmount() {
- document.removeEventListener('click', this.handleClickOutside);
- }
-
onClick = callback => (e) => {
e.stopPropagation();
callback(e);
}
- handleClickOutside = (e) => {
- if (!this.state.displayed) return;
- if (e.target !== this.menuBtnRef) {
- this.closeMenu();
- }
- }
-
toggleMenu = (e) => {
- // e.preventDefault();
- // e.stopPropagation();
- console.log('toggleMenu', e);
this.setState({ displayed: !this.state.displayed });
}
@@ -41,22 +24,18 @@ export default class ItemMenu extends React.PureComponent {
return (
- {/*
{ this.menuBtnRef = ref; } }
- className={ styles.menuBtn }
- onClick={ this.toggleMenu }
- role="button"
- tabIndex="-1"
- /> */}
-
{ this.menuBtnRef = ref; } }
- className="w-10 h-10 cursor-pointer bg-white rounded-full flex items-center justify-center hover:bg-gray-lightest"
- onClick={ this.toggleMenu }
- role="button"
- // tabIndex="-1"
+
-
-
+
{ this.menuBtnRef = ref; } }
+ className="w-10 h-10 cursor-pointer bg-white rounded-full flex items-center justify-center hover:bg-gray-lightest"
+ onClick={ this.toggleMenu }
+ role="button"
+ >
+
+
+
toJson(): void
fromJson(json: any): void
- initDashboard(dashboard: IDashboard): void
+ // initDashboard(dashboard: IDashboard): void
addDashboard(dashboard: IDashboard): void
removeDashboard(dashboard: IDashboard): void
getDashboard(dashboardId: string): void
@@ -78,6 +79,7 @@ export default class DashboardStore implements IDashboardSotre {
constructor() {
makeAutoObservable(this, {
widgetCategories: observable.ref,
+ // dashboardInstance: observable.ref,
resetCurrentWidget: action,
addDashboard: action,
@@ -159,7 +161,7 @@ export default class DashboardStore implements IDashboardSotre {
}
initDashboard(dashboard: Dashboard) {
- this.dashboardInstance = dashboard || new Dashboard()
+ this.dashboardInstance = dashboard ? new Dashboard().fromJson(dashboard) : new Dashboard()
this.selectedWidgets = []
}
@@ -208,8 +210,10 @@ export default class DashboardStore implements IDashboardSotre {
return dashboardService.saveDashboard(dashboard).then(_dashboard => {
runInAction(() => {
if (isCreating) {
+ toast.success('Dashboard created successfully')
this.addDashboard(_dashboard)
} else {
+ toast.success('Dashboard updated successfully')
this.updateDashboard(_dashboard)
}
})
@@ -247,10 +251,15 @@ export default class DashboardStore implements IDashboardSotre {
deleteDashboard(dashboard: Dashboard): Promise
{
this.isDeleting = true
return dashboardService.deleteDashboard(dashboard.dashboardId).then(() => {
+ toast.success('Dashboard deleted successfully')
runInAction(() => {
this.removeDashboard(dashboard)
})
- }).finally(() => {
+ })
+ .catch(() => {
+ toast.error('Dashboard could not be deleted')
+ })
+ .finally(() => {
runInAction(() => {
this.isDeleting = false
})
@@ -364,6 +373,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')
runInAction(() => {
this.selectedDashboard?.removeWidget(widgetId)
})
diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts
index 1e3746b9e..d322426a7 100644
--- a/frontend/app/mstore/metricStore.ts
+++ b/frontend/app/mstore/metricStore.ts
@@ -1,6 +1,7 @@
import { makeAutoObservable, runInAction, observable, action, reaction, computed } from "mobx"
import Widget, { IWidget } from "./types/widget";
import { metricService } from "App/services";
+import { toast } from 'react-toastify';
export interface IMetricStore {
paginatedList: any;
@@ -136,8 +137,10 @@ export default class MetricStore implements IMetricStore {
return metricService.saveMetric(metric, dashboardId)
.then(() => {
if (wasCreating) {
+ toast.success('Metric created successfully')
this.addToList(metric)
} else {
+ toast.success('Metric updated successfully')
this.updateInList(metric)
}
}).finally(() => {
diff --git a/frontend/app/mstore/types/dashboard.ts b/frontend/app/mstore/types/dashboard.ts
index 46973f9ff..41410b91c 100644
--- a/frontend/app/mstore/types/dashboard.ts
+++ b/frontend/app/mstore/types/dashboard.ts
@@ -10,6 +10,7 @@ export interface IDashboard {
isValid: boolean
isPinned: boolean
currentWidget: IWidget
+ config: any
update(data: any): void
toJson(): any
@@ -31,12 +32,13 @@ export default class Dashboard implements IDashboard {
public static get ID_KEY():string { return "dashboardId" }
dashboardId: any = undefined
name: string = "New Dashboard"
- isPublic: boolean = false
+ isPublic: boolean = true
widgets: IWidget[] = []
metrics: any[] = []
isValid: boolean = false
isPinned: boolean = false
currentWidget: IWidget = new Widget()
+ config: any = {}
constructor() {
makeAutoObservable(this, {
@@ -75,7 +77,7 @@ export default class Dashboard implements IDashboard {
return {
dashboardId: this.dashboardId,
name: this.name,
- isPrivate: this.isPublic,
+ isPublic: this.isPublic,
// widgets: this.widgets.map(w => w.toJson())
// widgets: this.widgets
metrics: this.metrics
@@ -88,6 +90,7 @@ export default class Dashboard implements IDashboard {
this.name = json.name
this.isPublic = json.isPublic
this.isPinned = json.isPinned
+ this.config = json.config
this.widgets = json.widgets ? json.widgets.map(w => new Widget().fromJson(w)) : []
})
return this
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index 4e6881b58..de7191eb0 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -17,6 +17,7 @@ export interface IWidget {
lastModified: Date
dashboards: any[]
dashboardIds: any[]
+ config: any
position: number
data: any
@@ -50,6 +51,7 @@ export default class Widget implements IWidget {
lastModified: Date = new Date()
dashboards: any[] = []
dashboardIds: any[] = []
+ config: any = {}
position: number = 0
data: any = {}
@@ -111,6 +113,8 @@ export default class Widget implements IWidget {
this.dashboards = json.dashboards
this.owner = json.ownerEmail
this.lastModified = DateTime.fromISO(json.editedAt || json.createdAt)
+ this.config = json.config
+ this.position = json.config.position
})
return this
}
@@ -122,6 +126,7 @@ export default class Widget implements IWidget {
metricOf: this.metricOf,
metricValue: this.metricValue,
metricType: this.metricType,
+ viewType: this.viewType,
name: this.name,
series: this.series.map((series: any) => series.toJson()),
}
diff --git a/frontend/app/routes.js b/frontend/app/routes.js
index 08303f78b..7a6c5379e 100644
--- a/frontend/app/routes.js
+++ b/frontend/app/routes.js
@@ -104,7 +104,7 @@ export const dashboard = () => '/dashboard';
export const dashboardMetrics = () => '/dashboard/metrics';
export const dashboardSelected = (id = ':dashboardId', hash) => hashed(`/dashboard/${ id }`, hash);
-export const dashboardMetricDetails = (id = ':dashboardId', metricId = ':metricId', hash) => hashed(`/dashboard/${ id }/metric/${metricId}`, hash);
+export const dashboardMetricDetails = (dashboardId = ':dashboardId', metricId = ':metricId', hash) => hashed(`/dashboard/${ dashboardId }/metric/${metricId}`, hash);
export const dashboardMetricCreate = (dashboardId = ':dashboardId', hash) => hashed(`/dashboard/${ dashboardId }/metric/create`, hash);
export const metrics = () => `/metrics`;
export const metricCreate = () => `/metrics/create`;