@orchestrator-ui/orchestrator-ui-components 0.10.0 → 0.11.0

package/src/rtk/endpoints/streamMessages.ts

@@ -0,0 +1,128 @@
+import { debounce } from 'lodash';
+
+import { addToastMessage } from '@/rtk/slices/toastMessages';
+import type { RootState } from '@/rtk/store';
+import { ToastTypes } from '@/types';
+import { getToastMessage } from '@/utils/getToastMessage';
+
+import { CacheTags, orchestratorApi } from '../api';
+
+const getWebSocket = (url: string) => {
+    // TODO: Implement authentication taking this into account: https://stackoverflow.com/questions/4361173/http-headers-in-websockets-client-api/77060459#77060459
+    // https://github.com/workfloworchestrator/orchestrator-core/issues/502 - https://github.com/workfloworchestrator/orchestrator-ui-library/issues/823
+    return new WebSocket(url);
+};
+
+const PING_INTERVAL_MS = 5000;
+const DEBOUNCE_CLOSE_INTERVAL_MS = 10000;
+
+/*
+ * Websocket handling as recommended by RTK QUery see: https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#streaming-data-with-no-initial-request
+ * The websocket is opened after the cacheDataLoaded promise is resolved, and closed after the cacheEntryRemoved promise is resolved maintaining
+ * the connection in between
+ * - It sends a ping message every PING_INTERVAL ms to keep the connection alive
+ * - It debounces the close event to avoid closing the connection every time a 'pong' message is received
+ * - It closes the connection if any websocket error or close event is received
+ * - It invalidates the cache entry with the tag received in the message event
+ */
+const streamMessagesApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        streamMessages: build.query<boolean, void>({
+            queryFn: () => {
+                return { data: false };
+            },
+            async onCacheEntryAdded(
+                _,
+                {
+                    cacheDataLoaded,
+                    cacheEntryRemoved,
+                    dispatch,
+                    getState,
+                    updateCachedData,
+                },
+            ) {
+                const cleanUp = () => {
+                    const message = getToastMessage(
+                        ToastTypes.ERROR,
+                        'Connection to the server was lost. Please refresh the page to reconnect.',
+                        'WebSocket closed',
+                    );
+                    dispatch(addToastMessage(message));
+                    clearInterval(pingInterval);
+                    updateCachedData(() => false);
+                };
+
+                await cacheDataLoaded;
+
+                const state = getState() as RootState;
+                const { orchestratorWebsocketUrl } = state.orchestratorConfig;
+
+                // Starts the websocket
+                const webSocket = getWebSocket(orchestratorWebsocketUrl);
+
+                // Lets the WfoWebsocketStatusBadge know the websocket is connected
+                webSocket.onopen = () => {
+                    updateCachedData(() => true);
+                };
+
+                // Send a ping message every to the websocket server to keep the connection alive
+                const pingInterval = setInterval(() => {
+                    webSocket.send('ping');
+                }, PING_INTERVAL_MS);
+
+                const debounceCloseWebSocket = debounce(() => {
+                    webSocket.close();
+                }, DEBOUNCE_CLOSE_INTERVAL_MS);
+                // Start the debounced function to close the websocket when no 'pong' message is received after DEBOUNCE_CLOSE_INTERVAL
+                debounceCloseWebSocket();
+
+                webSocket.addEventListener(
+                    'message',
+                    (message: MessageEvent<string>) => {
+                        const tagOrPong = message.data.trim();
+
+                        if (tagOrPong === 'pong') {
+                            // Reset the debounced every time a 'pong' message is received
+                            debounceCloseWebSocket();
+                            return;
+                        }
+
+                        const tagToInvalidate = tagOrPong as CacheTags;
+                        const validCacheTags = Object.values(CacheTags);
+
+                        if (
+                            tagToInvalidate &&
+                            validCacheTags.includes(tagToInvalidate)
+                        ) {
+                            const cacheInvalidationAction =
+                                orchestratorApi.util.invalidateTags([
+                                    tagToInvalidate,
+                                ]);
+                            dispatch(cacheInvalidationAction);
+                        } else {
+                            console.error(
+                                `Trying to invalidate a cache entry with an unknown tag: ${tagToInvalidate}`,
+                            );
+                        }
+                    },
+                );
+
+                webSocket.onerror = (event) => {
+                    console.error('WebSocket error', event);
+                    cleanUp();
+                };
+
+                webSocket.onclose = () => {
+                    console.error('WebSocket closed');
+                    cleanUp();
+                };
+
+                await cacheEntryRemoved;
+
+                webSocket.close();
+            },
+        }),
+    }),
+});
+
+export const { useStreamMessagesQuery } = streamMessagesApi;

