feat: 81 events widget with server-sent events

src/api/apiSlice.ts

@@ -1,20 +1,24 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
-import { RootState } from '../redux/store';
+import { BaseQueryFn, FetchArgs, FetchBaseQueryError, createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
-export const baseQuery = fetchBaseQuery({
- prepareHeaders: (headers, { getState }) => {
- const kubeConfig = (getState() as RootState).auth?.data;
- if (kubeConfig) {
- // headers.set("authorization", `Bearer ${token}`);
- /**
- * INSERT HERE HOW TO SEND LOGIN INFO TO APIs
- */
+const baseQuery = fetchBaseQuery({});
+
+const customFetchBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (args, api, extraOptions) => {
+ const result = await baseQuery(args, api, extraOptions);
+ const realErrorCode = (result as unknown as {code: number})?.code;
+ if (realErrorCode !== undefined && realErrorCode !== 200) {
+ const clientErrorRegex = /^4\d{2}$/; // Regex for 4xx client errors
+ if (clientErrorRegex.test(String(realErrorCode))) {
+ // use transformation to ovewrite the fetch status with right error code
+ return {
+ status: realErrorCode,
+ data: {}
+ }
  }
- return headers;
  }
-});
+ return result;
+}
 
 export const apiSlice = createApi({
- baseQuery: baseQuery,
+ baseQuery: customFetchBaseQuery,
  endpoints: () => ({}), // all apis will be injected here
 })

src/components/Widgets/CardTemplate/CardTemplate.tsx

@@ -35,6 +35,10 @@ const CardTemplate = (props) => {
  }
  },
  }
+ } 
+ if (props.panel === "true" && !actions?.find(el => el.verb === "get")?.path) {
+ // avoid wrong panel open
+ delete cardProps.panel;
  }
  // END TEMP
 

src/components/Widgets/EventsList/EventsList.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { getBaseUrl } from "../../../utils/api";
+import RichRow from "../RichRow/RichRow";
+
+type EventType = {
+ uid: string,
+ icon: string,
+ color: string,
+ primaryText: string,
+ secondaryText: string,
+ subPrimaryText: string,
+ subSecondaryText: string,
+}
+
+const EventsList = ({deploymentId}: {deploymentId: string}) => {
+ const [events, setEvents] = useState<EventType[]>([]);
+
+ useEffect(() => {
+ // opening a connection to the server to begin receiving events from it
+ const eventSource = new EventSource(`${getBaseUrl()}/events/${deploymentId}`);
+
+ // attaching a handler to receive message events
+ eventSource.onmessage = (event) => {
+ const newEvents = JSON.parse(event.data);
+ setEvents({ ...newEvents, ...events });
+ };
+
+ // terminating the connection on component unmount
+ return () => eventSource.close();
+ }, [deploymentId, events]);
+
+ return (
+ events.map(el => <RichRow key={el.uid} {...el} />)
+ )
+}
+
+export default EventsList;

src/components/Widgets/FormGenerator/FormGenerator.tsx

@@ -259,13 +259,10 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 
  // submit values
  if (!postLoading && !isPostError && !isPostSuccess) {
- const response = await postContent({
+ await postContent({
  endpoint: postEndpoint,
  body: payload,
- }).unwrap();
- if (response.code && response.code !== 200) {
- catchError();
- }
+ });
  }
  }