Merge pull request #3129 from threefoldtech/dev_add_sorting_farms

Add sorting in user farms & farms finder
threefoldtech · Jul 21, 2024 · 8882aad · 8882aad
2 parents 8a59bf2 + e3012eb
commit 8882aad
Show file tree

Hide file tree

Showing 5 changed files with 390 additions and 17 deletions.
diff --git a/packages/gridproxy_client/src/builders/farms.ts b/packages/gridproxy_client/src/builders/farms.ts
@@ -1,6 +1,6 @@
 import { assertBoolean, assertId, assertIn, assertNatural, assertString } from "../utils";
 import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
-
+import { SortBy, SortOrder } from "./nodes";
 export enum CertificationType {
   Diy = "DIY",
   Certified = "Certified",
@@ -23,6 +23,8 @@ export interface FarmsQuery {
   dedicated: boolean;
   stellarAddress: string;
   nodeHasIPv6: boolean;
+  sortBy: SortBy;
+  sortOrder: SortOrder;
 }
 
 const FARMS_MAPPER: BuilderMapper<FarmsQuery> = {
@@ -41,6 +43,8 @@ const FARMS_MAPPER: BuilderMapper<FarmsQuery> = {
   totalIps: "total_ips",
   twinId: "twin_id",
   nodeHasIPv6: "node_has_ipv6",
+  sortBy: "sort_by",
+  sortOrder: "sort_order",
 };
 
 const FARMS_VALIDATOR: BuilderValidator<FarmsQuery> = {
@@ -61,6 +65,8 @@ const FARMS_VALIDATOR: BuilderValidator<FarmsQuery> = {
   dedicated: assertBoolean,
   stellarAddress: assertString,
   nodeHasIPv6: assertBoolean,
+  sortBy: assertString,
+  sortOrder: assertString,
 };
 
 export class FarmsBuilder extends AbstractBuilder<FarmsQuery> {

diff --git a/packages/gridproxy_client/src/builders/nodes.ts b/packages/gridproxy_client/src/builders/nodes.ts
@@ -2,6 +2,10 @@ import { assertBoolean, assertId, assertIn, assertInt, assertNatural, assertPatt
 import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
 import { ID_PATTERN, UnifiedNodeStatus } from "./gateways";
 
+export enum SortOrder {
+  Desc = "desc",
+  Asc = "asc",
+}
 export enum SortBy {
   NodeId = "node_id",
   FarmId = "farm_id",
@@ -28,11 +32,6 @@ export enum SortBy {
   FreeCRU = "free_cru",
 }
 
-export enum SortOrder {
-  Desc = "desc",
-  Asc = "asc",
-}
-
 export interface NodesQuery {
   page: number;
   size: number;

diff --git a/packages/playground/src/dashboard/components/user_farms.vue b/packages/playground/src/dashboard/components/user_farms.vue
@@ -38,6 +38,13 @@
           }
         }
       "
+      @update:sort-by="
+        if ($event[0]) {
+          sortBy = $event[0].key == 'farmId' ? SortBy.FarmId : $event[0].key;
+          sortOrder = $event[0].order;
+          getUserFarms();
+        }
+      "
       expand-on-click
       @update:options="getUserFarms"
       :hover="true"
@@ -128,7 +135,7 @@
 </template>
 
 <script lang="ts">
-import type { Farm } from "@threefold/gridproxy_client";
+import { type Farm, SortBy, SortOrder } from "@threefold/gridproxy_client";
 import { jsPDF } from "jspdf";
 import { debounce } from "lodash";
 import { StrKey } from "stellar-sdk";
@@ -167,13 +174,13 @@ export default {
         title: "Farm ID",
         align: "center",
         key: "farmId",
-        sortable: false,
+        sortable: true,
       },
       {
         title: "Farm Name",
         align: "center",
         key: "name",
-        sortable: false,
+        sortable: true,
       },
       {
         title: "Linked Twin ID",
@@ -201,6 +208,8 @@ export default {
     const isAdding = ref(false);
     const network = process.env.NETWORK || (window as any).env.NETWORK;
     const refreshPublicIPs = ref(false);
+    const sortBy = ref(SortBy.FarmId);
+    const sortOrder = ref(SortOrder.Asc);
 
     const reloadFarms = debounce(getUserFarms, 20000);
     async function getUserFarms() {
@@ -211,6 +220,8 @@ export default {
           page: page.value,
           size: pageSize.value,
           nameContains: search.value,
+          sortBy: sortBy.value,
+          sortOrder: sortOrder.value,
         });
 
         farms.value = data as Farm[];
@@ -338,6 +349,9 @@ export default {
       isAdding,
       farmsCount,
       network,
+      sortBy,
+      SortBy,
+      sortOrder,
       getUserFarms,
       setStellarAddress,
       customStellarValidation,

diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
@@ -105,7 +105,14 @@
           page = $event;
           loadFarms();
         "
-        :disable-sort="true"
+        @update:sort-by="
+          if ($event[0]) {
+            sortBy = $event[0].key == 'farmId' ? SortBy.FarmId : $event[0].key;
+            sortOrder = $event[0].order;
+            loadFarms();
+          }
+        "
+        @update:options="loadFarms()"
         @click:row="openSheet"
       >
         <template #[`item.usedPublicIp`]="{ item }">
@@ -147,7 +154,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Farm } from "@threefold/gridproxy_client";
+import { type Farm, SortBy, SortOrder } from "@threefold/gridproxy_client";
 import { ref } from "vue";
 
 import type { VDataTableHeader } from "@/types";
@@ -157,6 +164,8 @@ const farms = ref<Farm[]>();
 
 const page = ref(1);
 const size = ref(window.env.PAGE_SIZE);
+const sortBy = ref(SortBy.FarmId);
+const sortOrder = ref(SortOrder.Asc);
 const filters = ref({
   farmId: "",
   farmName: "",
@@ -172,6 +181,7 @@ async function loadFarms(retCount = false) {
   loading.value = true;
   farms.value = [];
   if (retCount) page.value = 1;
+
   try {
     const { count, data } = await getAllFarms({
       retCount,
@@ -180,6 +190,8 @@ async function loadFarms(retCount = false) {
       nameContains: filters.value.farmName || undefined,
       page: page.value,
       size: size.value,
+      sortBy: sortBy.value,
+      sortOrder: sortOrder.value,
     });
 
     if (data) {
@@ -213,8 +225,8 @@ const openDialog = (item: Farm) => {
 };
 
 const headers: VDataTableHeader = [
-  { title: "ID", key: "farmId", sortable: false },
-  { title: "Name", key: "name", sortable: false },
+  { title: "ID", key: "farmId", sortable: true },
+  { title: "Name", key: "name", sortable: true },
   {
     title: "Public IPs",
     key: "publicIps",