From 72a3b823338ce5179e8055d0507c661804ae9f3e Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 26 Feb 2025 19:56:49 +0200
Subject: [PATCH 01/10] Add Server side table to public ip table

---
 .../dashboard/components/public_ips_table.vue | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 4c26fc94a9..95237ade3a 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -1,9 +1,12 @@
 <template>
   <div>
-    <ListTable
+    <v-data-table-server
+      v-model="selectedItems"
       :headers="headers"
       :items="publicIps"
+      :items-length="publicIps.length"
       :loading="loading"
+      @update:options="getFarmByID(farmId)"
       :items-per-page-options="[
         { value: 5, title: '5' },
         { value: 10, title: '10' },
@@ -12,7 +15,8 @@
       ]"
       no-data-text="No IPs added on this farm"
       :deleting="isRemoving"
-      v-model="selectedItems"
+      show-select
+      return-object
     >
       <template v-slot:top>
         <v-alert>
@@ -29,21 +33,14 @@
       <template #[`item.contractId`]="{ item }">
         {{ item.contractId ?? "-" }}
       </template>
-    </ListTable>
+    </v-data-table-server>
+
     <div v-if="publicIps.length > 0" class="d-flex align-end justify-end">
-      <v-btn
-        class="ma-3"
-        color="error"
-        prepend-icon="mdi-delete"
-        :disabled="selectedItems.length === 0 || isRemoving"
-        @click="showDialogue = true"
-      >
-        Delete
-      </v-btn>
+      <v-btn class="my-3" color="error" prepend-icon="mdi-delete" @click="showDialogue = true"> Delete </v-btn>
     </div>
     <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
       <v-card>
-        <v-card-title class="text-subtitle-1">
+        <v-card-title class="bg-primary text-subtitle-1">
           <strong>Delete the following IPs?</strong>
         </v-card-title>
         <v-card-text>
@@ -58,7 +55,7 @@
             text="Delete"
             :loading="isRemoving"
             color="error"
-            :disabled="isRemoving"
+            :disabled="selectedItems.length === 0 || isRemoving"
             @click="removeFarmIps"
           ></v-btn>
         </v-card-actions>
@@ -72,14 +69,12 @@ import type { RemoveFarmIPModel } from "@threefold/grid_client";
 import type { PublicIp } from "@threefold/tfchain_client";
 import { onMounted, ref, watch } from "vue";
 
