web/multinode: operator entity extended with nodeID and undistributed amount

Change-Id: I683e53bc4c669728caae3521597a5fd2d6372921

web/multinode/src/api/operators.ts

@@ -36,7 +36,13 @@ export class Operators extends APIClient {
         let operators: Operator[] = [];
         if (operatorsPageJson.operators) {
             operators = operatorsPageJson.operators.map(
-                operator => new Operator(operator.email, operator.wallet, operator.walletFeatures),
+                operator => new Operator(
+                    operator.nodeId,
+                    operator.email,
+                    operator.wallet,
+                    operator.walletFeatures,
+                    operator.undistributed,
+                ),
             );
         }
 

web/multinode/src/app/components/wallets/tables/walletsSummary/WalletsTable.vue

@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <base-table >
+    <base-table>
         <thead slot="head">
             <tr>
                 <th class="align-left">WALLET ADDRESS</th>
@@ -11,8 +11,7 @@
             </tr>
         </thead>
         <tbody slot="body">
-            <!-- TODO: add node id as a v-key in future -->
-            <tr v-for="operator in operators" class="table-item">
+            <tr v-for="operator in operators" :key="operator.nodeId" class="table-item">
                 <th class="align-left">
                     <div class="column">
                         <p class="table-item__wallet" @click.prevent="() => redirectToWalletDetailsPage(operator.wallet)">
@@ -35,8 +34,7 @@
                         </div>
                     </div>
                 </th>
-                <!-- TODO: add node id to operators to show distributed amount, meanwhile it will be hardcoded -->
-                <th>N/A</th>
+                <th>{{ operator.undistributed | centsToDollars }}</th>
                 <th class="align-left">
                     <div class="column">
                         <v-link :uri="operator.etherscanLink" label="View on Etherscan" />

web/multinode/src/operators/index.ts

@@ -5,13 +5,15 @@ import { Operators as OperatorsClient } from '@/api/operators';
 import { Cursor, Page } from '@/private/pagination';
 
 /**
- *Operator contains contains SNO payouts contact details.
+ *Operator contains contains SNO payouts contact details and amount of undistributed payouts.
  */
 export class Operator {
     public constructor(
+        public nodeId: string,
         public email: string,
         public wallet: string,
         public walletFeatures: string[],
+        public undistributed: number,
     ) {}
 
     /**