feat: new metric widgets (#2261)

Signed-off-by: 35C4n0r <jaykumar20march@gmail.com>
Signed-off-by: Jay Kumar <70096901+35C4n0r@users.noreply.github.com>
Co-authored-by: Vladimir Filonov <vladimir@filonov.dev>
Co-authored-by: Matvey Kukuy <Matvey-Kuk@users.noreply.github.com>

keep-ui/app/dashboard/EditGridItemModal.tsx

@@ -14,7 +14,7 @@ const EditGridItemModal: React.FC<EditGridItemModalProps> = ({ isOpen, onClose,
   const [thresholds, setThresholds] = useState<Threshold[]>([]);
 
   useEffect(() => {
-    if (item) {
+    if (item?.thresholds) {
       setThresholds(item.thresholds);
     }
   }, [item]);

keep-ui/app/dashboard/GridItem.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { Card } from "@tremor/react";
+import { AreaChart, Card } from "@tremor/react";
 import MenuButton from "./MenuButton";
-import { WidgetData } from "./types";
+import {WidgetData, WidgetType} from "./types";
 import AlertQuality from "@/app/alerts/alert-quality-table";
 import { useSearchParams } from "next/navigation";
 
@@ -55,12 +55,14 @@ const GridItem: React.FC<GridItemProps> = ({
   }
   const getColor = () => {
     let color = "#000000";
+    if (item.widgetType === WidgetType.PRESET && item.thresholds && item.preset) {
     for (let i = item.thresholds.length - 1; i >= 0; i--) {
       if (item.preset && item.preset.alerts_count >= item.thresholds[i].value) {
         color = item.thresholds[i].color;
         break;
       }
     }
+    }
     return color;
   };
 
@@ -80,11 +82,13 @@ const GridItem: React.FC<GridItemProps> = ({
   };
 
   return (
-    <Card className="relative w-full h-full p-4">
+    <Card className={`relative w-full h-full ${
+      !item.metric ? '!p-4' : '!pt-0.5' 
+    }`}>
       <div className="flex flex-col h-full">
         <div
           className={`flex-none flex items-center justify-between p-2 ${
-            item.preset ? "h-1/5" : "h-[10%]"
+            item.preset ? "h-1/5" : item.metric ? "h-1/5 mb-3" : "h-[10%]"
           }`}
         >
           {/* For table view we need intract with table filter and pagination.so we aare dragging the widget here */}
@@ -111,16 +115,40 @@ const GridItem: React.FC<GridItemProps> = ({
             </div>
           </div>
         )}
-        <div className="w-full h-[90%]">
-          <GenericMetrics
-            item={item}
-            filters={filters}
-            setFilters={setFilters}
-          />
-        </div>
-      </div>
-    </Card>
-  );
-};
+        { item.metric && (
+            <div
+                className={'h-56 w-full "flex-1 flex items-center justify-center grid-item__widget'}>
+              <div className={"w-[100%]"}>
+                <AreaChart
+                    className="h-56"
+                    data={item.metric?.data}
+                    index="timestamp"
+                    categories={[item.metric?.id === "mttr" ? "mttr" : "number"]}
+                    valueFormatter={(number: number) =>
+                        `${Intl.NumberFormat().format(number).toString()}`
+                    }
+                    startEndOnly
+                    connectNulls
+                    showLegend={false}
+                    showTooltip={true}
+                    xAxisLabel="Timestamp"
+                />
+              </div>
+            </div>
+
+              )}
+
+
+              <div className="w-full h-[90%]">
+                <GenericMetrics
+                    item={item}
+                    filters={filters}
+                    setFilters={setFilters}
+                />
+              </div>
+            </div>
+          </Card>
+          );
+        };
 
-export default GridItem;
+        export default GridItem;

keep-ui/app/dashboard/GridLayout.tsx

@@ -4,6 +4,7 @@ import GridItemContainer from "./GridItemContainer";
 import { LayoutItem, WidgetData } from "./types";
 import "react-grid-layout/css/styles.css";
 import { Preset } from "app/alerts/models";
+import {MetricsWidget} from "@/utils/hooks/useDashboardMetricWidgets";
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -15,6 +16,7 @@ interface GridLayoutProps {
   onDelete: (id: string) => void;
   presets: Preset[];
   onSave: (updateItem: WidgetData) => void;
+  metrics: MetricsWidget[];
 }
 
 const GridLayout: React.FC<GridLayoutProps> = ({
@@ -25,6 +27,7 @@ const GridLayout: React.FC<GridLayoutProps> = ({
   onDelete,
   onSave,
   presets,
+  metrics
 }) => {
   const layouts = { lg: layout };
 
@@ -52,14 +55,18 @@ const GridLayout: React.FC<GridLayoutProps> = ({
         draggableHandle=".grid-item__widget"
       >
         {data.map((item) => {
-          //Fixing the static hardcode db value.
+          //Updating the static hardcode db value.
           if (item.preset) {
             const preset = presets?.find((p) => p?.id === item?.preset?.id);
             item.preset = {
               ...item.preset,
               alerts_count: preset?.alerts_count ?? 0,
             };
-
+          } else if (item.metric) {
+            const metric = metrics?.find(m => m?.id === item?.metric?.id);
+            if (metric) {
+              item.metric = {...metric}
+            }
           }
           return (
             <div key={item.i} data-grid={item}>