Create Activities page to display all deployments in one place (#382)

* Add the activities view

* Add the `production_only` param to the query

Author: Noah Lee

openapi/v1.yaml

@@ -1344,6 +1344,12 @@ paths:
           schema:
             type: boolean
             description: Own deployments.
+        - in: query
+          name: production_only
+          required: false
+          schema:
+            type: boolean
+            description: Return the deployments for the production environment.
         - in: query
           name: from
           required: false

ui/src/App.tsx

@@ -10,6 +10,7 @@ import Repo from "./views/repo"
 import Deployment from "./views/deployment"
 import Settings from "./views/settings"
 import Members from "./views/members"
+import Activities from "./views/activities"
 
 function App(): JSX.Element {
     return (
@@ -31,6 +32,9 @@ function App(): JSX.Element {
                     <Route path="/members">
                         <Members />
                     </Route>
+                    <Route path="/activities">
+                        <Activities />
+                    </Route>
                     <Route path="/">
                         <Home />
                     </Route>

ui/src/apis/deployment.ts

@@ -150,16 +150,16 @@ function mapDeploymentStatusToString(status: DeploymentStatusEnum): string {
 
 }
 
-export const searchDeployments = async (statuses: DeploymentStatusEnum[], owned: boolean, from?: Date, to?: Date, page = 1, perPage = 30): Promise<Deployment[]> => {
+export const searchDeployments = async (statuses: DeploymentStatusEnum[], owned: boolean, productionOnly: boolean, from?: Date, to?: Date, page = 1, perPage = 30): Promise<Deployment[]> => {
     const ss: string[] = []
     statuses.forEach((status) => {
         ss.push(mapDeploymentStatusToString(status))
     })
 
     const fromParam = (from)? `from=${from.toISOString()}` : ""
-    const toParam = (to)? `&to=to.toISOString()` : ""
+    const toParam = (to)? `&to=${to.toISOString()}` : ""
 
-    const deployments: Deployment[] = await _fetch(`${instance}/api/v1/search/deployments?statuses=${ss.join(",")}&owned=${owned}&${fromParam}&${toParam}&page=${page}&per_page=${perPage}`, {
+    const deployments: Deployment[] = await _fetch(`${instance}/api/v1/search/deployments?statuses=${ss.join(",")}&owned=${owned}&production_only=${productionOnly}&${fromParam}&${toParam}&page=${page}&per_page=${perPage}`, {
         headers,
         credentials: 'same-origin',
     })

ui/src/components/DeploymentRefCode.tsx

@@ -11,9 +11,9 @@ interface DeploymentRefCodeProps {
 export default function DeploymentRefCode(props: DeploymentRefCodeProps): JSX.Element {
     let ref: string
     if (props.deployment.type === DeploymentType.Commit) {
-        ref = props.deployment.ref.substr(0, 7)
+        ref = props.deployment.ref.substring(0, 7)
     } else if (props.deployment.type === DeploymentType.Branch && props.deployment.sha !== "") {
-        ref = `${props.deployment.ref}(${props.deployment.sha.substr(0, 7)})`
+        ref = `${props.deployment.ref}(${props.deployment.sha.substring(0, 7)})`
     } else {
         ref = props.deployment.ref
     }

ui/src/components/RecentActivities.tsx

@@ -29,6 +29,7 @@ interface DeploymentListProps {
     deployments: Deployment[]
 }
 
+// TODO: Move the component into the main view.
 function DeploymentList(props: DeploymentListProps): JSX.Element {
     return <List
         dataSource={props.deployments}

ui/src/components/partials/deploymentStatus.tsx

@@ -0,0 +1,23 @@
+import { DeploymentStatusEnum } from "../../models"
+
+// https://ant.design/components/timeline/#Timeline.Item
+export const getStatusColor = (status: DeploymentStatusEnum): string => {
+    switch (status) {
+        case DeploymentStatusEnum.Waiting:
+            return "gray"
+        case DeploymentStatusEnum.Created:
+            return "purple"
+        case DeploymentStatusEnum.Queued:
+            return "purple"
+        case DeploymentStatusEnum.Running:
+            return "purple"
+        case DeploymentStatusEnum.Success:
+            return "green"
+        case DeploymentStatusEnum.Failure:
+            return "red"
+        case DeploymentStatusEnum.Canceled:
+            return "gray"
+        default:
+            return "gray"
+    }
+}

ui/src/components/partials/index.tsx

@@ -0,0 +1,3 @@
+import { getStatusColor } from "./deploymentStatus"
+
+export { getStatusColor }

ui/src/redux/activities.tsx

@@ -0,0 +1,66 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
+
+import { 
+    searchDeployments as _searchDeployments, 
+} from "../apis"
+import { Deployment, } from "../models"
+
+export const perPage = 30
+
+interface ActivitiesState {
+    loading: boolean
+    deployments: Deployment[]
+    page: number
+}
+
+const initialState: ActivitiesState = {
+    loading: false,
+    deployments: [],
+    page: 1,
+}
+
+export const searchDeployments = createAsyncThunk<
+    Deployment[], {
+        start?: Date,
+        end?: Date,
+        productionOnly: boolean,
+    }, {
+    state: { activities: ActivitiesState } 
+}>(
+    "activities/searchDeployments",
+    async ({start, end, productionOnly}, { getState, rejectWithValue }) => {
+        const {page} = getState().activities
+        try {
+            return await _searchDeployments([], false, productionOnly, start, end, page, perPage)
+        } catch (e) {
+            return rejectWithValue(e)
+        }
+    }
+)
+
+export const activitiesSlice = createSlice({
+    name: "activities",
+    initialState,
+    reducers: {
+        increasePage: (state) => {
+            state.page = state.page + 1
+        },
+        decreasePage: (state) => {
+            state.page = state.page - 1
+        },
+    },
+    extraReducers: builder => {
+        builder
+            .addCase(searchDeployments.pending, (state) => {
+                state.loading = true
+                state.deployments = []
+            })
+            .addCase(searchDeployments.fulfilled, (state, action) => {
+                state.loading = false
+                state.deployments = action.payload
+            })
+            .addCase(searchDeployments.rejected, (state) => {
+                state.loading = false
+            })
+    }
+})

ui/src/redux/main.ts

@@ -88,7 +88,7 @@ export const searchDeployments = createAsyncThunk<Deployment[], void, { state: {
                 DeploymentStatusEnum.Created, 
                 DeploymentStatusEnum.Queued,
                 DeploymentStatusEnum.Running,
-            ], false)
+            ], false, false)
             return deployments
         } catch (e) {
             return rejectWithValue(e)

ui/src/redux/store.ts

@@ -11,6 +11,7 @@ import { repoSettingsSlice } from "./repoSettings"
 import { settingsSlice } from "./settings"
 import { deploymentSlice } from "./deployment"
 import { membersSlice } from "./members"
+import { activitiesSlice } from './activities'
 
 export const store =  configureStore({
   reducer: {
@@ -25,6 +26,7 @@ export const store =  configureStore({
     settings: settingsSlice.reducer,
     deployment: deploymentSlice.reducer,
     members: membersSlice.reducer,
+    activities: activitiesSlice.reducer,
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware({
     serializableCheck: false