Skip to content

Commit

Permalink
feat(Peers): add Provider.Peers (#111)
Browse files Browse the repository at this point in the history
* feat(Peers): add Provider.Peers

* feat(Offer.Peers): add currentCapacityCommitmentId

* fix(yarn.lock): fix yarn.lock

* fix(env): fix env

* feat(ts-client): update version
  • Loading branch information
MixailE authored Oct 24, 2024
1 parent ccd0605 commit e42c9a4
Show file tree
Hide file tree
Showing 11 changed files with 211 additions and 18 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fluencelabs/deal-ts-clients": "0.22.1",
"@fluencelabs/deal-ts-clients": "0.22.3",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-aspect-ratio": "^1.0.3",
"@radix-ui/react-checkbox": "^1.0.4",
Expand Down
8 changes: 7 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,12 @@ import { OfferInfo } from './pages/offer'
import { Offers } from './pages/offers'
import { PeerInfo } from './pages/peer'
import { Proofs } from './pages/proofs'
import { ProviderDeals, ProviderInfo, ProviderOffers } from './pages/provider'
import {
ProviderDeals,
ProviderInfo,
ProviderOffers,
ProviderPeers,
} from './pages/provider'
import { ProviderCapacity } from './pages/provider/ProviderCapacity'
import { Providers } from './pages/providers'
import { ROUTES } from './constants'
Expand All @@ -28,6 +33,7 @@ export const App: React.FC = () => {
<Route path={ROUTES.providers} component={Providers} />
<Route path={ROUTES.providerInfo} component={ProviderInfo} />
<Route path={ROUTES.providerOffers} component={ProviderOffers} />
<Route path={ROUTES.providerPeers} component={ProviderPeers} />
<Route path={ROUTES.providerDeals} component={ProviderDeals} />
<Route path={ROUTES.providerCapacity} component={ProviderCapacity} />
<Route path={ROUTES.offers} component={Offers} />
Expand Down
4 changes: 2 additions & 2 deletions src/constants/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ import { createConfig, createStorage, http } from 'wagmi'
export const FLUENCE_CLIENT_NETWORK: ContractsENV =
import.meta.env.VITE_FLUENCE_CLIENT_NETWORK ?? 'local'
export const BLOCKSCOUT_URL =
(import.meta.env.VITE_BLOCKSCOUT_URL ?? FLUENCE_CLIENT_NETWORK === 'local')
? null
import.meta.env.VITE_BLOCKSCOUT_URL || FLUENCE_CLIENT_NETWORK === 'local'
? import.meta.env.VITE_BLOCKSCOUT_URL
: BLOCK_SCOUT_URLS[FLUENCE_CLIENT_NETWORK]
export const RPC_URL =
import.meta.env.VITE_RPC_URL ?? RPC_URLS[FLUENCE_CLIENT_NETWORK]
Expand Down
1 change: 1 addition & 0 deletions src/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export const ROUTES = {
providers: '/',
providerInfo: '/provider/:id',
providerOffers: '/provider/:id/offers',
providerPeers: '/provider/:id/peers',
providerDeals: '/provider/:id/deals',
providerCapacity: '/provider/:id/capacity',
offers: '/offers',
Expand Down
14 changes: 13 additions & 1 deletion src/pages/offer/PeersTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@ import {
TableHeader,
} from '../../components/Table'
import { Text } from '../../components/Text'
import { formatHexData } from '../../utils/helpers'

const template = ['20px', 'minmax(10px, 1fr)', 'minmax(10px, 1fr)']
const template = ['20px', 'minmax(10px, 1fr)', '100px', 'minmax(10px, 1fr)']

interface PeersTableProps {
peers: Peer[]
Expand All @@ -29,6 +30,7 @@ export const PeersTable: React.FC<PeersTableProps> = ({ peers }) => {
<TableColumnTitle>#</TableColumnTitle>
<TableColumnTitle>Peer id</TableColumnTitle>
<TableColumnTitle>Compute units</TableColumnTitle>
<TableColumnTitle>Current Capacity Commitment</TableColumnTitle>
</TableHeader>
<TableBody>
{peers.map((peer, index) => (
Expand Down Expand Up @@ -63,6 +65,16 @@ const PeerRow: React.FC<PeerRowProps> = ({ index, peer }) => {
<Cell>
<Text size={12}>{peer.computeUnits.length}</Text>
</Cell>
{/* Current Capacity Commitment */}
<Cell>
{peer.currentCapacityCommitmentId ? (
<A href={`/capacity/${peer.currentCapacityCommitmentId}`}>
{formatHexData(peer.currentCapacityCommitmentId, 20, 20)}
</A>
) : (
<Text size={12}>-</Text>
)}
</Cell>
</Row>
</RowTrigger>
</RowHeader>
Expand Down
20 changes: 15 additions & 5 deletions src/pages/peer/PeerDealsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,11 @@ import {
} from '../../components/Table'
import { Text } from '../../components/Text'
import { useApiQuery, useOrder, usePagination } from '../../hooks'
import { formatHexData } from '../../utils/helpers'

const template = [
'30px',
'minmax(10px, 1fr)',
'minmax(10px, 1fr)',
'minmax(10px, 350px)',
'minmax(10px, 200px)',
'minmax(10px, 1fr)',
]

Expand Down Expand Up @@ -65,6 +64,7 @@ export const PeerDealsTable: React.FC<PeerDealsTableProps> = ({ peerId }) => {
<TableColumnTitle>#</TableColumnTitle>
<TableColumnTitle>Deal id</TableColumnTitle>
<TableColumnTitle>Compute Units Count</TableColumnTitle>
<TableColumnTitle>Worker id</TableColumnTitle>
</TableHeader>
<TableBody
isEmpty={!pageItems.length}
Expand Down Expand Up @@ -110,10 +110,20 @@ const DealRow: React.FC<DealRowProps> = ({ index, deal }) => {
</Cell>
{/* Deal id */}
<Cell>
<A href={`/deal/${deal.dealId}`}>{formatHexData(deal.dealId)}</A>
<A href={`/deal/${deal.dealId}`}>{deal.dealId}</A>
</Cell>
{/* Compute units count */}
<Cell></Cell>
<Cell>
<Text size={12}>
{deal.workerIds.length > 0 ? deal.cuCount : '-'}
</Text>
</Cell>
{/* Worker id */}
<Cell>
<Text size={12}>
{deal.workerIds.length > 0 ? deal.workerIds.join(' ') : '-'}
</Text>
</Cell>
</Row>
</RowTrigger>
</RowHeader>
Expand Down
3 changes: 3 additions & 0 deletions src/pages/provider/Provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ export const Provider: React.FC<ProviderProps> = ({ children, provider }) => {
<ActiveLink href={`/provider/${provider.id}/deals`}>
Deals
</ActiveLink>
<ActiveLink href={`/provider/${provider.id}/peers`}>
Peers
</ActiveLink>
</LeftMenu>
</Left>
<Right>
Expand Down
30 changes: 30 additions & 0 deletions src/pages/provider/ProviderPeers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react'
import { useParams } from 'wouter'

import { InfoLoader } from '../../components/InfoLoader'
import { Space } from '../../components/Space'
import { useApiQuery } from '../../hooks'

import { Provider } from './Provider'
import { ProviderPeersTable } from './ProviderPeersTable'

export const ProviderPeers: React.FC = () => {
const params = useParams()

const { id } = params

const { data: provider, isLoading } = useApiQuery((client) =>
client.getProvider(id ?? ''),
)

if (!provider || isLoading) {
return <InfoLoader />
}

return (
<Provider provider={provider}>
<Space height="44px" />
<ProviderPeersTable providerId={provider.id} />
</Provider>
)
}
130 changes: 130 additions & 0 deletions src/pages/provider/ProviderPeersTable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
/* eslint-disable react/prop-types */
import { useApiQuery } from '../../hooks'

interface ProviderPeersTableProps {
providerId: string
}

export const ProviderPeersTable: React.FC<ProviderPeersTableProps> = ({
providerId,
}) => {
const { data } = useApiQuery((client) =>
client.getPeers({ provider: providerId }),
)

if (!data?.data) return null

return <PeersTable peers={data?.data} />
}

import React from 'react'
import { PeerBasic } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes'

import { A } from '../../components/A'
import { CapacityStatus } from '../../components/CapacityStatus'
import {
Cell,
Row,
RowBlock,
RowHeader,
RowTrigger,
ScrollableTable,
TableBody,
TableColumnTitle,
TableHeader,
} from '../../components/Table'
import { Text } from '../../components/Text'
import { formatHexData } from '../../utils/helpers'

const template = [
'20px',
'minmax(10px, 1fr)',
'minmax(10px, 1fr)',
'50px',
'minmax(10px, 1fr)',
'80px',
]

interface PeersTableProps {
peers: PeerBasic[]
}

export const PeersTable: React.FC<PeersTableProps> = ({ peers }) => {
return (
<>
<ScrollableTable>
<TableHeader template={template}>
<TableColumnTitle>#</TableColumnTitle>
<TableColumnTitle>Peer id</TableColumnTitle>
<TableColumnTitle>Offer id</TableColumnTitle>
<TableColumnTitle>CUs</TableColumnTitle>
<TableColumnTitle>Current CC</TableColumnTitle>
<TableColumnTitle>Status</TableColumnTitle>
</TableHeader>
<TableBody>
{peers.map((peer, index) => (
<PeerRow key={peer.id} index={index} peer={peer} />
))}
</TableBody>
</ScrollableTable>
</>
)
}

interface PeerRowProps {
index: number
peer: PeerBasic
}

const PeerRow: React.FC<PeerRowProps> = ({ index, peer }) => {
return (
<RowBlock>
<RowHeader>
<RowTrigger>
<Row template={template}>
{/* # */}
<Cell>
<Text size={12}>{index + 1}</Text>
</Cell>
{/* Peer ID */}
<Cell>
<A href={`/peer/${peer.id}`}>{formatHexData(peer.id, 20, 20)}</A>
</Cell>
{/* Offer ID */}
<Cell>
{peer.offer?.id ? (
<A href={`/offer/${peer.offer?.id}`}>
{formatHexData(peer.offer?.id, 15, 15)}
</A>
) : (
'-'
)}
</Cell>
{/* Compute units */}
<Cell>
<Text size={12}>{peer.computeUnitsTotal}</Text>
</Cell>
{/* Current CC */}
<Cell>
{peer.currentCapacityCommitment ? (
<A href={`/capacity/${peer.currentCapacityCommitment?.id}`}>
{formatHexData(peer.currentCapacityCommitment?.id, 15, 15)}
</A>
) : (
'-'
)}
</Cell>
{/* Status */}
<Cell>
{peer.currentCapacityCommitment?.status && (
<CapacityStatus
status={peer.currentCapacityCommitment?.status}
/>
)}
</Cell>
</Row>
</RowTrigger>
</RowHeader>
</RowBlock>
)
}
7 changes: 4 additions & 3 deletions src/pages/provider/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './ProviderInfo.tsx'
export * from './ProviderOffers.tsx'
export * from './ProviderDeals.tsx'
export * from './ProviderInfo'
export * from './ProviderOffers'
export * from './ProviderDeals'
export * from './ProviderPeers'
10 changes: 5 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -914,9 +914,9 @@ __metadata:
languageName: node
linkType: hard

"@fluencelabs/deal-ts-clients@npm:0.22.1":
version: 0.22.1
resolution: "@fluencelabs/deal-ts-clients@npm:0.22.1"
"@fluencelabs/deal-ts-clients@npm:0.22.3":
version: 0.22.3
resolution: "@fluencelabs/deal-ts-clients@npm:0.22.3"
dependencies:
"@graphql-typed-document-node/core": "npm:^3.2.0"
debug: "npm:^4.3.4"
Expand All @@ -928,7 +928,7 @@ __metadata:
graphql-tag: "npm:^2.12.6"
ipfs-http-client: "npm:^60.0.1"
multiformats: "npm:^13.0.1"
checksum: 10c0/10009e68a5d2441bfa749cb00c2944bd705dd7b1ff755e12649a50f8e408ad9f984ffbc17b54006d5c92cef4f90d0aa0eac126bb621c28cf06b1342124242b5a
checksum: 10c0/871afe9e643297cc639510e1f441011dcc5966a70012bb46ca265ad940d50e2b98114c9a279553821b56dae777f7ed5fd8fd8981e0e09d88467a940e5959db96
languageName: node
linkType: hard

Expand Down Expand Up @@ -6470,7 +6470,7 @@ __metadata:
"@emotion/babel-plugin": "npm:^11.11.0"
"@emotion/react": "npm:^11.11.1"
"@emotion/styled": "npm:^11.11.0"
"@fluencelabs/deal-ts-clients": "npm:0.22.1"
"@fluencelabs/deal-ts-clients": "npm:0.22.3"
"@radix-ui/react-accordion": "npm:^1.1.2"
"@radix-ui/react-aspect-ratio": "npm:^1.0.3"
"@radix-ui/react-checkbox": "npm:^1.0.4"
Expand Down

0 comments on commit e42c9a4

Please sign in to comment.