[DOP-20065] transfer list and transfer detail (#40)

Co-authored-by: Zabilsya <[email protected]>

.env.example

@@ -1 +1 @@
-API_URL="https://localhost:8000/v1/"
+API_URL="http://localhost:8000/v1/"

src/app/config/router/instance.tsx

@@ -7,6 +7,7 @@ import { CreateGroupPage, GroupDetailPage, GroupListPage, UpdateGroupPage } from
 import { AuthProvider } from '@entities/auth';
 import { CreateQueuePage, QueueDetailPage, QueueListPage, UpdateQueuePage } from '@pages/queue';
 import { ConnectionDetailPage, ConnectionListPage } from '@pages/connection';
+import { TransferDetailPage, TransferListPage } from '@pages/transfer';
 
 import { ErrorBoundary, NotFoundError } from '../errorBoundary';
 
@@ -86,6 +87,14 @@ export const router = createBrowserRouter([
             path: '/connections/:id',
             element: <ConnectionDetailPage />,
           },
+          {
+            path: '/transfers',
+            element: <TransferListPage />,
+          },
+          {
+            path: '/transfers/:id',
+            element: <TransferDetailPage />,
+          },
         ],
       },
       {

src/app/styles/antd.less

@@ -3,8 +3,12 @@
   border-radius: 0;
 }
 
+.ant-descriptions {
+  width: 100%;
+}
+
 .ant-descriptions-item-label {
-  width: 300px;
+  width: 250px;
   font-weight: 700;
 }
 

src/entities/connection/api/types.ts

