feat: Always show last two weeks of metrics (#2)

* Fetch two last weeks of data ordered ascending

* Plot layout shows always 2 last weeks in x Axis

src/components/MetricsPlot.tsx

@@ -8,10 +8,34 @@ interface MetricsPlotProps {
 }
 
 const MetricsPlot: React.FC<MetricsPlotProps> = ({ plotData, layout }) => {
+  const extendedLayout: Partial<Plotly.Layout> = {
+    ...layout,
+    xaxis: {
+      tickformatstops: [
+        {
+          dtickrange: [null, 3600000], // For less than an hour
+          value: "%H:%M:%S %d/%m/%Y", // Show full date and time
+        },
+        {
+          dtickrange: [3600000, 86400000], // For an hour to one day
+          value: "%H:%M %d/%m/%Y", // Show hour and date
+        },
+        {
+          dtickrange: [86400000, null], // For more than a day
+          value: "%d/%m/%Y", // Show only date
+        },
+      ],
+      type: "date",
+      ...layout.xaxis,
+    },
+  };
+
+  console.log(extendedLayout);
+
   return (
     <Plot
       data={plotData}
-      layout={layout}
+      layout={extendedLayout}
       config={{ responsive: true }}
       useResizeHandler={true}
       style={{ width: "100%", height: "100%" }}

src/hooks/useFetchMetrics.ts

@@ -13,12 +13,24 @@ const useFetchMetrics = (selectedNode: Node | undefined, nodes: Node[]) => {
 
     setIsLoading(true);
     const baseUrl = "https://api2.aleph.im/api/v0";
+
     const endpoint =
       node.type === "resource"
         ? `${baseUrl}/compute/${node.hash}/metrics`
         : `${baseUrl}/core/${node.hash}/metrics`;
 
-    fetch(endpoint)
+    const url = new URL(endpoint, baseUrl);
+
+    const endDate = Math.floor(Date.now() / 1000); // current time (in seconds)
+    const startDate = endDate - 2 * 7 * 24 * 60 * 60; // 2 weeks from now (in seconds)
+
+    url.search = new URLSearchParams({
+      start_date: startDate.toString(),
+      end_date: endDate.toString(),
+      sort: "asc",
+    }).toString();
+
+    fetch(url.toString())
       .then((response) => response.json())
       .then((data) => {
         setMetricData(data.metrics);

src/pages/NodeMetricsPage.tsx

@@ -44,7 +44,7 @@ const NodeMetricsPage: React.FC = () => {
   };
 
   const xAxisData = metricData?.measured_at.map((timestamp) =>
-    new Date(timestamp * 1000).toLocaleString()
+    new Date(timestamp * 1000).toISOString()
   );
 
   const plotData: Data[] = React.useMemo(() => {
@@ -55,7 +55,7 @@ const NodeMetricsPage: React.FC = () => {
       if (metricArray && isMetricPresent(metricArray)) {
         acc.push({
           x: xAxisData,
-          y: metricArray.filter((item) => item !== null) as number[], // Ensure no null values in 'y'
+          y: metricArray,
           type: "scatter",
           mode: "lines+markers",
           name: name,
@@ -66,6 +66,18 @@ const NodeMetricsPage: React.FC = () => {
     }, []);
   }, [metricData, xAxisData]);
 
+  const plotLayout: Partial<Plotly.Layout> = React.useMemo(() => {
+    if (!xAxisData || !selectedNode) return {};
+
+    return {
+      autosize: true,
+      title: `${selectedNode?.name} Node Metrics`,
+      xaxis: {
+        range: [xAxisData[0], xAxisData[xAxisData.length - 1]],
+      },
+    };
+  }, [xAxisData, selectedNode]);
+
   return (
     <div className="flex flex-row ">
       <NodeList
@@ -84,13 +96,9 @@ const NodeMetricsPage: React.FC = () => {
               <ProgressBar isLoading={isLoading} loadDuration={12000} />
             </div>
           ) : metricData ? (
-            <MetricsPlot
-              plotData={plotData}
-              layout={{
-                autosize: true,
-                title: `${selectedNode?.name} Node Metrics`,
-              }}
-            />
+            <>
+              <MetricsPlot plotData={plotData} layout={plotLayout} />
+            </>
           ) : (
             <div className="text-gray-500">
               Select a node to see its metrics.