From fd08cfdffde3fd2fba5968040e32eb6dffa1b497 Mon Sep 17 00:00:00 2001 From: Jelle den Burger Date: Tue, 17 Mar 2026 17:34:08 +0100 Subject: [PATCH 1/2] 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 } }); + } } From ceb0d476740d46996f34309dcbe24056374f1e7b Mon Sep 17 00:00:00 2001 From: Jelle den Burger Date: Tue, 17 Mar 2026 17:45:44 +0100 Subject: [PATCH 2/2] Refactor platform integration to two-column layout --- .../platform-integration.component.html | 281 ++++++----------- .../platform-integration.component.ts | 6 - .../template-details.component.html | 282 ++++++++---------- 3 files changed, 216 insertions(+), 353 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 e29f2a49..23770538 100644 --- a/website/src/app/features/platform-integration/platform-integration.component.html +++ b/website/src/app/features/platform-integration/platform-integration.component.html @@ -33,218 +33,133 @@

Integrate {{ platform.
- -
- - -
- - - - -
- - - - -
- - -
-
+
- -
-

- Set up via Admin Panel -

-
-
-
1
-
-
Open the meshStack Admin Panel
-
Log in to your meshStack instance and navigate to the Admin Area.
-
-
-
-
2
-
-
Go to Platforms → Add Platform
-
In the left sidebar, click Platforms, then hit + Add Platform and select {{ platform.name }} from the list.
-
-
-
-
3
-
-
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.
-
-
-
-
✓
-
-
Publish & enjoy!
-
Set the availability to Public and publish the platform — your users can now self-service tenants on {{ platform.name }}.
-
-
+ +
+
+
1
+
+
Open the meshStack Admin Panel
+
Navigate to Admin Area in your meshStack instance.
- - -
- +
+
2
-

- 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 -
    • -
+
Platforms → Add Platform
+
Select {{ platform.name }} from the platform list.
- - -
- -
- Already using IaC? - Switch to the for a GitOps approach. -
+
+
+
3
+
+
Enter credentials & endpoint
+
Fill in the API endpoint and service account credentials.
- - -
- - Need more detail? See the - meshStack Platform docs. - +
+
+
4
+
+
Configure Landing Zones
+
Define how meshStack provisions and governs tenants on this platform.
+
+
✓
+
+
Publish & you're done!
+
Set availability to Public — users can now self-service tenants on {{ platform.name }}.
+
+
+
+ +
+ + 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.
-
+ +
+
+ +
+
+
OpenTofu / Terraform
+
Infrastructure as Code
+
+ + Recommended + + + Coming soon + +
+ + +
+
+
1
+
+
Copy the snippet below into your codebase
-
-
✓
-
-
Done!
-
The platform is integrated. You can start provisioning tenants, assigning users, and collecting costs.
-
+
+
+
2
+
+
Set your API key & update the locals block
- - -
- - Prefer no-code? - +
+
3
+
+
Run tofu init && tofu apply
+
-
+
- 
{{ platform?.terraformSnippet }}
+ 
{{ platform?.terraformSnippet }}
+
-
-
+
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 46fc2fd6..707d0a75 100644 --- a/website/src/app/features/platform-integration/platform-integration.component.ts +++ b/website/src/app/features/platform-integration/platform-integration.component.ts @@ -24,7 +24,6 @@ export class PlatformIntegrationComponent implements OnInit { public breadcrumbs$!: Observable; public copiedTerraform = false; public headerBgColor$!: Observable; - public selectedMethod: 'ui' | 'code' = 'ui'; constructor( private route: ActivatedRoute, @@ -77,9 +76,4 @@ 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 } }); - } } diff --git a/website/src/app/features/template-details/template-details.component.html b/website/src/app/features/template-details/template-details.component.html index 04127a35..a660761b 100644 --- a/website/src/app/features/template-details/template-details.component.html +++ b/website/src/app/features/template-details/template-details.component.html @@ -53,23 +53,6 @@

{{ template.name }}

- - -
-
-

- - Prefer UI over code? You can also import this building block via the meshStack UI instead of using Terraform. -

- -
-
@@ -77,169 +60,140 @@

{{ template.name }}
- -
-
- -
-

- - Setup with OpenTofu/Terraform -

-

- Use this Terraform configuration to create the building block definition directly in meshStack. -

-
-
-
1
-
-
Add the OpenTofu snippet
-
Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.
-
-
-
-
2
-
-
Configure variables
-
- Update the required variables in the locals block and configure your meshStack provider credentials. You can create an API Key by following these instructions. -
-
-
-
-
3
-
-
Deploy with OpenTofu
-
Run tofu init, tofu plan, and tofu apply to create the building block definition.
-
+ + +
+ + +
+ +
+
+ +
+
+
meshStack UI
+
No code required
+
+ + No-code + +
+ + +
+
+
1
+
+
Click "Add to meshStack"
+
This opens the import wizard to guide you through setup.
+
+
+
+
2
+
+
Follow the wizard
+
Complete the import steps in your meshStack instance.
+
+
+
+
3
+
+
+ Optional + Apply the backplane
-
-
✓
-
-
Success!
-
The building block definition is now available in your meshStack.
-
+
+ Run the backplane Terraform files + to prepare cloud platform resources.
- -
+
+
✓
+
+
Done!
+
The building block is available in your meshStack and ready to use.
+
+
+
+ + +
- 
{{ template.terraformSnippet }}
+ + Don't have meshStack yet? +
-
- - - -
- - -
-
-

- - Import via UI -

-

Quick and easy setup directly from meshStack

-
- -
-
-
1
-
-
Click the "Add to meshStack" button
-
This will open the import wizard to guide you through the setup process.
-
-
-
-
2
-
-
Run through the wizard in your meshStack
-
Follow the import wizard in your meshStack to set up the building block definition.
-
-
-
-
3
-
-
- Optional - Apply the backplane Terraform files -
-
- Run the - backplane Terraform files - to prepare all necessary resources in your cloud platform. -
-
-
-
-
✓
-
-
Success!
-
The building block definition is now available in your meshStack and ready to use.
-
-
-
- + +
+ +
+
+ +
+
+
OpenTofu / Terraform
+
Infrastructure as Code
+
+ + Recommended + + + Coming soon + +
-
- - Don't have meshStack yet? - + +
+
+
1
+
Copy the snippet below into your codebase
+
+
+
2
+
+ Configure your meshStack provider credentials and update the locals block. + You can create an API key by following these instructions.
- +
+
3
+
Run tofu init && tofu apply
+
+
- - -
-
-

- - Manual Setup -

-

For users who prefer to own the Terraform code

-
+ +
+ + 
{{ template.terraformSnippet }}
+
-
-
-
1
-
-
Copy the Terraform files from the repository
-
Clone or download the building block code from GitHub and add it to your own repository.
-
-
-
-
2
-
-
Create building block definition
-
In meshStack, create a new building block definition pointing to your repository location.
-
-
-
-
-
- + +
+