ui

.github/workflows/health-check.yml

@@ -3,7 +3,7 @@ name: Scheduled Health Check
 # Controls when the action will run.
 on:
   schedule:
-    - cron: "*/2 * * * *"
+    - cron: "0 0 * * * *"
 
 jobs:
   health_check_job:

pages/index.tsx

@@ -1,20 +1,18 @@
 import type { NextPage } from 'next'
+import Image from 'next/image'
 import IncidentsSection from "../src/incidents"
 import ServicesSection from "../src/services"
 
 const Home: NextPage = () => {
   return (
-    <div className="bg-white ">
-
-      <div className='jsx-2876871543 relative flex-grow w-full mx-auto'>
-
-        <div className="w-full md:w-7/12 pt-5 px-4 mx-auto text-center">
-          <div className="text-sm text-black py-1">
-            This components requires
-            for the shadows, ripple effects and card classes. <br /><br />
-            A component by
-          </div>
+    <div className='h-full w-full '>
+      <div className="w-full h-80 absolute bg-light-purple dark:purple dark:bg-black">
+        <div className="mx-px mt-10 md:pl-80 md:pr-80 w-full h-full bg-purple-500 dark:bg-black">
+          <Image src="/vercel.svg" width={150} height={100} className="w-40 h-16" alt="Tailwind Play" />
         </div>
+      </div>
+      <div className="absolute inset-0 bg-[url(/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
+      <div className='mt-40 w-full absolute overflow-scroll	'>
         <ServicesSection />
       </div >
     </div>

src/incidents/hooks/useIncidents.tsx

@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+import Incident from "../types/Incident";
+
+function useIncidents() {
+    const [data, setData] = useState<Incident[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState();
+
+    useEffect(() => {
+        const loadData = async () => {
+            setIsLoading(true);
+            try {
+                const response = await fetch("https://api.github.com/repos/mehatab/fettle/issues?per_page=2&state=all");
+                const issues = await response.json();
+                const incidents: Incident[] = [];
+                issues.forEach((issue: any) => {
+                    incidents.push({
+                        id: issue.id,
+                        title: issue.title,
+                        desciption: issue.body,
+                        status: issue.state,
+                        created_at: issue.created_at,
+                        closed_at: issue.closed_at,
+                        labels: issue.labels.map((label: any) => label.name)
+                    })
+                });
+                setData(incidents);
+            } catch (e: any) {
+                setError(e);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        loadData();
+    }, []);
+
+    return [data, isLoading, error];
+}
+
+
+export default useIncidents;

src/incidents/index.tsx

@@ -1,27 +1,24 @@
 import useIncidents from './hooks/useIncidents'
 import type { NextPage } from 'next'
-import Incidents from './types/Incidents';
+import Incidents from './types/Incident';
 
 const IncidentsSection: NextPage = () => {
-    const [data, isPostsLoading] = useIncidents(
-        "https://api.github.com/repos/aws/aws-cdk/issues"
-    );
+    const [incidents, isIncidentsLoading] = useIncidents();
     return (
         <div>
-            <h1>Incidents </h1>
             {
-                isPostsLoading ? (
+                isIncidentsLoading ? (
                     <p>Loading...</p>
                 ) : (
-                    <ul>
+                    <div>
                         {
-                            (data as Incidents[]).map(incident => (
-                                <li key={incident.id}>
-                                    <h2>{incident.title}</h2>
-                                </li>
+                            (incidents as Incidents[]).map(incident => (
+                                <div className='flex items-center' key={incident.id}>
+                                    <p className='text-base font-semibold leading-6 text-gray-900'>{incident.title}</p>
+                                </div>
                             ))
                         }
-                    </ul>
+                    </div>
                 )
             }
         </div>

src/incidents/types/Incident.tsx

@@ -0,0 +1,11 @@
+interface Incident {
+    id: number;
+    title: string;
+    desciption: string;
+    status: string;
+    created_at: string;
+    closed_at: string;
+    labels: string[];
+}
+
+export default Incident;

src/services/components/log/index.tsx

@@ -8,9 +8,7 @@ interface ServiceLogProps {
 
 const ServiceLog: FunctionComponent<ServiceLogProps> = ({ item }) => {
     return (
-        <div>
-            {item.status === 'success' ? '✅' : '❌'}
-        </div>
+        <div className='bg-green-500 ml-0.5 sm:rounded-lg flex-1 h-8' />
     )
 }
 

src/services/components/service/index.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react';
+import Log from '../../types/Log';
 import Service from "../../types/Service";
 import ServiceLog from "../log";
 
@@ -8,21 +9,26 @@ interface ServiceItemProps {
 
 const ServiceItem: FunctionComponent<ServiceItemProps> = ({ item }) => {
     return (
-        <div className='max-w-full'>
+        <div>
             <div className='flex'>
-                <h1>{item.status === 'success' ? '✅' : '❌'}</h1>
-                <h1 className='p-10'>{item.name}</h1>
-            </div>
+                <svg className="h-6 w-6 flex-none fill-sky-100 stroke-green-500 stroke-2">
+                    <circle cx="12" cy="12" r="11" />
+                    <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
+                </svg>
+                <div className="w-full flex justify-between items-baseline">
+                    <p className="ml-4 text-base font-semibold leading-6 text-gray-900">{item.name}</p>
+                    <p className='text-xs text-gray-400 items-baseline	self-baseline'> 100% operational in last 90 days</p>
+                </div>
 
-            <div className='flex'>
+            </div>
+            <div className='flex mt-2'>
                 {
-                    item.logs.map(log => (
-                        <div key={log.created_at} className='shrink-0 h-16 w-32'>
-                            <ServiceLog item={log} />
-                        </div>
+                    ((item.logs || []) as Log[]).map((log) => (
+                        <ServiceLog key={log.created_at} item={log} />
                     ))
                 }
             </div>
+
         </div>
     )
 }

src/services/hooks/useServices.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import Service from '../types/Service';
 import Log from "../types/Log";
 
-function useIncidents() {
+function useServices() {
     const [data, setData] = useState<Service[]>([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState();
@@ -60,4 +60,4 @@ async function logs(key: string): Promise<Log[]> {
     return logs;
 }
 
-export default useIncidents;
+export default useServices;

src/services/index.tsx

@@ -1,39 +1,49 @@
-import useIncidents from './hooks/useServices';
+import useServices from './hooks/useServices';
 import type { NextPage } from 'next'
 import Service from './types/Service';
 import ServiceItem from './components/service';
+import Incident from './types/Incident';
+import IncidentsSection from '../incidents';
 
 const ServicesSection: NextPage = () => {
-    const [data, isPostsLoading] = useIncidents();
+    const [data, isServicesLoading] = useServices();
     return (
         <div>
-            <div className="overflow-y-scroll h-72 relative max-w-sm mx-auto bg-white dark:bg-slate-800 shadow-lg ring-1 ring-black/5 rounded-xl flex flex-col divide-y dark:divide-slate-200/5">
-                <div className="card">
-                    <div className="card-body">
-                        All System operational
+            <div className="mx-px md:ml-80 md:mr-80 bg-white dark:bg-slate-800 rounded-xl card">
+                <div className="w-full flex justify-between">
+                    <div className='flex items-center text-base font-semibold leading-7'>
+                        <svg className="h-6 w-6 flex-none fill-sky-100 stroke-green-500 stroke-2">
+                            <circle cx="12" cy="12" r="11" />
+                            <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
+                        </svg>
+                        <p className="ml-4 text-gray-900">All System Operational</p>
+                    </div>
+                    <div>
+                        <p className="ml-4 text-xs text-gray-400">Last updated</p>
+                        <p className="ml-4  text-xs text-gray-400 text-end ">5 min ago</p>
                     </div>
                 </div>
             </div>
-            <div className="overflow-y-scroll h-72 relative max-w-sm mx-auto bg-white dark:bg-slate-800 shadow-lg ring-1 ring-black/5 rounded-xl flex flex-col divide-y dark:divide-slate-200/5">
-                <div className="card">
-                    <div className="card-body">
-                        {
-                            isPostsLoading ? (
-                                <p>Loading...</p>
-                            ) : (
-                                <ul>
-                                    {
-                                        (data as Service[]).map(service => (
-                                            <ServiceItem key={service.id} item={service} />
-                                        ))
-                                    }
-                                </ul>
-                            )
-                        }
-                    </div>
+            <div className="mx-px mt-6 md:ml-80 md:mr-80 bg-white dark:bg-slate-800 rounded-xl card">
+                <div className="card-body">
+                    {
+                        isServicesLoading ? (
+                            <p>Loading...</p>
+                        ) : (
+                            <ul>
+                                {
+                                    (data as Service[]).map(service => (
+                                        <ServiceItem key={service.id} item={service} />
+                                    ))
+                                }
+                            </ul>
+                        )
+                    }
                 </div>
+                <p className="mt-10 text-base font-semibold leading-7 text-gray-400">Recent incident</p>
+                <IncidentsSection />
             </div>
-        </div>
+        </div >
     )
 }
 

src/services/types/Incident.tsx

@@ -0,0 +1,11 @@
+interface Incident {
+    id: number;
+    title: string;
+    desciption: string;
+    status: string;
+    created_at: string;
+    closed_at: string;
+    labels: string[];
+}
+
+export default Incident;

src/services/types/Log.tsx

@@ -1,4 +1,5 @@
 interface Log {
+    id: number;
     response_time: string;
     status: string;
     created_at: string;

tailwind.config.js

@@ -2,10 +2,25 @@
 module.exports = {
   darkMode: 'class',
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx}"
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        'white': '#ffffff',
+        "light-purple": '#58469b',
+        'purple': '#2c244e',
+        'midnight': '#121063',
+        'metal': '#565584',
+        'tahiti': '#3ab7bf',
+        'silver': '#ecebff',
+        'bubble-gum': '#ff77e9',
+        'bermuda': '#78dcca',
+      },
+    },
   },
   plugins: [],
 }