From 286745f74b6a151f7ffadbcab049846194f8a3d0 Mon Sep 17 00:00:00 2001
From: Vehbi Sinan Tunalioglu <vst@vsthost.com>
Date: Fri, 29 Mar 2024 23:49:49 +0800
Subject: [PATCH 1/2] feat(website): add rudimentary filters to hosts
 tabulation

---
 website/src/components/app/-app.tsx | 131 +++++++++++++++++++++++++++-
 1 file changed, 129 insertions(+), 2 deletions(-)

diff --git a/website/src/components/app/-app.tsx b/website/src/components/app/-app.tsx
index a39fb64..35f5070 100644
--- a/website/src/components/app/-app.tsx
+++ b/website/src/components/app/-app.tsx
@@ -1,11 +1,12 @@
 import { Card, CardBody, CardHeader } from '@nextui-org/card';
 import { Chip } from '@nextui-org/chip';
 import { Listbox, ListboxItem, ListboxSection } from '@nextui-org/listbox';
+import { Select, SelectItem, Selection } from '@nextui-org/react';
 import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/table';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Just, Maybe, Nothing } from 'purify-ts/Maybe';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { LhpData } from './-data';
 import { KVBox } from './-ui';
@@ -100,8 +101,134 @@ export function cloudIcon(x: string) {
 }
 
 export function TabulateHosts({ hosts, onHostSelect }: { hosts: LhpData[]; onHostSelect: (host: LhpData) => void }) {
+  const [filters, setFilters] = useState<Record<string, (hosts: LhpData) => boolean>>({});
+  const [filteredHosts, setFilteredHosts] = useState<LhpData[]>(hosts);
+
+  useEffect(() => {
+    setFilteredHosts(hosts.filter((host) => Object.values(filters).reduce((acc, f) => acc && f(host), true)));
+  }, [filters, hosts]);
+
   return (
     <div className="bg-white p-4">
+      <div className="mb-2 grid grid-cols-5 gap-2">
+        <div>
+          <Select
+            label="Host"
+            placeholder="Select hosts"
+            selectionMode="multiple"
+            className="max-w-xs"
+            onSelectionChange={(x: Selection) => {
+              setFilters({ ...filters, hosts: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.host.name) });
+            }}
+          >
+            {hosts.map((host) => (
+              <SelectItem key={host.host.name}>{host.host.name}</SelectItem>
+            ))}
+          </Select>
+        </div>
+
+        <div>
+          <Select
+            label="Cloud"
+            placeholder="Select clouds"
+            selectionMode="multiple"
+            className="max-w-xs"
+            onSelectionChange={(x: Selection) => {
+              setFilters({ ...filters, hosts: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.cloud.name) });
+            }}
+          >
+            {hosts
+              .map((h) => h.cloud.name)
+              .sort()
+              .filter(function (el, i, a) {
+                return i === a.indexOf(el);
+              })
+              .map((n) => (
+                <SelectItem key={n}>{n}</SelectItem>
+              ))}
+          </Select>
+        </div>
+
+        <div>
+          <Select
+            label="Distributions"
+            placeholder="Select distributions"
+            selectionMode="multiple"
+            className="max-w-xs"
+            onSelectionChange={(x: Selection) => {
+              setFilters({
+                ...filters,
+                hosts: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.distribution.id),
+              });
+            }}
+          >
+            {hosts
+              .map((h) => h.distribution.id)
+              .sort()
+              .filter(function (el, i, a) {
+                return i === a.indexOf(el);
+              })
+              .map((n) => (
+                <SelectItem key={n}>{n}</SelectItem>
+              ))}
+          </Select>
+        </div>
+
+        <div>
+          <Select
+            label="Architectures"
+            placeholder="Select architectures"
+            selectionMode="multiple"
+            className="max-w-xs"
+            onSelectionChange={(x: Selection) => {
+              setFilters({
+                ...filters,
+                hosts: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.kernel.machine),
+              });
+            }}
+          >
+            {hosts
+              .map((h) => h.kernel.machine)
+              .sort()
+              .filter(function (el, i, a) {
+                return i === a.indexOf(el);
+              })
+              .map((n) => (
+                <SelectItem key={n}>{n}</SelectItem>
+              ))}
+          </Select>
+        </div>
+
+        <div>
+          <Select
+            label="Tags"
+            placeholder="Select tags"
+            selectionMode="multiple"
+            className="max-w-xs"
+            onSelectionChange={(x: Selection) => {
+              setFilters({
+                ...filters,
+                hosts:
+                  x === 'all' || x.size === 0
+                    ? () => true
+                    : (h) => (h.host.tags || []).reduce((acc, t) => acc || x.has(t), false),
+              });
+            }}
+          >
+            {hosts
+              .map((h) => h.host.tags || [])
+              .reduce((acc, tags) => [...acc, ...tags], [])
+              .sort()
+              .filter(function (el, i, a) {
+                return i === a.indexOf(el);
+              })
+              .map((n) => (
+                <SelectItem key={n}>{n}</SelectItem>
+              ))}
+          </Select>
+        </div>
+      </div>
+
       <Table
         aria-label="Table of Hosts"
         removeWrapper
