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..23770538 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,61 +32,135 @@

Integrate {{ platform.
- -
-
- -
-

- - Quick Start -

-
-
-
1
-
-
Add the OpenTofu snippet
-
Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.
-
-
-
-
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. -
-
-
-
-
3
-
-
Deploy with OpenTofu
-
Run tofu init, tofu plan, and tofu apply to provision the integration.
-
-
-
-
✓
-
-
Success!
-
The platform is now integrated and you can start using it to provision tenants, assign users and collect costs.
-
-
+ + +
+ + +
+ +
+
+ +
+
+
meshStack UI
+
No code required
+
+ + No-code + +
+ + +
+
+
1
+
+
Open the meshStack Admin Panel
+
Navigate to Admin Area in your meshStack instance.
- -
+
+
2
+
+
Platforms → Add Platform
+
Select {{ platform.name }} from the platform list.
+
+
+
+
3
+
+
Enter credentials & endpoint
+
Fill in the API endpoint and service account credentials.
+
+
+
+
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. + +
+
+ + +
+ + +
+
+ +
+
+
OpenTofu / Terraform
+
Infrastructure as Code
+
+ + Recommended + + + Coming soon + +
+ + +
+
+
1
+
+
Copy the snippet below into your codebase
+
+
+
+
2
+
+
Set your API key & update the locals block
+
+
+
+
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 4b05afe1..707d0a75 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 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.
-
-
-
-
-
- + +
+