Error in UI

Author: nshestakov

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

@@ -95,7 +95,9 @@ function Overview({type, path, database}: OverviewProps) {
             [EPathType.EPathTypeExternalDataSource]: () => <ExternalDataSourceInfo data={data} />,
             [EPathType.EPathTypeView]: () => <ViewInfo data={data} />,
             [EPathType.EPathTypeReplication]: () => <AsyncReplicationInfo data={data} />,
-            [EPathType.EPathTypeTransfer]: () => <TransferInfo data={data} />,
+            [EPathType.EPathTypeTransfer]: () => (
+                <TransferInfo path={path} database={database} data={data} />
+            ),
         };
 
         return (type && pathTypeToComponent[type]?.()) || <TableInfo data={data} type={type} />;

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

@@ -4,18 +4,21 @@ import {Flex, Text} from '@gravity-ui/uikit';
 import {AsyncReplicationState} from '../../../../../components/AsyncReplicationState';
 import {YDBSyntaxHighlighter} from '../../../../../components/SyntaxHighlighter/YDBSyntaxHighlighter';
 import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
+import {replicationApi} from '../../../../../store/reducers/replication';
 import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
 import {getEntityName} from '../../../utils';
 
 import {Credentials} from './Credentials';
 import i18n from './i18n';
 
 interface TransferProps {
+    path: string;
+    database: string;
     data?: TEvDescribeSchemeResult;
 }
 
 /** Displays overview for Transfer EPathType */
-export function TransferInfo({data}: TransferProps) {
+export function TransferInfo({path, database, data}: TransferProps) {
     const entityName = getEntityName(data?.PathDescription);
 
     if (!data) {
@@ -26,7 +29,7 @@ export function TransferInfo({data}: TransferProps) {
         );
     }
 
-    const transferItems = prepareTransferItems(data);
+    const transferItems = prepareTransferItems(path, database, data);
 
     return (
         <Flex direction="column" gap="4">
@@ -35,7 +38,29 @@ export function TransferInfo({data}: TransferProps) {
     );
 }
 
-function prepareTransferItems(data: TEvDescribeSchemeResult) {
+function prepareErrors(path: string, database: string) {
+    const {data, error} = replicationApi.useGetReplicationQuery({path, database}, {});
+
+    if (data?.error?.issues) {
+        return (
+            <Text variant="code-inline-2" color="danger">
+                {data.error.issues[0].message}
+            </Text>
+        );
+    }
+
+    if (error) {
+        return (
+            <Text variant="code-inline-2" color="danger">
+                Error
+            </Text>
+        );
+    }
+
+    return '';
+}
+
+function prepareTransferItems(path: string, database: string, data: TEvDescribeSchemeResult) {
     const transferDescription = data.PathDescription?.ReplicationDescription || {};
     const state = transferDescription.State;
     const srcConnectionParams = transferDescription.Config?.SrcConnectionParams || {};
@@ -44,6 +69,7 @@ function prepareTransferItems(data: TEvDescribeSchemeResult) {
     const srcPath = target?.SrcPath;
     const dstPath = target?.DstPath;
     const transformLambda = target?.TransformLambda;
+    const errors = prepareErrors(path, database);
 
     const info: DefinitionListItem[] = [];
 
@@ -54,6 +80,13 @@ function prepareTransferItems(data: TEvDescribeSchemeResult) {
         });
     }
 
+    if (errors) {
+        info.push({
+            name: i18n('state.error'),
+            content: errors,
+        });
+    }
+
     if (Endpoint) {
         info.push({
             name: i18n('srcConnection.endpoint.label'),

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

@@ -4,6 +4,7 @@
   "srcConnection.database.label": "Source Database Path",
   "srcConnection.endpoint.label": "Source Cluster Endpoint",
   "state.label": "State",
+  "state.error": "Error",
   "srcPath.label": "Source Topic",
   "dstPath.label": "Destination Table",
   "transformLambda.label": "Transformation Lambda"

src/services/api/viewer.ts

@@ -18,6 +18,7 @@ import type {
     SendQueryParams,
 } from '../../types/api/query';
 import type {JsonRenderRequestParams, JsonRenderResponse} from '../../types/api/render';
+import type {DescribeReplicationResult} from '../../types/api/replication';
 import type {TEvDescribeSchemeResult} from '../../types/api/schema';
 import type {StorageRequestParams, TStorageInfo} from '../../types/api/storage';
 import type {TEvSystemStateResponse} from '../../types/api/systemState';
@@ -229,6 +230,22 @@ export class ViewerAPI extends BaseYdbAPI {
         );
     }
 
+    getReplication(
+        {path, database}: {path: string; database: string},
+        {concurrentId, signal}: AxiosOptions = {},
+    ) {
+        return this.get<DescribeReplicationResult>(
+            this.getPath('/viewer/json/describe_replication'),
+            {
+                enums: true,
+                include_stats: true,
+                database,
+                path,
+            },
+            {concurrentId, requestConfig: {signal}},
+        );
+    }
+
     getTopic(
         {path, database}: {path: string; database: string},
         {concurrentId, signal}: AxiosOptions = {},

src/store/reducers/replication.ts

@@ -0,0 +1,24 @@
+/* eslint-disable camelcase */
+
+import {api} from './api';
+
+export const replicationApi = api.injectEndpoints({
+    endpoints: (build) => ({
+        getReplication: build.query({
+            queryFn: async (params: {path: string; database: string}) => {
+                try {
+                    const data = await window.api.viewer.getReplication(params);
+                    // On older version it can return HTML page of Developer UI with an error
+                    if (typeof data !== 'object') {
+                        return {error: {}};
+                    }
+                    return {data};
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
+    }),
+    overrideExisting: 'throw',
+});

src/types/api/replication.ts

@@ -0,0 +1,31 @@
+/* eslint-disable camelcase */
+
+import type {TIssueMessage} from './operations';
+
+/**
+ * endpoint: /json/describe_replication
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/public/api/protos/draft/ydb_replication.proto
+ *
+ * Original proto file doesn't specify optional fields, so every field is considered optional
+ */
+export interface DescribeReplicationResult {
+    items?: TReplicationItems;
+
+    error?: TReplicationErrorState;
+}
+
+export interface TReplicationErrorState {
+    issues?: TIssueMessage[];
+}
+
+export interface TReplicationItems {
+    items?: TReplicationItem[];
+}
+
+export interface TReplicationItem {
+    id?: string;
+    source_path?: string;
+    destination_path?: string;
+    source_changefeed_name?: string;
+}