chore: release v0.1.3

Both plugins now inject a 'Protocol' column into the shared native tables,
so mixed-driver clusters see consistent naming. Rook values: RBD, CephFS.
tns-csi values: NFS, NVMe-oF, iSCSI. Removes unused formatStorageType import
from the column processor.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@headlamp-k8s/eslint-config'],
+};

artifacthub-pkg.yml

@@ -1,4 +1,4 @@
-version: "0.1.1"
+version: "0.1.3"
 name: headlamp-rook-ceph-plugin
 displayName: Rook-Ceph Plugin
 createdAt: "2026-02-18T00:00:00Z"
@@ -23,7 +23,7 @@ maintainers:
 provider:
   name: privilegedescalation
 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-checksum: "sha256:642863314b0879233b0341341c59a1d7b979b1668585c3dda1ab54e21e0136a0"
+  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-rook-ceph-plugin/releases/download/v0.1.3/headlamp-rook-ceph-plugin-0.1.3.tar.gz"
+  headlamp/plugin/archive-checksum: "sha256:01611912597b4739ca62cd1f4ae0dd42755bb8e3541dafa5dedbfdcf1202072e"
   headlamp/plugin/distro-compat: ""
   headlamp/plugin/version-compat: ">=0.20"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "headlamp-rook-ceph-plugin",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Headlamp plugin for Rook-Ceph cluster visibility and CSI driver monitoring",
   "repository": {
     "type": "git",

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/BlockPoolsPage.tsx

@@ -11,8 +11,8 @@ import {
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React, { useState } from 'react';
-import { useRookCephContext } from '../api/RookCephDataContext';
 import { CephBlockPool, formatAge, phaseToStatus } from '../api/k8s';
+import { useRookCephContext } from '../api/RookCephDataContext';
 
 function BlockPoolDetail({ pool, onClose }: { pool: CephBlockPool; onClose: () => void }) {
   return (

src/components/CephPodDetailSection.tsx

@@ -11,7 +11,7 @@ import {
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
-import { formatAge, getPodRestarts } from '../api/k8s';
+import { formatAge } from '../api/k8s';
 
 interface CephPodDetailSectionProps {
   resource: {

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/OverviewPage.tsx

@@ -15,8 +15,8 @@ import {
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
-import { useRookCephContext } from '../api/RookCephDataContext';
 import { formatAge, formatBytes, healthToStatus, phaseToStatus, storageClassType } from '../api/k8s';
+import { useRookCephContext } from '../api/RookCephDataContext';
 import ClusterStatusCard from './ClusterStatusCard';
 
 export default function OverviewPage() {

src/components/PVCDetailSection.tsx

@@ -10,8 +10,8 @@ import {
   SectionBox,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
+import { findBoundPv, formatStorageType } from '../api/k8s';
 import { useRookCephContext } from '../api/RookCephDataContext';
-import { findBoundPv, formatStorageType, storageClassType } from '../api/k8s';
 
 interface PVCDetailSectionProps {
   resource: {

src/components/PodsPage.tsx

@@ -11,8 +11,8 @@ import {
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
-import { useRookCephContext } from '../api/RookCephDataContext';
 import { formatAge, getPodRestarts, isPodReady, RookCephPod } from '../api/k8s';
+import { useRookCephContext } from '../api/RookCephDataContext';
 
 function PodTable({ pods, title }: { pods: RookCephPod[]; title: string }) {
   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() {
   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/components/StorageClassesPage.tsx

@@ -11,8 +11,8 @@ import {
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React, { useState } from 'react';
-import { useRookCephContext } from '../api/RookCephDataContext';
 import { formatAge, formatStorageType, RookCephStorageClass, storageClassType } from '../api/k8s';
+import { useRookCephContext } from '../api/RookCephDataContext';
 
 function StorageClassDetail({ sc, pvCount, onClose }: { sc: RookCephStorageClass; pvCount: number; onClose: () => void }) {
   const type = storageClassType(sc);

src/components/VolumesPage.tsx

@@ -11,8 +11,8 @@ import {
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React, { useState } from 'react';
-import { useRookCephContext } from '../api/RookCephDataContext';
 import { formatAccessModes, formatAge, phaseToStatus, RookCephPersistentVolume } from '../api/k8s';
+import { useRookCephContext } from '../api/RookCephDataContext';
 
 function PVDetail({ pv, onClose }: { pv: RookCephPersistentVolume; onClose: () => void }) {
   const attrs = pv.spec.csi?.volumeAttributes ?? {};

src/components/integrations/StorageClassColumns.tsx

@@ -4,10 +4,14 @@
  * Adds Rook-Ceph-specific columns to the native Headlamp StorageClass table
  * ('headlamp-storageclasses') and PV table ('headlamp-persistentvolumes').
  * Non-Rook-Ceph rows show '—'.
+ *
+ * Column names (Protocol, Pool) are intentionally shared with the tns-csi
+ * column processor so both plugins contribute to the same logical columns
+ * on a mixed-driver cluster.
  */
 
 import React from 'react';
-import { isRookCephProvisioner, formatStorageType } from '../../api/k8s';
+import { isRookCephProvisioner } from '../../api/k8s';
 
 /** Safely read a nested field from either a KubeObject instance or plain object. */
 function getField(item: unknown, ...path: string[]): unknown {
@@ -36,23 +40,26 @@ function isRookPvRow(item: unknown): boolean {
   return typeof driver === 'string' && isRookCephProvisioner(driver);
 }
 
+function rookProtocol(s: string | undefined): string {
+  if (!s) return '—';
+  if (s.includes('.rbd.')) return 'RBD';
+  if (s.includes('.cephfs.')) return 'CephFS';
+  return '—';
+}
+
 export function buildStorageClassColumns() {
   return [
     {
-      label: 'Rook Type',
+      label: 'Protocol',
       getValue: (item: unknown) => {
         if (!isRookRow(item)) return null;
         const provisioner = getField(item, 'provisioner') as string | undefined;
-        if (!provisioner) return null;
-        const type = provisioner.includes('.rbd.') ? 'rbd' : provisioner.includes('.cephfs.') ? 'cephfs' : 'unknown';
-        return formatStorageType(type as 'rbd' | 'cephfs' | 'unknown');
+        return rookProtocol(provisioner);
       },
       render: (item: unknown) => {
         if (!isRookRow(item)) return <span>—</span>;
         const provisioner = getField(item, 'provisioner') as string | undefined;
-        if (!provisioner) return <span>—</span>;
-        const type = provisioner.includes('.rbd.') ? 'rbd' : provisioner.includes('.cephfs.') ? 'cephfs' : 'unknown';
-        return <span style={{ color: '#1976d2', fontWeight: 500 }}>{formatStorageType(type as 'rbd' | 'cephfs' | 'unknown')}</span>;
+        return <span>{rookProtocol(provisioner)}</span>;
       },
     },
     {
@@ -65,13 +72,12 @@ export function buildStorageClassColumns() {
       },
     },
     {
-      label: 'Cluster ID',
+      label: 'Cluster',
       getValue: (item: unknown) => getField(item, 'parameters', 'clusterID') as string | null ?? null,
       render: (item: unknown) => {
         if (!isRookRow(item)) return <span>—</span>;
         const clusterID = getField(item, 'parameters', 'clusterID') as string | undefined;
         if (!clusterID) return <span>—</span>;
-        // Truncate long cluster IDs
         return <span title={clusterID}>{clusterID.length > 16 ? `${clusterID.slice(0, 16)}…` : clusterID}</span>;
       },
     },
@@ -81,20 +87,16 @@ export function buildStorageClassColumns() {
 export function buildPVColumns() {
   return [
     {
-      label: 'Rook Type',
+      label: 'Protocol',
       getValue: (item: unknown) => {
         if (!isRookPvRow(item)) return null;
         const driver = getField(item, 'spec', 'csi', 'driver') as string | undefined;
-        if (!driver) return null;
-        const type = driver.includes('.rbd.') ? 'rbd' : driver.includes('.cephfs.') ? 'cephfs' : 'unknown';
-        return formatStorageType(type as 'rbd' | 'cephfs' | 'unknown');
+        return rookProtocol(driver);
       },
       render: (item: unknown) => {
         if (!isRookPvRow(item)) return <span>—</span>;
         const driver = getField(item, 'spec', 'csi', 'driver') as string | undefined;
-        if (!driver) return <span>—</span>;
-        const type = driver.includes('.rbd.') ? 'rbd' : driver.includes('.cephfs.') ? 'cephfs' : 'unknown';
-        return <span style={{ color: '#1976d2', fontWeight: 500 }}>{formatStorageType(type as 'rbd' | 'cephfs' | 'unknown')}</span>;
+        return <span>{rookProtocol(driver)}</span>;
       },
     },
     {

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>
-));