reload target node on reserve/unreserve (#3897)

* Feature[NodeDetailsCard]: - add nodeId to FilterOptions and getNodeUrlQuery to be able to filter nodes based on its id - refactor reserveActionBtn to update the node status after action and emit the changes to parent components * Chore: cleanup debug code * Feature[AutoNodeSelector]: reset the selected node after action this should select the rented node after rent action and check if the node is valid after unreserve action
threefoldtech · Feb 18, 2025 · fcc000b · fcc000b
1 parent ef8cde2
commit fcc000b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 39 deletions.
diff --git a/packages/grid_client/src/modules/models.ts b/packages/grid_client/src/modules/models.ts
@@ -624,6 +624,7 @@ class FilterOptions {
   @Expose() @IsOptional() @IsInt({ each: true }) @Min(1, { each: true }) nodeExclude?: number[];
   @Expose() @IsOptional() @IsInt({ each: true }) @Min(1, { each: true }) farmIds?: number[];
   @Expose() @IsOptional() @IsInt() @Min(1) farmId?: number;
+  @Expose() @IsOptional() @IsInt() @Min(1) nodeId?: number;
   @Expose() @IsOptional() @IsString() farmName?: string;
   @Expose() @IsOptional() @IsString() country?: string;
   @Expose() @IsOptional() @IsString() city?: string;

diff --git a/packages/grid_client/src/primitives/nodes.ts b/packages/grid_client/src/primitives/nodes.ts
@@ -466,6 +466,7 @@ class Nodes {
       healthy: options.healthy,
       sort_by: SortBy.FreeCRU,
       sort_order: SortOrder.Desc,
+      node_id: options.nodeId,
       rentable_or_rented_by: options.rentableOrRentedBy,
       features: options.features,
     };

diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -43,7 +43,6 @@
 
             <VAlert v-else type="error" text="No Nodes were found!" />
           </VContainer>
-
           <div
             ref="nodesContainer"
             :style="{
@@ -61,6 +60,7 @@
                   v-model:node="loadedNodes[index]"
                   :selected="!validFilters || filtersUpdated ? false : $props.modelValue === node"
                   selectable
+                  @update:node="updateNode($event as NodeInfo)"
                   @node:select="bindModelValueAndValidate"
                   :status="
                     $props.modelValue === node
@@ -218,7 +218,10 @@ export default {
       },
       default: [],
     });
-
+    function updateNode(node: NodeInfo) {
+      _loadedNodes.value = loadedNodes.value.map(n => (n.nodeId === node.nodeId ? node : n));
+      _setValidNode(node.nodeId);
+    }
     async function _setValidNode(oldNodeId?: number) {
       const node = await selectValidNode(
         gridStore,
@@ -386,7 +389,7 @@ export default {
       loadingError,
       filtersUpdated,
       nodeInputValidateTask,
-
+      updateNode,
       touched,
       bindModelValueAndValidate,
       bindStatus,

diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -284,7 +284,7 @@
           v-if="node?.dedicated && node?.status !== 'down'"
           class="ml-4"
           :node="(node as GridNode)"
-          @updateTable="onReserveChange"
+          @update:node="$emit('update:node', $event as NodeInfo)"
         />
       </div>
     </template>
@@ -506,25 +506,6 @@ export default {
       }
     }
 
-    function onReserveChange() {
-      if (!props.node) {
-        return;
-      }
-
-      const n = { ...props.node } as NodeInfo | GridNode;
-      const gotReserved = n.rentedByTwinId === 0;
-
-      if (gotReserved) {
-        n.rentedByTwinId = profileManager.profile!.twinId;
-        n.rented = true;
-      } else {
-        n.rentedByTwinId = 0;
-        n.rented = false;
-      }
-      n.rentable = !n.rented;
-      ctx.emit("update:node", n);
-    }
-
     function getNodeStatusColor(status: string): string {
       if (status === "up") {
         return "success";
@@ -635,7 +616,6 @@ export default {
       capitalize,
       formatResourceSize,
       formatSpeed,
-      onReserveChange,
       getNodeStatusColor,
       validateRentContract,
       discountTableItems,

diff --git a/packages/playground/src/dashboard/components/reserve_action_btn.vue b/packages/playground/src/dashboard/components/reserve_action_btn.vue
@@ -99,7 +99,13 @@ export default {
     function removeReserve() {
       openUnreserveDialog.value = true;
     }
-
+    async function postActionHandler() {
+      notifyDelaying();
+      disableButton.value = true;
+      await new Promise(resolve => setTimeout(resolve, 20000));
+      const node = await gridStore.client.capacity.filterNodes({ nodeId: +props.node.nodeId });
+      emit("update:node", node[0]);
+    }
     async function unReserveNode() {
       loadingUnreserveNode.value = true;
       try {
@@ -118,13 +124,7 @@ export default {
           loadingUnreserveNode.value = false;
           openUnreserveDialog.value = false;
           loadingUnreserveBtn.value = true;
-          notifyDelaying();
-          disableButton.value = true;
-          setTimeout(() => {
-            disableButton.value = false;
-            loadingUnreserveBtn.value = false;
-            emit("updateTable");
-          }, 20000);
+          await postActionHandler();
         }
       } catch (e) {
         if (e instanceof InsufficientBalanceError) {
@@ -135,6 +135,9 @@ export default {
         }
         loadingUnreserveNode.value = false;
         openUnreserveDialog.value = false;
+      } finally {
+        disableButton.value = false;
+        loadingUnreserveNode.value = false;
       }
     }
 
@@ -148,13 +151,7 @@ export default {
           if (props.node.status === "standby") {
             createCustomToast(`It might take a while for node ${props.node.nodeId} status to be up`, ToastType.warning);
           }
-          notifyDelaying();
-          disableButton.value = true;
-          setTimeout(() => {
-            disableButton.value = false;
-            loadingReserveNode.value = false;
-            emit("updateTable");
-          }, 20000);
+          await postActionHandler();
         } else {
           createCustomToast("Please Login first to continue.", ToastType.danger);
         }
@@ -165,6 +162,8 @@ export default {
           console.log(e);
           createCustomToast("Failed to create rent contract.", ToastType.danger);
         }
+      } finally {
+        disableButton.value = false;
         loadingReserveNode.value = false;
       }
     }