fix: paginate nodes list page

Enable search for the `ClusterMachineHostname`.
Disable filtering by the node status, as it's not going to work in
paginated mode for the data pulled from Kubernetes.

Signed-off-by: Artem Chernyshev <[email protected]>

Author: Unix4ever

client/pkg/omni/resources/omni/cluster_machine_status.go

@@ -5,6 +5,8 @@
 package omni
 
 import (
+	"strings"
+
 	"github.com/cosi-project/runtime/pkg/resource"
 	"github.com/cosi-project/runtime/pkg/resource/meta"
 	"github.com/cosi-project/runtime/pkg/resource/protobuf"
@@ -58,3 +60,21 @@ func (ClusterMachineStatusExtension) ResourceDefinition() meta.ResourceDefinitio
 		},
 	}
 }
+
+// Make implements [typed.Maker] interface.
+func (ClusterMachineStatusExtension) Make(md *resource.Metadata, _ *ClusterMachineStatusSpec) any {
+	return &clusterMachineStatusAux{md: md}
+}
+
+type clusterMachineStatusAux struct {
+	md *resource.Metadata
+}
+
+func (m *clusterMachineStatusAux) Match(searchFor string) bool {
+	val, ok := m.md.Labels().Get(ClusterMachineStatusLabelNodeName)
+	if ok && strings.Contains(val, searchFor) {
+		return true
+	}
+
+	return false
+}

frontend/src/components/common/List/TList.vue

@@ -138,7 +138,7 @@ const sortByState = computed(() => {
     if (opt.desc === selectedSortOption?.value) {
       return {
         sortByField: opt.id,
-        sortDescending: opt.descending,
+        sortDescending: opt.descending
       };
     }
   }
@@ -311,7 +311,7 @@ const openPage = (page: number | string) => {
   if (page === dots) {
     return;
   }
-  
+
   currentPage.value = page as number;
 };
 </script>

frontend/src/views/cluster/Nodes/NodesList.vue

@@ -7,22 +7,8 @@ included in the LICENSE file.
 <template>
   <div class="flex flex-col w-full gap-4">
     <page-header title="All Nodes"/>
-    <div class="flex gap-2">
-      <t-input
-        primary
-        class="flex-1"
-        placeholder="Search..."
-        v-model="searchOption"
-      />
-      <t-select-list
-        title="Status"
-        :defaultValue="NodesViewFilterOptions.ALL"
-        :values="filterOptions"
-        @checkedValue="setFilterOption"
-      />
-    </div>
-    <watch :opts="opts" spinner noRecordsAlert errorsAlert>
-      <template #default="{ items }">
+    <t-list :opts="opts" search pagination>
+      <template #default="{ items, searchQuery }">
         <div class="nodes-list">
           <div class="nodes-list-heading">
             <p>Name</p>
@@ -33,45 +19,32 @@ included in the LICENSE file.
           </div>
           <t-group-animation>
             <nodes-item
-              v-for="item in filterItems(items)"
+              v-for="item in items"
               :key="item.metadata.id!"
               :item="item"
-              :searchOption="searchOption"
+              :searchOption="searchQuery"
             />
           </t-group-animation>
         </div>
       </template>
-    </watch>
+    </t-list>
   </div>
 </template>
 
 <script setup lang="ts">
 import { getContext } from "@/context";
 import { kubernetes, ClusterMachineStatusType, LabelCluster, ClusterMachineStatusLabelNodeName, TalosMemberType, TalosClusterNamespace } from "@/api/resources";
 import { Runtime } from "@/api/common/omni.pb";
-import { Resource, ResourceTyped } from "@/api/grpc";
 import { ClusterMachineStatusSpec } from "@/api/omni/specs/omni.pb";
 import { useRoute } from "vue-router";
 import { DefaultNamespace } from "@/api/resources";
-import { Node, NodeSpec, NodeStatus } from "kubernetes-types/core/v1";
-import { NodesViewFilterOptions } from "@/constants";
-import { ref } from "vue";
-import { getStatus } from "@/methods";
+import { Node } from "kubernetes-types/core/v1";
 
-import Watch from "@/components/common/Watch/Watch.vue";
+import TList from "@/components/common/List/TList.vue";
 import PageHeader from "@/components/common/PageHeader.vue";
 import NodesItem from "@/views/cluster/Nodes/components/NodesItem.vue";
 import TGroupAnimation from "@/components/common/Animation/TGroupAnimation.vue";
-import TInput from "@/components/common/TInput/TInput.vue";
-import TSelectList from "@/components/common/SelectList/TSelectList.vue";
-
-const filterOption = ref("All");
-const searchOption  = ref("");
-const setFilterOption = (data: string) => {
-  filterOption.value = data;
-};
-
-const filterOptions = Object.keys(NodesViewFilterOptions).map(key => NodesViewFilterOptions[key]);
+import { Resource } from "@/api/v1alpha1/resource.pb";
 
 const route = useRoute();
 const context = getContext();
@@ -86,7 +59,7 @@ const opts = [
   selectors: [
     `${LabelCluster}=${route.params.cluster}`
   ],
-  idFunc: (item: ResourceTyped<ClusterMachineStatusSpec>): string => {
+  idFunc: (item: Resource<ClusterMachineStatusSpec>): string => {
     return (item?.metadata?.labels ?? {})[ClusterMachineStatusLabelNodeName] ?? item.metadata.id;
   }
 },
@@ -111,38 +84,6 @@ const opts = [
     return item.metadata.id;
   }
 }];
-
-type MemberSpec = {
-  operatingSystem: string,
-  addresses: string[],
-}
-
-const filterItems = (items: Resource<ClusterMachineStatusSpec & NodeSpec & MemberSpec, NodeStatus>[]) => {
-  return items.filter((elem: any) => {
-    const searchFields = [
-      (elem?.metadata.labels || {})[ClusterMachineStatusLabelNodeName],
-      elem?.metadata.id,
-      elem?.spec.operatingSystem,
-      (elem?.spec?.addresses ?? {})[0] ?? ""
-    ];
-
-    if (getStatus(elem) !== filterOption?.value && filterOption?.value !== NodesViewFilterOptions.ALL) {
-      return false;
-    }
-
-    if (searchOption?.value === "") {
-      return true;
-    }
-
-    for (const value of searchFields) {
-      if (value.includes(searchOption?.value)) {
-        return true;
-      }
-    }
-
-    return false;
-  })
-};
 </script>
 
 <style scoped>