change: [M3-7383] - Replace hardcoded prices for LKE HA with data from lke/types API endpoint

packages/api-v4/.changeset/pr-10505-added-1716400052332.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Added
+---
+
+New endpoint for LKE HA types used in pricing ([#10505](https://github.com/linode/manager/pull/10505))

packages/api-v4/src/kubernetes/kubernetes.ts

@@ -7,8 +7,8 @@ import Request, {
   setURL,
   setXFilter,
 } from '../request';
-import { Filter, Params, ResourcePage as Page } from '../types';
-import {
+import type { Filter, Params, ResourcePage as Page, PriceType } from '../types';
+import type {
   CreateKubeClusterPayload,
   KubeConfigResponse,
   KubernetesCluster,
@@ -180,3 +180,15 @@ export const recycleClusterNodes = (clusterID: number) =>
     setMethod('POST'),
     setURL(`${API_ROOT}/lke/clusters/${encodeURIComponent(clusterID)}/recycle`)
   );
+
+/**
+ * getKubernetesTypes
+ *
+ * Returns a paginated list of available Kubernetes types; used for dynamic pricing.
+ */
+export const getKubernetesTypes = (params?: Params) =>
+  Request<Page<PriceType>>(
+    setURL(`${API_ROOT}/lke/types`),
+    setMethod('GET'),
+    setParams(params)
+  );

packages/manager/.changeset/pr-10505-changed-1716400104404.md

@@ -0,0 +1,5 @@
+---
+'@linode/manager': Changed
+---
+
+Use dynamic HA pricing with `lke/types` endpoint ([#10505](https://github.com/linode/manager/pull/10505))

packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts

@@ -266,7 +266,7 @@ describe('LKE Cluster Creation with DC-specific pricing', () => {
     ui.regionSelect.find().type(`${dcSpecificPricingRegion.label}{enter}`);
 
     // Confirm that HA price updates dynamically once region selection is made.
-    cy.contains(/\(\$.*\/month\)/).should('be.visible');
+    cy.contains(/\$.*\/month/).should('be.visible');
 
     cy.get('[data-testid="ha-radio-button-yes"]').should('be.visible').click();
 

packages/manager/src/MainContent.tsx

@@ -130,7 +130,11 @@ const Domains = React.lazy(() =>
   }))
 );
 const Images = React.lazy(() => import('src/features/Images'));
-const Kubernetes = React.lazy(() => import('src/features/Kubernetes'));
+const Kubernetes = React.lazy(() =>
+  import('src/features/Kubernetes').then((module) => ({
+    default: module.Kubernetes,
+  }))
+);
 const ObjectStorage = React.lazy(() => import('src/features/ObjectStorage'));
 const Profile = React.lazy(() => import('src/features/Profile/Profile'));
 const LoadBalancers = React.lazy(() =>

packages/manager/src/components/RegionSelect/RegionSelect.tsx

@@ -70,7 +70,9 @@ export const RegionSelect = <
     regions,
   });
 
-  const selectedRegion = regionOptions.find((r) => r.id === value) ?? null;
+  const selectedRegion = value
+    ? regionOptions.find((r) => r.id === value)
+    : null;
 
   const disabledRegions = regionOptions.reduce<
     Record<string, DisableRegionOption>

packages/manager/src/components/RegionSelect/RegionSelect.types.ts

@@ -1,11 +1,10 @@
-import React from 'react';
-
 import type {
   AccountAvailability,
   Capabilities,
   Region,
   RegionSite,
 } from '@linode/api-v4';
+import type React from 'react';
 import type { EnhancedAutocompleteProps } from 'src/components/Autocomplete/Autocomplete';
 
 export interface DisableRegionOption {
@@ -49,7 +48,7 @@ export interface RegionSelectProps<
   /**
    * The ID of the selected region.
    */
-  value: null | string;
+  value: string | undefined;
   width?: number;
 }
 

packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx

@@ -1,4 +1,3 @@
-import { Capabilities } from '@linode/api-v4/lib/regions';
 import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
@@ -25,8 +24,9 @@ import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
 import { Box } from '../Box';
 import { DocsLink } from '../DocsLink/DocsLink';
 import { Link } from '../Link';
-import { RegionSelectProps } from '../RegionSelect/RegionSelect.types';
 
+import type { RegionSelectProps } from '../RegionSelect/RegionSelect.types';
+import type { Capabilities } from '@linode/api-v4/lib/regions';
 import type { LinodeCreateType } from 'src/features/Linodes/LinodesCreate/types';
 
 interface SelectRegionPanelProps {
@@ -158,7 +158,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
         onChange={(e, region) => handleSelection(region.id)}
         regionFilter={hideDistributedRegions ? 'core' : undefined}
         regions={regions ?? []}
-        value={selectedId || null}
+        value={selectedId}
         {...RegionSelectProps}
       />
       {showClonePriceWarning && (

packages/manager/src/factories/types.ts

@@ -173,6 +173,43 @@ export const volumeTypeFactory = Factory.Sync.makeFactory<PriceType>({
   transfer: 0,
 });
 
+export const lkeStandardAvailabilityTypeFactory = Factory.Sync.makeFactory<PriceType>(
+  {
+    id: 'lke-sa',
+    label: 'LKE Standard Availability',
+    price: {
+      hourly: 0.0,
+      monthly: 0.0,
+    },
+    region_prices: [],
+    transfer: 0,
+  }
+);
+
+export const lkeHighAvailabilityTypeFactory = Factory.Sync.makeFactory<PriceType>(
+  {
+    id: 'lke-ha',
+    label: 'LKE High Availability',
+    price: {
+      hourly: 0.09,
+      monthly: 60.0,
+    },
+    region_prices: [
+      {
+        hourly: 0.108,
+        id: 'id-cgk',
+        monthly: 72.0,
+      },
+      {
+        hourly: 0.126,
+        id: 'br-gru',
+        monthly: 84.0,
+      },
+    ],
+    transfer: 0,
+  }
+);
+
 export const objectStorageTypeFactory = Factory.Sync.makeFactory<PriceType>({
   id: 'objectstorage',
   label: 'Object Storage',

packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import * as React from 'react';
 
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
@@ -29,7 +28,7 @@ export const CloudPulseRegionSelect = React.memo(
         noMarginTop
         onChange={(e, region) => setRegion(region.id)}
         regions={regions ? regions : []}
-        value={null}
+        value={undefined}
       />
     );
   }

packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx

@@ -1,10 +1,3 @@
-import { Region } from '@linode/api-v4';
-import {
-  CreateKubeClusterPayload,
-  CreateNodePoolData,
-  KubeNodePoolResponse,
-} from '@linode/api-v4/lib/kubernetes';
-import { APIError } from '@linode/api-v4/lib/types';
 import { Divider } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import { pick, remove, update } from 'ramda';
@@ -14,7 +7,7 @@ import { useHistory } from 'react-router-dom';
 import { Box } from 'src/components/Box';
 import { DocsLink } from 'src/components/DocsLink/DocsLink';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import Select from 'src/components/EnhancedSelect/Select';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { Notice } from 'src/components/Notice/Notice';
@@ -34,6 +27,7 @@ import {
 } from 'src/queries/account/agreements';
 import {
   useCreateKubernetesClusterMutation,
+  useKubernetesTypesQuery,
   useKubernetesVersionQuery,
 } from 'src/queries/kubernetes';
 import { useRegionsQuery } from 'src/queries/regions/regions';
@@ -42,11 +36,9 @@ import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 import { extendType } from 'src/utilities/extendType';
 import { filterCurrentTypes } from 'src/utilities/filterCurrentLinodeTypes';
 import { plansNoticesUtils } from 'src/utilities/planNotices';
-import {
-  DOCS_LINK_LABEL_DC_PRICING,
-  LKE_HA_PRICE,
-} from 'src/utilities/pricing/constants';
-import { getDCSpecificPrice } from 'src/utilities/pricing/dynamicPricing';
+import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants';
+import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
+import { getDCSpecificPriceByType } from 'src/utilities/pricing/dynamicPricing';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
 import KubeCheckoutBar from '../KubeCheckoutBar';
@@ -58,9 +50,19 @@ import {
 import { HAControlPlane } from './HAControlPlane';
 import { NodePoolPanel } from './NodePoolPanel';
 
+import type {
+  CreateKubeClusterPayload,
+  CreateNodePoolData,
+  KubeNodePoolResponse,
+} from '@linode/api-v4/lib/kubernetes';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { Item } from 'src/components/EnhancedSelect/Select';
+
 export const CreateCluster = () => {
   const { classes } = useStyles();
-  const [selectedRegionID, setSelectedRegionID] = React.useState<string>('');
+  const [selectedRegionId, setSelectedRegionId] = React.useState<
+    string | undefined
+  >();
   const [nodePools, setNodePools] = React.useState<KubeNodePoolResponse[]>([]);
   const [label, setLabel] = React.useState<string | undefined>();
   const [version, setVersion] = React.useState<Item<string> | undefined>();
@@ -76,6 +78,16 @@ export const CreateCluster = () => {
   const { data: account } = useAccount();
   const { showHighAvailability } = getKubeHighAvailability(account);
 
+  const {
+    data: kubernetesHighAvailabilityTypesData,
+    isError: isErrorKubernetesTypes,
+    isLoading: isLoadingKubernetesTypes,
+  } = useKubernetesTypesQuery();
+
+  const lkeHAType = kubernetesHighAvailabilityTypesData?.find(
+    (type) => type.id === 'lke-ha'
+  );
+
   const {
     data: allTypes,
     error: typesError,
@@ -121,7 +133,7 @@ export const CreateCluster = () => {
       k8s_version,
       label,
       node_pools,
-      region: selectedRegionID,
+      region: selectedRegionId,
     };
 
     createKubernetesCluster(payload)
@@ -164,31 +176,23 @@ export const CreateCluster = () => {
     setLabel(newLabel ? newLabel : undefined);
   };
 
-  /**
-   * @param regionId - region selection or null if no selection made
-   * @returns dynamically calculated high availability price by region
-   */
-  const getHighAvailabilityPrice = (regionId: Region['id'] | null) => {
-    const dcSpecificPrice = regionId
-      ? getDCSpecificPrice({ basePrice: LKE_HA_PRICE, regionId })
-      : undefined;
-    return dcSpecificPrice ? parseFloat(dcSpecificPrice) : undefined;
-  };
+  const highAvailabilityPrice = getDCSpecificPriceByType({
+    regionId: selectedRegionId,
+    type: lkeHAType,
+  });
 
   const errorMap = getErrorMap(
     ['region', 'node_pools', 'label', 'k8s_version', 'versionLoad'],
     errors
   );
 
-  const selectedId = selectedRegionID || null;
-
   const {
     hasSelectedRegion,
     isPlanPanelDisabled,
     isSelectedRegionEligibleForPlan,
   } = plansNoticesUtils({
     regionsData,
-    selectedRegionID,
+    selectedRegionID: selectedRegionId,
   });
 
   if (typesError || regionsError || versionLoadError) {
@@ -227,9 +231,9 @@ export const CreateCluster = () => {
                 currentCapability="Kubernetes"
                 disableClearable
                 errorText={errorMap.region}
-                onChange={(e, region) => setSelectedRegionID(region.id)}
+                onChange={(e, region) => setSelectedRegionId(region.id)}
                 regions={regionsData}
-                value={selectedId}
+                value={selectedRegionId}
               />
             </Stack>
             <StyledDocsLinkContainer>
@@ -255,7 +259,14 @@ export const CreateCluster = () => {
           {showHighAvailability ? (
             <Box data-testid="ha-control-plane">
               <HAControlPlane
-                highAvailabilityPrice={getHighAvailabilityPrice(selectedId)}
+                highAvailabilityPrice={
+                  isErrorKubernetesTypes || !highAvailabilityPrice
+                    ? UNKNOWN_PRICE
+                    : highAvailabilityPrice
+                }
+                isErrorKubernetesTypes={isErrorKubernetesTypes}
+                isLoadingKubernetesTypes={isLoadingKubernetesTypes}
+                selectedRegionId={selectedRegionId}
                 setHighAvailability={setHighAvailability}
               />
             </Box>
@@ -276,7 +287,7 @@ export const CreateCluster = () => {
             isPlanPanelDisabled={isPlanPanelDisabled}
             isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan}
             regionsData={regionsData}
-            selectedRegionId={selectedRegionID}
+            selectedRegionId={selectedRegionId}
             types={typesData || []}
             typesLoading={typesLoading}
           />
@@ -287,10 +298,15 @@ export const CreateCluster = () => {
         data-testid="kube-checkout-bar"
       >
         <KubeCheckoutBar
+          highAvailabilityPrice={
+            isErrorKubernetesTypes || !highAvailabilityPrice
+              ? UNKNOWN_PRICE
+              : highAvailabilityPrice
+          }
           updateFor={[
             hasAgreed,
             highAvailability,
-            selectedRegionID,
+            selectedRegionId,
             nodePools,
             submitting,
             typesData,
@@ -302,9 +318,8 @@ export const CreateCluster = () => {
           createCluster={createCluster}
           hasAgreed={hasAgreed}
           highAvailability={highAvailability}
-          highAvailabilityPrice={getHighAvailabilityPrice(selectedId)}
           pools={nodePools}
-          region={selectedRegionID}
+          region={selectedRegionId}
           regionsData={regionsData}
           removePool={removePool}
           showHighAvailability={showHighAvailability}