src/api/RookCephDataContext.tsx

@@ -18,16 +18,16 @@ import {
   filterRookCephStorageClasses,
   isKubeList,
   ROOK_CEPH_NAMESPACE,
-  RookCephPersistentVolume,
-  RookCephPVC,
-  RookCephPod,
-  RookCephStorageClass,
   ROOK_CSI_CEPHFS_SELECTOR,
   ROOK_CSI_RBD_SELECTOR,
   ROOK_MGR_SELECTOR,
   ROOK_MON_SELECTOR,
-  ROOK_OSD_SELECTOR,
   ROOK_OPERATOR_SELECTOR,
+  ROOK_OSD_SELECTOR,
+  RookCephPersistentVolume,
+  RookCephPod,
+  RookCephPVC,
+  RookCephStorageClass,
 } from './k8s';
 
 // ---------------------------------------------------------------------------

src/api/k8s.test.ts

@@ -1,11 +1,14 @@
 import { describe, expect, it } from 'vitest';
 import {
   filterRookCephPersistentVolumes,
+  filterRookCephPVCs,
   filterRookCephStorageClasses,
-  formatAge,
+  findBoundPv,
   formatAccessModes,
+  formatAge,
   formatBytes,
   formatStorageType,
+  getPodRestarts,
   healthToStatus,
   isKubeList,
   isPodReady,
@@ -17,9 +20,6 @@ import {
   ROOK_CEPH_CEPHFS_PROVISIONER,
   ROOK_CEPH_RBD_PROVISIONER,
   storageClassType,
-  filterRookCephPVCs,
-  findBoundPv,
-  getPodRestarts,
 } from './k8s';
 
 describe('isRookCephProvisioner', () => {

src/api/k8s.ts

@@ -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_MDS_SELECTOR = 'app=rook-ceph-mds';
 export const ROOK_RGW_SELECTOR = 'app=rook-ceph-rgw';
-export const ROOK_CSI_RBD_SELECTOR = 'app=csi-rbdplugin-provisioner';
-export const ROOK_CSI_CEPHFS_SELECTOR = 'app=csi-cephfsplugin-provisioner';
+export const ROOK_CSI_RBD_SELECTOR = 'app=rook-ceph.rbd.csi.ceph.com-ctrlplugin';
+export const ROOK_CSI_CEPHFS_SELECTOR = 'app=rook-ceph.cephfs.csi.ceph.com-ctrlplugin';
 
 // ---------------------------------------------------------------------------
 // Generic Kubernetes object base shapes

src/components/FilesystemsPage.tsx

@@ -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)} />
+        </>
+      )}
+    </>
+  );
+}

src/components/ObjectStoresPage.tsx

@@ -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)} />
+        </>
+      )}
+    </>
+  );
+}

src/components/PodsPage.tsx

@@ -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() {
   const {
     operatorPods,
@@ -84,7 +118,7 @@ export default function PodsPage() {
       <PodTable pods={operatorPods} title="Operator" />
       <PodTable pods={monPods} title="Monitors (MON)" />
       <PodTable pods={mgrPods} title="Managers (MGR)" />
-      <PodTable pods={osdPods} title="OSDs" />
+      <OsdTable pods={osdPods} />
       <PodTable pods={csiRbdPods} title="CSI RBD Provisioner" />
       <PodTable pods={csiCephfsPods} title="CSI CephFS Provisioner" />
 

src/index.tsx

@@ -6,7 +6,6 @@
  */
 
 import {
-  registerAppBarAction,
   registerDetailsViewSection,
   registerResourceTableColumnsProcessor,
   registerRoute,
@@ -14,10 +13,11 @@ import {
 } from '@kinvolk/headlamp-plugin/lib';
 import React from 'react';
 import { RookCephDataProvider } from './api/RookCephDataContext';
-import AppBarClusterBadge from './components/AppBarClusterBadge';
 import BlockPoolsPage from './components/BlockPoolsPage';
 import CephPodDetailSection from './components/CephPodDetailSection';
+import FilesystemsPage from './components/FilesystemsPage';
 import { buildPVColumns, buildStorageClassColumns } from './components/integrations/StorageClassColumns';
+import ObjectStoresPage from './components/ObjectStoresPage';
 import OverviewPage from './components/OverviewPage';
 import PodsPage from './components/PodsPage';
 import PVCDetailSection from './components/PVCDetailSection';
@@ -53,6 +53,22 @@ registerSidebarEntry({
   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({
   parent: 'rook-ceph',
   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
 registerRoute({
   path: '/rook-ceph/storage-classes',
@@ -172,12 +212,3 @@ registerResourceTableColumnsProcessor(({ id, columns }) => {
   return columns;
 });
 
-// ---------------------------------------------------------------------------
-// App bar action — cluster health badge
-// ---------------------------------------------------------------------------
-
-registerAppBarAction(() => (
-  <RookCephDataProvider>
-    <AppBarClusterBadge />
-  </RookCephDataProvider>
-));