Add more changes

Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com>

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

@@ -1,15 +1,17 @@
+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),
   {
-    name: 'Failover Information AA',
-    id: 'failoverInfo',
-    width: '40%',
+    ...domainPageFailoversTableConfig[3],
     renderCell: (event: FailoverEvent) =>
-      JSON.stringify(event.clusterFailovers),
+      createElement(DomainPageFailoverActiveActive, { failoverEvent: event }),
   },
 ];
 

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

@@ -5,11 +5,14 @@ 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: '25%',
+    width: '35%',
     renderCell: (event: FailoverEvent) => event.id,
   },
   {
@@ -27,14 +30,18 @@ const domainPageFailoversTableConfig = [
     name: 'Type',
     id: 'type',
     width: '10%',
-    renderCell: (event: FailoverEvent) => event.failoverType,
+    renderCell: (event: FailoverEvent) =>
+      FAILOVER_TYPE_LABEL_MAP[event.failoverType],
   },
   {
     name: 'Failover Information',
     id: 'failoverInfo',
-    width: '50%',
+    width: '40%',
     renderCell: (event: FailoverEvent) =>
-      JSON.stringify(event.clusterFailovers),
+      createElement(DomainPageFailoverSingleCluster, {
+        fromCluster: event.clusterFailovers[0].fromCluster?.activeClusterName,
+        toCluster: event.clusterFailovers[0].toCluster?.activeClusterName,
+      }),
   },
 ] as const satisfies TableConfig<FailoverEvent>;
 

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;

src/views/domain-page/domain-page-failover-active-active/domain-page-failover-active-active.styles.ts

@@ -0,0 +1,23 @@
+import { styled as createStyled, type Theme } from 'baseui';
+
+export const styled = {
+  FailoverContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
+    display: 'flex',
+    gap: $theme.sizing.scale600,
+    alignItems: 'baseline',
+  })),
+  ClusterFailoverContainer: createStyled(
+    'div',
+    ({ $theme }: { $theme: Theme }) => ({
+      display: 'flex',
+      alignItems: 'baseline',
+      gap: $theme.sizing.scale300,
+    })
+  ),
+  ClusterAttributeLabel: createStyled(
+    'div',
+    ({ $theme }: { $theme: Theme }) => ({
+      ...$theme.typography.LabelSmall,
+    })
+  ),
+};

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

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+
+import { Button } from 'baseui/button';
+import { MdVisibility } from 'react-icons/md';
+
+import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
+
+import domainPageQueryParamsConfig from '../config/domain-page-query-params.config';
+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 clusterFailoverMatchesAttribute from '../helpers/cluster-failover-matches-attribute';
+
+import { styled } from './domain-page-failover-active-active.styles';
+import { type Props } from './domain-page-failover-active-active.types';
+
+export default function DomainPageFailoverActiveActive({
+  failoverEvent,
+}: Props) {
+  const [{ clusterAttributeScope, clusterAttributeValue }] = usePageQueryParams(
+    domainPageQueryParamsConfig
+  );
+
+  const clusterFailoverForMaybeSelectedAttribute = useMemo(
+    () =>
+      failoverEvent.clusterFailovers.find((clusterFailover) =>
+        clusterFailoverMatchesAttribute(
+          clusterFailover,
+          clusterAttributeScope,
+          clusterAttributeValue
+        )
+      ),
+    [
+      clusterAttributeScope,
+      clusterAttributeValue,
+      failoverEvent.clusterFailovers,
+    ]
+  );
+
+  return (
+    <styled.FailoverContainer>
+      {clusterFailoverForMaybeSelectedAttribute && (
+        <styled.ClusterFailoverContainer>
+          <styled.ClusterAttributeLabel>
+            {clusterAttributeScope === PRIMARY_CLUSTER_SCOPE
+              ? 'Primary:'
+              : `${clusterAttributeScope} (${clusterAttributeValue}):`}
+          </styled.ClusterAttributeLabel>
+          <DomainPageFailoverSingleCluster
+            fromCluster={
+              clusterFailoverForMaybeSelectedAttribute.fromCluster
+                ?.activeClusterName
+            }
+            toCluster={
+              clusterFailoverForMaybeSelectedAttribute.toCluster
+                ?.activeClusterName
+            }
+          />
+        </styled.ClusterFailoverContainer>
+      )}
+      <Button
+        size="mini"
+        kind="secondary"
+        shape="pill"
+        endEnhancer={<MdVisibility />}
+        // TODO: open the failover modal here on click
+      >
+        See more
+      </Button>
+    </styled.FailoverContainer>
+  );
+}

