= ({ nodeId, nodeProviderId }) => {
+ return (
+
+
+ {"Node ID"}
+
+
+ {nodeId}
+
+
+
+ {"Node Provider ID"}
+
+
+ {nodeProviderId}
+
+
+ );
+};
+
+export default NodeInfo;
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeList.tsx b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeList.tsx
new file mode 100644
index 000000000..6caa20b69
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeList.tsx
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Autocomplete, TextField, TableCell, TableRow, TableHead, Table, TableContainer, Paper, TableBody } from '@mui/material';
+import { Link } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import { PeriodFilter } from './FilterBar';
+import { NodeRewardsResponse } from '../../../declarations/trustworthy-node-metrics/trustworthy-node-metrics.did';
+
+export const Root = styled('div')(({ theme }) => ({
+ width: '100%',
+ ...theme.typography.body2,
+ color: theme.palette.text.secondary,
+ '& > :not(style) ~ :not(style)': {
+ marginTop: theme.spacing(2),
+ },
+}));
+
+export interface NodeListProps {
+ nodeRewards: NodeRewardsResponse[];
+ periodFilter: PeriodFilter;
+}
+
+const tableHeaders = [
+ { label: 'Node ID', key: 'node_id' },
+ { label: 'Node Provider ID', key: 'node_provider_id' },
+ { label: 'Days Assigned', key: 'days_assigned' },
+ { label: 'Rewards Percent', key: 'rewards_percent' },
+ { label: 'Failure Rate Avg.', key: 'failure_rate' },
+];
+
+export const NodeList: React.FC = ({ nodeRewards }) => {
+ const [filteredMetrics, setFilteredMetrics] = useState(nodeRewards);
+
+ useEffect(() => {
+ setFilteredMetrics(nodeRewards);
+ }, [nodeRewards]);
+
+ const handleSearchChange = (event: React.SyntheticEvent, value: string | null) => {
+ if (value) {
+ setFilteredMetrics(nodeRewards.filter(node => node.node_id.toText().includes(value)));
+ } else {
+ setFilteredMetrics(nodeRewards);
+ }
+ };
+
+ return (
+ <>
+
+ node.node_id.toText())}
+ onInputChange={handleSearchChange}
+ renderInput={(params) => (
+
+ )}
+ />
+
+
+
+
+
+
+
+ {tableHeaders.map(header => (
+ {header.label}
+ ))}
+
+
+
+ {filteredMetrics.map(nodeMetrics => (
+
+
+
+ {nodeMetrics.node_id.toText()}
+
+
+ {nodeMetrics.node_provider_id.toText()}
+ {nodeMetrics.daily_node_metrics.length}
+ {Math.round(nodeMetrics.rewards_percent * 100)}%
+ {Math.round(nodeMetrics.rewards_stats.failure_rate * 100)}%
+
+ ))}
+
+
+
+
+
+
+ );
+};
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodePage.tsx b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodePage.tsx
new file mode 100644
index 000000000..ac97505e7
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodePage.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { ChartData, generateChartData } from '../utils/utils';
+import { WidgetGauge, WidgetNumber } from './Widgets';
+import { PeriodFilter } from './FilterBar';
+import { Box, Divider, Grid, Paper, Typography } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import DailyPerformanceChart from './DailyPerformanceChart';
+import NodeInfo from './NodeInfo';
+import { paperStyle, boxStyleWidget } from '../Styles';
+import { NodeRewardsResponse } from '../../../declarations/trustworthy-node-metrics/trustworthy-node-metrics.did';
+
+export interface NodeChartProps {
+ nodeRewards: NodeRewardsResponse[];
+ periodFilter: PeriodFilter;
+}
+
+const NodeMetricsStats: React.FC<{ stats: NodeRewardsResponse['rewards_stats'] }> = ({ stats }) => (
+
+
+
+
+);
+
+const NodePerformanceStats: React.FC<{ failureRateAvg: string, rewardPercent: string }> = ({ failureRateAvg, rewardPercent }) => (
+
+
+
+
+
+);
+
+export const NodeChart: React.FC = ({ nodeRewards, periodFilter }) => {
+ const { node } = useParams();
+
+ const nodeMetrics = nodeRewards.find((metrics) => metrics.node_id.toText() === node);
+ if (!nodeMetrics) {
+ return Node metrics not found
;
+ }
+
+ const chartDailyData: ChartData[] = generateChartData(periodFilter, nodeMetrics.daily_node_metrics, nodeMetrics.node_id);
+ const failureRateAvg = `${Math.round(nodeMetrics.rewards_stats.failure_rate * 100)}%`;
+ const rewardPercent = `${Math.round(nodeMetrics.rewards_percent * 100)}%`;
+
+ return (
+
+
+
+
+
+ {"Node Machine"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default NodeChart;
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/RewardTable.tsx b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/RewardTable.tsx
new file mode 100644
index 000000000..f54d43f14
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/RewardTable.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import { SxProps, Theme } from '@mui/material';
+import { NodeRewardsResponse } from '../../../declarations/trustworthy-node-metrics/trustworthy-node-metrics.did';
+
+interface RewardTableProps {
+ nodeRewards: NodeRewardsResponse[],
+ sx?: SxProps;
+ }
+
+const RewardTable: React.FC = ({ nodeRewards }) => {
+ return (
+
+
+
+
+ Nodes
+ Failure Rates Avg.
+ Rewards No Penalty
+
+
+
+ {nodeRewards.map((nodeMetrics) => (
+
+
+ {nodeMetrics.node_id.toText()}
+
+
+ {Math.round(nodeMetrics.rewards_stats.failure_rate * 100)}%
+
+
+ ))}
+
+
+
+ );
+}
+
+export default RewardTable;
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/Widgets.tsx b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/Widgets.tsx
new file mode 100644
index 000000000..e4a0c928f
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/Widgets.tsx
@@ -0,0 +1,70 @@
+import { Box, Paper, Stack, Typography } from '@mui/material';
+import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
+import { boxStyleWidget, paperStyleWidget } from '../Styles';
+
+import React from 'react';
+
+export function WidgetNumber({ value, title }: { value: string, title: string }) {
+ return (
+
+
+
+ {value}
+
+
+ {title}
+
+
+
+ );
+}
+export function WidgetGauge({ value, title }: { value: number, title: string }) {
+ return (
+
+
+
+
+ `${value}%`}
+ sx={(theme) => ({
+ [`& .${gaugeClasses.valueText}`]: {
+ fontSize: 20,
+ },
+ [`& .${gaugeClasses.valueArc}`]: {
+ fill: '#52b202',
+ },
+ [`& .${gaugeClasses.referenceArc}`]: {
+ fill: theme.palette.text.disabled,
+ },
+ })}
+ />
+
+ {title}
+
+
+
+
+ );
+}
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/index.scss b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/index.scss
new file mode 100644
index 000000000..c45f9ab2e
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/index.scss
@@ -0,0 +1,36 @@
+body {
+ font-family: sans-serif;
+ font-size: 1.5rem;
+}
+
+img {
+ max-width: 50vw;
+ max-height: 25vw;
+ display: block;
+ margin: auto;
+}
+
+form {
+ display: flex;
+ justify-content: center;
+ gap: 0.5em;
+ flex-flow: row wrap;
+ max-width: 40vw;
+ margin: auto;
+ align-items: baseline;
+}
+
+.custom-link {
+ text-decoration: none;
+ color: rgb(113, 113, 246);
+}
+
+.custom-link:hover {
+ color: rgb(44, 44, 191);
+}
+
+.custom-paper {
+ background-color: #11171E;
+ border-radius: 10px;
+ color: white;
+}
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/main.jsx b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/main.jsx
new file mode 100644
index 000000000..173e7221c
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.scss';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+
+
+ ,
+);
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/utils/utils.tsx b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/utils/utils.tsx
new file mode 100644
index 000000000..ee763dc19
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/utils/utils.tsx
@@ -0,0 +1,61 @@
+import { DailyNodeMetrics } from "../../../declarations/trustworthy-node-metrics/trustworthy-node-metrics.did";
+import { PeriodFilter } from "../components/FilterBar";
+export interface ChartData {
+ date: Date ;
+ dailyNodeMetrics: DailyNodeMetrics | null;
+}
+
+export const dateToNanoseconds = (date: Date): bigint => {
+ const millisecondsSinceEpoch = date.getTime();
+ const nanosecondsSinceEpoch = BigInt(millisecondsSinceEpoch) * BigInt(1_000_000);
+ return nanosecondsSinceEpoch;
+};
+
+export const generateChartData = (periodFilter: PeriodFilter, dailyData: DailyNodeMetrics[]): ChartData[] => {
+ const { dateStart, dateEnd } = periodFilter;
+ const chartData: ChartData[] = [];
+
+ const currentDate = new Date(dateStart);
+
+ while (currentDate <= dateEnd) {
+ const dailyDataEntry = dailyData.find(data => {
+ const date = new Date(Number(data.ts) / 1000000);
+
+ return date.getFullYear() === currentDate.getFullYear() &&
+ date.getMonth() === currentDate.getMonth() &&
+ date.getDate() === currentDate.getDate()
+ });
+
+ chartData.push({
+ date: new Date(currentDate),
+ dailyNodeMetrics: dailyDataEntry ? dailyDataEntry : null,
+ });
+
+ currentDate.setDate(currentDate.getDate() + 1);
+ }
+
+ return chartData;
+};
+
+
+export const getFormattedDates = (period: PeriodFilter): string[] => {
+ const { dateStart, dateEnd } = period;
+ const dates: string[] = [];
+ const currentDate = new Date(dateStart);
+
+ while (currentDate <= dateEnd) {
+ dates.push(
+ currentDate.toLocaleDateString('UTC', { month: 'short', day: 'numeric' }).replace(" ", "\n")
+ );
+ currentDate.setDate(currentDate.getDate() + 1);
+ }
+
+ return dates;
+ };
+
+ export const computeAverageFailureRate = (data: number[]): number => {
+ if (data.length === 0) return 0;
+ const sum = data.reduce((acc, val) => acc + val, 0);
+ return sum / data.length;
+ };
+
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/vite-env.d.ts b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/tsconfig.json b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/tsconfig.json
new file mode 100644
index 000000000..39a545e91
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "types": ["vite/client"]
+ },
+ "include": ["src"]
+}
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/vite.config.js b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/vite.config.js
new file mode 100644
index 000000000..11ec09040
--- /dev/null
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/vite.config.js
@@ -0,0 +1,43 @@
+import { fileURLToPath, URL } from 'url';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import environment from 'vite-plugin-environment';
+import dotenv from 'dotenv';
+
+dotenv.config({ path: '../../.env' });
+
+export default defineConfig({
+ build: {
+ emptyOutDir: true,
+ },
+ optimizeDeps: {
+ esbuildOptions: {
+ define: {
+ global: "globalThis",
+ },
+ },
+ },
+ server: {
+ proxy: {
+ "/api": {
+ target: "https://icp0.io",
+ changeOrigin: true,
+ },
+ },
+ },
+ plugins: [
+ react(),
+ environment("all", { prefix: "CANISTER_" }),
+ environment("all", { prefix: "DFX_" }),
+ ],
+ resolve: {
+ alias: [
+ {
+ find: "declarations",
+ replacement: fileURLToPath(
+ new URL("../declarations", import.meta.url)
+ ),
+ },
+ ],
+ },
+});