@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.1

package/src/rtk/endpoints/streamMessages.ts

@@ -9,12 +9,12 @@ const NO_PONG_RECEIVED_TIMEOUT_MS = 35000;
 const INITIAL_CONNECTION_CHECK_INTERVAL_MS = 2000;
 
 type WebSocketMessage = {
-    name: MessageTypes;
-    value: CacheTag;
+  name: MessageTypes;
+  value: CacheTag;
 };
 
 enum MessageTypes {
-    invalidateCache = 'invalidateCache',
+  invalidateCache = 'invalidateCache',
 }
 /*
  * Websocket handling as recommended by RTK QUery see: https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#streaming-data-with-no-initial-request
@@ -30,128 +30,105 @@ enum MessageTypes {
  * - WfoWebsocketStatusBadge contains logic that handles automatic reconnection and their circumstances
  */
 const streamMessagesApi = orchestratorApi.injectEndpoints({
-    endpoints: (build) => ({
-        streamMessages: build.query<boolean, void>({
-            queryFn: () => {
-                return { data: true };
-            },
-            async onCacheEntryAdded(
-                _,
-                {
-                    cacheDataLoaded,
-                    cacheEntryRemoved,
-                    dispatch,
-                    getState,
-                    updateCachedData,
-                },
-            ) {
-                const cleanUp = () => {
-                    clearInterval(pingInterval);
-                    updateCachedData(() => false);
-                };
-
-                const invalidateTag = (cacheTag: CacheTag) => {
-                    if (validCacheTags.includes(cacheTag.type)) {
-                        const cacheInvalidationAction =
-                            orchestratorApi.util.invalidateTags([cacheTag]);
-                        dispatch(cacheInvalidationAction);
-                    } else {
-                        console.error(
-                            `Trying to invalidate a cache entry with an unknown tag: ${cacheTag.type}`,
-                        );
-                    }
-                };
-
-                await cacheDataLoaded;
-                let initialConnection = true;
-                const state = getState() as RootState;
-                const { orchestratorWebsocketUrl } = state.orchestratorConfig;
-                const validCacheTags = Object.values(CacheTagType);
-
-                const getDebounce = (delay: number) => {
-                    return debounce(() => {
-                        webSocket.close();
-                        // note: websocket.close doesn't trigger the onClose handler when closing
-                        // internet connection so we call the cleanup event from here to be sure it's called
-                        cleanUp();
-                    }, delay);
-                };
-
-                const closeConnectionAfterFirstPing = getDebounce(
-                    INITIAL_CONNECTION_CHECK_INTERVAL_MS,
-                );
-                const debounceClosingConnection = getDebounce(
-                    NO_PONG_RECEIVED_TIMEOUT_MS,
-                );
-
-                // Starts the websocket
-                const webSocket = await getWebSocket(orchestratorWebsocketUrl);
-
-                const sendPing = () => {
-                    if (webSocket.readyState === WebSocket.OPEN) {
-                        webSocket.send('__ping__');
-                    }
-                };
-
-                // Send a ping message every to the websocket server to keep the connection alive
-                // Note: setInterval doesn't keep their set interval when the browser suspends. It will
-                // run less frequently at the discretion of the browser causing the websocket to disconnect
-                // sometimes. WfoWebsocketStatusBadge contains logic to reconnect based on the pageVisibility api
-                // to handle that situation.
-                const pingInterval = setInterval(() => {
-                    sendPing();
-                }, PING_INTERVAL_MS);
-
-                webSocket.onopen = () => {
-                    // Check the connection right after it is established
-                    closeConnectionAfterFirstPing();
-                    sendPing();
-                    debounceClosingConnection();
-                    // Lets the WfoWebsocketStatusBadge know the websocket is connected
-                    updateCachedData(() => true);
-                };
-
-                webSocket.addEventListener(
-                    'message',
-                    (messageEvent: MessageEvent<string>) => {
-                        const data = messageEvent.data;
-
-                        if (data === '__pong__') {
-                            debounceClosingConnection();
-                            if (
-                                initialConnection &&
-                                closeConnectionAfterFirstPing
-                            ) {
-                                initialConnection = false;
-                                closeConnectionAfterFirstPing.cancel();
-                            }
-                            return;
-                        }
-                        const message = JSON.parse(data) as WebSocketMessage;
-                        if (message.name === MessageTypes.invalidateCache) {
-                            invalidateTag(message.value);
-                        } else {
-                            console.error('Unknown message type', message);
-                        }
-                    },
-                );
-
-                webSocket.onerror = (event) => {
-                    console.error('WebSocket error', event);
-                };
-
-                webSocket.onclose = () => {
-                    console.error('WebSocket closed');
-                    cleanUp();
-                };
-
-                await cacheEntryRemoved;
-
-                webSocket.close();
-            },
-        }),
+  endpoints: (build) => ({
+    streamMessages: build.query<boolean, void>({
+      queryFn: () => {
+        return { data: true };
+      },
+      async onCacheEntryAdded(_, { cacheDataLoaded, cacheEntryRemoved, dispatch, getState, updateCachedData }) {
+        const cleanUp = () => {
+          clearInterval(pingInterval);
+          updateCachedData(() => false);
+        };
+
+        const invalidateTag = (cacheTag: CacheTag) => {
+          if (validCacheTags.includes(cacheTag.type)) {
+            const cacheInvalidationAction = orchestratorApi.util.invalidateTags([cacheTag]);
+            dispatch(cacheInvalidationAction);
+          } else {
+            console.error(`Trying to invalidate a cache entry with an unknown tag: ${cacheTag.type}`);
+          }
+        };
+
+        await cacheDataLoaded;
+        let initialConnection = true;
+        const state = getState() as RootState;
+        const { orchestratorWebsocketUrl } = state.orchestratorConfig;
+        const validCacheTags = Object.values(CacheTagType);
+
+        const getDebounce = (delay: number) => {
+          return debounce(() => {
+            webSocket.close();
+            // note: websocket.close doesn't trigger the onClose handler when closing
+            // internet connection so we call the cleanup event from here to be sure it's called
+            cleanUp();
+          }, delay);
+        };
+
+        const closeConnectionAfterFirstPing = getDebounce(INITIAL_CONNECTION_CHECK_INTERVAL_MS);
+        const debounceClosingConnection = getDebounce(NO_PONG_RECEIVED_TIMEOUT_MS);
+
+        // Starts the websocket
+        const webSocket = await getWebSocket(orchestratorWebsocketUrl);
+
+        const sendPing = () => {
+          if (webSocket.readyState === WebSocket.OPEN) {
+            webSocket.send('__ping__');
+          }
+        };
+
+        // Send a ping message every to the websocket server to keep the connection alive
+        // Note: setInterval doesn't keep their set interval when the browser suspends. It will
+        // run less frequently at the discretion of the browser causing the websocket to disconnect
+        // sometimes. WfoWebsocketStatusBadge contains logic to reconnect based on the pageVisibility api
+        // to handle that situation.
+        const pingInterval = setInterval(() => {
+          sendPing();
+        }, PING_INTERVAL_MS);
+
+        webSocket.onopen = () => {
+          // Check the connection right after it is established
+          closeConnectionAfterFirstPing();
+          sendPing();
+          debounceClosingConnection();
+          // Lets the WfoWebsocketStatusBadge know the websocket is connected
+          updateCachedData(() => true);
+        };
+
+        webSocket.addEventListener('message', (messageEvent: MessageEvent<string>) => {
+          const data = messageEvent.data;
+
+          if (data === '__pong__') {
+            debounceClosingConnection();
+            if (initialConnection && closeConnectionAfterFirstPing) {
+              initialConnection = false;
+              closeConnectionAfterFirstPing.cancel();
+            }
+            return;
+          }
+          const message = JSON.parse(data) as WebSocketMessage;
+          if (message.name === MessageTypes.invalidateCache) {
+            invalidateTag(message.value);
+          } else {
+            console.error('Unknown message type', message);
+          }
+        });
+
+        webSocket.onerror = (event) => {
+          console.error('WebSocket error', event);
+        };
+
+        webSocket.onclose = () => {
+          console.error('WebSocket closed');
+          cleanUp();
+        };
+
+        await cacheEntryRemoved;
+
+        webSocket.close();
+      },
     }),
+  }),
 });
 
-export const { useStreamMessagesQuery, useLazyStreamMessagesQuery } =
-    streamMessagesApi;
+export const { useStreamMessagesQuery, useLazyStreamMessagesQuery } = streamMessagesApi;

package/src/rtk/endpoints/subscriptionActions.ts

@@ -4,30 +4,20 @@ import { CacheTagType, SubscriptionActions } from '@/types';
 import { getCacheTag } from '@/utils/cacheTag';
 
 const subscriptionActionsApi = orchestratorApi.injectEndpoints({
-    endpoints: (build) => ({
-        getSubscriptionActions: build.query<
-            SubscriptionActions,
-            { subscriptionId: string }
-        >({
-            query: ({ subscriptionId }) =>
-                `${SUBSCRIPTION_ACTIONS_ENDPOINT}/${subscriptionId}`,
-            extraOptions: {
-                baseQueryType: BaseQueryTypes.fetch,
-            },
-            providesTags: (result, error, queryArguments) => {
-                if (!error && result) {
-                    return getCacheTag(
-                        CacheTagType.subscriptions,
-                        queryArguments.subscriptionId,
-                    );
-                }
-                return [];
-            },
-        }),
+  endpoints: (build) => ({
+    getSubscriptionActions: build.query<SubscriptionActions, { subscriptionId: string }>({
+      query: ({ subscriptionId }) => `${SUBSCRIPTION_ACTIONS_ENDPOINT}/${subscriptionId}`,
+      extraOptions: {
+        baseQueryType: BaseQueryTypes.fetch,
+      },
+      providesTags: (result, error, queryArguments) => {
+        if (!error && result) {
+          return getCacheTag(CacheTagType.subscriptions, queryArguments.subscriptionId);
+        }
+        return [];
+      },
     }),
+  }),
 });
 
-export const {
-    useGetSubscriptionActionsQuery,
-    useLazyGetSubscriptionActionsQuery,
-} = subscriptionActionsApi;
+export const { useGetSubscriptionActionsQuery, useLazyGetSubscriptionActionsQuery } = subscriptionActionsApi;

package/src/rtk/endpoints/subscriptionDetail.ts

@@ -1,11 +1,7 @@
 import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
 import { orchestratorApi } from '@/rtk';
 import { CacheTagType } from '@/types';
-import {
-    BaseGraphQlResult,
-    SubscriptionDetail,
-    SubscriptionDetailResult,
-} from '@/types';
+import { BaseGraphQlResult, SubscriptionDetail, SubscriptionDetailResult } from '@/types';
 import { getCacheTag } from '@/utils/cacheTag';
 
 export const subscriptionDetailFragment = `
@@ -79,41 +75,33 @@ export const subscriptionDetailQuery = `
 `;
 
 export type SubscriptionDetailResponse = {
-    subscription: SubscriptionDetail;
+  subscription: SubscriptionDetail;
 } & BaseGraphQlResult;
 
 const subscriptionDetailApi = orchestratorApi.injectEndpoints({
-    endpoints: (builder) => ({
-        getSubscriptionDetail: builder.query<
-            SubscriptionDetailResponse,
-            { subscriptionId: string }
-        >({
-            query: (variables) => ({
-                document: subscriptionDetailQuery + subscriptionDetailFragment,
-                variables,
-            }),
-            transformResponse: (
-                response: SubscriptionDetailResult,
-            ): SubscriptionDetailResponse => {
-                const subscription = response.subscriptions.page[0] || [];
-                const pageInfo = response.subscriptions.pageInfo || {};
+  endpoints: (builder) => ({
+    getSubscriptionDetail: builder.query<SubscriptionDetailResponse, { subscriptionId: string }>({
+      query: (variables) => ({
+        document: subscriptionDetailQuery + subscriptionDetailFragment,
+        variables,
+      }),
+      transformResponse: (response: SubscriptionDetailResult): SubscriptionDetailResponse => {
+        const subscription = response.subscriptions.page[0] || [];
+        const pageInfo = response.subscriptions.pageInfo || {};
 
-                return {
-                    subscription,
-                    pageInfo,
-                };
-            },
-            providesTags: (result, error, queryArguments) => {
-                if (!error && result) {
-                    return getCacheTag(
-                        CacheTagType.subscriptions,
-                        queryArguments.subscriptionId,
-                    );
-                }
-                return [];
-            },
-        }),
+        return {
+          subscription,
+          pageInfo,
+        };
+      },
+      providesTags: (result, error, queryArguments) => {
+        if (!error && result) {
+          return getCacheTag(CacheTagType.subscriptions, queryArguments.subscriptionId);
+        }
+        return [];
+      },
     }),
+  }),
 });
 
 export const { useGetSubscriptionDetailQuery } = subscriptionDetailApi;

package/src/rtk/endpoints/subscriptionInUseByRelationsList.ts

@@ -1,19 +1,15 @@
 import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
 import { orchestratorApi } from '@/rtk';
 import { CacheTagType } from '@/types';
-import {
-    InUseByRelationDetail,
-    InUseByRelationsDetailResult,
-    SubscriptionStatus,
-} from '@/types';
+import { InUseByRelationDetail, InUseByRelationsDetailResult, SubscriptionStatus } from '@/types';
 import { getCacheTag } from '@/utils/cacheTag';
 
 const nonTerminalSubscriptionStatuses = [
-    SubscriptionStatus.INITIAL,
-    SubscriptionStatus.ACTIVE,
-    SubscriptionStatus.MIGRATING,
-    SubscriptionStatus.DISABLED,
-    SubscriptionStatus.PROVISIONING,
+  SubscriptionStatus.INITIAL,
+  SubscriptionStatus.ACTIVE,
+  SubscriptionStatus.MIGRATING,
+  SubscriptionStatus.DISABLED,
+  SubscriptionStatus.PROVISIONING,
 ].join('|');
 
 export const subscriptionInUseByRelationQuery = `
@@ -38,32 +34,26 @@ export const subscriptionInUseByRelationQuery = `
 `;
 
 export type InUseByRelationsDetailResponse = {
-    inUseByRelationDetails: InUseByRelationDetail[];
+  inUseByRelationDetails: InUseByRelationDetail[];
 };
 
 const subscriptionInUseByRelationsListApi = orchestratorApi.injectEndpoints({
-    endpoints: (builder) => ({
-        getInUseByRelationDetails: builder.query<
-            InUseByRelationsDetailResponse,
-            { subscriptionIds: string }
-        >({
-            query: (variables) => ({
-                document: subscriptionInUseByRelationQuery,
-                variables,
-            }),
-            transformResponse: (
-                response: InUseByRelationsDetailResult,
-            ): InUseByRelationsDetailResponse => {
-                const subscriptions = response.subscriptions.page || [];
+  endpoints: (builder) => ({
+    getInUseByRelationDetails: builder.query<InUseByRelationsDetailResponse, { subscriptionIds: string }>({
+      query: (variables) => ({
+        document: subscriptionInUseByRelationQuery,
+        variables,
+      }),
+      transformResponse: (response: InUseByRelationsDetailResult): InUseByRelationsDetailResponse => {
+        const subscriptions = response.subscriptions.page || [];
 
-                return {
-                    inUseByRelationDetails: subscriptions,
-                };
-            },
-            providesTags: getCacheTag(CacheTagType.subscriptions),
-        }),
+        return {
+          inUseByRelationDetails: subscriptions,
+        };
+      },
+      providesTags: getCacheTag(CacheTagType.subscriptions),
     }),
+  }),
 });
 
-export const { useGetInUseByRelationDetailsQuery } =
-    subscriptionInUseByRelationsListApi;
+export const { useGetInUseByRelationDetailsQuery } = subscriptionInUseByRelationsListApi;

package/src/rtk/endpoints/subscriptionList.ts

@@ -1,12 +1,6 @@
 import { SubscriptionListItem } from '@/components/WfoSubscriptionsList';
 import { orchestratorApi } from '@/rtk';
-import {
-    BaseGraphQlResult,
-    CacheTagType,
-    GraphqlQueryVariables,
-    Subscription,
-    SubscriptionsResult,
-} from '@/types';
+import { BaseGraphQlResult, CacheTagType, GraphqlQueryVariables, Subscription, SubscriptionsResult } from '@/types';
 import { getCacheTag } from '@/utils/cacheTag';
 
 export const subscriptionListQuery = `query SubscriptionsList(
@@ -56,34 +50,28 @@ export const subscriptionListQuery = `query SubscriptionsList(
 `;
 
 export type SubscriptionListResponse = {
-    subscriptions: Subscription[];
+  subscriptions: Subscription[];
 } & BaseGraphQlResult;
 
 const subscriptionListApi = orchestratorApi.injectEndpoints({
-    endpoints: (builder) => ({
-        getSubscriptionList: builder.query<
-            SubscriptionListResponse,
-            GraphqlQueryVariables<SubscriptionListItem>
-        >({
-            query: (variables) => ({
-                document: subscriptionListQuery,
-                variables,
-            }),
-            transformResponse: (
-                response: SubscriptionsResult,
-            ): SubscriptionListResponse => {
-                const subscriptions = response.subscriptions.page || [];
-                const pageInfo = response.subscriptions.pageInfo || {};
+  endpoints: (builder) => ({
+    getSubscriptionList: builder.query<SubscriptionListResponse, GraphqlQueryVariables<SubscriptionListItem>>({
+      query: (variables) => ({
+        document: subscriptionListQuery,
+        variables,
+      }),
+      transformResponse: (response: SubscriptionsResult): SubscriptionListResponse => {
+        const subscriptions = response.subscriptions.page || [];
+        const pageInfo = response.subscriptions.pageInfo || {};
 
-                return {
-                    subscriptions,
-                    pageInfo,
-                };
-            },
-            providesTags: getCacheTag(CacheTagType.subscriptions),
-        }),
+        return {
+          subscriptions,
+          pageInfo,
+        };
+      },
+      providesTags: getCacheTag(CacheTagType.subscriptions),
     }),
+  }),
 });
 
-export const { useGetSubscriptionListQuery, useLazyGetSubscriptionListQuery } =
-    subscriptionListApi;
+export const { useGetSubscriptionListQuery, useLazyGetSubscriptionListQuery } = subscriptionListApi;