Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: folks can now use frontend to view file artifacts and it's cont…
…ent. (#967) Once this PR is merged, users can use frontend to view contents of the file artifacts. The content itself is not formatted at the moment but things like yaml formatter and json formatter can be added later on.
- Loading branch information
Showing
29 changed files
with
645 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,198 @@ | ||
| import Heading from "./Heading"; | ||
| import { useEffect, useState } from "react"; | ||
| import {useNavigate, useParams, useLocation} from "react-router-dom"; | ||
| import {getFileArtifactInfo} from "../api/container"; | ||
|
|
||
| import NoData from "./NoData"; | ||
| import LeftPanel from "./LeftPanel"; | ||
| import RightPanel from "./RightPanel"; | ||
| import LoadingOverlay from "./LoadingOverflow"; | ||
| import e from "cors"; | ||
|
|
||
| const BreadCumbs = ({currentPath, handleOnClick, handleCleanButton}) => { | ||
| const total = currentPath.length; | ||
|
|
||
| const BreadCumb = ({text, last, color="text-slate-800", index, handleOnClick}) => { | ||
| return ( | ||
| <div className={`${color} cursor-default font-bold`} onClick={()=>handleOnClick(index)}> | ||
| {text} {last ? "" : "/"} | ||
| </div>) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex flex-row py-2 px-5 flex-wrap"> | ||
| { | ||
| currentPath.map((path, index) => ( | ||
| <BreadCumb key={index} text={path} last={total-1 === index} index={index} handleOnClick={handleOnClick}/> | ||
| )) | ||
| } | ||
| { | ||
| currentPath.length > 0 ? | ||
| <div className="mx-3" onClick={handleCleanButton}> | ||
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | ||
| <path color="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | ||
| </svg> | ||
| </div> : null | ||
| } | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const renderFileArtfiacts = (fileArtifacts, handleClick) => { | ||
| return fileArtifacts.map(fileArtifact => { | ||
| return ( | ||
| <div className={`flex items-center justify-center h-14 text-base bg-green-700`} key={fileArtifact.name} onClick={()=>handleClick(fileArtifact.name)}> | ||
| <div className='cursor-default text-lg text-white'> {fileArtifact.name} </div> | ||
| </div> | ||
| ) | ||
| }) | ||
| } | ||
|
|
||
| const renderFiles = (files, handleFileClick) => { | ||
| if (files.length === 0) { | ||
| return ( | ||
| <NoData | ||
| text={`No File Preview Available`} | ||
| size={`text-xl`} | ||
| color={`text-red-400`} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| return Object.keys(files).map((key)=> { | ||
| return ( | ||
| <div className="border-4 bg-slate-800 text-lg align-middle text-center h-16 p-3 text-green-600" onClick={()=> handleFileClick(key, files[key])}> | ||
| <div> {key} </div> | ||
| </div> | ||
| ) | ||
| }) | ||
| } | ||
|
|
||
| const FileArtifactInfo = ({enclaves}) => { | ||
| const navigate = useNavigate(); | ||
|
|
||
| const params = useParams(); | ||
| const {name: enclaveName, fileArtifactName} = params; | ||
| const [fileInfoLoading, setFileInfoLoading] = useState(false); | ||
| const [currentFiles, setCurrentFiles] = useState({}) | ||
| const [files, setFiles] = useState({}) | ||
| const [currentPath, setCurrentPath] = useState([]) | ||
| const [detailInfo, setDetailInfo] = useState({}) | ||
| const {state} = useLocation(); | ||
| const {fileArtifacts} = state; | ||
|
|
||
| useEffect(() => { | ||
| if (enclaves.length === 0) { | ||
| navigate(`/enclaves/${enclaveName}`) | ||
| } else { | ||
| setFileInfoLoading(true) | ||
| const fetch = async () => { | ||
| const selected = enclaves.filter(enclave => enclave.name === enclaveName); | ||
| if (selected.length > 0) { | ||
| const {files} = await getFileArtifactInfo(selected[0].apiClient, fileArtifactName); | ||
| setFiles(files) | ||
| setCurrentFiles(files) | ||
| setCurrentPath([]) | ||
| setDetailInfo({}) | ||
| } | ||
| setFileInfoLoading(false) | ||
| } | ||
| fetch() | ||
| } | ||
| }, [fileArtifactName]) | ||
|
|
||
| const handleCleanButton = () => { | ||
| setCurrentPath([]) | ||
| setDetailInfo({}) | ||
| setCurrentFiles(files) | ||
| } | ||
|
|
||
| const handleFileClick = (key, file) => { | ||
| if (file.path) { | ||
| setDetailInfo(file) | ||
| let current = files | ||
| currentPath.map(path => { | ||
| current = current[path] | ||
| }) | ||
| setCurrentPath(c => [...c, key]) | ||
| } else { | ||
| let current = files | ||
| currentPath.map(path => { | ||
| current = current[path] | ||
| }) | ||
| setCurrentPath(c => [...c, key]) | ||
| setCurrentFiles(current[key]) | ||
| setDetailInfo({}) | ||
| } | ||
| } | ||
|
|
||
| const handleBreadCrumbClick = (index) => { | ||
| if (index == currentPath.length - 1) { | ||
| // do nothing | ||
| } else { | ||
| const newCurrentPath = currentPath.slice(0, index+1) | ||
| let current = files | ||
| newCurrentPath.map(path => { | ||
| current = current[path] | ||
| }) | ||
| setCurrentFiles(current) | ||
| setCurrentPath(newCurrentPath) | ||
| setDetailInfo({}) | ||
| } | ||
| } | ||
|
|
||
| const handleLeftPanelClick = (fileArtifactName) => { | ||
| navigate(`/enclaves/${enclaveName}/files/${fileArtifactName}`, {replace:true, state:{fileArtifacts}}) | ||
| } | ||
|
|
||
| const FileInfoComponent = ({files, handleFileClick, detailInfo}) => ( | ||
| <div className='flex flex-col h-[90%] space-y-1 overflow-auto'> | ||
| { | ||
| (Object.keys(detailInfo).length !== 0) ? | ||
| <div className="flex h-3/4 flex-col"> | ||
| <p className="text-lg font-bold text-right"> Size: {detailInfo.size}B </p> | ||
| <p className="break-all overflow-y-auto"> {detailInfo.textPreview.length > 0 ? detailInfo.textPreview : <h2 className="text-2xl text-center mt-20 text-red-800 font-bold">No Preview Available</h2>} </p> | ||
| </div> : | ||
| <div className="flex flex-col h-[85%] min-h-[85%] border-8"> | ||
| <Heading content={"Files"} size={"text-xl"} /> | ||
| <div className="overflow-auto space-y-2"> | ||
| {renderFiles(files, handleFileClick, detailInfo)} | ||
| </div> | ||
| </div> | ||
| } | ||
| </div> | ||
| ) | ||
|
|
||
| return ( | ||
| <div className="flex h-full"> | ||
| <LeftPanel | ||
| home={false} | ||
| heading={"File Artifacts"} | ||
| renderList={ ()=> renderFileArtfiacts(fileArtifacts, handleLeftPanelClick)} | ||
| /> | ||
|
|
||
| <div className="flex bg-white w-[calc(100vw-39rem)] flex-col space-y-5"> | ||
| <div className="h-[3rem] flex items-center justify-center m-2"> | ||
| <Heading content={`${enclaveName}::${fileArtifactName}`} /> | ||
| </div> | ||
| <BreadCumbs | ||
| currentPath={currentPath} | ||
| handleOnClick={handleBreadCrumbClick} | ||
| handleCleanButton={handleCleanButton} | ||
| /> | ||
| {fileInfoLoading ? | ||
| <LoadingOverlay /> : | ||
| <FileInfoComponent | ||
| files={currentFiles} | ||
| handleFileClick={handleFileClick} | ||
| detailInfo={detailInfo} | ||
| /> | ||
| } | ||
| </div> | ||
|
|
||
| <RightPanel isServiceInfo={true} enclaveName={enclaveName}/> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default FileArtifactInfo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,13 @@ | ||
| { | ||
| "files": { | ||
| "main.css": "/static/css/main.a48af3f9.css", | ||
| "main.js": "/static/js/main.4ec82f07.js", | ||
| "main.css": "/static/css/main.25a20be6.css", | ||
| "main.js": "/static/js/main.946a4196.js", | ||
| "index.html": "/index.html", | ||
| "main.a48af3f9.css.map": "/static/css/main.a48af3f9.css.map", | ||
| "main.4ec82f07.js.map": "/static/js/main.4ec82f07.js.map" | ||
| "main.25a20be6.css.map": "/static/css/main.25a20be6.css.map", | ||
| "main.946a4196.js.map": "/static/js/main.946a4196.js.map" | ||
| }, | ||
| "entrypoints": [ | ||
| "static/css/main.a48af3f9.css", | ||
| "static/js/main.4ec82f07.js" | ||
| "static/css/main.25a20be6.css", | ||
| "static/js/main.946a4196.js" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Frontend</title><script defer="defer" src="/static/js/main.4ec82f07.js"></script><link href="/static/css/main.a48af3f9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> | ||
| <!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Frontend</title><script defer="defer" src="/static/js/main.946a4196.js"></script><link href="/static/css/main.25a20be6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> |
Oops, something went wrong.