feat(ui) - dashboard - wip

frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx

@@ -3,11 +3,19 @@ import { useObserver } from 'mobx-react-lite';
 import DashboardMetricSelection from '../DashboardMetricSelection';
 import DashboardForm from '../DashboardForm';
 import { Button } from 'UI';
+import { withRouter } from 'react-router-dom';
 import { useStore } from 'App/mstore';
 import { useModal } from 'App/components/Modal';
+import { dashboardMetricCreate, withSiteId } from 'App/routes';
 
-
+interface Props {
+    history: any
+    siteId?: string
+    dashboardId?: string
+}
 function DashboardModal(props) {
+    const { history, siteId, dashboardId } = props;
+    console.log('DashboardModal', props);
     const { dashboardStore } = useStore();
     const { hideModal } = useModal();
     const dashboard = useObserver(() => dashboardStore.dashboardInstance);
@@ -18,6 +26,8 @@ function DashboardModal(props) {
     }
 
     const handleCreateNew = () => {
+        const path = withSiteId(dashboardMetricCreate(dashboardId), siteId);
+        history.push(path);
         hideModal();
     }
 
@@ -33,7 +43,7 @@ function DashboardModal(props) {
                     </h1>
                 </div>
                 <div>
-                    <Button outline size="small" onClick={handleCreateNew}>Create New</Button>
+                    {dashboard.exists() && <Button outline size="small" onClick={handleCreateNew}>Create New</Button>}
                 </div>
             </div>
             { !dashboard.exists() && (
@@ -58,4 +68,4 @@ function DashboardModal(props) {
     ));
 }
 
-export default DashboardModal;
+export default withRouter(DashboardModal);

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -29,7 +29,7 @@ function DashboardView(props: Props) {
     
     const onEditHandler = () => {
         dashboardStore.initDashboard(dashboard)
-        showModal(<DashboardModal />, {})
+        showModal(<DashboardModal siteId={siteId} dashboardId={dashboardId} />, {})
     }
 
     const onDelete = async () => {
@@ -64,7 +64,7 @@ function DashboardView(props: Props) {
                             <Button onClick={onDelete}>Remove</Button>
                         </div>
                     </div>
-                    <DashboardWidgetGrid />
+                    <DashboardWidgetGrid dashboardId={dashboardId} onEditHandler={onEditHandler} />
                 </div>
             </NoContent>
         </Loader>

frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx

@@ -4,11 +4,16 @@ import WidgetWrapper from '../WidgetWrapper';
 import { NoContent, Button, Loader } from 'UI';
 import { useObserver } from 'mobx-react-lite';
 
+interface Props {
+    dashboardId: string;
+    onEditHandler: () => void;
+}
 function DashboardWidgetGrid(props) {
+    const { dashboardId } = props;
     const { dashboardStore } = useStore();
     const loading = useObserver(() => dashboardStore.isLoading);
     const dashbaord: any = dashboardStore.selectedDashboard;
-    const list: any = dashbaord?.widgets;
+    const list: any = useObserver(() => dashbaord?.widgets);
 
     return useObserver(() => (
         <Loader loading={loading}>
@@ -19,7 +24,7 @@ function DashboardWidgetGrid(props) {
                 subtext={
                     <div>
                         <p>Metrics helps you visualize trends from sessions captured by OpenReplay</p>
-                        <Button size="small" primary>Add Metric</Button>
+                        <Button size="small" primary onClick={props.onEditHandler}>Add Metric</Button>
                     </div>
                 }
             >
@@ -30,6 +35,7 @@ function DashboardWidgetGrid(props) {
                             widget={item}
                             key={item.widgetId}
                             moveListItem={(dragIndex, hoverIndex) => dashbaord.swapWidgetPosition(dragIndex, hoverIndex)}
+                            dashboardId={dashboardId}
                         />
                     ))}
                 </div>

frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx

@@ -4,6 +4,8 @@ import { ItemMenu } from 'UI';
 import { useDrag, useDrop } from 'react-dnd';
 import WidgetChart from '../WidgetChart';
 import { useObserver } from 'mobx-react-lite';
+import { confirm } from 'UI/Confirmation';
+import { useStore } from 'App/mstore';
 
 interface Props {
     className?: string;
@@ -11,9 +13,11 @@ interface Props {
     index?: number;
     moveListItem?: any;
     isPreview?: boolean;
+    dashboardId?: string;
 }
 function WidgetWrapper(props: Props) {
-    const { widget, index = 0, moveListItem = null, isPreview = false } = props;
+    const { dashboardStore } = useStore();
+    const { widget, index = 0, moveListItem = null, isPreview = false, dashboardId } = props;
 
     const [{ opacity, isDragging }, dragRef] = useDrag({
         type: 'item',
@@ -37,6 +41,18 @@ function WidgetWrapper(props: Props) {
         }),
     })
 
+    const onDelete = async () => {
+        if (await confirm({
+          header: 'Confirm',
+          confirmButton: 'Yes, Delete',
+          confirmation: `Are you sure you want to permanently delete this Dashboard?`
+        })) {
+            dashboardStore.deleteDashboardWidget(dashboardId!, widget.widgetId).then(() => {
+
+            })
+        }
+    }
+
     const ref: any = useRef(null)
     const dragDropRef: any = dragRef(dropRef(ref))
     
@@ -64,6 +80,10 @@ function WidgetWrapper(props: Props) {
                                         console.log('edit');
                                     }
                                 },
+                                {
+                                    text: 'Hide from view' + dashboardId,
+                                    onClick: onDelete
+                                },
                             ]}
                         />
                     </div>

frontend/app/mstore/dashboardStore.ts

@@ -51,6 +51,7 @@ export interface IDashboardSotre {
 
     saveMetric(metric: IWidget, dashboardId?: string): Promise<any>
     fetchTemplates(): Promise<any>
+    deleteDashboardWidget(dashboardId: string, widgetId: string): Promise<any>
 }
 export default class DashboardStore implements IDashboardSotre {
     siteId: any = null
@@ -159,6 +160,7 @@ export default class DashboardStore implements IDashboardSotre {
 
     initDashboard(dashboard: Dashboard) {
         this.dashboardInstance = dashboard || new Dashboard()
+        this.selectedWidgets = []
     }
 
     updateKey(key: any, value: any) {
@@ -201,9 +203,7 @@ export default class DashboardStore implements IDashboardSotre {
         this.isSaving = true
         const isCreating = !dashboard.dashboardId
         
-        if (isCreating) {
-            dashboard.metrics = this.selectedWidgets.map(w => w.metricId)
-        }
+        dashboard.metrics = this.selectedWidgets.map(w => w.metricId)
         
         return dashboardService.saveDashboard(dashboard).then(_dashboard => {
             runInAction(() => {
@@ -360,6 +360,17 @@ export default class DashboardStore implements IDashboardSotre {
             }
         })
     }
+
+    deleteDashboardWidget(dashboardId: string, widgetId: string) {
+        this.isDeleting = true
+        return dashboardService.deleteWidget(dashboardId, widgetId).then(() => {
+            runInAction(() => {
+                this.selectedDashboard?.removeWidget(widgetId)
+            })
+        }).finally(() => {
+            this.isDeleting = false
+        })
+    }
 }
 
 function getRandomWidget() {

frontend/app/services/DashboardService.ts

@@ -13,7 +13,6 @@ export interface IDashboardService {
     deleteDashboard(dashboardId: string): Promise<any>
 
     saveMetric(metric: IWidget, dashboardId?: string): Promise<any>
-    deleteMetric(metricId: string): Promise<any>
 
     saveWidget(dashboardId: string, widget: IWidget): Promise<any>
     deleteWidget(dashboardId: string, widgetId: string): Promise<any>
@@ -111,15 +110,6 @@ export default class DashboardService implements IDashboardService {
         }
     }
 
-    /**
-     * Delete a Metric by metricId.
-     * @param metricId 
-     * @returns {Promise<any>}
-     */
-    deleteMetric(metricId: string): Promise<any> {
-        return this.client.delete(`/metrics/${metricId}`)
-    }
-
     /**
      * Remove a widget from a dashboard.
      * @param dashboardId Required