[DOP-17517] add HDFS Connection Show Transfer (#24)

MobileTeleSystems · Jun 25, 2024 · 9e17c4c · 9e17c4c
1 parent a716422
commit 9e17c4c
Show file tree

Hide file tree

Showing 13 changed files with 261 additions and 15 deletions.
diff --git a/src/entities/connection/create/hdfsCreateForm.tsx b/src/entities/connection/create/hdfsCreateForm.tsx
@@ -0,0 +1,28 @@
+import { PasswordInput, required, TextInput } from "react-admin";
+
+const HDFSCreateForm = () => {
+    return (
+        <>
+            <TextInput
+                name={"connection_data.cluster"}
+                source="connection_data.cluster"
+                label={"Cluster"}
+                validate={required()}
+            />
+            <TextInput
+                name={"auth_data.user"}
+                source="auth_data.user"
+                label={"User"}
+                validate={required()}
+            />
+            <PasswordInput
+                name={"auth_data.password"}
+                source="auth_data.password"
+                label={"Password"}
+                validate={required()}
+            />
+        </>
+    );
+};
+
+export default HDFSCreateForm;
diff --git a/src/entities/connection/edit/hdfsEditForm.tsx b/src/entities/connection/edit/hdfsEditForm.tsx
@@ -0,0 +1,25 @@
+import { PasswordInput, TextInput } from "react-admin";
+
+const HDFSEditForm = () => {
+    return (
+        <>
+            <TextInput
+                name={"connection_data.cluster"}
+                source="connection_data.cluster"
+                label={"Cluster"}
+            />
+            <TextInput
+                source="auth_data.user"
+                label={"User"}
+                name={"auth_data.user"}
+            />
+            <PasswordInput
+                source="auth_data.password"
+                name={"auth_data.password"}
+                label={"Password"}
+            />
+        </>
+    );
+};
+
+export default HDFSEditForm;
diff --git a/src/entities/connection/show/hdfsShow.tsx b/src/entities/connection/show/hdfsShow.tsx
@@ -0,0 +1,29 @@
+import BaseConnectionShow from "@entities/connection/show/baseShow";
+
+import { ConnectionData } from "@widgets/connection/types";
+
+const HDFSConnectionShow = ({
+    data,
+    editable = true,
+    showTitle = true,
+}: {
+    data: ConnectionData;
+    editable?: boolean;
+    showTitle?: boolean;
+}) => {
+    return (
+        <BaseConnectionShow
+            data={data}
+            connectionColumns={[
+                {
+                    source: "connection_data.cluster",
+                    label: "Cluster",
+                },
+            ]}
+            editable={editable}
+            showTitle={showTitle}
+        />
+    );
+};
+
+export default HDFSConnectionShow;
diff --git a/src/entities/connection/wrappers/createFormWrapper.tsx b/src/entities/connection/wrappers/createFormWrapper.tsx
@@ -1,3 +1,4 @@
+import HDFSCreateForm from "@entities/connection/create/hdfsCreateForm";
 import HiveCreateForm from "@entities/connection/create/hiveCreateForm";
 import OracleCreateForm from "@entities/connection/create/oracleCreateForm";
 import PostgresCreateForm from "@entities/connection/create/postgresCreateForm";
@@ -13,6 +14,9 @@ const CreateFormWrapper = ({ connectionType }: { connectionType: string }) => {
     if (connectionType === "hive") {
         return <HiveCreateForm />;
     }
+    if (connectionType === "hdfs") {
+        return <HDFSCreateForm />;
+    }
 
     return <Warning message={"Unknown connection type"} />;
 };

diff --git a/src/entities/connection/wrappers/editFormWrapper.tsx b/src/entities/connection/wrappers/editFormWrapper.tsx
@@ -1,3 +1,4 @@
+import HDFSEditForm from "@entities/connection/edit/hdfsEditForm";
 import HiveEditForm from "@entities/connection/edit/hiveEditForm";
 import OracleEditForm from "@entities/connection/edit/oracleEditForm";
 import PostgresEditForm from "@entities/connection/edit/postgresEditForm";
@@ -13,6 +14,9 @@ const EditFormWrapper = ({ connectionType }: { connectionType: string }) => {
     if (connectionType === "hive") {
         return <HiveEditForm />;
     }
+    if (connectionType === "hdfs") {
+        return <HDFSEditForm />;
+    }
     return <Warning message={"Unknown connection type"} />;
 };
 export default EditFormWrapper;
diff --git a/src/entities/transfer/ui/show/fileSourceParamsShow.tsx b/src/entities/transfer/ui/show/fileSourceParamsShow.tsx
@@ -0,0 +1,53 @@
+import { Card } from "@mui/material";
+import {
+    RecordContextProvider,
+    SimpleShowLayout,
+    TextField,
+} from "react-admin";
+
+const FileSourceParamsShow = ({
+    data,
+}: {
+    data: {
+        source_params: {
+            directory_path: string;
+            file_format: object;
+            df_schema: string;
+        };
+    };
+}) => {
+    const processedData = {
+        ...data.source_params,
+        source_params: {
+            file_format: JSON.stringify(data.source_params.file_format),
+        },
+    };
+    return (
+        <RecordContextProvider value={processedData}>
+            <div style={{ paddingTop: "1em" }}>
+                <SimpleShowLayout>
+                    <Card>
+                        <TextField
+                            source={"source_params.directory_path"}
+                            label={"Directory path"}
+                            name={"source_params.directory_path"}
+                        />
+                        {/* TODO: the field with file_format is complex - there must be a type (drop-down list, like connection types), plus child fields (delimiter, quote, header, etc.) */}
+                        <TextField
+                            source={"source_params.file_format"}
+                            label={"File format"}
+                            name={"source_params.file_format"}
+                        />
+                        <TextField
+                            source={"source_params.df_schema"}
+                            label={"DF Schema"}
+                            name={"source_params.df_schema"}
+                        />
+                    </Card>
+                </SimpleShowLayout>
+            </div>
+        </RecordContextProvider>
+    );
+};
+
+export default FileSourceParamsShow;
diff --git a/src/entities/transfer/ui/show/fileTargetParamsShow.tsx b/src/entities/transfer/ui/show/fileTargetParamsShow.tsx
@@ -0,0 +1,53 @@
+import { Card } from "@mui/material";
+import {
+    RecordContextProvider,
+    SimpleShowLayout,
+    TextField,
+} from "react-admin";
+
+const FileTargetParamsShow = ({
+    data,
+}: {
+    data: {
+        target_params: {
+            directory_path: string;
+            file_format: object;
+            df_schema: string;
+        };
+    };
+}) => {
+    const processedData = {
+        ...data.target_params,
+        target_params: {
+            file_format: JSON.stringify(data.target_params.file_format),
+        },
+    };
+    return (
+        <RecordContextProvider value={processedData}>
+            <div style={{ paddingTop: "1em" }}>
+                <SimpleShowLayout>
+                    <Card>
+                        <TextField
+                            source={"target_params.directory_path"}
+                            label={"Directory path"}
+                            name={"target_params.directory_path"}
+                        />
+                        {/* TODO: the field with file_format is complex - there must be a type (drop-down list, like connection types), plus child fields (delimiter, quote, header, etc.) */}
+                        <TextField
+                            source={"target_params.file_format"}
+                            label={"File format"}
+                            name={"target_params.file_format"}
+                        />
+                        <TextField
+                            source={"target_params.df_schema"}
+                            label={"DF Schema"}
+                            name={"target_params.df_schema"}
+                        />
+                    </Card>
+                </SimpleShowLayout>
+            </div>
+        </RecordContextProvider>
+    );
+};
+
+export default FileTargetParamsShow;
diff --git a/src/widgets/connection/types.tsx b/src/widgets/connection/types.tsx
@@ -13,6 +13,11 @@ export type HiveAuthData = {
     user: string;
 };
 
+export type HDFSAuthData = {
+    type: "hdfs";
+    user: string;
+};
+
 export type PostgresConnectionData = {
     additional_params: string;
     database_name: string;
@@ -27,6 +32,12 @@ export type HiveConnectionData = {
     additional_params?: string;
 };
 
+export type HDFSConnectionData = {
+    cluster: string;
+    type: "hdfs";
+    additional_params?: string;
+};
+
 export type OracleConnectionData = {
     additional_params: string;
     service_name: string;
@@ -45,5 +56,6 @@ export type ConnectionData = {
     connection_data:
         | PostgresConnectionData
         | OracleConnectionData
-        | HiveConnectionData;
+        | HiveConnectionData
+        | HDFSConnectionData;
 };
diff --git a/src/widgets/connection/ui/wrappers/connectionEditWrapper.tsx b/src/widgets/connection/ui/wrappers/connectionEditWrapper.tsx
@@ -15,7 +15,8 @@ const ConnectionEditWrapper = () => {
     if (
         data.connection_data.type === "postgres" ||
         data.connection_data.type === "oracle" ||
-        data.connection_data.type === "hive"
+        data.connection_data.type === "hive" ||
+        data.connection_data.type === "hdfs"
     ) {
         return <ConnectionEdit data={data} />;
     }

diff --git a/src/widgets/connection/ui/wrappers/connectionShowWrapper.tsx b/src/widgets/connection/ui/wrappers/connectionShowWrapper.tsx
@@ -1,3 +1,4 @@
+import HDFSConnectionShow from "@entities/connection/show/hdfsShow";
 import HiveConnectionShow from "@entities/connection/show/hiveShow";
 import OracleConnectionShow from "@entities/connection/show/oracleShow";
 import PostgresConnectionShow from "@entities/connection/show/postgresShow";
@@ -29,6 +30,9 @@ const ConnectionShowWrapper = () => {
     if (data.connection_data.type === "hive") {
         return <HiveConnectionShow data={data} />;
     }
+    if (data.connection_data.type === "hdfs") {
+        return <HDFSConnectionShow data={data} />;
+    }
 
     return <Warning message="Connection type does not implemented yet" />;
 };

diff --git a/src/widgets/run/ui/show/dumpConnectionDataWrapper.tsx b/src/widgets/run/ui/show/dumpConnectionDataWrapper.tsx
@@ -1,3 +1,4 @@
+import HDFSConnectionShow from "@entities/connection/show/hdfsShow";
 import HiveConnectionShow from "@entities/connection/show/hiveShow";
 import OracleConnectionShow from "@entities/connection/show/oracleShow";
 import PostgresConnectionShow from "@entities/connection/show/postgresShow";
@@ -38,6 +39,15 @@ const DumpConnectionDataWrapper = ({ data }: { data: ConnectionData }) => {
             />
         );
     }
+    if (data.connection_data.type === "hdfs") {
+        return (
+            <HDFSConnectionShow
+                data={data}
+                editable={false}
+                showTitle={false}
+            />
+        );
+    }
 
     return <Warning message="Connection type does not implemented yet" />;
 };

diff --git a/src/widgets/transfer/ui/transferShow.tsx b/src/widgets/transfer/ui/transferShow.tsx
@@ -1,10 +1,14 @@
+import TitleElement from "@entities/titleElement";
 import DBSourceParamsShow from "@entities/transfer/ui/show/dbSourceParamsShow";
 import DBTargetParamsShow from "@entities/transfer/ui/show/dbTargetParamsShow";
+import FileSourceParamsShow from "@entities/transfer/ui/show/fileSourceParamsShow";
+import FileTargetParamsShow from "@entities/transfer/ui/show/fileTargetParamsShow";
 import useEnableGroupSelector from "@hooks/useEnableGroupSelector";
 import { Card } from "@mui/material";
 import LinkedField from "@shared/linkedField";
 import Error from "@shared/ui/error";
 import RunList from "@widgets/run/ui/list/runList";
+import { dbTypes } from "@widgets/transfer/ui/types";
 import { useEffect } from "react";
 import {
     BooleanField,
@@ -17,7 +21,6 @@ import {
     useGetOne,
 } from "react-admin";
 import { useParams } from "react-router";
-import TitleElement from "@entities/titleElement";
 
 const TransferShow = () => {
     const [, setEnableGroupSelector] = useEnableGroupSelector();
@@ -54,24 +57,42 @@ const TransferShow = () => {
                             label={`Source connection (${data.source_params.type})`}
                             resource={"connections"}
                         />
-                        <DBSourceParamsShow
-                            // @ts-expect-error  label is react-admin magic field
-                            label={"Source (schema.table)"}
-                        />
-                        {/** // TODO: without the label option it does not show the */}
-                        field name
+                        {/* if there is a file connection */}
+                        {dbTypes.includes(data.source_params.type) && (
+                            <DBSourceParamsShow
+                                // @ts-expect-error  label is react-admin magic field
+                                label={"Source (schema.table)"}
+                            />
+                        )}
+                        {!dbTypes.includes(data.source_params.type) && (
+                            <FileSourceParamsShow
+                                // @ts-expect-error  label is react-admin magic field
+                                label={"Source params"}
+                                data={data}
+                            />
+                        )}
+                        {/** // TODO: without the label option it does not show the field name */}
                         <LinkedField
                             id={data.target_connection_id}
                             // @ts-expect-error  label is react-admin magic field
                             label={`Target connection (${data.target_params.type})`}
                             resource={"connections"}
                         />
-                        <DBTargetParamsShow
-                            // @ts-expect-error  label is react-admin magic field
-                            label={"Target (schema.table)"}
-                        />
-                        {/** // TODO: without the label option it does not show the */}
-                        field name
+                        {/* if there is a file connection */}
+                        {dbTypes.includes(data.target_params.type) && (
+                            <DBTargetParamsShow
+                                // @ts-expect-error  label is react-admin magic field
+                                label={"Target (schema.table)"}
+                            />
+                        )}
+                        {!dbTypes.includes(data.source_params.type) && (
+                            <FileTargetParamsShow
+                                // @ts-expect-error  label is react-admin magic field
+                                label={"Target params"}
+                                data={data}
+                            />
+                        )}
+                        {/** // TODO: without the label option it does not show the field name */}
                         <BooleanField
                             name="is_scheduled"
                             label="Is scheduled"

diff --git a/src/widgets/transfer/ui/types.tsx b/src/widgets/transfer/ui/types.tsx
@@ -2,3 +2,5 @@ export const strategyParams = [
     { name: "full", id: "full" },
     { name: "incremental", id: "incremental", disabled: true },
 ];
+
+export const dbTypes = ["postgres", "hive", "oracle"];