feat: Failover History table

src/views/domain-page/__fixtures__/domain-page-query-params.ts

@@ -23,4 +23,6 @@ export const mockDomainPageQueryParamsValues = {
   sortColumnArchival: 'startTime',
   sortOrderArchival: 'DESC',
   queryArchival: '',
+  clusterAttributeScope: undefined,
+  clusterAttributeValue: undefined,
 } as const satisfies PageQueryParamValues<typeof domainPageQueryParamsConfig>;

src/views/domain-page/config/domain-page-failovers-table-active-active.config.ts

@@ -0,0 +1,18 @@
+import { createElement } from 'react';
+
+import { type FailoverEvent } from '@/route-handlers/list-failover-history/list-failover-history.types';
+
+import DomainPageFailoverActiveActive from '../domain-page-failover-active-active/domain-page-failover-active-active';
+
+import domainPageFailoversTableConfig from './domain-page-failovers-table.config';
+
+const domainPageFailoversTableActiveActiveConfig = [
+  ...domainPageFailoversTableConfig.slice(0, 3),
+  {
+    ...domainPageFailoversTableConfig[3],
+    renderCell: (event: FailoverEvent) =>
+      createElement(DomainPageFailoverActiveActive, { failoverEvent: event }),
+  },
+];
+
+export default domainPageFailoversTableActiveActiveConfig;

src/views/domain-page/config/domain-page-failovers-table.config.ts

@@ -0,0 +1,48 @@
+import { createElement } from 'react';
+
+import FormattedDate from '@/components/formatted-date/formatted-date';
+import { type TableConfig } from '@/components/table/table.types';
+import { type FailoverEvent } from '@/route-handlers/list-failover-history/list-failover-history.types';
+import parseGrpcTimestamp from '@/utils/datetime/parse-grpc-timestamp';
+
+import DomainPageFailoverSingleCluster from '../domain-page-failover-single-cluster/domain-page-failover-single-cluster';
+import { FAILOVER_TYPE_LABEL_MAP } from '../domain-page-failovers/domain-page-failovers.constants';
+
+const domainPageFailoversTableConfig = [
+  {
+    name: 'Failover ID',
+    id: 'failoverId',
+    width: '35%',
+    renderCell: (event: FailoverEvent) => event.id,
+  },
+  {
+    name: 'Time',
+    id: 'time',
+    width: '15%',
+    renderCell: (event: FailoverEvent) =>
+      createElement(FormattedDate, {
+        timestampMs: event.createdTime
+          ? parseGrpcTimestamp(event.createdTime)
+          : null,
+      }),
+  },
+  {
+    name: 'Type',
+    id: 'type',
+    width: '10%',
+    renderCell: (event: FailoverEvent) =>
+      FAILOVER_TYPE_LABEL_MAP[event.failoverType],
+  },
+  {
+    name: 'Failover Information',
+    id: 'failoverInfo',
+    width: '40%',
+    renderCell: (event: FailoverEvent) =>
+      createElement(DomainPageFailoverSingleCluster, {
+        fromCluster: event.clusterFailovers[0].fromCluster?.activeClusterName,
+        toCluster: event.clusterFailovers[0].toCluster?.activeClusterName,
+      }),
+  },
+] as const satisfies TableConfig<FailoverEvent>;
+
+export default domainPageFailoversTableConfig;

src/views/domain-page/config/domain-page-query-params.config.ts

@@ -41,6 +41,9 @@ const domainPageQueryParamsConfig: [
   PageQueryParam<'sortColumnArchival', string>,
   PageQueryParam<'sortOrderArchival', SortOrder>,
   PageQueryParam<'queryArchival', string>,
+  // Failovers Tab query params
+  PageQueryParam<'clusterAttributeScope', string | undefined>,
+  PageQueryParam<'clusterAttributeValue', string | undefined>,
 ] = [
   {
     key: 'inputType',
@@ -163,6 +166,14 @@ const domainPageQueryParamsConfig: [
     queryParamKey: 'aquery',
     defaultValue: '',
   },
+  {
+    key: 'clusterAttributeScope',
+    queryParamKey: 'cs',
+  },
+  {
+    key: 'clusterAttributeValue',
+    queryParamKey: 'cv',
+  },
 ] as const;
 
 export default domainPageQueryParamsConfig;