0.10.23 - Fixes various bugs with status pages and session tokens

.gitignore

@@ -48,4 +48,5 @@ next-env.d.ts
 *.njsproj
 *.sln
 *.sw?
-*_copy*
+*_copy*
+_temp*

app/components/status/configure/layout/metrics/type/chart/area.tsx

@@ -27,6 +27,8 @@ const StatusLayoutAreaChart = ({ heartbeats = defaultHeartbeats }) => {
           tickFormatter={(value) => {
             return dayjs(value).format('HH:mm');
           }}
+          interval="preserveStartEnd"
+          minTickGap={16}
         />
         <YAxis
           label={{

app/components/status/configure/layout/metrics/type/chart/line.tsx

@@ -36,7 +36,8 @@ const StatusLayoutLineChart = ({ heartbeats = defaultHeartbeats }) => {
           tickFormatter={(value) => {
             return dayjs(value).format('HH:mm');
           }}
-          interval={8}
+          interval="preserveStartEnd"
+          minTickGap={16}
         />
         <YAxis
           style={{ fill: 'var(--accent-200)' }}

app/components/status/configure/preview/metrics/graph/nerdy.tsx

@@ -1,12 +1,28 @@
+// import dependencies
+import dayjs from 'dayjs';
+import relativeDayjs from 'dayjs/plugin/relativeTime';
+
 // import local files
 import StatusLayoutLineChart from '../../../layout/metrics/type/chart/line';
 
-const StatusPageMetricsNerdyGraph = ({ title, showPing, heartbeats = [] }) => {
+dayjs.extend(relativeDayjs);
+
+const StatusPageMetricsNerdyGraph = ({
+  title,
+  showPing,
+  heartbeats = [],
+  incidentCount = 0,
+}) => {
   if (!heartbeats.length) return null;
 
-  const lastHeartbeat = heartbeats[heartbeats.length - 1];
+  const lastHeartbeat = heartbeats[0];
   const ms = lastHeartbeat.latency;
 
+  const uptimePercentage =
+    heartbeats.length === 0
+      ? 100
+      : ((heartbeats.length - incidentCount) / heartbeats.length) * 100;
+
   return (
     <div className="spmb-graph">
       <div className="spmb-header">
@@ -17,19 +33,23 @@ const StatusPageMetricsNerdyGraph = ({ title, showPing, heartbeats = [] }) => {
           <div className="spmn-content">
             <div className="spmn-item">
               <div className="spmn-title">Uptime</div>
-              <div className="spmn-subtitle">99.99%</div>
+              <div className="spmn-subtitle">
+                {uptimePercentage.toFixed(2).replace(/\.00$/, '')}%
+              </div>
             </div>
             <div className="spmn-item">
               <div className="spmn-title">Response Time</div>
               <div className="spmn-subtitle">{ms.toLocaleString()} ms</div>
             </div>
             <div className="spmn-item">
               <div className="spmn-title">Outages</div>
-              <div className="spmn-subtitle">4 outages</div>
+              <div className="spmn-subtitle">{incidentCount} outages</div>
             </div>
             <div className="spmn-item">
               <div className="spmn-title">Last Check</div>
-              <div className="spmn-subtitle">32 secs ago</div>
+              <div className="spmn-subtitle">
+                {dayjs(lastHeartbeat.date).fromNow()}
+              </div>
             </div>
           </div>
         ) : null}

app/components/status/configure/preview/metrics/graph/pretty.tsx

@@ -1,10 +1,15 @@
+import dayjs from 'dayjs';
+import relativeDayjs from 'dayjs/plugin/relativeTime';
+
 // import local files
 import StatusLayoutLineChart from '../../../layout/metrics/type/chart/line';
 
+dayjs.extend(relativeDayjs);
+
 const StatusPageMetricsPrettyGraph = ({ title, showPing, heartbeats = [] }) => {
   if (!heartbeats.length) return null;
 
-  const lastHeartbeat = heartbeats[heartbeats.length - 1];
+  const lastHeartbeat = heartbeats[0];
   const ms = lastHeartbeat.latency;
 
   return (
@@ -22,7 +27,9 @@ const StatusPageMetricsPrettyGraph = ({ title, showPing, heartbeats = [] }) => {
 
             <div className="spmp-item">
               <div className="spmp-title">Last Check</div>
-              <div className="spmp-subtitle">{ms.toLocaleString()} ms</div>
+              <div className="spmp-subtitle">
+                {dayjs(lastHeartbeat.date).fromNow()}
+              </div>
             </div>
           </div>
         ) : null}

app/components/status/configure/preview/metrics/index.tsx

@@ -44,6 +44,4 @@ const StatusPageMetrics = ({
 
 StatusPageMetrics.displayName = 'StatusPageMetrics';
 
-
-
 export default observer(StatusPageMetrics);

app/components/status/configure/preview/metrics/separate.tsx

@@ -37,6 +37,7 @@ const StatusPageMetricsSeparate = ({
                 title={monitor.title || monitor.name}
                 showPing={monitor.showPing}
                 heartbeats={heartbeatsList}
+                incidentCount={monitor.incidentCount}
               />
             );
           }

app/pages/status.tsx

@@ -219,6 +219,23 @@ const StatusPage = ({ id }: { id?: string }) => {
                 .map((monitorId) => {
                   const monitor = statusPage?.monitors[monitorId];
                   if (!monitor || monitor.paused) return null;
+                  const monitorSettings = item.monitors.find(
+                    (m) => m.id === monitorId
+                  );
+
+                  const monitorIncidents = statusPage.incidents.filter(
+                    (incident) => incident?.monitorIds?.includes(monitorId)
+                  );
+
+                  monitor.incidentCount = monitorIncidents.length;
+
+                  if (monitorSettings) {
+                    monitor.graphType = monitorSettings?.graphType;
+                    monitor.showPing = monitorSettings?.showPing;
+                  } else {
+                    monitor.graphType = 'Basic';
+                    monitor.showPing = false;
+                  }
                   return monitor;
                 })
                 .filter(Boolean);