From fd08cfdffde3fd2fba5968040e32eb6dffa1b497 Mon Sep 17 00:00:00 2001 From: Jelle den Burger Date: Tue, 17 Mar 2026 17:34:08 +0100 Subject: [PATCH] Add tabbed UI for platform integration methods --- .../platform-integration.component.html | 202 ++++++++++++++++-- .../platform-integration.component.ts | 9 +- 2 files changed, 187 insertions(+), 24 deletions(-) diff --git a/website/src/app/features/platform-integration/platform-integration.component.html b/website/src/app/features/platform-integration/platform-integration.component.html index 2b7bdae1..e29f2a49 100644 --- a/website/src/app/features/platform-integration/platform-integration.component.html +++ b/website/src/app/features/platform-integration/platform-integration.component.html @@ -18,9 +18,8 @@

Integrate {{ platform.name }} into meshStack

{{ platform.description }}

- -
+
{{ benefit }} @@ -33,49 +32,205 @@

Integrate {{ platform.
- -
-
- -
-

- - Quick Start + + +
+ + +
+ + + + +
+ + + + +
+ + +
+
+ + +
+

+ Set up via Admin Panel

-
+
1
-
Add the OpenTofu snippet
-
Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.
+
Open the meshStack Admin Panel
+
Log in to your meshStack instance and navigate to the Admin Area.
2
-
Provider setup and configure variables
-
- Ensure you enter your API key in the provider block and update the required variables in the locals block as needed for your environment. -
+
Go to Platforms → Add Platform
+
In the left sidebar, click Platforms, then hit + Add Platform and select {{ platform.name }} from the list.
3
-
Deploy with OpenTofu
-
Run tofu init, tofu plan, and tofu apply to provision the integration.
+
Enter credentials & endpoint
+
Fill in the API endpoint URL and service account credentials required for replication and metering.
+
+
+
+
4
+
+
Configure Landing Zones
+
Add one or more landing zones to define how meshStack will provision and govern tenants on this platform.
✓
-
Success!
-
The platform is now integrated and you can start using it to provision tenants, assign users and collect costs.
+
Publish & enjoy!
+
Set the availability to Public and publish the platform — your users can now self-service tenants on {{ platform.name }}.
- + + +
+ +
+

+ Why choose the UI path? +

+
    +
  • + + No Terraform or coding knowledge required +
    • +
  • + + Guided wizard validates your inputs as you go +
    • +
  • + + Ideal for one-time setup or smaller teams +
    • +
  • + + Changes take effect immediately — no tofu apply needed +
    • +
+
+ + +
+ +
+ Already using IaC? + Switch to the for a GitOps approach. +
+
+ + +
+ + Need more detail? See the + meshStack Platform docs. + +
+
+ +
+
+ + +
+
+ + +
+

+ Quick Start +

+
+
+
1
+
+
Copy the OpenTofu snippet
+
Copy the provided code and add it to your infrastructure codebase.
+
+
+
+
2
+
+
Configure provider & variables
+
+ Enter your API key in the provider block and update the required variables in the locals block. +
+
+
+
+
3
+
+
Deploy with OpenTofu
+
Run tofu init, tofu plan, and tofu apply.
+
+
+
+
✓
+
+
Done!
+
The platform is integrated. You can start provisioning tenants, assigning users, and collecting costs.
+
+
+
+ + +
+ + Prefer no-code? + +
+
+ +
+ +
+

diff --git a/website/src/app/features/platform-integration/platform-integration.component.ts b/website/src/app/features/platform-integration/platform-integration.component.ts index 4b05afe1..46fc2fd6 100644 --- a/website/src/app/features/platform-integration/platform-integration.component.ts +++ b/website/src/app/features/platform-integration/platform-integration.component.ts @@ -6,7 +6,6 @@ import { Observable, switchMap, of, map } from 'rxjs'; import { BreadcrumbComponent } from 'app/shared/breadcrumb'; import { BreadCrumbService } from 'app/shared/breadcrumb/bread-crumb.service'; import { BreadcrumbItem } from 'app/shared/breadcrumb/breadcrumb'; -import { CardComponent } from 'app/shared/card'; import { PlatformService, Platform } from 'app/shared/platform'; import { extractLogoColor } from 'app/shared/util/logo-color.util'; import { HighlightDirective } from 'app/shared/directives'; @@ -15,7 +14,7 @@ const DEFAULT_HEADER_BG_COLOR = 'rgba(203,213,225,0.3)'; @Component({ selector: 'mst-platform-integration', - imports: [CommonModule, CardComponent, BreadcrumbComponent, RouterLink, HighlightDirective], + imports: [CommonModule, BreadcrumbComponent, RouterLink, HighlightDirective], templateUrl: './platform-integration.component.html', styleUrl: './platform-integration.component.scss', standalone: true @@ -25,6 +24,7 @@ export class PlatformIntegrationComponent implements OnInit { public breadcrumbs$!: Observable; public copiedTerraform = false; public headerBgColor$!: Observable; + public selectedMethod: 'ui' | 'code' = 'ui'; constructor( private route: ActivatedRoute, @@ -77,4 +77,9 @@ export class PlatformIntegrationComponent implements OnInit { (window as any).plausible('Copy Platform Terraform'); }); } + + public selectMethod(method: 'ui' | 'code'): void { + this.selectedMethod = method; + (window as any).plausible?.('Select Platform Integration Method', { props: { method } }); + } }