feat: subscribe deployment events in UI (#93)

Add to subscribe deployment events in Deployment page and Repo page.

Author: Noah Hanjun Lee

internal/pkg/store/event.go

@@ -34,7 +34,8 @@ func (s *Store) ListEventsGreaterThanTime(ctx context.Context, t time.Time) ([]*
 		WithDeployment(func(dq *ent.DeploymentQuery) {
 			dq.
 				WithUser().
-				WithRepo()
+				WithRepo().
+				WithDeploymentStatuses()
 		}).
 		Limit(limit).
 		All(ctx)

internal/server/api/v1/stream/stream.go

@@ -30,14 +30,16 @@ func NewStream(i Interactor) *Stream {
 	}
 }
 
+// GetEvents streams a deployment or a approval.
+// Subscriber specify the event type, 'created' or 'updated', by comparing
+// the created time and the updated time.
 func (s *Stream) GetEvents(c *gin.Context) {
 	ctx := c.Request.Context()
 
 	v, _ := c.Get(gb.KeyUser)
 	u, _ := v.(*ent.User)
 
 	debugID := randstr()
-	s.log.Debug("create a stream.", zap.String("debug_id", debugID))
 
 	events := make(chan *ent.Event, 10)
 
@@ -73,10 +75,8 @@ L:
 	for {
 		select {
 		case <-w.CloseNotify():
-			s.log.Debug("stream canceled.", zap.String("debug_id", debugID))
 			break L
 		case <-time.After(time.Hour):
-			s.log.Debug("stream canceled.", zap.String("debug_id", debugID))
 			break L
 		case <-time.After(time.Second * 30):
 			c.Render(-1, sse.Event{

ui/src/redux/deployment.tsx

@@ -246,6 +246,15 @@ export const deploymentSlice = createSlice({
     reducers: {
         setNumber: (state, action: PayloadAction<number>) => {
             state.number = action.payload
+        },
+        handleDeploymentEvent: (state, action: PayloadAction<Deployment>) => {
+            const event = action.payload
+
+            if (event.id !== state.deployment?.id) {
+                return
+            }
+
+            state.deployment = event
         }
     },
     extraReducers: builder => {

ui/src/redux/home.ts

@@ -77,22 +77,17 @@ export const homeSlice = createSlice({
                 }
 
                 if (!repo.deployments) {
-                    return repo
+                    repo.deployments = []
                 }
 
                 // Unshift a new deployment when the event is create.
-                if (repo.deployments.length >= 1 && event.id > repo.deployments[0].id) {
+                if (event.createdAt.getTime() === event.updatedAt.getTime()) {
                     repo.deployments.unshift(event)
                     return repo
                 }
 
                 repo.deployments = repo.deployments.map((deployment) => {
-                    // Update the deployment if the deployment event is matched.
-                    if (deployment.id === event.id) {
-                        return event
-                    }
-
-                    return deployment
+                    return (deployment.id === event.id)? event : deployment
                 })
                 return repo
             })

ui/src/redux/repoHome.ts

@@ -73,6 +73,27 @@ export const repoHomeSlice = createSlice({
         decreasePage: (state) => {
             state.page = state.page - 1
         },
+        handleDeploymentEvent: (state, action: PayloadAction<Deployment>) => {
+            const event = action.payload
+
+            if (event.repo?.id !== state.repo?.id) {
+                return
+            }
+
+            if (!(state.env === "" || event.env === state.env)) {
+                return
+            }
+
+            // Unshift a new deployment when the event is create.
+            if (event.createdAt.getTime() === event.updatedAt.getTime()) {
+                state.deployments.unshift(event)
+                return
+            }
+
+            state.deployments = state.deployments.map((deployment) => {
+                return (deployment.id === event.id)? event : deployment
+            })
+        },
     },
     extraReducers: builder => {
         builder

ui/src/views/Deployment.tsx

@@ -6,7 +6,7 @@ import { useParams } from "react-router-dom"
 import { useAppSelector, useAppDispatch } from "../redux/hooks"
 import { 
     init, 
-    deploymentSlice, 
+    deploymentSlice as slice, 
     fetchDeployment, 
     fetchDeploymentChanges,
     fetchApprovals, 
@@ -26,15 +26,14 @@ import {
     ApprovalStatus,
     RequestStatus
 } from "../models"
+import { subscribeDeploymentEvent } from "../apis"
 
 import Main from "./Main"
 import ApproversSelector from "../components/ApproversSelector"
 import ApprovalDropdown from "../components/ApprovalDropdown"
 import Spin from "../components/Spin"
 import DeployConfirm from "../components/DeployConfirm"
 
-const { actions } = deploymentSlice
-
 interface Params {
     namespace: string
     name: string
@@ -57,13 +56,21 @@ export default function DeploymentView(): JSX.Element {
     useEffect(() => {
         const f = async () => {
             await dispatch(init({namespace, name}))
-            await dispatch(actions.setNumber(parseInt(number, 10)))
+            await dispatch(slice.actions.setNumber(parseInt(number, 10)))
             await dispatch(fetchDeployment())
             await dispatch(fetchDeploymentChanges())
             await dispatch(fetchApprovals())
             await dispatch(fetchMyApproval())
         }
         f()
+
+        const de = subscribeDeploymentEvent((d) => {
+            dispatch(slice.actions.handleDeploymentEvent(d))
+        })
+
+        return () => {
+            de.close()
+        }
         // eslint-disable-next-line 
     }, [dispatch])
 

ui/src/views/RepoHome.tsx

@@ -4,13 +4,13 @@ import { shallowEqual } from "react-redux";
 import { PageHeader, Select } from 'antd'
 
 import { useAppSelector, useAppDispatch } from '../redux/hooks'
-import { repoHomeSlice, init, fetchEnvs, fetchDeployments, perPage } from '../redux/repoHome'
+import { repoHomeSlice as slice, init, fetchEnvs, fetchDeployments, perPage } from '../redux/repoHome'
+import { subscribeDeploymentEvent } from "../apis"
 
 import ActivityLogs from '../components/ActivityLogs'
 import Spin from '../components/Spin'
 import Pagination from '../components/Pagination'
 
-const { actions } = repoHomeSlice
 const { Option } = Select
 
 interface Params {
@@ -35,23 +35,31 @@ export default function RepoHome(): JSX.Element {
             await dispatch(fetchDeployments())
         }
         f()
+
+        const de = subscribeDeploymentEvent((d) => {
+            dispatch(slice.actions.handleDeploymentEvent(d))
+        })
+
+        return () => {
+            de.close()
+        }
         // eslint-disable-next-line
     }, [dispatch])
 
     const isLast = deployments.length < perPage
 
     const onChangeEnv = (env: string) => {
-        dispatch(actions.setEnv(env))
+        dispatch(slice.actions.setEnv(env))
         dispatch(fetchDeployments())
     }
 
     const onClickPrev = () => {
-        dispatch(actions.decreasePage())
+        dispatch(slice.actions.decreasePage())
         dispatch(fetchDeployments())
     }
 
     const onClickNext = () => {
-        dispatch(actions.increasePage())
+        dispatch(slice.actions.increasePage())
         dispatch(fetchDeployments())
     }