fix(CapacityInfo): fix not found link to capacities (#116)

* fix(CapacityInfo): fix not found link to capacities * fix(MatchingTable): fix columns * feat(PeersTable): add status * Update src/pages/offer/PeersTable.tsx Co-authored-by: shamsartem <[email protected]> * refactor(PeersTable): refactor code --------- Co-authored-by: shamsartem <[email protected]>
fluencelabs · Nov 11, 2024 · a5ef6aa · a5ef6aa
1 parent e42c9a4
commit a5ef6aa
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 17 deletions.
diff --git a/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch b/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch
@@ -0,0 +1,74 @@
+diff --git a/dist/dealExplorerClient/indexerClient/queries/offers-query.generated.d.ts b/dist/dealExplorerClient/indexerClient/queries/offers-query.generated.d.ts
+index 5a974d70fe6b15bfc4e85ee3c762a0fd92bbeb7f..d5ad11db1e996007187273f5ff2fafff3c39fe2b 100644
+--- a/dist/dealExplorerClient/indexerClient/queries/offers-query.generated.d.ts
++++ b/dist/dealExplorerClient/indexerClient/queries/offers-query.generated.d.ts
+@@ -78,6 +78,7 @@ export type OfferQueryQuery = {
+             currentCapacityCommitment?: {
+                 __typename?: 'CapacityCommitment';
+                 id: string;
++                status?: Types.CapacityCommitmentStatus | null
+             } | null;
+             offer: {
+                 __typename?: 'Offer';
+@@ -188,6 +189,7 @@ export type BasicPeerFragment = {
+     currentCapacityCommitment?: {
+         __typename?: 'CapacityCommitment';
+         id: string;
++        status?: Types.CapacityCommitmentStatus | null
+     } | null;
+ };
+ export type ProviderBasicIdCapacityCommitmentFragment = {
+diff --git a/dist/dealExplorerClient/indexerClient/queries/offers-query.generated.js b/dist/dealExplorerClient/indexerClient/queries/offers-query.generated.js
+index cec13c008cbf9ef529148ac847297c336af88b3a..28a8fd8328169488b1bc7ba08e3f8a527927fa35 100644
+--- a/dist/dealExplorerClient/indexerClient/queries/offers-query.generated.js
++++ b/dist/dealExplorerClient/indexerClient/queries/offers-query.generated.js
+@@ -8,6 +8,7 @@ export const EffectorBasicFragmentDoc = gql `
+ export const ProviderBasicIdCapacityCommitmentFragmentDoc = gql `
+     fragment ProviderBasicIdCapacityCommitment on CapacityCommitment {
+   id
++  status
+ }
+     `;
+ export const BasicOfferFragmentDoc = gql `
+diff --git a/dist/dealExplorerClient/serializers/schemes.js b/dist/dealExplorerClient/serializers/schemes.js
+index 12edcf46ca3256b44e2fe5b3a1a76eed5b5a94e7..395d1afce8b26f050faeec2b0f441e47582b10e2 100644
+--- a/dist/dealExplorerClient/serializers/schemes.js
++++ b/dist/dealExplorerClient/serializers/schemes.js
+@@ -3,6 +3,7 @@ import { calculateTimestamp } from "../utils.js";
+ import { FLTToken } from "../constants.js";
+ import { serializeEffectors, serializeContractRateToPercentage, } from "../../utils/indexerClient/serializers.js";
+ import { peerIdContractHexToBase58 } from "../../utils/serializers/fluence.js";
++import { deserializeStatus } from "./stakerEncoders.js";
+ export const BIG_INT_ZERO = BigInt(0);
+ export function serializeOfferShort(offer, peersInActiveCCCount) {
+     return {
+@@ -119,7 +120,12 @@ export function serializePeers(peers) {
+         id: peerIdContractHexToBase58(peer.id),
+         offerId: peer.offer.id,
+         computeUnits: serializeComputeUnitsFromBasic(peer.computeUnits ?? []),
+-        currentCapacityCommitmentId: peer.currentCapacityCommitment?.id,
++        currentCapacityCommitment: peer.currentCapacityCommitment
++        ? {
++            ...peer.currentCapacityCommitment,
++            status: deserializeStatus(peer.currentCapacityCommitment.status),
++          }
++        : null,
+     }));
+ }
+ export function serializeDealsShort(deal, fromRpcForDealShort) {
+diff --git a/dist/dealExplorerClient/types/schemes.d.ts b/dist/dealExplorerClient/types/schemes.d.ts
+index 5ad681a0c462c860fe8e3ac53176e657129a93c1..1a2b2c320a321bcedc4665e4b02e0986ff89c352 100644
+--- a/dist/dealExplorerClient/types/schemes.d.ts
++++ b/dist/dealExplorerClient/types/schemes.d.ts
+@@ -116,7 +116,10 @@ export interface Peer {
+     id: string;
+     offerId: string;
+     computeUnits: ComputeUnit[];
+-    currentCapacityCommitmentId: string | undefined;
++    currentCapacityCommitment?: {
++        id: string;
++        status: CapacityCommitmentStatus;
++    } | null;
+ }
+ export interface ComputeUnit {
+     id: string;
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fluencelabs/deal-ts-clients": "0.22.3",
+    "@fluencelabs/deal-ts-clients": "patch:@fluencelabs/deal-ts-clients@npm%3A0.22.3#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",

diff --git a/src/pages/capacity/CapacityInfo.tsx b/src/pages/capacity/CapacityInfo.tsx
@@ -87,7 +87,7 @@ export const CapacityInfo: React.FC = () => {
     return (
       <NotFound
         message="Not found capacity"
-        link={ROUTES.deals}
+        link={ROUTES.capacities}
         linkText="Go to capacities page"
       />
     )

diff --git a/src/pages/deal/MatchingTable.tsx b/src/pages/deal/MatchingTable.tsx
@@ -19,7 +19,6 @@ import { useApiQuery } from '../../hooks'
 import { formatHexData } from '../../utils/helpers'
 
 const template = [
-  '20px',
   'minmax(10px, 1fr)',
   'minmax(10px, 1fr)',
   'minmax(10px, 1fr)',
@@ -46,10 +45,9 @@ export const MatchingTable: React.FC<MatchingTableProps> = ({ dealId }) => {
     <>
       <ScrollableTable>
         <TableHeader template={template}>
-          <TableColumnTitle>#</TableColumnTitle>
+          <TableColumnTitle>Worker Id</TableColumnTitle>
           <TableColumnTitle>Provider Id</TableColumnTitle>
           <TableColumnTitle>Compute Unit</TableColumnTitle>
-          <TableColumnTitle>Worker Id</TableColumnTitle>
           <TableColumnTitle>Worker Status</TableColumnTitle>
         </TableHeader>
         <TableBody

diff --git a/src/pages/offer/PeersTable.tsx b/src/pages/offer/PeersTable.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Peer } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes'
 
 import { A } from '../../components/A'
+import { CapacityStatus } from '../../components/CapacityStatus'
 import {
   Cell,
   Row,
@@ -16,7 +17,13 @@ import {
 import { Text } from '../../components/Text'
 import { formatHexData } from '../../utils/helpers'
 
-const template = ['20px', 'minmax(10px, 1fr)', '100px', 'minmax(10px, 1fr)']
+const template = [
+  '20px',
+  'minmax(10px, 1fr)',
+  'minmax(10px, 1fr)',
+  '100px',
+  '80px',
+]
 
 interface PeersTableProps {
   peers: Peer[]
@@ -29,8 +36,9 @@ export const PeersTable: React.FC<PeersTableProps> = ({ peers }) => {
         <TableHeader template={template}>
           <TableColumnTitle>#</TableColumnTitle>
           <TableColumnTitle>Peer id</TableColumnTitle>
-          <TableColumnTitle>Compute units</TableColumnTitle>
           <TableColumnTitle>Current Capacity Commitment</TableColumnTitle>
+          <TableColumnTitle>Compute units</TableColumnTitle>
+          <TableColumnTitle>Status</TableColumnTitle>
         </TableHeader>
         <TableBody>
           {peers.map((peer, index) => (
@@ -53,26 +61,31 @@ const PeerRow: React.FC<PeerRowProps> = ({ index, peer }) => {
       <RowHeader>
         <RowTrigger>
           <Row template={template}>
-            {/* # */}
             <Cell>
               <Text size={12}>{index + 1}</Text>
             </Cell>
-            {/* Peer ID */}
             <Cell>
               <A href={`/peer/${peer.id}`}>{peer.id}</A>
             </Cell>
-            {/* Compute units */}
+            <Cell>
+              {peer.currentCapacityCommitment ? (
+                <A href={`/capacity/${peer.currentCapacityCommitment.id}`}>
+                  {formatHexData(peer.currentCapacityCommitment.id, 15, 15)}
+                </A>
+              ) : (
+                '-'
+              )}
+            </Cell>
             <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>
+              {peer.currentCapacityCommitment?.status ? (
+                <CapacityStatus
+                  status={peer.currentCapacityCommitment.status}
+                />
               ) : (
-                <Text size={12}>-</Text>
+                '-'
               )}
             </Cell>
           </Row>

diff --git a/yarn.lock b/yarn.lock
@@ -932,6 +932,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fluencelabs/deal-ts-clients@patch:@fluencelabs/deal-ts-clients@npm%3A0.22.3#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch":
+  version: 0.22.3
+  resolution: "@fluencelabs/deal-ts-clients@patch:@fluencelabs/deal-ts-clients@npm%3A0.22.3#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch::version=0.22.3&hash=1ab8ee"
+  dependencies:
+    "@graphql-typed-document-node/core": "npm:^3.2.0"
+    debug: "npm:^4.3.4"
+    dotenv: "npm:^16.3.1"
+    ethers: "npm:6.7.1"
+    graphql: "npm:^16.8.1"
+    graphql-request: "npm:^6.1.0"
+    graphql-scalars: "npm:^1.22.4"
+    graphql-tag: "npm:^2.12.6"
+    ipfs-http-client: "npm:^60.0.1"
+    multiformats: "npm:^13.0.1"
+  checksum: 10c0/fb40b9001e22de708e217c9c07ee110b9abdf2a667b397c5a0175c19c7711e587888fed1762a01a7262d64703b4f60a39c239cc1331142b05640bb894edf27c8
+  languageName: node
+  linkType: hard
+
 "@graphql-typed-document-node/core@npm:^3.2.0":
   version: 3.2.0
   resolution: "@graphql-typed-document-node/core@npm:3.2.0"
@@ -6470,7 +6488,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.3"
+    "@fluencelabs/deal-ts-clients": "patch:@fluencelabs/deal-ts-clients@npm%3A0.22.3#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch"
     "@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"