feat: add multi-tenant management to Operational & Observability (#93)

Author: majinghe

app/product/operational-observability/page.tsx

@@ -19,6 +19,25 @@ export const metadata: Metadata = {
 };
 
 const sections: FeaturePageSection[] = [
+  {
+    id: "multi-tenant-management",
+    title: "Multi-tenant management",
+    description: "RustFS Operator automates multi-tenant storage operations, from elastic capacity scaling to instant MNMD cluster provisioning with strict resource isolation.",
+    items: [
+      {
+        title: "Elastic storage auto-scaling",
+        description: "Scaling RustFS capacity and disk pools on demand with zero downtime, driven by automated Operator orchestration.",
+      },
+      {
+        title: "MNMD cluster provisioning",
+        description: "Provisioning multi-node, multi-disk RustFS clusters instantly with simultaneous multi-writer access for high-concurrency workloads.",
+      },
+      {
+        title: "Tenant-aware resource isolation",
+        description: "Enforcing strict capacity quotas, IOPS limits, and isolated access credentials across dynamically managed RustFS storage pools.",
+      },
+    ],
+  },
   {
     title: "Console operations",
     items: [

components/business/feature-page.tsx

@@ -31,6 +31,7 @@ import Link from "next/link";
 import type { ReactNode } from "react";
 
 export interface FeaturePageSection {
+  id?: string;
   title: string;
   description?: string;
   items?: {
@@ -39,6 +40,17 @@ export interface FeaturePageSection {
   }[];
 }
 
+function sectionId(title: string, explicitId?: string) {
+  return (
+    explicitId ??
+    title
+      .toLowerCase()
+      .replace(/&/g, "and")
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+  );
+}
+
 export interface FeaturePageLink {
   label: string;
   href: string;
@@ -350,7 +362,10 @@ function FeatureSection({
   const reverse = sectionIndex % 2 === 1;
 
   return (
-    <section className="border-t border-border py-16 sm:py-20">
+    <section
+      id={sectionId(section.title, section.id)}
+      className="scroll-mt-24 border-t border-border py-16 sm:py-20"
+    >
       <div>
         <h2 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
           {section.title}

components/business/product-section-illustration.tsx

@@ -432,6 +432,43 @@ function InsightsVisual() {
   );
 }
 
+function MultiTenantVisual() {
+  const tenants = [
+    { label: "Tenant A", quota: "5 TB" },
+    { label: "Tenant B", quota: "2 TB" },
+    { label: "Tenant C", quota: "500 GB" },
+  ];
+
+  return (
+    <IllustrationFrame label="Operator-managed multi-tenancy">
+      <div className="grid w-full max-w-lg grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3">
+        <div className="grid gap-2">
+          {tenants.map((tenant, index) => (
+            <Reveal key={tenant.label} delay={index * 0.1}>
+              <Tile icon={UsersIcon} label={tenant.label} detail={tenant.quota} />
+            </Reveal>
+          ))}
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <DataFlowLine direction="horizontal" className="w-8" />
+          <motion.span
+            className="flex size-11 items-center justify-center border border-brand/60 bg-brand/5"
+            animate={{ boxShadow: ["0 0 0px transparent", "0 0 18px var(--color-brand)", "0 0 0px transparent"] }}
+            transition={{ duration: 2.2, repeat: Infinity }}
+          >
+            <BlocksIcon className="size-5 text-brand" />
+          </motion.span>
+          <span className="font-mono text-[7px] uppercase tracking-[0.12em] text-brand">Operator</span>
+        </div>
+        <div className="grid gap-2">
+          <Tile icon={DatabaseIcon} label="Pool 01" detail="auto-scaling" accent />
+          <Tile icon={ServerIcon} label="Pool 02" detail="MNMD cluster" />
+        </div>
+      </div>
+    </IllustrationFrame>
+  );
+}
+
 function CliVisual() {
   return (
     <IllustrationFrame label="rc client">
@@ -615,7 +652,13 @@ const illustrations: Record<ProductIllustrationVariant, ((props: { sectionIndex:
     return visuals[sectionIndex] ?? visuals[0];
   },
   ops: ({ sectionIndex }) => {
-    const visuals = [<ConsoleVisual key="console" />, <OtelVisual key="otel" />, <InsightsVisual key="insights" />, <CliVisual key="cli" />];
+    const visuals = [
+      <MultiTenantVisual key="multi-tenant" />,
+      <ConsoleVisual key="console" />,
+      <OtelVisual key="otel" />,
+      <InsightsVisual key="insights" />,
+      <CliVisual key="cli" />,
+    ];
     return visuals[sectionIndex] ?? visuals[0];
   },
   security: ({ sectionIndex }) => {

data/navigation.ts

@@ -46,6 +46,11 @@ export const resourceNavigation: NavigationItem[] = [
     href: "/erasure-code-calculator",
     description: "Optimal EC configurations for durability and storage efficiency.",
   },
+  {
+    title: "Multi-tenant management",
+    href: "/product/operational-observability#multi-tenant-management",
+    description: "Operator-driven elastic scaling, MNMD provisioning, and tenant isolation.",
+  },
   {
     title: "Documentation",
     href: "/docs",
@@ -67,6 +72,7 @@ export const footerNavigation = [
       { title: "Data Management", href: "/product/data-management" },
       { title: "High Availability & Scale", href: "/product/high-availability-scale" },
       { title: "Operational & Observability", href: "/product/operational-observability" },
+      { title: "Multi-tenant management", href: "/product/operational-observability#multi-tenant-management" },
       { title: "Security & Compliance", href: "/product/security-compliance" },
     ],
   },