This is an automated email from the ASF dual-hosted git repository.
dahn pushed a commit to branch staging-site
in repository https://gitbox.apache.org/repos/asf/cloudstack-www.git
The following commit(s) were added to refs/heads/staging-site by this push:
new 95f9e0140 Update integrations (#337)
95f9e0140 is described below
commit 95f9e01405db4e6c323384d0ebba21e0b91b3424
Author: Vishesh <[email protected]>
AuthorDate: Wed Jul 2 13:39:52 2025 +0530
Update integrations (#337)
---
src/css/custom.css | 10 +
src/pages/integrations.js | 812 +++++++++++++++++++++++++++++++----------
static/img/backroll_logo.png | Bin 0 -> 15835 bytes
static/img/linbit_sds_logo.svg | 1 +
static/img/minio_logo.svg | 1 +
static/img/netris_logo.png | Bin 0 -> 82772 bytes
static/img/vmware_nsx_logo.jpg | Bin 0 -> 16384 bytes
7 files changed, 640 insertions(+), 184 deletions(-)
diff --git a/src/css/custom.css b/src/css/custom.css
index d25673e9f..9f4574d79 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -520,6 +520,13 @@ iframe {
border-radius: 18px;
margin: 5px;
}
+.tab-box img {
+ width: auto;
+ height: auto;
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+}
.box-blue {
background-color: #082755;
}
@@ -603,6 +610,9 @@ iframe {
.box-apiculus {
background-color: #cfe9ff;
}
+.box-linbit {
+ background-color: #F79133;
+}
.box278 {
height: 278px;
}
diff --git a/src/pages/integrations.js b/src/pages/integrations.js
index 0ca6b9494..2d372b108 100644
--- a/src/pages/integrations.js
+++ b/src/pages/integrations.js
@@ -6,6 +6,34 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
+// Simple markdown renderer component for basic markdown patterns
+function SimpleMarkdown({ children }) {
+ if (!children || typeof children !== 'string') {
+ return null;
+ }
+
+ // Split content by double newlines to create paragraphs
+ const paragraphs = children.split('\n\n').filter(p => p.trim());
+
+ return (
+ <>
+ {paragraphs.map((paragraph, index) => {
+ // Process bold markdown syntax **text**
+ const parts = paragraph.split(/(\*\*.*?\*\*)/g);
+ const processedParts = parts.map((part, partIndex) => {
+ if (part.startsWith('**') && part.endsWith('**')) {
+ const boldText = part.slice(2, -2);
+ return <strong key={partIndex}>{boldText}</strong>;
+ }
+ return part;
+ });
+
+ return <p key={index}>{processedParts}</p>;
+ })}
+ </>
+ );
+}
+
function IntegrationsHeader() {
const {siteConfig} = useDocusaurusContext();
return (
@@ -123,6 +151,538 @@ support of Tungsten Fabric helps us to meet these
requirements.”
}
export default function CloudStackIntegrations() {
+ const [showModal, setShowModal] = React.useState(false);
+ const [modalContent, setModalContent] = React.useState({});
+
+ // Add hover styles and clickable indicators
+ React.useEffect(() => {
+ const style = document.createElement('style');
+ style.textContent = `
+ .integration-item:hover .learn-more-overlay {
+ opacity: 1 !important;
+ }
+ .integration-item:hover {
+ box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
+ transform: translateY(-2px) !important;
+ }
+ .integration-item:hover .clickable-icon {
+ opacity: 0 !important;
+ }
+ .clickable-icon {
+ opacity: 0.9;
+ transition: all 0.3s ease;
+ animation: pulse-subtle 2s infinite;
+ }
+ @keyframes pulse-subtle {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.05); }
+ }
+ .integration-item:hover .clickable-icon {
+ animation: none;
+ transform: scale(1.1);
+ }
+ @media (max-width: 768px) {
+ .clickable-icon {
+ opacity: 0.95 !important;
+ animation: pulse-subtle 3s infinite;
+ }
+ }
+ `;
+ document.head.appendChild(style);
+ return () => document.head.removeChild(style);
+ }, []);
+
+ // Centralized integration configuration - tabs and modal data in single JSON
+ const integrationConfig = {
+ automation: {
+ label: "Automation",
+ icon: "/img/automation_icon.svg",
+ description: "CloudStack supports automation integrations through its
robust API and integration capabilities, enabling **seamless orchestration and
automation of cloud infrastructure tasks**.",
+ integrations: [
+ {
+ key: "puppet",
+ title: "Puppet",
+ description: "The puppet-cloudstack module (Apache-2.0 license) is
designed exclusively for provisioning and configuring the Apache CloudStack
infrastructure—covering management servers, database, NFS, and hypervisor hosts
like XenServer and KVM. It uses Puppet manifests and custom types to automate
the setup of zones, clusters, network configuration, and system components.
However, it does not provide management of CloudStack objects such as virtual
machines, users, networks, [...]
+ className: "box-puppet box192",
+ imageSrc: "/img/puppet_logo.svg",
+ altText: "puppet",
+ colClass: "col-md-6",
+ iconColor: "dark"
+ },
+ {
+ key: "terraform",
+ title: "Terraform",
+ description: "Terraform is an open-source infrastructure-as-code
(IaC) tool developed by HashiCorp that enables organizations to automate the
provisioning and management of their IT infrastructure. It uses a declarative
configuration language called HashiCorp Configuration Language (HCL) to
describe the desired state of infrastructure, allowing for consistent and
repeatable deployments across various environments.\n\nApache CloudStack
integrates with Terraform through the offic [...]
+ className: "box-terraform box192",
+ imageSrc: "/img/terraform_logo.svg",
+ altText: "terraform",
+ colClass: "col-md-6",
+ iconColor: "light" // light icon for dark terraform logo
+ },
+ {
+ key: "ansible",
+ title: "Ansible",
+ description: "Ansible is an open-source automation tool developed by
Red Hat that simplifies IT tasks such as configuration management, application
deployment, and orchestration. It utilizes a human-readable language (YAML) to
define automation tasks and operates with an agentless architecture, relying on
SSH for remote execution. Ansible's simplicity and flexibility make it a
preferred choice for organizations aiming to streamline their IT operations and
enhance consistency ac [...]
+ className: "box-ansible box192",
+ imageSrc: "/img/ansible_logo.svg",
+ altText: "ansible",
+ colClass: "col-md-6",
+ iconColor: "dark" // dark icon for light ansible logo
+ },
+ {
+ key: "chef",
+ title: "Chef",
+ description: "Chef users can reliably manage CloudStack
infrastructure by combining knife-cloudstack-fog and kitchen-cloudstack. The
knife‑cloudstack‑fog plugin acts as a command-line bridge between Chef
workflows and CloudStack APIs, supporting VM provisioning, network and storage
orchestration, and resource cleanup. On the testing side, kitchen‑cloudstack
integrates CloudStack into Test Kitchen to spin up actual instances, apply
cookbooks, run validation tests, and destroy en [...]
+ className: "box-chef box192",
+ imageSrc: "/img/chef-logo.png",
+ altText: "chef",
+ colClass: "col-md-6",
+ iconColor: "light"
+ }
+ ]
+ },
+ backup: {
+ label: "Backup & Disaster Recovery",
+ icon: "/img/Backup_icon.svg",
+ description: "Supports backup and disaster recovery solutions through
CloudStack's **APIs and extensible architecture**, enabling third-party tools
and services to seamlessly integrate with the platform for data protection and
continuity.",
+ integrations: [
+ {
+ key: "acronis",
+ className: "box-acronis box192",
+ imageSrc: "/img/acronis_logo.svg",
+ altText: "acronis",
+ colClass: "col-md-6"
+ },
+ {
+ key: "dell-networker",
+ title: "Networker",
+ description: "Dell NetWorker is an enterprise-grade backup and
recovery solution designed to protect data across diverse IT environments. It
offers centralized backup management, policy-driven automation, and integration
with various storage systems, including Dell's Data Domain. NetWorker supports
a wide range of workloads, providing efficient and reliable data protection for
critical applications and systems.\n\nApache CloudStack integrates with Dell
NetWorker through a nativ [...]
+ className: "box-dell box192",
+ imageSrc: "/img/dell_logo.svg",
+ altText: "Dell",
+ colClass: "col-md-6"
+ },
+ {
+ key: "backroll",
+ title: "BackRoll",
+ description: "BackROLL is an open-source, containerized backup and
disaster recovery solution tailored for KVM-based virtualized environments.
Designed with simplicity and reliability in mind, BackROLL offers agentless,
image-based backups with features like fast recovery, file-level restoration,
and a user-friendly web interface. Its architecture leverages modern
technologies, including Docker and RESTful APIs, ensuring ease of deployment
and integration into existing infrastr [...]
+ className: "box-lgray box192",
+ imageSrc: "/img/backroll_logo.png",
+ altText: "backroll",
+ colClass: "col-md-6",
+ iconColor: "dark"
+ },
+ {
+ key: "cloudstack",
+ title: "NAS B&R",
+ description: "Apache CloudStack's Backup and Recovery (B&R)
framework, introduced in version 4.14, provides a standardized and extensible
approach to integrating backup solutions within the CloudStack ecosystem.
Expanding upon this framework, version 4.20 introduced the NAS Backup and
Recovery Plugin, a native solution designed specifically for KVM hypervisors.
This plugin enables administrators to perform full instance backups to shared
Network Attached Storage (NAS) systems, [...]
+ className: "box-white box192",
+ imageSrc: "/img/ACS_logo.svg",
+ altText: "cloudstack",
+ colClass: "col-md-6",
+ iconColor: "dark"
+ }
+ ]
+ },
+ containers: {
+ label: "Containers",
+ icon: "/img/containers_icon.svg",
+ description: "CloudStack supports different containers through its
Container Service, which can manage and orchestrate container-based workloads
alongside traditional virtual machines, **providing a unified cloud
infrastructure platform**.",
+ integrations: [
+ {
+ key: "kubernetes",
+ title: "Kubernetes",
+ description: "Kubernetes is an open-source container orchestration
platform that automates the deployment, scaling, and management of
containerized applications. Developed by Google and now maintained by the Cloud
Native Computing Foundation (CNCF), Kubernetes has become the industry standard
for container orchestration, providing a powerful and flexible solution for
managing complex, distributed applications.\n\nApache CloudStack integrates
with Kubernetes through two primary [...]
+ className: "box-kubernetes box192",
+ imageSrc: "/img/kubernetes_logo.svg",
+ altText: "kubernetes",
+ colClass: "col-md-12",
+ iconColor: "light" // light icon for dark kubernetes logo
+ }
+ ]
+ },
+ hypervisors: {
+ label: "Hypervisors",
+ icon: "/img/Hypervisors_icon.svg",
+ description: "Supports different hypervisors through CloudStack's
**hypervisor-agnostic architecture**, allowing deployment and management of
virtualized resources across various hypervisor platforms.",
+ integrations: [
+ {
+ key: "hyperv",
+ className: "box-blue box131",
+ imageSrc: "/img/MS_hyper-v_logo.png",
+ altText: "hyperv",
+ colClass: "col-md-6"
+ },
+ {
+ key: "vmware",
+ title: "VMware vSphere",
+ description: "VMware vSphere is an enterprise-grade virtualization
platform that combines the ESXi hypervisor and vCenter Server to provide a
robust foundation for virtualized data centers. It offers advanced features
such as live migration (vMotion), distributed resource scheduling (DRS), high
availability (HA), fault tolerance (FT), and storage management capabilities
like Storage vMotion and snapshot support. These features enable efficient
resource utilization, minimal down [...]
+ className: "box-white box131",
+ imageSrc: "/img/VM_ware_logo.svg",
+ altText: "vmware",
+ colClass: "col-md-6",
+ iconColor: "dark" // dark icon for light vmware logo
+ },
+ {
+ key: "kvm",
+ title: "KVM",
+ description: "KVM is a Linux-native hypervisor that transforms the
Linux kernel into a full virtualization platform, enabling the creation and
management of virtual machines (VMs) with hardware-assisted performance.
Integrated seamlessly with Apache CloudStack, KVM supports a wide array of
features essential for modern cloud infrastructures.\n\nThrough CloudStack,
administrators can orchestrate VM lifecycle operations, including provisioning,
scaling, and deletion, across KVM h [...]
+ className: "box-dgray box131",
+ imageSrc: "/img/KVM_logo.svg",
+ altText: "KVM",
+ colClass: "col-md-12"
+ },
+ {
+ key: "citrix",
+ title: "XenServer",
+ description: "XenServer is an enterprise-grade, open-source
virtualization platform built on the Xen Project hypervisor. It offers robust
features such as live virtual machine (VM) migration, high availability (HA),
dynamic memory control, and resource pooling. XenServer utilizes a control
domain (dom0) for managing guest VMs and coordinating access to networking and
storage resources, enabling efficient and scalable virtualization for cloud
infrastructure.\n\nApache CloudStack [...]
+ className: "box-citrix box131",
+ imageSrc: "/img/citrix_logo.svg",
+ altText: "citrix",
+ colClass: "col-md-6",
+ },
+ {
+ key: "xcpng",
+ title: "XCPNG",
+ description: "XCP-ng is an open-source virtualization platform built
upon the Xen Project hypervisor, offering a robust and scalable solution for
managing virtualized environments. It provides features such as live migration,
high availability (HA), dynamic memory control, and resource pooling, enabling
efficient utilization of hardware resources across multiple hosts. XCP-ng's
architecture includes a control domain (dom0) that manages guest virtual
machines (VMs) and coordinat [...]
+ className: "box-lgray box131",
+ imageSrc: "/img/XCP-ng_logo.png",
+ altText: "XCP-ng",
+ colClass: "col-md-6"
+ }
+ ]
+ },
+ monitoring: {
+ label: "Monitoring",
+ icon: "/img/monitoring_icon.svg",
+ description: "Apache CloudStack supports different hypervisors through
its **hypervisor-agnostic architecture**, allowing deployment and management of
virtualized resources across various hypervisor platforms.",
+ integrations: [
+ {
+ key: "veeam",
+ title: "Veeam Backup & Replication",
+ description: "Veeam Backup & Replication is an enterprise-grade data
protection and disaster recovery solution designed to ensure the availability
and resiliency of virtualized environments. It offers features such as instant
VM recovery, granular file-level recovery, and replication, providing
comprehensive backup and recovery capabilities. Apache CloudStack integrates
with Veeam Backup & Replication through a native plugin, enabling backup and
recovery functionalities for ins [...]
+ className: "box-veeam box192",
+ imageSrc: "/img/veeam_logo.svg",
+ altText: "veeam",
+ colClass: "col"
+ }
+ ]
+ },
+ networking: {
+ label: "Networking",
+ icon: "/img/networking_icon.svg",
+ description: "Support different networking integrations through
CloudStack's modular networking framework, which facilitates the integration of
**various network technologies and services to meet diverse infrastructure
needs**.",
+ integrations: [
+ {
+ key: "tungsten",
+ className: "box-tfabric box192",
+ imageSrc: "/img/tungsten_logo.svg",
+ altText: "tungsten fabric",
+ colClass: "col-md-6"
+ },
+ {
+ key: "netris",
+ title: "Switch Fabric Manager",
+ description: "Netris is a modern Software-Defined Networking (SDN)
platform that enables automated, intent-based management of network
infrastructure for cloud-native, virtualized, and bare-metal environments. It
transforms traditional networking hardware—such as switches, routers, and
firewalls—into agile and programmable infrastructure, providing a
\"Network-as-Code\" experience through APIs, Kubernetes Custom Resource
Definitions (CRDs), and intuitive interfaces. This approa [...]
+ className: "box-white box192",
+ imageSrc: "/img/netris_logo.png",
+ altText: "Netris Switch Fabric Manager",
+ colClass: "col-md-6",
+ iconColor: "dark"
+ },
+ {
+ key: "vmware-nsx",
+ title: "Vmware NSX",
+ description: "VMware NSX is a software-defined networking (SDN) and
security platform that delivers virtualized networking services, including
distributed firewalls, logical routing, and microsegmentation. By abstracting
network functionality from hardware and embedding it into the hypervisor, NSX
enables a flexible, programmable infrastructure for modern cloud and data
center environments.<br/>Apache CloudStack integrates with VMware NSX through
an official plugin introduced i [...]
+ className: "box-white box192",
+ imageSrc: "/img/vmware_nsx_logo.jpg",
+ altText: "VMware NSX",
+ colClass: "col-md-12",
+ iconColor: "dark"
+ }
+ ]
+ },
+ storage: {
+ label: "Storage",
+ icon: "/img/storage_icon.svg",
+ description: "Apache CloudStack supports different storage integrations
through its pluggable storage framework, allowing seamless integration with
various storage systems and technologies for **versatile data management and
storage options**.",
+ integrations: [
+ {
+ key: "storpool",
+ title: "StorPool",
+ description: "StorPool is a distributed block storage system
optimized for high performance, low latency, and linear scalability. It
aggregates local SSDs or NVMe drives across a cluster of standard servers into
a single, resilient storage pool. The integration with Apache CloudStack allows
StorPool to function as a primary storage backend, supporting advanced features
such as instant volume provisioning, live migration, thin provisioning, and
rapid snapshot creation and restor [...]
+ className: "box-white box131",
+ imageSrc: "/img/storpool_logo.svg",
+ altText: "storpool",
+ colClass: "col-md-6"
+ },
+ {
+ key: "linbit",
+ title: "LinBit SDS",
+ description: "LINBIT SDS is an open-source software-defined storage
solution that combines DRBD® (Distributed Replicated Block Device) and LINSTOR®
to provide high-performance, resilient block storage for Linux-based
environments. DRBD ensures real-time data replication between nodes, offering
high availability and disaster recovery capabilities, while LINSTOR manages the
provisioning and orchestration of storage resources across clusters.<br/>Apache
CloudStack integrates seaml [...]
+ className: "box-linbit box131",
+ imageSrc: "/img/linbit_sds_logo.svg",
+ altText: "linbit",
+ colClass: "col-md-6"
+ },
+ {
+ key: "netapp",
+ className: "box-netapp box131",
+ imageSrc: "/img/net_app__solidfire_logo.svg",
+ altText: "netapp solidfire",
+ colClass: "col-md-6"
+ },
+ {
+ key: "pure",
+ className: "box-pure box131",
+ imageSrc: "/img/pure_storage-logo.svg",
+ altText: "pure storage",
+ colClass: "col-md-6"
+ },
+ {
+ key: "ceph",
+ title: "Ceph",
+ description: "Ceph is an open-source, software-defined storage
platform that provides scalable and resilient block storage through its RADOS
Block Device (RBD) interface. Designed for high-performance and fault-tolerant
environments, Ceph distributes data across multiple nodes, ensuring redundancy
and eliminating single points of failure. Its architecture supports features
like thin provisioning, snapshots, and cloning, making it suitable for dynamic
and demanding cloud infrast [...]
+ className: "box-ceph box131",
+ imageSrc: "/img/ceph_logo.svg",
+ altText: "ceph",
+ colClass: "col-md-6"
+ },
+ {
+ key: "gluster",
+ className: "box-gluster box131",
+ imageSrc: "/img/gluster_logo.png",
+ altText: "gluster",
+ colClass: "col-md-6"
+ },
+ {
+ key: "nutanix",
+ className: "box-nutanix box131",
+ imageSrc: "/img/nutanix_logo.svg",
+ altText: "nutanix",
+ colClass: "col-md-6"
+ },
+ {
+ key: "powerflex",
+ title: "PowerFlex",
+ description: "Dell PowerFlex is a software-defined storage (SDS)
platform that delivers high-performance, scalable, and resilient block storage
by aggregating local storage resources across standard x86 servers. Designed
for modern data centers, PowerFlex transforms direct-attached storage into a
unified, shared storage pool, providing flexibility and efficiency for various
workloads. <br/>Apache CloudStack integrates natively with Dell PowerFlex,
enabling it to function as man [...]
+ className: "box-dell box131",
+ imageSrc: "/img/dell_logo.svg",
+ altText: "dell",
+ colClass: "col-md-6"
+ }
+ ]
+ },
+ objectStorage: {
+ label: "Object Storage",
+ icon: "/img/storage_icon.svg",
+ description: "Apache CloudStack supports different object storage
integrations through its pluggable storage framework, allowing seamless
integration with various object storage systems and technologies for
**versatile data management and storage options**.",
+ integrations: [
+ {
+ key: "cloudian",
+ title: "Cloudian Object Storage",
+ description: "Cloudian HyperStore is an enterprise-grade,
S3-compatible object storage platform designed for scalability, durability, and
multi-tenancy. It offers a distributed architecture that ensures high
availability and fault tolerance, making it suitable for diverse workloads such
as backups, archives, media content, and unstructured data.<br/>Apache
CloudStack integrates with Cloudian HyperStore through a native plugin,
enabling its use as secondary storage within CloudS [...]
+ className: "box-cloudian box192",
+ imageSrc: "/img/cloudian_logo.svg",
+ altText: "cloudian",
+ colClass: "col-md-6"
+ },
+ {
+ key: "minio",
+ title: "MinIO Object Storage",
+ description: "MinIO is a high-performance, S3-compatible object
storage system built for cloud-native environments. It is optimized for speed,
simplicity, and massive scalability, making it suitable for storing a wide
range of unstructured data including media files, logs, and application
artifacts.<br/>Apache CloudStack integrates with MinIO through its Object
Storage Plugin framework, introduced in version 4.18. This integration allows
CloudStack administrators to configure M [...]
+ className: "box-white box192",
+ imageSrc: "/img/minio_logo.svg",
+ altText: "minio",
+ colClass: "col-md-6",
+ iconColor: "dark"
+ },
+ {
+ key: "ceph-radosgw",
+ title: "Ceph RADOSGW",
+ description: "Ceph is a leading open-source distributed storage
platform that provides unified object, block, and file storage within a single
cluster. Its object storage component, the RADOS Gateway (radosgw), offers a
RESTful interface fully compatible with Amazon S3 and OpenStack Swift APIs.
This compatibility enables scalable, multi-tenant, and secure object storage,
making it ideal for cloud-native applications, backups, media files, and
logs—all supported by Ceph's self-h [...]
+ className: "box-ceph box192",
+ imageSrc: "/img/ceph_logo.svg",
+ altText: "ceph",
+ colClass: "col-md-12"
+ },
+ ]
+ },
+ billing: {
+ label: "Billing",
+ icon: "/img/storage_icon.svg",
+ description: "Apache CloudStack offers integrations with a variety of
self-service intuitive billing and cloud management portals, designed to
empower administrators, and service providers with the tools they need to
manage cloud resources effectively. These solutions offer tools for service
orchestration, automation, billing, and seamless integration with various IaaS
cloud ecosystems.",
+ integrations: [
+ {
+ key: "cloudmc",
+ title: "CloudMC",
+ description: "CloudMC is a service orchestration and monetization
platform developed by CloudOps, designed to unify the management of cloud
resources in hybrid and multi-cloud environments. Its integration with Apache
CloudStack enables full-service automation, allowing administrators to manage
compute, network, and storage resources directly through CloudMC's interface.
Leveraging native CloudStack APIs, the platform offers capabilities such as
metering, invoicing, customer on [...]
+ className: "box-cloudmc box131",
+ imageSrc: "/img/cloud-mc-white.png",
+ altText: "cloud mc",
+ colClass: "col-md-6"
+ },
+ {
+ key: "stack console",
+ title: "Stack Console",
+ description: "Stack Console provides a comprehensive cloud
management platform built to support Apache CloudStack environments in
production. Designed for service providers and data centers, the integration
allows for full control of CloudStack resources—including virtual machines,
networks, and storage—via a multi-tenant, white-labeled interface. Through
API-level integration, Stack Console enables advanced capabilities such as
prepaid and postpaid billing, provisioning automa [...]
+ className: "box-stackconsole box131",
+ imageSrc: "/img/Stack Console SVG.svg",
+ altText: "stack console",
+ colClass: "col-md-6"
+ },
+ {
+ key: "stackbill cmp",
+ title: "StackBill CMP",
+ description: "StackBill is an enterprise-grade cloud management
portal that overlays Apache CloudStack with a self-service interface and
advanced service monetization capabilities. The integration allows users to
manage CloudStack resources—such as virtual machines, volumes, Kubernetes
clusters, and networks—while automating billing, resource metering,
autoscaling, and monitoring. Built on a microservices architecture with open
APIs, StackBill supports multi-currency transactio [...]
+ className: "box-stackbill box131",
+ imageSrc: "/img/stack-bill-logo-02.png",
+ altText: "stack bill",
+ colClass: "col-md-6"
+ },
+ {
+ key: "hostbill",
+ title: "HostBill",
+ description: "HostBill is a powerful billing and automation platform
used by cloud providers, hosting companies, and telcos to manage service
delivery and customer operations. Its integration with Apache CloudStack
enables automatic provisioning, metering, and lifecycle management of virtual
resources—including compute instances, networks, and public IPs—through a fully
customizable interface. The system supports multi-tenant environments, client
self-service, usage-based invoi [...]
+ className: "box-hostbill box131",
+ imageSrc: "/img/hostbill-logo.png",
+ altText: "host bill",
+ colClass: "col-md-6"
+ },
+ {
+ key: "apiculus",
+ title: "Apiculus",
+ description: "Apiculus is a business enablement and cloud operations
platform tailored for regional and edge service providers. Now a part of Yotta
Data Services, Apiculus integrates with Apache CloudStack to deliver an
end-to-end solution that covers orchestration, billing, customer lifecycle, and
cloud marketplace functionality. The integration leverages CloudStack for core
IaaS operations—compute, storage, VPC, and Kubernetes—while layering a
customizable CMP (Cloud Manageme [...]
+ className: "box-apiculus box131",
+ imageSrc: "/img/apiculus-logo.png",
+ altText: "apiculus",
+ colClass: "col-md-12"
+ }
+ ]
+ }
+ };
+
+ // Create a flattened integrationData object for modal support
+ const integrationData = {};
+ Object.values(integrationConfig).forEach(tab => {
+ tab.integrations.forEach(integration => {
+ if (integration.title && integration.description) {
+ integrationData[integration.key] = {
+ title: integration.title,
+ description: integration.description
+ };
+ }
+ });
+ });
+
+ const openModal = (integrationKey) => {
+ const integration = integrationData[integrationKey];
+ if (integration) {
+ setModalContent(integration);
+ setShowModal(true);
+ }
+ };
+
+ const closeModal = () => {
+ setShowModal(false);
+ setModalContent({});
+ };
+
+ // Generic helper function to create integration boxes with optional modal
support
+ const createIntegrationBox = (integration) => {
+ const hasModal = integrationData[integration.key];
+
+ let borderRadius = '8px';
+
+ const baseProps = {
+ className: `tab-box ${integration.className}${hasModal ? '
integration-item' : ''}`,
+ key: integration.key,
+ style: {
+ position: 'relative',
+ transition: 'all 0.3s ease',
+ overflow: 'hidden',
+ borderRadius: borderRadius
+ }
+ };
+
+ if (hasModal) {
+ baseProps.onClick = () => openModal(integration.key);
+ baseProps.style = { ...baseProps.style, cursor: 'pointer' };
+ }
+
+ return (
+ <div className={integration.colClass} key={integration.key}>
+ <div {...baseProps}>
+ <img src={integration.imageSrc} alt={integration.altText ||
integration.key} style={{ borderRadius: borderRadius }} />
+ {hasModal && (
+ <>
+ {/* Clickable indicator icon */}
+ <div className="clickable-icon" style={{
+ position: 'absolute',
+ top: '8px',
+ right: '8px',
+ width: '24px',
+ height: '24px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: integration.iconColor === 'dark'
+ ? '#000000'
+ : '#ffffff',
+ fontSize: '18px',
+ fontWeight: 'bold',
+ zIndex: 2,
+ cursor: 'pointer',
+ textShadow: integration.iconColor === 'dark'
+ ? '0 0 3px rgba(255,255,255,0.8)'
+ : '0 0 3px rgba(0,0,0,0.8)'
+ }}>
+ ⓘ
+ </div>
+ {/* Learn more overlay */}
+ <div className="learn-more-overlay" style={{
+ position: 'absolute',
+ top: '0',
+ left: '0',
+ right: '0',
+ bottom: '0',
+ backgroundColor: 'rgba(0,0,0,0.7)',
+ color: 'white',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ fontSize: '14px',
+ fontWeight: '600',
+ opacity: '0',
+ transition: 'opacity 0.3s ease',
+ borderRadius: borderRadius,
+ zIndex: 1
+ }}>
+ Learn more
+ </div>
+ </>
+ )}
+ </div>
+ </div>
+ );
+ };
+
+ // Function to render tab content dynamically
+ const renderTabContent = (tabConfig) => {
+ return (
+ <div className="tab-pane active" role="tabpanel" tabIndex="0">
+ <h2 className="integration-title">
+ <img src={tabConfig.icon} alt="" className="me-3"/>
+ {tabConfig.label}
+ </h2>
+ <SimpleMarkdown>{tabConfig.description}</SimpleMarkdown>
+ <div className="row integration-images">
+ {tabConfig.integrations.map(integration =>
createIntegrationBox(integration))}
+ </div>
+ </div>
+ );
+ };
+
let page = (
<Layout title="Apache CloudStack Integrations">
<IntegrationsHeader />
@@ -137,187 +697,16 @@ export default function CloudStackIntegrations() {
<div className="row">
<div className="col col-md-12">
<Tabs className="tabbed-examples tab-box">
- <TabItem value="automation" label="Automation" default>
- <div className="tab-pane active" id="automation"
role="tabpanel" aria-labelledby="automation-tab" tabindex="0">
- <h2 className="integration-title"><img
src="/img/automation_icon.svg" alt="" className="me-3"/>Automation</h2>
- <p>
-CloudStack supports automation integrations through its robust API and
-integration capabilities, enabling <strong>seamless orchestration and
-automation of cloud infrastructure tasks</strong>.
- </p>
- <div className="row integration-images">
- <div className="col-md-6">
- <div className="tab-box box-puppet box278"><img
src="/img/puppet_logo.svg" alt="hyper-v"/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-terraform box131"><img
src="/img/terraform_logo.svg" alt="hyper-v"/></div>
- <div className="tab-box box-ansible box131"><img
src="/img/ansible_logo.svg" alt="hyper-v"/></div>
- </div>
- <div className="col-md-12">
- <div className="tab-box box-chef box131"><img
src="/img/chef-logo.png" alt="hyper-v"/></div>
- </div>
- </div>
- </div>
- </TabItem>
- <TabItem value="backup" label="Backup & Disaster
Recovery">
- <div className="tab-pane" id="backup" role="tabpanel"
aria-labelledby="backup-tab" tabindex="0">
- <h2 className="integration-title"><img
src="/img/Backup_icon.svg" alt="" className="me-3"/>Backup & Disaster
Recovery</h2>
- <p>
-Supports backup and disaster recovery solutions through
-CloudStack’s <strong>APIs and extensible architecture</strong>,
-enabling third-party tools and services to seamlessly integrate with
-the platform for data protection and continuity.
- </p>
- <div className="row integration-images">
- <div className="col">
- <div className="tab-box box-acronis box192"><img
src="/img/acronis_logo.svg" alt=""/></div>
- </div>
- </div>
- </div>
- </TabItem>
- <TabItem value="containers" label="Containers">
- <div className="tab-pane" id="containers" role="tabpanel"
aria-labelledby="containers-tab" tabindex="0">
- <h2 className="integration-title"><img
src="/img/containers_icon.svg" alt="" className="me-3"/>Containers</h2>
- <p>
-CloudStack supports different containers through its Container
-Service, which can manage and orchestrate container-based workloads
-alongside traditional virtual machines, <strong>providing a unified
-cloud infrastructure platform</strong>.
- </p>
- <div className="row integration-images">
- <div className="col">
- <div className="tab-box box-kubernetes box192"><img
src="/img/kubernetes_logo.svg" alt=""/></div>
- </div>
- </div>
- </div>
- </TabItem>
- <TabItem value="hypervisors" label="Hypervisors">
- <div className="tab-pane" id="hypervisors" role="tabpanel"
aria-labelledby="hypervisors-tab" tabindex="0">
- <h2 className="integration-title"><img
src="/img/Hypervisors_icon.svg" alt="" className="me-3"/>Hypervisors</h2>
- <p>
-Supports different hypervisors through
-CloudStack’s <strong>hypervisor-agnostic architecture</strong>,
-allowing deployment and management of virtualized resources across
-various hypervisor platforms.
- </p>
- <div className="row integration-images">
- <div className="col-md-6">
- <div className="tab-box box-blue box278"><img
src="/img/MS_hyper-v_logo.png" alt="hyper-v"/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-white box278"><img
src="/img/VM_ware_logo.svg" alt="vmware"/></div>
- </div>
- <div className="col-md-12">
- <div className="tab-box box-citrix box131"><img
src="/img/citrix_logo.svg" alt="citrix"/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-dgray box131"><img
src="/img/KVM_logo.svg" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-lgray box131"><img
src="/img/XCP-ng_logo.png" alt=""/></div>
- </div>
- </div>
- </div>
- </TabItem>
- <TabItem value="monitoring" label="Monitoring">
- <div className="tab-pane" id="monitoring" role="tabpanel"
aria-labelledby="monitoring-tab" tabindex="0">
- <h2 className="integration-title"><img
src="/img/monitoring_icon.svg" alt="" className="me-3"/>Monitoring</h2>
- <p>
-Apache CloudStack supports different hypervisors through
-its <strong>hypervisor-agnostic architecture</strong>, allowing
-deployment and management of virtualized resources across various
-hypervisor platforms.
- </p>
- <div className="row integration-images">
- <div className="col">
- <div className="tab-box box-veeam box192"><img
src="/img/veeam_logo.svg" alt=""/></div>
- </div>
- </div>
- </div>
- </TabItem>
- <TabItem value="networking" label="Networking">
- <div className="tab-pane" id="networking" role="tabpanel"
aria-labelledby="networking-tab" tabindex="0">
- <h2 className="integration-title"><img
src="/img/networking_icon.svg" alt="" className="me-3"/>Networking</h2>
- <p>
-Support different networking integrations through CloudStack’s modular
-networking framework, which facilitates the integration
-of <strong>various network technologies and services to meet diverse
-infrastructure needs</strong>.
- </p>
- <div className="row integration-images">
- <div className="col">
- <div className="tab-box box-tfabric box192"><img
src="/img/tungsten_logo.svg" alt=""/></div>
- </div>
- </div>
- </div>
- </TabItem>
- <TabItem value="storage" label="Storage">
- <div className="tab-pane" id="storage" role="tabpanel"
aria-labelledby="storage-tab" tabindex="0">
- <h2 className="integration-title"><img
src="/img/storage_icon.svg" alt="" className="me-3"/>Storage</h2>
- <p>
-Apache CloudStack supports different storage integrations through its
-pluggable storage framework, allowing seamless integration with
-various storage systems and technologies for <strong>versatile data
-management and storage options</strong>.
- </p>
- <div className="row integration-images">
- <div className="col-md-6">
- <div className="tab-box box-white box278"><img
src="/img/storpool_logo.svg" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-netapp box278"><img
src="/img/net_app__solidfire_logo.svg" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-pure box131"><img
src="/img/pure_storage-logo.svg" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-ceph box131"><img
src="/img/ceph_logo.svg" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-gluster box90"><img
src="/img/gluster_logo.png" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-nutanix box172"><img
src="/img/nutanix_logo.svg" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-dell box172"><img
src="/img/dell_logo.svg" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-cloudian box172"><img
src="/img/cloudian_logo.svg" alt=""/></div>
- </div>
- </div>
- </div>
- </TabItem>
- <TabItem value="billing" label="Billing">
- <div className="tab-pane" id="storage" role="tabpanel"
aria-labelledby="storage-tab" tabindex="0">
- <h2 className="integration-title"><img
src="/img/storage_icon.svg" alt="" className="me-3"/>Storage</h2>
- <p>
-Apache CloudStack offers integrations with a variety of self-service
-intuitive billing and cloud management portals, designed to empower
-administrators, and service providers with the tools they need to
-manage cloud resources effectively . These solutions offer tools for
-service orchestration, automation, billing, and seamless integration
-with various IaaS cloud ecosystems.
- </p>
- <div className="row integration-images">
- <div className="col-md-6">
- <div className="tab-box box-cloudmc box131"><img
src="/img/cloud-mc-white.png" height="47p" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-stackconsole
box131"><img src="/img/Stack Console SVG.svg" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-stackbill box131"><img
src="/img/stack-bill-logo-02.png" height="47p" alt=""/></div>
- </div>
- <div className="col-md-6">
- <div className="tab-box box-hostbill box131"><img
src="/img/hostbill-logo.png" height="47p" alt=""/></div>
- </div>
- <div className="col-md-12">
- <div className="tab-box box-apiculus box131"><img
src="/img/apiculus-logo.png" height="47p" alt=""/></div>
- </div>
- </div>
- </div>
- </TabItem>
+ {Object.entries(integrationConfig).map(([tabKey, tabConfig],
index) => (
+ <TabItem
+ key={tabKey}
+ value={tabKey}
+ label={tabConfig.label}
+ default={index === 0}
+ >
+ {renderTabContent(tabConfig)}
+ </TabItem>
+ ))}
</Tabs>
</div>
<div className="col-lg-6">
@@ -373,7 +762,7 @@ as <strong>invaluable resources</strong> for users and
organizations
looking to harness the power of CloudStack for various cloud computing
needs. By sharing best practices, deployment strategies, and
real-world use cases, these solution briefs <strong>empower users to
-make the most of CloudStack’s capabilities, fostering a collaborative
+make the most of CloudStack's capabilities, fostering a collaborative
and thriving ecosystem.</strong>
</p>
</div>
@@ -391,7 +780,7 @@ diverse services in the short-term.
</p>
</div>
<div className="apache-card-footer">
- <a href="" className="btn btn-primary">Download</a>
+ <a href="/files/terraform-solution-brief%202023.pdf"
className="btn btn-primary">Download</a>
</div>
</div>
</div>
@@ -423,7 +812,7 @@ successful Proof of…
<p>CloudStack is a multi-hypervisor, multi-tenant,
high-availability cloud management…</p>
</div>
<div className="apache-card-footer">
- <a href="" className="btn btn-primary">Download</a>
+ <a
href="/blog/cloudstack-integrations-linbit-open-source/" className="btn
btn-primary">Download</a>
</div>
</div>
</div>
@@ -431,6 +820,61 @@ successful Proof of…
</div>
</section>
+ {/* Modal */}
+ {showModal && (
+ <div className="modal-overlay" onClick={closeModal} style={{
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: 'rgba(0, 0, 0, 0.5)',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ zIndex: 1000
+ }}>
+ <div className="modal-content" onClick={(e) =>
e.stopPropagation()} style={{
+ backgroundColor: 'white',
+ padding: '2rem',
+ borderRadius: '8px',
+ maxWidth: '600px',
+ width: '90%',
+ maxHeight: '80vh',
+ overflowY: 'auto',
+ boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+ }}>
+ <div className="modal-header" style={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginBottom: '1rem',
+ borderBottom: '1px solid #eee',
+ paddingBottom: '1rem'
+ }}>
+ <h2 id="modal-title" style={{ margin: 0, color: '#333'
}}>{modalContent.title}</h2>
+ <button
+ onClick={closeModal}
+ style={{
+ background: 'none',
+ border: 'none',
+ fontSize: '1.5rem',
+ cursor: 'pointer',
+ color: '#666'
+ }}
+ >
+ ×
+ </button>
+ </div>
+ <div className="modal-body">
+ <div style={{ lineHeight: '1.6', color: '#555' }}>
+ <SimpleMarkdown>{modalContent.description}</SimpleMarkdown>
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
+
</main>
<LearnMore/>
diff --git a/static/img/backroll_logo.png b/static/img/backroll_logo.png
new file mode 100644
index 000000000..1ed6ac9e0
Binary files /dev/null and b/static/img/backroll_logo.png differ
diff --git a/static/img/linbit_sds_logo.svg b/static/img/linbit_sds_logo.svg
new file mode 100644
index 000000000..6aeab0eb0
--- /dev/null
+++ b/static/img/linbit_sds_logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; id="Layer_1" viewBox="0 0 875.71
163.43"><defs><style>.cls-1{fill:#121212;}</style></defs><path class="cls-1"
d="M620.99,21.86v119.79h240.16V21.86h-240.16ZM689.99,112.97c-5.65,4.79-13.21,6.8-20.49,6.8-9.1,0-18-3.06-25.37-8.23l8.04-15.13c4.69,4.12,10.25,7.47,16.66,7.47,4.4,0,9.1-2.2,9.1-7.28s-7.37-7.09-11.39-8.23c-11.78-3.35-19.53-6.42-19.53-20.4s10.44-24.23,24.9-24.23c7.28,0,16.18,2.3,22.6,5.94l-7.47,14.55c-3.45-2.87-7.85-4.79-12.45-4.79-3.45,0-8.0
[...]
\ No newline at end of file
diff --git a/static/img/minio_logo.svg b/static/img/minio_logo.svg
new file mode 100644
index 000000000..e928e786c
--- /dev/null
+++ b/static/img/minio_logo.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"; viewBox="0 0
162.612 24.465"><path d="M52.751.414h9.108v23.63h-9.108zM41.711.74l-18.488
9.92a.919.919 0 0 1-.856 0L3.879.74A2.808 2.808 0 0 0 2.558.414h-.023A2.4 2.4 0
0 0 0 2.641v21.376h9.1V13.842a.918.918 0 0 1 1.385-.682l10.361 5.568a3.634
3.634 0 0 0 3.336.028l10.933-5.634a.917.917 0 0 1 1.371.69v10.205h9.1V2.641A2.4
2.4 0 0 0 43.055.414h-.023a2.808 2.808 0 0
0-1.321.326zm65.564-.326h-9.237v10.755a.913.913 0 0 1-1.338.706L72 [...]
\ No newline at end of file
diff --git a/static/img/netris_logo.png b/static/img/netris_logo.png
new file mode 100644
index 000000000..69bedee9a
Binary files /dev/null and b/static/img/netris_logo.png differ
diff --git a/static/img/vmware_nsx_logo.jpg b/static/img/vmware_nsx_logo.jpg
new file mode 100644
index 000000000..b106f18fb
Binary files /dev/null and b/static/img/vmware_nsx_logo.jpg differ
