feat: [LKEAPIFW-428] LKE clusters should have IP ACL integration on CM (part 1)

packages/api-v4/.changeset/pr-10968-added-1727966811522.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Added
+---
+
+ACL related endpoints and types for LKE clusters ([#10968](https://github.com/linode/manager/pull/10968))

packages/api-v4/src/account/types.ts

@@ -70,6 +70,7 @@ export type AccountCapability =
   | 'Kubernetes'
   | 'Linodes'
   | 'LKE HA Control Planes'
+  | 'LKE Network Access Control List (IP ACL)'
   | 'Machine Images'
   | 'Managed Databases'
   | 'Managed Databases Beta'

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

@@ -15,6 +15,7 @@ import type {
   KubernetesEndpointResponse,
   KubernetesDashboardResponse,
   KubernetesVersion,
+  KubernetesControlPlaneACLPayload,
 } from './types';
 
 /**
@@ -221,3 +222,38 @@ export const getKubernetesTypes = (params?: Params) =>
     setMethod('GET'),
     setParams(params)
   );
+
+/**
+ * getKubernetesClusterControlPlaneACL
+ *
+ * Return control plane access list about a single Kubernetes cluster
+ *
+ */
+export const getKubernetesClusterControlPlaneACL = (clusterID: number) =>
+  Request<KubernetesControlPlaneACLPayload>(
+    setMethod('GET'),
+    setURL(
+      `${API_ROOT}/lke/clusters/${encodeURIComponent(
+        clusterID
+      )}/control_plane_acl`
+    )
+  );
+
+/**
+ * updateKubernetesClusterControlPlaneACL
+ *
+ * Update an existing ACL from a single Kubernetes cluster.
+ */
+export const updateKubernetesClusterControlPlaneACL = (
+  clusterID: number,
+  data: Partial<KubernetesControlPlaneACLPayload>
+) =>
+  Request<KubernetesControlPlaneACLPayload>(
+    setMethod('PUT'),
+    setURL(
+      `${API_ROOT}/lke/clusters/${encodeURIComponent(
+        clusterID
+      )}/control_plane_acl`
+    ),
+    setData(data)
+  );

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

@@ -60,8 +60,22 @@ export interface KubernetesDashboardResponse {
   url: string;
 }
 
+export interface KubernetesControlPlaneACLPayload {
+  acl: ControlPlaneACLOptions;
+}
+
+export interface ControlPlaneACLOptions {
+  enabled?: boolean;
+  'revision-id'?: string;
+  addresses?: null | {
+    ipv4?: null | string[];
+    ipv6?: null | string[];
+  };
+}
+
 export interface ControlPlaneOptions {
   high_availability?: boolean;
+  acl?: ControlPlaneACLOptions;
 }
 
 export interface CreateKubeClusterPayload {

packages/manager/.changeset/pr-10968-added-1727901904107.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+IP ACL integration to LKE clusters ([#10968](https://github.com/linode/manager/pull/10968))

packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts

@@ -46,8 +46,14 @@ import { Interception } from 'cypress/types/net-stubbing';
 const expectedGranularityArray = ['Auto', '1 day', '1 hr', '5 min'];
 const timeDurationToSelect = 'Last 24 Hours';
 
-const { metrics, id, serviceType, dashboardName, region, resource } =
-  widgetDetails.linode;
+const {
+  metrics,
+  id,
+  serviceType,
+  dashboardName,
+  region,
+  resource,
+} = widgetDetails.linode;
 
 const dashboard = dashboardFactory.build({
   label: dashboardName,

packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx

@@ -1,7 +1,5 @@
 import Close from '@mui/icons-material/Close';
-import { InputBaseProps } from '@mui/material/InputBase';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -13,7 +11,10 @@ import { StyledLinkButtonBox } from 'src/components/SelectFirewallPanel/SelectFi
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
-import { ExtendedIP } from 'src/utilities/ipUtils';
+
+import type { InputBaseProps } from '@mui/material/InputBase';
+import type { Theme } from '@mui/material/styles';
+import type { ExtendedIP } from 'src/utilities/ipUtils';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   addIP: {
@@ -66,6 +67,7 @@ interface Props {
   helperText?: string;
   inputProps?: InputBaseProps;
   ips: ExtendedIP[];
+  isLinkStyled?: boolean;
   onBlur?: (ips: ExtendedIP[]) => void;
   onChange: (ips: ExtendedIP[]) => void;
   placeholder?: string;
@@ -83,6 +85,7 @@ export const MultipleIPInput = React.memo((props: Props) => {
     forVPCIPv4Ranges,
     helperText,
     ips,
+    isLinkStyled,
     onBlur,
     onChange,
     placeholder,
@@ -128,20 +131,21 @@ export const MultipleIPInput = React.memo((props: Props) => {
     return null;
   }
 
-  const addIPButton = forVPCIPv4Ranges ? (
-    <StyledLinkButtonBox>
-      <LinkButton onClick={addNewInput}>{buttonText}</LinkButton>
-    </StyledLinkButtonBox>
-  ) : (
-    <Button
-      buttonType="secondary"
-      className={classes.addIP}
-      compactX
-      onClick={addNewInput}
-    >
-      {buttonText ?? 'Add an IP'}
-    </Button>
-  );
+  const addIPButton =
+    forVPCIPv4Ranges || isLinkStyled ? (
+      <StyledLinkButtonBox sx={{ marginTop: isLinkStyled ? '8px' : '12px' }}>
+        <LinkButton onClick={addNewInput}>{buttonText}</LinkButton>
+      </StyledLinkButtonBox>
+    ) : (
+      <Button
+        buttonType="secondary"
+        className={classes.addIP}
+        compactX
+        onClick={addNewInput}
+      >
+        {buttonText ?? 'Add an IP'}
+      </Button>
+    );
 
   return (
     <div className={cx(classes.root, className)}>

packages/manager/src/factories/dashboards.ts

@@ -51,8 +51,8 @@ export const widgetFactory = Factory.Sync.makeFactory<Widgets>({
   y_label: Factory.each((i) => `y_label_${i}`),
 });
 
-export const dashboardMetricFactory =
-  Factory.Sync.makeFactory<AvailableMetrics>({
+export const dashboardMetricFactory = Factory.Sync.makeFactory<AvailableMetrics>(
+  {
     available_aggregate_functions: ['min', 'max', 'avg', 'sum'],
     dimensions: [],
     label: Factory.each((i) => `widget_label_${i}`),
@@ -62,25 +62,28 @@ export const dashboardMetricFactory =
       (i) => scrape_interval[i % scrape_interval.length]
     ),
     unit: 'defaultUnit',
-  });
+  }
+);
 
-export const cloudPulseMetricsResponseDataFactory =
-  Factory.Sync.makeFactory<CloudPulseMetricsResponseData>({
+export const cloudPulseMetricsResponseDataFactory = Factory.Sync.makeFactory<CloudPulseMetricsResponseData>(
+  {
     result: [
       {
         metric: {},
         values: [],
       },
     ],
     result_type: 'matrix',
-  });
+  }
+);
 
-export const cloudPulseMetricsResponseFactory =
-  Factory.Sync.makeFactory<CloudPulseMetricsResponse>({
+export const cloudPulseMetricsResponseFactory = Factory.Sync.makeFactory<CloudPulseMetricsResponse>(
+  {
     data: cloudPulseMetricsResponseDataFactory.build(),
     isPartial: false,
     stats: {
       series_fetched: 2,
     },
     status: 'success',
-  });
+  }
+);

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

@@ -0,0 +1,132 @@
+import { Box, FormLabel } from '@mui/material';
+import * as React from 'react';
+
+import { ErrorMessage } from 'src/components/ErrorMessage';
+import { FormControl } from 'src/components/FormControl';
+import { FormControlLabel } from 'src/components/FormControlLabel';
+import { Link } from 'src/components/Link';
+import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
+import { Notice } from 'src/components/Notice/Notice';
+import { Toggle } from 'src/components/Toggle/Toggle';
+import { Typography } from 'src/components/Typography';
+import { validateIPs } from 'src/utilities/ipUtils';
+
+import type { ExtendedIP } from 'src/utilities/ipUtils';
+
+export interface ControlPlaneACLProps {
+  enableControlPlaneACL: boolean;
+  errorText: string | undefined;
+  handleIPv4Change: (ips: ExtendedIP[]) => void;
+  handleIPv6Change: (ips: ExtendedIP[]) => void;
+  ipV4Addr: ExtendedIP[];
+  ipV6Addr: ExtendedIP[];
+  setControlPlaneACL: (enabled: boolean) => void;
+}
+
+export const IPACLCopy = () => (
+  <Typography>
+    This is the text for Control Plane Access Control.{' '}
+    <Link to="https://www.linode.com/docs/guides/enable-lke-high-availability/">
+      Learn more.
+    </Link>
+  </Typography>
+);
+
+export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
+  const {
+    enableControlPlaneACL,
+    errorText,
+    handleIPv4Change,
+    handleIPv6Change,
+    ipV4Addr,
+    ipV6Addr,
+    setControlPlaneACL,
+  } = props;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setControlPlaneACL(!enableControlPlaneACL);
+  };
+
+  const handleIPv4ChangeCB = React.useCallback(
+    (_ips: ExtendedIP[]) => {
+      handleIPv4Change(_ips);
+    },
+    [handleIPv4Change]
+  );
+
+  const handleIPv6ChangeCB = React.useCallback(
+    (_ips: ExtendedIP[]) => {
+      handleIPv6Change(_ips);
+    },
+    [handleIPv6Change]
+  );
+
+  return (
+    <>
+      <FormControl data-testid="control-plane-ipacl-form">
+        <FormLabel id="ipacl-radio-buttons-group-label">
+          <Typography variant="inherit">
+            Control Plane Access Control (IPACL)
+          </Typography>
+        </FormLabel>
+        {errorText && (
+          <Notice spacingTop={8} variant="error">
+            <ErrorMessage message={errorText} />{' '}
+          </Notice>
+        )}
+        <Typography mb={1}>
+          This is the text for Control Plane Access Control.{' '}
+          <Link to="https://www.linode.com/docs/guides/enable-lke-high-availability/">
+            Learn more.
+          </Link>
+        </Typography>
+        <FormControlLabel
+          control={
+            <Toggle
+              checked={enableControlPlaneACL}
+              name="ipacl-checkbox"
+              onChange={(e) => handleChange(e)}
+            />
+          }
+          label="Enable IPACL"
+        />
+      </FormControl>
+      {enableControlPlaneACL && (
+        <Box sx={{ marginBottom: 3, maxWidth: 450 }}>
+          <MultipleIPInput
+            onBlur={(_ips: ExtendedIP[]) => {
+              const validatedIPs = validateIPs(_ips, {
+                allowEmptyAddress: false,
+                errorMessage: 'Must be a valid IPv4 address.',
+              });
+              handleIPv4ChangeCB(validatedIPs);
+            }}
+            buttonText="Add IPv4 Address"
+            ips={ipV4Addr}
+            isLinkStyled
+            onChange={handleIPv4ChangeCB}
+            placeholder="0.0.0.0/0"
+            title="IPv4 Addresses or CIDRs"
+          />
+          <Box marginTop={2}>
+            <MultipleIPInput
+              onBlur={(_ips: ExtendedIP[]) => {
+                const validatedIPs = validateIPs(_ips, {
+                  allowEmptyAddress: false,
+                  errorMessage: 'Must be a valid IPv6 address.',
+                });
+                handleIPv6ChangeCB(validatedIPs);
+              }}
+              buttonText="Add IPv6 Address"
+              ips={ipV6Addr}
+              isLinkStyled
+              onChange={handleIPv6ChangeCB}
+              placeholder="::/0"
+              title="IPv6 Addresses or CIDRs"
+            />
+          </Box>
+        </Box>
+      )}
+    </>
+  );
+};