bar graph fix

This commit is contained in:
Jack Mechem 2026-05-22 15:10:54 -07:00
parent 43318fb8cd
commit 8c3d749197
15 changed files with 973 additions and 401 deletions

View file

@ -1,6 +1,7 @@
"use client";
import { useState, useEffect } from "react";
import HelpTooltip from "./HelpTooltip";
const SERVICES = [
"syncthing",
@ -140,12 +141,14 @@ export default function ControlPanel({ onClose }: { onClose: () => void }) {
Manage services
</h2>
</div>
<button
onClick={onClose}
className="border border-gray-200 rounded-lg px-3.5 py-1.5 text-[13px] text-gray-400 cursor-pointer hover:bg-gray-50 transition-colors"
>
Close
</button>
<HelpTooltip text="Close this control panel.">
<button
onClick={onClose}
className="border border-gray-200 rounded-lg px-3.5 py-1.5 text-[13px] text-gray-400 cursor-pointer hover:bg-gray-50 transition-colors"
>
Close
</button>
</HelpTooltip>
</div>
{/* Services */}
@ -165,25 +168,28 @@ export default function ControlPanel({ onClose }: { onClose: () => void }) {
</div>
<div className="flex gap-1.5 shrink-0">
{["start", "stop", "restart"].map((action) => (
<button
key={action}
onClick={() =>
!isLoading(svc, action) && handleService(action, svc)
}
disabled={isLoading(svc, action)}
className={btnClass(svc, action)}
>
{isLoading(svc, action)
? "..."
: action.charAt(0).toUpperCase() + action.slice(1)}
</button>
<HelpTooltip key={action} text={`${action.charAt(0).toUpperCase() + action.slice(1)} the ${svc} service.`}>
<button
onClick={() =>
!isLoading(svc, action) && handleService(action, svc)
}
disabled={isLoading(svc, action)}
className={btnClass(svc, action)}
>
{isLoading(svc, action)
? "..."
: action.charAt(0).toUpperCase() + action.slice(1)}
</button>
</HelpTooltip>
))}
<button
onClick={() => handleLogs(svc)}
className="rounded-md px-2.5 py-1 text-[13px] whitespace-nowrap border border-blue-100 text-blue-400 cursor-pointer hover:bg-blue-50 transition-colors"
>
Logs
</button>
<HelpTooltip text={`Fetch and display recent logs for the ${svc} service.`}>
<button
onClick={() => handleLogs(svc)}
className="rounded-md px-2.5 py-1 text-[13px] whitespace-nowrap border border-blue-100 text-blue-400 cursor-pointer hover:bg-blue-50 transition-colors"
>
Logs
</button>
</HelpTooltip>
</div>
</div>
))}
@ -202,12 +208,14 @@ export default function ControlPanel({ onClose }: { onClose: () => void }) {
Immediately restarts the machine
</p>
</div>
<button
onClick={handleReboot}
className="border border-red-200 rounded-lg px-3.5 py-1.5 text-[13px] text-red-400 cursor-pointer hover:bg-red-50 transition-colors whitespace-nowrap"
>
Reboot
</button>
<HelpTooltip text="Immediately restart the server. All services will briefly go offline.">
<button
onClick={handleReboot}
className="border border-red-200 rounded-lg px-3.5 py-1.5 text-[13px] text-red-400 cursor-pointer hover:bg-red-50 transition-colors whitespace-nowrap"
>
Reboot
</button>
</HelpTooltip>
</div>
</div>
<div className="bg-gray-50 border border-gray-100 rounded-xl px-4 py-3.5 flex items-center justify-between mt-2">
@ -219,12 +227,14 @@ export default function ControlPanel({ onClose }: { onClose: () => void }) {
Powers off the machine
</p>
</div>
<button
onClick={handleShutdown}
className="border border-red-200 rounded-lg px-3.5 py-1.5 text-[13px] text-red-400 cursor-pointer hover:bg-red-50 transition-colors whitespace-nowrap"
>
Shut down
</button>
<HelpTooltip text="Power off the server completely. You will need physical access to turn it back on.">
<button
onClick={handleShutdown}
className="border border-red-200 rounded-lg px-3.5 py-1.5 text-[13px] text-red-400 cursor-pointer hover:bg-red-50 transition-colors whitespace-nowrap"
>
Shut down
</button>
</HelpTooltip>
</div>
{/* Toast */}