Add Shells tab to Host Details page

tavern/internal/www/src/pages/host-details/HostDetails.tsx

@@ -9,8 +9,9 @@ import HostBreadcrumbs from "./components/HostBreadcrumbs";
 import { BeaconTab } from "./beacon-tab";
 import { ProcessTab } from "./process-tab";
 import { FilesTab } from "./files-tab";
+import { ShellTab } from "./shell-tab";
 
-const TAB_NAMES = ["beacons", "tasks", "processes", "files", "credentials"] as const;
+const TAB_NAMES = ["beacons", "tasks", "processes", "files", "credentials", "shells"] as const;
 
 const HostDetails = () => {
     const [searchParams, setSearchParams] = useSearchParams();
@@ -45,6 +46,9 @@ const HostDetails = () => {
                         <TabPanel>
                             <CredentialTab />
                         </TabPanel>
+                        <TabPanel>
+                            <ShellTab />
+                        </TabPanel>
                     </TabPanels>
                 </TabGroup>
             </div>

tavern/internal/www/src/pages/host-details/components/HostTabs.tsx

@@ -3,8 +3,8 @@ import { useHost } from "../../../context/HostContext";
 import { getOfflineOnlineStatus } from "../../../utils/utils";
 import { useQuery } from "@apollo/client";
 import { useParams } from "react-router-dom";
-import { GET_HOST_TASK_COUNT } from "../../../utils/queries";
-import { ArrowUpDownIcon, FileCheckIcon, KeyRoundIcon, ListVideo } from "lucide-react";
+import { GET_HOST_TASK_COUNT, GET_HOST_SHELL_COUNT } from "../../../utils/queries";
+import { ArrowUpDownIcon, FileCheckIcon, KeyRoundIcon, ListVideo, TerminalIcon } from "lucide-react";
 
 
 const HostTabs = () => {
@@ -23,6 +23,27 @@ const HostTabs = () => {
         }
     });
 
+    const { data: shellCountData } = useQuery(GET_HOST_SHELL_COUNT, {
+        variables: {
+            whereTotal: {
+                hasBeaconWith: {
+                    hasHostWith: {
+                        id: hostId
+                    }
+                }
+            },
+            whereActive: {
+                hasBeaconWith: {
+                    hasHostWith: {
+                        id: hostId
+                    }
+                },
+                closedAtIsNil: true
+            }
+        },
+        skip: !hostId
+    });
+
     const { online } = getOfflineOnlineStatus(host?.beacons?.edges || []);
 
     return (
@@ -72,6 +93,15 @@ const HostTabs = () => {
                     {host?.credentials?.totalCount !== undefined && `(${host.credentials.totalCount})`}
                 </div>
             </Tab>
+            <Tab className={({ selected }) => `p-4 flex flex-row gap-1 items-center border-t-2 border-l-2 border-r-2 rounded-t-lg ${selected ? 'border-t-purple-600 bg-white text-purple-800 hover:bg-gray-100' : 'border-transparent hover:bg-white hover:border-t-purple-600'}`}>
+                <TerminalIcon className="w-4 h-4" />
+                <div>
+                    Shells
+                </div>
+                <div>
+                    {shellCountData?.totalShells?.totalCount !== undefined && `(${shellCountData.activeShells?.totalCount || 0}/${shellCountData.totalShells.totalCount})`}
+                </div>
+            </Tab>
         </TabList>
     )
 }

tavern/internal/www/src/pages/host-details/shell-tab/ShellTab.tsx

@@ -0,0 +1,38 @@
+import { VirtualizedTableWrapper } from "../../../components/tavern-base-ui/virtualized-table";
+import { ShellsTable } from "./ShellsTable";
+import { useShellIds } from "./useShellIds";
+import { useParams } from "react-router-dom";
+
+const ShellTab = () => {
+    const { hostId } = useParams();
+
+    const {
+        data,
+        shellIds,
+        initialLoading,
+        error,
+        hasMore,
+        loadMore,
+    } = useShellIds(hostId || "");
+
+    return (
+        <div className="mt-2">
+            <VirtualizedTableWrapper
+                title="Shells"
+                totalItems={data?.shells?.totalCount}
+                loading={initialLoading}
+                error={error}
+                showFiltering={false}
+                table={
+                    <ShellsTable
+                        shellIds={shellIds}
+                        hasMore={hasMore}
+                        onLoadMore={loadMore}
+                    />
+                }
+            />
+        </div>
+    );
+}
+
+export default ShellTab;