feat: [M3-7025] - AGLB Details - Certificates Tab

packages/api-v4/src/aglb/index.ts

@@ -7,3 +7,5 @@ export * from './routes';
 export * from './service-targets';
 
 export * from './types';
+
+export * from './certificates';

packages/manager/.changeset/pr-9576-upcoming-features-1692664450264.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add AGLB Details - Certificate Tab ([#9576](https://github.com/linode/manager/pull/9576))

packages/manager/src/components/PaginationFooter/PaginationFooter.tsx

@@ -9,7 +9,7 @@ export const MIN_PAGE_SIZE = 25;
 
 export interface PaginationProps {
   count: number;
-  eventCategory: string;
+  eventCategory?: string;
   fixedSize?: boolean;
   page: number;
   pageSize: number;

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerCertificates.tsx

@@ -0,0 +1,188 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
+import Stack from '@mui/material/Stack';
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { ActionMenu } from 'src/components/ActionMenu';
+import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
+import { CircleProgress } from 'src/components/CircleProgress';
+import EnhancedSelect from 'src/components/EnhancedSelect';
+import { InputAdornment } from 'src/components/InputAdornment';
+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 { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
+import { TableRowError } from 'src/components/TableRowError/TableRowError';
+import { TableSortCell } from 'src/components/TableSortCell';
+import { TextField } from 'src/components/TextField';
+import { useOrder } from 'src/hooks/useOrder';
+import { usePagination } from 'src/hooks/usePagination';
+import { useLoadBalancerCertificatesQuery } from 'src/queries/aglb/certificates';
+
+import type { Certificate } from '@linode/api-v4';
+
+const PREFERENCE_KEY = 'loadbalancer-certificates';
+
+const CERTIFICATE_TYPE_LABEL_MAP: Record<Certificate['type'], string> = {
+  ca: 'Service Target Certificate',
+  downstream: 'TLS Certificate',
+};
+
+type CertificateTypeFilter = 'all' | Certificate['type'];
+
+export const LoadBalancerCertificates = () => {
+  const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
+
+  const [type, setType] = useState<CertificateTypeFilter>('all');
+  const [label, setLabel] = useState<string>();
+
+  const pagination = usePagination(1, PREFERENCE_KEY);
+
+  const { handleOrderChange, order, orderBy } = useOrder(
+    {
+      order: 'desc',
+      orderBy: 'label',
+    },
+    `${PREFERENCE_KEY}-order`
+  );
+
+  const filter = {
+    ['+order']: order,
+    ['+order_by']: orderBy,
+  };
+
+  if (type !== 'all') {
+    filter['type'] = type;
+  }
+
+  if (label) {
+    filter['label'] = label;
+  }
+
+  const { data, error, isLoading } = useLoadBalancerCertificatesQuery(
+    Number(loadbalancerId),
+    {
+      page: pagination.page,
+      page_size: pagination.pageSize,
+    },
+    filter
+  );
+
+  if (isLoading) {
+    return <CircleProgress />;
+  }
+
+  const filterOptions = [
+    { label: 'All', value: 'all' },
+    { label: 'TLS Certificates', value: 'tls' },
+    { label: 'Service Target Certificates', value: 'ca' },
+  ];
+
+  return (
+    <>
+      <Stack
+        alignItems="flex-end"
+        direction="row"
+        flexWrap="wrap"
+        gap={2}
+        mb={2}
+        mt={1.5}
+      >
+        <EnhancedSelect
+          styles={{
+            container: () => ({
+              maxWidth: '200px',
+            }),
+          }}
+          isClearable={false}
+          label="Certificate Type"
+          noMarginTop
+          onChange={(option) => setType(option?.value as CertificateTypeFilter)}
+          options={filterOptions}
+          value={filterOptions.find((option) => option.value === type) ?? null}
+        />
+        <TextField
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="Clear"
+                  onClick={() => setLabel('')}
+                  size="small"
+                  sx={{ padding: 'unset' }}
+                >
+                  <CloseIcon
+                    color="inherit"
+                    sx={{ color: '#aaa !important' }}
+                  />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          hideLabel
+          label="Filter"
+          onChange={(e) => setLabel(e.target.value)}
+          placeholder="Filter"
+          style={{ minWidth: '320px' }}
+          value={label}
+        />
+        <Box flexGrow={1} />
+        <Button buttonType="primary">Upload Certificate</Button>
+      </Stack>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableSortCell
+              active={orderBy === 'label'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label="label"
+            >
+              Label
+            </TableSortCell>
+            <TableSortCell
+              active={orderBy === 'type'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label="type"
+            >
+              Type
+            </TableSortCell>
+            <TableCell></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {error && <TableRowError colSpan={3} message={error?.[0].reason} />}
+          {data?.results === 0 && <TableRowEmpty colSpan={3} />}
+          {data?.data.map(({ label, type }) => (
+            <TableRow key={`${label}-${type}`}>
+              <TableCell>{label}</TableCell>
+              <TableCell>{CERTIFICATE_TYPE_LABEL_MAP[type]}</TableCell>
+              <TableCell actionCell>
+                <ActionMenu
+                  actionsList={[
+                    { onClick: () => null, title: 'Edit' },
+                    { onClick: () => null, title: 'Delete' },
+                  ]}
+                  ariaLabel={`Action Menu for certificate ${label}`}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <PaginationFooter
+        count={data?.results ?? 0}
+        handlePageChange={pagination.handlePageChange}
+        handleSizeChange={pagination.handlePageSizeChange}
+        page={pagination.page}
+        pageSize={pagination.pageSize}
+      />
+    </>
+  );
+};

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx

@@ -16,6 +16,12 @@ const LoadBalancerSummary = React.lazy(() =>
   }))
 );
 
+const LoadBalancerCertificates = React.lazy(() =>
+  import('./LoadBalancerCertificates').then((module) => ({
+    default: module.LoadBalancerCertificates,
+  }))
+);
+
 const LoadBalancerDetailLanding = () => {
   const history = useHistory();
 
@@ -88,7 +94,11 @@ const LoadBalancerDetailLanding = () => {
           <SafeTabPanel index={1}>1</SafeTabPanel>
           <SafeTabPanel index={2}>2</SafeTabPanel>
           <SafeTabPanel index={3}>3</SafeTabPanel>
-          <SafeTabPanel index={4}>4</SafeTabPanel>
+          <SafeTabPanel index={4}>
+            <React.Suspense fallback={<SuspenseLoader />}>
+              <LoadBalancerCertificates />
+            </React.Suspense>
+          </SafeTabPanel>
           <SafeTabPanel index={5}>5</SafeTabPanel>
         </TabPanels>
       </Tabs>

packages/manager/src/mocks/serverHandlers.ts

@@ -18,6 +18,7 @@ import {
   accountTransferFactory,
   appTokenFactory,
   betaFactory,
+  certificateFactory,
   configurationFactory,
   contactFactory,
   createRouteFactory,
@@ -389,6 +390,22 @@ const aglb = [
       return res(ctx.json({}));
     }
   ),
+  // Certificates
+  rest.get('*/v4beta/aglb/:id/certificates', (req, res, ctx) => {
+    const certificates = certificateFactory.buildList(3);
+    return res(ctx.json(makeResourcePage(certificates)));
+  }),
+  rest.post('*/v4beta/aglb/:id/certificates', (req, res, ctx) => {
+    return res(ctx.json(certificateFactory.build()));
+  }),
+  rest.put('*/v4beta/aglb/:id/certificates/:certId', (req, res, ctx) => {
+    const id = Number(req.params.certId);
+    const body = req.body as any;
+    return res(ctx.json(certificateFactory.build({ id, ...body })));
+  }),
+  rest.delete('*/v4beta/aglb/:id/certificates/:certId', (req, res, ctx) => {
+    return res(ctx.json({}));
+  }),
 ];
 
 const vpc = [

packages/manager/src/queries/aglb/certificates.ts

@@ -0,0 +1,24 @@
+import { getLoadbalancerCertificates } from '@linode/api-v4';
+import { useQuery } from 'react-query';
+
+import { QUERY_KEY } from './loadbalancers';
+
+import type {
+  APIError,
+  Certificate,
+  Filter,
+  Params,
+  ResourcePage,
+} from '@linode/api-v4';
+
+export const useLoadBalancerCertificatesQuery = (
+  id: number,
+  params: Params,
+  filter: Filter
+) => {
+  return useQuery<ResourcePage<Certificate>, APIError[]>(
+    [QUERY_KEY, 'loadbalancer', id, 'certificates', params, filter],
+    () => getLoadbalancerCertificates(id, params, filter),
+    { keepPreviousData: true }
+  );
+};