feat: add time frame (#1965)

Signed-off-by: Rajesh Jonnalagadda <[email protected]>
Co-authored-by: Matvey Kukuy <[email protected]>

keep-ui/app/dashboard/GridLayout.tsx

@@ -3,6 +3,7 @@ import { Responsive, WidthProvider, Layout } from "react-grid-layout";
 import GridItemContainer from "./GridItemContainer";
 import { LayoutItem, WidgetData } from "./types";
 import "react-grid-layout/css/styles.css";
+import { Preset } from "app/alerts/models";
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -12,9 +13,10 @@ interface GridLayoutProps {
   data: WidgetData[];
   onEdit: (id: string) => void;
   onDelete: (id: string) => void;
+  presets: Preset[];
 }
 
-const GridLayout: React.FC<GridLayoutProps> = ({ layout, onLayoutChange, data, onEdit, onDelete }) => {
+const GridLayout: React.FC<GridLayoutProps> = ({ layout, onLayoutChange, data, onEdit, onDelete, presets }) => {
   const layouts = { lg: layout };
 
   return (
@@ -39,11 +41,15 @@ const GridLayout: React.FC<GridLayoutProps> = ({ layout, onLayoutChange, data, o
       compactType={null}
       draggableHandle=".grid-item__widget"
     >
-      {data.map((item) => (
-        <div key={item.i} data-grid={item}>
-          <GridItemContainer item={item} onEdit={onEdit} onDelete={onDelete} />
-        </div>
-      ))}
+      {data.map((item) => {
+          //Fixing the static hardcode db value.
+          const preset = presets?.find(p => p?.id === item?.preset?.id);
+          item.preset = { ...item.preset,alerts_count: preset?.alerts_count ?? 0};
+        return (
+          <div key={item.i} data-grid={item}>
+            <GridItemContainer item={item} onEdit={onEdit} onDelete={onDelete} />
+          </div>
+      )})}
     </ResponsiveGridLayout>
   );
 };

keep-ui/app/dashboard/[id]/dashboard.tsx

@@ -13,12 +13,21 @@ import { useDashboards } from 'utils/hooks/useDashboards';
 import { getApiURL } from 'utils/apiUrl';
 import './../styles.css';
 import { toast } from 'react-toastify';
+import { GenericFilters } from '@/components/filters/GenericFilters';
+import { useDashboardPreset } from 'utils/hooks/useDashboardPresets';
+
+const DASHBOARD_FILTERS = [
+  {
+    type: "date",
+    key: "time_stamp",
+    value: "",
+    name: "Last received",
+  }
+]
 
 const DashboardPage = () => {
-  const { useAllPresets, useStaticPresets } = usePresets();
-  const { data: presets = [] } = useAllPresets();
-  const { data: staticPresets = [] } = useStaticPresets();
-  const { id } : any = useParams();
+  const allPresets = useDashboardPreset();
+  const { id }: any = useParams();
   const { data: session } = useSession();
   const { dashboards, isLoading, mutate: mutateDashboard } = useDashboards();
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -39,8 +48,6 @@ const DashboardPage = () => {
     }
   }, [id, dashboards, isLoading]);
 
-  const allPresets = [...presets, ...staticPresets];
-
   const openModal = () => {
     setEditingItem(null); // Ensure new modal opens without editing item context
     setIsModalOpen(true);
@@ -163,6 +170,8 @@ const DashboardPage = () => {
             color="orange"
           />
         </div>
+        <div className="flex gap-1 items-end">
+        <GenericFilters filters={DASHBOARD_FILTERS} />
         <div className="flex">
           <Button
             icon={FiSave}
@@ -173,6 +182,7 @@ const DashboardPage = () => {
           />
           <Button color="orange" onClick={openModal} className="ml-2">Add Widget</Button>
         </div>
+        </div>
       </div>
       {layout.length === 0 ? (
         <Card
@@ -192,6 +202,7 @@ const DashboardPage = () => {
             data={widgetData}
             onEdit={handleEditWidget}
             onDelete={handleDeleteWidget}
+            presets={allPresets}
           />
         </Card>
       )}