mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-29 20:11:55 +03:00
441 lines
13 KiB
JavaScript
441 lines
13 KiB
JavaScript
import * as React from "react";
|
|
import * as Strings from "~/common/strings";
|
|
import * as Constants from "~/common/constants";
|
|
import * as System from "~/components/system";
|
|
|
|
import Section from "~/components/core/Section";
|
|
|
|
import Chart from "~/components/stats/Chart";
|
|
|
|
const data = [
|
|
{ id: 1, date: "December 17, 1995 03:24:00", category: "1", value: 100 },
|
|
{ id: 2, date: "December 17, 2000 03:24:00", category: "1", value: 150 },
|
|
{ id: 3, date: "December 17, 2005 03:24:00", category: "1", value: 200 },
|
|
{ id: 4, date: "December 17, 2007 03:24:00", category: "1", value: 100 },
|
|
{ id: 5, date: "December 17, 2008 03:24:00", category: "1", value: 250 },
|
|
{ id: 6, date: "December 17, 2010 03:24:00", category: "1", value: 110 },
|
|
{ id: 7, date: "December 17, 1995 03:24:00", category: "2", value: 150 },
|
|
{ id: 8, date: "December 17, 2000 03:24:00", category: "2", value: 200 },
|
|
{ id: 9, date: "December 17, 2005 03:24:00", category: "2", value: 100 },
|
|
{ id: 10, date: "December 17, 2010 03:24:00", category: "2", value: 150 },
|
|
{ id: 11, date: "December 17, 1995 03:24:00", category: "3", value: 200 },
|
|
{ id: 12, date: "December 17, 2000 03:24:00", category: "3", value: 100 },
|
|
{ id: 13, date: "December 17, 2005 03:24:00", category: "3", value: 150 },
|
|
{ id: 14, date: "December 17, 2010 03:24:00", category: "3", value: 200 },
|
|
];
|
|
|
|
// Use this to determine how many tick marks to be written on X axis
|
|
const tickNumber = 4;
|
|
|
|
//Use this to choose how much of the chart is filled vertically displayMax = 500
|
|
const yCeiling = 400;
|
|
|
|
//Use this to choose how much of the chart is filled horizontally displayMax = 550
|
|
const xWall = 500;
|
|
|
|
import { css } from "@emotion/react";
|
|
|
|
const STYLES_ROW = css`
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 6px 24px;
|
|
`;
|
|
|
|
const STYLES_TEXT = css`
|
|
min-width: 5%;
|
|
padding-top: 6px;
|
|
width: 100%;
|
|
`;
|
|
|
|
const STYLES_SUBTEXT = css`
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
`;
|
|
|
|
const STYLES_SUBTEXT_HIGHLIGHT = css`
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: ${Constants.system.brand};
|
|
`;
|
|
|
|
const STYLES_ITEM = css`
|
|
margin-bottom: 12px;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
max-width: 220px;
|
|
margin-right: 32px;
|
|
`;
|
|
|
|
const STYLES_ITEM_GROUP = css`
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
`;
|
|
|
|
const EXAMPLE_MINERS = {
|
|
columns: [
|
|
{ key: "miner", id: "id", name: "Miner" },
|
|
{
|
|
key: "cid",
|
|
name: "Raw Byte",
|
|
width: "228px",
|
|
type: "SLATE_LINK",
|
|
},
|
|
{
|
|
key: "amount",
|
|
name: "Adj. Power Growth",
|
|
width: "268px",
|
|
type: "NEW_WINDOW",
|
|
},
|
|
{
|
|
key: "size",
|
|
name: "24h Power Growth",
|
|
type: "NEW_WINDOW",
|
|
width: "188px",
|
|
},
|
|
],
|
|
rows: [
|
|
{
|
|
id: `file-1`,
|
|
icon: "PNG",
|
|
file: "test-image.jpg",
|
|
miner: "Example Miner A",
|
|
"deal-cid": "23Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-06-06 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(66666, 3),
|
|
amount: Strings.formatAsFilecoin(2),
|
|
remaining: Strings.getRemainingTime(666666),
|
|
cid: "QmY7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 4,
|
|
},
|
|
{
|
|
id: `file-2`,
|
|
icon: "PNG",
|
|
file: "test-image-2.jpg",
|
|
miner: "Example Miner A",
|
|
"deal-cid": "ABCDYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-06-07 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(77777, 3),
|
|
amount: Strings.formatAsFilecoin(2.04),
|
|
remaining: Strings.getRemainingTime(777777),
|
|
cid: "w2w2Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-3`,
|
|
icon: "PNG",
|
|
file: "test-image-3.jpg",
|
|
miner: "Example Miner B",
|
|
"deal-cid": "FHJKYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-06-08 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(88888, 3),
|
|
amount: Strings.formatAsFilecoin(2.08),
|
|
remaining: Strings.getRemainingTime(888888),
|
|
cid: "0707Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-4`,
|
|
icon: "PNG",
|
|
file: "test-image-4.jpg",
|
|
miner: "Example Miner C",
|
|
"deal-cid": "KKKKYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-06-09 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(9999999, 3),
|
|
amount: Strings.formatAsFilecoin(4.08),
|
|
remaining: Strings.getRemainingTime(999999),
|
|
cid: "1010Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-5`,
|
|
icon: "PNG",
|
|
file: "test-image-5.jpg",
|
|
miner: "Example Miner D",
|
|
"deal-cid": "WWWWWWWUquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-06-10 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(4444444, 3),
|
|
amount: Strings.formatAsFilecoin(5.13),
|
|
remaining: Strings.getRemainingTime(797979),
|
|
cid: "1414Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-6`,
|
|
icon: "PNG",
|
|
file: "test-image-6.jpg",
|
|
miner: "Example Miner D",
|
|
"deal-cid": "XXXXUquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-06-11 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(373737, 3),
|
|
amount: Strings.formatAsFilecoin(12.13),
|
|
remaining: Strings.getRemainingTime(828282),
|
|
cid: "3030Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-7`,
|
|
icon: "PNG",
|
|
file: "test-image-7.jpg",
|
|
miner: "Example Miner E",
|
|
"deal-cid": "HGHGHGXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-06-12 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(373737, 3),
|
|
amount: Strings.formatAsFilecoin(12.13),
|
|
remaining: Strings.getRemainingTime(828282),
|
|
cid: "3030Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 1,
|
|
},
|
|
{
|
|
id: `file-8`,
|
|
icon: "PNG",
|
|
file: "example-painting-a-1.jpg",
|
|
miner: "Example Miner F",
|
|
"deal-cid": "12CCCCCLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-06-12 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(444444, 3),
|
|
amount: Strings.formatAsFilecoin(2.13),
|
|
remaining: Strings.getRemainingTime(8282822),
|
|
cid: "asdfadsfPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-9`,
|
|
icon: "PNG",
|
|
file: "example-painting-a-2.jpg",
|
|
miner: "Example Miner F",
|
|
"deal-cid": "CGFDFASXbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-06-12 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(44432, 3),
|
|
amount: Strings.formatAsFilecoin(20.13),
|
|
remaining: Strings.getRemainingTime(182822822),
|
|
cid: "asdfadsfPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-10`,
|
|
icon: "PNG",
|
|
file: "example-painting-a-3.jpg",
|
|
miner: "Example Miner F",
|
|
"deal-cid": "HHFGFDDFGvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-07-20 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(44432, 3),
|
|
amount: Strings.formatAsFilecoin(20.13),
|
|
remaining: Strings.getRemainingTime(7432123),
|
|
cid: "asdfadsfPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-11`,
|
|
icon: "PNG",
|
|
file: "example-painting-a-4.jpg",
|
|
miner: "Example Miner F",
|
|
"deal-cid": "HHFGFDDFGvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-07-20 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(44432, 3),
|
|
amount: Strings.formatAsFilecoin(20.13),
|
|
remaining: Strings.getRemainingTime(742988),
|
|
cid: "ppdmdfeFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-12`,
|
|
icon: "PNG",
|
|
file: "example-painting-a-5.jpg",
|
|
miner: "Example Miner F",
|
|
"deal-cid": "GHREREFGvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-07-24 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(44432, 3),
|
|
amount: Strings.formatAsFilecoin(20.13),
|
|
remaining: Strings.getRemainingTime(320021),
|
|
cid: "dfsffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 6,
|
|
errors: 0,
|
|
},
|
|
{
|
|
id: `file-13`,
|
|
icon: "PNG",
|
|
file: "pending-file-1.jpg",
|
|
miner: "Example Miner G",
|
|
"deal-cid": "13REREFGvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-07-24 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(44432, 3),
|
|
amount: Strings.formatAsFilecoin(20.13),
|
|
remaining: null,
|
|
cid: "13sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 1,
|
|
},
|
|
{
|
|
id: `file-14`,
|
|
icon: "PNG",
|
|
file: "pending-file-2.jpg",
|
|
miner: "Example Miner G",
|
|
"deal-cid": "14REREFGvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-07-24 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(44432, 3),
|
|
amount: Strings.formatAsFilecoin(20.13),
|
|
remaining: null,
|
|
cid: "14sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 2,
|
|
},
|
|
{
|
|
id: `file-15`,
|
|
icon: "PNG",
|
|
file: "pending-file-3.jpg",
|
|
miner: "Example Miner H",
|
|
"deal-cid": "15REREFGvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-07-24 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(44432, 3),
|
|
amount: Strings.formatAsFilecoin(20.13),
|
|
remaining: null,
|
|
cid: "15sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 3,
|
|
},
|
|
{
|
|
id: `file-16`,
|
|
icon: "PNG",
|
|
file: "pending-file-4.jpg",
|
|
miner: "Example Miner I",
|
|
"deal-cid": "16REREFGvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-07-24 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(44432, 3),
|
|
amount: Strings.formatAsFilecoin(20.13),
|
|
remaining: null,
|
|
cid: "16sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 4,
|
|
},
|
|
{
|
|
id: `file-17`,
|
|
icon: "PNG",
|
|
file: "pending-file-5.jpg",
|
|
miner: "Example Miner J",
|
|
"deal-cid": "17REREFGvFoPwmQUSa92pxnxjQuPU",
|
|
date: Strings.toDate("2014-07-24 00:00:00 UTC"),
|
|
size: Strings.bytesToSize(44432, 3),
|
|
amount: Strings.formatAsFilecoin(20.13),
|
|
remaining: null,
|
|
cid: "17sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
|
|
"retrieval-status": 5,
|
|
},
|
|
],
|
|
};
|
|
|
|
export default class StatsPage extends React.Component {
|
|
render() {
|
|
return (
|
|
<div>
|
|
<System.H1>Stats</System.H1>
|
|
|
|
<Section
|
|
onAction={this.props.onAction}
|
|
onNavigateTo={this.props.onNavigateTo}
|
|
title="Wallet"
|
|
buttons={[
|
|
{
|
|
name: "Export",
|
|
type: "SIDEBAR",
|
|
value: "SIDEBAR_CREATE_WALLET_ADDRESS",
|
|
},
|
|
]}
|
|
>
|
|
<div css={STYLES_ROW}>
|
|
<div css={STYLES_TEXT}>
|
|
<div css={STYLES_ITEM_GROUP}>
|
|
<div css={STYLES_ITEM}>
|
|
<div css={STYLES_SUBTEXT}>Total File Balance</div>
|
|
</div>
|
|
|
|
<div css={STYLES_ITEM}>
|
|
<div css={STYLES_SUBTEXT_HIGHLIGHT}>Value(FIL/ATTOLFIL)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div css={STYLES_ROW}>
|
|
<div css={STYLES_TEXT}>
|
|
<div css={STYLES_ITEM_GROUP}>
|
|
<div css={STYLES_ITEM}>
|
|
<div css={STYLES_SUBTEXT}>Lifetime File Balance</div>
|
|
</div>
|
|
|
|
<div css={STYLES_ITEM}>
|
|
<div css={STYLES_SUBTEXT_HIGHLIGHT}>Value(FIL/ATTOLFIL)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
<Section
|
|
onAction={this.props.onAction}
|
|
onNavigateTo={this.props.onNavigateTo}
|
|
title="Network"
|
|
buttons={[
|
|
{
|
|
name: "Export",
|
|
type: "SIDEBAR",
|
|
value: "SIDEBAR_CREATE_WALLET_ADDRESS",
|
|
},
|
|
]}
|
|
>
|
|
<div css={STYLES_ROW}>
|
|
<div css={STYLES_TEXT}>
|
|
<div css={STYLES_ITEM_GROUP}>
|
|
<div css={STYLES_ITEM}>
|
|
<div css={STYLES_SUBTEXT}>Total Power</div>
|
|
</div>
|
|
|
|
<div css={STYLES_ITEM}>
|
|
<div css={STYLES_SUBTEXT_HIGHLIGHT}>Value(FIL/ATTOLFIL)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div css={STYLES_ROW}>
|
|
<div css={STYLES_TEXT}>
|
|
<div css={STYLES_ITEM_GROUP}>
|
|
<div css={STYLES_ITEM}>
|
|
<div css={STYLES_SUBTEXT}>Tipset Height</div>
|
|
</div>
|
|
|
|
<div css={STYLES_ITEM}>
|
|
<div css={STYLES_SUBTEXT_HIGHLIGHT}>Value(FIL/ATTOLFIL)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
<Section title="Miner List">
|
|
<System.Table
|
|
data={EXAMPLE_MINERS}
|
|
name="data"
|
|
onAction={this.props.onAction}
|
|
onNavigateTo={this.props.onNavigateTo}
|
|
/>
|
|
</Section>
|
|
|
|
<Section title="Node">
|
|
<Chart
|
|
data={data}
|
|
maxTicks={tickNumber}
|
|
yCeiling={yCeiling}
|
|
xWall={xWall}
|
|
/>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|
|
}
|