change(ui): split widgets in two groups

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

@@ -1,9 +1,11 @@
 import React from 'react';
+import { toJS } from 'mobx'
 import { useStore } from 'App/mstore';
 import WidgetWrapper from '../WidgetWrapper';
-import { NoContent, Loader } from 'UI';
+import { NoContent, Loader, Icon } from 'UI';
 import { useObserver } from 'mobx-react-lite';
 import AddMetricContainer from './AddMetricContainer'
+import Widget from 'App/mstore/types/widget';
 
 interface Props {
     siteId: string,
@@ -15,8 +17,25 @@ function DashboardWidgetGrid(props: Props) {
     const { dashboardId, siteId } = props;
     const { dashboardStore } = useStore();
     const loading = useObserver(() => dashboardStore.isLoading);
-    const dashboard: any = dashboardStore.selectedDashboard;
-    const list: any = useObserver(() => dashboard?.widgets);
+    const dashboard = dashboardStore.selectedDashboard;
+    const list = useObserver(() => dashboard?.widgets);
+    const smallWidgets: Widget[] = []
+    const regularWidgets: Widget[] = []
+
+    list.forEach(item => {
+        if (item.config.col === 1) {
+            smallWidgets.push(item)
+        } else {
+            regularWidgets.push(item)
+        }
+    })
+
+    const smallWidgetsLen = smallWidgets.length
+
+    // legacy
+    // smallWidgets.forEach((i, index) => {
+
+    // })
 
     return useObserver(() => (
         // @ts-ignore
@@ -29,17 +48,41 @@ function DashboardWidgetGrid(props: Props) {
                     <div className="w-4/5 m-auto mt-4"><AddMetricContainer siteId={siteId} /></div>
                 }
             >
+                <div className="font-semibold text-xl py-4 flex items-center gap-2">
+                    <Icon name="grid-horizontal" size={26} />
+                    Web Vitals
+                </div>
                 <div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
-                    {list && list.map((item: any, index: any) => (
+                    {smallWidgets && smallWidgets.map((item: any, index: any) => (
+                        <React.Fragment key={item.widgetId}>
                         <WidgetWrapper
                             index={index}
                             widget={item}
-                            key={item.widgetId}
                             moveListItem={(dragIndex: any, hoverIndex: any) => dashboard.swapWidgetPosition(dragIndex, hoverIndex)}
                             dashboardId={dashboardId}
                             siteId={siteId}
                             isWidget={true}
                         />
+                        </React.Fragment>
+                    ))}
+                </div>
+
+                <div className="font-semibold text-xl py-4 flex items-center gap-2">
+                    <Icon name="grid-horizontal" size={26} />
+                    All Metrics
+                </div>
+                <div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
+                    {regularWidgets && regularWidgets.map((item: any, index: any) => (
+                        <React.Fragment key={item.widgetId}>
+                            <WidgetWrapper
+                                index={smallWidgetsLen + index}
+                                widget={item}
+                                moveListItem={(dragIndex: any, hoverIndex: any) => dashboard.swapWidgetPosition(dragIndex, hoverIndex)}
+                                dashboardId={dashboardId}
+                                siteId={siteId}
+                                isWidget={true}
+                            />
+                        </React.Fragment>
                     ))}
                     <div className="col-span-2"><AddMetricContainer siteId={siteId} /></div>
                 </div>

frontend/app/mstore/types/dashboard.ts

@@ -1,5 +1,5 @@
 import { makeAutoObservable, observable, action, runInAction } from "mobx"
-import Widget, { IWidget } from "./widget"
+import Widget from "./widget"
 import { dashboardService  } from "App/services"
 import { toast } from 'react-toastify';
 import { DateTime } from 'luxon';
@@ -10,10 +10,10 @@ export default class Dashboard {
     name: string = "Untitled Dashboard"
     description: string = ""
     isPublic: boolean = true
-    widgets: IWidget[] = []
+    widgets: Widget[] = []
     metrics: any[] = []
     isValid: boolean = false
-    currentWidget: IWidget = new Widget()
+    currentWidget: Widget = new Widget()
     config: any = {}
     createdAt: Date = new Date()
 
@@ -48,7 +48,24 @@ export default class Dashboard {
             this.description = json.description
             this.isPublic = json.isPublic
             this.createdAt = DateTime.fromMillis(new Date(json.createdAt).getTime())
-            this.widgets = json.widgets ? json.widgets.map((w: Widget) => new Widget().fromJson(w)).sort((a: Widget, b: Widget) => a.position - b.position) : []
+            if (json.widgets) {
+                // legacy
+                const dashboardFix = '__openreplay__dashboard__fix' + json.dashboardId
+                const isFixed = localStorage.getItem(dashboardFix)
+                const sortedWidgets: any[] = !isFixed ? json.widgets.sort((a: any, b: any) => a.config.col - b.config.col) : json.widgets
+                if (!isFixed) {
+                    sortedWidgets.forEach((widget, index) => {
+                        widget.config.position = index
+                    })
+
+                    console.log('widget positions fixed', sortedWidgets)
+
+                    localStorage.setItem(dashboardFix, '1')
+                }
+                this.widgets = sortedWidgets.map((w: Widget) => new Widget().fromJson(w)).sort((a: Widget, b: Widget) => a.position - b.position)
+            } else {
+                this.widgets = []
+            }
         })
         return this
     }
@@ -57,7 +74,7 @@ export default class Dashboard {
         return this.isValid = this.name.length > 0
     }
 
-    addWidget(widget: IWidget) {
+    addWidget(widget: Widget) {
         this.widgets.push(widget)
     }
 
@@ -65,7 +82,7 @@ export default class Dashboard {
         this.widgets = this.widgets.filter(w => w.widgetId !== widgetId)
     }
 
-    updateWidget(widget: IWidget) {
+    updateWidget(widget: Widget) {
         const index = this.widgets.findIndex(w => w.widgetId === widget.widgetId)
         if (index >= 0) {
             this.widgets[index] = widget

frontend/app/mstore/types/widget.ts

@@ -12,6 +12,7 @@ export default class Widget {
     public static get ID_KEY():string { return "metricId" }
     metricId: any = undefined
     widgetId: any = undefined
+    category?: string = undefined
     name: string = "Untitled Metric"
     // metricType: string = "timeseries"
     metricType: string = "timeseries"
@@ -30,7 +31,7 @@ export default class Widget {
     page: number = 1
     limit: number = 5
     params: any = { density: 70 }
-    
+
     period: Record<string, any> = Period({ rangeName: LAST_24_HOURS }) // temp value in detail view
     hasChanged: boolean = false
 
@@ -50,7 +51,7 @@ export default class Widget {
     dashboardId: any = undefined
     colSpan: number = 2
     predefinedKey: string = ''
-    
+
     constructor() {
         makeAutoObservable(this)
 
@@ -90,6 +91,7 @@ export default class Widget {
             this.config = json.config
             this.position = json.config.position
             this.predefinedKey = json.predefinedKey
+            this.category = json.category
 
             if (period) {
                 this.period = period

frontend/app/svg/icons/grid-horizontal.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+  <path d="M2 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+</svg>