Add the activities view

Author: noah

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/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 (
+        <Form
+            layout="inline"
+        >
+            <Form.Item label="Period" required>
+                <DatePicker.RangePicker 
+                    format="YYYY-MM-DD HH:mm"
+                    showTime={{
+                        showSecond: false, 
+                        defaultValue: [moment().hour(0).minute(0), moment().hour(23).minute(59)],
+                    }}
+                    onChange={(_, dateStrings) => props.onChangePeriod(moment(dateStrings[0]), moment(dateStrings[1])) }
+                />
+            </Form.Item>
+            <Form.Item label="Production">
+                <Switch size="small" />
+            </Form.Item>
+            <Form.Item >
+                <Button type="primary" onClick={props.onClickSearch}>Search</Button>
+            </Form.Item>
+        </Form>
+    )
+}

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 (
+        <Main>
+            <Helmet>
+                <title>Activities</title>
+            </Helmet>
+            <h1>Activities</h1>
+            <div style={{marginTop: 30}}>
+                <h2>Search</h2>
+                <SearchActivities 
+                    onChangePeriod={() => console.log("period")}
+                    onClickSearch={() => console.log("search")}
+                />
+            </div>
+            <div style={{marginTop: 30}}>
+                <ActivityLogs deployments={[]}/>
+            </div>
+            <div style={{marginTop: 30, textAlign: "center"}}>
+                <Pagination page={0} isLast={true} onClickPrev={() => {console.log('')}} onClickNext={() => {console.log('')}} />
+            </div>
+        </Main>
+    )
+}