feat: add badge

Author: hanayashiki

src/graphql/context.ts

@@ -1,27 +1,27 @@
-import { ServerResponse } from 'http';
-
 import { PrismaClient } from '@prisma/client';
 import { WebhookService } from 'app/services/WebhookService';
+import { NextApiRequest, NextApiResponse } from 'next';
 
 import { prisma } from '../lib/prisma/prisma';
 import { EventService } from '../services/EventService';
 import { TraceService } from '../services/TraceService';
 import { UserService } from '../services/UserService';
 import { WebsiteService } from '../services/WebsiteService';
-import type { NextIncomingMessage, RequestObjectHandler } from '../utils/types';
+import type { RequestObjectHandler } from '../utils/types';
 import { Auth, AuthInfo } from './auth';
 
 export type Context = {
   authInfo?: AuthInfo;
+  exemptAuth?: boolean;
   prisma: PrismaClient;
   isLoggedIn: boolean;
   userService: UserService;
   eventService: EventService;
   websiteService: WebsiteService;
   traceService: TraceService;
   webhookService: WebhookService;
-  req: NextIncomingMessage;
-  res: ServerResponse;
+  req: NextApiRequest;
+  res: NextApiResponse;
 };
 
 const auth = new Auth();

src/pages/api/badge/[id].ts

@@ -0,0 +1,31 @@
+import { createContext } from 'app/graphql/context';
+import { RequestHandler } from 'app/utils/types';
+
+import { TraceStatus } from '.prisma/client';
+
+export default (async (req, res) => {
+  const context = await createContext({ req, res });
+  context.exemptAuth = true;
+
+  const { id, rangeTime = '24h' } = req.query as { id: string; rangeTime?: string };
+
+  const result = await context.traceService.findTraces({ websiteId: parseInt(id), rangeTime });
+
+  const oks = result.results.filter((r) => r.status === TraceStatus.OK);
+
+  const percent =
+    result.results.length === 0
+      ? 'unknown'
+      : (Math.floor((oks.length / result.results.length) * 1000) / 1000) * 100;
+
+  const color =
+    percent === 'unknown'
+      ? 'inactive'
+      : percent >= 100
+      ? 'brightgreen'
+      : percent >= 90
+      ? 'important'
+      : 'critical';
+
+  res.redirect(`https://img.shields.io/badge/uptime-${encodeURIComponent(percent + '%')}-${color}`);
+}) as RequestHandler;

src/pages/monitoring/websiteStatus/[id].tsx

@@ -117,6 +117,20 @@ export default function Page() {
               {website.data?.website.webhooks.length}
             </Descriptions.Item>
           )}
+
+          <Descriptions.Item label="Badge">
+            <img
+              src={`/api/badge/${website.data?.website?.id}`}
+              alt="The shield"
+              className="cursor-pointer"
+              onClick={async () => {
+                await navigator.clipboard.writeText(
+                  `[![uptime-monitor](${location.origin}/api/badge/${website.data?.website?.id})](${location.origin}/monitoring/websiteStatus/${website.data?.website?.id})`,
+                );
+                alert('Markdown copied!');
+              }}
+            />
+          </Descriptions.Item>
         </Descriptions>
 
         <Link

src/services/TraceService.ts

@@ -243,7 +243,7 @@ export class TraceService extends BaseService {
     const whereWithId = {
       ...cursorWhere,
       ...where,
-      userId: this.ctx.authInfo!.id,
+      userId: this.ctx.exemptAuth ? undefined : this.ctx.authInfo!.id,
     } as const;
 
     const minId = (

src/utils/types.ts

@@ -1,20 +1,13 @@
-import { ServerResponse, IncomingMessage } from 'http';
-
 import * as t from 'io-ts';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { NexusGenInputs } from '../../graphql/server/generated';
 
-export type NextIncomingMessage = IncomingMessage & {
-  cookies?: {
-    [key: string]: any;
-  };
-};
-
-export type RequestHandler = (req: NextIncomingMessage, res: ServerResponse) => Promise<void>;
+export type RequestHandler = (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
 
 export type RequestObjectHandler<T = undefined> = (o: {
-  req: NextIncomingMessage;
-  res: ServerResponse;
+  req: NextApiRequest;
+  res: NextApiResponse;
 }) => Promise<T>;
 
 export type InputObjectNames = keyof NexusGenInputs;