From 582c41e7cb0b23e760b29bc4ca71501834aeb955 Mon Sep 17 00:00:00 2001 From: Duc Trung Le Date: Mon, 8 Jan 2024 23:37:38 +0100 Subject: [PATCH] Render react app --- .gitignore | 3 +- frontend/src/environments/App.tsx | 2 +- frontend/src/environments/main.tsx | 2 +- frontend/webpack.config.js | 11 +- tljh_repo2docker/__init__.py | 2 + tljh_repo2docker/imagesOld.py | 28 ++++ tljh_repo2docker/static/js/images.js | 1 - tljh_repo2docker/templates/images-old.html | 170 +++++++++++++++++++++ tljh_repo2docker/templates/images.html | 170 +-------------------- tljh_repo2docker/templates/page.html | 1 + 10 files changed, 220 insertions(+), 170 deletions(-) create mode 100644 tljh_repo2docker/imagesOld.py create mode 100644 tljh_repo2docker/templates/images-old.html diff --git a/.gitignore b/.gitignore index a053061..d5b6cdb 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,5 @@ config.yaml .yarn node_modules frontend/dist -frontend/lib \ No newline at end of file +frontend/lib +**/js/react/ \ No newline at end of file diff --git a/frontend/src/environments/App.tsx b/frontend/src/environments/App.tsx index 1252956..00183cf 100644 --- a/frontend/src/environments/App.tsx +++ b/frontend/src/environments/App.tsx @@ -1,7 +1,7 @@ export default function App() { return (
-

App

+

Foo bar

); } diff --git a/frontend/src/environments/main.tsx b/frontend/src/environments/main.tsx index a995ec8..0edbdf7 100644 --- a/frontend/src/environments/main.tsx +++ b/frontend/src/environments/main.tsx @@ -2,7 +2,7 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; -const rootElement = document.getElementById('root'); +const rootElement = document.getElementById('environments-root'); const root = createRoot(rootElement!); root.render( diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index d65d382..bc59a89 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -2,6 +2,7 @@ const path = require('path'); const config = { mode: process.env.NODE_ENV ?? "development", + watch: process.env.NODE_ENV === "production" ? false: true, module: { rules: [ { @@ -20,11 +21,19 @@ const config = { }, }; +const distRoot = path.resolve( + __dirname, + '..', + 'tljh_repo2docker', + 'static', + 'js' +); + const environmentsPageConfig = { name: "environments", entry: "./src/environments/main.tsx", output: { - path: path.resolve(__dirname, "dist"), + path: path.resolve(distRoot, "react"), filename: "environments.js", }, ...config, diff --git a/tljh_repo2docker/__init__.py b/tljh_repo2docker/__init__.py index 460c2a6..787d073 100644 --- a/tljh_repo2docker/__init__.py +++ b/tljh_repo2docker/__init__.py @@ -13,6 +13,7 @@ from .builder import BuildHandler from .docker import list_images +from .imagesOld import ImagesHandlerOld from .images import ImagesHandler from .logs import LogsHandler @@ -196,6 +197,7 @@ def tljh_custom_jupyterhub_config(c): # register the handlers to manage the user images c.JupyterHub.extra_handlers.extend( [ + (r"environments-old", ImagesHandlerOld), (r"environments", ImagesHandler), (r"api/environments", BuildHandler), (r"api/environments/([^/]+)/logs", LogsHandler), diff --git a/tljh_repo2docker/imagesOld.py b/tljh_repo2docker/imagesOld.py new file mode 100644 index 0000000..11b91b3 --- /dev/null +++ b/tljh_repo2docker/imagesOld.py @@ -0,0 +1,28 @@ +from inspect import isawaitable +from jupyterhub.handlers.base import BaseHandler +from jupyterhub.utils import admin_only +from tornado import web + +from .docker import list_containers, list_images + + +class ImagesHandlerOld(BaseHandler): + """ + Handler to show the list of environments as Docker images + """ + + @web.authenticated + @admin_only + async def get(self): + images = await list_images() + containers = await list_containers() + result = self.render_template( + "images-old.html", + images=images + containers, + default_mem_limit=self.settings.get("default_mem_limit"), + default_cpu_limit=self.settings.get("default_cpu_limit"), + ) + if isawaitable(result): + self.write(await result) + else: + self.write(result) diff --git a/tljh_repo2docker/static/js/images.js b/tljh_repo2docker/static/js/images.js index ee186db..b2ca55e 100644 --- a/tljh_repo2docker/static/js/images.js +++ b/tljh_repo2docker/static/js/images.js @@ -16,7 +16,6 @@ require([ var base_url = window.jhdata.base_url; var api = new JHAPI(base_url); - function getRow(element) { var original = element; while (!element.hasClass("image-row")) { diff --git a/tljh_repo2docker/templates/images-old.html b/tljh_repo2docker/templates/images-old.html new file mode 100644 index 0000000..848e341 --- /dev/null +++ b/tljh_repo2docker/templates/images-old.html @@ -0,0 +1,170 @@ +{% extends "page.html" %} + +{% block stylesheet %} +{{ super() }} + + +{% endblock %} + +{% block main %} + +
+ + + + + + + + + + + + + + {% for image in images %} + + + + + + + + + + {% endfor %} + +
NamessRepository URLReferenceMem. Limit (GB)CPU LimitStatusAdd New
+ {{ image.display_name }} + + {{ image.repo }} + + {{ image.ref }} + + {% if image.mem_limit | length %} + {{ image.mem_limit | replace("G", "") }} + {% else %} + {{ default_mem_limit | replace("G", "") }} + {%- endif %} + + {% if image.cpu_limit | length %} + {{ image.cpu_limit | replace("G", "") }} + {% else %} + {{ default_cpu_limit | replace("G", "") }} + {%- endif %} + + {% if image.status == 'building' %} + + Logs + {%- elif image.status == 'built' %} + + {%- endif %} + + {% if image.status == 'built' %} + + Remove + + {% else %} +

+ The environment is under construction. This can take several minutes to complete.
+ Click here to refresh. +

+ {%- endif %} +
+
+ +{% call modal('Adding Environment', btn_label='OK', btn_class='btn-primary adding-button') %} +
+

+
+{% endcall %} + +{% call modal('Removing Environment', btn_label='OK', btn_class='btn-primary removing-button') %} +
+

+
+{% endcall %} + +{% call modal('Remove Environment', btn_label='Remove', btn_class='btn-danger remove-button') %} + Are you sure you want to remove the following environment? + 
ENV
+{% endcall %} + +{% call modal('Show Logs', btn_label='Close', btn_class='btn-primary') %} +
+{% endcall %} + +{% macro environment_modal(name, multi=False) %} +{% call modal(name, btn_class='btn-primary save-button') %} +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +

Example: course-python-101-B37

+

If empty, a name will be generated from the repo URL

+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ > Advanced +
+ +
+ +
+
+
+
+ > Credentials (optional) +
+ +
+ +
+
+
+ +
+ +
+
+
+
+{% endcall %} +{% endmacro %} + +{{ environment_modal('Create Environment') }} + +{% endblock %} + +{% block script %} +{{ super() }} + +{% endblock %} diff --git a/tljh_repo2docker/templates/images.html b/tljh_repo2docker/templates/images.html index 4a74589..3235cd1 100644 --- a/tljh_repo2docker/templates/images.html +++ b/tljh_repo2docker/templates/images.html @@ -1,170 +1,10 @@ {% extends "page.html" %} -{% block stylesheet %} -{{ super() }} - - -{% endblock %} - {% block main %} - -
- - - - - - - - - - - - - - {% for image in images %} - - - - - - - - - - {% endfor %} - -
NameRepository URLReferenceMem. Limit (GB)CPU LimitStatusAdd New
- {{ image.display_name }} - - {{ image.repo }} - - {{ image.ref }} - - {% if image.mem_limit | length %} - {{ image.mem_limit | replace("G", "") }} - {% else %} - {{ default_mem_limit | replace("G", "") }} - {%- endif %} - - {% if image.cpu_limit | length %} - {{ image.cpu_limit | replace("G", "") }} - {% else %} - {{ default_cpu_limit | replace("G", "") }} - {%- endif %} - - {% if image.status == 'building' %} - - Logs - {%- elif image.status == 'built' %} - - {%- endif %} - - {% if image.status == 'built' %} - - Remove - - {% else %} -

- The environment is under construction. This can take several minutes to complete.
- Click here to refresh. -

- {%- endif %} -
+
+ +
- -{% call modal('Adding Environment', btn_label='OK', btn_class='btn-primary adding-button') %} -
-

-
-{% endcall %} - -{% call modal('Removing Environment', btn_label='OK', btn_class='btn-primary removing-button') %} -
-

-
-{% endcall %} - -{% call modal('Remove Environment', btn_label='Remove', btn_class='btn-danger remove-button') %} - Are you sure you want to remove the following environment? - 
ENV
-{% endcall %} - -{% call modal('Show Logs', btn_label='Close', btn_class='btn-primary') %} -
-{% endcall %} - -{% macro environment_modal(name, multi=False) %} -{% call modal(name, btn_class='btn-primary save-button') %} -
-
- -
- -
-
-
- -
- -
-
-
- -
- -

Example: course-python-101-B37

-

If empty, a name will be generated from the repo URL

-
-
-
- -
- -
-
-
- -
- -
-
-
- > Advanced -
- -
- -
-
-
-
- > Credentials (optional) -
- -
- -
-
-
- -
- -
-
-
-
-{% endcall %} -{% endmacro %} - -{{ environment_modal('Create Environment') }} - -{% endblock %} - -{% block script %} -{{ super() }} - {% endblock %} diff --git a/tljh_repo2docker/templates/page.html b/tljh_repo2docker/templates/page.html index 756daad..00728c5 100644 --- a/tljh_repo2docker/templates/page.html +++ b/tljh_repo2docker/templates/page.html @@ -6,6 +6,7 @@ {% if user.admin %}
  • Admin
  • Environments
    • +
  • Environments Old
    • {% if services %} {% for service in services %}
  • {{service.name}}