Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b77ecf66e7 | |||
| c30fc18b43 | |||
| 91e50fc316 | |||
| 7860778920 |
@@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
extends: ['@headlamp-k8s/eslint-config'],
|
||||||
|
};
|
||||||
+3
-3
@@ -1,4 +1,4 @@
|
|||||||
version: "0.1.1"
|
version: "0.1.2"
|
||||||
name: headlamp-rook-ceph-plugin
|
name: headlamp-rook-ceph-plugin
|
||||||
displayName: Rook-Ceph Plugin
|
displayName: Rook-Ceph Plugin
|
||||||
createdAt: "2026-02-18T00:00:00Z"
|
createdAt: "2026-02-18T00:00:00Z"
|
||||||
@@ -23,7 +23,7 @@ maintainers:
|
|||||||
provider:
|
provider:
|
||||||
name: privilegedescalation
|
name: privilegedescalation
|
||||||
annotations:
|
annotations:
|
||||||
headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-rook-ceph-plugin/releases/download/v0.1.1/headlamp-rook-ceph-plugin-0.1.1.tar.gz"
|
headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-rook-ceph-plugin/releases/download/v0.1.2/headlamp-rook-ceph-plugin-0.1.2.tar.gz"
|
||||||
headlamp/plugin/archive-checksum: "sha256:642863314b0879233b0341341c59a1d7b979b1668585c3dda1ab54e21e0136a0"
|
headlamp/plugin/archive-checksum: "sha256:c74aef8dd3e67b66bd20ce4845d324ee351b3bb560b43a4a5fff26f31b3d73e1"
|
||||||
headlamp/plugin/distro-compat: ""
|
headlamp/plugin/distro-compat: ""
|
||||||
headlamp/plugin/version-compat: ">=0.20"
|
headlamp/plugin/version-compat: ">=0.20"
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "headlamp-rook-ceph-plugin",
|
"name": "headlamp-rook-ceph-plugin",
|
||||||
"version": "0.1.1",
|
"version": "0.1.2",
|
||||||
"description": "Headlamp plugin for Rook-Ceph cluster visibility and CSI driver monitoring",
|
"description": "Headlamp plugin for Rook-Ceph cluster visibility and CSI driver monitoring",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
@@ -18,16 +18,16 @@ import {
|
|||||||
filterRookCephStorageClasses,
|
filterRookCephStorageClasses,
|
||||||
isKubeList,
|
isKubeList,
|
||||||
ROOK_CEPH_NAMESPACE,
|
ROOK_CEPH_NAMESPACE,
|
||||||
RookCephPersistentVolume,
|
|
||||||
RookCephPVC,
|
|
||||||
RookCephPod,
|
|
||||||
RookCephStorageClass,
|
|
||||||
ROOK_CSI_CEPHFS_SELECTOR,
|
ROOK_CSI_CEPHFS_SELECTOR,
|
||||||
ROOK_CSI_RBD_SELECTOR,
|
ROOK_CSI_RBD_SELECTOR,
|
||||||
ROOK_MGR_SELECTOR,
|
ROOK_MGR_SELECTOR,
|
||||||
ROOK_MON_SELECTOR,
|
ROOK_MON_SELECTOR,
|
||||||
ROOK_OSD_SELECTOR,
|
|
||||||
ROOK_OPERATOR_SELECTOR,
|
ROOK_OPERATOR_SELECTOR,
|
||||||
|
ROOK_OSD_SELECTOR,
|
||||||
|
RookCephPersistentVolume,
|
||||||
|
RookCephPod,
|
||||||
|
RookCephPVC,
|
||||||
|
RookCephStorageClass,
|
||||||
} from './k8s';
|
} from './k8s';
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
|
|||||||
+4
-4
@@ -1,11 +1,14 @@
|
|||||||
import { describe, expect, it } from 'vitest';
|
import { describe, expect, it } from 'vitest';
|
||||||
import {
|
import {
|
||||||
filterRookCephPersistentVolumes,
|
filterRookCephPersistentVolumes,
|
||||||
|
filterRookCephPVCs,
|
||||||
filterRookCephStorageClasses,
|
filterRookCephStorageClasses,
|
||||||
formatAge,
|
findBoundPv,
|
||||||
formatAccessModes,
|
formatAccessModes,
|
||||||
|
formatAge,
|
||||||
formatBytes,
|
formatBytes,
|
||||||
formatStorageType,
|
formatStorageType,
|
||||||
|
getPodRestarts,
|
||||||
healthToStatus,
|
healthToStatus,
|
||||||
isKubeList,
|
isKubeList,
|
||||||
isPodReady,
|
isPodReady,
|
||||||
@@ -17,9 +20,6 @@ import {
|
|||||||
ROOK_CEPH_CEPHFS_PROVISIONER,
|
ROOK_CEPH_CEPHFS_PROVISIONER,
|
||||||
ROOK_CEPH_RBD_PROVISIONER,
|
ROOK_CEPH_RBD_PROVISIONER,
|
||||||
storageClassType,
|
storageClassType,
|
||||||
filterRookCephPVCs,
|
|
||||||
findBoundPv,
|
|
||||||
getPodRestarts,
|
|
||||||
} from './k8s';
|
} from './k8s';
|
||||||
|
|
||||||
describe('isRookCephProvisioner', () => {
|
describe('isRookCephProvisioner', () => {
|
||||||
|
|||||||
+2
-2
@@ -39,8 +39,8 @@ export const ROOK_OSD_SELECTOR = 'app=rook-ceph-osd';
|
|||||||
export const ROOK_MGR_SELECTOR = 'app=rook-ceph-mgr';
|
export const ROOK_MGR_SELECTOR = 'app=rook-ceph-mgr';
|
||||||
export const ROOK_MDS_SELECTOR = 'app=rook-ceph-mds';
|
export const ROOK_MDS_SELECTOR = 'app=rook-ceph-mds';
|
||||||
export const ROOK_RGW_SELECTOR = 'app=rook-ceph-rgw';
|
export const ROOK_RGW_SELECTOR = 'app=rook-ceph-rgw';
|
||||||
export const ROOK_CSI_RBD_SELECTOR = 'app=csi-rbdplugin-provisioner';
|
export const ROOK_CSI_RBD_SELECTOR = 'app=rook-ceph.rbd.csi.ceph.com-ctrlplugin';
|
||||||
export const ROOK_CSI_CEPHFS_SELECTOR = 'app=csi-cephfsplugin-provisioner';
|
export const ROOK_CSI_CEPHFS_SELECTOR = 'app=rook-ceph.cephfs.csi.ceph.com-ctrlplugin';
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Generic Kubernetes object base shapes
|
// Generic Kubernetes object base shapes
|
||||||
|
|||||||
@@ -11,8 +11,8 @@ import {
|
|||||||
StatusLabel,
|
StatusLabel,
|
||||||
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useRookCephContext } from '../api/RookCephDataContext';
|
|
||||||
import { CephBlockPool, formatAge, phaseToStatus } from '../api/k8s';
|
import { CephBlockPool, formatAge, phaseToStatus } from '../api/k8s';
|
||||||
|
import { useRookCephContext } from '../api/RookCephDataContext';
|
||||||
|
|
||||||
function BlockPoolDetail({ pool, onClose }: { pool: CephBlockPool; onClose: () => void }) {
|
function BlockPoolDetail({ pool, onClose }: { pool: CephBlockPool; onClose: () => void }) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import {
|
|||||||
StatusLabel,
|
StatusLabel,
|
||||||
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { formatAge, getPodRestarts } from '../api/k8s';
|
import { formatAge } from '../api/k8s';
|
||||||
|
|
||||||
interface CephPodDetailSectionProps {
|
interface CephPodDetailSectionProps {
|
||||||
resource: {
|
resource: {
|
||||||
|
|||||||
@@ -0,0 +1,164 @@
|
|||||||
|
/**
|
||||||
|
* FilesystemsPage — lists CephFilesystem resources.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
Loader,
|
||||||
|
NameValueTable,
|
||||||
|
SectionBox,
|
||||||
|
SectionHeader,
|
||||||
|
SimpleTable,
|
||||||
|
StatusLabel,
|
||||||
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { CephFilesystem, formatAge, phaseToStatus } from '../api/k8s';
|
||||||
|
import { useRookCephContext } from '../api/RookCephDataContext';
|
||||||
|
|
||||||
|
function FilesystemDetail({ fs, onClose }: { fs: CephFilesystem; onClose: () => void }) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0, right: 0, bottom: 0, width: '480px',
|
||||||
|
backgroundColor: 'var(--mui-palette-background-paper, #fff)',
|
||||||
|
boxShadow: '-4px 0 16px rgba(0,0,0,0.15)',
|
||||||
|
zIndex: 1300,
|
||||||
|
overflowY: 'auto',
|
||||||
|
padding: '24px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||||||
|
<strong>{fs.metadata.name}</strong>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
aria-label="Close"
|
||||||
|
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px' }}
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<SectionBox title="Filesystem Details">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[
|
||||||
|
{ name: 'Name', value: fs.metadata.name },
|
||||||
|
{ name: 'Namespace', value: fs.metadata.namespace ?? '—' },
|
||||||
|
{
|
||||||
|
name: 'Phase',
|
||||||
|
value: (
|
||||||
|
<StatusLabel status={phaseToStatus(fs.status?.phase)}>
|
||||||
|
{fs.status?.phase ?? 'Unknown'}
|
||||||
|
</StatusLabel>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ name: 'Age', value: formatAge(fs.metadata.creationTimestamp) },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
<SectionBox title="Metadata Server">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[
|
||||||
|
{ name: 'Active Count', value: String(fs.spec?.metadataServer?.activeCount ?? '—') },
|
||||||
|
{ name: 'Active Standby', value: String(fs.spec?.metadataServer?.activeStandby ?? '—') },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
{fs.spec?.dataPools && fs.spec.dataPools.length > 0 && (
|
||||||
|
<SectionBox title="Data Pools">
|
||||||
|
{fs.spec.dataPools.map((pool, i) => (
|
||||||
|
<NameValueTable
|
||||||
|
key={pool.name ?? i}
|
||||||
|
rows={[
|
||||||
|
{ name: 'Pool Name', value: pool.name ?? '—' },
|
||||||
|
{ name: 'Replicas', value: String(pool.replicated?.size ?? '—') },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</SectionBox>
|
||||||
|
)}
|
||||||
|
{fs.spec?.metadataPool && (
|
||||||
|
<SectionBox title="Metadata Pool">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[
|
||||||
|
{ name: 'Replicas', value: String(fs.spec.metadataPool.replicated?.size ?? '—') },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
)}
|
||||||
|
{fs.status?.info && Object.keys(fs.status.info).length > 0 && (
|
||||||
|
<SectionBox title="Status Info">
|
||||||
|
<NameValueTable
|
||||||
|
rows={Object.entries(fs.status.info).map(([k, v]) => ({ name: k, value: v }))}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FilesystemsPage() {
|
||||||
|
const { filesystems, loading, error } = useRookCephContext();
|
||||||
|
const [selected, setSelected] = useState<CephFilesystem | null>(null);
|
||||||
|
|
||||||
|
if (loading) return <Loader title="Loading filesystems..." />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SectionHeader title="Filesystems" />
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<SectionBox title="Error">
|
||||||
|
<NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
|
||||||
|
</SectionBox>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{filesystems.length === 0 ? (
|
||||||
|
<SectionBox title="No Filesystems">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[{ name: 'Status', value: 'No CephFilesystem resources found in rook-ceph namespace.' }]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
) : (
|
||||||
|
<SectionBox title={`Filesystems (${filesystems.length})`}>
|
||||||
|
<SimpleTable
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
label: 'Name',
|
||||||
|
getter: (f: CephFilesystem) => (
|
||||||
|
<button
|
||||||
|
onClick={() => setSelected(f)}
|
||||||
|
style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
|
||||||
|
>
|
||||||
|
{f.metadata.name}
|
||||||
|
</button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Phase',
|
||||||
|
getter: (f: CephFilesystem) => (
|
||||||
|
<StatusLabel status={phaseToStatus(f.status?.phase)}>
|
||||||
|
{f.status?.phase ?? 'Unknown'}
|
||||||
|
</StatusLabel>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ label: 'Active MDS', getter: (f: CephFilesystem) => String(f.spec?.metadataServer?.activeCount ?? '—') },
|
||||||
|
{ label: 'Active Standby', getter: (f: CephFilesystem) => String(f.spec?.metadataServer?.activeStandby ?? '—') },
|
||||||
|
{ label: 'Data Pools', getter: (f: CephFilesystem) => String(f.spec?.dataPools?.length ?? 0) },
|
||||||
|
{ label: 'Age', getter: (f: CephFilesystem) => formatAge(f.metadata.creationTimestamp) },
|
||||||
|
]}
|
||||||
|
data={filesystems}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selected && (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
|
||||||
|
onClick={() => setSelected(null)}
|
||||||
|
/>
|
||||||
|
<FilesystemDetail fs={selected} onClose={() => setSelected(null)} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,160 @@
|
|||||||
|
/**
|
||||||
|
* ObjectStoresPage — lists CephObjectStore resources.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
Loader,
|
||||||
|
NameValueTable,
|
||||||
|
SectionBox,
|
||||||
|
SectionHeader,
|
||||||
|
SimpleTable,
|
||||||
|
StatusLabel,
|
||||||
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { CephObjectStore, formatAge, phaseToStatus } from '../api/k8s';
|
||||||
|
import { useRookCephContext } from '../api/RookCephDataContext';
|
||||||
|
|
||||||
|
function ObjectStoreDetail({ store, onClose }: { store: CephObjectStore; onClose: () => void }) {
|
||||||
|
const endpoints = (store.status as unknown as Record<string, unknown>)?.endpoints as
|
||||||
|
| { insecure?: string[]; secure?: string[] }
|
||||||
|
| undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0, right: 0, bottom: 0, width: '480px',
|
||||||
|
backgroundColor: 'var(--mui-palette-background-paper, #fff)',
|
||||||
|
boxShadow: '-4px 0 16px rgba(0,0,0,0.15)',
|
||||||
|
zIndex: 1300,
|
||||||
|
overflowY: 'auto',
|
||||||
|
padding: '24px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||||||
|
<strong>{store.metadata.name}</strong>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
aria-label="Close"
|
||||||
|
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px' }}
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<SectionBox title="Object Store Details">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[
|
||||||
|
{ name: 'Name', value: store.metadata.name },
|
||||||
|
{ name: 'Namespace', value: store.metadata.namespace ?? '—' },
|
||||||
|
{
|
||||||
|
name: 'Phase',
|
||||||
|
value: (
|
||||||
|
<StatusLabel status={phaseToStatus(store.status?.phase)}>
|
||||||
|
{store.status?.phase ?? 'Unknown'}
|
||||||
|
</StatusLabel>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ name: 'Age', value: formatAge(store.metadata.creationTimestamp) },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
<SectionBox title="Gateway">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[
|
||||||
|
{ name: 'Port', value: String(store.spec?.gateway?.port ?? '—') },
|
||||||
|
{ name: 'Secure Port', value: String(store.spec?.gateway?.securePort ?? '—') },
|
||||||
|
{ name: 'Instances', value: String(store.spec?.gateway?.instances ?? '—') },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
{(endpoints?.insecure?.length || endpoints?.secure?.length) ? (
|
||||||
|
<SectionBox title="Endpoints">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[
|
||||||
|
...(endpoints?.insecure?.length
|
||||||
|
? [{ name: 'Insecure', value: endpoints.insecure.join(', ') }]
|
||||||
|
: []),
|
||||||
|
...(endpoints?.secure?.length
|
||||||
|
? [{ name: 'Secure', value: endpoints.secure.join(', ') }]
|
||||||
|
: []),
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
) : null}
|
||||||
|
{store.status?.info && Object.keys(store.status.info).length > 0 && (
|
||||||
|
<SectionBox title="Status Info">
|
||||||
|
<NameValueTable
|
||||||
|
rows={Object.entries(store.status.info).map(([k, v]) => ({ name: k, value: v }))}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ObjectStoresPage() {
|
||||||
|
const { objectStores, loading, error } = useRookCephContext();
|
||||||
|
const [selected, setSelected] = useState<CephObjectStore | null>(null);
|
||||||
|
|
||||||
|
if (loading) return <Loader title="Loading object stores..." />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SectionHeader title="Object Stores" />
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<SectionBox title="Error">
|
||||||
|
<NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
|
||||||
|
</SectionBox>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{objectStores.length === 0 ? (
|
||||||
|
<SectionBox title="No Object Stores">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[{ name: 'Status', value: 'No CephObjectStore resources found in rook-ceph namespace.' }]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
) : (
|
||||||
|
<SectionBox title={`Object Stores (${objectStores.length})`}>
|
||||||
|
<SimpleTable
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
label: 'Name',
|
||||||
|
getter: (o: CephObjectStore) => (
|
||||||
|
<button
|
||||||
|
onClick={() => setSelected(o)}
|
||||||
|
style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
|
||||||
|
>
|
||||||
|
{o.metadata.name}
|
||||||
|
</button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Phase',
|
||||||
|
getter: (o: CephObjectStore) => (
|
||||||
|
<StatusLabel status={phaseToStatus(o.status?.phase)}>
|
||||||
|
{o.status?.phase ?? 'Unknown'}
|
||||||
|
</StatusLabel>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ label: 'Gateway Port', getter: (o: CephObjectStore) => String(o.spec?.gateway?.port ?? '—') },
|
||||||
|
{ label: 'Instances', getter: (o: CephObjectStore) => String(o.spec?.gateway?.instances ?? '—') },
|
||||||
|
{ label: 'Age', getter: (o: CephObjectStore) => formatAge(o.metadata.creationTimestamp) },
|
||||||
|
]}
|
||||||
|
data={objectStores}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selected && (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
|
||||||
|
onClick={() => setSelected(null)}
|
||||||
|
/>
|
||||||
|
<ObjectStoreDetail store={selected} onClose={() => setSelected(null)} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -15,8 +15,8 @@ import {
|
|||||||
StatusLabel,
|
StatusLabel,
|
||||||
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useRookCephContext } from '../api/RookCephDataContext';
|
|
||||||
import { formatAge, formatBytes, healthToStatus, phaseToStatus, storageClassType } from '../api/k8s';
|
import { formatAge, formatBytes, healthToStatus, phaseToStatus, storageClassType } from '../api/k8s';
|
||||||
|
import { useRookCephContext } from '../api/RookCephDataContext';
|
||||||
import ClusterStatusCard from './ClusterStatusCard';
|
import ClusterStatusCard from './ClusterStatusCard';
|
||||||
|
|
||||||
export default function OverviewPage() {
|
export default function OverviewPage() {
|
||||||
|
|||||||
@@ -10,8 +10,8 @@ import {
|
|||||||
SectionBox,
|
SectionBox,
|
||||||
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { findBoundPv, formatStorageType } from '../api/k8s';
|
||||||
import { useRookCephContext } from '../api/RookCephDataContext';
|
import { useRookCephContext } from '../api/RookCephDataContext';
|
||||||
import { findBoundPv, formatStorageType, storageClassType } from '../api/k8s';
|
|
||||||
|
|
||||||
interface PVCDetailSectionProps {
|
interface PVCDetailSectionProps {
|
||||||
resource: {
|
resource: {
|
||||||
|
|||||||
@@ -11,8 +11,8 @@ import {
|
|||||||
StatusLabel,
|
StatusLabel,
|
||||||
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useRookCephContext } from '../api/RookCephDataContext';
|
|
||||||
import { formatAge, getPodRestarts, isPodReady, RookCephPod } from '../api/k8s';
|
import { formatAge, getPodRestarts, isPodReady, RookCephPod } from '../api/k8s';
|
||||||
|
import { useRookCephContext } from '../api/RookCephDataContext';
|
||||||
|
|
||||||
function PodTable({ pods, title }: { pods: RookCephPod[]; title: string }) {
|
function PodTable({ pods, title }: { pods: RookCephPod[]; title: string }) {
|
||||||
if (pods.length === 0) return null;
|
if (pods.length === 0) return null;
|
||||||
@@ -39,6 +39,40 @@ function PodTable({ pods, title }: { pods: RookCephPod[]; title: string }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function OsdTable({ pods }: { pods: RookCephPod[] }) {
|
||||||
|
if (pods.length === 0) return null;
|
||||||
|
return (
|
||||||
|
<SectionBox title={`OSDs (${pods.length})`}>
|
||||||
|
<SimpleTable
|
||||||
|
columns={[
|
||||||
|
{ label: 'OSD ID', getter: (p) => p.metadata.labels?.['osd'] ?? p.metadata.name },
|
||||||
|
{
|
||||||
|
label: 'Status',
|
||||||
|
getter: (p) => {
|
||||||
|
const st = isPodReady(p) ? 'success' : p.status?.phase === 'Pending' ? 'warning' : 'error';
|
||||||
|
return (
|
||||||
|
<StatusLabel status={st}>
|
||||||
|
{p.status?.phase ?? 'Unknown'}
|
||||||
|
</StatusLabel>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Node',
|
||||||
|
getter: (p) => p.spec?.nodeName ?? p.metadata.labels?.['topology-location-host'] ?? '—',
|
||||||
|
},
|
||||||
|
{ label: 'Device Class', getter: (p) => p.metadata.labels?.['device-class'] ?? '—' },
|
||||||
|
{ label: 'Store', getter: (p) => p.metadata.labels?.['osd-store'] ?? '—' },
|
||||||
|
{ label: 'Failure Domain', getter: (p) => p.metadata.labels?.['failure-domain'] ?? '—' },
|
||||||
|
{ label: 'Restarts', getter: (p) => String(getPodRestarts(p)) },
|
||||||
|
{ label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
|
||||||
|
]}
|
||||||
|
data={pods}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function PodsPage() {
|
export default function PodsPage() {
|
||||||
const {
|
const {
|
||||||
operatorPods,
|
operatorPods,
|
||||||
@@ -84,7 +118,7 @@ export default function PodsPage() {
|
|||||||
<PodTable pods={operatorPods} title="Operator" />
|
<PodTable pods={operatorPods} title="Operator" />
|
||||||
<PodTable pods={monPods} title="Monitors (MON)" />
|
<PodTable pods={monPods} title="Monitors (MON)" />
|
||||||
<PodTable pods={mgrPods} title="Managers (MGR)" />
|
<PodTable pods={mgrPods} title="Managers (MGR)" />
|
||||||
<PodTable pods={osdPods} title="OSDs" />
|
<OsdTable pods={osdPods} />
|
||||||
<PodTable pods={csiRbdPods} title="CSI RBD Provisioner" />
|
<PodTable pods={csiRbdPods} title="CSI RBD Provisioner" />
|
||||||
<PodTable pods={csiCephfsPods} title="CSI CephFS Provisioner" />
|
<PodTable pods={csiCephfsPods} title="CSI CephFS Provisioner" />
|
||||||
|
|
||||||
|
|||||||
@@ -11,8 +11,8 @@ import {
|
|||||||
StatusLabel,
|
StatusLabel,
|
||||||
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useRookCephContext } from '../api/RookCephDataContext';
|
|
||||||
import { formatAge, formatStorageType, RookCephStorageClass, storageClassType } from '../api/k8s';
|
import { formatAge, formatStorageType, RookCephStorageClass, storageClassType } from '../api/k8s';
|
||||||
|
import { useRookCephContext } from '../api/RookCephDataContext';
|
||||||
|
|
||||||
function StorageClassDetail({ sc, pvCount, onClose }: { sc: RookCephStorageClass; pvCount: number; onClose: () => void }) {
|
function StorageClassDetail({ sc, pvCount, onClose }: { sc: RookCephStorageClass; pvCount: number; onClose: () => void }) {
|
||||||
const type = storageClassType(sc);
|
const type = storageClassType(sc);
|
||||||
|
|||||||
@@ -11,8 +11,8 @@ import {
|
|||||||
StatusLabel,
|
StatusLabel,
|
||||||
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useRookCephContext } from '../api/RookCephDataContext';
|
|
||||||
import { formatAccessModes, formatAge, phaseToStatus, RookCephPersistentVolume } from '../api/k8s';
|
import { formatAccessModes, formatAge, phaseToStatus, RookCephPersistentVolume } from '../api/k8s';
|
||||||
|
import { useRookCephContext } from '../api/RookCephDataContext';
|
||||||
|
|
||||||
function PVDetail({ pv, onClose }: { pv: RookCephPersistentVolume; onClose: () => void }) {
|
function PVDetail({ pv, onClose }: { pv: RookCephPersistentVolume; onClose: () => void }) {
|
||||||
const attrs = pv.spec.csi?.volumeAttributes ?? {};
|
const attrs = pv.spec.csi?.volumeAttributes ?? {};
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { isRookCephProvisioner, formatStorageType } from '../../api/k8s';
|
import { formatStorageType, isRookCephProvisioner } from '../../api/k8s';
|
||||||
|
|
||||||
/** Safely read a nested field from either a KubeObject instance or plain object. */
|
/** Safely read a nested field from either a KubeObject instance or plain object. */
|
||||||
function getField(item: unknown, ...path: string[]): unknown {
|
function getField(item: unknown, ...path: string[]): unknown {
|
||||||
|
|||||||
+42
-11
@@ -6,7 +6,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import {
|
import {
|
||||||
registerAppBarAction,
|
|
||||||
registerDetailsViewSection,
|
registerDetailsViewSection,
|
||||||
registerResourceTableColumnsProcessor,
|
registerResourceTableColumnsProcessor,
|
||||||
registerRoute,
|
registerRoute,
|
||||||
@@ -14,10 +13,11 @@ import {
|
|||||||
} from '@kinvolk/headlamp-plugin/lib';
|
} from '@kinvolk/headlamp-plugin/lib';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { RookCephDataProvider } from './api/RookCephDataContext';
|
import { RookCephDataProvider } from './api/RookCephDataContext';
|
||||||
import AppBarClusterBadge from './components/AppBarClusterBadge';
|
|
||||||
import BlockPoolsPage from './components/BlockPoolsPage';
|
import BlockPoolsPage from './components/BlockPoolsPage';
|
||||||
import CephPodDetailSection from './components/CephPodDetailSection';
|
import CephPodDetailSection from './components/CephPodDetailSection';
|
||||||
|
import FilesystemsPage from './components/FilesystemsPage';
|
||||||
import { buildPVColumns, buildStorageClassColumns } from './components/integrations/StorageClassColumns';
|
import { buildPVColumns, buildStorageClassColumns } from './components/integrations/StorageClassColumns';
|
||||||
|
import ObjectStoresPage from './components/ObjectStoresPage';
|
||||||
import OverviewPage from './components/OverviewPage';
|
import OverviewPage from './components/OverviewPage';
|
||||||
import PodsPage from './components/PodsPage';
|
import PodsPage from './components/PodsPage';
|
||||||
import PVCDetailSection from './components/PVCDetailSection';
|
import PVCDetailSection from './components/PVCDetailSection';
|
||||||
@@ -53,6 +53,22 @@ registerSidebarEntry({
|
|||||||
icon: 'mdi:database',
|
icon: 'mdi:database',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
registerSidebarEntry({
|
||||||
|
parent: 'rook-ceph',
|
||||||
|
name: 'rook-ceph-filesystems',
|
||||||
|
label: 'Filesystems',
|
||||||
|
url: '/rook-ceph/filesystems',
|
||||||
|
icon: 'mdi:folder-network',
|
||||||
|
});
|
||||||
|
|
||||||
|
registerSidebarEntry({
|
||||||
|
parent: 'rook-ceph',
|
||||||
|
name: 'rook-ceph-objectstores',
|
||||||
|
label: 'Object Stores',
|
||||||
|
url: '/rook-ceph/object-stores',
|
||||||
|
icon: 'mdi:bucket',
|
||||||
|
});
|
||||||
|
|
||||||
registerSidebarEntry({
|
registerSidebarEntry({
|
||||||
parent: 'rook-ceph',
|
parent: 'rook-ceph',
|
||||||
name: 'rook-ceph-pods',
|
name: 'rook-ceph-pods',
|
||||||
@@ -89,6 +105,30 @@ registerRoute({
|
|||||||
),
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
registerRoute({
|
||||||
|
path: '/rook-ceph/filesystems',
|
||||||
|
sidebar: 'rook-ceph-filesystems',
|
||||||
|
name: 'rook-ceph-filesystems',
|
||||||
|
exact: true,
|
||||||
|
component: () => (
|
||||||
|
<RookCephDataProvider>
|
||||||
|
<FilesystemsPage />
|
||||||
|
</RookCephDataProvider>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
registerRoute({
|
||||||
|
path: '/rook-ceph/object-stores',
|
||||||
|
sidebar: 'rook-ceph-objectstores',
|
||||||
|
name: 'rook-ceph-objectstores',
|
||||||
|
exact: true,
|
||||||
|
component: () => (
|
||||||
|
<RookCephDataProvider>
|
||||||
|
<ObjectStoresPage />
|
||||||
|
</RookCephDataProvider>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
// Storage Classes and Volumes pages accessible via direct URL
|
// Storage Classes and Volumes pages accessible via direct URL
|
||||||
registerRoute({
|
registerRoute({
|
||||||
path: '/rook-ceph/storage-classes',
|
path: '/rook-ceph/storage-classes',
|
||||||
@@ -172,12 +212,3 @@ registerResourceTableColumnsProcessor(({ id, columns }) => {
|
|||||||
return columns;
|
return columns;
|
||||||
});
|
});
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// App bar action — cluster health badge
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
registerAppBarAction(() => (
|
|
||||||
<RookCephDataProvider>
|
|
||||||
<AppBarClusterBadge />
|
|
||||||
</RookCephDataProvider>
|
|
||||||
));
|
|
||||||
|
|||||||
Reference in New Issue
Block a user