fix: Various fixes for Domain Failover History

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

@@ -7,9 +7,9 @@ import DomainPageFailoverActiveActive from '../domain-page-failover-active-activ
 import domainPageFailoversTableConfig from './domain-page-failovers-table.config';
 
 const domainPageFailoversTableActiveActiveConfig = [
-  ...domainPageFailoversTableConfig.slice(0, 3),
+  ...domainPageFailoversTableConfig.slice(0, 2),
   {
-    ...domainPageFailoversTableConfig[3],
+    ...domainPageFailoversTableConfig[2],
     renderCell: (event: FailoverEvent) =>
       createElement(DomainPageFailoverActiveActive, { failoverEvent: event }),
   },

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

@@ -6,7 +6,6 @@ import { type FailoverEvent } from '@/route-handlers/list-failover-history/list-
 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 = [
   {
@@ -26,17 +25,10 @@ const domainPageFailoversTableConfig = [
           : null,
       }),
   },
-  {
-    name: 'Type',
-    id: 'type',
-    width: '10%',
-    renderCell: (event: FailoverEvent) =>
-      FAILOVER_TYPE_LABEL_MAP[event.failoverType],
-  },
   {
     name: 'Failover Information',
     id: 'failoverInfo',
-    width: '40%',
+    width: '50%',
     renderCell: (event: FailoverEvent) =>
       createElement(DomainPageFailoverSingleCluster, {
         fromCluster: event.clusterFailovers[0]?.fromCluster?.activeClusterName,

src/views/domain-page/domain-page-failover-active-active/__tests__/domain-page-failover-active-active.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@/test-utils/rtl';
 import * as usePageQueryParamsModule from '@/hooks/use-page-query-params/use-page-query-params';
 import { type FailoverEvent } from '@/route-handlers/list-failover-history/list-failover-history.types';
 import { mockDomainPageQueryParamsValues } from '@/views/domain-page/__fixtures__/domain-page-query-params';
-import { PRIMARY_CLUSTER_SCOPE } from '@/views/domain-page/domain-page-failovers/domain-page-failovers.constants';
+import { DEFAULT_CLUSTER_SCOPE } from '@/views/domain-page/domain-page-failovers/domain-page-failovers.constants';
 
 import DomainPageFailoverActiveActive from '../domain-page-failover-active-active';
 
@@ -31,7 +31,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
     jest.clearAllMocks();
   });
 
-  it('renders cluster failover when matching primary cluster failover is found', () => {
+  it('renders cluster failover when matching default cluster failover is found', () => {
     const failoverEvent: FailoverEvent = {
       id: 'failover-1',
       createdTime: {
@@ -56,10 +56,10 @@ describe(DomainPageFailoverActiveActive.name, () => {
 
     setup({
       failoverEvent,
-      clusterAttributeScope: PRIMARY_CLUSTER_SCOPE,
+      clusterAttributeScope: DEFAULT_CLUSTER_SCOPE,
     });
 
-    expect(screen.getByText('Primary:')).toBeInTheDocument();
+    expect(screen.getByText('Default:')).toBeInTheDocument();
     expect(
       screen.getByTestId('mock-single-cluster-failover')
     ).toBeInTheDocument();
@@ -68,7 +68,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
     expect(screen.getByTestId('mock-failover-modal')).toBeInTheDocument();
   });
 
-  it('renders cluster failover when matching non-primary cluster failover is found', () => {
+  it('renders cluster failover when matching non-default cluster failover is found', () => {
     const failoverEvent: FailoverEvent = {
       id: 'failover-1',
       createdTime: {
@@ -109,7 +109,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
     expect(screen.getByTestId('mock-failover-modal')).toBeInTheDocument();
   });
 
-  it('does not render cluster failover section when clusterAttributeScope is set but clusterAttributeValue is undefined for non-primary scope', () => {
+  it('does not render cluster failover section when clusterAttributeScope is set but clusterAttributeValue is undefined for non-default scope', () => {
     const failoverEvent: FailoverEvent = {
       id: 'failover-1',
       createdTime: {
@@ -235,7 +235,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
 
     setup({
       failoverEvent,
-      clusterAttributeScope: PRIMARY_CLUSTER_SCOPE,
+      clusterAttributeScope: DEFAULT_CLUSTER_SCOPE,
     });
 
     expect(

src/views/domain-page/domain-page-failover-active-active/domain-page-failover-active-active.tsx

@@ -8,7 +8,10 @@ import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-par
 import domainPageQueryParamsConfig from '../config/domain-page-query-params.config';
 import DomainPageFailoverModal from '../domain-page-failover-modal/domain-page-failover-modal';
 import DomainPageFailoverSingleCluster from '../domain-page-failover-single-cluster/domain-page-failover-single-cluster';
-import { PRIMARY_CLUSTER_SCOPE } from '../domain-page-failovers/domain-page-failovers.constants';
+import {
+  DEFAULT_CLUSTER_SCOPE,
+  DEFAULT_CLUSTER_SCOPE_LABEL,
+} from '../domain-page-failovers/domain-page-failovers.constants';
 import clusterFailoverMatchesAttribute from '../helpers/cluster-failover-matches-attribute';
 
 import { styled } from './domain-page-failover-active-active.styles';
@@ -25,7 +28,7 @@ export default function DomainPageFailoverActiveActive({
   const clusterFailoverForMaybeSelectedAttribute = useMemo(() => {
     if (
       !clusterAttributeScope ||
-      (clusterAttributeScope !== PRIMARY_CLUSTER_SCOPE &&
+      (clusterAttributeScope !== DEFAULT_CLUSTER_SCOPE &&
         !clusterAttributeValue)
     )
       return undefined;
@@ -49,8 +52,8 @@ export default function DomainPageFailoverActiveActive({
         {clusterFailoverForMaybeSelectedAttribute && (
           <styled.ClusterFailoverContainer>
             <styled.ClusterAttributeLabel>
-              {clusterAttributeScope === PRIMARY_CLUSTER_SCOPE
-                ? 'Primary:'
+              {clusterAttributeScope === DEFAULT_CLUSTER_SCOPE
+                ? `${DEFAULT_CLUSTER_SCOPE_LABEL}:`
                 : `${clusterAttributeScope} (${clusterAttributeValue}):`}
             </styled.ClusterAttributeLabel>
             <DomainPageFailoverSingleCluster

src/views/domain-page/domain-page-failover-modal/__tests__/domain-page-failover-modal.test.tsx

@@ -149,7 +149,7 @@ describe(DomainPageFailoverModal.name, () => {
     expect(screen.getByText('Scope')).toBeInTheDocument();
     expect(screen.getByText('Attribute')).toBeInTheDocument();
     expect(screen.getByText('Clusters')).toBeInTheDocument();
-    expect(screen.getByText('Primary')).toBeInTheDocument();
+    expect(screen.getByText('Default')).toBeInTheDocument();
     expect(screen.getByText('-')).toBeInTheDocument();
     expect(
       screen.getByTestId('mock-single-cluster-failover')
@@ -174,7 +174,7 @@ describe(DomainPageFailoverModal.name, () => {
     expect(screen.queryByText('Clusters')).not.toBeInTheDocument();
   });
 
-  it('displays Primary scope and dash for attribute when clusterAttribute is null', () => {
+  it('displays Default scope and dash for attribute when clusterAttribute is null', () => {
     const failoverEvent: FailoverEvent = {
       id: 'failover-1',
       createdTime: {
@@ -199,7 +199,7 @@ describe(DomainPageFailoverModal.name, () => {
 
     setup({ failoverEvent, isOpen: true });
 
-    expect(screen.getByText('Primary')).toBeInTheDocument();
+    expect(screen.getByText('Default')).toBeInTheDocument();
     expect(screen.getByText('-')).toBeInTheDocument();
   });
 
@@ -274,7 +274,7 @@ describe(DomainPageFailoverModal.name, () => {
 
     setup({ failoverEvent, isOpen: true });
 
-    expect(screen.getByText('Primary')).toBeInTheDocument();
+    expect(screen.getByText('Default')).toBeInTheDocument();
     expect(screen.getByText('region')).toBeInTheDocument();
     expect(screen.getByText('us-east')).toBeInTheDocument();
     const clusterComponents = screen.getAllByTestId(

src/views/domain-page/domain-page-failover-modal/domain-page-failover-modal.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useMemo } from 'react';
 
 import { Modal, ModalBody, ModalButton } from 'baseui/modal';
@@ -31,7 +30,7 @@ export default function DomainPageFailoverModal({
       const attribute = clusterFailover.clusterAttribute;
       if (attribute === null) {
         return {
-          scope: 'Primary',
+          scope: 'Default',
           attribute: '-',
           clusters,
         };

src/views/domain-page/domain-page-failover-single-cluster/__tests__/domain-page-failover-single-cluster.test.tsx

@@ -10,16 +10,24 @@ describe(DomainPageFailoverSingleCluster.name, () => {
     expect(screen.getByText(/cluster-2/)).toBeInTheDocument();
   });
 
-  it('returns null when fromCluster is missing', () => {
+  it('renders a placeholder when fromCluster is missing', () => {
     setup({ toCluster: 'cluster-2' });
 
-    expect(screen.queryByText(/cluster-2/)).not.toBeInTheDocument();
+    expect(screen.getByText('None')).toBeInTheDocument();
+    expect(screen.getByText(/cluster-2/)).toBeInTheDocument();
   });
 
-  it('returns null when toCluster is missing', () => {
+  it('renders a placeholder when toCluster is missing', () => {
     setup({ fromCluster: 'cluster-1' });
 
-    expect(screen.queryByText(/cluster-1/)).not.toBeInTheDocument();
+    expect(screen.getByText(/cluster-1/)).toBeInTheDocument();
+    expect(screen.getByText('None')).toBeInTheDocument();
+  });
+
+  it('renders null (and not the None placeholders) when both clusters are missing', () => {
+    setup({});
+
+    expect(screen.queryByText('None')).not.toBeInTheDocument();
   });
 });
 

src/views/domain-page/domain-page-failover-single-cluster/domain-page-failover-single-cluster.styles.ts

@@ -11,6 +11,9 @@ const cssStylesObj = {
     gap: theme.sizing.scale400,
     alignItems: 'center',
   }),
+  noClusterContainer: (theme: Theme) => ({
+    color: theme.colors.contentSecondary,
+  }),
 } satisfies StyletronCSSObject;
 
 export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =

src/views/domain-page/domain-page-failover-single-cluster/domain-page-failover-single-cluster.tsx

@@ -11,13 +11,13 @@ export default function DomainPageFailoverSingleCluster({
 }: Props) {
   const { cls, theme } = useStyletronClasses(cssStyles);
 
-  if (!fromCluster || !toCluster) return null;
+  if (!fromCluster && !toCluster) return null;
 
   return (
     <div className={cls.failoverContainer}>
-      {fromCluster}
+      {fromCluster ?? <div className={cls.noClusterContainer}>None</div>}
       <MdArrowForward color={theme.colors.contentSecondary} />
-      {toCluster}
+      {toCluster ?? <div className={cls.noClusterContainer}>None</div>}
     </div>
   );
 }

src/views/domain-page/domain-page-failovers-filters/__tests__/domain-page-failovers-filters.test.tsx

@@ -6,7 +6,7 @@ import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-
 import { mockActiveActiveDomain } from '@/views/shared/active-active/__fixtures__/active-active-domain';
 import { type ActiveActiveDomain } from '@/views/shared/active-active/active-active.types';
 
-import { PRIMARY_CLUSTER_SCOPE } from '../../domain-page-failovers/domain-page-failovers.constants';
+import { DEFAULT_CLUSTER_SCOPE } from '../../domain-page-failovers/domain-page-failovers.constants';
 import DomainPageFailoversFilters from '../domain-page-failovers-filters';
 
 describe(DomainPageFailoversFilters.name, () => {
@@ -26,14 +26,14 @@ describe(DomainPageFailoversFilters.name, () => {
     );
     await user.click(scopeCombobox);
 
-    expect(screen.getByText(PRIMARY_CLUSTER_SCOPE)).toBeInTheDocument();
+    expect(screen.getByText(DEFAULT_CLUSTER_SCOPE)).toBeInTheDocument();
     expect(screen.getByText('region')).toBeInTheDocument();
   });
 
-  it('disables cluster attribute value combobox when scope is primary', () => {
+  it('disables cluster attribute value combobox when scope is default', () => {
     setup({
       queryParamsOverrides: {
-        clusterAttributeScope: PRIMARY_CLUSTER_SCOPE,
+        clusterAttributeScope: DEFAULT_CLUSTER_SCOPE,
       },
     });
 

src/views/domain-page/domain-page-failovers-filters/domain-page-failovers-filters.tsx

@@ -12,7 +12,7 @@ import {
 import { type ActiveActiveDomain } from '@/views/shared/active-active/active-active.types';
 
 import type domainPageQueryParamsConfig from '../config/domain-page-query-params.config';
-import { PRIMARY_CLUSTER_SCOPE } from '../domain-page-failovers/domain-page-failovers.constants';
+import { DEFAULT_CLUSTER_SCOPE } from '../domain-page-failovers/domain-page-failovers.constants';
 
 import { styled, overrides } from './domain-page-failovers-filters.styles';
 
@@ -29,7 +29,7 @@ export default function DomainPageFailoversFilters({
 
   const clusterAttributeScopes = useMemo(
     () => [
-      PRIMARY_CLUSTER_SCOPE,
+      DEFAULT_CLUSTER_SCOPE,
       ...Object.keys(
         domainDescription.activeClusters.activeClustersByClusterAttribute
       ),
@@ -40,7 +40,7 @@ export default function DomainPageFailoversFilters({
   const clusterAttributeValuesForScope = useMemo(() => {
     if (
       !clusterAttributeScope ||
-      clusterAttributeScope === PRIMARY_CLUSTER_SCOPE
+      clusterAttributeScope === DEFAULT_CLUSTER_SCOPE
     )
       return [];
 
@@ -96,7 +96,7 @@ export default function DomainPageFailoversFilters({
           <Combobox
             size="compact"
             clearable
-            disabled={clusterAttributeScope === PRIMARY_CLUSTER_SCOPE}
+            disabled={clusterAttributeScope === DEFAULT_CLUSTER_SCOPE}
             value={clusterAttributeValue ?? ''}
             overrides={{
               Input: {

src/views/domain-page/domain-page-failovers/domain-page-failovers.constants.ts

@@ -1,12 +1,2 @@
-import { type FailoverEvent } from '@/route-handlers/list-failover-history/list-failover-history.types';
-
-export const PRIMARY_CLUSTER_SCOPE = 'primary';
-
-export const FAILOVER_TYPE_LABEL_MAP: Record<
-  FailoverEvent['failoverType'],
-  string
-> = {
-  FAILOVER_TYPE_INVALID: 'Invalid',
-  FAILOVER_TYPE_FORCE: 'Force',
-  FAILOVER_TYPE_GRACEFUL: 'Graceful',
-};
+export const DEFAULT_CLUSTER_SCOPE = 'default';
+export const DEFAULT_CLUSTER_SCOPE_LABEL = 'Default';

src/views/domain-page/domain-page-failovers/domain-page-failovers.styles.ts

@@ -0,0 +1,7 @@
+import { styled as createStyled } from 'baseui';
+
+export const styled = {
+  TableTopSpacer: createStyled('div', ({ $theme }) => ({
+    height: $theme.sizing.scale950,
+  })),
+};

src/views/domain-page/domain-page-failovers/domain-page-failovers.tsx

@@ -13,6 +13,8 @@ import { type DomainPageTabContentProps } from '../domain-page-content/domain-pa
 import DomainPageFailoversFilters from '../domain-page-failovers-filters/domain-page-failovers-filters';
 import useDomainFailoverHistory from '../hooks/use-domain-failover-history/use-domain-failover-history';
 
+import { styled } from './domain-page-failovers.styles';
+
 export default function DomainPageFailovers({
   domain,
   cluster,
@@ -52,12 +54,14 @@ export default function DomainPageFailovers({
 
   return (
     <div>
-      {isActiveActive && (
+      {isActiveActive ? (
         <DomainPageFailoversFilters
           domainDescription={domainDescription}
           queryParams={queryParams}
           setQueryParams={setQueryParams}
         />
+      ) : (
+        <styled.TableTopSpacer />
       )}
       <Table
         data={filteredFailoverEvents}

src/views/domain-page/helpers/__tests__/cluster-failover-matches-attribute.test.ts

@@ -1,4 +1,4 @@
-import { PRIMARY_CLUSTER_SCOPE } from '../../domain-page-failovers/domain-page-failovers.constants';
+import { DEFAULT_CLUSTER_SCOPE } from '../../domain-page-failovers/domain-page-failovers.constants';
 import { type ClusterFailover } from '../../domain-page-failovers/domain-page-failovers.types';
 import clusterFailoverMatchesAttribute from '../cluster-failover-matches-attribute';
 
@@ -17,7 +17,7 @@ describe(clusterFailoverMatchesAttribute.name, () => {
     };
 
     expect(
-      clusterFailoverMatchesAttribute(clusterFailover, PRIMARY_CLUSTER_SCOPE)
+      clusterFailoverMatchesAttribute(clusterFailover, DEFAULT_CLUSTER_SCOPE)
     ).toBe(true);
   });
 

src/views/domain-page/helpers/__tests__/get-cluster-replication-status-label.test.ts

@@ -33,16 +33,16 @@ describe(getClusterReplicationStatusLabel.name, () => {
     ).toBe('active');
   });
 
-  it('returns "primary" for the active cluster in Active-Active domains', () => {
+  it('returns "default" for the active cluster in Active-Active domains', () => {
     expect(
       getClusterReplicationStatusLabel(
         mockActiveActiveDomain,
         mockActiveActiveDomain.activeClusterName
       )
-    ).toBe('primary');
+    ).toBe('default');
   });
 
-  it('returns undefined for non-primary clusters in Active-Active domains', () => {
+  it('returns undefined for non-default clusters in Active-Active domains', () => {
     expect(
       getClusterReplicationStatusLabel(mockActiveActiveDomain, 'cluster1')
     ).toBeUndefined();

src/views/domain-page/helpers/cluster-failover-matches-attribute.ts

@@ -1,4 +1,4 @@
-import { PRIMARY_CLUSTER_SCOPE } from '../domain-page-failovers/domain-page-failovers.constants';
+import { DEFAULT_CLUSTER_SCOPE } from '../domain-page-failovers/domain-page-failovers.constants';
 import { type ClusterFailover } from '../domain-page-failovers/domain-page-failovers.types';
 
 export default function clusterFailoverMatchesAttribute(
@@ -7,7 +7,7 @@ export default function clusterFailoverMatchesAttribute(
   value?: string
 ) {
   const attribute = clusterFailover.clusterAttribute;
-  if (attribute === null) return scope === PRIMARY_CLUSTER_SCOPE;
+  if (attribute === null) return scope === DEFAULT_CLUSTER_SCOPE;
 
   const scopeMatches = attribute.scope === scope;
   if (!value) return scopeMatches;