ci4sManagement-cloud/react-ui/src/hooks/useSSE.ts

import { parseJsonText } from '@/utils';
import { useEffect } from 'react';
import { ExperimentStatus } from '@/enums';
import { NodeStatus } from '@/types';

export type MessageHandler = (experimentInsId: number, status: string, finishedAt: string, nodes: Record<string, NodeStatus>) => void
export const useSSE = (experimentInsId: number, status: ExperimentStatus, name: string, namespace: string, onMessage: MessageHandler) => {
  useEffect(() => {
    if (status === ExperimentStatus.Pending || status === ExperimentStatus.Running) {
      const { origin } = location;
      const params = encodeURIComponent(`metadata.namespace=${namespace},metadata.name=${name}`);
      const evtSource = new EventSource(
        `${origin}/api/v1/realtimeStatus?listOptions.fieldSelector=${params}`,
        { withCredentials: false },
      );
      evtSource.onmessage = (event) => {
        const data = event?.data;
        if (!data) {
          return;
        }
        const dataJson = parseJsonText(data);
        const statusData = dataJson?.result?.object?.status;
        if (statusData) {
          const { finishedAt, phase, nodes } = statusData;    
          onMessage(experimentInsId, phase, finishedAt, nodes);
        }
      };

      evtSource.onerror = (error) => {
        console.error('SSE error: ', error);
      };

      return () => {
        evtSource.close();
      }
    }
    
  }, [experimentInsId, status, name, namespace, onMessage]);
};