status
This commit is contained in:
Reihan
parent
48a7c37e8a
commit
d8b2ad1987
@ -1,10 +1,5 @@
|
||||
"use client";
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import serverIcon1 from "@/assets/images/server-1-icon.svg";
|
||||
import serverIcon2 from "@/assets/images/server-2-icon.svg";
|
||||
import serverIcon3 from "@/assets/images/server-3-icon.svg";
|
||||
import serverIcon4 from "@/assets/images/server-4-icon.svg";
|
||||
|
||||
export default function Box() {
|
||||
return (
|
||||
@ -22,91 +17,249 @@ export default function Box() {
|
||||
}}
|
||||
className="relative p-5 border border-white/5 bg-[#0E1618]/10 backdrop-blur-sm"
|
||||
>
|
||||
<h3 className="mb-1 font-medium uppercase text-[#0CE77E]">Live and preparing servers</h3>
|
||||
<h3 className="mb-1 font-medium uppercase text-[#0CE77E]">All Systems Operational</h3>
|
||||
|
||||
<p className="mb-4 text-sm text-white/75">List of our GPUs and their current status</p>
|
||||
<p className="mb-4 text-sm text-white/75">
|
||||
Last updated on{" "}
|
||||
{new Date(Date.now() - 3 * 60 * 1000)
|
||||
.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
timeZoneName: "short",
|
||||
})
|
||||
.replace(",", "")
|
||||
.replace("AM", "am")
|
||||
.replace("PM", "pm")}
|
||||
</p>
|
||||
|
||||
<div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<Image src={serverIcon1} alt="" className="w-[40px] h-[40px]" />
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-[#0CE77E]">GAMING GPUs</h3>
|
||||
<p className="text-sm text-white/75">Total GPUs : 52</p>
|
||||
</div>
|
||||
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-medium text-[#0CE77E]">GPU Instance</h3>
|
||||
<h3 className="font-medium text-[#0CE77E]">99.960% uptime</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
|
||||
<p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 38</p>
|
||||
</div>
|
||||
|
||||
<div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
|
||||
<p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 14</p>
|
||||
{/* uptime status */}
|
||||
<div className="relative">
|
||||
<div className="flex h-[28px] w-full overflow-visible relative">
|
||||
{[
|
||||
{ status: "operational", width: "60%", details: "No incident reported" },
|
||||
{
|
||||
status: "degraded",
|
||||
width: "0.5%",
|
||||
details: "Resolved - Nvidia driver issue",
|
||||
},
|
||||
{ status: "operational", width: "39.5%", details: "No incident reported" },
|
||||
].map((segment, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-full group cursor-help relative
|
||||
${
|
||||
segment.status === "operational"
|
||||
? "bg-[#0CE77E]"
|
||||
: segment.status === "degraded"
|
||||
? "bg-yellow-500"
|
||||
: "bg-red-500"
|
||||
}`}
|
||||
style={{ width: segment.width }}
|
||||
>
|
||||
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
||||
{segment.status === "operational"
|
||||
? "Fully Operational"
|
||||
: segment.status === "degraded"
|
||||
? "Degraded Performance"
|
||||
: "System Down"}
|
||||
<br />
|
||||
Status: {segment.details}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<Image src={serverIcon2} alt="" className="w-[40px] h-[40px]" />
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-[#E2F410]">Datacenter GPUs</h3>
|
||||
<p className="text-sm text-white/75">Total GPUs : 45</p>
|
||||
</div>
|
||||
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-medium text-[#0CE77E]">Console</h3>
|
||||
<h3 className="font-medium text-[#0CE77E]">99.890% uptime</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
|
||||
<p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 33</p>
|
||||
</div>
|
||||
|
||||
<div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
|
||||
<p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 12</p>
|
||||
{/* uptime status */}
|
||||
<div className="relative">
|
||||
<div className="flex h-[28px] w-full overflow-visible relative">
|
||||
{[
|
||||
{ status: "operational", width: "10%", details: "No incident reported" },
|
||||
{
|
||||
status: "downtime",
|
||||
width: "0.5%",
|
||||
details: "Service Unavailable",
|
||||
},
|
||||
{ status: "operational", width: "28%", details: "No incident reported" },
|
||||
{ status: "degraded", width: "0.5%", details: "Updating SMTP" },
|
||||
{ status: "operational", width: "61%", details: "No incident reported" },
|
||||
].map((segment, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-full group cursor-help relative
|
||||
${
|
||||
segment.status === "operational"
|
||||
? "bg-[#0CE77E]"
|
||||
: segment.status === "degraded"
|
||||
? "bg-yellow-500"
|
||||
: "bg-red-500"
|
||||
}`}
|
||||
style={{ width: segment.width }}
|
||||
>
|
||||
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
||||
{segment.status === "operational"
|
||||
? "Fully Operational"
|
||||
: segment.status === "degraded"
|
||||
? "Degraded Performance"
|
||||
: "System Down"}
|
||||
<br />
|
||||
Status: {segment.details}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<Image src={serverIcon3} alt="" className="w-[40px] h-[40px]" />
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-[#F65927]">Integrated GPUs</h3>
|
||||
<p className="text-sm text-white/75">Total GPUs : 17</p>
|
||||
</div>
|
||||
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-medium text-[#0CE77E]">Network</h3>
|
||||
<h3 className="font-medium text-[#0CE77E]">99.940% uptime</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
|
||||
<p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 12</p>
|
||||
</div>
|
||||
|
||||
<div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
|
||||
<p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 5</p>
|
||||
{/* uptime status */}
|
||||
<div className="relative">
|
||||
<div className="flex h-[28px] w-full overflow-visible relative">
|
||||
{[
|
||||
{ status: "operational", width: "34%", details: "No incident reported" },
|
||||
{
|
||||
status: "degraded",
|
||||
width: "0.5%",
|
||||
details: "Resolved - Unusual high latency on some regions",
|
||||
},
|
||||
{ status: "operational", width: "35%", details: "No incident reported" },
|
||||
{ status: "downtime", width: "0.5%", details: "Service Unavailable" },
|
||||
{ status: "operational", width: "30%", details: "No incident reported" },
|
||||
].map((segment, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-full group cursor-help relative
|
||||
${
|
||||
segment.status === "operational"
|
||||
? "bg-[#0CE77E]"
|
||||
: segment.status === "degraded"
|
||||
? "bg-yellow-500"
|
||||
: "bg-red-500"
|
||||
}`}
|
||||
style={{ width: segment.width }}
|
||||
>
|
||||
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
||||
{segment.status === "operational"
|
||||
? "Fully Operational"
|
||||
: segment.status === "degraded"
|
||||
? "Degraded Performance"
|
||||
: "System Down"}
|
||||
<br />
|
||||
Status: {segment.details}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<Image src={serverIcon4} alt="" className="w-[40px] h-[40px]" />
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-[#0CBFE7]">AI GPUs</h3>
|
||||
<p className="text-sm text-white/75">Total GPUs : 61</p>
|
||||
</div>
|
||||
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-medium text-[#0CE77E]">Proxy</h3>
|
||||
<h3 className="font-medium text-[#0CE77E]">100% uptime</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
|
||||
<p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 44</p>
|
||||
{/* uptime status */}
|
||||
<div className="relative">
|
||||
<div className="flex h-[28px] w-full overflow-visible relative">
|
||||
{[{ status: "operational", width: "100%", details: "No incident reported" }].map(
|
||||
(segment, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-full group cursor-help relative
|
||||
${
|
||||
segment.status === "operational"
|
||||
? "bg-[#0CE77E]"
|
||||
: segment.status === "degraded"
|
||||
? "bg-yellow-500"
|
||||
: "bg-red-500"
|
||||
}`}
|
||||
style={{ width: segment.width }}
|
||||
>
|
||||
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
||||
{segment.status === "operational"
|
||||
? "Fully Operational"
|
||||
: segment.status === "degraded"
|
||||
? "Degraded Performance"
|
||||
: "System Down"}
|
||||
<br />
|
||||
Status: {segment.details}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
|
||||
<p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 17</p>
|
||||
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-medium text-[#0CE77E]">Database</h3>
|
||||
<h3 className="font-medium text-[#0CE77E]">99.910% uptime</h3>
|
||||
</div>
|
||||
|
||||
{/* uptime status */}
|
||||
<div className="relative">
|
||||
<div className="flex h-[28px] w-full overflow-visible relative">
|
||||
{[
|
||||
{ status: "operational", width: "90%", details: "No incident reported" },
|
||||
{
|
||||
status: "degraded",
|
||||
width: "0.5%",
|
||||
details: "Resolved - Deprecated DB API",
|
||||
},
|
||||
{ status: "operational", width: "9%", details: "No incident reported" },
|
||||
].map((segment, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-full group cursor-help relative
|
||||
${
|
||||
segment.status === "operational"
|
||||
? "bg-[#0CE77E]"
|
||||
: segment.status === "degraded"
|
||||
? "bg-yellow-500"
|
||||
: "bg-red-500"
|
||||
}`}
|
||||
style={{ width: segment.width }}
|
||||
>
|
||||
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
||||
{segment.status === "operational"
|
||||
? "Fully Operational"
|
||||
: segment.status === "degraded"
|
||||
? "Degraded Performance"
|
||||
: "System Down"}
|
||||
<br />
|
||||
Status: {segment.details}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user