365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add react-icons dependency and update UptimeStatusIsland component for responsive design

Browse Source 
- Added react-icons package to the project for icon usage.
- Enhanced UptimeStatusIsland component to display responsive badges for certificate expiry, average ping, and uptime metrics, utilizing icons for mobile views.
This commit is contained in:
becarta
2025-06-08 01:44:31 +02:00
parent b43b8c3ed7
commit 0b3aea9f87
3 changed files with 44 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/UptimeStatusIsland.jsx
View File

@@ -1,4 +1,5 @@
import React, { useState, useEffect, useCallback } from 'react';
import { FiAward, FiPercent, FiActivity } from 'react-icons/fi';
function getStatusColor(validCert) {
if (validCert === false) return 'bg-red-600';
@@ -90,26 +91,48 @@ export default function UptimeStatusIsland() {
{/* Cert Exp (center-left, col-span-1) */}
<div className="flex justify-center col-span-1">
{monitor.certExpiryDaysRemaining !== undefined && (
<span className={`px-2 py-0 rounded-full text-xs font-medium text-white ${getCertBg(monitor.certExpiryDaysRemaining)}`}
title={monitor.certExpiryDaysRemaining < 0 ? 'Certificate expired!' : `Certificate expires in ${monitor.certExpiryDaysRemaining} days`}>
{getCertText(monitor.certExpiryDaysRemaining)}
</span>
<>
{/* Desktop: full badge */}
<span className={`hidden sm:inline px-2 py-0 rounded-full text-xs font-medium text-white ${getCertBg(monitor.certExpiryDaysRemaining)}`}
title={monitor.certExpiryDaysRemaining < 0 ? 'Certificate expired!' : `Certificate expires in ${monitor.certExpiryDaysRemaining} days`}>
{getCertText(monitor.certExpiryDaysRemaining)}
</span>
{/* Mobile: icon badge */}
<span className={`sm:hidden px-2 py-0 rounded-full text-xs font-medium flex items-center justify-center ${getCertBg(monitor.certExpiryDaysRemaining)}`}
title={monitor.certExpiryDaysRemaining < 0 ? 'Certificate expired!' : `Certificate expires in ${monitor.certExpiryDaysRemaining} days`}>
<FiAward className="w-4 h-4" />
</span>
</>
)}
</div>
{/* Avg. (center-right, col-span-1) */}
<div className="flex justify-center col-span-1">
{monitor.avgPing !== undefined && (
<span className={`px-2 py-0 rounded-full text-xs font-medium ${getAvgPingBg(monitor.avgPing)}`}>
Avg.: {monitor.avgPing < 100 ? monitor.avgPing.toFixed(1) : Math.round(monitor.avgPing)} ms
</span>
<>
{/* Desktop: full badge */}
<span className={`hidden sm:inline px-2 py-0 rounded-full text-xs font-medium ${getAvgPingBg(monitor.avgPing)}`}>
Avg.: {monitor.avgPing < 100 ? monitor.avgPing.toFixed(1) : Math.round(monitor.avgPing)} ms
</span>
{/* Mobile: icon badge */}
<span className={`sm:hidden px-2 py-0 rounded-full text-xs font-medium flex items-center justify-center ${getAvgPingBg(monitor.avgPing)}`}>
<FiActivity className="w-4 h-4" />
</span>
</>
)}
</div>
{/* 24h (right, col-span-1) */}
<div className="flex justify-end col-span-1">
{monitor.uptime24h !== undefined && (
<span className={`px-2 py-0 rounded-full text-xs font-medium ${getUptime24hBg(monitor.uptime24h)}`}>
24h: {monitor.uptime24h.toFixed(1)}%
</span>
<>
{/* Desktop: full badge */}
<span className={`hidden sm:inline px-2 py-0 rounded-full text-xs font-medium ${getUptime24hBg(monitor.uptime24h)}`}>
24h: {monitor.uptime24h.toFixed(1)}%
</span>
{/* Mobile: icon badge */}
<span className={`sm:hidden px-2 py-0 rounded-full text-xs font-medium flex items-center justify-center ${getUptime24hBg(monitor.uptime24h)}`}>
<FiPercent className="w-4 h-4" />
</span>
</>
)}
</div>
</div>