From 266403f7da753f85f469f42fcc6dc6153a095a84 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 13:50:50 +0200
Subject: [PATCH 01/10] cleanup and reformat index

---
 vre-panel/pages/index.tsx | 144 ++++++++++++++------------------------
 1 file changed, 54 insertions(+), 90 deletions(-)

diff --git a/vre-panel/pages/index.tsx b/vre-panel/pages/index.tsx
index f29f40e..15b942d 100644
--- a/vre-panel/pages/index.tsx
+++ b/vre-panel/pages/index.tsx
@@ -1,106 +1,70 @@
-import { getToken } from 'next-auth/jwt';
-// import { signIn, useSession } from 'next-auth/react';
+import {useEffect, useState} from 'react';
 import getConfig from 'next/config';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { NewVREDialog } from '../components/NewVREDialog';
-import { Nav } from '../templates/Nav';
-// import useAuth from './auth/useAuth';
+
+import {NewVREDialog} from '../components/NewVREDialog';
+import {Nav} from '../templates/Nav';
 
 const getSlug = (title: string) => {
 
-    return title
-        .toLowerCase()
-        .replace(/ /g, '-')
-        .replace(/[^\w-]+/g, '');
+  return title
+    .toLowerCase()
+    .replace(/ /g, '-')
+    .replace(/[^\w-]+/g, '');
 }
 
 const VLabs = () => {
 
-    const { publicRuntimeConfig } = getConfig()
-
-    // const isAuthenticated = useAuth(true);
-    const [isOpen, setIsOpen] = useState(false);
-    const [vlabs, setVlabs] = useState([]);
-
-    useEffect(() => {
-
-        // if (isAuthenticated) {
+  const {publicRuntimeConfig} = getConfig()
 
-            // var requestOptions: RequestInit = {
-            //     method: "GET",
-            //     headers: {
-            //         "Authorization": "Bearer: " + token.accessToken
-            //     },
-            // };
-            const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}`
-            fetch(`${apiUrl}/vlabs`)
-                .then((res) => res.json())
-                .then((data) => {
-                    setVlabs(data);
-                })
-                .catch((error) => {
-                    console.log(error)
-                });
-        // }
-    }, []);
+  const [isOpen, setIsOpen] = useState(false);
+  const [vlabs, setVlabs] = useState([]);
 
-    // const { status } = useSession({
-    //     required: true,
-    //     onUnauthenticated() {
-    //         signIn();
-    //     },
-    // })
+  useEffect(() => {
 
-    // if (status === "loading") {
-    //     return "Loading or not authenticated..."
-    // }
+    const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}`
+    fetch(`${apiUrl}/vlabs`)
+      .then((res) => res.json())
+      .then((data) => {
+        setVlabs(data);
+      })
+      .catch((error) => {
+        console.log(error)
+      });
+  }, []);
 
