Cloud progress (#468)

surrealdb · Sep 20, 2024 · ecca9cc · ecca9cc
1 parent a292e50
commit ecca9cc
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/src/screens/cloud-manage/components/Instance/modals/change-units.tsx b/src/screens/cloud-manage/components/Instance/modals/change-units.tsx
@@ -64,7 +64,7 @@ function ComputeUnitsModal({ instance }: ComputeUnitsModalProps) {
 						compute node provides additional processing power to your instance.
 					</Text>
 
-					{!hasSingleCompute ? (
+					{hasSingleCompute ? (
 						<Alert
 							color="blue"
 							title="Upgrade to use compute nodes"

diff --git a/src/screens/cloud-manage/hooks/instances.tsx b/src/screens/cloud-manage/hooks/instances.tsx
@@ -13,7 +13,6 @@ export function useCloudInstances(organization?: string) {
 		queryKey: ["cloud", "databases", organization],
 		refetchInterval: 5_000,
 		enabled: authState === "authenticated",
-		initialData: [],
 		queryFn: async () => {
 			return fetchAPI<CloudInstance[]>(`/organizations/${organization}/instances`);
 		},

diff --git a/src/screens/cloud-manage/pages/Instances/index.tsx b/src/screens/cloud-manage/pages/Instances/index.tsx
@@ -29,7 +29,6 @@ import {
 } from "~/util/icons";
 
 import { useDebouncedValue, useDisclosure, useInputState } from "@mantine/hooks";
-import { useQuery } from "@tanstack/react-query";
 import { Fragment, useMemo, useState } from "react";
 import { FloatingButton } from "~/components/FloatingButton";
 import { Icon } from "~/components/Icon";
@@ -39,12 +38,10 @@ import { Spacer } from "~/components/Spacer";
 import { useAvailableInstanceTypes, useAvailableRegions, useOrganization } from "~/hooks/cloud";
 import { useSetting } from "~/hooks/config";
 import { useStable } from "~/hooks/stable";
-import { useCloudStore } from "~/stores/cloud";
 import { useConfigStore } from "~/stores/config";
 import type { CloudInstance } from "~/types";
 import { createBaseConnection, createCloudInstance } from "~/util/defaults";
 import { fuzzyMatch } from "~/util/helpers";
-import { fetchAPI } from "../../api";
 import { type ConnectMethod, Instance } from "../../components/Instance";
 import { useCloudInstances } from "../../hooks/instances";
 import { ConnectCliModal } from "./modals/connect-cli";

diff --git a/src/screens/cloud-manage/pages/Provision/index.tsx b/src/screens/cloud-manage/pages/Provision/index.tsx
@@ -48,8 +48,8 @@ import { useStable } from "~/hooks/stable";
 import { useIsLight } from "~/hooks/theme";
 import { useCloudStore } from "~/stores/cloud";
 import { useConfigStore } from "~/stores/config";
-import type { CloudInstance, CloudInstanceType } from "~/types";
-import { clamp, showError } from "~/util/helpers";
+import type { CloudInstance } from "~/types";
+import { showError } from "~/util/helpers";
 import { fetchAPI } from "../../api";
 import { InstanceType } from "../../components/InstanceType";
 import { Tile } from "../../components/Tile";
@@ -189,7 +189,7 @@ export function ProvisionPage() {
 	});
 
 	const willCreate = step === 4;
-	const estimatedCost = (isFree ? 0 : (instanceInfo?.price_hour ?? 0) * units).toFixed(2);
+	const estimatedCost = isFree ? 0 : (instanceInfo?.price_hour ?? 0) * units;
 	const hasSingleCompute = minComputeUnits === 1 && maxComputeUnits === 1;
 
 	useLayoutEffect(() => {
@@ -382,7 +382,7 @@ export function ProvisionPage() {
 								your instance.
 							</Text>
 
-							{!hasSingleCompute ? (
+							{hasSingleCompute ? (
 								<Alert
 									color="blue"
 									title="Upgrade to use compute nodes"
@@ -430,7 +430,7 @@ export function ProvisionPage() {
 						<Stack>
 							<PrimaryTitle>Finalize your instance</PrimaryTitle>
 
-							<Paper p="md">
+							<Paper p="xl">
 								<Table>
 									<Table.Tbody>
 										<Table.Tr>
@@ -463,19 +463,37 @@ export function ProvisionPage() {
 								>
 									Estimated costs
 								</Text>
+
+								<Text
+									fz={13}
+									c={isLight ? "slate.6" : "slate.2"}
+								>
+									<Text
+										span
+										ml={4}
+										fz={22}
+										fw={500}
+										c="bright"
+									>
+										${estimatedCost.toFixed(2)}
+									</Text>
+									/hour
+								</Text>
 
 								<Text
-									fz={18}
-									fw={500}
-									c="bright"
+									fz={13}
+									c={isLight ? "slate.6" : "slate.2"}
 								>
-									${estimatedCost}{" "}
+									Approx.
 									<Text
 										span
-										c={isLight ? "slate.6" : "slate.3"}
+										ml={4}
+										fw={500}
+										c="bright"
 									>
-										/hour
+										${(estimatedCost * 24 * 30).toFixed(2)}
 									</Text>
+									/month
 								</Text>
 							</Paper>
 						</Stack>