Subscribe the deployment status event in UI

Author: noah

ui/src/apis/deployment.ts

@@ -117,14 +117,21 @@ function mapDeploymentStatusEnum(s: string) {
     }
 }
 
-function mapDataToDeploymentStatus(data: any): DeploymentStatus {
+// eslint-disable-next-line
+export function mapDataToDeploymentStatus(data: any): DeploymentStatus {
     return {
         id: data.id,
         status: data.status,
         description: data.description,
         logUrl: data.log_url,
         createdAt: data.created_at,
         updatedAt: data.updated_at,
+        deploymentId: data.deployment_id,
+        repoId: data.repo_id,
+        edges: {
+            deployment: (data.edges.deployment)? mapDataToDeployment(data.edges.deployment) : undefined,
+            repo: (data.edges.repo)? mapDataToRepo(data.edges.repo) : undefined
+        }
     }
 }
 

ui/src/apis/events.ts

@@ -1,8 +1,8 @@
 import { instance } from './setting'
 
-import { mapDataToDeployment } from "./deployment"
-import {  mapDataToReview } from "./review"
-import { Deployment, Review  } from "../models"
+import { mapDataToDeployment, mapDataToDeploymentStatus } from "./deployment"
+import { mapDataToReview } from "./review"
+import { Deployment, DeploymentStatus, Review  } from "../models"
 
 
 export const subscribeDeploymentEvents = (cb: (deployment: Deployment) => void): EventSource => {
@@ -20,6 +20,21 @@ export const subscribeDeploymentEvents = (cb: (deployment: Deployment) => void):
     return sse
 }
 
+export const subscribeDeploymentStatusEvents = (cb: (status: DeploymentStatus) => void): EventSource => {
+    const sse = new EventSource(`${instance}/api/v1/stream/events`, {
+        withCredentials: true,
+    })
+
+    sse.addEventListener("deployment_status", (e: any) => {
+        const data = JSON.parse(e.data)
+        const status = mapDataToDeploymentStatus(data)
+
+        cb(status)
+    })
+
+    return sse
+}
+
 export const subscribeReviewEvents = (cb: (review: Review) => void): EventSource => {
     const sse = new EventSource(`${instance}/api/v1/stream/events`, {
         withCredentials: true,

ui/src/apis/index.ts

@@ -66,5 +66,6 @@ export {
 } from "./license"
 export { 
     subscribeDeploymentEvents,
+    subscribeDeploymentStatusEvents,
     subscribeReviewEvents,
 } from "./events"

ui/src/models/Deployment.ts

@@ -41,4 +41,10 @@ export interface DeploymentStatus {
     logUrl: string
     createdAt: string
     updatedAt: string
+    deploymentId: number
+    repoId: number
+    edges?: {
+        deployment?: Deployment
+        repo?: Repo
+    }
 }

ui/src/redux/deployment.tsx

@@ -3,6 +3,7 @@ import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
 
 import { 
     Deployment, 
+    DeploymentStatus,
     Commit,
     Review,
     RequestStatus, 
@@ -165,6 +166,21 @@ export const fetchUserReview = createAsyncThunk<Review, void, { state: {deployme
     },
 )
 
+export const handleDeploymentStatusEvent = createAsyncThunk<Deployment, DeploymentStatus, { state: { deployment: DeploymentState } }>(
+    "deployment/handleDeploymentStatusEvent",
+    async (deploymentStatus, { rejectWithValue }) => {
+        if (deploymentStatus.edges === undefined) {
+            return rejectWithValue(new Error("Edges is not included."))
+        }
+
+        const { repo, deployment } = deploymentStatus.edges
+        if (repo === undefined || deployment === undefined) {
+            return rejectWithValue(new Error("Repo or Deployment is not included in the edges."))
+        }
+
+        return await getDeployment(repo.namespace, repo.name, deployment.number)
+    }
+)
 
 export const deploymentSlice = createSlice({
     name: "deployment",
@@ -228,5 +244,10 @@ export const deploymentSlice = createSlice({
             .addCase(fetchUserReview.fulfilled, (state, action) => {
                 state.userReview = action.payload
             })
+            .addCase(handleDeploymentStatusEvent.fulfilled, (state, action) => {
+                if (action.payload.id === state.deployment?.id) {
+                    state.deployment = action.payload
+                }
+            })
     }
 })

ui/src/redux/main.ts

@@ -11,11 +11,13 @@ import {
     HttpPaymentRequiredError,
     License,
     ReviewStatusEnum,
+    DeploymentStatus,
 } from "../models"
 import { 
     getMe, 
     searchDeployments as _searchDeployments, 
     searchReviews as _searchReviews,
+    getDeployment,
     getLicense 
 } from "../apis"
 import { getShortRef } from "../libs"
@@ -157,6 +159,27 @@ export const notifyDeploymentEvent = createAsyncThunk<void, Deployment, { state:
     }
 )
 
+export const notifyDeploymentStatusEvent = createAsyncThunk<void, DeploymentStatus, { state: { main: MainState } }>(
+    "main/notifyDeploymentStatusEvent",
+    async (deploymentStatus, {rejectWithValue}) => {
+        if (deploymentStatus.edges === undefined) {
+            return rejectWithValue(new Error("Edges is not included."))
+        }
+
+        const { repo, deployment } = deploymentStatus.edges
+        if (repo === undefined || deployment === undefined) {
+            return rejectWithValue(new Error("Repo or Deployment is not included in the edges."))
+        }
+
+        notify(`${repo.namespace}/${repo.name} #${deployment.number}`, {
+            icon: "/logo192.png",
+            body: `${deploymentStatus.status} - ${deploymentStatus.description}`,
+            tag: String(deployment.id),
+            
+        })
+    }
+)
+
 /**
  * The browser notifies the requester when the review is responded to, 
  * but it should notify the reviewer when the review is requested.
@@ -183,6 +206,22 @@ export const notifyReviewmentEvent = createAsyncThunk<void, Review, { state: { m
 )
 
 
+export const handleDeploymentStatusEvent = createAsyncThunk<Deployment, DeploymentStatus, { state: { main: MainState } }>(
+    "main/handleDeploymentStatusEvent",
+    async (deploymentStatus, { rejectWithValue }) => {
+        if (deploymentStatus.edges === undefined) {
+            return rejectWithValue(new Error("Edges is not included."))
+        }
+
+        const { repo, deployment } = deploymentStatus.edges
+        if (repo === undefined || deployment === undefined) {
+            return rejectWithValue(new Error("Repo or Deployment is not included in the edges."))
+        }
+
+        return await getDeployment(repo.namespace, repo.name, deployment.number)
+    }
+)
+
 export const mainSlice = createSlice({
     name: "main",
     initialState,
@@ -240,5 +279,21 @@ export const mainSlice = createSlice({
             .addCase(fetchLicense.fulfilled, (state, action) => {
                 state.license = action.payload
             })
+
+            .addCase(handleDeploymentStatusEvent.fulfilled, (state, { payload: deployment }) => {
+                if (deployment.status === DeploymentStatusEnum.Created) {
+                    state.deployments.unshift(deployment)
+                    return
+                }
+
+                state.deployments = state.deployments.map((item) => {
+                    return (item.id === deployment.id)? deployment : item
+                })
+
+                state.deployments = state.deployments.filter((item) => {
+                    return !(item.status === DeploymentStatusEnum.Success 
+                        || item.status === DeploymentStatusEnum.Failure)
+                })
+            })
     }
 })

ui/src/views/deployment/index.tsx

@@ -14,6 +14,7 @@ import {
     fetchUserReview,
     approve,
     reject,
+    handleDeploymentStatusEvent
 } from "../../redux/deployment"
 import { 
     Deployment, 
@@ -24,6 +25,7 @@ import {
 } from "../../models"
 import { 
     subscribeDeploymentEvents, 
+    subscribeDeploymentStatusEvents,
     subscribeReviewEvents
 } from "../../apis"
 
@@ -68,12 +70,17 @@ export default (): JSX.Element => {
             dispatch(slice.actions.handleDeploymentEvent(deployment))
         })
 
+        const deploymentStatusEvent = subscribeDeploymentStatusEvents((deploymentStatus) => {
+            dispatch(handleDeploymentStatusEvent(deploymentStatus))
+        })
+
         const reviewEvent = subscribeReviewEvents((review) => {
             dispatch(slice.actions.handleReviewEvent(review))
         })
 
         return () => {
             deploymentEvent.close()
+            deploymentStatusEvent.close()
             reviewEvent.close()
         }
         // eslint-disable-next-line 

ui/src/views/main/index.tsx

@@ -5,14 +5,20 @@ import { Helmet } from "react-helmet"
 import moment from "moment"
 
 import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { subscribeDeploymentEvents, subscribeReviewEvents } from "../../apis"
+import { 
+    subscribeDeploymentEvents, 
+    subscribeDeploymentStatusEvents,
+    subscribeReviewEvents 
+} from "../../apis"
 import { 
     init, 
     searchDeployments, 
     searchReviews, 
     fetchLicense, 
     notifyDeploymentEvent, 
+    notifyDeploymentStatusEvent,
     notifyReviewmentEvent, 
+    handleDeploymentStatusEvent,
     mainSlice as slice 
 } from "../../redux/main"
 
@@ -45,13 +51,19 @@ export default (props: React.PropsWithChildren<any>): JSX.Element => {
             dispatch(notifyDeploymentEvent(deployment))
         })
 
+        const deploymentStatusEvents = subscribeDeploymentStatusEvents((deploymentStatus) => {
+            dispatch(handleDeploymentStatusEvent(deploymentStatus))
+            dispatch(notifyDeploymentStatusEvent(deploymentStatus))
+        })
+
         const reviewEvents = subscribeReviewEvents((review) => {
             dispatch(slice.actions.handleReviewEvent(review))
             dispatch(notifyReviewmentEvent(review))
         })
 
         return () => {
             deploymentEvents.close()
+            deploymentStatusEvents.close()
             reviewEvents.close()
         }
     }, [dispatch])