Skip to content

Add 4TB visual limit and remove 'extra' #6168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
theoilie merged 2 commits into from
Sep 28, 2023
Merged

Add 4TB visual limit and remove 'extra' #6168

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e1042d6
Add 4TB visual limit and remove 'extra'
theoilie Sep 28, 2023
5510e16
Remove comment
theoilie Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 15 additions & 19 deletions monitoring/healthz/src/pages/Nodes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,15 +137,17 @@ function HealthRow({ isContent, sp }: { isContent: boolean; sp: SP }) {

let totalMediorumUsed: number | '?' = '?'
if (health.blobStorePrefix === 'file') totalMediorumUsed = mediorumDiskUsed
else if (typeof lastCleanupSize === 'number') totalMediorumUsed = lastCleanupSize
else if (typeof lastRepairSize === 'number') totalMediorumUsed = lastRepairSize
else {
// Use the last "full" repair.go run because it would've checked the most files
if (typeof lastCleanupSize === 'number') totalMediorumUsed = lastCleanupSize
else if (typeof lastRepairSize === 'number') totalMediorumUsed = lastRepairSize

// Storage used beyond files that mediorum is supposed to have (i.e., not files that have a hash where the node is in the top R rendezvous)
const extraMediorumUsed = typeof totalMediorumUsed === 'number' && typeof lastRepairSize === 'number' ? totalMediorumUsed - lastRepairSize : '?'
// But it's possible the last normal repair.go run added more files
if (lastRepairSize > lastCleanupSize) totalMediorumUsed = lastRepairSize
}

let totalMediorumSize: number | '?' = health.blobStorePrefix === 'file' ? mediorumDiskSize : '?'
if (totalMediorumSize === '?' && typeof lastCleanupSize === 'number') totalMediorumSize = lastCleanupSize
if (totalMediorumSize === '?' && typeof lastRepairSize === 'number') totalMediorumSize = lastRepairSize
// 4TB artificial limit for cloud backends
const totalMediorumSize = mediorumDiskSize && health.blobStorePrefix === 'file' ? mediorumDiskSize : 4000

const isBehind = health.block_difference > 5 ? 'is-unhealthy' : ''
const dbSize =
Expand Down Expand Up @@ -225,12 +227,11 @@ function HealthRow({ isContent, sp }: { isContent: boolean; sp: SP }) {
{isContent && (
<td className="whitespace-nowrap px-3 py-5 text-sm">
<ProgressBar
validStorage={lastRepairSize}
extraStorage={extraMediorumUsed}
progress={totalMediorumUsed === '?' ? 0 : totalMediorumUsed}
total={totalMediorumSize}
/>
<div className="mt-3 flex">
{getStorageBackendIcon(health.blobStorePrefix)} <span className="w-[10px]" /> {health.blobStorePrefix === 'file' ? <span>{mediorumDiskSize - mediorumDiskUsed} GB</span> : <span>&infin;</span>} <span className="w-[4px]" /> available
{getStorageBackendIcon(health.blobStorePrefix)} <span className="w-[10px]" /> {totalMediorumUsed} / {totalMediorumSize} GB
</div>
</td>
)}
Expand Down Expand Up @@ -323,18 +324,13 @@ const getStorageBackendIcon = (storageBackend: string) => {
}
}

const ProgressBar = ({ validStorage, extraStorage, total }: { validStorage: number | '?'; extraStorage: number | '?'; total: number | '?' }) => {
const greenWidth = typeof validStorage === 'number' && typeof total === 'number' && (validStorage / total) * 100
const redWidth = typeof extraStorage === 'number' && typeof total === 'number' && (extraStorage / total) * 100
const ProgressBar = ({ progress, total }: { progress: number; total: number }) => {
const progressPercent = (progress / Math.max(total, 4000)) * 100

return (
<div className="min-w-[200px] relative">
<div className="h-6 bg-gray-300 relative rounded-3xl">
{greenWidth !== false && <span className={`h-6 block absolute bg-green-400 ${greenWidth === 100 ? 'rounded-3xl' : 'rounded-l-3xl'}`} style={{ width: `${greenWidth}%` }}></span>}
{greenWidth !== false && redWidth !== false && <span className={`h-6 block absolute bg-orange-400 ${greenWidth + redWidth > 99.9 ? 'rounded-r-3xl' : ''}`} style={{ width: `${redWidth}%`, marginLeft: `${greenWidth}%` }}></span>}
</div>
<div className="absolute top-0 text-xs w-full h-full text-center flex items-center">
<span className="w-full">{validStorage} GB valid, {extraStorage} GB extra</span>
<div className="h-5 bg-gray-300 relative rounded-3xl">
<span className={`h-5 block absolute bg-purple-300 ${progressPercent >= 99.999 ? 'rounded-3xl' : 'rounded-l-3xl'}`} style={{ width: `${progressPercent}%` }}></span>
</div>
</div>
)
Expand Down