refactor(multi-server): improve alerts and add instructions to ssh keys

apps/dokploy/components/dashboard/docker/show/show-containers.tsx

@@ -42,6 +42,7 @@ export const ShowContainers = ({ serverId }: Props) => {
 	const { data, isLoading } = api.docker.getContainers.useQuery({
 		serverId,
 	});
+
 	const [sorting, setSorting] = React.useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
 		[],
@@ -109,83 +110,99 @@ export const ShowContainers = ({ serverId }: Props) => {
 					</DropdownMenu>
 				</div>
 				<div className="rounded-md border">
-					<Table>
-						<TableHeader>
-							{table.getHeaderGroups().map((headerGroup) => (
-								<TableRow key={headerGroup.id}>
-									{headerGroup.headers.map((header) => {
-										return (
-											<TableHead key={header.id}>
-												{header.isPlaceholder
-													? null
-													: flexRender(
-															header.column.columnDef.header,
-															header.getContext(),
-														)}
-											</TableHead>
-										);
-									})}
-								</TableRow>
-							))}
-						</TableHeader>
-						<TableBody>
-							{table.getRowModel().rows?.length ? (
-								table.getRowModel().rows.map((row) => (
-									<TableRow
-										key={row.id}
-										data-state={row.getIsSelected() && "selected"}
-									>
-										{row.getVisibleCells().map((cell) => (
-											<TableCell key={cell.id}>
-												{flexRender(
-													cell.column.columnDef.cell,
-													cell.getContext(),
-												)}
-											</TableCell>
-										))}
+					{isLoading ? (
+						<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								Loading...
+							</span>
+						</div>
+					) : data?.length === 0 ? (
+						<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								No results.
+							</span>
+						</div>
+					) : (
+						<Table>
+							<TableHeader>
+								{table.getHeaderGroups().map((headerGroup) => (
+									<TableRow key={headerGroup.id}>
+										{headerGroup.headers.map((header) => {
+											return (
+												<TableHead key={header.id}>
+													{header.isPlaceholder
+														? null
+														: flexRender(
+																header.column.columnDef.header,
+																header.getContext(),
+															)}
+												</TableHead>
+											);
+										})}
 									</TableRow>
-								))
-							) : (
-								<TableRow>
-									<TableCell
-										colSpan={columns.length}
-										className="h-24 text-center"
-									>
-										{isLoading ? (
-											<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-												<span className="text-muted-foreground text-lg font-medium">
-													Loading...
-												</span>
-											</div>
-										) : (
-											<>No results.</>
-										)}
-									</TableCell>
-								</TableRow>
-							)}
-						</TableBody>
-					</Table>
+								))}
+							</TableHeader>
+							<TableBody>
+								{table?.getRowModel()?.rows?.length ? (
+									table.getRowModel().rows.map((row) => (
+										<TableRow
+											key={row.id}
+											data-state={row.getIsSelected() && "selected"}
+										>
+											{row.getVisibleCells().map((cell) => (
+												<TableCell key={cell.id}>
+													{flexRender(
+														cell.column.columnDef.cell,
+														cell.getContext(),
+													)}
+												</TableCell>
+											))}
+										</TableRow>
+									))
+								) : (
+									<TableRow>
+										<TableCell
+											colSpan={columns.length}
+											className="h-24 text-center"
+										>
+											{isLoading ? (
+												<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+													<span className="text-muted-foreground text-lg font-medium">
+														Loading...
+													</span>
+												</div>
+											) : (
+												<>No results.</>
+											)}
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					)}
 				</div>
-				<div className="flex items-center justify-end space-x-2 py-4">
-					<div className="space-x-2 flex flex-wrap">
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => table.previousPage()}
-							disabled={!table.getCanPreviousPage()}
-						>
-							Previous
-						</Button>
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => table.nextPage()}
-							disabled={!table.getCanNextPage()}
-						>
-							Next
-						</Button>
+				{data && data?.length > 0 && (
+					<div className="flex items-center justify-end space-x-2 py-4">
+						<div className="space-x-2 flex flex-wrap">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.previousPage()}
+								disabled={!table.getCanPreviousPage()}
+							>
+								Previous
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.nextPage()}
+								disabled={!table.getCanNextPage()}
+							>
+								Next
+							</Button>
+						</div>
 					</div>
-				</div>
+				)}
 			</div>
 		</div>
 	);