-import ListTable from "@/components/list_table.vue";
 import { useGrid } from "@/stores";
 import { IPType } from "@/utils/types";
 
 import { createCustomToast, ToastType } from "../../utils/custom_toast";
 export default {
   name: "PublicIPsTable",
-  components: { ListTable },
   props: {
     farmId: {
       type: Number,
@@ -175,6 +170,7 @@ export default {
       removeFarmIps,
       selectedItems,
       loadingIps,
+      getFarmByID,
     };
   },
 };

From 6dbd2908f1d0a1b4683d60cb55459f232335a84f Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 2 Mar 2025 22:47:09 +0200
Subject: [PATCH 02/10] Update dashboard with public ips comes from gridproxy

---
 .../src/builders/public_api.ts                |  1 +
 .../src/builders/public_ips.ts                | 54 +++++++++++++++++++
 .../gridproxy_client/src/modules/client.ts    |  4 +-
 .../src/modules/public_api.ts                 |  1 +
 .../src/modules/public_ips.ts                 | 35 ++++++++++++
 .../dashboard/components/public_ips_table.vue | 39 ++++++++------
 6 files changed, 118 insertions(+), 16 deletions(-)
 create mode 100644 packages/gridproxy_client/src/builders/public_ips.ts
 create mode 100644 packages/gridproxy_client/src/modules/public_ips.ts

diff --git a/packages/gridproxy_client/src/builders/public_api.ts b/packages/gridproxy_client/src/builders/public_api.ts
index 8e28b178a8..cbfff937eb 100644
--- a/packages/gridproxy_client/src/builders/public_api.ts
+++ b/packages/gridproxy_client/src/builders/public_api.ts
@@ -5,3 +5,4 @@ export * from "./gateways";
 export * from "./nodes";
 export * from "./stats";
 export * from "./twins";
+export * from "./public_ips";
diff --git a/packages/gridproxy_client/src/builders/public_ips.ts b/packages/gridproxy_client/src/builders/public_ips.ts
new file mode 100644
index 0000000000..33ece59fee
--- /dev/null
+++ b/packages/gridproxy_client/src/builders/public_ips.ts
@@ -0,0 +1,54 @@
+import { assertBoolean, assertId, assertNatural, assertString } from "../utils";
+import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
+import { SortBy, SortOrder } from "./nodes";
+
+export interface PublicIpQuery {
+  page: number;
+  size: number;
+  retCount: boolean;
+  randomize: boolean;
+  sortBy: SortBy;
+  sortOrder: SortOrder;
+  farmIds: number;
+  ip: string;
+  gateway: string;
+  free: boolean;
+}
+
+const PUBLICIPS_MAPPER: BuilderMapper<PublicIpQuery> = {
+  page: "page",
+  size: "size",
+  retCount: "ret_count",
+  randomize: "randomize",
+  sortBy: "sort_by",
+  sortOrder: "sort_order",
+  farmIds: "farm_ids",
+  ip: "ip",
+  gateway: "gateway",
+  free: "free",
+};
+
+const PUBLICIPS_VALIDATOR: BuilderValidator<PublicIpQuery> = {
+  page: assertNatural,
+  size: assertNatural,
+  retCount: assertBoolean,
+  randomize: assertBoolean,
+  sortBy: assertString,
+  sortOrder: assertString,
+  farmIds: assertId,
+  ip: assertString,
+  gateway: assertString,
+  free: assertBoolean,
+};
+
+export class PublicIpBuilder extends AbstractBuilder<PublicIpQuery> {
+  constructor(public uri: string, queries: Partial<PublicIpQuery> = {}) {
+    super({
+      mapper: PUBLICIPS_MAPPER,
+      validator: PUBLICIPS_VALIDATOR,
+      queries,
+    });
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface PublicIpBuilder extends BuilderMethods<PublicIpQuery, PublicIpBuilder> {}
diff --git a/packages/gridproxy_client/src/modules/client.ts b/packages/gridproxy_client/src/modules/client.ts
index 2e702b09c6..0a43deba9f 100644
--- a/packages/gridproxy_client/src/modules/client.ts
+++ b/packages/gridproxy_client/src/modules/client.ts
@@ -2,9 +2,9 @@ import { ContractsClient } from "./contracts";
 import { FarmsClient } from "./farms";
 import { GatewaysClient } from "./gateways";
 import { NodesClient } from "./nodes";
+import { PublicIpsClient } from "./public_ips";
 import { StatsClient } from "./stats";
 import { TwinsClient } from "./twins";
-
 export default class GridProxyClient {
   private readonly __uri: string;
 
@@ -20,6 +20,7 @@ export default class GridProxyClient {
     this.twins = new TwinsClient(this.__uri);
     this.nodes = new NodesClient(this.__uri, this.farms, this.twins);
     this.stats = new StatsClient(this.__uri);
+    this.publicIps = new PublicIpsClient(this.__uri);
   }
 
   public contracts: ContractsClient;
@@ -28,4 +29,5 @@ export default class GridProxyClient {
   public nodes: NodesClient;
   public stats: StatsClient;
   public twins: TwinsClient;
+  public publicIps: PublicIpsClient;
 }
diff --git a/packages/gridproxy_client/src/modules/public_api.ts b/packages/gridproxy_client/src/modules/public_api.ts
index b886b8807c..b8abb7a52b 100644
--- a/packages/gridproxy_client/src/modules/public_api.ts
+++ b/packages/gridproxy_client/src/modules/public_api.ts
@@ -8,3 +8,4 @@ export * from "./gateways";
 export * from "./nodes";
 export * from "./stats";
 export * from "./twins";
+export * from "./public_ips";
diff --git a/packages/gridproxy_client/src/modules/public_ips.ts b/packages/gridproxy_client/src/modules/public_ips.ts
new file mode 100644
index 0000000000..8c01a36931
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/public_ips.ts
@@ -0,0 +1,35 @@
+import type { Pagination } from "../builders/abstract_builder";
+import { PublicIpBuilder, PublicIpQuery } from "../builders/public_api";
+import { resolvePaginator } from "../utils";
+import { AbstractClient } from "./abstract_client";
+import { PublicIp } from "./farms";
+
+export class PublicIpsClient extends AbstractClient<PublicIpBuilder, PublicIpQuery> {
+  constructor(uri: string) {
+    super({
+      uri,
+      Builder: PublicIpBuilder,
+    });
+  }
+
+  public async list(queries: Partial<PublicIpQuery> = {}) {
+    const res = await this.builder(queries).build("/public_ips");
+    return resolvePaginator<PublicIp[]>(res);
+  }
+
+  public async listAll(queries: Partial<PublicIpQuery> = {}) {
+    const { count } = await this.list({
+      ...queries,
+      size: 50,
+      page: 1,
+      retCount: true,
+    });
+    const promises: Promise<Pagination<PublicIp[]>>[] = [];
+    const pages = Math.ceil(count! / 50);
+    for (let i = 0; i < pages; i++) {
+      promises.push(this.list({ ...queries, size: 50, page: i + 1 }));
+    }
+    const publicIps = await Promise.all(promises);
+    return publicIps.map(node => node.data).flat(1);
+  }
+}
diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 95237ade3a..c27d1d4e6f 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -6,7 +6,7 @@
       :items="publicIps"
       :items-length="publicIps.length"
       :loading="loading"
-      @update:options="getFarmByID(farmId)"
+      @update:options="getFarmPublicIp"
       :items-per-page-options="[
         { value: 5, title: '5' },
         { value: 10, title: '10' },
@@ -55,7 +55,7 @@
             text="Delete"
             :loading="isRemoving"
             color="error"
-            :disabled="selectedItems.length === 0 || isRemoving"
+            :disabled="isRemoving"
             @click="removeFarmIps"
           ></v-btn>
         </v-card-actions>
@@ -66,9 +66,10 @@
 
 <script lang="ts">
 import type { RemoveFarmIPModel } from "@threefold/grid_client";
-import type { PublicIp } from "@threefold/tfchain_client";
-import { onMounted, ref, watch } from "vue";
+import { type PublicIp } from "@threefold/gridproxy_client";
+import { ref, watch } from "vue";
 
+import { gridProxyClient } from "@/clients";
 import { useGrid } from "@/stores";
 import { IPType } from "@/utils/types";
 
@@ -104,6 +105,7 @@ export default {
       },
     ] as any;
     const publicIps = ref<PublicIp[]>([]);
+    const publicIpsCount = ref();
     const loading = ref(false);
     const loadingIps = ref(false);
     const showDialogue = ref(false);
@@ -114,21 +116,28 @@ export default {
     const isRemoving = ref(false);
     const selectedItems = ref<any[]>([]);
     const items = ref<RemoveFarmIPModel[]>([]);
+    const page = ref<number>(1);
+    const pageSize = ref(10);
 
-    onMounted(async () => {
-      await getFarmByID(props.farmId);
-    });
-
-    async function getFarmByID(id: number) {
+    async function getFarmPublicIp() {
       loadingIps.value = true;
       try {
-        const farm = await gridStore.grid.farms.getFarmByID({ id });
-        publicIps.value = farm.publicIps as unknown as PublicIp[];
+        const { data, count } = await gridProxyClient.publicIps.list({
+          retCount: true,
+          page: page.value,
+          size: pageSize.value,
+          free: true,
+          farmIds: props.farmId,
+        });
+        publicIps.value = data as PublicIp[];
+        publicIpsCount.value = count || publicIps.value.length;
       } catch (error) {
         createCustomToast(`Failed to get public IPs! ${error}`, ToastType.danger);
+      } finally {
+        loadingIps.value = false;
       }
-      loadingIps.value = false;
     }
+
     async function removeFarmIps() {
       try {
         isRemoving.value = true;
@@ -138,7 +147,7 @@ export default {
         }));
         await gridStore.grid.farms.removeFarmIps(items.value);
         createCustomToast("IP is deleted successfully!", ToastType.success);
-        await getFarmByID(props.farmId);
+        await getFarmPublicIp();
       } catch (error) {
         console.log(error);
         createCustomToast("Failed to delete IP!", ToastType.danger);
@@ -151,7 +160,7 @@ export default {
     watch(
       () => props.refreshPublicIPs,
       () => {
-        getFarmByID(props.farmId);
+        getFarmPublicIp();
       },
       { deep: true },
     );
@@ -170,7 +179,7 @@ export default {
       removeFarmIps,
       selectedItems,
       loadingIps,
-      getFarmByID,
+      getFarmPublicIp,
     };
   },
 };

From b8eb83deb8a02c316f70b601712c364077b2895a Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 2 Mar 2025 22:53:37 +0200
Subject: [PATCH 03/10] Fix contract_id in the public ips table

---
 .../playground/src/dashboard/components/public_ips_table.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index c27d1d4e6f..694f6a1003 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -31,7 +31,7 @@
       </template>
 
       <template #[`item.contractId`]="{ item }">
-        {{ item.contractId ?? "-" }}
+        {{ item.contract_id ?? "-" }}
       </template>
     </v-data-table-server>
 

From ba97c0f182370abe3819d184a56dc7b98ad394aa Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 2 Mar 2025 22:57:59 +0200
Subject: [PATCH 04/10] Fix type

---
 .../playground/src/dashboard/components/public_ips_table.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 694f6a1003..fcdf1a6856 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -66,7 +66,7 @@
 
 <script lang="ts">
 import type { RemoveFarmIPModel } from "@threefold/grid_client";
-import { type PublicIp } from "@threefold/gridproxy_client";
+import type { PublicIp } from "@threefold/gridproxy_client";
 import { ref, watch } from "vue";
 
 import { gridProxyClient } from "@/clients";

From f96a0c61cc830ff9e71c9e23dd6ce86b0abae090 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 5 Mar 2025 14:09:41 +0200
Subject: [PATCH 05/10] Fix pagination

---
 .../src/dashboard/components/public_ips_table.vue          | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index fcdf1a6856..27f60e8b08 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -4,8 +4,9 @@
       v-model="selectedItems"
       :headers="headers"
       :items="publicIps"
-      :items-length="publicIps.length"
+      :items-length="publicIpsCount"
       :loading="loading"
+      v-model:items-per-page="pageSize"
       @update:options="getFarmPublicIp"
       :items-per-page-options="[
         { value: 5, title: '5' },
@@ -13,6 +14,7 @@
         { value: 20, title: '20' },
         { value: 50, title: '50' },
       ]"
+      v-model:page="page"
       no-data-text="No IPs added on this farm"
       :deleting="isRemoving"
       show-select
@@ -180,6 +182,9 @@ export default {
       selectedItems,
       loadingIps,
       getFarmPublicIp,
+      pageSize,
+      page,
+      publicIpsCount,
     };
   },
 };

From 2856845f80d452d8cb6fdb472aea7fcf0e4dd0bb Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 9 Mar 2025 13:01:34 +0200
Subject: [PATCH 06/10] Limit retcount request

---
 .../src/dashboard/components/public_ips_table.vue    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 27f60e8b08..4a603eeeba 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -7,7 +7,7 @@
       :items-length="publicIpsCount"
       :loading="loading"
       v-model:items-per-page="pageSize"
-      @update:options="getFarmPublicIp"
+      @update:options="getFarmPublicIp(true)"
       :items-per-page-options="[
         { value: 5, title: '5' },
         { value: 10, title: '10' },
@@ -121,18 +121,20 @@ export default {
     const page = ref<number>(1);
     const pageSize = ref(10);
 
-    async function getFarmPublicIp() {
+    async function getFarmPublicIp(retCount = false) {
       loadingIps.value = true;
+      if (retCount) page.value = 1;
+
       try {
         const { data, count } = await gridProxyClient.publicIps.list({
-          retCount: true,
+          retCount,
           page: page.value,
           size: pageSize.value,
           free: true,
           farmIds: props.farmId,
         });
         publicIps.value = data as PublicIp[];
-        publicIpsCount.value = count || publicIps.value.length;
+        if (retCount) publicIpsCount.value = count || 0;
       } catch (error) {
         createCustomToast(`Failed to get public IPs! ${error}`, ToastType.danger);
       } finally {
@@ -149,7 +151,7 @@ export default {
         }));
         await gridStore.grid.farms.removeFarmIps(items.value);
         createCustomToast("IP is deleted successfully!", ToastType.success);
-        await getFarmPublicIp();
+        await getFarmPublicIp(true);
       } catch (error) {
         console.log(error);
         createCustomToast("Failed to delete IP!", ToastType.danger);

From c57c70470e04e1b2f278c0e6ae2c020065d0aca2 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 9 Mar 2025 13:03:23 +0200
Subject: [PATCH 07/10] Add retcount param on watch function

---
 .../playground/src/dashboard/components/public_ips_table.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 4a603eeeba..ba09d92903 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -164,7 +164,7 @@ export default {
     watch(
       () => props.refreshPublicIPs,
       () => {
-        getFarmPublicIp();
+        getFarmPublicIp(true);
       },
       { deep: true },
     );

From 6e848993c67fa1a85408f4cabc0f35fa12868a99 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 11 Mar 2025 12:26:57 +0200
Subject: [PATCH 08/10] Update Adding IP toast

---
 packages/playground/src/dashboard/components/add_ip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/dashboard/components/add_ip.vue b/packages/playground/src/dashboard/components/add_ip.vue
index bb90fdeaed..675c95d621 100644
--- a/packages/playground/src/dashboard/components/add_ip.vue
+++ b/packages/playground/src/dashboard/components/add_ip.vue
@@ -307,7 +307,7 @@ export default {
           });
         }
         context.emit("ip-added-successfully");
-        createCustomToast("IP is added successfully.", ToastType.success);
+        createCustomToast("IP is added successfully. It may takes a few seconds to reflect", ToastType.success);
         showDialogue.value = false;
       } catch (error) {
         if (error instanceof TFChainError && error.keyError === "IpExists") {

From 7b73b6c3187f1e3377c60b8b4daba72e7cd6c20d Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 11 Mar 2025 12:27:47 +0200
Subject: [PATCH 09/10] Set timeout for getting farm IP

---
 .../dashboard/components/public_ips_table.vue | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index ba09d92903..9040e21e14 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -5,7 +5,7 @@
       :headers="headers"
       :items="publicIps"
       :items-length="publicIpsCount"
-      :loading="loading"
+      :loading="loadingIps"
       v-model:items-per-page="pageSize"
       @update:options="getFarmPublicIp(true)"
       :items-per-page-options="[
@@ -14,7 +14,6 @@
         { value: 20, title: '20' },
         { value: 50, title: '50' },
       ]"
-      v-model:page="page"
       no-data-text="No IPs added on this farm"
       :deleting="isRemoving"
       show-select
@@ -38,7 +37,15 @@
     </v-data-table-server>
 
     <div v-if="publicIps.length > 0" class="d-flex align-end justify-end">
-      <v-btn class="my-3" color="error" prepend-icon="mdi-delete" @click="showDialogue = true"> Delete </v-btn>
+      <v-btn
+        class="my-3"
+        color="error"
+        :disabled="selectedItems.length == 0 || isRemoving"
+        prepend-icon="mdi-delete"
+        @click="showDialogue = true"
+      >
+        Delete
+      </v-btn>
     </div>
     <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
       <v-card>
@@ -57,7 +64,7 @@
             text="Delete"
             :loading="isRemoving"
             color="error"
-            :disabled="isRemoving"
+            :disabled="selectedItems.length == 0 || isRemoving"
             @click="removeFarmIps"
           ></v-btn>
         </v-card-actions>
@@ -108,7 +115,6 @@ export default {
     ] as any;
     const publicIps = ref<PublicIp[]>([]);
     const publicIpsCount = ref();
-    const loading = ref(false);
     const loadingIps = ref(false);
     const showDialogue = ref(false);
     const type = ref(IPType.single);
@@ -122,10 +128,9 @@ export default {
     const pageSize = ref(10);
 
     async function getFarmPublicIp(retCount = false) {
-      loadingIps.value = true;
       if (retCount) page.value = 1;
-
       try {
+        loadingIps.value = true;
         const { data, count } = await gridProxyClient.publicIps.list({
           retCount,
           page: page.value,
@@ -145,13 +150,17 @@ export default {
     async function removeFarmIps() {
       try {
         isRemoving.value = true;
+        loadingIps.value = true;
         items.value = selectedItems.value.map(item => ({
           ip: item.ip,
           farmId: props.farmId,
         }));
         await gridStore.grid.farms.removeFarmIps(items.value);
-        createCustomToast("IP is deleted successfully!", ToastType.success);
-        await getFarmPublicIp(true);
+        setTimeout(async () => {
+          await getFarmPublicIp(true);
+          createCustomToast("IP is deleted successfully!", ToastType.success);
+          loadingIps.value = false;
+        }, 20000);
       } catch (error) {
         console.log(error);
         createCustomToast("Failed to delete IP!", ToastType.danger);
@@ -164,7 +173,10 @@ export default {
     watch(
       () => props.refreshPublicIPs,
       () => {
-        getFarmPublicIp(true);
+        loadingIps.value = true;
+        setTimeout(async () => {
+          await getFarmPublicIp(true);
+        }, 20000);
       },
       { deep: true },
     );
@@ -177,7 +189,6 @@ export default {
       publicIP,
       toPublicIP,
       gateway,
-      loading,
       showDialogue,
       isRemoving,
       removeFarmIps,

From d967228d461702c321d71c95619796c8d1f2aeee Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 12 Mar 2025 14:08:10 +0200
Subject: [PATCH 10/10] Fix pagination

---
 .../dashboard/components/public_ips_table.vue | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 9040e21e14..7507f5e3eb 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -7,7 +7,13 @@
       :items-length="publicIpsCount"
       :loading="loadingIps"
       v-model:items-per-page="pageSize"
-      @update:options="getFarmPublicIp(true)"
+      @update:options="
+        (options: any ) => {
+          page = options.page;
+          pageSize = options.itemsPerPage;
+          getFarmPublicIp(true, { page, size: pageSize });
+        }
+      "
       :items-per-page-options="[
         { value: 5, title: '5' },
         { value: 10, title: '10' },
@@ -76,7 +82,7 @@
 <script lang="ts">
 import type { RemoveFarmIPModel } from "@threefold/grid_client";
 import type { PublicIp } from "@threefold/gridproxy_client";
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 
 import { gridProxyClient } from "@/clients";
 import { useGrid } from "@/stores";
@@ -125,16 +131,15 @@ export default {
     const selectedItems = ref<any[]>([]);
     const items = ref<RemoveFarmIPModel[]>([]);
     const page = ref<number>(1);
-    const pageSize = ref(10);
+    const pageSize = ref(5);
 
-    async function getFarmPublicIp(retCount = false) {
-      if (retCount) page.value = 1;
+    async function getFarmPublicIp(retCount = false, options = { page: 1, size: 10 }) {
       try {
         loadingIps.value = true;
         const { data, count } = await gridProxyClient.publicIps.list({
           retCount,
-          page: page.value,
-          size: pageSize.value,
+          page: options.page,
+          size: options.size,
           free: true,
           farmIds: props.farmId,
         });
@@ -157,7 +162,7 @@ export default {
         }));
         await gridStore.grid.farms.removeFarmIps(items.value);
         setTimeout(async () => {
-          await getFarmPublicIp(true);
+          await getFarmPublicIp(false, { page: page.value, size: pageSize.value });
           createCustomToast("IP is deleted successfully!", ToastType.success);
           loadingIps.value = false;
         }, 20000);
@@ -175,12 +180,11 @@ export default {
       () => {
         loadingIps.value = true;
         setTimeout(async () => {
-          await getFarmPublicIp(true);
+          await getFarmPublicIp(false, { page: page.value, size: pageSize.value });
         }, 20000);
       },
       { deep: true },
     );
-
     return {
       gridStore,
       headers,