From 8dec47ff63ab0f67ecfcd012c2ae6868cc2de084 Mon Sep 17 00:00:00 2001 From: Atharva Ombase <94031822+atharvaombase@users.noreply.github.com> Date: Tue, 15 Apr 2025 04:10:27 +0530 Subject: [PATCH 1/5] Feat: Added table to list and view HDFS files with dynamic navigation --- Frontend/src/components/FileList.jsx | 134 +++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 Frontend/src/components/FileList.jsx diff --git a/Frontend/src/components/FileList.jsx b/Frontend/src/components/FileList.jsx new file mode 100644 index 0000000..22e4d1a --- /dev/null +++ b/Frontend/src/components/FileList.jsx @@ -0,0 +1,134 @@ +import React, { useState, useEffect } from "react"; +import PropTypes from "prop-types"; + +const FileTable = ({ initialPath }) => { + const [currentPath, setCurrentPath] = useState(initialPath || "/"); + const [files, setFiles] = useState([]); + + // Helpers to parse entry + const getType = (entry) => + entry.trim().startsWith("📁") ? "Folder" : "File"; + const getName = (entry) => entry.trim().replace(/^📁\s*|^📄\s*/, ""); + const isFile = (entry) => getType(entry) === "File"; + + // Fetch and show only top-level entries (indentation = 0) + const fetchFiles = async () => { + try { + const response = await fetch( + `http://192.168.29.61:8080/api/hdfs/listFiles?hdfsPath=${currentPath}` + ); + const data = await response.json(); + + // Filter entries: only those without leading spaces + const filtered = data.filter( + (entry) => entry.match(/^ */)[0].length === 0 + ); + setFiles(filtered); + } catch (error) { + console.error("Failed to fetch files:", error); + setFiles([]); + } + }; + + useEffect(() => { + fetchFiles(); + }, [currentPath]); + + // Navigate into a folder + const handleOpenFolder = (folderName) => { + const newPath = + currentPath === "/" ? `/${folderName}` : `${currentPath}/${folderName}`; + setCurrentPath(newPath); + }; + + // Go up one level + const goBack = () => { + if (currentPath === "/") return; + const parts = currentPath.split("/").filter(Boolean); + parts.pop(); + setCurrentPath(parts.length === 0 ? "/" : `/${parts.join("/")}`); + }; + + return ( +
+
+ Path: {currentPath} + {currentPath !== "/" && ( + + )} +
+ + + + + + + + + + {files.length === 0 ? ( + + + + ) : ( + files.map((entry, idx) => { + const name = getName(entry); + const type = getType(entry); + const encodedPath = encodeURIComponent(`${currentPath}/${name}`); + const downloadUrl = `http://192.168.29.61:8080/api/hdfs/downloadFile?hdfsPath=${encodedPath}&localPath=E:/testdownload/${name}&kalas=${ + currentPath.split("/")[1] || "user" + }`; + + return ( + + + + + + ); + }) + )} + +
+ File Name + + Type + + Action +
+ No files found. +
+ {name} + {type} + {isFile(entry) ? ( + + Download + + ) : ( + + )} +
+
+ ); +}; + +FileTable.propTypes = { + initialPath: PropTypes.string, +}; + +export default FileTable; From 2f6dcf13f70debe9e69b7586a2f101b125395c16 Mon Sep 17 00:00:00 2001 From: Atharva Ombase <94031822+atharvaombase@users.noreply.github.com> Date: Tue, 15 Apr 2025 04:11:16 +0530 Subject: [PATCH 2/5] Feat:Added some dependancies --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index f7d7ae9..dfff477 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "Drive-thru", + "name": "cc-mini", "lockfileVersion": 3, "requires": true, "packages": {} From 710a08c8687902d43095a63b6d91f1091351b020 Mon Sep 17 00:00:00 2001 From: Atharva Ombase <94031822+atharvaombase@users.noreply.github.com> Date: Tue, 15 Apr 2025 04:12:02 +0530 Subject: [PATCH 3/5] Feat:Added some dependancies --- Frontend/package-lock.json | 109 ++++++++++++++++++++++++++++++++++++- 1 file changed, 107 insertions(+), 2 deletions(-) diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index 3a4322a..fa6a50a 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -8,10 +8,13 @@ "name": "drive-thru", "version": "0.0.0", "dependencies": { + "@reduxjs/toolkit": "^2.6.0", "@tailwindcss/vite": "^4.0.9", + "lucide-react": "^0.476.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.5.0", + "react-redux": "^9.2.0", "react-router-dom": "^7.2.0" }, "devDependencies": { @@ -921,6 +924,30 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@reduxjs/toolkit": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.6.1.tgz", + "integrity": "sha512-SSlIqZNYhqm/oMkXbtofwZSt9lrncblzo6YcZ9zoX+zLngRBrCOjK4lNLdkNucJF58RHOWrD9txT3bT3piH7Zw==", + "license": "MIT", + "dependencies": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.34.8", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz", @@ -1420,7 +1447,7 @@ "version": "19.0.10", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz", "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==", - "dev": true, + "devOptional": true, "dependencies": { "csstype": "^3.0.2" } @@ -1434,6 +1461,12 @@ "@types/react": "^19.0.0" } }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", + "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==", + "license": "MIT" + }, "node_modules/@vitejs/plugin-react": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz", @@ -1897,7 +1930,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "devOptional": true }, "node_modules/data-view-buffer": { "version": "1.0.2", @@ -2847,6 +2880,16 @@ "node": ">= 4" } }, + "node_modules/immer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/import-fresh": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", @@ -3624,6 +3667,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.476.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.476.0.tgz", + "integrity": "sha512-x6cLTk8gahdUPje0hSgLN1/MgiJH+Xl90Xoxy9bkPAsMPOUiyRSKR4JCDPGVCEpyqnZXH3exFWNItcvra9WzUQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -3998,6 +4050,29 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-redux": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", + "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", + "license": "MIT", + "dependencies": { + "@types/use-sync-external-store": "^0.0.6", + "use-sync-external-store": "^1.4.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25 || ^19", + "react": "^18.0 || ^19", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", @@ -4045,6 +4120,21 @@ "react-dom": ">=18" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "license": "MIT" + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "license": "MIT", + "peerDependencies": { + "redux": "^5.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -4087,6 +4177,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "license": "MIT" + }, "node_modules/resolve": { "version": "2.0.0-next.5", "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz", @@ -4658,6 +4754,15 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz", + "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/vite": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz", From 4219570d80f9094a29fdd9aecac2c61a6289a740 Mon Sep 17 00:00:00 2001 From: Atharva Ombase <94031822+atharvaombase@users.noreply.github.com> Date: Tue, 15 Apr 2025 04:14:00 +0530 Subject: [PATCH 4/5] Feat:Added file table on the Dashboard --- Frontend/src/pages/UserPages/Dashboard.jsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/Frontend/src/pages/UserPages/Dashboard.jsx b/Frontend/src/pages/UserPages/Dashboard.jsx index 887f332..d866320 100644 --- a/Frontend/src/pages/UserPages/Dashboard.jsx +++ b/Frontend/src/pages/UserPages/Dashboard.jsx @@ -1,17 +1,27 @@ import React from "react"; import Sidebar from "../../components/Sidebar"; +import FileList from "../../components/FileList"; const Dashboard = () => { + const [files, setFiles] = React.useState([]); + + React.useEffect(() => { + const fetchData = async () => { + const response = await fetch( + "http://192.168.29.61:8080/api/hdfs/listFiles?hdfsPath=/" + ); + const data = await response.json(); + setFiles(data); + }; + fetchData(); + }, []); + return ( <>
-

Dashboard

-

- This is your custom dashboard body. Place your widgets, charts, - stats, or other components here. -

+
From a5168a282b4a65481d177b8e65fc1a2f5859590c Mon Sep 17 00:00:00 2001 From: Kshitij <160704796+kshitij-ka@users.noreply.github.com> Date: Tue, 15 Apr 2025 11:04:40 +0530 Subject: [PATCH 5/5] Merged Salvi's upload functionality and Ombase's list files functionality. --- Frontend/src/components/FileUpload.jsx | 68 ++++++++++++++++++ Frontend/src/pages/UserPages/Dashboard.jsx | 80 ++++++++++++++++++++++ Frontend/src/utils/api.js | 34 +++++++++ 3 files changed, 182 insertions(+) create mode 100644 Frontend/src/components/FileUpload.jsx create mode 100644 Frontend/src/utils/api.js diff --git a/Frontend/src/components/FileUpload.jsx b/Frontend/src/components/FileUpload.jsx new file mode 100644 index 0000000..2d017c8 --- /dev/null +++ b/Frontend/src/components/FileUpload.jsx @@ -0,0 +1,68 @@ +import React, { useState } from "react"; +import { uploadFileToHDFS } from "../utils/api"; + +const FileUpload = () => { + const [file, setFile] = useState(null); + const [hdfsPath, setHdfsPath] = useState("/kalas"); + const [uploadedFileName, setUploadedFileName] = useState(""); + const [username, setUsername] = useState("kalas"); + + const handleSubmit = (e) => { + e.preventDefault(); + if (!file || !uploadedFileName) { + return; + } + uploadFileToHDFS(file, hdfsPath, uploadedFileName, username); + }; + + return ( +
+

Upload File Your File

+ + { + setFile(e.target.files[0]); + setUploadedFileName(e.target.files[0]?.name || ""); + }} + className="mb-2" + /> + + {/* setHdfsPath(e.target.value)} + className="border p-2 mb-2 w-full" + /> */} + + {/* setUploadedFileName(e.target.value)} + className="border p-2 mb-2 w-full" + /> */} + + {/* setUsername(e.target.value)} + className="border p-2 mb-2 w-full" + /> */} + + +
+ ); +}; + +export default FileUpload; diff --git a/Frontend/src/pages/UserPages/Dashboard.jsx b/Frontend/src/pages/UserPages/Dashboard.jsx index d866320..9e1a582 100644 --- a/Frontend/src/pages/UserPages/Dashboard.jsx +++ b/Frontend/src/pages/UserPages/Dashboard.jsx @@ -1,6 +1,8 @@ import React from "react"; import Sidebar from "../../components/Sidebar"; import FileList from "../../components/FileList"; +import FileUpload from "../../components/FileUpload"; +import { FiPlus } from "react-icons/fi"; const Dashboard = () => { const [files, setFiles] = React.useState([]); @@ -18,10 +20,88 @@ const Dashboard = () => { return ( <> + {/* */} +
+
+

Dashboard

+ +
+ +
+ {/* */} +
diff --git a/Frontend/src/utils/api.js b/Frontend/src/utils/api.js new file mode 100644 index 0000000..0c47348 --- /dev/null +++ b/Frontend/src/utils/api.js @@ -0,0 +1,34 @@ +// utils/api.js +export const uploadFileToHDFS = async ( + file, + hdfsPath, + uploadedFileName, + username +) => { + const formData = new FormData(); + formData.append("file", file); + formData.append("hdfsPath", "/kalas"); + formData.append("uploadedFileName", uploadedFileName); + formData.append("username", "kalas"); + + try { + const response = await fetch( + "http://192.168.29.61:8080/api/hdfs/uploadFile", + { + method: "POST", + body: formData, + } + ); + + if (response.ok) { + const data = await response.json(); // or response.json() if JSON is returned + + console.log("Response:", data); + } else { + console.error("Upload failed with status:", response.status); + } + } catch (error) { + console.error("Error uploading file:", error); + alert("An error occurred while uploading the file."); + } +};