feat: change the interface of event stream (#107)

* Change the interface of the event stream

* Fix handling events with renewed interface

Author: Noah Hanjun Lee

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

@@ -85,16 +85,9 @@ L:
 			})
 			w.Flush()
 		case e := <-events:
-			var data interface{}
-			if e.Kind == event.KindDeployment {
-				data = e.Edges.Deployment
-			} else if e.Kind == event.KindApproval {
-				data = e.Edges.Approval
-			}
-
 			c.Render(-1, sse.Event{
-				Event: e.Kind.String(),
-				Data:  data,
+				Event: "event",
+				Data:  e,
 			})
 			w.Flush()
 			s.log.Debug("server sent event.", zap.Int("event_id", e.ID), zap.String("debug_id", debugID))

internal/server/slack/notification.go

@@ -88,7 +88,7 @@ func (s *Slack) notifyApprovalEvent(ctx context.Context, e *ent.Event) {
 		return
 	}
 
-	d := e.Edges.Deployment
+	d := a.Edges.Deployment
 	if err := d.CheckEagerLoading(); err != nil {
 		s.log.Error("The eager loading of deployment has failed.")
 		return

openapi.yml

@@ -6,20 +6,6 @@ servers:
   - url: http://localhost/api/v1
   - url: https://gitploy.jp.ngrok.io/api/v1
 paths:
-  /sync:
-    post:
-      tags:
-        - Sync
-      summary: Synchronize with SCM.
-      responses:
-        '200':
-          description: OK
-        '401': 
-          $ref: '#/components/responses/401Unauthorized'
-        '402':
-          $ref: '#/components/responses/402PaymentRequired'
-        '500':
-          $ref: '#/components/responses/500InternalError'
   /license:
     get:
       tags:
@@ -1244,6 +1230,77 @@ paths:
           $ref: '#/components/responses/402PaymentRequired'
         '500':
           $ref: '#/components/responses/500InternalError'
+  /stream/events:
+    get:
+      tags:
+        - Event
+      summary: Subscribes streaming event
+      responses:
+        '200':
+          description: Returns events for deployments and approvals
+          content:
+            text/event-stream:
+              schema:
+                type: array
+                format: chunked
+                items:
+                  type: object
+                  format: text 
+                  required:
+                    - id 
+                    - event 
+                    - data
+                  properties: 
+                    id:
+                      type: integer
+                    event:
+                      type: string
+                    data:
+                      type: object 
+                      format: json 
+                      required:
+                        - id
+                        - kind
+                        - type
+                        - created_at
+                        - edges
+                      properties: 
+                        id:
+                          type: integer
+                        kind:
+                          type: string
+                          enum:
+                            - deployment
+                            - approval
+                        type:
+                          type: string
+                          enum:
+                            - created
+                            - updated
+                            - removed
+                        created_at:
+                          type: string
+                        edges:
+                          type: object
+                          properties:
+                            deployment:
+                              $ref: '#/components/schemas/Deployment'
+                            approval:
+                              $ref: '#/components/schemas/Approval'
+  /sync:
+    post:
+      tags:
+        - Sync
+      summary: Synchronize with SCM.
+      responses:
+        '200':
+          description: OK
+        '401': 
+          $ref: '#/components/responses/401Unauthorized'
+        '402':
+          $ref: '#/components/responses/402PaymentRequired'
+        '500':
+          $ref: '#/components/responses/500InternalError'
 security:
   - BearerAuth: []
   - OAuth2:

ui/src/apis/approval.ts

@@ -14,7 +14,7 @@ import {
     HttpUnprocessableEntityError
  } from '../models'
 
-interface ApprovalData {
+export interface ApprovalData {
     id: number,
     status: string
     created_at: string

ui/src/apis/events.ts

@@ -1,34 +1,79 @@
 import { instance } from './setting'
 
-import { mapDataToDeployment } from "./deployment"
-import { mapDataToApproval } from "./approval"
-import { Deployment, Approval } from "../models"
+import { DeploymentData, mapDataToDeployment } from "./deployment"
+import { ApprovalData, mapDataToApproval } from "./approval"
+import { Deployment, Approval, Event, EventKindEnum, EventTypeEnum } from "../models"
 
-export const subscribeDeploymentEvent = (cb: (e: Deployment) => void): EventSource => {
-    const eventName = "deployment"
+interface EventData {
+    id: number
+    kind: string
+    type: string
+    deleted_entity_id: number
+    edges: {
+        deployment?: DeploymentData
+        approval?: ApprovalData
+    }
+}
 
-    const sse = new EventSource(`${instance}/api/v1/stream/events`, {
-        withCredentials: true,
-    })
+const mapDataToEvent = (data: EventData): Event => {
+    let kind: EventKindEnum
+    let type: EventTypeEnum
+    let deployment: Deployment | undefined
+    let approval: Approval | undefined
 
-    sse.addEventListener(eventName, (e: any) => {
-        const data = JSON.parse(e.data)
-        cb(mapDataToDeployment(data))
-    })
+    switch (data.kind) {
+        case "deployment":
+            kind = EventKindEnum.Deployment
+            break
+        case "approval":
+            kind = EventKindEnum.Approval
+            break
+        default:
+            kind = EventKindEnum.Deployment
+    }
 
-    return sse
-}
+    switch (data.type) {
+        case "created":
+            type = EventTypeEnum.Created
+            break
+        case "updated":
+            type = EventTypeEnum.Updated
+            break
+        case "deleted":
+            type = EventTypeEnum.Deleted
+            break
+        default:
+            type = EventTypeEnum.Created
+    }
+
+    if (data.edges.deployment) {
+        deployment = mapDataToDeployment(data.edges.deployment)
+    }
 
-export const subscribeApprovalEvent = (cb: (e: Approval) => void): EventSource => {
-    const eventName = "approval"
+    if (data.edges.approval) {
+        approval = mapDataToApproval(data.edges.approval)
+    }
 
+    return {
+        id: data.id,
+        kind,
+        type,
+        deletedEntityId: data.deleted_entity_id,
+        deployment,
+        approval
+    } 
+}
+
+export const subscribeEvents = (cb: (event: Event) => void): EventSource => {
     const sse = new EventSource(`${instance}/api/v1/stream/events`, {
         withCredentials: true,
     })
 
-    sse.addEventListener(eventName, (e: any) => {
+    sse.addEventListener("event", (e: any) => {
         const data = JSON.parse(e.data)
-        cb(mapDataToApproval(data))
+        const event = mapDataToEvent(data)
+
+        cb(event)
     })
 
     return sse

ui/src/apis/index.ts

@@ -34,7 +34,7 @@ import {
     setApprovalDeclined 
 } from "./approval"
 import { getLicense  } from "./license"
-import { subscribeDeploymentEvent, subscribeApprovalEvent } from "./events"
+import { subscribeEvents } from "./events"
 
 export {
     sync,
@@ -75,6 +75,5 @@ export {
     setApprovalApproved,
     setApprovalDeclined,
     getLicense,
-    subscribeDeploymentEvent,
-    subscribeApprovalEvent
+    subscribeEvents
 }

ui/src/models/Event.ts

@@ -0,0 +1,22 @@
+import Deployment from "./Deployment"
+import Approval from "./Approval"
+
+export default interface Event {
+    id: number
+    kind: EventKindEnum
+    type: EventTypeEnum
+    deployment?: Deployment
+    approval?: Approval
+    deletedEntityId: number 
+}
+
+export enum EventKindEnum {
+    Deployment = "deployment",
+    Approval = "approval"
+}
+
+export enum EventTypeEnum {
+    Created = "created",
+    Updated = "updated",
+    Deleted = "deleted"
+}

ui/src/models/index.ts

@@ -12,6 +12,7 @@ import Tag from "./Tag"
 import User, { ChatUser, RateLimit } from "./User"
 import Approval, { ApprovalStatus } from "./Approval"
 import License from "./License"
+import Event, {EventKindEnum, EventTypeEnum} from "./Event"
 import { 
     HttpRequestError, 
     HttpInternalServerError, 
@@ -40,6 +41,7 @@ export type {
     RateLimit,
     Approval,
     License,
+    Event
 }
 
 export {
@@ -55,4 +57,6 @@ export {
     StatusState,
     RequestStatus,
     ApprovalStatus,
+    EventKindEnum, 
+    EventTypeEnum
 }

ui/src/redux/deployment.tsx

@@ -7,6 +7,7 @@ import {
     Deployment, 
     Commit,
     Approval, 
+    Event,
     RequestStatus, 
     HttpNotFoundError, 
     HttpForbiddenError,
@@ -252,14 +253,14 @@ export const deploymentSlice = createSlice({
         setNumber: (state, action: PayloadAction<number>) => {
             state.number = action.payload
         },
-        handleDeploymentEvent: (state, action: PayloadAction<Deployment>) => {
+        handleDeploymentEvent: (state, action: PayloadAction<Event>) => {
             const event = action.payload
 
-            if (event.id !== state.deployment?.id) {
+            if (event.deployment?.id !== state.deployment?.id) {
                 return
             }
 
-            state.deployment = event
+            state.deployment = event.deployment
         }
     },
     extraReducers: builder => {

ui/src/redux/home.ts

@@ -1,6 +1,11 @@
 import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
 
-import { Repo, RequestStatus, Deployment } from '../models'
+import { 
+    Repo, 
+    RequestStatus, 
+    Event,
+    EventTypeEnum
+} from '../models'
 import * as apis from '../apis'
 
 export const perPage = 30
@@ -68,26 +73,25 @@ export const homeSlice = createSlice({
         decreasePage: (state) => {
             state.page = state.page - 1
         },
-        handleDeploymentEvent: (state, action: PayloadAction<Deployment>) => {
+        handleDeploymentEvent: (state, action: PayloadAction<Event>) => {
             const event = action.payload
 
             state.repos = state.repos.map((repo) => {
-                if (event.repo?.id !== repo.id) {
+                if (event.deployment?.repo?.id !== repo.id) {
                     return repo
                 }
 
                 if (!repo.deployments) {
                     repo.deployments = []
                 }
 
-                // Unshift a new deployment when the event is create.
-                if (event.createdAt.getTime() === event.updatedAt.getTime()) {
-                    repo.deployments.unshift(event)
+                if (event.type === EventTypeEnum.Created) {
+                    repo.deployments.unshift(event.deployment)
                     return repo
                 }
 
                 repo.deployments = repo.deployments.map((deployment) => {
-                    return (deployment.id === event.id)? event : deployment
+                    return (event.deployment?.id === deployment.id )? event.deployment : deployment
                 })
                 return repo
             })