From d6cc20fefa939ea0f51d7a8e738ec0a96ddf480b Mon Sep 17 00:00:00 2001 From: Shaun Orssaud Date: Mon, 1 Jan 2024 16:34:23 +0900 Subject: [PATCH] ADD storage information to node --- docker-compose.yml | 2 +- frontend/src/App.tsx | 3 +- .../debugInfoItem/debugInfoItem.tsx | 147 ++++++++++++++++++ .../nodeInfoItem/NodeInfoItemComponent.tsx | 92 ++--------- frontend/src/data/models/AvailabilityModel.ts | 1 + frontend/src/data/models/NodeInfoModel.ts | 12 ++ frontend/src/pages/debug/DebugPage.tsx | 2 +- .../tabs/Availability/OfferStorage.tsx | 10 +- frontend/src/pages/node/NodePage.tsx | 69 ++++++++ 9 files changed, 255 insertions(+), 83 deletions(-) create mode 100644 frontend/src/components/debugInfoItem/debugInfoItem.tsx create mode 100644 frontend/src/data/models/NodeInfoModel.ts create mode 100644 frontend/src/pages/node/NodePage.tsx diff --git a/docker-compose.yml b/docker-compose.yml index 95dc8ee..e12c35d 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -8,4 +8,4 @@ services: ports: - "3000:80" environment: - - codex_url=${codex_url:-http://kubernetes.docker.internal:31264} + - codex_url=${codex_url:-http://kubernetes.docker.internal:30003} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6391e93..8ae2200 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -5,6 +5,7 @@ import DataPage from "./pages/data/DataPage"; import DebugPage from "./pages/debug/DebugPage"; import SettingsPage from "./pages/settings/SettingsPage"; import MarketplacePage from "./pages/marketplace/Marketplace"; +import NodeInfoPage from "./pages/node/NodePage"; function PlacehoderPage(props: { name: string }) { return ( @@ -29,7 +30,7 @@ export default function App() { } /> }/> } /> - + } /> diff --git a/frontend/src/components/debugInfoItem/debugInfoItem.tsx b/frontend/src/components/debugInfoItem/debugInfoItem.tsx new file mode 100644 index 0000000..7148abd --- /dev/null +++ b/frontend/src/components/debugInfoItem/debugInfoItem.tsx @@ -0,0 +1,147 @@ +import React from "react"; +import styled from "styled-components"; +import { DebugNodeInfoModel } from "../../data/models/DebugNodeInfoModel"; +import DropDownList from "../layout/dropDownList/DropDownList"; + +function NodeInfoItemComponent(props: { + data: DebugNodeInfoModel | undefined; +}) { + return ( + (props.data && ( + +
+

+ Adresses: + {props.data.addrs.join(", ")} +

+

+ Codex Version: + {`${props.data.codex.version} (${props.data.codex.revision})`} +

+
+
+

+ ID: + {props.data.id} +

+
+
+

+ SPR: + {props.data.spr} +

+
+
+

Local Node

+
+

+ Address: + {props.data.table.localNode.address} +

+

+ Node ID: + {props.data.table.localNode.nodeId} +

+
+
+

+ Peer ID: + {props.data.table.localNode.peerId} +

+

+ Seen: + {`${props.data.table.localNode.seen + .toString()[0] + .toUpperCase()}${props.data.table.localNode.seen + .toString() + .slice(1)}`} +

+
+
+ + {props.data.table.nodes.map((node, index) => ( +
+

Node {index + 1}

+
+

+ Address: + {node.address} +

+

+ Node ID: + {node.nodeId} +

+
+
+

+ Peer ID: + {node.peerId} +

+

+ Seen: + {`${node.seen.toString()[0].toUpperCase()}${node.seen + .toString() + .slice(1)}`} +

+
+
+ ))} + + +
+

+ Record: + {props.data.table.localNode.record} +

+
+ + + )) || <> + ); +} + +export default NodeInfoItemComponent; + +const NodeInfoItemComponentWrapper = styled.div` + background-color: #1e1e1e; + border-radius: 8px; + padding: 10px; + width: 100%; + + #info-row { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 8px; + margin: 5px; + } + + h3 { + padding: 8px; + margin: 5px; + font-style: italic; + } + + div p:nth-child(1) { + text-align: start; + } + + div p:nth-child(2) { + text-align: end; + } + + p { + flex: 1; + font-size: 1rem; + text-align: start; + word-break: break-all; + } + + p span { + font-weight: bold; + } + + #cid { + flex: 2; + } +`; diff --git a/frontend/src/components/nodeInfoItem/NodeInfoItemComponent.tsx b/frontend/src/components/nodeInfoItem/NodeInfoItemComponent.tsx index c543f17..8293af5 100644 --- a/frontend/src/components/nodeInfoItem/NodeInfoItemComponent.tsx +++ b/frontend/src/components/nodeInfoItem/NodeInfoItemComponent.tsx @@ -1,104 +1,38 @@ import React from "react"; import styled from "styled-components"; -import { DebugNodeInfoModel } from "../../data/models/DebugNodeInfoModel"; +import { NodeInfoModel } from "../../data/models/NodeInfoModel"; import DropDownList from "../layout/dropDownList/DropDownList"; function NodeInfoItemComponent(props: { - data: DebugNodeInfoModel | undefined; + data: NodeInfoModel | undefined; }) { return ( (props.data && (

- Adresses: - {props.data.addrs.join(", ")} -

-

- Codex Version: - {`${props.data.codex.version} (${props.data.codex.revision})`} + TotalBlocks: + {props.data.totalBlocks}

- ID: - {props.data.id} -

-

- Repo: - {props.data.repo} + QuotaMaxBytes: + {props.data.quotaMaxBytes}

- SPR: - {props.data.spr} + QuotaUsedBytes: + {props.data.quotaUsedBytes}

-
-

Local Node

-
-

- Address: - {props.data.table.localNode.address} -

-

- Node ID: - {props.data.table.localNode.nodeId} -

-
-
-

- Peer ID: - {props.data.table.localNode.peerId} -

-

- Seen: - {`${props.data.table.localNode.seen - .toString()[0] - .toUpperCase()}${props.data.table.localNode.seen - .toString() - .slice(1)}`} -

-
+
+

+ QuotaReservedBytes: + {props.data.quotaReservedBytes} +

- - {props.data.table.nodes.map((node, index) => ( -
-

Node {index + 1}

-
-

- Address: - {node.address} -

-

- Node ID: - {node.nodeId} -

-
-
-

- Peer ID: - {node.peerId} -

-

- Seen: - {`${node.seen.toString()[0].toUpperCase()}${node.seen - .toString() - .slice(1)}`} -

-
-
- ))} - - -
-

- Record: - {props.data.table.localNode.record} -

-
- )) || <> ); diff --git a/frontend/src/data/models/AvailabilityModel.ts b/frontend/src/data/models/AvailabilityModel.ts index 84a2b94..45de9e9 100644 --- a/frontend/src/data/models/AvailabilityModel.ts +++ b/frontend/src/data/models/AvailabilityModel.ts @@ -4,6 +4,7 @@ type AvailabilityModel = { duration: string; minPrice: string; maxCollateral: string; + expiry: string; }; export default AvailabilityModel; \ No newline at end of file diff --git a/frontend/src/data/models/NodeInfoModel.ts b/frontend/src/data/models/NodeInfoModel.ts new file mode 100644 index 0000000..79fbe88 --- /dev/null +++ b/frontend/src/data/models/NodeInfoModel.ts @@ -0,0 +1,12 @@ +export interface NodeInfoModel { + totalBlocks: number; + quotaMaxBytes: number; + quotaUsedBytes: number; + quotaReservedBytes: number; + } + + export class Convert { + public static toNodeInfoModel(json: string): NodeInfoModel { + return JSON.parse(json); + } +} \ No newline at end of file diff --git a/frontend/src/pages/debug/DebugPage.tsx b/frontend/src/pages/debug/DebugPage.tsx index c52af52..c57825a 100644 --- a/frontend/src/pages/debug/DebugPage.tsx +++ b/frontend/src/pages/debug/DebugPage.tsx @@ -5,7 +5,7 @@ import { Convert, DebugNodeInfoModel, } from "../../data/models/DebugNodeInfoModel"; -import NodeInfoItemComponent from "../../components/nodeInfoItem/NodeInfoItemComponent"; +import NodeInfoItemComponent from "../../components/debugInfoItem/debugInfoItem"; import Header from "../../components/layout/partials/Header"; import { useDexyStore } from "../../store"; diff --git a/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx b/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx index b5032c3..9768fc9 100644 --- a/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx +++ b/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx @@ -10,6 +10,7 @@ function OfferStorage() { const [duration, setDuration,] = useState("file"); const [minPrice, setMinPrice,] = useState("file"); const [maxCollateral, setMaxCollateral,] = useState("file"); + const [expiry, setExpiry,] = useState("file"); function upload(cid: string) { @@ -27,7 +28,8 @@ function OfferStorage() { size: size, duration: duration, minPrice: minPrice, - maxCollateral: maxCollateral + maxCollateral: maxCollateral, + expiry: expiry }) } ) @@ -75,6 +77,12 @@ function OfferStorage() { placeholder="MaxCollateral" onChange={(e) => setMaxCollateral(e.target.value)} /> +
+ setExpiry(e.target.value)} + /> ); diff --git a/frontend/src/pages/node/NodePage.tsx b/frontend/src/pages/node/NodePage.tsx new file mode 100644 index 0000000..6eb626c --- /dev/null +++ b/frontend/src/pages/node/NodePage.tsx @@ -0,0 +1,69 @@ +import axios from "axios"; +import React, { useEffect } from "react"; +import styled from "styled-components"; +import { + Convert, + NodeInfoModel, +} from "../../data/models/NodeInfoModel"; +import NodeInfoItemComponent from "../../components/nodeInfoItem/NodeInfoItemComponent"; +import Header from "../../components/layout/partials/Header"; +import { useDexyStore } from "../../store"; + +function NodeInfoPage() { + const { nodeInfo } = useDexyStore(); + + const [statusInfo, setStatusInfo] = React.useState< + NodeInfoModel | undefined + >(); + useEffect(() => { + axios + .get( + `/api/codex/v1/space`, + { + headers: + (nodeInfo.auth && { + Authorization: + (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "", + }) || + {}, + } + ) + .then((response) => { + setStatusInfo( + Convert.toNodeInfoModel(JSON.stringify(response.data)) + ); + }); + }, [nodeInfo]); + + console.log(statusInfo); + return ( + +
+
{statusInfo && }
+ + ); +} + +export default NodeInfoPage; + +const NodeInfoPageWrapper = styled.div` + flex: 1; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow-y: scroll; + + main { + margin-top: auto; + margin-bottom: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 16px; + } + + .scroll { + } +`;