@@ -1,4 +1,4 @@
-import { PaginationRequest } from '@shared/types';
+import { ConnectionType, PaginationRequest } from '@shared/types';
 
 export type Connection = {
   id: number;
@@ -11,33 +11,33 @@ type ConnectionData = ConnectionHive | ConnectionHdfs | ConnectionOracle | Conne
 
 interface ConnectionHive {
   auth_data: {
-    type: 'hive';
+    type: ConnectionType.HIVE;
     user: string;
   };
   connection_data: {
-    type: 'hive';
+    type: ConnectionType.HIVE;
     cluster: string;
   };
 }
 
 interface ConnectionHdfs {
   auth_data: {
-    type: 'hdfs';
+    type: ConnectionType.HDFS;
     user: string;
   };
   connection_data: {
-    type: 'hdfs';
+    type: ConnectionType.HDFS;
     cluster: string;
   };
 }
 
 interface ConnectionOracle {
   auth_data: {
-    type: 'oracle';
+    type: ConnectionType.ORACLE;
     user: string;
   };
   connection_data: {
-    type: 'oracle';
+    type: ConnectionType.ORACLE;
     host: string;
     port: number;
     service_name: string | null;
@@ -48,11 +48,11 @@ interface ConnectionOracle {
 
 interface ConnectionPostgres {
   auth_data: {
-    type: 'postgres';
+    type: ConnectionType.POSTGRES;
     user: string;
   };
   connection_data: {
-    type: 'postgres';
+    type: ConnectionType.POSTGRES;
     host: string;
     port: number;
     database_name: string;
@@ -62,11 +62,11 @@ interface ConnectionPostgres {
 
 interface ConnectionS3 {
   auth_data: {
-    type: 's3';
+    type: ConnectionType.S3;
     access_key: string;
   };
   connection_data: {
-    type: 's3';
+    type: ConnectionType.S3;
     host: string;
     bucket: string;
     bucket_style: 'domain' | 'path';

src/entities/transfer/api/hooks/index.ts

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

src/entities/transfer/api/hooks/useGetTransfer/index.ts

@@ -0,0 +1,13 @@
+import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+
+import { transferService } from '../../transferService';
+import { GetTransferRequest, Transfer } from '../../types';
+import { TransferQueryKey } from '../../keys';
+
+/** Hook for getting transfer info from backend */
+export const useGetTransfer = ({ id }: GetTransferRequest): UseSuspenseQueryResult<Transfer> => {
+  return useSuspenseQuery({
+    queryKey: [TransferQueryKey.GET_TRANSFER, id],
+    queryFn: () => transferService.getTransfer({ id }),
+  });
+};

src/entities/transfer/api/index.ts

@@ -0,0 +1,4 @@
+export * from './transferService';
+export * from './types';
+export * from './keys';
+export * from './hooks';

src/entities/transfer/api/keys/index.ts

@@ -0,0 +1,4 @@
+export const TransferQueryKey = {
+  GET_TRANSFERS: 'GET_TRANSFERS',
+  GET_TRANSFER: 'GET_TRANSFER',
+} as const;

src/entities/transfer/api/transferService.ts

@@ -0,0 +1,14 @@
+import { axiosInstance } from '@shared/config';
+import { PaginationResponse } from '@shared/types';
+
+import { GetTransferRequest, GetTransfersRequest, Transfer } from './types';
+
+export const transferService = {
+  getTransfers: (params: GetTransfersRequest): Promise<PaginationResponse<Transfer>> => {
+    return axiosInstance.get('transfers', { params });
+  },
+
+  getTransfer: ({ id }: GetTransferRequest): Promise<Transfer> => {
+    return axiosInstance.get(`transfers/${id}`);
+  },
+};

src/entities/transfer/api/types.ts

@@ -0,0 +1,81 @@
+import { ConnectionType, FileFormat, FileFormatCsv, FileFormatJsonLine, PaginationRequest } from '@shared/types';
+
+export interface Transfer {
+  id: number;
+  group_id: number;
+  name: string;
+  source_connection_id: number;
+  target_connection_id: number;
+  description: string;
+  is_scheduled: boolean;
+  schedule: string;
+  queue_id: number;
+  source_params:
+    | TransferParamsHive
+    | TransferParamsOracle
+    | TransferParamsPostgres
+    | TransferSourceParamsHdfs
+    | TransferSourceParamsS3;
+  target_params:
+    | TransferParamsHive
+    | TransferParamsOracle
+    | TransferParamsPostgres
+    | TransferTargetParamsHdfs
+    | TransferTargetParamsS3;
+  strategy_params: TransferStrategyParams;
+}
+
+interface TransferStrategyParams {
+  type: 'full' | 'incremental';
+}
+
+interface TransferParamsHive {
+  type: ConnectionType.HIVE;
+  table_name: string;
+}
+
+interface TransferParamsOracle {
+  type: ConnectionType.ORACLE;
+  table_name: string;
+}
+
+interface TransferParamsPostgres {
+  type: ConnectionType.POSTGRES;
+  table_name: string;
+}
+
+interface TransferParamsHdfs {
+  type: ConnectionType.HDFS;
+  directory_path: string;
+  options: object;
+}
+
+interface TransferSourceParamsHdfs extends TransferParamsHdfs {
+  file_format: FileFormat;
+}
+
+interface TransferTargetParamsHdfs extends TransferParamsHdfs {
+  file_format: FileFormatCsv | FileFormatJsonLine;
+}
+
+interface TransferParamsS3 {
+  type: ConnectionType.S3;
+  directory_path: string;
+  options: object;
+}
+
+interface TransferSourceParamsS3 extends TransferParamsS3 {
+  file_format: FileFormat;
+}
+
+interface TransferTargetParamsS3 extends TransferParamsS3 {
+  file_format: FileFormatCsv | FileFormatJsonLine;
+}
+
+export interface GetTransfersRequest extends PaginationRequest {
+  group_id: number;
+}
+
+export interface GetTransferRequest {
+  id: number;
+}

src/entities/transfer/index.ts

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

src/features/connection/ConnectionDetailInfo/components/ConnectionAuthData/index.tsx

@@ -6,7 +6,7 @@ import { getDescriptionItems } from './utils';
 
 export const ConnectionAuthData = ({ data, ...props }: ConnectionAuthDataProps) => {
   return (
-    <Descriptions title="Connection auth data" bordered {...props}>
+    <Descriptions {...props}>
       <Descriptions.Item label="Type" span={3}>
         {data.type}
       </Descriptions.Item>

src/features/connection/ConnectionDetailInfo/components/ConnectionAuthData/utils/getDescriptionItems/index.ts

@@ -1,18 +1,21 @@
-import { DescriptionItem } from '@shared/types';
+import { ConnectionType, DescriptionItem } from '@shared/types';
 
 import { GetDescriptionItemsProps } from './types';
 
 /** Util for mapping data for Description component depends on connection type */
 export const getDescriptionItems = ({ data }: GetDescriptionItemsProps): DescriptionItem[] => {
   switch (data.type) {
-    case 's3':
+    case ConnectionType.S3:
       return [
         {
           label: 'Access key',
           content: data.access_key,
         },
       ];
-    default:
+    case ConnectionType.HIVE:
+    case ConnectionType.HDFS:
+    case ConnectionType.ORACLE:
+    case ConnectionType.POSTGRES:
       return [
         {
           label: 'User',

src/features/connection/ConnectionDetailInfo/components/ConnectionData/index.tsx

@@ -6,7 +6,7 @@ import { getDescriptionItems } from './utils';
 
 export const ConnectionData = ({ data, ...props }: ConnectionDataProps) => {
   return (
-    <Descriptions title="Connection data" bordered {...props}>
+    <Descriptions {...props}>
       <Descriptions.Item label="Type" span={3}>
         {data.type}
       </Descriptions.Item>

src/features/connection/ConnectionDetailInfo/components/ConnectionData/utils/getDescriptionItems/index.ts

@@ -1,11 +1,11 @@
-import { DescriptionItem } from '@shared/types';
+import { ConnectionType, DescriptionItem } from '@shared/types';
 
 import { GetDescriptionItemsProps } from './types';
 
 /** Util for mapping data for Description component depends on connection type */
 export const getDescriptionItems = ({ data }: GetDescriptionItemsProps): DescriptionItem[] => {
   switch (data.type) {
-    case 'oracle':
+    case ConnectionType.ORACLE:
       return [
         {
           label: 'Host',
@@ -24,7 +24,7 @@ export const getDescriptionItems = ({ data }: GetDescriptionItemsProps): Descrip
           content: data.sid || '',
         },
       ];
-    case 'postgres':
+    case ConnectionType.POSTGRES:
       return [
         {
           label: 'Host',
@@ -39,7 +39,7 @@ export const getDescriptionItems = ({ data }: GetDescriptionItemsProps): Descrip
           content: data.database_name,
         },
       ];
-    case 's3':
+    case ConnectionType.S3:
       return [
         {
           label: 'Host',
@@ -66,7 +66,8 @@ export const getDescriptionItems = ({ data }: GetDescriptionItemsProps): Descrip
           content: data.region || '',
         },
       ];
-    default:
+    case ConnectionType.HIVE:
+    case ConnectionType.HDFS:
       return [
         {
           label: 'Cluster',

src/features/connection/ConnectionDetailInfo/index.tsx

@@ -22,10 +22,13 @@ export const ConnectionDetailInfo = ({ connection, group, ...props }: Connection
         <Descriptions.Item label="Group" span={3}>
           <Link to={`/groups/${group.id}`}>{group.name}</Link>
         </Descriptions.Item>
+        <Descriptions.Item className={classes.subDescription} label="Auth data" span={3}>
+          <ConnectionAuthData data={connection.auth_data} />
+        </Descriptions.Item>
+        <Descriptions.Item className={classes.subDescription} label="Connection data" span={3}>
+          <ConnectionData data={connection.connection_data} />
+        </Descriptions.Item>
       </Descriptions>
-
-      <ConnectionAuthData data={connection.auth_data} />
-      <ConnectionData data={connection.connection_data} />
     </div>
   );
 };

src/features/connection/ConnectionDetailInfo/styles.module.less

@@ -2,4 +2,18 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
+
+  .subDescription {
+    :global(+ .ant-descriptions-item-content) {
+      padding: 0;
+    }
+
+    :global(.ant-descriptions-item) {
+      padding: 0;
+    }
+
+    :global(.ant-descriptions-view) {
+      border: 0;
+    }
+  }
 }

src/features/transfer/TransferDetailInfo/components/TransferFileFormatData/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Descriptions } from 'antd';
+
+import { TransferFileFormatDataProps } from './types';
+import { getDescriptionItems } from './utils';
+
+export const TransferFileFormatData = ({ data, ...props }: TransferFileFormatDataProps) => {
+  return (
+    <Descriptions {...props}>
+      <Descriptions.Item label="Type" span={3}>
+        {data.type}
+      </Descriptions.Item>
+      {getDescriptionItems({ data }).map((item, index) => (
+        <Descriptions.Item label={item.label} span={3} key={index}>
+          {item.content}
+        </Descriptions.Item>
+      ))}
+    </Descriptions>
+  );
+};

src/features/transfer/TransferDetailInfo/components/TransferFileFormatData/types.ts

@@ -0,0 +1,6 @@
+import { FileFormat } from '@shared/types';
+import { DescriptionsProps } from 'antd';
+
+export interface TransferFileFormatDataProps extends DescriptionsProps {
+  data: FileFormat;
+}