@axa-fr/slimfaas-planet-saver 0.30.4 → 0.30.6

package/README.md

@@ -24,16 +24,19 @@ npm install @axa-fr/slimfaas-planet-saver
 
 Example usage with react :
 ```javascript
-import React, { useState, useEffect } from 'react';
-import SlimFaasPlanetSaver from "@axa-fr/slimfaas-planet-saver";
+import React, { useState, useEffect, useRef } from 'react';
+import SlimFaasPlanetSaver from "./SlimFaasPlanetSaver.js";
 
 const PlanetSaver = ({ children, baseUrl, fetch }) => {
-    const [isFirstStart, setIsFirstStart] = useState(true); // State for first start
+    const [isFirstStart, setIsFirstStart] = useState(true);
+    const environmentStarterRef = useRef(null);
 
     useEffect(() => {
         if (!baseUrl) return;
 
-        const environmentStarter = new SlimFaasPlanetSaver(baseUrl, {
+        if (environmentStarterRef.current) return;
+
+        const instance = new SlimFaasPlanetSaver(baseUrl, {
             interval: 2000,
             fetch,
             updateCallback: (data) => {
@@ -45,30 +48,36 @@ const PlanetSaver = ({ children, baseUrl, fetch }) => {
             errorCallback: (error) => {
                 console.error('Error detected :', error);
             },
-            overlayStartingMessage: 'Starting the environment...',
+            overlayStartingMessage: '🌳 Starting the environment.... 🌳',
             overlayNoActivityMessage: 'Waiting activity to start environment...',
-            overlayErrorMessage: 'An error occured when starting environment. Please contact an administrator.',
+            overlayErrorMessage: 'An error occurred when starting environment. Please contact an administrator.',
+            overlaySecondaryMessage: 'Startup should be fast, but if no machines are available it can take several minutes.',
+            overlayLoadingIcon: '🌍',
+            overlayErrorSecondaryMessage: 'If the error persists, please contact an administrator.'
         });
 
-        // Start polling
-        environmentStarter.startPolling();
+        environmentStarterRef.current = instance;
+
+        // Initialiser les effets de bord
+        instance.initialize();
+        instance.startPolling();
 
-        // Cleanup
-        return () => environmentStarter.cleanup();
-    }, [baseUrl, isFirstStart]);
+        return () => {
+            instance.cleanup();
+            environmentStarterRef.current = null;
+        };
+    }, [baseUrl]);
 
-    // During the first start, display a loading message
     if (isFirstStart) {
         return null;
     }
 
-    // Once the environment is started, display the children
     return <>{children}</>;
-
 };
 
 export default PlanetSaver;
 
+
 ```
 
 ## Run the demo

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axa-fr/slimfaas-planet-saver",
   "private": false,
-  "version": "0.30.4",
+  "version": "0.30.6",
   "type": "module",
   "module": "./src/SlimFaasPlanetSaver.js",
   "description": "Pure vanilla javascript which call SlimFaas API to convert infrastructures resilience to an UX resilience and help to save the planet",

package/src/SlimFaasPlanetSaver.js

@@ -4,23 +4,32 @@
     return tempUrl;
 }
 
