feat: Allow applying licenses from the config page

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

Author: dawsontoth

src/components/ApplyLicensesButton.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useApplyLicensesClick } from '@/hooks/useApplyLicensesClick';
+import { SchemaLicense } from '@/lib/api.gen';
+import { pluralize } from '@/lib/pluralize';
+import { RotateCcwIcon } from 'lucide-react';
+
+interface ApplyLicensesButtonParams {
+	newLicenses: SchemaLicense[];
+}
+
+export function ApplyLicensesButton({
+	newLicenses,
+}: ApplyLicensesButtonParams) {
+	const { onApplyLicensesClick, isApplyLicensesPending } = useApplyLicensesClick({
+		licenses: newLicenses,
+	});
+	const countNewLicenses = pluralize(newLicenses.length, 'New License', 'New Licenses');
+	const countNewLicensesAre = pluralize(newLicenses.length, 'new license is', 'new licenses are');
+	return (<Tooltip>
+		<TooltipTrigger asChild>
+			<Button
+				variant="defaultOutline"
+				className="mx-0 md:mx-4 rounded-full"
+				onClick={onApplyLicensesClick}
+				disabled={isApplyLicensesPending}
+			>
+				<RotateCcwIcon /> Apply {countNewLicenses}
+			</Button>
+		</TooltipTrigger>
+		<TooltipContent>
+			{countNewLicensesAre} available for this instance. After applying, you will want to restart the instance.
+		</TooltipContent>
+	</Tooltip>);
+}

src/features/instance/config/overview/components/ApplicationURL.tsx

