diff --git a/src/views/domain-page/config/domain-page-failovers-table-active-active.config.ts b/src/views/domain-page/config/domain-page-failovers-table-active-active.config.ts index 8562a614a..405155054 100644 --- a/src/views/domain-page/config/domain-page-failovers-table-active-active.config.ts +++ b/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 }), }, diff --git a/src/views/domain-page/config/domain-page-failovers-table.config.ts b/src/views/domain-page/config/domain-page-failovers-table.config.ts index f3cf99ef7..4a06beb4f 100644 --- a/src/views/domain-page/config/domain-page-failovers-table.config.ts +++ b/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, diff --git a/src/views/domain-page/domain-page-failover-active-active/__tests__/domain-page-failover-active-active.test.tsx b/src/views/domain-page/domain-page-failover-active-active/__tests__/domain-page-failover-active-active.test.tsx index fa08a60c8..1581cb01c 100644 --- a/src/views/domain-page/domain-page-failover-active-active/__tests__/domain-page-failover-active-active.test.tsx +++ b/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( diff --git a/src/views/domain-page/domain-page-failover-active-active/domain-page-failover-active-active.tsx b/src/views/domain-page/domain-page-failover-active-active/domain-page-failover-active-active.tsx index 3cb3254d6..fefbe903d 100644 --- a/src/views/domain-page/domain-page-failover-active-active/domain-page-failover-active-active.tsx +++ b/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 && ( - {clusterAttributeScope === PRIMARY_CLUSTER_SCOPE - ? 'Primary:' + {clusterAttributeScope === DEFAULT_CLUSTER_SCOPE + ? `${DEFAULT_CLUSTER_SCOPE_LABEL}:` : `${clusterAttributeScope} (${clusterAttributeValue}):`} { 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( diff --git a/src/views/domain-page/domain-page-failover-modal/domain-page-failover-modal.tsx b/src/views/domain-page/domain-page-failover-modal/domain-page-failover-modal.tsx index 675cd9d45..ee17e399b 100644 --- a/src/views/domain-page/domain-page-failover-modal/domain-page-failover-modal.tsx +++ b/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, }; diff --git a/src/views/domain-page/domain-page-failover-single-cluster/__tests__/domain-page-failover-single-cluster.test.tsx b/src/views/domain-page/domain-page-failover-single-cluster/__tests__/domain-page-failover-single-cluster.test.tsx index 849cb6b0f..5ac093b48 100644 --- a/src/views/domain-page/domain-page-failover-single-cluster/__tests__/domain-page-failover-single-cluster.test.tsx +++ b/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(); }); }); diff --git a/src/views/domain-page/domain-page-failover-single-cluster/domain-page-failover-single-cluster.styles.ts b/src/views/domain-page/domain-page-failover-single-cluster/domain-page-failover-single-cluster.styles.ts index b6ba98489..827757deb 100644 --- a/src/views/domain-page/domain-page-failover-single-cluster/domain-page-failover-single-cluster.styles.ts +++ b/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 = diff --git a/src/views/domain-page/domain-page-failover-single-cluster/domain-page-failover-single-cluster.tsx b/src/views/domain-page/domain-page-failover-single-cluster/domain-page-failover-single-cluster.tsx index 3466dc29e..29db5affb 100644 --- a/src/views/domain-page/domain-page-failover-single-cluster/domain-page-failover-single-cluster.tsx +++ b/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 (
- {fromCluster} + {fromCluster ??
None
} - {toCluster} + {toCluster ??
None
}
); } diff --git a/src/views/domain-page/domain-page-failovers-filters/__tests__/domain-page-failovers-filters.test.tsx b/src/views/domain-page/domain-page-failovers-filters/__tests__/domain-page-failovers-filters.test.tsx index 911fb5192..b4507f79c 100644 --- a/src/views/domain-page/domain-page-failovers-filters/__tests__/domain-page-failovers-filters.test.tsx +++ b/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, }, }); diff --git a/src/views/domain-page/domain-page-failovers-filters/domain-page-failovers-filters.tsx b/src/views/domain-page/domain-page-failovers-filters/domain-page-failovers-filters.tsx index c834ad95a..a8a432a1e 100644 --- a/src/views/domain-page/domain-page-failovers-filters/domain-page-failovers-filters.tsx +++ b/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({ = { - 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'; diff --git a/src/views/domain-page/domain-page-failovers/domain-page-failovers.styles.ts b/src/views/domain-page/domain-page-failovers/domain-page-failovers.styles.ts new file mode 100644 index 000000000..0f5b1dd98 --- /dev/null +++ b/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, + })), +}; diff --git a/src/views/domain-page/domain-page-failovers/domain-page-failovers.tsx b/src/views/domain-page/domain-page-failovers/domain-page-failovers.tsx index bdb5fa8b0..edfd60501 100644 --- a/src/views/domain-page/domain-page-failovers/domain-page-failovers.tsx +++ b/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 (
- {isActiveActive && ( + {isActiveActive ? ( + ) : ( + )} { }; expect( - clusterFailoverMatchesAttribute(clusterFailover, PRIMARY_CLUSTER_SCOPE) + clusterFailoverMatchesAttribute(clusterFailover, DEFAULT_CLUSTER_SCOPE) ).toBe(true); }); diff --git a/src/views/domain-page/helpers/__tests__/get-cluster-replication-status-label.test.ts b/src/views/domain-page/helpers/__tests__/get-cluster-replication-status-label.test.ts index b90b32fe7..3ec626cb7 100644 --- a/src/views/domain-page/helpers/__tests__/get-cluster-replication-status-label.test.ts +++ b/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(); diff --git a/src/views/domain-page/helpers/cluster-failover-matches-attribute.ts b/src/views/domain-page/helpers/cluster-failover-matches-attribute.ts index 9f15fda8b..b7057742c 100644 --- a/src/views/domain-page/helpers/cluster-failover-matches-attribute.ts +++ b/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; diff --git a/src/views/domain-page/helpers/get-cluster-replication-status-label.ts b/src/views/domain-page/helpers/get-cluster-replication-status-label.ts index cae57df04..c6c81c1b3 100644 --- a/src/views/domain-page/helpers/get-cluster-replication-status-label.ts +++ b/src/views/domain-page/helpers/get-cluster-replication-status-label.ts @@ -1,5 +1,6 @@ import isActiveActiveDomain from '@/views/shared/active-active/helpers/is-active-active-domain'; +import { DEFAULT_CLUSTER_SCOPE } from '../domain-page-failovers/domain-page-failovers.constants'; import { type DomainDescription } from '../domain-page.types'; export default function getClusterReplicationStatusLabel( @@ -7,7 +8,9 @@ export default function getClusterReplicationStatusLabel( cluster: string ): string | undefined { if (isActiveActiveDomain(domain)) { - return cluster === domain.activeClusterName ? 'primary' : undefined; + return cluster === domain.activeClusterName + ? DEFAULT_CLUSTER_SCOPE + : undefined; } return cluster === domain.activeClusterName ? 'active' : 'passive';