common resource filter

frontend/src/components/resources/alerter/table.tsx

@@ -1,24 +1,15 @@
-import { useRead, useTagsFilter } from "@lib/hooks";
+import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
 import { TagsWithBadge } from "@components/tags";
 
 export const AlerterTable = ({ search }: { search?: string }) => {
-  const tags = useTagsFilter();
   const alerters = useRead("ListAlerters", {}).data;
-  const searchSplit = search?.split(" ") || [];
+  const filtered = useFilterResources(alerters, search);
   return (
     <DataTable
       tableKey="alerters"
-      data={
-        alerters?.filter(
-          (resource) =>
-            tags.every((tag) => resource.tags.includes(tag)) &&
-            (searchSplit.length > 0
-              ? searchSplit.every((search) => resource.name.includes(search))
-              : true)
-        ) ?? []
-      }
+      data={filtered}
       columns={[
         {
           accessorKey: "name",

frontend/src/components/resources/build/table.tsx

@@ -1,5 +1,5 @@
 import { TagsWithBadge } from "@components/tags";
-import { useRead, useTagsFilter } from "@lib/hooks";
+import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { fmt_version } from "@lib/formatting";
 import { ResourceLink } from "../common";
@@ -7,20 +7,11 @@ import { BuildComponents } from ".";
 
 export const BuildTable = ({ search }: { search?: string }) => {
   const builds = useRead("ListBuilds", {}).data;
-  const tags = useTagsFilter();
-  const searchSplit = search?.split(" ") || [];
+  const filtered = useFilterResources(builds, search)
   return (
     <DataTable
       tableKey="builds"
-      data={
-        builds?.filter(
-          (resource) =>
-            tags.every((tag) => resource.tags.includes(tag)) &&
-            (searchSplit.length > 0
-              ? searchSplit.every((search) => resource.name.includes(search))
-              : true)
-        ) ?? []
-      }
+      data={filtered}
       columns={[
         {
           accessorKey: "name",

frontend/src/components/resources/builder/table.tsx

@@ -1,25 +1,16 @@
-import { useRead, useTagsFilter } from "@lib/hooks";
+import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
 import { TagsWithBadge } from "@components/tags";
 import { BuilderInstanceType } from ".";
 
 export const BuilderTable = ({ search }: { search?: string }) => {
-  const tags = useTagsFilter();
   const builders = useRead("ListBuilders", {}).data;
-  const searchSplit = search?.split(" ") || [];
+  const filtered = useFilterResources(builders, search);
   return (
     <DataTable
       tableKey="builders"
-      data={
-        builders?.filter(
-          (resource) =>
-            tags.every((tag) => resource.tags.includes(tag)) &&
-            (searchSplit.length > 0
-              ? searchSplit.every((search) => resource.name.includes(search))
-              : true)
-        ) ?? []
-      }
+      data={filtered}
       columns={[
         {
           accessorKey: "name",

frontend/src/components/resources/deployment/table.tsx

@@ -1,7 +1,7 @@
 import { TagsWithBadge } from "@components/tags";
 import { Types } from "@monitor/client";
 import { DataTable, SortableHeader } from "@ui/data-table";
-import { useRead, useTagsFilter } from "@lib/hooks";
+import { useFilterResources, useRead } from "@lib/hooks";
 import { ResourceLink } from "../common";
 import { DeploymentComponents } from ".";
 import { HardDrive } from "lucide-react";
@@ -14,25 +14,16 @@ export const DeploymentTable = ({
   deployments: Types.DeploymentListItem[] | undefined;
   search?: string;
 }) => {
-  const tags = useTagsFilter();
-  const searchSplit = search?.split(" ") || [];
   const servers = useRead("ListServers", {}).data;
   const serverName = useCallback(
     (id: string) => servers?.find((server) => server.id === id)?.name,
     [servers]
   );
+  const filtered = useFilterResources(deployments, search);
   return (
     <DataTable
       tableKey="deployments"
-      data={
-        deployments?.filter(
-          (resource) =>
-            tags.every((tag) => resource.tags.includes(tag)) &&
-            (searchSplit.length > 0
-              ? searchSplit.every((search) => resource.name.includes(search))
-              : true)
-        ) ?? []
-      }
+      data={filtered}
       columns={[
         {
           accessorKey: "name",
@@ -61,14 +52,14 @@ export const DeploymentTable = ({
           sortingFn: (a, b) => {
             const sa = serverName(a.original.info.server_id);
             const sb = serverName(b.original.info.server_id);
-            
+
             if (!sa && !sb) return 0;
             if (!sa) return -1;
             if (!sb) return 1;
 
             if (sa > sb) return 1;
             else if (sa < sb) return -1;
-            else return 0
+            else return 0;
           },
           header: ({ column }) => (
             <SortableHeader column={column} title="Server" />

frontend/src/components/resources/procedure/table.tsx

@@ -1,24 +1,15 @@
-import { useRead, useTagsFilter } from "@lib/hooks";
+import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { TagsWithBadge } from "@components/tags";
 import { ResourceLink } from "../common";
 
 export const ProcedureTable = ({ search }: { search?: string }) => {
-  const tags = useTagsFilter();
   const procedures = useRead("ListProcedures", {}).data;
-  const searchSplit = search?.split(" ") || [];
+  const filtered = useFilterResources(procedures, search);
   return (
     <DataTable
       tableKey="procedures"
-      data={
-        procedures?.filter(
-          (resource) =>
-            tags.every((tag) => resource.tags.includes(tag)) &&
-            (searchSplit.length > 0
-              ? searchSplit.every((search) => resource.name.includes(search))
-              : true)
-        ) ?? []
-      }
+      data={filtered}
       columns={[
         {
           accessorKey: "name",

frontend/src/components/resources/repo/table.tsx

@@ -1,25 +1,16 @@
-import { useRead, useTagsFilter } from "@lib/hooks";
+import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
 import { TagsWithBadge } from "@components/tags";
 import { RepoComponents } from ".";
 
 export const RepoTable = ({ search }: { search?: string }) => {
-  const tags = useTagsFilter();
   const repos = useRead("ListRepos", {}).data;
-  const searchSplit = search?.split(" ") || [];
+  const filtered = useFilterResources(repos, search);
   return (
     <DataTable
       tableKey="repos"
-      data={
-        repos?.filter(
-          (resource) =>
-            tags.every((tag) => resource.tags.includes(tag)) &&
-            (searchSplit.length > 0
-              ? searchSplit.every((search) => resource.name.includes(search))
-              : true)
-        ) ?? []
-      }
+      data={filtered}
       columns={[
         {
           accessorKey: "name",

frontend/src/components/resources/server-template/table.tsx

@@ -1,24 +1,15 @@
-import { useRead, useTagsFilter } from "@lib/hooks";
+import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
 import { TagsWithBadge } from "@components/tags";
 
 export const ServerTemplateTable = ({ search }: { search?: string }) => {
-  const tags = useTagsFilter();
   const server_templates = useRead("ListServerTemplates", {}).data;
-  const searchSplit = search?.split(" ") || [];
+  const filtered = useFilterResources(server_templates, search);
   return (
     <DataTable
       tableKey="server-templates"
-      data={
-        server_templates?.filter(
-          (resource) =>
-            tags.every((tag) => resource.tags.includes(tag)) &&
-            (searchSplit.length > 0
-              ? searchSplit.every((search) => resource.name.includes(search))
-              : true)
-        ) ?? []
-      }
+      data={filtered}
       columns={[
         {
           accessorKey: "name",

frontend/src/components/resources/server/table.tsx

@@ -1,25 +1,16 @@
 import { TagsWithBadge } from "@components/tags";
-import { useRead, useTagsFilter } from "@lib/hooks";
+import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ServerComponents } from ".";
 import { ResourceLink } from "../common";
 
 export const ServerTable = ({ search }: { search?: string }) => {
   const servers = useRead("ListServers", {}).data;
-  const tags = useTagsFilter();
-  const searchSplit = search?.split(" ") || [];
+  const filtered = useFilterResources(servers, search);
   return (
     <DataTable
       tableKey="servers"
-      data={
-        servers?.filter(
-          (resource) =>
-            tags.every((tag) => resource.tags.includes(tag)) &&
-            (searchSplit.length > 0
-              ? searchSplit.every((search) => resource.name.includes(search))
-              : true)
-        ) ?? []
-      }
+      data={filtered}
       columns={[
         {
           accessorKey: "name",

frontend/src/lib/hooks.ts

@@ -216,3 +216,18 @@ export const useCheckResourceExists = () => {
     }
   };
 };
+
+export const useFilterResources = <Info>(
+  resources?: Types.ResourceListItem<Info>[],
+  search?: string,
+) => {
+  const tags = useTagsFilter();
+  const searchSplit = search?.split(" ") || [];
+  return resources?.filter(
+    (resource) =>
+      tags.every((tag) => resource.tags.includes(tag)) &&
+      (searchSplit.length > 0
+        ? searchSplit.every((search) => resource.name.includes(search))
+        : true)
+  ) ?? [];
+};

frontend/src/pages/resources.tsx

@@ -18,19 +18,19 @@ export const Resources = () => {
       actions={
         <div className="grid gap-4 justify-items-end">
           <div className="flex gap-4">
-            <Input
-              value={search}
-              onChange={(e) => set(e.target.value)}
-              placeholder="search..."
-              className="w-96"
-            />
+            <TagsFilter />
             <Components.New />
           </div>
-          <TagsFilter />
+          <Input
+            value={search}
+            onChange={(e) => set(e.target.value)}
+            placeholder="search..."
+            className="w-96"
+          />
         </div>
       }
     >
-      <Components.Table />
+      <Components.Table search={search} />
     </Page>
   );
 };