-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: sa-github-api <[email protected]>
- Loading branch information
1 parent
57440f4
commit 0c411a7
Showing
9 changed files
with
245 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
...tworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/ExportTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import * as React from 'react'; | ||
| import { DataGrid, GridColDef, GridRowsProp, GridToolbarContainer, GridToolbarExport } from '@mui/x-data-grid'; | ||
|
|
||
| function CustomToolbar() { | ||
| return ( | ||
| <GridToolbarContainer> | ||
| <GridToolbarExport /> | ||
| </GridToolbarContainer> | ||
| ); | ||
| } | ||
|
|
||
| interface ExportCustomToolbarProps { | ||
| colDef: GridColDef[]; | ||
| rows: GridRowsProp; | ||
| } | ||
|
|
||
| export const ExportTable: React.FC<ExportCustomToolbarProps> = ({ colDef, rows }) => { | ||
| return ( | ||
| <div style={{ height: 1000, width: '100%' }}> | ||
| <DataGrid | ||
| rows={rows} | ||
| columns={colDef} | ||
| slots={{ | ||
| toolbar: CustomToolbar, | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
45 changes: 0 additions & 45 deletions
45
...orthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeDailyData.tsx
This file was deleted.
Oops, something went wrong.
21 changes: 7 additions & 14 deletions
21
...rustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeInfo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,22 @@ | ||
| import React from 'react'; | ||
| import Typography from '@mui/material/Typography'; | ||
|
|
||
| interface NodeInfoProps { | ||
| nodeId: string; | ||
| nodeProviderId: string; | ||
| interface InfoFormatterProps { | ||
| name: string; | ||
| value: string; | ||
| } | ||
|
|
||
| const NodeInfo: React.FC<NodeInfoProps> = ({ nodeId, nodeProviderId }) => { | ||
| const InfoFormatter: React.FC<InfoFormatterProps> = ({ name, value }) => { | ||
| return ( | ||
| <div> | ||
| <Typography gutterBottom variant="subtitle1" component="div"> | ||
| {"Node ID"} | ||
| {name} | ||
| </Typography> | ||
| <Typography gutterBottom variant="subtitle2" sx={{ color: 'text.disabled' }} component="div"> | ||
| {nodeId} | ||
| </Typography> | ||
|
|
||
| <Typography gutterBottom variant="subtitle1" component="div"> | ||
| {"Node Provider ID"} | ||
| </Typography> | ||
| <Typography gutterBottom variant="subtitle2" sx={{ color: 'text.disabled' }} component="div"> | ||
| {nodeProviderId} | ||
| {value} | ||
| </Typography> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default NodeInfo; | ||
| export default InfoFormatter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 105 additions & 0 deletions
105
...hy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeProviderPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Box, Grid, Paper, Typography } from '@mui/material'; | ||
| import { axisClasses, BarChart, StackOrderType } from '@mui/x-charts'; | ||
| import Divider from '@mui/material/Divider'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import { formatDateToUTC, generateChartData, getFormattedDates } from '../utils/utils'; | ||
| import { PeriodFilter } from './FilterBar'; | ||
| import { Root } from './NodeList'; | ||
| import { NodeRewardsResponse } from '../../../declarations/trustworthy-node-metrics/trustworthy-node-metrics.did'; | ||
| import { paperStyle } from '../Styles'; | ||
| import InfoFormatter from './NodeInfo'; | ||
| import { ExportTable } from './ExportTable'; | ||
| import { GridColDef, GridRowsProp } from '@mui/x-data-grid'; | ||
|
|
||
| export interface NodeProviderPageProps { | ||
| nodeRewards: NodeRewardsResponse[], | ||
| periodFilter: PeriodFilter | ||
| } | ||
|
|
||
| export const NodeProviderPage: React.FC<NodeProviderPageProps> = ({ nodeRewards, periodFilter }) => { | ||
| const { provider } = useParams(); | ||
| const providerNodeMetrics = nodeRewards | ||
| .filter((nodeMetrics) => nodeMetrics.node_provider_id.toText() === provider) | ||
| const highFailureRateChart = providerNodeMetrics | ||
| .filter(nodeMetrics => nodeMetrics.rewards_stats.rewards_reduction > 0) | ||
| .flatMap(nodeMetrics => { | ||
| const chartData = generateChartData(periodFilter, nodeMetrics.daily_node_metrics); | ||
| return { | ||
| data: chartData.map(data => data.dailyNodeMetrics? data.dailyNodeMetrics.failure_rate * 100: null), | ||
| label: nodeMetrics.node_id.toText(), | ||
| stack: 'total' | ||
| } | ||
| }); | ||
|
|
||
| let index = 0; | ||
| const rows: GridRowsProp = providerNodeMetrics.flatMap((nodeRewards) => { | ||
| return nodeRewards.daily_node_metrics.map((data) => { | ||
| index = index + 1; | ||
| return { | ||
| id: index, | ||
| col1: new Date(Number(data.ts) / 1000000), | ||
| col2: nodeRewards.node_id, | ||
| col3: data.num_blocks_proposed, | ||
| col4: data.num_blocks_failed, | ||
| col5: data.failure_rate, | ||
| col6: data.subnet_assigned, | ||
| }; | ||
| }) | ||
| }); | ||
|
|
||
| const colDef: GridColDef[] = [ | ||
| { field: 'col1', headerName: 'Date (UTC)', width: 200, valueFormatter: (value: Date) => formatDateToUTC(value)}, | ||
| { field: 'col2', headerName: 'Node ID', width: 550 }, | ||
| { field: 'col3', headerName: 'Blocks Proposed', width: 150 }, | ||
| { field: 'col4', headerName: 'Blocks Failed', width: 150 }, | ||
| { field: 'col5', headerName: 'Daily Failure Rate', width: 350 , valueFormatter: (value: number) => `${value * 100}%`,}, | ||
| { field: 'col6', headerName: 'Subnet Assigned', width: 550 }, | ||
| ]; | ||
|
|
||
| return ( | ||
|
|
||
| <Box sx={{ p: 3 }}> | ||
| <Paper sx={paperStyle}> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs={12} md={12}> | ||
| <Typography gutterBottom variant="h5" component="div"> | ||
| {"Node Provider"} | ||
| </Typography> | ||
| <Divider/> | ||
| </Grid> | ||
| <Grid item xs={12} md={12}> | ||
| <InfoFormatter name={"Provider ID"} value={provider ? provider : "Anonym"} /> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <Typography variant="h6" component="div"> | ||
| Daily Failure Rate | ||
| </Typography> | ||
| <Typography variant="subtitle2" sx={{ color: 'text.disabled' }} component="div"> | ||
| For nodes with rewards reduction | ||
| </Typography> | ||
| </Grid> | ||
| <Grid item xs={12} md={12}> | ||
| <BarChart | ||
| slotProps={{ legend: { hidden: true } }} | ||
| xAxis={[{ | ||
| scaleType: 'band', | ||
| data: getFormattedDates(periodFilter), | ||
| }]} | ||
| yAxis={[{ | ||
| valueFormatter: (value: number) => `${value}%`, | ||
| }]} | ||
| leftAxis={null} | ||
| borderRadius={9} | ||
| series={highFailureRateChart} | ||
| height={300} | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12} md={12}> | ||
| <ExportTable colDef={colDef} rows={rows}/> | ||
| </Grid> | ||
| </Grid> | ||
| </Paper> | ||
| </Box> | ||
| ); | ||
| }; |
Oops, something went wrong.