DevContainer User
62c24e3857
- Register AppBarClusterBadge via registerAppBarAction (was dead code) - Add Rook 1.12+ CSI pod labels to CephPodDetailSection alongside legacy labels - Add sidebar entries for Storage Classes and Volumes pages - Add role="dialog", aria-modal, aria-labelledby, and Escape key to all detail drawers - Replace hardcoded hex colors with CSS custom properties for dark/light theme compat - Remove duplicate parseStorageToBytes from OverviewPage (import from k8s.ts) - Add endpoints field to CephObjectStoreStatus interface (remove unsafe cast) - Use ROOK_CEPH_API_GROUP/VERSION constants in API URL construction - Hoist extractJsonData to module level - Remove dead extractPoolFromVolumeHandle function - Fix redundant storageClasses.length guard in OverviewPage - Fix lint indent warnings - Update CLAUDE.md and CHANGELOG.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
/**
|
|
* AppBarClusterBadge — registerAppBarAction cluster health badge.
|
|
*
|
|
* Displays "rook-ceph: HEALTH_OK" in the Headlamp top nav bar.
|
|
* Color-coded: green=HEALTH_OK, orange=HEALTH_WARN, red=HEALTH_ERR.
|
|
* Returns null if no CephCluster found (no clutter on unmanaged clusters).
|
|
*
|
|
* Wrapped in RookCephDataProvider at registration time (index.tsx).
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { useHistory } from 'react-router-dom';
|
|
import { useRookCephContext } from '../api/RookCephDataContext';
|
|
|
|
function getHealthColor(health: string | undefined): string {
|
|
switch (health) {
|
|
case 'HEALTH_OK':
|
|
return 'var(--mui-palette-success-main, #4caf50)';
|
|
case 'HEALTH_WARN':
|
|
return 'var(--mui-palette-warning-main, #ff9800)';
|
|
case 'HEALTH_ERR':
|
|
return 'var(--mui-palette-error-main, #f44336)';
|
|
default:
|
|
return 'var(--mui-palette-action-disabled, #9e9e9e)';
|
|
}
|
|
}
|
|
|
|
export default function AppBarClusterBadge() {
|
|
const { cephClusters, loading } = useRookCephContext();
|
|
const history = useHistory();
|
|
|
|
if (loading || cephClusters.length === 0) return null;
|
|
|
|
const primary = cephClusters[0];
|
|
const health = primary?.status?.ceph?.health;
|
|
|
|
const color = getHealthColor(health);
|
|
const label = health ?? 'Unknown';
|
|
const ariaLabel = `Rook-Ceph cluster health: ${label}`;
|
|
|
|
const handleClick = () => {
|
|
history.push('/rook-ceph');
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleClick}
|
|
style={{
|
|
cursor: 'pointer',
|
|
marginRight: '8px',
|
|
padding: '4px 12px',
|
|
borderRadius: '16px',
|
|
border: 'none',
|
|
backgroundColor: color,
|
|
color: 'white',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '4px',
|
|
}}
|
|
aria-label={ariaLabel}
|
|
title={ariaLabel}
|
|
>
|
|
<span>rook-ceph: {label}</span>
|
|
</button>
|
|
);
|
|
}
|