Skip to main content

​
Overview

Multi-Cloud Manager provides a unified view of resources across multiple cloud providers, eliminating the need to switch between different consoles. View, monitor, and manage resources from Azure, Google Cloud Platform, and AWS in one place.

Unified Resource Visibility

All cloud resources are displayed side-by-side with consistent UI components, making cross-cloud comparison and management seamless.

​
Virtual Machines View

The Virtual Machines page (VirtualMachines.js) displays compute resources from both Azure and GCP in a unified interface.

​
Azure Virtual Machines

View all Azure VMs with comprehensive details: 
// Fetching Azure VMs from VirtualMachines.js
const fetchVirtualMachines = async () => {
  const res = await fetch("/api/virtual_machines", {
    credentials: "include",
  });
  const data = await res.json();
  setVirtualMachines(data.value || []);
};
Displayed Information:
  • Subscription ID
  • Resource Group
  • VM Name
  • Location
  • Monitoring status
  • Quick actions (Monitor 📈, Modify 🛠, Delete ❌)

​
GCP Virtual Machines

View Google Cloud compute instances alongside Azure VMs: 
// Fetching GCP VMs
const fetchGcpVms = async () => {
  const res = await fetch("/api/gcp/list_vms", { credentials: "include" });
  const data = await res.json();
  setGcpVms(data.value || []);
};
Displayed Information:
  • VM Name
  • Project ID
  • Location (Zone)
  • Status
  • Machine Type
  • Monitoring access
  • Action buttons
Both Azure and GCP VMs are displayed on the same page with clear provider separation, allowing easy comparison and management.

​
Storage Resources View

The Storage page (Storage.js) unifies storage resources across clouds:

​
Azure Storage Accounts

Account Details

  • Account name
  • Resource group
  • Location
  • Storage type
  • Access tier

Security Visibility

Public access status is highlighted in red when enabled, providing instant security awareness
Table Display: 
<table style={tableStyle}>
  <thead>
    <tr>
      <th>Nazwa</th>
      <th>Grupa zasobów</th>
      <th>Lokalizacja</th>
      <th>Rodzaj konta</th>
      <th>Dostęp publiczny</th>
      <th>SKU (Replikacja)</th>
    </tr>
  </thead>
</table>

​
GCP Storage Buckets

View Google Cloud Storage buckets in the same interface:
  • Bucket name
  • Project and display name
  • Location
  • Storage class
  • Quick navigation to bucket contents

​
Container Services View

The Containers page (Containers.js) displays containerized applications from multiple providers:

​
Azure Container Instances

// Fetching Azure containers
const fetchAzureContainers = async () => {
  const res = await fetch("/api/list_containers", { credentials: "include" });
  const data = await res.json();
  setAzureContainers(data.value || []);
};
Container Information:
  • Container name
  • Resource group
  • Location
  • Status
  • Container image
  • Monitor, restart, and delete actions

​
Google Cloud Run Services

// Fetching GCP Cloud Run services
const fetchGcpContainers = async () => {
  const res = await fetch("/api/gcp/list_containers", { credentials: "include" });
  const data = await res.json();
  setGcpServices(data.value || []);
};
Service Information:
  • Service name
  • Region
  • URL endpoint (clickable)
  • Creation timestamp
  • Monitoring and delete actions

Live URLs

GCP Cloud Run service URLs are displayed as clickable links, allowing instant access to deployed applications.

​
Network Resources View

The Networks page (Networks.js) provides unified visibility of virtual networks:

​
Azure Virtual Networks (VNet)

  • Subscription ID
  • Resource Group
  • VNet Name
  • Subnets (expandable list)
  • Add subnet functionality

​
Google Cloud VPC Networks

// VPC table with expandable subnets
{vpc.subnets && vpc.subnets.length > 0 ? (
  <>
    <span>{vpc.subnets.length} subnetów</span>
    <button onClick={() => toggleGcpSubnets(vpc.id)}>
      {isExpanded ? 'Ukryj ▲' : 'Pokaż ▼'}
    </button>
  </>
) : "—"}
VPC Details:
  • VPC name
  • Project ID
  • Subnet mode (Auto/Custom)
  • Routing mode
  • Expandable subnet details with CIDR ranges

Subnet Expansion

Click to expand subnet details showing name, region, and IP CIDR range for each subnet

Cross-Cloud Comparison

Compare Azure VNets and GCP VPCs side-by-side to understand your network topology

​
Resource Groups & Projects

​
Azure Resource Groups

View all resource groups with contents inspection: 
const fetchRGContents = async (subscriptionId, rgName) => {
  const res = await fetch(
    `/api/resource_group_contents?subscriptionId=${subscriptionId}&rgName=${rgName}`,
    { credentials: "include" }
  );
  const data = await res.json();
  setRgResources(data.value || []);
};
Features:
  • Click ”🔎” to inspect resources within a group
  • View resource names, types, and locations
  • Delete resource groups with confirmation

​
GCP Projects

GCP projects are displayed in account management and contextualized with each resource type.

​
Unified Refresh Functionality

All multi-cloud pages include a unified refresh button: 
<button
  onClick={() => {
    fetchAzureContainers();
    fetchGcpContainers();
  }}
  style={buttonStyle}
>
  🔄 Odśwież wszystko
</button>
The refresh button simultaneously updates data from all connected cloud providers, ensuring you always see the latest resource state.

​
Account Management

The Accounts page (Accounts.js) provides visibility into all connected cloud accounts:

​
Multi-Provider Display

const refresh = async () => {
  const resBase = await fetch("/api/accounts");
  const baseAccounts = resBase.ok ? await resBase.json() : [];
  
  const resGCP = await fetch("/api/account/gcp");
  const gcpData = resGCP.ok ? await resGCP.json() : { value: [] };
  
  allAccounts = [...baseAccounts, ...gcpAccounts];
};

​
Provider-Specific Details

  • Provider: Azure
  • Tenant ID
  • Subscriptions (expandable list)

​
UI Components Reference

All multi-cloud views use consistent UI styling: 
const tableStyle = {
  width: "100%",
  borderCollapse: "collapse",
  border: "1px solid #ddd",
  boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
  marginTop: "20px",
};

const buttonStyle = {
  padding: '10px',
  background: '#0078D4',
  color: 'white',
  border: 'none',
  borderRadius: '8px',
  cursor: 'pointer',
};

Consistent Design

All resource tables use the same styling patterns, making the multi-cloud experience intuitive and easy to navigate.

​
Next Steps

Resource Management

Learn how to create, modify, and delete resources

Monitoring

Explore monitoring and alerting capabilities

Build docs developers (and LLMs) love

Get started for freeTalk to us