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

10
package-lock.json generated
View File

@@ -30,6 +30,7 @@
"rate-limiter-flexible": "^5.0.5", "rate-limiter-flexible": "^5.0.5",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"unpic": "^3.22.0" "unpic": "^3.22.0"
}, },
"devDependencies": { "devDependencies": {
@@ -9174,6 +9175,15 @@
"react": "^19.0.0" "react": "^19.0.0"
} }
}, },
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-refresh": { "node_modules/react-refresh": {
"version": "0.14.2", "version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

1
package.json
View File

@@ -44,6 +44,7 @@
"rate-limiter-flexible": "^5.0.5", "rate-limiter-flexible": "^5.0.5",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"unpic": "^3.22.0" "unpic": "^3.22.0"
}, },
"devDependencies": { "devDependencies": {

29
src/components/UptimeStatusIsland.jsx
View File

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