feat(object-storage): ceph-specific notes (#1871)

Author: hgw77

app/javascript/lib/widget.jsx

@@ -67,11 +67,11 @@ class Widget {
     setPolicy(policy)
   }
 
-  render(container) {
+  render(container, props = {}) {
     // const Container = React.createElement(container, this.config.params)
     for (let reactContainer of this.reactContainers) {
       let dataset = getDataset(reactContainer)
-      let wrappedComponent = React.createElement(container, Object.assign({}, dataset, this.config.params))
+      let wrappedComponent = React.createElement(container, Object.assign({}, dataset, this.config.params, props))
 
       if (!reactContainer) continue
       if (this.store) {

plugins/object_storage/app/javascript/widgets/app/App.jsx

@@ -6,11 +6,26 @@ import Router from "./Router"
 
 const App = (props) => (
   <StateProvider>
-    <Router
-      baseName={props.baseName}
-      resourcesPath={props.resourcesPath}
-      projectPath={props.projectPath}
-    />
+    {props.serviceName === "ceph" && (
+      <>
+        <div className="bs-callout bs-callout-info">
+          <h5>Note for Ceph</h5>
+          <p>
+            This view uses the Swift API to display bucket contents and basic object storage information. While suitable
+            for standard operations, some S3-specific features, such as bucket versioning, object versions, and delete
+            markers are not fully visible or manageable through the dashboard.
+          </p>
+          <p>
+            Buckets with S3 versioning enabled cannot be deleted using the dashboard and may only be fully inspected or
+            managed via S3 CLI tools. This limitation is due to fundamental differences between the Swift and S3 APIs in
+            Ceph RGW. For full and accurate access to all Ceph object storage features, especially when working with
+            versioned buckets, we strongly recommend using S3-compatible tools such as `aws s3api` or other S3 CLI/SDK
+            tools.
+          </p>
+        </div>
+      </>
+    )}
+    <Router baseName={props.baseName} resourcesPath={props.resourcesPath} projectPath={props.projectPath} />
   </StateProvider>
 )
 

plugins/object_storage/app/javascript/widgets/app/init.js

@@ -1,26 +1,20 @@
 import { createWidget } from "lib/widget"
-import {
-  setApiClient,
-  setServiceName,
-  setServiceEndpoint,
-} from "./lib/apiClient"
+import { setApiClient, setServiceName, setServiceEndpoint } from "./lib/apiClient"
 import { createAjaxHelper } from "lib/ajax_helper"
 import App from "./App"
 
-createWidget({ pluginName: "object_storage", widgetName: "app" }).then(
-  (widget) => {
-    const baseURL = widget.config.scriptParams.baseName
-    // split baseURL by "/" ignoring the trailing slash
-    const parts = baseURL.split("/").filter((part) => part)
-    const [domain, project, plugin, serviceName] = parts
-    const ajaxHelper = createAjaxHelper({
-      //baseURL: widget.config.scriptParams.baseName,
-      baseURL: `/${domain}/${project}/${plugin}`,
-    })
-    setApiClient(ajaxHelper)
-    setServiceName(serviceName)
-    setServiceEndpoint(widget.config.scriptParams.serviceEndpoint)
-    widget.setPolicy()
-    widget.render(App)
-  }
-)
+createWidget({ pluginName: "object_storage", widgetName: "app" }).then((widget) => {
+  const baseURL = widget.config.scriptParams.baseName
+  // split baseURL by "/" ignoring the trailing slash
+  const parts = baseURL.split("/").filter((part) => part)
+  const [domain, project, plugin, serviceName] = parts
+  const ajaxHelper = createAjaxHelper({
+    //baseURL: widget.config.scriptParams.baseName,
+    baseURL: `/${domain}/${project}/${plugin}`,
+  })
+  setApiClient(ajaxHelper)
+  setServiceName(serviceName)
+  setServiceEndpoint(widget.config.scriptParams.serviceEndpoint)
+  widget.setPolicy()
+  widget.render(App, { serviceName: serviceName })
+})