bar graph fix
This commit is contained in:
parent
43318fb8cd
commit
8c3d749197
15 changed files with 973 additions and 401 deletions
|
|
@ -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 */}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue