Skip to content

Commit 3ceb400

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #772 from caponetto/RHOAIENG-11156
RHOAIENG-11156: Add a loading spinner to JupyterLab index page
2 parents 768ae5c + 80df8ff commit 3ceb400

File tree

32 files changed

+641
-8
lines changed

32 files changed

+641
-8
lines changed

‎jupyter/intel/ml/ubi9-python-3.11/Dockerfile

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ COPY --chown=1001:0 start-notebook.sh /opt/app-root/bin
3232
COPY --chown=1001:0 builder /opt/app-root/builder
3333
COPY --chown=1001:0 utils /opt/app-root/bin/utils
3434

35+
# Apply JupyterLab addons
36+
RUN /opt/app-root/bin/utils/addons/apply.sh
37+
3538
WORKDIR /opt/app-root/src
3639

3740
ENV JUPYTER_PRELOAD_REPOS="https://github.com/IntelAI/oneAPI-samples"

‎jupyter/intel/ml/ubi9-python-3.11/utils/addons/apply.sh

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
#!/bin/bash
2+
3+
# See https://github.com/jupyterlab/jupyterlab/issues/5463
4+
# This is a hack to apply partial HTML code to JupyterLab's `index.html` file
5+
# Look for the other duplicates in case a change is needed to this file
6+
7+
script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
8+
9+
pf_url="https://unpkg.com/@patternfly/[email protected]/patternfly.min.css"
10+
11+
static_dir="/opt/app-root/share/jupyter/lab/static"
12+
index_file="$static_dir/index.html"
13+
14+
head_file="$script_dir/partial-head.html"
15+
body_file="$script_dir/partial-body.html"
16+
17+
if [ ! -f "$index_file" ]; then
18+
echo "File '$index_file' not found"
19+
exit 1
20+
fi
21+
22+
if [ ! -f "$head_file" ]; then
23+
echo "File '$head_file' not found"
24+
exit 1
25+
fi
26+
27+
if [ ! -f "$body_file" ]; then
28+
echo "File '$body_file' not found"
29+
exit 1
30+
fi
31+
32+
curl -o "$static_dir/pf.css" "$pf_url"
33+
34+
head_content=$(tr -d '\n' <"$head_file" | sed 's/@/\\@/g')
35+
body_content=$(tr -d '\n' <"$body_file" | sed 's/@/\\@/g')
36+
37+
perl -i -0pe "s|</head>|$head_content\n</head>|" "$index_file"
38+
perl -i -0pe "s|</body>|$body_content\n</body>|" "$index_file"
39+
40+
echo "Content from partial HTML files successfully injected into JupyterLab's 'index.html' file"

‎jupyter/intel/ml/ubi9-python-3.11/utils/addons/partial-body.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div id="loading-container">
2+
<svg
3+
class="pf-v6-c-spinner"
4+
role="progressbar"
5+
viewBox="0 0 100 100"
6+
aria-label="Loading..."
7+
>
8+
<circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
9+
</svg>
10+
</div>
11+
12+
<script>
13+
function checkForTargetElement() {
14+
const targetElement = document.querySelector(".lm-Widget.jp-LabShell#main");
15+
const loadingContainer = document.getElementById("loading-container");
16+
if (targetElement && loadingContainer) {
17+
loadingContainer.remove();
18+
return;
19+
}
20+
requestAnimationFrame(checkForTargetElement);
21+
}
22+
requestAnimationFrame(checkForTargetElement);
23+
</script>

‎jupyter/intel/ml/ubi9-python-3.11/utils/addons/partial-head.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<link
2+
rel="stylesheet"
3+
type="text/css"
4+
href="{{page_config.fullStaticUrl}}/pf.css"
5+
/>
6+
<style>
7+
#loading-container {
8+
width: 100%;
9+
height: 100%;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
}
14+
</style>

‎jupyter/intel/ml/ubi9-python-3.9/Dockerfile

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ COPY --chown=1001:0 start-notebook.sh /opt/app-root/bin
3232
COPY --chown=1001:0 builder /opt/app-root/builder
3333
COPY --chown=1001:0 utils /opt/app-root/bin/utils
3434

35+
# Apply JupyterLab addons
36+
RUN /opt/app-root/bin/utils/addons/apply.sh
37+
3538
WORKDIR /opt/app-root/src
3639

3740
ENV JUPYTER_PRELOAD_REPOS="https://github.com/IntelAI/oneAPI-samples"

‎jupyter/intel/ml/ubi9-python-3.9/utils/addons/apply.sh

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
#!/bin/bash
2+
3+
# See https://github.com/jupyterlab/jupyterlab/issues/5463
4+
# This is a hack to apply partial HTML code to JupyterLab's `index.html` file
5+
# Look for the other duplicates in case a change is needed to this file
6+
7+
script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
8+
9+
pf_url="https://unpkg.com/@patternfly/[email protected]/patternfly.min.css"
10+
11+
static_dir="/opt/app-root/share/jupyter/lab/static"
12+
index_file="$static_dir/index.html"
13+
14+
head_file="$script_dir/partial-head.html"
15+
body_file="$script_dir/partial-body.html"
16+
17+
if [ ! -f "$index_file" ]; then
18+
echo "File '$index_file' not found"
19+
exit 1
20+
fi
21+
22+
if [ ! -f "$head_file" ]; then
23+
echo "File '$head_file' not found"
24+
exit 1
25+
fi
26+
27+
if [ ! -f "$body_file" ]; then
28+
echo "File '$body_file' not found"
29+
exit 1
30+
fi
31+
32+
curl -o "$static_dir/pf.css" "$pf_url"
33+
34+
head_content=$(tr -d '\n' <"$head_file" | sed 's/@/\\@/g')
35+
body_content=$(tr -d '\n' <"$body_file" | sed 's/@/\\@/g')
36+
37+
perl -i -0pe "s|</head>|$head_content\n</head>|" "$index_file"
38+
perl -i -0pe "s|</body>|$body_content\n</body>|" "$index_file"
39+
40+
echo "Content from partial HTML files successfully injected into JupyterLab's 'index.html' file"

‎jupyter/intel/ml/ubi9-python-3.9/utils/addons/partial-body.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div id="loading-container">
2+
<svg
3+
class="pf-v6-c-spinner"
4+
role="progressbar"
5+
viewBox="0 0 100 100"
6+
aria-label="Loading..."
7+
>
8+
<circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
9+
</svg>
10+
</div>
11+
12+
<script>
13+
function checkForTargetElement() {
14+
const targetElement = document.querySelector(".lm-Widget.jp-LabShell#main");
15+
const loadingContainer = document.getElementById("loading-container");
16+
if (targetElement && loadingContainer) {
17+
loadingContainer.remove();
18+
return;
19+
}
20+
requestAnimationFrame(checkForTargetElement);
21+
}
22+
requestAnimationFrame(checkForTargetElement);
23+
</script>

‎jupyter/intel/ml/ubi9-python-3.9/utils/addons/partial-head.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<link
2+
rel="stylesheet"
3+
type="text/css"
4+
href="{{page_config.fullStaticUrl}}/pf.css"
5+
/>
6+
<style>
7+
#loading-container {
8+
width: 100%;
9+
height: 100%;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
}
14+
</style>

‎jupyter/intel/pytorch/ubi9-python-3.11/Dockerfile

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,9 @@ RUN python3.11 -m venv ${CPU_ENV} && \
6565
jupyter labextension disable "@jupyterlab/apputils-extension:announcements" && \
6666
chmod -R g+w ${CPU_ENV}/lib/python3.11/site-packages && \
6767
fix-permissions ${CPU_ENV} -P && \
68-
chmod -R g+w /opt/app-root/src
68+
chmod -R g+w /opt/app-root/src && \
69+
# Apply JupyterLab addons
70+
/opt/app-root/bin/utils/addons/apply.sh
6971

7072
COPY --chown=1001:0 kernel-cpu.json /opt/app-root/share/jupyter/kernels/pytorch-cpu/kernel.json
7173

‎jupyter/intel/pytorch/ubi9-python-3.11/utils/addons/apply.sh

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
#!/bin/bash
2+
3+
# See https://github.com/jupyterlab/jupyterlab/issues/5463
4+
# This is a hack to apply partial HTML code to JupyterLab's `index.html` file
5+
# Look for the other duplicates in case a change is needed to this file
6+
7+
script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
8+
9+
pf_url="https://unpkg.com/@patternfly/[email protected]/patternfly.min.css"
10+
11+
static_dir="/opt/app-root/share/jupyter/lab/static"
12+
index_file="$static_dir/index.html"
13+
14+
head_file="$script_dir/partial-head.html"
15+
body_file="$script_dir/partial-body.html"
16+
17+
if [ ! -f "$index_file" ]; then
18+
echo "File '$index_file' not found"
19+
exit 1
20+
fi
21+
22+
if [ ! -f "$head_file" ]; then
23+
echo "File '$head_file' not found"
24+
exit 1
25+
fi
26+
27+
if [ ! -f "$body_file" ]; then
28+
echo "File '$body_file' not found"
29+
exit 1
30+
fi
31+
32+
curl -o "$static_dir/pf.css" "$pf_url"
33+
34+
head_content=$(tr -d '\n' <"$head_file" | sed 's/@/\\@/g')
35+
body_content=$(tr -d '\n' <"$body_file" | sed 's/@/\\@/g')
36+
37+
perl -i -0pe "s|</head>|$head_content\n</head>|" "$index_file"
38+
perl -i -0pe "s|</body>|$body_content\n</body>|" "$index_file"
39+
40+
echo "Content from partial HTML files successfully injected into JupyterLab's 'index.html' file"

0 commit comments

Comments
 (0)