feat: support async replications (#856)

Author: vovaspace

package-lock.json

@@ -48,7 +48,7 @@
     "url": "^0.11.3",
     "use-query-params": "^2.2.1",
     "web-vitals": "^1.1.2",
-    "ydb-ui-components": "^4.1.0",
+    "ydb-ui-components": "^4.2.0",
     "zod": "^3.23.8"
   },
   "scripts": {

package.json

@@ -0,0 +1,28 @@
+import {Label} from '@gravity-ui/uikit';
+
+import type {TReplicationState} from '../../types/api/schema/replication';
+
+interface AsyncReplicationStateProps {
+    state?: TReplicationState;
+}
+
+export function AsyncReplicationState({state}: AsyncReplicationStateProps) {
+    if (!state) {
+        return null;
+    }
+
+    if ('StandBy' in state) {
+        return <Label theme="info">Standby</Label>;
+    }
+    if ('Paused' in state) {
+        return <Label theme="info">Paused</Label>;
+    }
+    if ('Done' in state) {
+        return <Label theme="success">Done</Label>;
+    }
+    if ('Error' in state) {
+        return <Label theme="danger">Error</Label>;
+    }
+
+    return <Label size="s">Unknown</Label>;
+}

src/components/AsyncReplicationState/AsyncReplicationState.tsx

@@ -0,0 +1 @@
+export * from './AsyncReplicationState';

src/components/AsyncReplicationState/index.ts

@@ -70,6 +70,8 @@ const partitions = {
     title: 'Partitions',
 };
 
+export const ASYNC_REPLICATION_PAGES = [overview, describe];
+
 export const DATABASE_PAGES = [
     overview,
     topQueries,
@@ -117,6 +119,8 @@ const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
     [EPathType.EPathTypeExternalTable]: EXTERNAL_TABLE_PAGES,
 
     [EPathType.EPathTypeView]: VIEW_PAGES,
+
+    [EPathType.EPathTypeReplication]: ASYNC_REPLICATION_PAGES,
 };
 
 export const getPagesByType = (type?: EPathType) => (type && pathTypeToPages[type]) || DIR_PAGES;

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -0,0 +1,86 @@
+import {Flex, Text} from '@gravity-ui/uikit';
+
+import {AsyncReplicationState} from '../../../../../components/AsyncReplicationState';
+import {InfoViewer} from '../../../../../components/InfoViewer';
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+import {useTypedSelector} from '../../../../../utils/hooks';
+import {getEntityName} from '../../../utils';
+import {AsyncReplicationPaths} from '../AsyncReplicationPaths';
+
+import {Credentials} from './Credentials';
+import i18n from './i18n';
+
+interface AsyncReplicationProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+/** Displays overview for Replication EPathType */
+export function AsyncReplicationInfo({data}: AsyncReplicationProps) {
+    const entityName = getEntityName(data?.PathDescription);
+
+    const {error: schemaError} = useTypedSelector((state) => state.schema);
+
+    if (schemaError) {
+        return <div className="error">{schemaError.statusText}</div>;
+    }
+
+    if (!data) {
+        return (
+            <div className="error">
+                {i18n('noData')} {entityName}
+            </div>
+        );
+    }
+
+    return (
+        <Flex direction="column" gap="4">
+            <InfoViewer
+                title={entityName}
+                info={[
+                    {
+                        label: i18n('state.label'),
+                        value: (
+                            <AsyncReplicationState
+                                state={data.PathDescription?.ReplicationDescription?.State}
+                            />
+                        ),
+                    },
+                    {
+                        label: i18n('srcConnection.endpoint.label'),
+                        value: (
+                            <Text variant="code-inline-2">
+                                {
+                                    data.PathDescription?.ReplicationDescription?.Config
+                                        ?.SrcConnectionParams?.Endpoint
+                                }
+                            </Text>
+                        ),
+                    },
+                    {
+                        label: i18n('srcConnection.database.label'),
+                        value: (
+                            <Text variant="code-inline-2">
+                                {
+                                    data.PathDescription?.ReplicationDescription?.Config
+                                        ?.SrcConnectionParams?.Database
+                                }
+                            </Text>
+                        ),
+                    },
+                    {
+                        label: i18n('credentials.label'),
+                        value: (
+                            <Credentials
+                                connection={
+                                    data.PathDescription?.ReplicationDescription?.Config
+                                        ?.SrcConnectionParams
+                                }
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <AsyncReplicationPaths config={data.PathDescription?.ReplicationDescription?.Config} />
+        </Flex>
+    );
+}

src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/AsyncReplicationInfo.tsx

@@ -0,0 +1,27 @@
+import {Label} from '@gravity-ui/uikit';
+
+import type {TConnectionParams} from '../../../../../types/api/schema/replication';
+
+interface CredentialsProps {
+    connection?: TConnectionParams;
+}
+
+export function Credentials({connection}: CredentialsProps) {
+    if (!connection) {
+        return null;
+    }
+
+    if (connection.StaticCredentials) {
+        return (
+            <Label value={connection.StaticCredentials.User} theme="normal">
+                user
+            </Label>
+        );
+    }
+
+    if ('OAuthToken' in connection) {
+        return 'OAuth';
+    }
+
+    return 'unknown';
+}

src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/Credentials.tsx

@@ -0,0 +1,7 @@
+{
+  "credentials.label": "Credentials",
+  "noData": "No data for entity:",
+  "srcConnection.database.label": "Source Database Path",
+  "srcConnection.endpoint.label": "Source Cluster Endpoint",
+  "state.label": "State"
+}

src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/i18n/en.json

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-diagnostics-async-replication-info';
+
+export default registerKeysets(COMPONENT, {en});

src/containers/Tenant/Diagnostics/Overview/AsyncReplicationInfo/i18n/index.ts

@@ -0,0 +1 @@
+export * from './AsyncReplicationInfo';