@@ -11,7 +11,7 @@ export const ApplicationURL = ({
 	return (
 		<>
 			<dt className="font-bold text-sm/6">Application URL</dt>
-			<dd className="text-sm/6 sm:mt-2">{loadingInstanceInfo ? <TextLoadingSkeleton /> : clusterInfo?.fqdn}</dd>
+			<dd className="text-sm/6 sm:mt-2">{loadingInstanceInfo ? <TextLoadingSkeleton /> : clusterInfo?.fqdn || 'N/A'}</dd>
 		</>
 	);
 };

src/features/instance/config/overview/components/HarperVersion.tsx

@@ -6,13 +6,13 @@ export const HarperVersion = ({
 	registrationInfo,
 }: {
 	loadingRegistration?: boolean;
-	registrationInfo: RegistrationInfoResponse;
+	registrationInfo?: RegistrationInfoResponse;
 }) => {
 	return (
 		<>
 			<dt className="font-bold text-sm/6">Harper Version</dt>
 			<dd className="text-sm/6 sm:mt-2">
-				{loadingRegistration ? <TextLoadingSkeleton className="w-10" /> : registrationInfo.version}
+				{loadingRegistration ? <TextLoadingSkeleton className="w-10" /> : registrationInfo?.version || 'Unknown'}
 			</dd>
 		</>
 	);

src/features/instance/config/overview/components/InstanceNodeName.tsx

@@ -8,7 +8,7 @@ export const InstanceNodeName = ({
 	loadingInstanceInfo?: boolean;
 	instanceInfo?: { name?: string } | undefined;
 }) => {
-	const simplifiedName = useMemo(() => instanceInfo?.name?.split('.')[0], [instanceInfo?.name]);
+	const simplifiedName = useMemo(() => instanceInfo?.name?.split('.')[0] || 'N/A', [instanceInfo?.name]);
 	return (
 		<>
 			<dt className="font-bold text-sm/6">Instance Name</dt>

src/features/instance/config/overview/components/InstanceURL.tsx

@@ -1,5 +1,8 @@
 import { TextLoadingSkeleton } from '@/components/TextLoadingSkeleton';
 import { Instance } from '@/lib/api.patch';
+import { getOperationsUrlForInstance } from '@/lib/urls/getOperationsUrlForInstance';
+import { Link } from '@tanstack/react-router';
+import { useMemo } from 'react';
 
 export const InstanceURL = ({
 	loadingInstanceInfo,
@@ -8,10 +11,15 @@ export const InstanceURL = ({
 	loadingInstanceInfo?: boolean;
 	instanceInfo?: Instance | undefined;
 }) => {
+	const instanceUrl = useMemo(() => instanceInfo ? getOperationsUrlForInstance(instanceInfo) : null, [instanceInfo]);
 	return (
 		<>
-			<dt className="font-bold text-sm/6">Instance URL</dt>
-			<dd className="text-sm/6 sm:mt-2">{loadingInstanceInfo ? <TextLoadingSkeleton /> : instanceInfo?.instanceFqdn}</dd>
+			<dt className="font-bold text-sm/6">Operations URL</dt>
+			<dd className="text-sm/6 sm:mt-2">{loadingInstanceInfo
+				? (<TextLoadingSkeleton />)
+				: instanceUrl
+					? (<Link to={instanceUrl} target="_blank" className="underline hover:text-blue-300">{instanceUrl}</Link>)
+					: 'N/A'}</dd>
 		</>
 	);
 };

src/features/instance/config/overview/index.tsx

@@ -1,3 +1,4 @@
+import { ApplyLicensesButton } from '@/components/ApplyLicensesButton';
 import { RestartButton } from '@/components/RestartButton';
 import { TextLoadingSkeleton } from '@/components/TextLoadingSkeleton';
 import { isLocalStudio } from '@/config/constants';
@@ -9,10 +10,13 @@ import { InstanceNodeName } from '@/features/instance/config/overview/components
 import { InstanceURL } from '@/features/instance/config/overview/components/InstanceURL';
 import { getConfigurationQueryOptions } from '@/features/instance/operations/queries/getConfiguration';
 import { getRegistrationInfoQueryOptions } from '@/features/instance/operations/queries/getRegistrationInfo';
+import { getUsageLicensesQueryOptions } from '@/features/instance/operations/queries/getUsageLicenses';
+import { Instance } from '@/lib/api.patch';
+import { keyBy } from '@/lib/keyBy';
 import Editor from '@monaco-editor/react';
-import { useSuspenseQuery } from '@tanstack/react-query';
-import { useParams } from '@tanstack/react-router';
-import { ReactNode } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useParams, useRouteContext } from '@tanstack/react-router';
+import { ReactNode, useMemo } from 'react';
 
 const LocalStudioOverview = ({ children }: { children: ReactNode }) => {
 	return <>{children}</>;
@@ -24,21 +28,37 @@ const CloudStudioOverview = ({ children }: { children: ReactNode }) => {
 
 export function ConfigOverviewIndex() {
 	const { clusterId, instanceId }: { instanceId?: string; clusterId: string; } = useParams({ strict: false });
+	const { instance: cloudInstance }: { instance?: Instance } = useRouteContext({ strict: false });
 	const targetNoun = (instanceId || isLocalStudio) ? 'Instance' : 'Cluster';
 	const instanceParams = useInstanceClientIdParams();
 
-	const { data: info, isLoading: loadingInstanceInfo } = useSuspenseQuery(
+	const { data: info, isLoading: loadingInstanceInfo } = useQuery(
 		getInstanceInfoQueryOptions({ clusterId, instanceId }),
 	);
+	const { data: appliedLicenses } = useQuery(
+		getUsageLicensesQueryOptions(instanceParams),
+	);
 	const clusterInfo = info?.cluster;
 	const instanceInfo = info?.instance;
-	const { data: registrationInfo, isLoading: loadingRegistration } = useSuspenseQuery(
+	const { data: registrationInfo, isLoading: loadingRegistration } = useQuery(
 		getRegistrationInfoQueryOptions(instanceParams),
 	);
-	const { data: configurationInfo, isLoading: loadingConfig } = useSuspenseQuery(
+	const { data: configurationInfo, isLoading: loadingConfig } = useQuery(
 		getConfigurationQueryOptions(instanceParams),
 	);
 
+	const newLicenses = useMemo(() => {
+		if (clusterId && !instanceId) {
+			// We won't check the licenses when running through a load balancer.
+			return [];
+		}
+		if (appliedLicenses && cloudInstance?.licenses) {
+			const appliedLicensesById = keyBy(appliedLicenses, 'id');
+			return cloudInstance.licenses.filter(cloudLicense => !appliedLicensesById[cloudLicense.id]);
+		}
+		return [];
+	}, [clusterId, instanceId, appliedLicenses, cloudInstance]);
+
 	return (
 		<div className="h-full flex flex-col">
 			{isLocalStudio ? (
@@ -61,7 +81,8 @@ export function ConfigOverviewIndex() {
 						<div className="px-4 pb-4 sm:col-span-2 sm:px-0">
 							<InstanceURL loadingInstanceInfo={loadingInstanceInfo} instanceInfo={instanceInfo} />
 						</div>
-						<div className="px-4 pb-4 text-right sm:col-span-1 sm:px-0">
+						<div className="px-4 pb-4 text-right sm:col-span-1 sm:px-0 grid gap-1">
+							{newLicenses?.length > 0 && (<ApplyLicensesButton newLicenses={newLicenses} />)}
 							<RestartButton targetNoun={targetNoun} instanceClient={instanceParams.instanceClient} operation="restart" />
 						</div>
 						<div className="px-4 pb-4 sm:col-span-1 sm:px-0">

src/features/instance/operations/mutations/installUsageLicense.ts

@@ -0,0 +1,24 @@
+import { InstanceClientConfig } from '@/config/instanceClientConfig';
+import { EntityIds } from '@/lib/authStore';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+interface InstallUsageLicenseFormData extends InstanceClientConfig {
+	license: string;
+}
+
+export async function installUsageLicense({ license, instanceClient }: InstallUsageLicenseFormData) {
+	const { data } = await instanceClient.post('/', {
+		operation: 'install_usage_license',
+		license,
+	});
+	return data;
+}
+
+export function useInstallUsageLicenseMutation(entityId: EntityIds) {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: installUsageLicense,
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: [entityId, 'get_usage_licenses'] }),
+	});
+}

src/features/instance/operations/queries/getUsageLicenses.ts

@@ -0,0 +1,40 @@
+import { InstanceClientIdConfig } from '@/config/instanceClientConfig';
+import { queryOptions } from '@tanstack/react-query';
+
+interface UsageLicense {
+	id: string;
+	level: string;
+	region: string;
+	reads: string;
+	writes: string;
+	readBytes: string;
+	writeBytes: string;
+	realTimeMessages: string;
+	realTimeBytes: string;
+	cpuTime: string;
+	storage: string;
+	usedReads: string;
+	usedWrites: string;
+	usedReadBytes: string;
+	usedWriteBytes: string;
+	usedRealTimeMessages: string;
+	usedRealTimeBytes: string;
+	usedCpuTime: string;
+	usedStorage: string;
+	expiration: string;
+	autoRenew: string;
+	__createdtime__: string;
+	__updatedtime__: string;
+}
+
+export function getUsageLicensesQueryOptions({ entityId, instanceClient }: InstanceClientIdConfig) {
+	return queryOptions({
+		queryKey: [entityId, 'get_usage_licenses'] as const,
+		queryFn: async () => {
+			const { data } = await instanceClient.post('/', {
+				operation: 'get_usage_licenses',
+			});
+			return data as UsageLicense[];
+		},
+	});
+}

src/hooks/useApplyLicensesClick.tsx

@@ -0,0 +1,132 @@
+import { useInstanceClient } from '@/config/useInstanceClient';
+import { installUsageLicense } from '@/features/instance/operations/mutations/installUsageLicense';
+import { getInstanceUserInfo } from '@/features/instance/operations/queries/getInstanceUserInfo';
+import { SchemaLicense } from '@/lib/api.gen';
+import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
+import { sleep } from '@/lib/sleep';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+
+interface ApplyLicensesClickParams {
+	licenses: SchemaLicense[];
+}
+
+interface ApplyLicensesClickResponse {
+	onApplyLicensesClick: () => void;
+	isApplyLicensesPending: boolean;
+}
+
+export function useApplyLicensesClick({ licenses }: ApplyLicensesClickParams): ApplyLicensesClickResponse {
+	const instanceClient = useInstanceClient();
+	const [isApplyLicensesPending, setIsApplyLicensesPending] = useState(false);
+	const onApplyLicensesClick = useCallback(async () => {
+		setIsApplyLicensesPending(true);
+
+		let canceled = false;
+		const toastConfig = {
+			duration: 60_000,
+			action: {
+				label: 'Cancel',
+				onClick: () => {
+					canceled = true;
+				},
+			},
+		};
+
+		const toastId = toast.loading('Applying Licenses', {
+			...toastConfig,
+			description: renderProgressUpdate(),
+		});
+
+		let licensesApplied = 0;
+
+		for (let i = 0; i < licenses.length; i++) {
+			const license = licenses[i];
+			if (!canceled) {
+				toast.loading(licenses.length === 1
+					? 'Applying License'
+					: `Applying License ${i + 1} of ${licenses.length}`, {
+					...toastConfig,
+					id: toastId,
+					description: renderProgressUpdate(i, licenses.length),
+				});
+				try {
+					// Make sure the instance is responding.
+					await getInstanceUserInfo({
+						instanceClient,
+					});
+					// Then install the usage license to it.
+					await installUsageLicense({
+						license: license.license,
+						instanceClient,
+					});
+					licensesApplied += 1;
+				} catch {
+					if (i !== licenses.length) {
+						// If it fails to applyLicenses, or wasn't available, warn for a bit then move on.
+						toast.loading(`Failed Applying License ${i + 1} of ${licenses.length}`, {
+							...toastConfig,
+							id: toastId,
+							description: 'We will carry on momentarily.',
+						});
+						await sleep(3000);
+					}
+				}
+			}
+		}
+
+		setIsApplyLicensesPending(false);
+
+		const licenseWord = licenses.length === 1 ? 'License' : 'Licenses';
+		if (canceled) {
+			toast.error('Cancelled', {
+				id: toastId,
+				description: `Applying the ${licenseWord.toLowerCase()} was partially cancelled.`,
+				duration: 10_000,
+				action: {
+					label: 'Dismiss',
+					onClick: () => toast.dismiss(),
+				},
+			});
+		} else if (licenses.length === licensesApplied) {
+			toast.success('Success', {
+				id: toastId,
+				description: `${licenseWord} applied!\nPlease restart your instance.`,
+				duration: 10_000,
+				action: {
+					label: 'Dismiss',
+					onClick: () => toast.dismiss(),
+				},
+			});
+		} else {
+			toast.error('Error', {
+				id: toastId,
+				description: `${licenseWord} not applied.\n`
+					+ [
+						licenses.length !== licensesApplied && `${licensesApplied} of ${licenses.length} ${licenseWord.toLowerCase()} applied.`,
+					].filter(excludeFalsy)[0],
+				duration: 10_000,
+				action: {
+					label: 'Dismiss',
+					onClick: () => toast.dismiss(),
+				},
+			});
+		}
+	}, [instanceClient, licenses]);
+
+
+	return {
+		onApplyLicensesClick,
+		isApplyLicensesPending,
+	};
+}
+
+function renderProgressUpdate(current?: number, total?: number) {
+	return (<>
+		{current !== undefined && total !== undefined && total > 0 && (
+			<div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+				<div className="bg-purple-600 h-2.5 rounded-full dark:bg-purple-500" style={{ width: (current === 0 ? 0 : (current / total * 100)) + '%' }}></div>
+			</div>)}
+		<div className="text-xs mt-2">Please don't close your browser or navigate away. This may take a bit.</div>
+	</>);
+}