upcoming: [M3-9113] - Add Interface History table (#12321)

* new branch for changes

* Added changeset: Add Linode Interface History table

* add mock data

* cleanup

* feedback pt 1

* increase mock data amount to test pagination

* fix routing, query goes through but don't see history

* fix tests tanstack router update

* fix some bugs

* one more

* fix types as per api updates

* oops fix test

* Added changeset: Update LinodeInterfaceHistory type as per API type changes

* update loading column size

* feature flag and update types

* flag the drawer itself

---------

Co-authored-by: Banks Nussman <[email protected]>
Co-authored-by: Banks Nussman <[email protected]>

Author: coliu-akamai

packages/api-v4/.changeset/pr-12321-upcoming-features-1751387005760.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Update LinodeInterfaceHistory type as per API type changes ([#12321](https://github.com/linode/manager/pull/12321))

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

@@ -342,16 +342,35 @@ export interface PublicInterfaceData {
 }
 
 // Other Linode Interface types
-export type LinodeInterfaceStatus = 'active' | 'deleted' | 'inactive';
 
 export interface LinodeInterfaceHistory {
+  /**
+   * When this version was created.
+   *
+   * @example 2025-09-16T15:01:32
+   */
   created: string;
-  event_id: number;
-  interface_data: string; // will come in as JSON string object that we'll need to parse
+  /**
+   * The JSON body returned in response to a successful PUT, POST, or DELETE operation on the interface.
+   */
+  interface_data: LinodeInterface;
+  /**
+   * The unique ID for this history version.
+   */
   interface_history_id: number;
+  /**
+   * The network interface defined in the version.
+   */
   interface_id: number;
+  /**
+   * The Linode the interface_id belongs to.
+   */
   linode_id: number;
-  status: LinodeInterfaceStatus;
+  /**
+   * The network interface's version.
+   *
+   * The first version from a POST is 1. The version number is incremented when the network interface configuration is changed.
+   */
   version: number;
 }
 

packages/manager/.changeset/pr-12321-upcoming-features-1748967361533.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Linode Interface History table ([#12321](https://github.com/linode/manager/pull/12321))

packages/manager/src/featureFlags.ts

@@ -58,6 +58,10 @@ interface LinodeInterfacesFlag extends BaseFeatureFlag {
    * Shows a Beta chip for UI elements related to Linode Interfaces
    */
   beta?: boolean;
+  /**
+   * Enables the Interface History Table
+   */
+  interface_history?: boolean;
   /**
    * Shows a New chip for UI elements related to Linode Interfaces
    */

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx

@@ -156,6 +156,7 @@ export const LinodeIPAddresses = (props: LinodeIPAddressesProps) => {
       from: '/linodes/$linodeId/networking',
     },
     preferenceKey: 'linode-ip-addresses',
+    prefix: 'linode-ip-addresses',
   });
 
   if (isLoading) {

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaces.tsx

@@ -1,12 +1,15 @@
 import { Box, Button, Drawer, Paper, Stack, Typography } from '@linode/ui';
-import { useNavigate, useParams } from '@tanstack/react-router';
+import { useLocation, useNavigate, useParams } from '@tanstack/react-router';
 import React, { useState } from 'react';
 
+import { useFlags } from 'src/hooks/useFlags';
+
 import { AddInterfaceDrawer } from './AddInterfaceDrawer/AddInterfaceDrawer';
 import { DeleteInterfaceDialog } from './DeleteInterfaceDialog';
 import { EditInterfaceDrawerContents } from './EditInterfaceDrawer/EditInterfaceDrawerContent';
 import { InterfaceDetailsDrawer } from './InterfaceDetailsDrawer/InterfaceDetailsDrawer';
 import { InterfaceSettingsForm } from './InterfaceSettingsForm';
+import { HistoryDialog } from './LinodeInterfacesHistory/HistoryDialog';
 import { LinodeInterfacesTable } from './LinodeInterfacesTable';
 
 interface Props {
@@ -16,9 +19,13 @@ interface Props {
 
 export const LinodeInterfaces = ({ linodeId, regionId }: Props) => {
   const navigate = useNavigate();
-  const { interfaceId } = useParams({
-    strict: false,
-  });
+  const location = useLocation();
+  const flags = useFlags();
+
+  const isHistoryTableEnabled =
+    flags.linodeInterfaces?.interface_history ?? false;
+
+  const { interfaceId } = useParams({ strict: false });
 
   const [isAddDrawerOpen, setIsAddDrawerOpen] = useState(false);
   const [isEditDrawerOpen, setIsEditDrawerOpen] = useState(false);
@@ -42,15 +49,13 @@ export const LinodeInterfaces = ({ linodeId, regionId }: Props) => {
     navigate({
       to: '/linodes/$linodeId/networking/interfaces/$interfaceId',
       params: { linodeId, interfaceId },
-      search: {
-        delete: undefined,
-        migrate: undefined,
-        rebuild: undefined,
-        rescue: undefined,
-        resize: undefined,
-        selectedImageId: undefined,
-        upgrade: undefined,
-      },
+    });
+  };
+
+  const onShowHistory = () => {
+    navigate({
+      to: '/linodes/$linodeId/networking/history',
+      params: { linodeId },
     });
   };
 
@@ -68,7 +73,15 @@ export const LinodeInterfaces = ({ linodeId, regionId }: Props) => {
       >
         <Typography variant="h3">Network Interfaces</Typography>
         <Stack direction="row" spacing={1}>
-          <Button onClick={() => setIsSettingsDrawerOpen(true)}>
+          {isHistoryTableEnabled && (
+            <Button buttonType="secondary" onClick={onShowHistory}>
+              Interface History
+            </Button>
+          )}
+          <Button
+            buttonType={isHistoryTableEnabled ? 'outlined' : 'secondary'}
+            onClick={() => setIsSettingsDrawerOpen(true)}
+          >
             Interface Settings
           </Button>
           <Button buttonType="primary" onClick={() => setIsAddDrawerOpen(true)}>
@@ -104,6 +117,18 @@ export const LinodeInterfaces = ({ linodeId, regionId }: Props) => {
         }
         open={Boolean(interfaceId)}
       />
+      {isHistoryTableEnabled && (
+        <HistoryDialog
+          linodeId={linodeId}
+          onClose={() =>
+            navigate({
+              to: '/linodes/$linodeId/networking',
+              params: { linodeId },
+            })
+          }
+          open={location.pathname.includes('networking/history')}
+        />
+      )}
       <Drawer
         onClose={() => setIsEditDrawerOpen(false)}
         open={isEditDrawerOpen}

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfacesHistory/HistoryDialog.test.tsx

@@ -0,0 +1,33 @@
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { HistoryDialog } from './HistoryDialog';
+
+const props = {
+  linodeId: 1,
+  onClose: vi.fn(),
+  open: true,
+};
+
+describe('LinodeInterfacesHistoryDialog', () => {
+  it('renders the LinodeInterfaceHistoryDialog', () => {
+    const { getByText } = renderWithTheme(<HistoryDialog {...props} />);
+
+    expect(getByText('Network Interfaces History')).toBeVisible();
+    expect(getByText('Created')).toBeVisible();
+    expect(getByText('Interface ID')).toBeVisible();
+    expect(getByText('Linode ID')).toBeVisible();
+    expect(getByText('Version')).toBeVisible();
+    expect(getByText('Close')).toBeVisible();
+  });
+
+  it('closes the drawer', async () => {
+    const { getByText } = renderWithTheme(<HistoryDialog {...props} />);
+
+    const closeButton = getByText('Close');
+    await userEvent.click(closeButton);
+    expect(props.onClose).toHaveBeenCalled();
+  });
+});

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfacesHistory/HistoryDialog.tsx

@@ -0,0 +1,31 @@
+import { ActionsPanel, Dialog } from '@linode/ui';
+import * as React from 'react';
+
+import { HistoryTable } from './HistoryTable';
+
+interface Props {
+  linodeId: number;
+  onClose: () => void;
+  open: boolean;
+}
+
+export const HistoryDialog = (props: Props) => {
+  const { linodeId, onClose, open } = props;
+
+  return (
+    <Dialog
+      fullWidth
+      onClose={onClose}
+      open={open}
+      title="Network Interfaces History"
+    >
+      <HistoryTable linodeId={linodeId} />
+      <ActionsPanel
+        secondaryButtonProps={{
+          label: 'Close',
+          onClick: onClose,
+        }}
+      />
+    </Dialog>
+  );
+};

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfacesHistory/HistoryTable.tsx

@@ -0,0 +1,109 @@
+import { useLinodeInterfacesHistory } from '@linode/queries';
+import * as React from 'react';
+
+import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { Table } from 'src/components/Table';
+import { TableBody } from 'src/components/TableBody';
+import { TableCell } from 'src/components/TableCell';
+import { TableHead } from 'src/components/TableHead';
+import { TableRow } from 'src/components/TableRow';
+import { TableSortCell } from 'src/components/TableSortCell';
+import { useOrderV2 } from 'src/hooks/useOrderV2';
+import { usePaginationV2 } from 'src/hooks/usePaginationV2';
+
+import { HistoryTableContent } from './HistoryTableContent';
+
+const preferenceKey = 'linode-interface-history';
+
+interface Props {
+  linodeId: number;
+}
+
+export const HistoryTable = (props: Props) => {
+  const { linodeId } = props;
+
+  const pagination = usePaginationV2({
+    currentRoute: '/linodes/$linodeId/networking/history',
+    preferenceKey: `${preferenceKey}`,
+  });
+
+  const { handleOrderChange, order, orderBy } = useOrderV2({
+    initialRoute: {
+      defaultOrder: {
+        order: 'desc',
+        orderBy: 'interface_id',
+      },
+      from: '/linodes/$linodeId/networking/history',
+    },
+    preferenceKey: `${preferenceKey}-order`,
+    prefix: preferenceKey,
+  });
+
+  const filter = {
+    ['+order']: order,
+    ['+order_by']: orderBy,
+  };
+
+  const {
+    data: interfaceHistory,
+    error,
+    isLoading,
+  } = useLinodeInterfacesHistory(
+    linodeId,
+    {
+      page: pagination.page,
+      page_size: pagination.pageSize,
+    },
+    filter
+  );
+
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Created</TableCell>
+            <TableSortCell
+              active={orderBy === 'interface_id'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label={'interface_id'}
+            >
+              Interface ID
+            </TableSortCell>
+            <TableSortCell
+              active={orderBy === 'linode_id'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label={'linode_id'}
+            >
+              Linode ID
+            </TableSortCell>
+            <TableSortCell
+              active={orderBy === 'version'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label={'version'}
+            >
+              Version
+            </TableSortCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <HistoryTableContent
+            data={interfaceHistory?.data}
+            error={error}
+            isLoading={isLoading}
+          />
+        </TableBody>
+      </Table>
+      <PaginationFooter
+        count={interfaceHistory?.results ?? 0}
+        handlePageChange={pagination.handlePageChange}
+        handleSizeChange={pagination.handlePageSizeChange}
+        page={pagination.page}
+        pageSize={pagination.pageSize}
+      />
+    </>
+  );
+};

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfacesHistory/HistoryTableContent.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
+import { TableCell } from 'src/components/TableCell';
+import { TableRow } from 'src/components/TableRow';
+import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
+import { TableRowError } from 'src/components/TableRowError/TableRowError';
+import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
+
+import type { APIError, LinodeInterfaceHistory } from '@linode/api-v4';
+
+interface Props {
+  data: LinodeInterfaceHistory[] | undefined;
+  error: APIError[] | null;
+  isLoading: boolean;
+}
+
+export const HistoryTableContent = (props: Props) => {
+  const { data, error, isLoading } = props;
+
+  const cols = 4;
+
+  if (isLoading) {
+    return <TableRowLoading columns={cols} rows={1} />;
+  }
+
+  if (error) {
+    return <TableRowError colSpan={cols} message={error?.[0].reason} />;
+  }
+
+  if (data?.length === 0) {
+    return (
+      <TableRowEmpty
+        colSpan={cols}
+        message="There is no network interface history for this Linode."
+      />
+    );
+  }
+
+  return data?.map((history) => (
+    <TableRow key={history.interface_history_id}>
+      <TableCell>
+        <DateTimeDisplay value={history.created} />
+      </TableCell>
+      <TableCell>{history.interface_id}</TableCell>
+      <TableCell>{history.linode_id}</TableCell>
+      <TableCell>{history.version}</TableCell>
+    </TableRow>
+  ));
+};