-    return (
-        <div>
-            <Nav />
-            <div className='min-h-screen mx-auto bg-gradient-to-b from-sky-100 to-orange-300'>
-                <div className='grid grid-cols-3'>
-                    {vlabs.map((vlab: any) => {
-                        return (
-                            <div key={getSlug(vlab.title)} className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10">
-                                <Link
-                                    href={{
-                                        pathname: '/vlabs/[slug]',
-                                        query: { slug: vlab.slug }
-                                    }}
-                                >
-                                    <div>
-                                        <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`} />
-                                        <div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div>
-                                        <div className="px-3 py-2">
-                                            <p className="text-gray-700 text-base truncate ...">
-                                                {vlab.description}
-                                            </p>
-                                        </div>
-                                    </div>
-                                </Link>
-                            </div>
-                        );
-                    })}
-                </div>
-                <NewVREDialog isOpen={isOpen} setIsOpen={setIsOpen} />
-            </div>
-        </div >
-    )
+  return (
+    <div>
+      <Nav/>
+      <div className='min-h-screen mx-auto bg-gradient-to-b from-sky-100 to-orange-300'>
+        <div className='grid grid-cols-3'>
+          {vlabs.map((vlab: any) => {
+            return (
+              <div key={getSlug(vlab.title)} className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10">
+                <Link
+                  href={{
+                    pathname: '/vlabs/[slug]',
+                    query: {slug: vlab.slug}
+                  }}
+                >
+                  <div>
+                    <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
+                    <div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div>
+                    <div className="px-3 py-2">
+                      <p className="text-gray-700 text-base truncate ...">
+                        {vlab.description}
+                      </p>
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            );
+          })}
+        </div>
+        <NewVREDialog isOpen={isOpen} setIsOpen={setIsOpen}/>
+      </div>
+    </div>
+  )
 };
 
-export async function getServerSideProps(context:any) {
-
-    const { req } = context;
-    const secret = process.env.SECRET;
-    const token = await getToken({ req, secret });
-
-    return {
-        props: {
-            token: token
-        }
-    };
-}
-
 export default VLabs;
\ No newline at end of file

From b7d0099f06070978be0fe62f63d4a862f6d8bfb8 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 14:30:50 +0200
Subject: [PATCH 02/10] add loading virtual labs status

---
 vre-panel/pages/index.tsx | 70 +++++++++++++++++++++++++++------------
 1 file changed, 49 insertions(+), 21 deletions(-)

diff --git a/vre-panel/pages/index.tsx b/vre-panel/pages/index.tsx
index 15b942d..6c9a22c 100644
--- a/vre-panel/pages/index.tsx
+++ b/vre-panel/pages/index.tsx
@@ -19,6 +19,7 @@ const VLabs = () => {
 
   const [isOpen, setIsOpen] = useState(false);
   const [vlabs, setVlabs] = useState([]);
+  const [vlabsLoading, setVlabsLoading] = useState(true);
 
   useEffect(() => {
 
@@ -27,9 +28,11 @@ const VLabs = () => {
       .then((res) => res.json())
       .then((data) => {
         setVlabs(data);
+        setVlabsLoading(false)
       })
       .catch((error) => {
         console.log(error)
+        setVlabsLoading(false)
       });
   }, []);
 
@@ -38,28 +41,53 @@ const VLabs = () => {
       <Nav/>
       <div className='min-h-screen mx-auto bg-gradient-to-b from-sky-100 to-orange-300'>
         <div className='grid grid-cols-3'>
-          {vlabs.map((vlab: any) => {
-            return (
-              <div key={getSlug(vlab.title)} className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10">
-                <Link
-                  href={{
-                    pathname: '/vlabs/[slug]',
-                    query: {slug: vlab.slug}
-                  }}
-                >
-                  <div>
-                    <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
-                    <div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div>
-                    <div className="px-3 py-2">
-                      <p className="text-gray-700 text-base truncate ...">
-                        {vlab.description}
-                      </p>
-                    </div>
-                  </div>
-                </Link>
+          {vlabsLoading ? (
+            <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10 animate">
+              <div>
+                <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
+                <div className="font-bold text-l mb-2 bg-gray-300 text-white p-5">
+                  <p className="animate-pulse">
+                    <span className="inline-block min-h-[1em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                  </p>
+                </div>
+                <div className="px-3 py-2">
+                  <p className="text-gray-700 text-base truncate animate-pulse ...">
+                    <span className="inline-block min-h-[0.6em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                  </p>
+                </div>
               </div>
-            );
-          })}
+            </div>
+            ) : (
+              vlabs.length > 0 ? (
+                vlabs.map((vlab: any) => {
+                  return (
+                    <div key={getSlug(vlab.title)} className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10">
+                      <Link
+                        href={{
+                          pathname: '/vlabs/[slug]',
+                          query: {slug: vlab.slug}
+                        }}
+                      >
+                        <div>
+                          <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
+                          <div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div>
+                          <div className="px-3 py-2">
+                            <p className="text-gray-700 text-base truncate ...">
+                              {vlab.description}
+                            </p>
+                          </div>
+                        </div>
+                      </Link>
+                    </div>
+                  );
+                })
+              ) : (
+                <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10 p-5 text-gray-700">
+                  Could not load virtual found
+                </div>
+              )
+            )
+          }
         </div>
         <NewVREDialog isOpen={isOpen} setIsOpen={setIsOpen}/>
       </div>

From c3cdd234273e9c0cd89c57125285d0b718acdca8 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 16:01:46 +0200
Subject: [PATCH 03/10] add paas_configuration api

---
 vreapis/paas_configuration/__init__.py           |  0
 vreapis/paas_configuration/admin.py              |  4 ++++
 vreapis/paas_configuration/apps.py               |  6 ++++++
 .../paas_configuration/migrations/__init__.py    |  0
 vreapis/paas_configuration/models.py             | 11 +++++++++++
 vreapis/paas_configuration/serializers.py        | 12 ++++++++++++
 vreapis/paas_configuration/tests.py              |  3 +++
 vreapis/paas_configuration/views.py              | 16 ++++++++++++++++
 vreapis/vreapis/settings/base.py                 |  1 +
 vreapis/vreapis/urls.py                          |  2 ++
 10 files changed, 55 insertions(+)
 create mode 100644 vreapis/paas_configuration/__init__.py
 create mode 100644 vreapis/paas_configuration/admin.py
 create mode 100644 vreapis/paas_configuration/apps.py
 create mode 100644 vreapis/paas_configuration/migrations/__init__.py
 create mode 100644 vreapis/paas_configuration/models.py
 create mode 100644 vreapis/paas_configuration/serializers.py
 create mode 100644 vreapis/paas_configuration/tests.py
 create mode 100644 vreapis/paas_configuration/views.py

diff --git a/vreapis/paas_configuration/__init__.py b/vreapis/paas_configuration/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/vreapis/paas_configuration/admin.py b/vreapis/paas_configuration/admin.py
new file mode 100644
index 0000000..a6e0aa2
--- /dev/null
+++ b/vreapis/paas_configuration/admin.py
@@ -0,0 +1,4 @@
+from django.contrib import admin
+from .models import PaasConfiguration
+
+admin.site.register(PaasConfiguration)
diff --git a/vreapis/paas_configuration/apps.py b/vreapis/paas_configuration/apps.py
new file mode 100644
index 0000000..1d0baea
--- /dev/null
+++ b/vreapis/paas_configuration/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class PaasConfigurationConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'paas_configuration'
diff --git a/vreapis/paas_configuration/migrations/__init__.py b/vreapis/paas_configuration/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/vreapis/paas_configuration/models.py b/vreapis/paas_configuration/models.py
new file mode 100644
index 0000000..af2e13c
--- /dev/null
+++ b/vreapis/paas_configuration/models.py
@@ -0,0 +1,11 @@
+from django.db import models
+
+# Create your models here.
+
+
+class PaasConfiguration(models.Model):
+    title = models.CharField(max_length=100, null=True)
+    description = models.TextField(null=True)
+
+    def __str__(self):
+        return self.title
diff --git a/vreapis/paas_configuration/serializers.py b/vreapis/paas_configuration/serializers.py
new file mode 100644
index 0000000..728b457
--- /dev/null
+++ b/vreapis/paas_configuration/serializers.py
@@ -0,0 +1,12 @@
+from rest_framework import serializers
+from .models import PaasConfiguration
+
+
+class PaasConfigurationSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = PaasConfiguration
+        fields = (
+            'title',
+            'description',
+            )
diff --git a/vreapis/paas_configuration/tests.py b/vreapis/paas_configuration/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/vreapis/paas_configuration/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/vreapis/paas_configuration/views.py b/vreapis/paas_configuration/views.py
new file mode 100644
index 0000000..74b0498
--- /dev/null
+++ b/vreapis/paas_configuration/views.py
@@ -0,0 +1,16 @@
+from rest_framework import viewsets
+from vreapis.views import GetSerializerMixin
+
+from .models import PaasConfiguration
+from .serializers import PaasConfigurationSerializer
+
+
+class PaasConfigurationViewSet(GetSerializerMixin, viewsets.ModelViewSet):
+
+    http_method_names = ['get']
+
+    queryset = PaasConfiguration.objects.all()
+    serializer_class = PaasConfigurationSerializer
+    serializer_action_classes = {
+        'list': PaasConfigurationSerializer
+        }
diff --git a/vreapis/vreapis/settings/base.py b/vreapis/vreapis/settings/base.py
index 524c3fa..bd45a3a 100644
--- a/vreapis/vreapis/settings/base.py
+++ b/vreapis/vreapis/settings/base.py
@@ -44,6 +44,7 @@
     'workflows',
     'virtual_labs',
     'data_products',
+    'paas_configuration',
     'rest_framework',
     'rest_framework_gis',
     'rest_framework.authtoken',
diff --git a/vreapis/vreapis/urls.py b/vreapis/vreapis/urls.py
index 3642707..45f73e6 100644
--- a/vreapis/vreapis/urls.py
+++ b/vreapis/vreapis/urls.py
@@ -20,6 +20,7 @@
 from cells.views import CellsViewSet
 from workflows.views import WorkflowViewSet
 from data_products.views import DataProductsViewSet, GeoDataProductsViewSet
+from paas_configuration.views import PaasConfigurationViewSet
 
 from vreapis.settings.base import BASE_PATH
 
@@ -35,6 +36,7 @@
 router.register(r'cells', CellsViewSet)
 router.register(r'dataprods', DataProductsViewSet)
 router.register(r'geodataprods', GeoDataProductsViewSet)
+router.register(r'paas_configuration', PaasConfigurationViewSet)
 
 urlpatterns = [
     path('admin/', admin.site.urls),

From eba8d66865132b335daa91dff2236b8a9176f375 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 16:09:11 +0200
Subject: [PATCH 04/10] pull paas_configuration from api in app index

---
 vre-panel/pages/index.tsx | 50 +++++++++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/vre-panel/pages/index.tsx b/vre-panel/pages/index.tsx
index 6c9a22c..12a6e7d 100644
--- a/vre-panel/pages/index.tsx
+++ b/vre-panel/pages/index.tsx
@@ -21,6 +21,12 @@ const VLabs = () => {
   const [vlabs, setVlabs] = useState([]);
   const [vlabsLoading, setVlabsLoading] = useState(true);
 
+  const [paasConfig, setPaasConfig] = useState({
+    title: "Virtual Lab environments",
+    description: "A collection of virtual lab environments",
+  })
+  const [paasConfigLoading, setPaasConfigLoading] = useState(true)
+
   useEffect(() => {
 
     const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}`
@@ -36,13 +42,49 @@ const VLabs = () => {
       });
   }, []);
 
+  useEffect(() => {
+    const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}`
+    fetch(`${apiUrl}/paas_configuration`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.length > 0) {
+          setPaasConfig(data[0]);
+        }
+        setPaasConfigLoading(false)
+      })
+      .catch((error) => {
+        console.log(error)
+        setPaasConfigLoading(false)
+      });
+  }, []);
+
   return (
     <div>
       <Nav/>
-      <div className='min-h-screen mx-auto bg-gradient-to-b from-sky-100 to-orange-300'>
-        <div className='grid grid-cols-3'>
+      <div className='min-h-screen mx-auto bg-gradient-to-b from-sky-100 to-orange-300 space-y-10 p-10'>
+        <div className="max-w-full rounded bg-white p-8">
+          <h1 className="text-2xl text-gray-800 mb-8">
+            {paasConfigLoading ? (
+              <span className="animate-pulse">
+                <span className="inline-block min-h-[1em] w-3/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+              </span>
+            ) : (
+              paasConfig.title
+            )}
+          </h1>
+          <p className="text-l text-gray-800">
+            {paasConfigLoading ? (
+              <span className="animate-pulse">
+                <span className="inline-block min-h-[1em] w-full flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+              </span>
+            ) : (
+              paasConfig.description
+            )}
+          </p>
+        </div>
+        <div className='flex flex-row space-x-10'>
           {vlabsLoading ? (
-            <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10 animate">
+            <div className="w-1/3 rounded overflow-hidden shadow-lg bg-white animate">
               <div>
                 <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
                 <div className="font-bold text-l mb-2 bg-gray-300 text-white p-5">
@@ -61,7 +103,7 @@ const VLabs = () => {
               vlabs.length > 0 ? (
                 vlabs.map((vlab: any) => {
                   return (
-                    <div key={getSlug(vlab.title)} className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10">
+                    <div key={getSlug(vlab.title)} className="w-1/3 rounded overflow-hidden shadow-lg bg-white">
                       <Link
                         href={{
                           pathname: '/vlabs/[slug]',

From 70d8487f0db9459f6b7d4ce3a6c9fac2a0de0dc7 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 16:47:35 +0200
Subject: [PATCH 05/10] move paas_configuration to app context

that makes it available to all pages, and avoids reloading it on page
changes
---
 vre-panel/context/PaasConfig.tsx | 43 ++++++++++++++++++++++++++++++++
 vre-panel/pages/_app.tsx         |  6 ++++-
 vre-panel/pages/index.tsx        | 29 ++++-----------------
 3 files changed, 53 insertions(+), 25 deletions(-)
 create mode 100644 vre-panel/context/PaasConfig.tsx

diff --git a/vre-panel/context/PaasConfig.tsx b/vre-panel/context/PaasConfig.tsx
new file mode 100644
index 0000000..8e87008
--- /dev/null
+++ b/vre-panel/context/PaasConfig.tsx
@@ -0,0 +1,43 @@
+import {useEffect, useState, createContext, ReactNode} from "react";
+import getConfig from "next/config";
+
+
+export const PaasConfigContext = createContext({
+  paasConfig: {
+    title: "",
+    description: "",
+  },
+  paasConfigLoading: true,
+});
+
+export function PaasConfigProvider({children,}: { children: ReactNode }) {
+  const {publicRuntimeConfig} = getConfig()
+
+  const [paasConfig, setPaasConfig] = useState({
+    title: "Virtual Lab environments",
+    description: "A collection of virtual lab environments",
+  })
+  const [paasConfigLoading, setPaasConfigLoading] = useState(true)
+
+  useEffect(() => {
+    const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}`
+    fetch(`${apiUrl}/paas_configuration`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.length > 0) {
+          setPaasConfig(data[0]);
+        }
+        setPaasConfigLoading(false)
+      })
+      .catch((error) => {
+        console.log(error)
+        setPaasConfigLoading(false)
+      });
+  }, []);
+
+  return (
+    <PaasConfigContext.Provider value={{paasConfig: paasConfig, paasConfigLoading: paasConfigLoading}}>
+      {children}
+    </PaasConfigContext.Provider>
+  );
+}
diff --git a/vre-panel/pages/_app.tsx b/vre-panel/pages/_app.tsx
index 702e4c1..a531187 100644
--- a/vre-panel/pages/_app.tsx
+++ b/vre-panel/pages/_app.tsx
@@ -5,6 +5,8 @@ import { useState } from 'react';
 // import RefreshTokenHandler from './auth/refreshTokenHandler';
 import getConfig from 'next/config'
 