package/src/theme/defaultOrchestratorTheme.ts

@@ -23,7 +23,34 @@ export const defaultOrchestratorTheme: EuiThemeModifications = {
         xxxxl: '64px',
     },
     colors: {
-        DARK: {},
+        DARK: {
+            primary: '#265391',
+            accent: '#F68FBE',
+            success: '#7DDED8',
+            warning: '#F3D371',
+            danger: '#F86B63',
+            primaryText: '#3EA6fA',
+            accentText: '#F68FBE',
+            successText: '#7DDEd8',
+            warningText: '#F3D371',
+            dangerText: '#F86B63',
+            emptyShade: '#1D1E24',
+            lightestShade: '#25262E',
+            lightShade: '#343741',
+            mediumShade: '#535966',
+            darkShade: '#98A2B3',
+            darkestShade: '#D4DAE5',
+            fullShade: '#FFFFFF',
+            text: '#DFE5EF',
+            title: '#DFE5EF',
+            subduedText: '#81858f',
+            link: '#3EA6fA',
+            body: '#141519',
+            highlight: '#262830',
+            disabled: '#515761',
+            disabledText: '#515761',
+            shadow: '#000000',
+        },
         LIGHT: {
             primary: '#0077C8',
             accent: '#E67300',

package/src/types/types.ts

@@ -462,6 +462,7 @@ export enum Environment {
 
 export type OrchestratorConfig = {
     environmentName: Environment | string;
+    orchestratorWebsocketUrl: string;
     orchestratorApiBaseUrl: string;
     graphqlEndpointCore: string;
     engineStatusEndpoint: string;
@@ -471,3 +472,8 @@ export type OrchestratorConfig = {
     subscriptionProcessesEndpoint: string;
     authActive: boolean;
 };
+
+export enum ColorModes {
+    LIGHT = 'LIGHT',
+    DARK = 'DARK',
+}

package/src/utils/getToastMessage.spec.ts

@@ -0,0 +1,28 @@
+import { ToastTypes } from '../types';
+import { getToastMessage } from './getToastMessage';
+
+describe('getToastMessage()', () => {
+    it('returns message object with title, text and passed in type', () => {
+        const result = getToastMessage(ToastTypes.ERROR, 'text', 'title');
+        expect(result.title).toBe('title');
+        expect(result.text).toBe('text');
+    });
+
+    it('returns message object with random integer id', () => {
+        const result = getToastMessage(ToastTypes.ERROR, 'text', 'title');
+        const result2 = getToastMessage(ToastTypes.ERROR, 'text', 'title');
+        expect(result.id).not.toBe(result2.id);
+    });
+
+    it('returns message object with ToastTypes.Error to color danger and iconType warning', () => {
+        const result = getToastMessage(ToastTypes.ERROR, 'text', 'title');
+        expect(result.color).toBe('danger');
+        expect(result.iconType).toBe('warning');
+    });
+
+    it('returns message object with ToastTypes.Error to color success and iconType check', () => {
+        const result = getToastMessage(ToastTypes.SUCCESS, 'text', 'title');
+        expect(result.color).toBe('success');
+        expect(result.iconType).toBe('check');
+    });
+});

package/src/utils/getToastMessage.ts

@@ -0,0 +1,35 @@
+import { ToastTypes } from '../types';
+import type { Toast } from '../types';
+
+export const getToastMessage = (
+    type: ToastTypes,
+    text: string, // We use string here instead of Toast['text'] because we want to prevent passing in react component because they trigger an "unsynchronizable values in payload detected" error',
+    title: string, // same as above for string instead of Toast['title']
+) => {
+    const getTypeProps = (type: ToastTypes): Partial<Toast> => {
+        switch (type) {
+            case ToastTypes.ERROR:
+                return {
+                    color: 'danger',
+                    iconType: 'warning',
+                };
+            case ToastTypes.SUCCESS:
+                return {
+                    color: 'success',
+                    iconType: 'check',
+                };
+        }
+    };
+
+    const id = Math.floor(Math.random() * 10000000).toString();
+    const typeProps = getTypeProps(type);
+
+    const toast: Toast = {
+        id,
+        text,
+        title,
+        ...typeProps,
+    };
+
+    return toast;
+};