all acitivities changed to pings

README.md

@@ -43,6 +43,27 @@ nano .env
 
 That's it, your status page is ready!
 
+## Deployment
+To deploy the project to a production environment:
+
+```bash
+yarn
+yarn build
+yarn start
+```
+
+## Development
+First install dependencies and then run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+
 ## Deploy on Vercel
 
 The easiest way to deploy your status page is to use the [Vercel Platform](https://vercel.com/new).

components/services/ResponseTime.jsx

@@ -19,8 +19,8 @@ const ResponseTime = ({ monitor }) => {
     const theme = useTheme()
 
     const calculateResponseTime = () => {
-        const length = Array.from(monitor.activities).filter(a => a.status).length;
-        return Array.from(monitor.activities)
+        const length = Array.from(monitor.pings).filter(a => a.status).length;
+        return Array.from(monitor.pings)
             .filter(a => a.status)
             .reduce((acc, curr) => {
                 return acc + (curr.duration / length);
@@ -45,15 +45,15 @@ const ResponseTime = ({ monitor }) => {
                     color={`url(#fade-gradient)`}
                     curve={'curveMonotoneX'}
                     style={{ strokeLinejoin: "round" }}
-                    data={monitor.activities.map((activity, index) => ({
+                    data={monitor.pings.map((activity, index) => ({
                         x: parseFloat(activity.stamp) * 1000, y: activity.duration * 1000
                     }))} />
                 <LineSeries
                     color={theme.colors.green}
                     style={{ strokeLinejoin: "round", background: 'transparent' }}
                     strokeWidth={2}
                     curve={'curveMonotoneX'}
-                    data={monitor.activities.map((activity, index) => ({
+                    data={monitor.pings.map((activity, index) => ({
                         x: parseFloat(activity.stamp) * 1000, y: activity.duration * 1000
                     }))} />
                 <XAxis tickTotal={5} tickFormat={v => new Date(v).toLocaleTimeString('en', {

components/services/Service.js

@@ -14,7 +14,7 @@ const Service = ({ monitor }) => {
             <StatusIndicator size='1x' up={monitor.latest_event.event === 'req-ok'} />
             <Heading variant={5} className='mx-2'>{monitor.name}</Heading>
           </Card.Header>
-          {monitor.activities && <StyledCardBody>
+          {monitor.pings && <StyledCardBody>
             <Uptime monitor={monitor} />
             <ResponseTime monitor={monitor} />
           </StyledCardBody>}

components/services/Uptime.jsx

@@ -5,8 +5,8 @@ import StatusIndicator from '../services/StatusIndicator';
 
 const Uptime = ({ monitor }) => {
     const calculateUptime = () => {
-        const length = Array.from(monitor.activities).filter(a => a.status).length;
-        return Array.from(monitor.activities)
+        const length = Array.from(monitor.pings).filter(a => a.status).length;
+        return Array.from(monitor.pings)
             .filter(a => a.status)
             .reduce((acc, curr) => {
                 return curr.status === 'ok' ? acc + (1 / length) : acc
@@ -20,7 +20,7 @@ const Uptime = ({ monitor }) => {
             </Heading>
             <Text muted className='pb-2'>{calculateUptime().toFixed(3)}% uptime</Text>
             <Pings>
-                {monitor.activities.map((activity, index) => (
+                {monitor.pings.map((activity, index) => (
                     <Ping key={index} status={activity.status} />
                 ))}
             </Pings>

components/services/index.jsx

@@ -7,7 +7,7 @@ import Service from './Service';
 const Services = ({ monitors }) => {
     const getMonitorsStatus = () => {
         return monitors.reduce((acc, curr) => {
-            return (curr.latest_event.event === 'req-ok') && acc
+            return (curr.latest_event?.event === 'req-ok') && acc
         }, true)
     }
 

pages/api/monitors/[key]/pings.js

@@ -0,0 +1,12 @@
+import { listMonitorPings } from '../../../../api/monitors'
+
+export default async function handler(req, res) {
+  const { key } = req.query
+  try {
+    const { data, status } = await listMonitorPings(key)
+    res.status(status).json(data)
+  } catch (error) {
+    const { data, status } = error.response
+    res.status(status).json(data)
+  }
+}

pages/api/monitors/index.js

@@ -1,7 +1,11 @@
 import { listMonitors } from '../../../api/monitors'
 
 export default async function handler(req, res) {
-    const { data } = await listMonitors()
-    res.status(200).json(data)
+  try {
+    const { data, status } = await listMonitors()
+    res.status(status).json(data)
+  } catch (error) {
+    const { data, status } = error.response
+    res.status(status).json(data)
   }
-  
+}

pages/index.js

@@ -4,7 +4,7 @@ import axios from 'axios'
 import Head from 'next/head'
 
 import Services from '../components/services'
-import { listMonitorActivities, listMonitors } from '../api/monitors'
+import { listMonitorPings, listMonitors } from '../api/monitors'
 import configs from '../configs'
 
 let liveStatsInterval = null;
@@ -14,7 +14,7 @@ const Landing = (props) => {
   useEffect(() => {
     liveStatsInterval = setInterval(() => {
       fetchMonitorsData()
-      fetchMonitorsActivitiesDate()
+      fetchMonitorsPingsData()
     }, 60000)
 
     return () => {
@@ -37,16 +37,18 @@ const Landing = (props) => {
     })
   }
 
-  const fetchMonitorsActivitiesDate = () => {
+  const fetchMonitorsPingsData = () => {
     monitors.forEach(monitor => {
 
-      axios.get(`api/monitors/${monitor.key}/activities`).then(res => {
+      axios.get(`api/monitors/${monitor.key}/pings`).then(res => {
         if (res.status !== 200) return
         setMonitors(monitors => monitors.map(m => {
+
           if (m.key === monitor.key) {
+            const data = res.data[monitor.key]
             m = {
               ...m,
-              activities: res.data
+              pings: data.concat([...new Array(50 - data.length).fill({})])
             }
           }
 
@@ -71,17 +73,16 @@ const Landing = (props) => {
 export const getStaticProps = async () => {
   const results = await listMonitors()
 
-  const activities = await Promise.all(results.data.monitors.map(monitor => {
-    return listMonitorActivities(monitor.key)
+  const pings = await Promise.all(results.data.monitors.map(monitor => {
+    return listMonitorPings(monitor.key)
   }))
 
-
   const monitors = results.data.monitors.map((monitor, index) => {
-    const activitiesData = activities[index].data
+    const pingsData = pings[index].data[monitor.key]
 
     return {
       ...monitor,
-      activities: activitiesData.concat([...new Array(50 - activitiesData.length).fill({})]),
+      pings: pingsData.concat([...new Array(50 - pingsData.length).fill({})]),
     }
   })