+import {PaasConfigProvider} from '../context/PaasConfig';
+
 export default function App({ Component, pageProps: { session, ...pageProps }} : AppProps): JSX.Element {
 
   const { publicRuntimeConfig } = getConfig()
@@ -13,7 +15,9 @@ export default function App({ Component, pageProps: { session, ...pageProps }} :
 
   return (
     <SessionProvider session={session} refetchInterval={interval} basePath={`${publicRuntimeConfig.basePath}/api/auth`}>
-      <Component {...pageProps} />
+      <PaasConfigProvider>
+        <Component {...pageProps} />
+      </PaasConfigProvider>
     </SessionProvider>
   )
 }
diff --git a/vre-panel/pages/index.tsx b/vre-panel/pages/index.tsx
index 12a6e7d..ec5ddee 100644
--- a/vre-panel/pages/index.tsx
+++ b/vre-panel/pages/index.tsx
@@ -1,9 +1,10 @@
-import {useEffect, useState} from 'react';
+import {useEffect, useState, useContext} from 'react';
 import getConfig from 'next/config';
 import Link from 'next/link';
 
 import {NewVREDialog} from '../components/NewVREDialog';
 import {Nav} from '../templates/Nav';
+import {PaasConfigContext} from '../context/PaasConfig';
 
 const getSlug = (title: string) => {
 
@@ -13,20 +14,16 @@ const getSlug = (title: string) => {
     .replace(/[^\w-]+/g, '');
 }
 
-const VLabs = () => {
+const VLabs = ({}) => {
 
   const {publicRuntimeConfig} = getConfig()
 
+  const {paasConfig, paasConfigLoading} = useContext(PaasConfigContext)
+
   const [isOpen, setIsOpen] = useState(false);
   const [vlabs, setVlabs] = useState([]);
   const [vlabsLoading, setVlabsLoading] = useState(true);
 
-  const [paasConfig, setPaasConfig] = useState({
-    title: "Virtual Lab environments",
-    description: "A collection of virtual lab environments",
-  })
-  const [paasConfigLoading, setPaasConfigLoading] = useState(true)
-
   useEffect(() => {
 
     const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}`
@@ -42,22 +39,6 @@ const VLabs = () => {
       });
   }, []);
 
-  useEffect(() => {
-    const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}`
-    fetch(`${apiUrl}/paas_configuration`)
-      .then((res) => res.json())
-      .then((data) => {
-        if (data.length > 0) {
-          setPaasConfig(data[0]);
-        }
-        setPaasConfigLoading(false)
-      })
-      .catch((error) => {
-        console.log(error)
-        setPaasConfigLoading(false)
-      });
-  }, []);
-
   return (
     <div>
       <Nav/>

From f4157a1bc7327e628663335e6e7a6159bf30f397 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 17:35:29 +0200
Subject: [PATCH 06/10] add link to documentation

---
 vre-panel/context/PaasConfig.tsx          |  1 +
 vre-panel/pages/index.tsx                 | 12 ++++++++++++
 vreapis/paas_configuration/models.py      |  1 +
 vreapis/paas_configuration/serializers.py |  1 +
 4 files changed, 15 insertions(+)

diff --git a/vre-panel/context/PaasConfig.tsx b/vre-panel/context/PaasConfig.tsx
index 8e87008..32a5431 100644
--- a/vre-panel/context/PaasConfig.tsx
+++ b/vre-panel/context/PaasConfig.tsx
@@ -6,6 +6,7 @@ export const PaasConfigContext = createContext({
   paasConfig: {
     title: "",
     description: "",
+    documentation_url: null,
   },
   paasConfigLoading: true,
 });
diff --git a/vre-panel/pages/index.tsx b/vre-panel/pages/index.tsx
index ec5ddee..bd48fb5 100644
--- a/vre-panel/pages/index.tsx
+++ b/vre-panel/pages/index.tsx
@@ -62,6 +62,18 @@ const VLabs = ({}) => {
               paasConfig.description
             )}
           </p>
+          {paasConfigLoading || (
+            paasConfig.documentation_url && (
+              <p className="mt-4">
+                <a
+                  href={paasConfig.documentation_url}
+                  className="text-blue-800 hover:underline"
+                >
+                  Documentation
+                </a>
+              </p>
+            )
+          )}
         </div>
         <div className='flex flex-row space-x-10'>
           {vlabsLoading ? (
diff --git a/vreapis/paas_configuration/models.py b/vreapis/paas_configuration/models.py
index af2e13c..c599351 100644
--- a/vreapis/paas_configuration/models.py
+++ b/vreapis/paas_configuration/models.py
@@ -6,6 +6,7 @@
 class PaasConfiguration(models.Model):
     title = models.CharField(max_length=100, null=True)
     description = models.TextField(null=True)
+    documentation_url = models.URLField(null=True, blank=True)
 
     def __str__(self):
         return self.title
diff --git a/vreapis/paas_configuration/serializers.py b/vreapis/paas_configuration/serializers.py
index 728b457..c36846b 100644
--- a/vreapis/paas_configuration/serializers.py
+++ b/vreapis/paas_configuration/serializers.py
@@ -9,4 +9,5 @@ class Meta:
         fields = (
             'title',
             'description',
+            'documentation_url',
             )

From ec31440e1f816b4df99fd0d9ec5dd04d077de494 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 18:13:13 +0200
Subject: [PATCH 07/10] add site logo to paas_configuration

---
 vre-panel/context/PaasConfig.tsx          |  5 ++++-
 vre-panel/templates/Nav.tsx               | 16 ++++++++++++++--
 vreapis/paas_configuration/models.py      |  5 +++++
 vreapis/paas_configuration/serializers.py |  1 +
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/vre-panel/context/PaasConfig.tsx b/vre-panel/context/PaasConfig.tsx
index 32a5431..79e2457 100644
--- a/vre-panel/context/PaasConfig.tsx
+++ b/vre-panel/context/PaasConfig.tsx
@@ -6,7 +6,8 @@ export const PaasConfigContext = createContext({
   paasConfig: {
     title: "",
     description: "",
-    documentation_url: null,
+    documentation_url: "",
+    site_icon: "",
   },
   paasConfigLoading: true,
 });
@@ -17,6 +18,8 @@ export function PaasConfigProvider({children,}: { children: ReactNode }) {
   const [paasConfig, setPaasConfig] = useState({
     title: "Virtual Lab environments",
     description: "A collection of virtual lab environments",
+    documentation_url: "https://github.com/QCDIS/NaaVRE/blob/main/README.md",
+    site_icon: `${publicRuntimeConfig.staticFolder}/LW_ERIC_Logo.png`,
   })
   const [paasConfigLoading, setPaasConfigLoading] = useState(true)
 
diff --git a/vre-panel/templates/Nav.tsx b/vre-panel/templates/Nav.tsx
index cf8b5ea..19439d3 100644
--- a/vre-panel/templates/Nav.tsx
+++ b/vre-panel/templates/Nav.tsx
@@ -2,6 +2,8 @@ import Link from 'next/link';
 import { Menu, Transition } from '@headlessui/react';
 import { useSession, signIn, signOut } from "next-auth/react"
 import getConfig from 'next/config'
+import {useContext} from "react";
+import {PaasConfigContext} from "../context/PaasConfig";
 
 
 const Nav = () => {
@@ -9,12 +11,22 @@ const Nav = () => {
     const { publicRuntimeConfig } = getConfig()
     const { data: session, status } = useSession()
 
+    const {paasConfig, paasConfigLoading} = useContext(PaasConfigContext)
+
     return (
         <header className="sticky top-0 z-30 w-full px-2 py-4 bg-white sm:px-4 shadow-xl">
-            <nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
+            <nav className="bg-white border-gray-200 px-2 sm:px-4 rounded dark:bg-gray-800">
                 <div className="container flex flex-wrap justify-between items-center mx-auto">
                     <Link href='/' className="flex items-center">
-                        <img src={`${publicRuntimeConfig.staticFolder}/LW_ERIC_Logo.png`} className="mr-3 h-6 h-14" alt="LifeWatch Logo" />
+                        {
+                            paasConfigLoading || (
+                            <img
+                                src={paasConfig.site_icon}
+                                alt="Site Logo"
+                                className="mr-3 h-16"
+                            />
+                          )
+                        }
                     </Link>
                     <div className="flex items-center md:order-2">
                         <div className="relative inline-block text-left">
diff --git a/vreapis/paas_configuration/models.py b/vreapis/paas_configuration/models.py
index c599351..98a451b 100644
--- a/vreapis/paas_configuration/models.py
+++ b/vreapis/paas_configuration/models.py
@@ -7,6 +7,11 @@ class PaasConfiguration(models.Model):
     title = models.CharField(max_length=100, null=True)
     description = models.TextField(null=True)
     documentation_url = models.URLField(null=True, blank=True)
+    site_icon = models.TextField(
+        null=True,
+        help_text=("Base 64-encoded image, eg. data:image/png;base64,"
+                  "ZXhhbXBsZQo="),
+        )
 
     def __str__(self):
         return self.title
diff --git a/vreapis/paas_configuration/serializers.py b/vreapis/paas_configuration/serializers.py
index c36846b..a237d08 100644
--- a/vreapis/paas_configuration/serializers.py
+++ b/vreapis/paas_configuration/serializers.py
@@ -10,4 +10,5 @@ class Meta:
             'title',
             'description',
             'documentation_url',
+            'site_icon',
             )

From e8f3f4f67efcc8027e918be8d87e668066f467a3 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 18:13:46 +0200
Subject: [PATCH 08/10] fix empty vlabs list message

---
 vre-panel/pages/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vre-panel/pages/index.tsx b/vre-panel/pages/index.tsx
index bd48fb5..49ce94e 100644
--- a/vre-panel/pages/index.tsx
+++ b/vre-panel/pages/index.tsx
@@ -117,8 +117,8 @@ const VLabs = ({}) => {
                   );
                 })
               ) : (
-                <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10 p-5 text-gray-700">
-                  Could not load virtual found
+                <div className="w-1/3 rounded overflow-hidden shadow-lg bg-white">
+                  No virtual labs found
                 </div>
               )
             )

From caf23911ece21b61cd370708d91d90797f89ef58 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 18:17:30 +0200
Subject: [PATCH 09/10] show site icon on login page

---
 vre-panel/pages/auth/signin.tsx | 13 ++++++++++++-
 vre-panel/templates/Nav.tsx     |  8 +++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/vre-panel/pages/auth/signin.tsx b/vre-panel/pages/auth/signin.tsx
index 48d0c75..b6982dc 100644
--- a/vre-panel/pages/auth/signin.tsx
+++ b/vre-panel/pages/auth/signin.tsx
@@ -1,14 +1,25 @@
 import { getProviders, getSession, signIn } from "next-auth/react"
 import getConfig from 'next/config'
+import {useContext} from "react";
+import {PaasConfigContext} from "../../context/PaasConfig";
 
 const { publicRuntimeConfig } = getConfig()
 
 export default function SignIn({ providers }: { providers: any }) {
+
+    const {paasConfig, paasConfigLoading} = useContext(PaasConfigContext)
+
     return (
         <div className="mx-auto flex flex-col items-center justify-center h-screen">
             <img className="w-fit h-fit object-cover" src={`${publicRuntimeConfig.staticFolder}/LW_VLICVRE_logo.png`} />
             <div className="flex flex-col justify-center rounded-md overflow-hidden shadow-lg bg-white p-10 mt-10 w-screen">
-                <img src={`${publicRuntimeConfig.staticFolder}/LW_ERIC_Logo.png`} className="w-36 self-center" alt="LifeWatch Logo" />
+                {paasConfigLoading || (
+                    <img
+                        src={paasConfig.site_icon}
+                        alt="Site icon"
+                        className="h-16 self-center"
+                    />
+                )}
                 <>
                     {Object.values(providers).map((provider: any) => (
                         <div className="self-center" key={provider.name}>
diff --git a/vre-panel/templates/Nav.tsx b/vre-panel/templates/Nav.tsx
index 19439d3..8d156ca 100644
--- a/vre-panel/templates/Nav.tsx
+++ b/vre-panel/templates/Nav.tsx
@@ -18,15 +18,13 @@ const Nav = () => {
             <nav className="bg-white border-gray-200 px-2 sm:px-4 rounded dark:bg-gray-800">
                 <div className="container flex flex-wrap justify-between items-center mx-auto">
                     <Link href='/' className="flex items-center">
-                        {
-                            paasConfigLoading || (
+                        {paasConfigLoading || (
                             <img
                                 src={paasConfig.site_icon}
-                                alt="Site Logo"
+                                alt="Site icon"
                                 className="mr-3 h-16"
                             />
-                          )
-                        }
+                          )}
                     </Link>
                     <div className="flex items-center md:order-2">
                         <div className="relative inline-block text-left">

From 9533c5be222953282d3a7b21949d7914371394b2 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Thu, 14 Sep 2023 18:33:32 +0200
Subject: [PATCH 10/10] downgrade node 20.5->20.4 to fix build issue

---
 vre-panel/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vre-panel/package.json b/vre-panel/package.json
index a24bc67..95c60fa 100644
--- a/vre-panel/package.json
+++ b/vre-panel/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "typescript": "^4.5",
-    "@types/node": "~20.5.7",
+    "@types/node": "~20.4.5",
     "@types/react": "~18.2.0",
     "autoprefixer": "~10.4.15",
     "axios-mock-adapter": "~1.21.5",