mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-22 06:44:21 +00:00
✨ Create NotebookDescriptionBox
This commit is contained in:
parent
023041da36
commit
ca2a0c3c58
2 changed files with 47 additions and 0 deletions
|
@ -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}) => <>
|
||||
<NotebookProvider resource={selection}>
|
||||
<NotebookDescriptionBox/>
|
||||
<NotebookCreateBox resource={selection}/>
|
||||
<DebugBox {...selection}/>
|
||||
</NotebookProvider>
|
||||
|
|
45
frontend/src/components/notebook/NotebookDescriptionBox.tsx
Normal file
45
frontend/src/components/notebook/NotebookDescriptionBox.tsx
Normal file
|
@ -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 <B>locked by {locked_by}</B></>
|
||||
)
|
||||
},
|
||||
[locked_by],
|
||||
)
|
||||
|
||||
if(!notebook) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Heading level={3}>
|
||||
<FontAwesomeIcon icon={faBook}/> About <I>{notebook.value.name}</I>
|
||||
</Heading>
|
||||
<p>
|
||||
A <B>{notebook.value.is_running ? "running" : "stopped"}</B> notebook using <B><Code>{notebook.value.container_image}</Code></B>{locked_text}.
|
||||
</p>
|
||||
</Box>
|
||||
)
|
||||
}
|
Loading…
Reference in a new issue