@axa-fr/slimfaas-planet-saver 0.30.4

package/README.md

@@ -0,0 +1,81 @@
+# @axa-fr/slimfaas-planet-saver
+
+[![npm version](https://badge.fury.io/js/%40axa-fr%2Fslimfaas-planet-saver.svg)](https://badge.fury.io/js/%40axa-fr%2Fslimfaas-planet-saver)
+
+![SlimFaas.png](https://github.com/AxaFrance/SlimFaas/blob/main/documentation/SlimFaas.png)
+
+A Vanilla JS project to save the planet. SlimFaas (https://github.com/AxaFrance/slimfaas) is the slimest and simplest Function As A Service on Kubernetes.
+It works as a proxy that you can be deployed in your namespace.
+
+SlimFaas API can give to the frontend information about the infrastructure state. **It is a mind changer !**
+
+**Why?**
+
+Because in production instead of setting up 2 replicas of your API backend, you can set up 0 replicas and use an UX that will show the user that the backend is down instead !
+**@axa-fr/slimfaas-planet-saver** is here to for doing that easily.
+
+![SlimFaasPlanetSaver.gif](https://github.com/AxaFrance/SlimFaas/blob/main/documentation/SlimfaasPlanetSaver.gif)
+
+## Getting Started
+
+```javascript
+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";
+
+const PlanetSaver = ({ children, baseUrl, fetch }) => {
+    const [isFirstStart, setIsFirstStart] = useState(true); // State for first start
+
+    useEffect(() => {
+        if (!baseUrl) return;
+
+        const environmentStarter = new SlimFaasPlanetSaver(baseUrl, {
+            interval: 2000,
+            fetch,
+            updateCallback: (data) => {
+                const allReady = data.every((item) => item.NumberReady >= 1);
+                if (allReady && isFirstStart) {
+                    setIsFirstStart(false);
+                }
+            },
+            errorCallback: (error) => {
+                console.error('Error detected :', error);
+            },
+            overlayStartingMessage: 'Starting the environment...',
+            overlayNoActivityMessage: 'Waiting activity to start environment...',
+            overlayErrorMessage: 'An error occured when starting environment. Please contact an administrator.',
+        });
+
+        // Start polling
+        environmentStarter.startPolling();
+
+        // Cleanup
+        return () => environmentStarter.cleanup();
+    }, [baseUrl, isFirstStart]);
+
+    // 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
+
+```javascript
+git clone https://github.com/AxaFrance/slimfaas.git
+cd slimfaas/src/SlimFaasPlanetSaver
+npm i
+npm run dev
+```

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@axa-fr/slimfaas-planet-saver",
+  "private": false,
+  "version": "0.30.4",
+  "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",
+  "files": [
+    "src/SlimFaasPlanetSaver.js",
+    "README.md",
+    "package.json",
+    "package-lock.json"
+  ],
+  "keywords": [
+    "Faas",
+    "SlimFaas",
+    "Function As A Service",
+    "vanilla",
+    "GreenIT"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AxaFrance/slimfaas.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@chromatic-com/storybook": "3.2.2",
+    "@eslint/js": "^9.15.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "0.11.1",
+    "globals": "^15.12.0",
+    "prop-types": "15.8.1",
+    "vite": "^6.0.1"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/SlimFaasPlanetSaver.js

@@ -0,0 +1,200 @@
+const normalizeBaseUrl = (url) => {
+    let tempUrl = url;
+    if (tempUrl.endsWith('/')) tempUrl = tempUrl.slice(0, -1);
+    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.overlayNoActivityMessage = options.overlayNoActivityMessage || 'Waiting activity to start environment...';
+        this.overlayErrorMessage = options.overlayErrorMessage || 'An error occured when starting environment. Please contact an administrator.';
+        this.fetch = options.fetch || fetch;
+        this.intervalId = null;
+        this.isDocumentVisible = !document.hidden;
+        this.overlayElement = null;
+        this.styleElement = null;
+        this.isReady = false;
+
+        // Initialize lastMouseMoveTime and bind the handler
+        this.lastMouseMoveTime = Date.now();
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
+
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+        document.addEventListener('mousemove', this.handleMouseMove);
+
+        this.createOverlay();
+        this.injectStyles();
+
+        this.events = document.createElement('div');
+    }
+
+    handleMouseMove() {
+        this.lastMouseMoveTime = Date.now();
+    }
+
+    handleVisibilityChange() {
+        this.isDocumentVisible = !document.hidden;
+        if (this.isDocumentVisible) {
+            this.startPolling();
+        } else {
+            this.stopPolling();
+        }
+    }
+
+    async wakeUpPods(data) {
+        const wakePromises = data
+            .filter((item) => item.NumberReady === 0)
+            .map((item) =>
+                this.fetch(`${this.baseUrl}/wake-function/${item.Name}`, {
+                    method: 'POST',
+                })
+            );
+
+        try {
+            await Promise.all(wakePromises);
+        } catch (error) {
+            console.error("Error waking up pods:", error);
+        }
+    }
+
+    async fetchStatus() {
+        try {
+            const response = await this.fetch(`${this.baseUrl}/status-functions`);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+
+            const allReady = data.every((item) => item.NumberReady >= 1);
+            this.setReadyState(allReady);
+
+            this.updateCallback(data);
+
+            const now = Date.now();
+            const mouseMovedRecently = now - this.lastMouseMoveTime <= 60000; // 1 minute in milliseconds
+
+            if (!allReady && this.isDocumentVisible && !mouseMovedRecently) {
+                this.updateOverlayMessage(this.overlayNoActivityMessage);
+            }
+
+            if (!this.isDocumentVisible || mouseMovedRecently) {
+                this.updateOverlayMessage(this.overlayStartingMessage);
+                await this.wakeUpPods(data);
+            }
+        } catch (error) {
+            const errorMessage = error.message;
+            this.updateOverlayMessage(this.overlayErrorMessage);
+            this.errorCallback(errorMessage);
+            this.triggerEvent('error', { message: errorMessage });
+            console.error('Error getting slimfaas data:', errorMessage);
+        } finally {
+            this.intervalId = setTimeout(() => {
+                this.fetchStatus();
+            }, this.interval);
+        }
+    }
+
+    setReadyState(isReady) {
+        this.isReady = isReady;
+        if (isReady) {
+            this.hideOverlay();
+        } else {
+            this.showOverlay();
+        }
+    }
+
+    startPolling() {
+        if (this.intervalId || !this.baseUrl) return;
+
+        this.fetchStatus();
+
+        this.intervalId = setTimeout(() => {
+            this.fetchStatus();
+        }, this.interval);
+    }
+
+    stopPolling() {
+        if (this.intervalId) {
+            clearTimeout(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+
+    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;
+          }
+        `;
+
+        this.styleElement = document.createElement('style');
+        this.styleElement.textContent = cssString;
+        document.head.appendChild(this.styleElement);
+    }
+
+    createOverlay() {
+        this.overlayElement = document.createElement('div');
+        this.overlayElement.className = 'environment-overlay';
+        this.overlayElement.innerText = this.overlayMessage;
+        document.body.appendChild(this.overlayElement);
+    }
+
+    showOverlay() {
+        if (this.overlayElement) {
+            this.overlayElement.classList.add('visible');
+        }
+    }
+
+    hideOverlay() {
+        if (this.overlayElement) {
+            this.overlayElement.classList.remove('visible');
+        }
+    }
+
+    updateOverlayMessage(newMessage) {
+        if (this.overlayElement) {
+            this.overlayElement.innerText = newMessage;
+        }
+    }
+
+    triggerEvent(eventName, detail) {
+        const event = new CustomEvent(eventName, { detail });
+        this.events.dispatchEvent(event);
+    }
+
+    cleanup() {
+        this.stopPolling();
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        document.removeEventListener('mousemove', this.handleMouseMove); // Remove mousemove listener
+        if (this.overlayElement) {
+            document.body.removeChild(this.overlayElement);
+        }
+        if (this.styleElement) {
+            document.head.removeChild(this.styleElement);
+        }
+    }
+}