From 16ee74037f1b6056977ce49a8d141ec7237455b8 Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 13 Mar 2022 14:39:44 +0900 Subject: [PATCH 1/8] Add the activities view --- ui/src/App.tsx | 4 ++++ ui/src/components/SearchActivities.tsx | 32 ++++++++++++++++++++++++++ ui/src/views/Activities.tsx | 30 ++++++++++++++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 ui/src/components/SearchActivities.tsx create mode 100644 ui/src/views/Activities.tsx diff --git a/ui/src/App.tsx b/ui/src/App.tsx index aa9d7a23..492cf48d 100644 --- a/ui/src/App.tsx +++ b/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 { + + + diff --git a/ui/src/components/SearchActivities.tsx b/ui/src/components/SearchActivities.tsx new file mode 100644 index 00000000..8c4fa509 --- /dev/null +++ b/ui/src/components/SearchActivities.tsx @@ -0,0 +1,32 @@ +import { Form, DatePicker, Button, Switch } from "antd" +import moment from "moment" + +interface SearchActivitiesProps { + onChangePeriod(start: moment.Moment, end: moment.Moment): void + onClickSearch(): void +} + +export default function SearchActivities(props: SearchActivitiesProps): JSX.Element { + return ( +
+ + props.onChangePeriod(moment(dateStrings[0]), moment(dateStrings[1])) } + /> + + + + + + + +
+ ) +} \ No newline at end of file diff --git a/ui/src/views/Activities.tsx b/ui/src/views/Activities.tsx new file mode 100644 index 00000000..eba01630 --- /dev/null +++ b/ui/src/views/Activities.tsx @@ -0,0 +1,30 @@ +import { Helmet } from "react-helmet" + +import Main from "./Main" +import SearchActivities from "../components/SearchActivities" +import ActivityLogs from "../components/ActivityLogs" +import Pagination from "../components/Pagination" + +export default function Activities(): JSX.Element { + return ( +
+ + Activities + +

Activities

+
+

Search

+ console.log("period")} + onClickSearch={() => console.log("search")} + /> +
+
+ +
+
+ {console.log('')}} onClickNext={() => {console.log('')}} /> +
+
+ ) +} \ No newline at end of file From 5530ccf42d76949db27b75305b78fe0fb38de643 Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 13 Mar 2022 15:40:52 +0900 Subject: [PATCH 2/8] Add the state for the activities page --- ui/src/apis/deployment.ts | 2 +- ui/src/components/SearchActivities.tsx | 14 ++++-- ui/src/redux/activities.tsx | 67 ++++++++++++++++++++++++++ ui/src/redux/store.ts | 2 + ui/src/views/Activities.tsx | 54 +++++++++++++++++++-- 5 files changed, 129 insertions(+), 10 deletions(-) create mode 100644 ui/src/redux/activities.tsx diff --git a/ui/src/apis/deployment.ts b/ui/src/apis/deployment.ts index 58da41ea..395e7468 100644 --- a/ui/src/apis/deployment.ts +++ b/ui/src/apis/deployment.ts @@ -157,7 +157,7 @@ export const searchDeployments = async (statuses: DeploymentStatusEnum[], owned: }) 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}`, { headers, diff --git a/ui/src/components/SearchActivities.tsx b/ui/src/components/SearchActivities.tsx index 8c4fa509..3ec61324 100644 --- a/ui/src/components/SearchActivities.tsx +++ b/ui/src/components/SearchActivities.tsx @@ -2,7 +2,7 @@ import { Form, DatePicker, Button, Switch } from "antd" import moment from "moment" interface SearchActivitiesProps { - onChangePeriod(start: moment.Moment, end: moment.Moment): void + onChangePeriod(start: Date, end: Date): void onClickSearch(): void } @@ -11,21 +11,27 @@ export default function SearchActivities(props: SearchActivitiesProps): JSX.Elem
- + props.onChangePeriod(moment(dateStrings[0]), moment(dateStrings[1])) } + onChange={(_, dateStrings) => props.onChangePeriod(new Date(dateStrings[0]), new Date(dateStrings[1])) } /> - + ) diff --git a/ui/src/redux/activities.tsx b/ui/src/redux/activities.tsx new file mode 100644 index 00000000..dc12ee54 --- /dev/null +++ b/ui/src/redux/activities.tsx @@ -0,0 +1,67 @@ +import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit" + +import { + searchDeployments as _searchDeployments, +} from "../apis" +import { Deployment, } from "../models" + +export const perPage = 30 + +interface ActivitiesState { + start?: Date + end?: Date + loading: boolean + deployments: Deployment[] + page: number +} + +const initialState: ActivitiesState = { + loading: false, + deployments: [], + page: 1, +} + +export const searchDeployments = createAsyncThunk( + "activities/searchDeployments", + async (_, { getState, rejectWithValue }) => { + const {start, end, page} = getState().activities + try { + return await _searchDeployments([], false, start, end, page, perPage) + } catch (e) { + return rejectWithValue(e) + } + } +) + +export const activitiesSlice = createSlice({ + name: "activities", + initialState, + reducers: { + setStart: (state, action: PayloadAction) => { + state.start = action.payload + }, + setEnd: (state, action: PayloadAction) => { + state.end = action.payload + }, + 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 + }) + } +}) diff --git a/ui/src/redux/store.ts b/ui/src/redux/store.ts index 316eacdf..4dcc745d 100644 --- a/ui/src/redux/store.ts +++ b/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 diff --git a/ui/src/views/Activities.tsx b/ui/src/views/Activities.tsx index eba01630..927d2ca7 100644 --- a/ui/src/views/Activities.tsx +++ b/ui/src/views/Activities.tsx @@ -1,11 +1,43 @@ +import { useEffect } from "react" +import { shallowEqual } from 'react-redux' import { Helmet } from "react-helmet" +import { useAppSelector, useAppDispatch } from "../redux/hooks" +import { perPage, activitiesSlice, searchDeployments } from "../redux/activities" + import Main from "./Main" import SearchActivities from "../components/SearchActivities" import ActivityLogs from "../components/ActivityLogs" import Pagination from "../components/Pagination" +import Spin from '../components/Spin' + +const { actions } = activitiesSlice export default function Activities(): JSX.Element { + const { + loading, + deployments, + page, + } = useAppSelector(state => state.activities, shallowEqual) + + const dispatch = useAppDispatch() + + useEffect(() => { + dispatch(searchDeployments()) + // eslint-disable-next-line + }, [dispatch]) + + const onChangePeriod = (start: Date, end: Date) => { + dispatch(actions.setStart(start)) + dispatch(actions.setEnd(end)) + } + + const onClickSearch = () => dispatch(searchDeployments()) + + const onClickPrev = () => dispatch(actions.decreasePage()) + + const onClickNext = () => dispatch(actions.increasePage()) + return (
@@ -15,15 +47,27 @@ export default function Activities(): JSX.Element {

Search

console.log("period")} - onClickSearch={() => console.log("search")} + onChangePeriod={onChangePeriod} + onClickSearch={onClickSearch} />
-
- +
+

History

+
+ {(loading)? +
+ +
+ : + } +
- {console.log('')}} onClickNext={() => {console.log('')}} /> +
) From eb81c8580dc74a6a39f0653724f39305be393ec6 Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 13 Mar 2022 15:59:41 +0900 Subject: [PATCH 3/8] Fix SearchActivities responsible --- ui/src/components/SearchActivities.tsx | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/ui/src/components/SearchActivities.tsx b/ui/src/components/SearchActivities.tsx index 3ec61324..e58a0e64 100644 --- a/ui/src/components/SearchActivities.tsx +++ b/ui/src/components/SearchActivities.tsx @@ -1,4 +1,4 @@ -import { Form, DatePicker, Button, Switch } from "antd" +import { Row, Col, Form, DatePicker, Button, Switch } from "antd" import moment from "moment" interface SearchActivitiesProps { @@ -7,10 +7,8 @@ interface SearchActivitiesProps { } export default function SearchActivities(props: SearchActivitiesProps): JSX.Element { - return ( -
+ const content = ( + <> -
+ + ) + return ( + + {/* Mobile view */} + +
+ {content} +
+ + {/* Laptop */} + +
+ {content} +
+ + ) } \ No newline at end of file From 5de7add9b47b90031d132addfa313538c94fbeac Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 13 Mar 2022 19:38:37 +0900 Subject: [PATCH 4/8] Add ActivityHistory --- ui/src/components/ActivityHistory.tsx | 40 +++++++++++++++++++ ui/src/components/DeploymentRefCode.tsx | 4 +- .../components/partials/deploymentStatus.tsx | 23 +++++++++++ ui/src/components/partials/index.tsx | 3 ++ ui/src/views/Activities.tsx | 4 +- ui/src/views/repoHome/ActivityLogs.tsx | 30 ++++---------- 6 files changed, 78 insertions(+), 26 deletions(-) create mode 100644 ui/src/components/ActivityHistory.tsx create mode 100644 ui/src/components/partials/deploymentStatus.tsx create mode 100644 ui/src/components/partials/index.tsx diff --git a/ui/src/components/ActivityHistory.tsx b/ui/src/components/ActivityHistory.tsx new file mode 100644 index 00000000..e129ea36 --- /dev/null +++ b/ui/src/components/ActivityHistory.tsx @@ -0,0 +1,40 @@ +import { Timeline, Typography } from 'antd' +import moment from "moment" + +import { Deployment } from "../models" +import DeploymentStatusBadge from "./DeploymentStatusBadge" +import UserAvatar from './UserAvatar' +import DeploymentRefCode from './DeploymentRefCode' +import { getStatusColor } from "./partials" + +const { Text } = Typography + +interface ActivityHistoryProps { + deployments: Deployment[] +} + +export default function ActivityHistory(props: ActivityHistoryProps): JSX.Element { + return ( + + {props.deployments.map((d, idx) => { + return ( + +

+ + {`${d.repo?.namespace} / ${d.repo?.name}`} +   + + #{d.number} + +

+

+ deployed   + to {d.env}  + on {moment(d.createdAt).format("LLL")} +

+ + ) + })} + + ) +} diff --git a/ui/src/components/DeploymentRefCode.tsx b/ui/src/components/DeploymentRefCode.tsx index 5c477384..ae76293a 100644 --- a/ui/src/components/DeploymentRefCode.tsx +++ b/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 } diff --git a/ui/src/components/partials/deploymentStatus.tsx b/ui/src/components/partials/deploymentStatus.tsx new file mode 100644 index 00000000..3f362e74 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/ui/src/components/partials/index.tsx b/ui/src/components/partials/index.tsx new file mode 100644 index 00000000..80d1de8f --- /dev/null +++ b/ui/src/components/partials/index.tsx @@ -0,0 +1,3 @@ +import { getStatusColor } from "./deploymentStatus" + +export { getStatusColor } \ No newline at end of file diff --git a/ui/src/views/Activities.tsx b/ui/src/views/Activities.tsx index 927d2ca7..5dcd07f3 100644 --- a/ui/src/views/Activities.tsx +++ b/ui/src/views/Activities.tsx @@ -7,7 +7,7 @@ import { perPage, activitiesSlice, searchDeployments } from "../redux/activities import Main from "./Main" import SearchActivities from "../components/SearchActivities" -import ActivityLogs from "../components/ActivityLogs" +import ActivityHistory from "../components/ActivityHistory" import Pagination from "../components/Pagination" import Spin from '../components/Spin' @@ -59,7 +59,7 @@ export default function Activities(): JSX.Element { : - } + }
diff --git a/ui/src/views/repoHome/ActivityLogs.tsx b/ui/src/views/repoHome/ActivityLogs.tsx index 196b0837..bb70c00f 100644 --- a/ui/src/views/repoHome/ActivityLogs.tsx +++ b/ui/src/views/repoHome/ActivityLogs.tsx @@ -2,10 +2,18 @@ import { Timeline, Typography } from 'antd' import { SyncOutlined } from '@ant-design/icons' import moment from "moment" +<<<<<<< HEAD:ui/src/views/repoHome/ActivityLogs.tsx import { Deployment, DeploymentStatusEnum } from "../../models" import DeploymentStatusBadge from "../../components/DeploymentStatusBadge" import UserAvatar from '../../components/UserAvatar' import DeploymentRefCode from '../../components/DeploymentRefCode' +======= +import { Deployment, DeploymentStatusEnum } from "../models" +import DeploymentStatusBadge from "./DeploymentStatusBadge" +import UserAvatar from './UserAvatar' +import DeploymentRefCode from './DeploymentRefCode' +import { getStatusColor } from "./partials" +>>>>>>> 6d4e825 (Add ActivityHistory):ui/src/components/ActivityLogs.tsx const { Text } = Typography @@ -37,25 +45,3 @@ export default function ActivityLogs({ deployments }: ActivityLogsProps): JSX.El ) } - -// https://ant.design/components/timeline/#Timeline.Item -const getStatusColor = (status: DeploymentStatusEnum) => { - 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" - } -} \ No newline at end of file From fcfe4a13d48391dc7a7742f75589d08ad65f364e Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 10 Apr 2022 15:14:07 +0900 Subject: [PATCH 5/8] Refactorying the `activities` view --- ui/src/App.tsx | 2 +- .../activities}/ActivityHistory.tsx | 12 ++-- .../activities}/SearchActivities.tsx | 2 +- .../{Activities.tsx => activities/index.tsx} | 58 +++++++++++++++---- 4 files changed, 54 insertions(+), 20 deletions(-) rename ui/src/{components => views/activities}/ActivityHistory.tsx (78%) rename ui/src/{components => views/activities}/SearchActivities.tsx (97%) rename ui/src/views/{Activities.tsx => activities/index.tsx} (56%) diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 492cf48d..b04d7208 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -10,7 +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" +import Activities from "./views/activities" function App(): JSX.Element { return ( diff --git a/ui/src/components/ActivityHistory.tsx b/ui/src/views/activities/ActivityHistory.tsx similarity index 78% rename from ui/src/components/ActivityHistory.tsx rename to ui/src/views/activities/ActivityHistory.tsx index e129ea36..96f545c7 100644 --- a/ui/src/components/ActivityHistory.tsx +++ b/ui/src/views/activities/ActivityHistory.tsx @@ -1,15 +1,15 @@ import { Timeline, Typography } from 'antd' import moment from "moment" -import { Deployment } from "../models" -import DeploymentStatusBadge from "./DeploymentStatusBadge" -import UserAvatar from './UserAvatar' -import DeploymentRefCode from './DeploymentRefCode' -import { getStatusColor } from "./partials" +import { Deployment } from "../../models" +import DeploymentStatusBadge from "../../components/DeploymentStatusBadge" +import UserAvatar from '../../components/UserAvatar' +import DeploymentRefCode from '../../components/DeploymentRefCode' +import { getStatusColor } from "../../components/partials" const { Text } = Typography -interface ActivityHistoryProps { +export interface ActivityHistoryProps { deployments: Deployment[] } diff --git a/ui/src/components/SearchActivities.tsx b/ui/src/views/activities/SearchActivities.tsx similarity index 97% rename from ui/src/components/SearchActivities.tsx rename to ui/src/views/activities/SearchActivities.tsx index e58a0e64..cbd04229 100644 --- a/ui/src/components/SearchActivities.tsx +++ b/ui/src/views/activities/SearchActivities.tsx @@ -1,7 +1,7 @@ import { Row, Col, Form, DatePicker, Button, Switch } from "antd" import moment from "moment" -interface SearchActivitiesProps { +export interface SearchActivitiesProps { onChangePeriod(start: Date, end: Date): void onClickSearch(): void } diff --git a/ui/src/views/Activities.tsx b/ui/src/views/activities/index.tsx similarity index 56% rename from ui/src/views/Activities.tsx rename to ui/src/views/activities/index.tsx index 5dcd07f3..d4b0185d 100644 --- a/ui/src/views/Activities.tsx +++ b/ui/src/views/activities/index.tsx @@ -2,18 +2,19 @@ import { useEffect } from "react" import { shallowEqual } from 'react-redux' import { Helmet } from "react-helmet" -import { useAppSelector, useAppDispatch } from "../redux/hooks" -import { perPage, activitiesSlice, searchDeployments } from "../redux/activities" +import { useAppSelector, useAppDispatch } from "../../redux/hooks" +import { perPage, activitiesSlice, searchDeployments } from "../../redux/activities" -import Main from "./Main" -import SearchActivities from "../components/SearchActivities" -import ActivityHistory from "../components/ActivityHistory" -import Pagination from "../components/Pagination" -import Spin from '../components/Spin' +import Main from "../main" +import SearchActivities, { SearchActivitiesProps } from "./SearchActivities" +import ActivityHistory, { ActivityHistoryProps } from "./ActivityHistory" +import Pagination, { PaginationProps } from "../../components/Pagination" +import Spin from "../../components/Spin" +import { deploy } from "../../redux/repoDeploy" const { actions } = activitiesSlice -export default function Activities(): JSX.Element { +export default ():JSX.Element => { const { loading, deployments, @@ -40,6 +41,39 @@ export default function Activities(): JSX.Element { return (
+ +
+ ) +} + +interface ActivitiesProps extends SearchActivitiesProps, ActivityHistoryProps, PaginationProps { + loading: boolean +} + +function Activities({ + // Properties to search. + onChangePeriod, + onClickSearch, + // Properties for the deployment history. + loading, + deployments, + // Pagination for the pagination. + disabledPrev, + disabledNext, + onClickPrev, + onClickNext +}: ActivitiesProps): JSX.Element { + return ( + <> Activities @@ -64,11 +98,11 @@ export default function Activities(): JSX.Element {
- + ) -} \ No newline at end of file +} From fd4d949838e228db9a979b380c740984c379e17d Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 10 Apr 2022 16:21:12 +0900 Subject: [PATCH 6/8] Add the `production_only` param to the query --- openapi/v1.yaml | 6 ++++ ui/src/apis/deployment.ts | 4 +-- ui/src/redux/activities.tsx | 25 ++++++++--------- ui/src/redux/main.ts | 2 +- ui/src/views/activities/SearchActivities.tsx | 29 ++++++++++++++------ ui/src/views/activities/index.tsx | 24 ++++++++-------- 6 files changed, 54 insertions(+), 36 deletions(-) diff --git a/openapi/v1.yaml b/openapi/v1.yaml index 7ec240d9..5476a800 100644 --- a/openapi/v1.yaml +++ b/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 diff --git a/ui/src/apis/deployment.ts b/ui/src/apis/deployment.ts index 395e7468..c9e6b488 100644 --- a/ui/src/apis/deployment.ts +++ b/ui/src/apis/deployment.ts @@ -150,7 +150,7 @@ function mapDeploymentStatusToString(status: DeploymentStatusEnum): string { } -export const searchDeployments = async (statuses: DeploymentStatusEnum[], owned: boolean, from?: Date, to?: Date, page = 1, perPage = 30): Promise => { +export const searchDeployments = async (statuses: DeploymentStatusEnum[], owned: boolean, productionOnly: boolean, from?: Date, to?: Date, page = 1, perPage = 30): Promise => { const ss: string[] = [] statuses.forEach((status) => { ss.push(mapDeploymentStatusToString(status)) @@ -159,7 +159,7 @@ export const searchDeployments = async (statuses: DeploymentStatusEnum[], owned: const fromParam = (from)? `from=${from.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', }) diff --git a/ui/src/redux/activities.tsx b/ui/src/redux/activities.tsx index dc12ee54..47107e44 100644 --- a/ui/src/redux/activities.tsx +++ b/ui/src/redux/activities.tsx @@ -1,4 +1,4 @@ -import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit" +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit" import { searchDeployments as _searchDeployments, @@ -8,8 +8,6 @@ import { Deployment, } from "../models" export const perPage = 30 interface ActivitiesState { - start?: Date - end?: Date loading: boolean deployments: Deployment[] page: number @@ -21,12 +19,19 @@ const initialState: ActivitiesState = { page: 1, } -export const searchDeployments = createAsyncThunk( +export const searchDeployments = createAsyncThunk< + Deployment[], { + start?: Date, + end?: Date, + productionOnly: boolean, + }, { + state: { activities: ActivitiesState } +}>( "activities/searchDeployments", - async (_, { getState, rejectWithValue }) => { - const {start, end, page} = getState().activities + async ({start, end, productionOnly}, { getState, rejectWithValue }) => { + const {page} = getState().activities try { - return await _searchDeployments([], false, start, end, page, perPage) + return await _searchDeployments([], false, productionOnly, start, end, page, perPage) } catch (e) { return rejectWithValue(e) } @@ -37,12 +42,6 @@ export const activitiesSlice = createSlice({ name: "activities", initialState, reducers: { - setStart: (state, action: PayloadAction) => { - state.start = action.payload - }, - setEnd: (state, action: PayloadAction) => { - state.end = action.payload - }, increasePage: (state) => { state.page = state.page + 1 }, diff --git a/ui/src/redux/main.ts b/ui/src/redux/main.ts index f716b20d..f5d10a40 100644 --- a/ui/src/redux/main.ts +++ b/ui/src/redux/main.ts @@ -88,7 +88,7 @@ export const searchDeployments = createAsyncThunk - + props.onChangePeriod(new Date(dateStrings[0]), new Date(dateStrings[1])) } /> - + @@ -37,13 +40,21 @@ export default function SearchActivities(props: SearchActivitiesProps): JSX.Elem {/* Mobile view */} -
+ {content}
{/* Laptop */} -
+ {content}
diff --git a/ui/src/views/activities/index.tsx b/ui/src/views/activities/index.tsx index d4b0185d..c084fd47 100644 --- a/ui/src/views/activities/index.tsx +++ b/ui/src/views/activities/index.tsx @@ -6,11 +6,10 @@ import { useAppSelector, useAppDispatch } from "../../redux/hooks" import { perPage, activitiesSlice, searchDeployments } from "../../redux/activities" import Main from "../main" -import SearchActivities, { SearchActivitiesProps } from "./SearchActivities" +import SearchActivities, { SearchActivitiesProps, SearchActivitiesValues } from "./SearchActivities" import ActivityHistory, { ActivityHistoryProps } from "./ActivityHistory" import Pagination, { PaginationProps } from "../../components/Pagination" import Spin from "../../components/Spin" -import { deploy } from "../../redux/repoDeploy" const { actions } = activitiesSlice @@ -24,17 +23,21 @@ export default ():JSX.Element => { const dispatch = useAppDispatch() useEffect(() => { - dispatch(searchDeployments()) + dispatch(searchDeployments({ + productionOnly: false + })) + // eslint-disable-next-line }, [dispatch]) - const onChangePeriod = (start: Date, end: Date) => { - dispatch(actions.setStart(start)) - dispatch(actions.setEnd(end)) + const onClickSearch = (values: SearchActivitiesValues) => { + dispatch(searchDeployments({ + start: values.period? values.period[0].toDate() : undefined, + end: values.period? values.period[1].toDate() : undefined, + productionOnly: values.productionOnly? values.productionOnly : false + })) } - const onClickSearch = () => dispatch(searchDeployments()) - const onClickPrev = () => dispatch(actions.decreasePage()) const onClickNext = () => dispatch(actions.increasePage()) @@ -42,7 +45,6 @@ export default ():JSX.Element => { return (

Search

From e94cb6bbb548f3f22df0128fd05a5f9002e49361 Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 10 Apr 2022 16:22:14 +0900 Subject: [PATCH 7/8] Fix the bug from rebasing --- ui/src/components/RecentActivities.tsx | 1 + ui/src/views/main/Header.tsx | 5 ++++- ui/src/views/repoHome/ActivityLogs.tsx | 9 +-------- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/ui/src/components/RecentActivities.tsx b/ui/src/components/RecentActivities.tsx index bfe44441..16a4b4a0 100644 --- a/ui/src/components/RecentActivities.tsx +++ b/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 Home + + Activities + {(user?.admin)? - + Members : diff --git a/ui/src/views/repoHome/ActivityLogs.tsx b/ui/src/views/repoHome/ActivityLogs.tsx index bb70c00f..7c7d2117 100644 --- a/ui/src/views/repoHome/ActivityLogs.tsx +++ b/ui/src/views/repoHome/ActivityLogs.tsx @@ -2,18 +2,11 @@ import { Timeline, Typography } from 'antd' import { SyncOutlined } from '@ant-design/icons' import moment from "moment" -<<<<<<< HEAD:ui/src/views/repoHome/ActivityLogs.tsx import { Deployment, DeploymentStatusEnum } from "../../models" import DeploymentStatusBadge from "../../components/DeploymentStatusBadge" import UserAvatar from '../../components/UserAvatar' import DeploymentRefCode from '../../components/DeploymentRefCode' -======= -import { Deployment, DeploymentStatusEnum } from "../models" -import DeploymentStatusBadge from "./DeploymentStatusBadge" -import UserAvatar from './UserAvatar' -import DeploymentRefCode from './DeploymentRefCode' -import { getStatusColor } from "./partials" ->>>>>>> 6d4e825 (Add ActivityHistory):ui/src/components/ActivityLogs.tsx +import { getStatusColor } from "../../components/partials" const { Text } = Typography From 593cb4e602c52771f0eafa10e6e0ac7a14ae68c0 Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 10 Apr 2022 16:26:55 +0900 Subject: [PATCH 8/8] Fix to adjust the text space --- ui/src/views/activities/ActivityHistory.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/ui/src/views/activities/ActivityHistory.tsx b/ui/src/views/activities/ActivityHistory.tsx index 96f545c7..838c5360 100644 --- a/ui/src/views/activities/ActivityHistory.tsx +++ b/ui/src/views/activities/ActivityHistory.tsx @@ -28,9 +28,7 @@ export default function ActivityHistory(props: ActivityHistoryProps): JSX.Elemen

- deployed   - to {d.env}  - on {moment(d.createdAt).format("LLL")} + deployed to {d.env} on {moment(d.createdAt).format("LLL")}

)