mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-23 07:14:21 +00:00
✨ Create buttons to access the JupyterLab
This commit is contained in:
parent
f94bf9f130
commit
3ed4a330cc
3 changed files with 83 additions and 1 deletions
|
@ -1,9 +1,11 @@
|
||||||
import {faBook} from "@fortawesome/free-solid-svg-icons"
|
import {faBook} from "@fortawesome/free-solid-svg-icons"
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
import {Box, BringAttention as B, Code, Heading, Idiomatic as I} from "@steffo/bluelib-react"
|
import {Box, BringAttention as B, Code, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import {useCacheContext} from "../../contexts/cache"
|
import {useCacheContext} from "../../contexts/cache"
|
||||||
import {useNotebookContext} from "../../contexts/notebook"
|
import {useNotebookContext} from "../../contexts/notebook"
|
||||||
|
import {NotebookLabButton} from "./NotebookLabButton"
|
||||||
|
import {NotebookLegacyButton} from "./NotebookLegacyButton"
|
||||||
|
|
||||||
|
|
||||||
export function NotebookDescriptionBox(): JSX.Element | null {
|
export function NotebookDescriptionBox(): JSX.Element | null {
|
||||||
|
@ -40,6 +42,12 @@ export function NotebookDescriptionBox(): JSX.Element | null {
|
||||||
<p>
|
<p>
|
||||||
A <B>{notebook.value.is_running ? "running" : "stopped"}</B> notebook using <B><Code>{notebook.value.container_image}</Code></B>{locked_text}.
|
A <B>{notebook.value.is_running ? "running" : "stopped"}</B> notebook using <B><Code>{notebook.value.container_image}</Code></B>{locked_text}.
|
||||||
</p>
|
</p>
|
||||||
|
<Form>
|
||||||
|
<Form.Row>
|
||||||
|
<NotebookLabButton/>
|
||||||
|
<NotebookLegacyButton/>
|
||||||
|
</Form.Row>
|
||||||
|
</Form>
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
37
frontend/src/components/notebook/NotebookLabButton.tsx
Normal file
37
frontend/src/components/notebook/NotebookLabButton.tsx
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
import {faFlask} from "@fortawesome/free-solid-svg-icons"
|
||||||
|
import * as React from "react"
|
||||||
|
import {useAuthorizationContext} from "../../contexts/authorization"
|
||||||
|
import {useNotebookContext} from "../../contexts/notebook"
|
||||||
|
import {IconText} from "../elements/IconText"
|
||||||
|
import {NavigateButton} from "../elements/NavigateButton"
|
||||||
|
|
||||||
|
|
||||||
|
export function NotebookLabButton(): JSX.Element | null {
|
||||||
|
const authorization = useAuthorizationContext()
|
||||||
|
const notebook = useNotebookContext()
|
||||||
|
|
||||||
|
const canOpen =
|
||||||
|
React.useMemo(
|
||||||
|
() => authorization &&
|
||||||
|
notebook &&
|
||||||
|
(
|
||||||
|
notebook.value.locked_by === null || notebook.value.locked_by === authorization?.state.user?.id
|
||||||
|
),
|
||||||
|
[notebook, authorization],
|
||||||
|
)
|
||||||
|
|
||||||
|
if(!notebook) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if(!notebook.value.lab_url) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NavigateButton href={notebook.value.lab_url} disabled={!canOpen}>
|
||||||
|
<IconText icon={faFlask}>
|
||||||
|
Open JupyterLab
|
||||||
|
</IconText>
|
||||||
|
</NavigateButton>
|
||||||
|
)
|
||||||
|
}
|
37
frontend/src/components/notebook/NotebookLegacyButton.tsx
Normal file
37
frontend/src/components/notebook/NotebookLegacyButton.tsx
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
import {faBook} from "@fortawesome/free-solid-svg-icons"
|
||||||
|
import * as React from "react"
|
||||||
|
import {useAuthorizationContext} from "../../contexts/authorization"
|
||||||
|
import {useNotebookContext} from "../../contexts/notebook"
|
||||||
|
import {IconText} from "../elements/IconText"
|
||||||
|
import {NavigateButton} from "../elements/NavigateButton"
|
||||||
|
|
||||||
|
|
||||||
|
export function NotebookLegacyButton(): JSX.Element | null {
|
||||||
|
const authorization = useAuthorizationContext()
|
||||||
|
const notebook = useNotebookContext()
|
||||||
|
|
||||||
|
const canOpen =
|
||||||
|
React.useMemo(
|
||||||
|
() => authorization &&
|
||||||
|
notebook &&
|
||||||
|
(
|
||||||
|
notebook.value.locked_by === null || notebook.value.locked_by === authorization?.state.user?.id
|
||||||
|
),
|
||||||
|
[notebook, authorization],
|
||||||
|
)
|
||||||
|
|
||||||
|
if(!notebook) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if(!notebook.value.legacy_notebook_url) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NavigateButton href={notebook.value.legacy_notebook_url} disabled={!canOpen}>
|
||||||
|
<IconText icon={faBook}>
|
||||||
|
Open legacy Jupyter Notebook
|
||||||
|
</IconText>
|
||||||
|
</NavigateButton>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in a new issue