95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
|
/** @jsx jsx */
|
||
|
|
import { Button, CircularProgress, Container, Typography } from "@material-ui/core";
|
||
|
|
import axios from "axios";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { Box, Flex, jsx } from "theme-ui";
|
||
|
|
|
||
|
|
const API_ENDPOINT = process.env.NODE_ENV === "development" ? "http://localhost:4000" : "/api"
|
||
|
|
|
||
|
|
type PSeries = {
|
||
|
|
'p80-1': number,
|
||
|
|
'p95-1': number,
|
||
|
|
'p99-1': number,
|
||
|
|
'p80-24': number,
|
||
|
|
'p95-24': number,
|
||
|
|
'p99-24': number,
|
||
|
|
'p80-168': number,
|
||
|
|
'p95-168': number,
|
||
|
|
'p99-168': number,
|
||
|
|
}
|
||
|
|
|
||
|
|
type TSeries = {
|
||
|
|
1: number,
|
||
|
|
24: number,
|
||
|
|
168: number,
|
||
|
|
720?: number,
|
||
|
|
2160?: number,
|
||
|
|
}
|
||
|
|
|
||
|
|
type Stats = {
|
||
|
|
'ttfb': PSeries,
|
||
|
|
'download_small': PSeries,
|
||
|
|
'download_throughput': PSeries,
|
||
|
|
'download_total': TSeries,
|
||
|
|
'upload_small': PSeries,
|
||
|
|
'upload_throughput': PSeries,
|
||
|
|
'upload_total': TSeries,
|
||
|
|
'money_spent': TSeries,
|
||
|
|
'total_files_pinned': number,
|
||
|
|
'total_files_served': TSeries,
|
||
|
|
}
|
||
|
|
|
||
|
|
const Stats = () => {
|
||
|
|
const [loading, setLoading] = useState(true)
|
||
|
|
const [stats, setStats] = useState<Stats>()
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
axios.get(`${API_ENDPOINT}/stats`)
|
||
|
|
.then((response: any) => {
|
||
|
|
console.log(response)
|
||
|
|
setLoading(false)
|
||
|
|
setStats(response.data as Stats)
|
||
|
|
}).catch(e => {
|
||
|
|
console.log('ERROR:', e)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Box color="white">
|
||
|
|
<Container>
|
||
|
|
<Flex sx={{ alignItems: "center", height: 120 }}>
|
||
|
|
<Box>
|
||
|
|
<Typography sx={{ fontWeight: 700 }}>Sia Skynet</Typography>
|
||
|
|
</Box>
|
||
|
|
<Box sx={{ ml: "auto" }}>
|
||
|
|
<Button href="/stats">
|
||
|
|
Statistics
|
||
|
|
</Button>
|
||
|
|
<Button href="https://sia.tech/" target="_blank">
|
||
|
|
About Sia
|
||
|
|
</Button>
|
||
|
|
</Box>
|
||
|
|
</Flex>
|
||
|
|
</Container>
|
||
|
|
</Box>
|
||
|
|
<Box>
|
||
|
|
<Container>
|
||
|
|
<h2>Portal Statistics</h2>
|
||
|
|
|
||
|
|
<Flex
|
||
|
|
sx={{ height: 400, justifyContent: "center", alignItems: "center" }}
|
||
|
|
>
|
||
|
|
{loading && <CircularProgress />}
|
||
|
|
{!loading &&
|
||
|
|
JSON.stringify(stats)
|
||
|
|
}
|
||
|
|
</Flex>
|
||
|
|
</Container>
|
||
|
|
</Box>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Stats
|