upcoming: [M3-8032] – Add Encrypted/Not Encrypted status to Node Pool table

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

@@ -12,7 +12,12 @@ import Request, {
   setXFilter,
 } from '../request';
 import { Filter, Params, ResourcePage as Page } from '../types';
-import { CreateImagePayload, Image, ImageUploadPayload, UploadImageResponse } from './types';
+import {
+  CreateImagePayload,
+  Image,
+  ImageUploadPayload,
+  UploadImageResponse,
+} from './types';
 
 /**
  * Get information about a single Image.

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

@@ -1,4 +1,4 @@
-import type { EncryptionStatus } from 'src/linodes';
+import type { EncryptionStatus } from '../linodes';
 
 export interface KubernetesCluster {
   created: string;

packages/manager/.changeset/pr-10480-upcoming-features-1716321944627.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Encrypted/Not Encrypted status to LKE Node Pool table ([#10480](https://github.com/linode/manager/pull/10480))

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx

@@ -1,7 +1,3 @@
-import {
-  AutoscaleSettings,
-  PoolNodeResponse,
-} from '@linode/api-v4/lib/kubernetes';
 import { Theme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
@@ -13,8 +9,15 @@ import { Typography } from 'src/components/Typography';
 
 import { NodeTable } from './NodeTable';
 
+import type {
+  AutoscaleSettings,
+  PoolNodeResponse,
+} from '@linode/api-v4/lib/kubernetes';
+import type { EncryptionStatus } from '@linode/api-v4/lib/linodes/types';
+
 interface Props {
   autoscaler: AutoscaleSettings;
+  encryptionStatus: EncryptionStatus | undefined;
   handleClickResize: (poolId: number) => void;
   isOnlyNodePool: boolean;
   nodes: PoolNodeResponse[];
@@ -40,9 +43,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
 }));
 
-const NodePool: React.FC<Props> = (props) => {
+export const NodePool = (props: Props) => {
   const {
     autoscaler,
+    encryptionStatus,
     handleClickResize,
     isOnlyNodePool,
     nodes,
@@ -126,6 +130,7 @@ const NodePool: React.FC<Props> = (props) => {
         xs={12}
       >
         <NodeTable
+          encryptionStatus={encryptionStatus}
           nodes={nodes}
           openRecycleNodeDialog={openRecycleNodeDialog}
           poolId={poolId}
@@ -135,5 +140,3 @@ const NodePool: React.FC<Props> = (props) => {
     </Grid>
   );
 };
-
-export default NodePool;

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx

@@ -1,14 +1,14 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
+import Grid from '@mui/material/Unstable_Grid2';
 import React, { useState } from 'react';
 import { Waypoint } from 'react-waypoint';
+import { makeStyles } from 'tss-react/mui';
 
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { Typography } from 'src/components/Typography';
 import { Paper } from 'src/components/Paper';
+import { Typography } from 'src/components/Typography';
 import { useAllKubernetesNodePoolQuery } from 'src/queries/kubernetes';
 import { useSpecificTypes } from 'src/queries/types';
 import { extendTypesQueryResult } from 'src/utilities/extendType';
@@ -18,7 +18,7 @@ import { RecycleNodePoolDialog } from '../RecycleNodePoolDialog';
 import { AddNodePoolDrawer } from './AddNodePoolDrawer';
 import { AutoscalePoolDialog } from './AutoscalePoolDialog';
 import { DeleteNodePoolDialog } from './DeleteNodePoolDialog';
-import NodePool from './NodePool';
+import { NodePool } from './NodePool';
 import { RecycleNodeDialog } from './RecycleNodeDialog';
 import { ResizeNodePoolDrawer } from './ResizeNodePoolDrawer';
 
@@ -152,7 +152,7 @@ export const NodePoolsDisplay = (props: Props) => {
           <Grid container direction="column">
             <Grid xs={12}>
               {_pools?.map((thisPool) => {
-                const { id, nodes } = thisPool;
+                const { disk_encryption, id, nodes } = thisPool;
 
                 const thisPoolType = types?.find(
                   (thisType) => thisType.id === thisPool.type
@@ -181,6 +181,7 @@ export const NodePoolsDisplay = (props: Props) => {
                         setIsRecycleNodeOpen(true);
                       }}
                       autoscaler={thisPool.autoscaler}
+                      encryptionStatus={disk_encryption}
                       handleClickResize={handleOpenResizeDrawer}
                       isOnlyNodePool={pools?.length === 1}
                       nodes={nodes ?? []}

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts

@@ -19,7 +19,6 @@ export const StyledTableRow = styled(TableRow, {
     opacity: 1,
   },
   marginLeft: 4,
-  top: 1,
 }));
 
 export const StyledTable = styled(Table, {

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.test.tsx

@@ -11,6 +11,7 @@ const mockLinodes = linodeFactory.buildList(3);
 const mockKubeNodes = kubeLinodeFactory.buildList(3);
 
 const props: Props = {
+  encryptionStatus: 'enabled',
   nodes: mockKubeNodes,
   openRecycleNodeDialog: vi.fn(),
   poolId: 1,

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx

@@ -1,6 +1,11 @@
-import { PoolNodeResponse } from '@linode/api-v4/lib/kubernetes';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
+import VerticalDivider from 'src/assets/icons/divider-vertical.svg';
+import Lock from 'src/assets/icons/lock.svg';
+import Unlock from 'src/assets/icons/unlock.svg';
+import { Box } from 'src/components/Box';
+import { useIsDiskEncryptionFeatureEnabled } from 'src/components/DiskEncryption/utils';
 import OrderBy from 'src/components/OrderBy';
 import Paginate from 'src/components/Paginate';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
@@ -11,6 +16,7 @@ import { TableFooter } from 'src/components/TableFooter';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
+import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
 import { LinodeWithMaintenance } from 'src/utilities/linodes';
@@ -19,21 +25,52 @@ import { NodeRow as _NodeRow } from './NodeRow';
 import { StyledTable } from './NodeTable.styles';
 
 import type { NodeRow } from './NodeRow';
+import type { PoolNodeResponse } from '@linode/api-v4/lib/kubernetes';
+import type { EncryptionStatus } from '@linode/api-v4/lib/linodes/types';
 
 export interface Props {
+  encryptionStatus: EncryptionStatus | undefined;
   nodes: PoolNodeResponse[];
   openRecycleNodeDialog: (nodeID: string, linodeLabel: string) => void;
   poolId: number;
   typeLabel: string;
 }
 
 export const NodeTable = React.memo((props: Props) => {
-  const { nodes, openRecycleNodeDialog, poolId, typeLabel } = props;
+  const {
+    encryptionStatus,
+    nodes,
+    openRecycleNodeDialog,
+    poolId,
+    typeLabel,
+  } = props;
 
   const { data: linodes, error, isLoading } = useAllLinodesQuery();
+  const {
+    isDiskEncryptionFeatureEnabled,
+  } = useIsDiskEncryptionFeatureEnabled();
 
   const rowData = nodes.map((thisNode) => nodeToRow(thisNode, linodes ?? []));
 
+  const encryptedStatusJSX =
+    encryptionStatus === 'enabled' ? (
+      <>
+        <StyledVerticalDivider />
+        <Lock />
+        <StyledTypography>Encrypted</StyledTypography>
+      </>
+    ) : encryptionStatus === 'disabled' ? (
+      <>
+        <StyledVerticalDivider />
+        <Unlock />
+        <StyledTypography>Not Encrypted</StyledTypography>
+        <TooltipIcon
+          status="help"
+          text="To enable disk encryption, delete the node pool and create a new node pool. New node pools are always encrypted."
+        />
+      </>
+    ) : null;
+
   return (
     <OrderBy data={rowData} order={'asc'} orderBy={'label'}>
       {({ data: orderedData, handleOrderChange, order, orderBy }) => (
@@ -116,7 +153,19 @@ export const NodeTable = React.memo((props: Props) => {
                 <TableFooter>
                   <TableRow>
                     <TableCell colSpan={4}>
-                      <Typography>Pool ID {poolId}</Typography>
+                      {isDiskEncryptionFeatureEnabled &&
+                      encryptionStatus !== undefined ? (
+                        <Box
+                          alignItems="center"
+                          display="flex"
+                          flexDirection="row"
+                        >
+                          <Typography>Pool ID {poolId}</Typography>
+                          {encryptedStatusJSX}
+                        </Box>
+                      ) : (
+                        <Typography>Pool ID {poolId}</Typography>
+                      )}
                     </TableCell>
                   </TableRow>
                 </TableFooter>
@@ -157,3 +206,15 @@ export const nodeToRow = (
     nodeStatus: node.status,
   };
 };
+
+export const StyledVerticalDivider = styled(VerticalDivider, {
+  label: 'StyledVerticalDivider',
+})(({ theme }) => ({
+  margin: `0 ${theme.spacing(2)}`,
+}));
+
+export const StyledTypography = styled(Typography, {
+  label: 'StyledTypography',
+})(({ theme }) => ({
+  margin: `0 0 0 ${theme.spacing()}`,
+}));

packages/manager/src/mocks/serverHandlers.ts

@@ -849,9 +849,14 @@ export const handlers = [
     return HttpResponse.json(cluster);
   }),
   http.get('*/lke/clusters/:clusterId/pools', async () => {
-    const pools = nodePoolFactory.buildList(10);
+    const encryptedPools = nodePoolFactory.buildList(5);
+    const unencryptedPools = nodePoolFactory.buildList(5, {
+      disk_encryption: 'disabled',
+    });
     nodePoolFactory.resetSequenceNumber();
-    return HttpResponse.json(makeResourcePage(pools));
+    return HttpResponse.json(
+      makeResourcePage([...encryptedPools, ...unencryptedPools])
+    );
   }),
   http.get('*/lke/clusters/*/api-endpoints', async () => {
     const endpoints = kubeEndpointFactory.buildList(2);