feat: Show proper list of self-managed instances

https://harperdb.atlassian.net/browse/STUDIO-428

Author: dawsontoth

src/components/DataTable.tsx

@@ -24,7 +24,7 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
 						<TableRow key={headerGroup.id} className="border-none">
 							{headerGroup.headers.map((header) => {
 								return (
-									<TableHead key={header.id} className="p-4">
+									<TableHead key={header.id} className="p-4" style={{ width: `${header.getSize()}%` }}>
 										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 									</TableHead>
 								);
@@ -41,7 +41,7 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
 								className="hover:bg-muted/10 data-[state=selected]:bg-muted"
 							>
 								{row.getVisibleCells().map((cell) => (
-									<TableCell key={cell.id} className="p-4">
+									<TableCell key={cell.id} className="p-4" style={{ width: `${cell.column.getSize()}%` }}>
 										{flexRender(cell.column.columnDef.cell, cell.getContext())}
 									</TableCell>
 								))}

src/components/TextLoadingSkeleton.tsx

@@ -1,6 +1,11 @@
+import { cx } from 'class-variance-authority';
 import { useMemo } from 'react';
 
 export function TextLoadingSkeleton({ className }: { className?: string } = {}) {
-	const computedClassName = useMemo(() => `animate-pulse ${className} h-2.5 w-48 bg-gray-200 rounded-full dark:bg-gray-700 mb-4`, [className]);
+	const computedClassName = useMemo(() => cx(
+		`animate-pulse h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 mb-4`,
+		!className?.includes('w-') && 'w-48 ',
+		className,
+	), [className]);
 	return <div className={computedClassName}></div>;
 }

src/features/cluster/InstanceLogInCell.tsx

@@ -1,4 +1,3 @@
-import { TextLoadingSkeleton } from '@/components/TextLoadingSkeleton';
 import { Button } from '@/components/ui/button';
 import { defaultInstanceRoute } from '@/config/constants';
 import { useInstanceClient } from '@/config/useInstanceClient';
@@ -8,6 +7,7 @@ import { Instance } from '@/lib/api.patch';
 import { authStore } from '@/lib/authStore';
 import { getOperationsUrlForInstance } from '@/lib/urls/getOperationsUrlForInstance';
 import { Link } from '@tanstack/react-router';
+import { LoaderCircleIcon } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
 
 export function InstanceLogInCell({ instance }: { readonly instance: Instance }) {
@@ -19,11 +19,8 @@ export function InstanceLogInCell({ instance }: { readonly instance: Instance })
 		authStore.setUserForEntity(instance, null);
 	}, [instance, instanceClient]);
 
-	if (!['CLONE_READY', 'RUNNING', 'UPDATED'].includes(instance.status)) {
-		return <p>N/A</p>;
-	}
-	if (instanceAuthIsLoading) {
-		return <TextLoadingSkeleton />;
+	if (instanceAuthIsLoading || !['CLONE_READY', 'RUNNING', 'UPDATED'].includes(instance.status)) {
+		return <LoaderCircleIcon className="animate-spin" color="gray" />;
 	}
 	if (!instanceUser) {
 		return <Link

src/features/cluster/index.tsx

@@ -7,9 +7,10 @@ import { renderBadgeStatusVariant } from '@/components/ui/utils/badgeStatus';
 import { EmptyCluster } from '@/features/cluster/EmptyCluster';
 import { InstanceLogInCell } from '@/features/cluster/InstanceLogInCell';
 import { getClusterInfoQueryOptions } from '@/features/cluster/queries/getClusterInfoQuery';
+import { calculateInstanceFQDN } from '@/features/clusters/upsert/lib/calculateInstanceFQDN';
 import { Instance } from '@/lib/api.patch';
+import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
 import { humanFileSize } from '@/lib/humanFileSize';
-import { InstanceTypes, renderInstanceTypeOption } from '@/lib/InstanceType';
 import { capitalizeWords } from '@/lib/string/capitalizeWords';
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from '@tanstack/react-router';
@@ -21,62 +22,87 @@ export function ClusterIndex() {
 	const { data: cluster, isLoading: clusterIsLoading } = useQuery(
 		getClusterInfoQueryOptions(clusterId, true),
 	);
+	const isSelfManaged = useMemo(() => !!cluster?.plans?.[0]?.planId?.startsWith('self-hosted'), [cluster]);
 
 	const columns: ColumnDef<Instance>[] = useMemo(
-		() => [
+		() => ([
 			{
-				accessorKey: 'name', // Accessor key for the "name" field from data object
-				header: 'Name', // Column header
+				id: 'instanceActions',
+				size: 1,
+				minSize: 1,
+				cell: (cell) => (<div className="flex justify-end">
+					<InstanceLogInCell instance={cell.row.original} />
+				</div>),
 			},
-			{
+			isSelfManaged && {
 				accessorKey: 'instanceFqdn',
-				header: 'Instance Url',
-				cell: (cell) => <InstanceLogInCell instance={cell.row.original} />,
-			},
-			{
-				accessorKey: 'instanceTypeId',
-				header: 'Instance Type',
+				size: 90,
+				header: 'URL',
 				cell: (cell) => {
-					return renderInstanceTypeOption(cell.getValue() as InstanceTypes);
+					return calculateInstanceFQDN({
+						secure: cell.row.original.operationsApiSecure ? 'true' : 'false',
+						port: cell.row.original.operationsApiPort,
+						fqdn: cell.row.original.instanceFqdn,
+					});
 				},
 			},
-			{
+			!isSelfManaged && {
+				accessorKey: 'name',
+				size: 90,
+				header: 'Name',
+			},
+			!isSelfManaged && {
 				accessorKey: 'status',
 				header: 'Status',
+				size: 1,
+				minSize: 1,
 				cell: (cell) => {
 					const status = cell.getValue() as string;
 					return <Badge variant={renderBadgeStatusVariant(status)}>{capitalizeWords(status)}</Badge>;
 				},
 			},
-			{
+			!isSelfManaged && {
 				accessorKey: 'version',
+				size: 1,
+				minSize: 1,
 				header: 'Version',
 			},
-			{
+			!isSelfManaged && {
 				accessorKey: 'storageGb',
+				size: 1,
+				minSize: 1,
 				header: 'Storage',
 				cell: (cell) => {
 					const value = cell.getValue() as number;
 					return humanFileSize(value, Math.pow(1024, 3));
 				},
 			},
-			{
+			!isSelfManaged && {
 				accessorKey: 'cpuCores',
+				size: 1,
+				minSize: 1,
 				header: 'Cores/Threads',
 				cell: (cell) => {
 					return <>{cell.row.original.cpuCores} / {cell.row.original.threads}</>;
 				},
 			},
-			{
+			!isSelfManaged && {
 				accessorKey: 'memoryMb',
+				size: 1,
+				minSize: 1,
 				header: 'Memory',
 				cell: (cell) => {
 					const value = cell.getValue() as number;
 					return humanFileSize(value, Math.pow(1024, 2));
 				},
 			},
-		],
-		[],
+		] satisfies Array<ColumnDef<Instance> | false>).filter(excludeFalsy),
+		[isSelfManaged],
+	);
+	const instances = useMemo(
+		() =>
+			cluster?.instances?.filter(instance => instance.status !== 'REMOVED') ?? [],
+		[cluster],
 	);
 	return (
 		<>
@@ -86,8 +112,8 @@ export function ClusterIndex() {
 					<CardContent className="p-0 min-h-96">
 						{clusterIsLoading
 							? <TextLoadingSkeleton />
-							: cluster?.instances?.length
-								? <DataTable data={cluster.instances} columns={columns} />
+							: instances.length
+								? <DataTable data={instances} columns={columns} />
 								: <EmptyCluster />
 						}
 					</CardContent>