upcoming: [DI-23105] - Listing Alerts features: Pagination, Ordering,…

… Searching, Filtering (#11577)

* upcoming: [DI-23105] - Listing Alerts features: Pagination, Sorting, Search, Filtering

* Added changeset: Alerts Listing features: Pagination, Ordering, Searching, Filtering

* upcoming: [DI-23105] - Review changes

packages/manager/.changeset/pr-11577-upcoming-features-1738089050033.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Alerts Listing features: Pagination, Ordering, Searching, Filtering ([#11577](https://github.com/linode/manager/pull/11577))

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Paper } from '@linode/ui';
+import { Box, Paper } from '@linode/ui';
 import * as React from 'react';
 import {
   Redirect,
@@ -67,19 +67,6 @@ export const AlertsLanding = React.memo(() => {
           }}
         >
           <TabLinkList tabs={accessibleTabs} />
-          {pathname === `${url}/definitions` && (
-            <Box>
-              <Button
-                onClick={() => {
-                  history.push(`${url}/definitions/create`);
-                }}
-                buttonType="primary"
-                variant="contained"
-              >
-                Create
-              </Button>
-            </Box>
-          )}
         </Box>
         <Switch>
           <Route

packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { alertFactory } from 'src/factories';
+import { formatDate } from 'src/utilities/formatDate';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { AlertsListTable } from './AlertListTable';
+
+describe('Alert List Table test', () => {
+  it('should render the alert landing table ', async () => {
+    const { getByText } = renderWithTheme(
+      <AlertsListTable alerts={[]} isLoading={false} services={[]} />
+    );
+    expect(getByText('Alert Name')).toBeVisible();
+    expect(getByText('Service')).toBeVisible();
+    expect(getByText('Status')).toBeVisible();
+    expect(getByText('Last Modified')).toBeVisible();
+    expect(getByText('Created By')).toBeVisible();
+  });
+
+  it('should render the error message', async () => {
+    const { getByText } = renderWithTheme(
+      <AlertsListTable
+        alerts={[]}
+        error={[{ reason: 'Error in fetching the alerts' }]}
+        isLoading={false}
+        services={[]}
+      />
+    );
+    expect(getByText('Error in fetching the alerts')).toBeVisible();
+  });
+
+  it('should render the alert row', async () => {
+    const updated = new Date().toISOString();
+    const { getByText } = renderWithTheme(
+      <AlertsListTable
+        alerts={[
+          alertFactory.build({
+            created_by: 'user1',
+            label: 'Test Alert',
+            service_type: 'linode',
+            status: 'enabled',
+            updated,
+          }),
+        ]}
+        isLoading={false}
+        services={[{ label: 'Linode', value: 'linode' }]}
+      />
+    );
+    expect(getByText('Test Alert')).toBeVisible();
+    expect(getByText('Linode')).toBeVisible();
+    expect(getByText('Enabled')).toBeVisible();
+    expect(getByText('user1')).toBeVisible();
+    expect(
+      getByText(
+        formatDate(updated, {
+          format: 'MMM dd, yyyy, h:mm a',
+        })
+      )
+    ).toBeVisible();
+  });
+});

packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx

@@ -0,0 +1,119 @@
+import { Grid, TableBody, TableHead } from '@mui/material';
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import OrderBy from 'src/components/OrderBy';
+import Paginate from 'src/components/Paginate';
+import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { Table } from 'src/components/Table';
+import { TableCell } from 'src/components/TableCell';
+import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper';
+import { TableRow } from 'src/components/TableRow';
+import { TableSortCell } from 'src/components/TableSortCell';
+import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
+
+import { AlertTableRow } from './AlertTableRow';
+import { AlertListingTableLabelMap } from './constants';
+
+import type { Item } from '../constants';
+import type { APIError, Alert, AlertServiceType } from '@linode/api-v4';
+
+export interface AlertsListTableProps {
+  /**
+   * The list of alerts to display
+   */
+  alerts: Alert[];
+  /**
+   * An error to display if there was an issue fetching the alerts
+   */
+  error?: APIError[];
+  /**
+   * A boolean indicating whether the alerts are loading
+   */
+  isLoading: boolean;
+  /**
+   * The list of services to display in the table
+   */
+  services: Item<string, AlertServiceType>[];
+}
+
+export const AlertsListTable = React.memo((props: AlertsListTableProps) => {
+  const { alerts, error, isLoading, services } = props;
+  const _error = error
+    ? getAPIErrorOrDefault(error, 'Error in fetching the alerts.')
+    : undefined;
+  const history = useHistory();
+
+  const handleDetails = ({ id: _id, service_type: serviceType }: Alert) => {
+    history.push(`${location.pathname}/detail/${serviceType}/${_id}`);
+  };
+
+  return (
+    <OrderBy data={alerts} order="asc" orderBy="service">
+      {({ data: orderedData, handleOrderChange, order, orderBy }) => (
+        <Paginate data={orderedData}>
+          {({
+            count,
+            data: paginatedAndOrderedAlerts,
+            handlePageChange,
+            handlePageSizeChange,
+            page,
+            pageSize,
+          }) => (
+            <>
+              <Grid marginTop={2}>
+                <Table colCount={7} data-qa="alert-table" size="small">
+                  <TableHead>
+                    <TableRow>
+                      {AlertListingTableLabelMap.map((value) => (
+                        <TableSortCell
+                          active={orderBy === value.label}
+                          data-qa-header={value.label}
+                          data-qa-sorting={value.label}
+                          direction={order}
+                          handleClick={handleOrderChange}
+                          key={value.label}
+                          label={value.label}
+                          noWrap
+                        >
+                          {value.colName}
+                        </TableSortCell>
+                      ))}
+                      <TableCell actionCell />
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    <TableContentWrapper
+                      error={_error}
+                      length={paginatedAndOrderedAlerts.length}
+                      loading={isLoading}
+                      loadingProps={{ columns: 6 }}
+                    />
+                    {paginatedAndOrderedAlerts?.map((alert) => (
+                      <AlertTableRow
+                        handlers={{
+                          handleDetails: () => handleDetails(alert),
+                        }}
+                        alert={alert}
+                        key={alert.id}
+                        services={services}
+                      />
+                    ))}
+                  </TableBody>
+                </Table>
+              </Grid>
+              <PaginationFooter
+                count={count}
+                eventCategory="Alert Definitions Table"
+                handlePageChange={handlePageChange}
+                handleSizeChange={handlePageSizeChange}
+                page={page}
+                pageSize={pageSize}
+              />
+            </>
+          )}
+        </Paginate>
+      )}
+    </OrderBy>
+  );
+});