feat: dynamic metrics page

dashboard/src/api/metrics.ts

@@ -0,0 +1,39 @@
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+
+import type { MetricsResponse } from '@/types/metrics';
+
+import { RequestData } from './commonRequest';
+
+type FetchMetricsParams = {
+  startDaysAgo: number;
+  endDaysAgo: number;
+};
+
+export const fetchMetrics = async ({
+  startDaysAgo,
+  endDaysAgo,
+}: FetchMetricsParams): Promise<MetricsResponse> => {
+  const data = await RequestData.get<MetricsResponse>('/api/metrics/', {
+    params: {
+      start_days_ago: startDaysAgo,
+      end_days_ago: endDaysAgo,
+    },
+  });
+
+  return data;
+};
+
+export const useMetrics = ({
+  intervalInDays,
+}: {
+  intervalInDays: number;
+}): UseQueryResult<MetricsResponse> => {
+  return useQuery({
+    queryKey: ['metrics', intervalInDays],
+    queryFn: () =>
+      fetchMetrics({
+        startDaysAgo: intervalInDays,
+        endDaysAgo: 0,
+      }),
+  });
+};

dashboard/src/components/SideMenu/menuItems.tsx

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
 
-import { MdOutlineMonitorHeart } from 'react-icons/md';
+import { MdOutlineBarChart, MdOutlineMonitorHeart } from 'react-icons/md';
 import { RxRadiobutton } from 'react-icons/rx';
 import { ImTree } from 'react-icons/im';
 import { HiOutlineDocumentSearch } from 'react-icons/hi';
@@ -30,6 +30,7 @@ export type LinkStringItems = {
 const TreeIcon = <ImTree className="size-5" />;
 const MonitorHeartIcon = <MdOutlineMonitorHeart className="size-5" />;
 const RadioButtonIcon = <RxRadiobutton className="size-5" />;
+const MetricsIcon = <MdOutlineBarChart className="size-5" />;
 const DocumentSearchIcon = <HiOutlineDocumentSearch />;
 
 export const routeItems: RouteMenuItems[] = [
@@ -51,6 +52,12 @@ export const routeItems: RouteMenuItems[] = [
     icon: RadioButtonIcon,
     selected: false,
   },
+  {
+    navigateTo: '/metrics',
+    idIntl: 'routes.metricsMonitor',
+    icon: MetricsIcon,
+    selected: false,
+  },
 ];
 
 export const linkItems: LinkMenuItems[] = [

dashboard/src/components/TopBar/TopBar.tsx

@@ -108,6 +108,8 @@ const TitleName = ({ basePath }: { basePath: string }): JSX.Element => {
       return <FormattedMessage id="routes.testDetails" />;
     case 'issue':
       return <FormattedMessage id="routes.issueDetails" />;
+    case 'metrics':
+      return <FormattedMessage id="routes.metricsMonitor" />;
     default:
       return <FormattedMessage id="routes.unknown" />;
   }

dashboard/src/locales/messages/index.ts

@@ -278,6 +278,7 @@ export const messages = {
     'routes.hardwareNewMonitor': 'Hardware New',
     'routes.issueDetails': 'Issue',
     'routes.issueMonitor': 'Issues',
+    'routes.metricsMonitor': 'Metrics',
     'routes.testDetails': 'Test',
     'routes.treeMonitor': 'Trees',
     'routes.unknown': 'Unknown',