ui improvements

pages/index.tsx

@@ -1,12 +1,22 @@
 import type { NextPage } from 'next'
-import IncidentsSection from "../page-components/incidents"
-import ServicesSection from "../page-components/services"
+import IncidentsSection from "../src/incidents"
+import ServicesSection from "../src/services"
 
 const Home: NextPage = () => {
   return (
-    <div className="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
-      <ServicesSection />
-      <IncidentsSection />
+    <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>
+        <ServicesSection />
+      </div >
     </div>
   )
 }

public/status/google_report.log

@@ -1 +1 @@
-2022-08-07 17:30, success 0.050390s
+2022-08-07 17:30, success, 0.050390s

src/services/components/log/index.tsx

@@ -0,0 +1,17 @@
+import type { NextPage } from 'next'
+import { FunctionComponent } from 'react';
+import Log from '../../types/Log';
+
+interface ServiceLogProps {
+    item: Log
+}
+
+const ServiceLog: FunctionComponent<ServiceLogProps> = ({ item }) => {
+    return (
+        <div>
+            {item.status === 'success' ? '✅' : '❌'}
+        </div>
+    )
+}
+
+export default ServiceLog;

src/services/components/service/index.tsx

@@ -0,0 +1,30 @@
+import { FunctionComponent } from 'react';
+import Service from "../../types/Service";
+import ServiceLog from "../log";
+
+interface ServiceItemProps {
+    item: Service
+}
+
+const ServiceItem: FunctionComponent<ServiceItemProps> = ({ item }) => {
+    return (
+        <div>
+            <div className='flex basis-full'>
+                <h1>{item.status === 'success' ? '✅' : '❌'}</h1>
+                <h1 className='p-10'>{item.name}</h1>
+            </div>
+
+            <div className='flex'>
+                {
+                    item.logs.map(log => (
+                        <div key={log.created_at} className='flex-1'>
+                            <ServiceLog item={log} />
+                        </div>
+                    ))
+                }
+            </div>
+        </div>
+    )
+}
+
+export default ServiceItem;

page-components/services/hooks/useServices.tsx → src/services/hooks/useServices.tsx

@@ -21,7 +21,12 @@ function useIncidents() {
                     if (!key || !url) {
                         continue;
                     }
-                    services.push({ id: ii, name: key, status: "unknown", logs: await logs(key) })
+                    const log = await logs(key);
+                    if (log.length > 0) {
+                        services.push({ id: ii, name: key, status: log[log.length - 1].status, logs: log })
+                    } else {
+                        services.push({ id: ii, name: key, status: "unknown", logs: log })
+                    }
                 }
                 setData(services as Service[]);
             } catch (e: any) {
@@ -41,10 +46,15 @@ async function logs(key: string): Promise<Log[]> {
     const text = await response.text();
     const lines = text.split("\n");
     const logs: Log[] = [];
-    for (let ii = 0; ii < lines.length; ii++) {
-        const line = lines[ii];
-        const [created_at, status, response_time] = line.split(", ");
-        logs.push({ response_time, status, created_at })
+
+    for (let index = 89; index >= 0; index--) {
+        if (lines.length > index) {
+            const line = lines[index];
+            const [created_at, status, response_time] = line.split(", ");
+            logs.push({ response_time, status, created_at })
+        } else {
+            logs.push({ response_time: "0s", status: "not-started", created_at: "" })
+        }
     }
 
     return logs;

src/services/index.tsx

@@ -0,0 +1,40 @@
+import useIncidents from './hooks/useServices';
+import type { NextPage } from 'next'
+import Service from './types/Service';
+import ServiceItem from './components/service';
+
+const ServicesSection: NextPage = () => {
+    const [data, isPostsLoading] = useIncidents();
+    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>
+                </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>
+            </div>
+        </div>
+    )
+}
+
+export default ServicesSection;

styles/globals.css

@@ -1,3 +1,68 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-50;
+  }
+
+  a {
+    @apply text-blue-500 dark:text-blue-400;
+  }
+}
+
+@layer components {
+  .card {
+    @apply p-4 bg-white border border-gray-200 dark:bg-gray-700 dark:border-gray-600 shadow rounded-lg p-4 mb-2;
+  }
+
+  .pill {
+    @apply px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full;
+  }
+
+  .histogram {
+    @apply h-6 w-full mx-auto;
+  }
+  .hitbox {
+    align-items: flex-end;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    padding: 1px;
+    border-radius: 3.75px;
+  }
+  .bar {
+    @apply bg-gray-300 dark:bg-gray-600;
+    padding-bottom: 1px;
+    height: 100%;
+    width: 85%;
+    border-radius: 100px;
+  }
+
+  .bar.green {
+    @apply bg-green-400 dark:bg-green-700;
+  }
+
+  .bar.red {
+    @apply bg-red-400 dark:bg-red-700;
+  }
+
+  .bar.yellow {
+    @apply bg-yellow-400 dark:bg-yellow-700;
+  }
+
+  .tooltip {
+    @apply relative;
+  }
+
+  .tooltip .content {
+    @apply invisible absolute z-50 inline-block;
+    @apply rounded-lg py-1 px-2 bg-gray-100 dark:bg-gray-800 shadow;
+    @apply opacity-0 transition-all duration-200 scale-50;
+  }
+
+  .tooltip:hover .content {
+    @apply visible opacity-100 scale-100;
+  }
+}