@@ -134,7 +261,7 @@ export function TabulateHosts({ hosts, onHostSelect }: { hosts: LhpData[]; onHos
           </TableColumn>
           <TableColumn key="tags">Tags</TableColumn>
         </TableHeader>
-        <TableBody items={hosts}>
+        <TableBody items={filteredHosts}>
           {(host) => (
             <TableRow key={host.host.name}>
               <TableCell>

From bb8b828ad7d2a7e395271d502bb9c41a68185f3d Mon Sep 17 00:00:00 2001
From: Vehbi Sinan Tunalioglu <vst@vsthost.com>
Date: Sat, 30 Mar 2024 00:51:57 +0800
Subject: [PATCH 2/2] feat(website): add more filters to hosts tabulation

---
 website/src/components/app/-app.tsx | 181 +++++++++++++++++++++++++---
 1 file changed, 164 insertions(+), 17 deletions(-)

diff --git a/website/src/components/app/-app.tsx b/website/src/components/app/-app.tsx
index 35f5070..d93746f 100644
--- a/website/src/components/app/-app.tsx
+++ b/website/src/components/app/-app.tsx
@@ -1,7 +1,7 @@
 import { Card, CardBody, CardHeader } from '@nextui-org/card';
 import { Chip } from '@nextui-org/chip';
 import { Listbox, ListboxItem, ListboxSection } from '@nextui-org/listbox';
-import { Select, SelectItem, Selection } from '@nextui-org/react';
+import { Radio, RadioGroup, Select, SelectItem, Selection, Slider } from '@nextui-org/react';
 import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/table';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -111,11 +111,11 @@ export function TabulateHosts({ hosts, onHostSelect }: { hosts: LhpData[]; onHos
   return (
     <div className="bg-white p-4">
       <div className="mb-2 grid grid-cols-5 gap-2">
-        <div>
+        <div className="rounded-lg bg-gray-100 p-2">
           <Select
-            label="Host"
-            placeholder="Select hosts"
+            label="Hosts"
             selectionMode="multiple"
+            variant="underlined"
             className="max-w-xs"
             onSelectionChange={(x: Selection) => {
               setFilters({ ...filters, hosts: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.host.name) });
@@ -127,14 +127,14 @@ export function TabulateHosts({ hosts, onHostSelect }: { hosts: LhpData[]; onHos
           </Select>
         </div>
 
-        <div>
+        <div className="rounded-lg bg-gray-100 p-2">
           <Select
-            label="Cloud"
-            placeholder="Select clouds"
+            label="Clouds"
             selectionMode="multiple"
+            variant="underlined"
             className="max-w-xs"
             onSelectionChange={(x: Selection) => {
-              setFilters({ ...filters, hosts: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.cloud.name) });
+              setFilters({ ...filters, clouds: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.cloud.name) });
             }}
           >
             {hosts
@@ -149,16 +149,41 @@ export function TabulateHosts({ hosts, onHostSelect }: { hosts: LhpData[]; onHos
           </Select>
         </div>
 
-        <div>
+        <div className="rounded-lg bg-gray-100 p-2">
+          <Select
+            label="Region"
+            selectionMode="multiple"
+            variant="underlined"
+            className="max-w-xs"
+            onSelectionChange={(x: Selection) => {
+              setFilters({
+                ...filters,
+                region: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.cloud.hostRegion || '<unknown>'),
+              });
+            }}
+          >
+            {hosts
+              .map((h) => h.cloud.hostRegion || '<unknown>')
+              .sort()
+              .filter(function (el, i, a) {
+                return i === a.indexOf(el);
+              })
+              .map((n) => (
+                <SelectItem key={n}>{n}</SelectItem>
+              ))}
+          </Select>
+        </div>
+
+        <div className="rounded-lg bg-gray-100 p-2">
           <Select
             label="Distributions"
-            placeholder="Select distributions"
             selectionMode="multiple"
+            variant="underlined"
             className="max-w-xs"
             onSelectionChange={(x: Selection) => {
               setFilters({
                 ...filters,
-                hosts: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.distribution.id),
+                distros: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.distribution.id),
               });
             }}
           >
@@ -174,16 +199,16 @@ export function TabulateHosts({ hosts, onHostSelect }: { hosts: LhpData[]; onHos
           </Select>
         </div>
 
-        <div>
+        <div className="rounded-lg bg-gray-100 p-2">
           <Select
             label="Architectures"
-            placeholder="Select architectures"
             selectionMode="multiple"
+            variant="underlined"
             className="max-w-xs"
             onSelectionChange={(x: Selection) => {
               setFilters({
                 ...filters,
-                hosts: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.kernel.machine),
+                archs: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.kernel.machine),
               });
             }}
           >
@@ -199,16 +224,138 @@ export function TabulateHosts({ hosts, onHostSelect }: { hosts: LhpData[]; onHos
           </Select>
         </div>
 
-        <div>
+        <div className="col-span-5 rounded-lg bg-gray-100 p-2">
+          <Select
+            label="Authorized SSH Keys"
+            selectionMode="multiple"
+            variant="underlined"
+            className="max-w-full"
+            onSelectionChange={(x: Selection) => {
+              setFilters({
+                ...filters,
+                sshkeys:
+                  x === 'all' || x.size === 0
+                    ? () => true
+                    : (h) => h.sshAuthorizedKeys.reduce((acc, t) => acc || x.has(t), false),
+              });
+            }}
+          >
+            {hosts
+              .map((h) => h.sshAuthorizedKeys || [])
+              .reduce((acc, tags) => [...acc, ...tags], [])
+              .sort()
+              .filter(function (el, i, a) {
+                return i === a.indexOf(el);
+              })
+              .map((n) => (
+                <SelectItem key={n} title={n}>
+                  {n}
+                </SelectItem>
+              ))}
+          </Select>
+        </div>
+
+        <div className="rounded-lg bg-gray-100 p-2">
+          <Slider
+            label="CPU Count"
+            size="sm"
+            showOutline
+            step={1}
+            minValue={Math.min(...hosts.map((x) => x.hardware.cpuCount))}
+            maxValue={Math.max(...hosts.map((x) => x.hardware.cpuCount))}
+            defaultValue={[
+              Math.min(...hosts.map((x) => x.hardware.cpuCount)),
+              Math.max(...hosts.map((x) => x.hardware.cpuCount)),
+            ]}
+            className="max-w-md"
+            onChange={(x) => {
+              if (Array.isArray(x)) {
+                const [mi, ma] = x;
+                setFilters({
+                  ...filters,
+                  cpu: (h) => mi <= h.hardware.cpuCount && h.hardware.cpuCount <= ma,
+                });
+              }
+            }}
+          />
+        </div>
+
+        <div className="rounded-lg bg-gray-100 p-2">
+          <Slider
+            label="Total RAM"
+            size="sm"
+            showOutline
+            step={0.5}
+            minValue={0}
+            maxValue={Math.ceil(Math.max(...hosts.map((x) => x.hardware.ramTotal)))}
+            defaultValue={[0, Math.ceil(Math.max(...hosts.map((x) => x.hardware.ramTotal)))]}
+            className="max-w-md"
+            onChange={(x) => {
+              if (Array.isArray(x)) {
+                const [mi, ma] = x;
+                setFilters({
+                  ...filters,
+                  ram: (h) => mi <= h.hardware.ramTotal && h.hardware.ramTotal <= ma,
+                });
+              }
+            }}
+          />
+        </div>
+
+        <div className="rounded-lg bg-gray-100 p-2">
+          <Slider
+            label="Root Disk Size"
+            size="sm"
+            showOutline
+            step={10}
+            minValue={0}
+            maxValue={Math.ceil(Math.max(...hosts.map((x) => x.hardware.diskRoot)))}
+            defaultValue={[0, Math.ceil(Math.max(...hosts.map((x) => x.hardware.diskRoot)))]}
+            className="max-w-md"
+            onChange={(x) => {
+              if (Array.isArray(x)) {
+                const [mi, ma] = x;
+                setFilters({
+                  ...filters,
+                  disk: (h) => mi <= h.hardware.diskRoot && h.hardware.diskRoot <= ma,
+                });
+              }
+            }}
+          />
+        </div>
+
+        <div className="rounded-lg bg-gray-100 p-2">
+          <RadioGroup
+            label="Has Docker?"
+            orientation="horizontal"
+            onValueChange={(x) => {
+              setFilters({
+                ...filters,
+                docker:
+                  x === 'yes'
+                    ? (h) => h.dockerContainers != null
+                    : x === 'no'
+                      ? (h) => h.dockerContainers == null
+                      : () => true,
+              });
+            }}
+          >
+            <Radio value="all">All</Radio>
+            <Radio value="yes">Yes</Radio>
+            <Radio value="no">No</Radio>
+          </RadioGroup>
+        </div>
+
+        <div className="rounded-lg bg-gray-100 p-2">
           <Select
             label="Tags"
-            placeholder="Select tags"
             selectionMode="multiple"
+            variant="underlined"
             className="max-w-xs"
             onSelectionChange={(x: Selection) => {
               setFilters({
                 ...filters,
-                hosts:
+                tags:
                   x === 'all' || x.size === 0
                     ? () => true
                     : (h) => (h.host.tags || []).reduce((acc, t) => acc || x.has(t), false),