+
+
 export default class SlimFaasPlanetSaver {
     constructor(baseUrl, options = {}) {
         this.baseUrl = normalizeBaseUrl(baseUrl);
         this.updateCallback = options.updateCallback || (() => {});
         this.errorCallback = options.errorCallback || (() => {});
         this.interval = options.interval || 5000;
-        this.overlayStartingMessage = options.overlayStartingMessage || 'Starting in progress...';
+        this.overlayStartingMessage = options.overlayStartingMessage || '🌳 Starting the environment.... 🌳';
         this.overlayNoActivityMessage = options.overlayNoActivityMessage || 'Waiting activity to start environment...';
-        this.overlayErrorMessage = options.overlayErrorMessage || 'An error occured when starting environment. Please contact an administrator.';
+        this.overlayErrorMessage = options.overlayErrorMessage || 'An error occurred while starting the environment.';
+        this.overlaySecondaryMessage = options.overlaySecondaryMessage || 'Startup should be fast, but if no machines are available it can take several minutes.';
+        this.overlayErrorSecondaryMessage = options.overlayErrorSecondaryMessage || 'If the error persists, please contact an administrator.';
+        this.overlayLoadingIcon = options.overlayLoadingIcon || '🌍';
         this.fetch = options.fetch || fetch;
         this.intervalId = null;
         this.isDocumentVisible = !document.hidden;
         this.overlayElement = null;
+        this.spanElement = null;
         this.styleElement = null;
         this.isReady = false;
 
-        // Initialize lastMouseMoveTime and bind the handler
+        this.events = document.createElement('div');
+    }
+
+    initialize() {
         this.lastMouseMoveTime = Date.now();
         this.handleMouseMove = this.handleMouseMove.bind(this);
         this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
@@ -30,10 +39,7 @@ export default class SlimFaasPlanetSaver {
 
         this.createOverlay();
         this.injectStyles();
-
-        this.events = document.createElement('div');
     }
-
     handleMouseMove() {
         this.lastMouseMoveTime = Date.now();
     }
@@ -50,24 +56,29 @@ export default class SlimFaasPlanetSaver {
     async wakeUpPods(data) {
         const wakePromises = data
             .filter((item) => item.NumberReady === 0)
-            .map((item) =>
-                this.fetch(`${this.baseUrl}/wake-function/${item.Name}`, {
+            .map(async (item) => {
+                const response = await this.fetch(`${this.baseUrl}/wake-function/${item.Name}`, {
                     method: 'POST',
-                })
-            );
+                });
+                if (response.status >= 400) {
+                    throw new Error(`HTTP Error! status: ${response.status} for function ${item.Name}`);
+                }
+                return response;
+            });
 
         try {
             await Promise.all(wakePromises);
         } catch (error) {
             console.error("Error waking up pods:", error);
+            throw error;
         }
     }
 
     async fetchStatus() {
         try {
             const response = await this.fetch(`${this.baseUrl}/status-functions`);
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
+            if (response.status >= 400) {
+                throw new Error(`HTTP Error! status: ${response.status}`);
             }
             const data = await response.json();
 
@@ -77,22 +88,20 @@ export default class SlimFaasPlanetSaver {
             this.updateCallback(data);
 
             const now = Date.now();
-            const mouseMovedRecently = now - this.lastMouseMoveTime <= 60000; // 1 minute in milliseconds
+            const mouseMovedRecently = now - this.lastMouseMoveTime <= 60000; // 1 minute
 
             if (!allReady && this.isDocumentVisible && !mouseMovedRecently) {
-                this.updateOverlayMessage(this.overlayNoActivityMessage);
-            }
-
-            if (!this.isDocumentVisible || mouseMovedRecently) {
-                this.updateOverlayMessage(this.overlayStartingMessage);
+                this.updateOverlayMessage(this.overlayNoActivityMessage, 'waiting-action');
+            } else if (!this.isDocumentVisible || mouseMovedRecently) {
+                this.updateOverlayMessage(this.overlayStartingMessage, 'waiting');
                 await this.wakeUpPods(data);
             }
         } catch (error) {
             const errorMessage = error.message;
-            this.updateOverlayMessage(this.overlayErrorMessage);
+            this.updateOverlayMessage(this.overlayErrorMessage, 'error', this.overlayErrorSecondaryMessage);
             this.errorCallback(errorMessage);
             this.triggerEvent('error', { message: errorMessage });
-            console.error('Error getting slimfaas data:', errorMessage);
+            console.error('Error fetching slimfaas data:', errorMessage);
         } finally {
             this.intervalId = setTimeout(() => {
                 this.fetchStatus();
@@ -128,27 +137,67 @@ export default class SlimFaasPlanetSaver {
 
     injectStyles() {
         const cssString = `
-          .environment-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            cursor: not-allowed;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: white;
-            font-size: 1.5rem;
-            font-weight: bold;
-            z-index: 1000;
-            visibility: hidden;
-          }
-
-          .environment-overlay.visible {
-            visibility: visible;
-          }
+            .slimfaas-environment-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                cursor: not-allowed;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.8);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 2rem;
+                font-weight: bold;
+                z-index: 1000;
+                text-align: center;
+            }
+
+            .slimfaas-environment-overlay__icon {
+                font-size: 4rem;
+                animation: slimfaas-environment-overlay__icon-spin 0.5s linear infinite;
+            }
+
+            @keyframes slimfaas-environment-overlay__icon-spin {
+                from {
+                    transform: rotate(0deg);
+                }
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            .slimfaas-environment-overlay__main-message {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+
+            .slimfaas-environment-overlay__secondary-message {
+                font-size: 1.2rem;
+                font-weight: normal;
+                margin-top: 1rem;
+            }
+
+            .slimfaas-environment-overlay--waiting {
+                color: white;
+            }
+
+            .slimfaas-environment-overlay--waiting-action {
+                color: lightyellow;
+            }
+            .slimfaas-environment-overlay--waiting-action .slimfaas-environment-overlay__secondary-message {
+                visibility: hidden;
+            }
+            .slimfaas-environment-overlay--waiting-action .slimfaas-environment-overlay__icon {
+                animation: none;
+            }
+
+            .slimfaas-environment-overlay--error {
+                color: lightcoral;
+            }
         `;
 
         this.styleElement = document.createElement('style');
@@ -158,26 +207,60 @@ export default class SlimFaasPlanetSaver {
 
     createOverlay() {
         this.overlayElement = document.createElement('div');
-        this.overlayElement.className = 'environment-overlay';
-        this.overlayElement.innerText = this.overlayMessage;
-        document.body.appendChild(this.overlayElement);
+        this.overlayElement.className = 'slimfaas-environment-overlay';
+
+        // Créer l'élément icône
+        this.iconElement = document.createElement('div');
+        this.iconElement.className = 'slimfaas-environment-overlay__icon';
+        this.iconElement.innerText = this.overlayLoadingIcon;
+
+        // Créer l'élément du message principal
+        this.spanElement = document.createElement('span');
+        this.spanElement.className = 'slimfaas-environment-overlay__main-message';
+        this.spanElement.innerHTML = `${this.overlayStartingMessage}`;
+
+        // Créer l'élément du message secondaire
+        this.secondarySpanElement = document.createElement('span');
+        this.secondarySpanElement.className = 'slimfaas-environment-overlay__secondary-message';
+        this.secondarySpanElement.innerText = this.overlaySecondaryMessage;
+
+        // Ajouter les éléments à l'overlay
+        this.overlayElement.appendChild(this.iconElement);
+        this.overlayElement.appendChild(this.spanElement);
+        this.overlayElement.appendChild(this.secondarySpanElement);
+
+        // Ne pas ajouter l'overlay au DOM ici
+        // document.body.appendChild(this.overlayElement);
     }
 
     showOverlay() {
-        if (this.overlayElement) {
-            this.overlayElement.classList.add('visible');
+        if (this.overlayElement && !document.body.contains(this.overlayElement)) {
+            document.body.appendChild(this.overlayElement);
         }
     }
 
     hideOverlay() {
-        if (this.overlayElement) {
-            this.overlayElement.classList.remove('visible');
+        if (this.overlayElement && document.body.contains(this.overlayElement)) {
+            document.body.removeChild(this.overlayElement);
         }
     }
 
-    updateOverlayMessage(newMessage) {
+    updateOverlayMessage(newMessage, status = 'waiting', secondaryMessage = null) {
+        if (this.spanElement) {
+            this.spanElement.innerHTML = `${newMessage}`;
+        }
+        if (this.secondarySpanElement && secondaryMessage !== null) {
+            this.secondarySpanElement.innerText = secondaryMessage;
+        } else {
+            this.secondarySpanElement.innerText = this.overlaySecondaryMessage;
+        }
         if (this.overlayElement) {
-            this.overlayElement.innerText = newMessage;
+            this.overlayElement.classList.remove(
+                'slimfaas-environment-overlay--error',
+                'slimfaas-environment-overlay--waiting',
+                'slimfaas-environment-overlay--waiting-action'
+            );
+            this.overlayElement.classList.add('slimfaas-environment-overlay--' + status);
         }
     }
 
@@ -189,11 +272,11 @@ export default class SlimFaasPlanetSaver {
     cleanup() {
         this.stopPolling();
         document.removeEventListener('visibilitychange', this.handleVisibilityChange);
-        document.removeEventListener('mousemove', this.handleMouseMove); // Remove mousemove listener
-        if (this.overlayElement) {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        if (this.overlayElement && document.body.contains(this.overlayElement)) {
             document.body.removeChild(this.overlayElement);
         }
-        if (this.styleElement) {
+        if (this.styleElement && document.head.contains(this.styleElement)) {
             document.head.removeChild(this.styleElement);
         }
     }