@axa-fr/slimfaas-planet-saver

A Vanilla JS project to save the planet. SlimFaas (https://github.com/SlimPlanet/slimfaas) is the slimmest 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 easy.

Getting Started

npm install @axa-fr/slimfaas-planet-saver

Example usage with react :

import React, { useState, useEffect, useRef } from 'react';
import { SlimFaasPlanetSaver } from '@axa-fr/slimfaas-planet-saver';

const PlanetSaver = ({ children, baseUrl, fetch, noActivityTimeout=60000, behavior={} }) => {
    const [isFirstStart, setIsFirstStart] = useState(true);
    const instanceRef = useRef(null);

    useEffect(() => {
        if (!baseUrl) return;

        if (instanceRef.current) return;

        const instance = new SlimFaasPlanetSaver(baseUrl, {
            interval: 2000,
            fetch,
            behavior,
            updateCallback: (data) => {
                const inst = instanceRef.current;
                // Filter only the items that block the UI (WakeUp+BlockUI)
                const blockingItems = data.filter(
                    (item) => inst?.getBehavior(item.Name) === 'WakeUp+BlockUI'
                );

                // If all blocking items are ready, set isFirstStart to false
                const allBlockingReady = blockingItems.every(
                    (item) => item.NumberReady >= 1
                );
                if (allBlockingReady && isFirstStart) {
                    setIsFirstStart(false);
                }
            },
            errorCallback: (error) => {
                console.error('Error detected :', error);
            },
            overlayStartingMessage: '🌳 Starting the environment.... 🌳',
            overlayNoActivityMessage: 'Waiting activity to start environment...',
            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.',
            noActivityTimeout
        });

        instanceRef.current = instance;

        // Initialiser les effets de bord
        instance.initialize();
        instance.startPolling();

        return () => {
            try {
                instance.cleanup();
            } finally {
                instanceRef.current = null;
            }
        };
    }, [baseUrl]);

    if (isFirstStart) {
        return null;
    }

    return <>{children}</>;
};

export default PlanetSaver;

Usage:

const behavior: {
    "api-speech-to-text": "WakeUp",
    "heavy-pdf-service": "WakeUp+BlockUI",
    "deprecated-service": "None"
}

<PlanetSaver baseUrl="http://slimfaas.mycompany.com" fetch={window.fetch} behavior={behavior}>
  <App />
</PlanetSaver>

Run the demo

git clone https://github.com/SlimPlanet/slimfaas.git
cd slimfaas/src/SlimFaasPlanetSaver
npm i
npm run dev

This will launch a local dev server, letting you see SlimFaasPlanetSaver in action.

Configuration Options

When you create a new SlimFaasPlanetSaver(baseUrl, options), you can provide the following optional properties in the options object:

Notes on Behavior

If a function is not specified in the behavior map, it defaults to "WakeUp+BlockUI".

• "WakeUp+BlockUI" means the overlay will be shown until that function is NumberReady >= 1.
• "WakeUp" means we attempt to wake up the function, but do not keep the overlay shown specifically for that function.
• "None" means the function will neither be woken up nor block the UI.

Lifecycle

1. Initialize Call instance.initialize() to create the overlay elements, inject styles, and bind event listeners (e.g., for mouse movement).

2. Start Polling Call instance.startPolling() to begin the periodic checks of the environment. If the environment is not ready, the overlay will appear.

3. Stop Polling / Cleanup When your component unmounts or you no longer need to monitor the environment, call instance.cleanup(). This removes the overlay, styles, and any timers or event listeners.