diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 41be85c..589af0a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -17,6 +17,7 @@ import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionB import {InstanceFormBox} from "./components/instance/InstanceFormBox" import {InstanceRouter} from "./components/instance/InstanceRouter" import {NotebookCreateBox} from "./components/notebook/NotebookCreateBox" +import {NotebookDescriptionBox} from "./components/notebook/NotebookDescriptionBox" import {NotebookListBox} from "./components/notebook/NotebookListBox" import {NotebookRouter} from "./components/notebook/NotebookRouter" import {DebugBox} from "./components/placeholder/DebugBox" @@ -81,6 +82,7 @@ function App({..._}: RouteComponentProps) { } selectedRoute={({selection}) => <> + diff --git a/frontend/src/components/notebook/NotebookDescriptionBox.tsx b/frontend/src/components/notebook/NotebookDescriptionBox.tsx new file mode 100644 index 0000000..868768e --- /dev/null +++ b/frontend/src/components/notebook/NotebookDescriptionBox.tsx @@ -0,0 +1,45 @@ +import {faBook} from "@fortawesome/free-solid-svg-icons" +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" +import {Box, BringAttention as B, Code, Heading, Idiomatic as I} from "@steffo/bluelib-react" +import * as React from "react" +import {useCacheContext} from "../../contexts/cache" +import {useNotebookContext} from "../../contexts/notebook" + + +export function NotebookDescriptionBox(): JSX.Element | null { + const cache = useCacheContext() + const notebook = useNotebookContext() + + if(notebook) { + var locked_by = cache?.getUserById(notebook.value.locked_by)?.value.username + } + + const locked_text = + React.useMemo( + () => { + if(!locked_by) { + return null + } + + return ( + <>, currently locked by {locked_by} + ) + }, + [locked_by], + ) + + if(!notebook) { + return null + } + + return ( + + +  About {notebook.value.name} + +

+ A {notebook.value.is_running ? "running" : "stopped"} notebook using {notebook.value.container_image}{locked_text}. +

+
+ ) +}