src/views/domain-page/domain-page-failover-active-active/domain-page-failover-active-active.types.ts

@@ -0,0 +1,5 @@
+import { type FailoverEvent } from '@/route-handlers/list-failover-history/list-failover-history.types';
+
+export type Props = {
+  failoverEvent: FailoverEvent;
+};

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

@@ -0,0 +1,17 @@
+import { type Theme } from 'baseui';
+
+import type {
+  StyletronCSSObject,
+  StyletronCSSObjectOf,
+} from '@/hooks/use-styletron-classes';
+
+const cssStylesObj = {
+  failoverContainer: (theme: Theme) => ({
+    display: 'flex',
+    gap: theme.sizing.scale400,
+    alignItems: 'center',
+  }),
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
+  cssStylesObj;

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

@@ -0,0 +1,23 @@
+import { MdArrowForward } from 'react-icons/md';
+
+import useStyletronClasses from '@/hooks/use-styletron-classes';
+
+import { cssStyles } from './domain-page-failover-single-cluster.styles';
+import { type Props } from './domain-page-failover-single-cluster.types';
+
+export default function DomainPageFailoverSingleCluster({
+  fromCluster,
+  toCluster,
+}: Props) {
+  const { cls, theme } = useStyletronClasses(cssStyles);
+
+  if (!fromCluster || !toCluster) return null;
+
+  return (
+    <div className={cls.failoverContainer}>
+      {fromCluster}
+      <MdArrowForward color={theme.colors.contentSecondary} />
+      {toCluster}
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+export type Props = {
+  fromCluster?: string;
+  toCluster?: string;
+};

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

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

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

@@ -2,14 +2,18 @@
 import React from 'react';
 
 import Table from '@/components/table/table';
+import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
 import isActiveActiveDomain from '@/views/shared/active-active/helpers/is-active-active-domain';
 import useSuspenseDomainDescription from '@/views/shared/hooks/use-domain-description/use-suspense-domain-description';
 
 import domainPageFailoversTableActiveActiveConfig from '../config/domain-page-failovers-table-active-active.config';
 import domainPageFailoversTableConfig from '../config/domain-page-failovers-table.config';
+import domainPageQueryParamsConfig from '../config/domain-page-query-params.config';
 import { type DomainPageTabContentProps } from '../domain-page-content/domain-page-content.types';
 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,
@@ -19,6 +23,12 @@ export default function DomainPageFailovers({
     cluster,
   });
 
+  const isActiveActive = isActiveActiveDomain(domainDescription);
+
+  const [{ clusterAttributeScope, clusterAttributeValue }] = usePageQueryParams(
+    domainPageQueryParamsConfig
+  );
+
   const {
     filteredFailoverEvents,
     allFailoverEvents,
@@ -31,26 +41,33 @@ export default function DomainPageFailovers({
     domainName: domain,
     domainId: domainDescription.id,
     cluster,
-    // TODO: set and pass filters here, but only for AA domains
+    ...(isActiveActive
+      ? {
+          clusterAttributeScope,
+          clusterAttributeValue,
+        }
+      : {}),
   });
 
   return (
-    <Table
-      data={filteredFailoverEvents}
-      shouldShowResults={!isLoading && filteredFailoverEvents.length > 0}
-      endMessageProps={{
-        kind: 'infinite-scroll',
-        hasData: allFailoverEvents.length > 0,
-        error,
-        fetchNextPage,
-        hasNextPage,
-        isFetchingNextPage,
-      }}
-      columns={
-        isActiveActiveDomain(domainDescription)
-          ? domainPageFailoversTableActiveActiveConfig
-          : domainPageFailoversTableConfig
-      }
-    />
+    <styled.FailoversContainer>
+      <Table
+        data={filteredFailoverEvents}
+        shouldShowResults={!isLoading && filteredFailoverEvents.length > 0}
+        endMessageProps={{
+          kind: 'infinite-scroll',
+          hasData: allFailoverEvents.length > 0,
+          error,
+          fetchNextPage,
+          hasNextPage,
+          isFetchingNextPage,
+        }}
+        columns={
+          isActiveActive
+            ? domainPageFailoversTableActiveActiveConfig
+            : domainPageFailoversTableConfig
+        }
+      />
+    </styled.FailoversContainer>
   );
 }