Reduce get the total cost function calls (#4093)

* Reduce get the total cost function calls

* revert changes

* Use gridproxy consumption endpoint

* Calculate the total cost after loading contracts

* Check the totalCost condition

* Fix gettotalCost stuck loading

* - Revert custom events
- Call get total cost function only from inside load contracts function

Author: samaradel

packages/gridproxy_client/src/modules/twins.ts

@@ -9,6 +9,10 @@ export interface Twin {
   publicKey: string;
 }
 
+export interface Consumption {
+  last_hour_consumption: number;
+  overall_consumption: number;
+}
 export class TwinsClient extends AbstractClient<TwinsBuilder, TwinsQuery> {
   constructor(uri: string) {
     super({
@@ -21,4 +25,9 @@ export class TwinsClient extends AbstractClient<TwinsBuilder, TwinsQuery> {
     const res = await this.builder(queries).build("/twins");
     return resolvePaginator<Twin[]>(res);
   }
+
+  public async getConsumption(twinId: number): Promise<Consumption> {
+    const res = await this.builder().build(`/twins/${twinId}/consumption`);
+    return res.json();
+  }
 }

packages/playground/src/weblets/tf_contracts_list.vue

@@ -79,7 +79,7 @@
       </v-row>
     </template>
     <template #text>
-      <strong v-if="totalCost != undefined" class="text-primary">
+      <strong v-if="totalCost !== undefined" class="text-primary">
         <input-tooltip
           inline
           :alignCenter="true"
@@ -88,7 +88,7 @@
           {{ totalCost }} TFT/hour ≈ {{ totalCost === 0 ? 0 : (totalCost * 24 * 30).toFixed(3) }} TFT/month
         </input-tooltip>
       </strong>
-      <small v-else> loading total cost... </small>
+      <small v-else> loading total cost...</small>
     </template>
   </v-card>
   <!-- locked amount Dialog -->
@@ -223,7 +223,7 @@
           "
           @update:sort="
             sort => {
-              loadContracts(table.type);
+              loadContracts(table.type, { sort });
             }
           "
         />
@@ -236,7 +236,6 @@
 import type { ContractsOverdue, GridClient } from "@threefold/grid_client";
 import { type Contract, ContractState, NodeStatus, SortByContracts, SortOrder } from "@threefold/gridproxy_client";
 import { DeploymentKeyDeletionError } from "@threefold/types";
-import { Decimal } from "decimal.js";
 import { computed, defineComponent, onMounted, type Ref, ref } from "vue";
 
 import ContractsTable from "@/components/contracts_list/contracts_table.vue";
@@ -293,8 +292,9 @@ const nodeIDs = computed(() => {
 });
 // To avoid multiple requests
 const cachedNodeIDs = ref<number[]>([]);
-const sortOptions: { key: string; order: "asc" | "desc" }[] = [{ key: "created_at", order: "desc" }];
-onMounted(loadContracts);
+onMounted(() => {
+  loadContracts();
+});
 
 async function _normalizeContracts(
   contracts: Contract[],
@@ -347,9 +347,11 @@ async function loadContractsByType(
   }
 }
 
-async function loadContracts(type?: ContractType) {
-  lockedContracts.value = undefined;
-  totalCost.value = undefined;
+async function loadContracts(type?: ContractType, options?: { sort: { key: string; order: "asc" | "desc" }[] }) {
+  if (!type) {
+    lockedContracts.value = undefined;
+    totalCost.value = undefined;
+  }
   totalCostUSD.value = undefined;
   loadingErrorMessage.value = undefined;
   loadingTablesMessage.value = undefined;
@@ -361,20 +363,20 @@ async function loadContracts(type?: ContractType) {
     if (type) {
       switch (type) {
         case ContractType.Name:
-          await loadContractsByType(ContractType.Name, nameContracts, { sort: sortOptions });
+          await loadContractsByType(ContractType.Name, nameContracts, options);
           break;
         case ContractType.Node:
-          await loadContractsByType(ContractType.Node, nodeContracts, { sort: sortOptions });
+          await loadContractsByType(ContractType.Node, nodeContracts, options);
           break;
         case ContractType.Rent:
-          await loadContractsByType(ContractType.Rent, rentContracts, { sort: sortOptions });
+          await loadContractsByType(ContractType.Rent, rentContracts, options);
           break;
       }
     } else {
       await Promise.all([
-        loadContractsByType(ContractType.Name, nameContracts, { sort: sortOptions }),
-        loadContractsByType(ContractType.Node, nodeContracts, { sort: sortOptions }),
-        loadContractsByType(ContractType.Rent, rentContracts, { sort: sortOptions }),
+        loadContractsByType(ContractType.Name, nameContracts, options),
+        loadContractsByType(ContractType.Node, nodeContracts, options),
+        loadContractsByType(ContractType.Rent, rentContracts, options),
       ]);
     }
     const failedContractsLength = failedContracts.value.length;
@@ -384,9 +386,7 @@ async function loadContracts(type?: ContractType) {
       }: ${failedContracts.value.join(", ")}.`;
     await getContractsLockDetails();
     contracts.value = [...nodeContracts.value, ...nameContracts.value, ...rentContracts.value];
-
-    // Update the total cost of the contracts.
-    await getTotalCost();
+    if (!type) await getTotalCost();
     // Get the node info e.g. node status.
     nodeInfo.value = await getNodeInfo(nodeIDs.value, cachedNodeIDs.value);
     cachedNodeIDs.value.push(...nodeIDs.value);
@@ -465,12 +465,16 @@ const nodeStatus = computed(() => {
 // Calculate the total cost of contracts
 async function getTotalCost() {
   totalCost.value = 0;
-  for (const contract of contracts.value) {
-    totalCost.value = +new Decimal(totalCost.value).add(contract.consumption?.valueOf() || 0);
+
+  try {
+    const res = await gridProxyClient.twins.getConsumption(profileManager.profile!.twinId);
+    totalCost.value = +res.last_hour_consumption.toFixed(3);
+    const tftPrice = await queryClient.tftPrice.get();
+    totalCostUSD.value = totalCost.value * (tftPrice / 1000);
+  } catch (error: any) {
+    loadingErrorMessage.value = `Error calculating total cost: ${error.message}`;
+    createCustomToast(loadingErrorMessage.value, ToastType.danger, {});
   }
-  totalCost.value = +totalCost.value.toFixed(3);
-  const TFTInUSD = await queryClient.tftPrice.get();
-  totalCostUSD.value = totalCost.value * (TFTInUSD / 1000);
 }
 
 // Handle updates when contracts are deleted
@@ -495,9 +499,7 @@ async function onDeletedContracts(_contracts: NormalizedContract[]) {
     loadContracts();
     loadingTablesMessage.value = undefined;
   }, 30000);
-  await getTotalCost();
   contracts.value = [...rentContracts.value, ...nameContracts.value, ...nodeContracts.value];
-  totalCost.value = undefined;
 }
 async function getContractsLockDetails() {
   lockedContracts.value = await grid.contracts.getTotalOverdue();