Stephan Lo
3239cfbc62
Renamed resources/likec4 to resources/edp-likec4 to better reflect that this directory contains the Enterprise Developer Platform architecture models, not documentation platform architecture. Extended element kinds in edp-likec4/models/spec.c4 to support documentation platform modeling: - Added person, tool, process, repository element kinds - These allow modeling of documentation workflows and processes Consolidated webcomponent generation: - Combined both architecture projects (edp-likec4 and doc-likec4) into a single webcomponent output at static/js/likec4-webcomponent.js - Updated Taskfile.yml to generate from edp-likec4 directory - Removed duplicate webcomponent script loading in head-end.html - Fixed CustomElementRegistry duplicate registration issue Embedded TeleNeoOffice corporate fonts: - Added font files to static/fonts/ and static/ root - Required for correct rendering of diagrams in webcomponent - Fonts are embedded in webcomponent but also served from Hugo static paths - Fixed 404 errors for font loading Updated architecture documentation: - Fixed markdown linting issues (trailing spaces, fence spacing) - Updated all references from resources/likec4 to resources/edp-likec4 - Enhanced setup.md with correct directory structure This refactoring enables: 1. Clear separation between EDP architecture and documentation platform models 2. Single consolidated webcomponent containing all architecture views 3. Proper font loading for corporate branding in diagrams 4. Foundation for future architecture documentation expansion Breaking changes: None (paths updated in documentation)
125 lines
4.7 KiB
Markdown
125 lines
4.7 KiB
Markdown
---
|
|
title: "High Level Architecture"
|
|
linkTitle: "High Level Architecture"
|
|
weight: 1
|
|
description: >
|
|
Interactive high-level architecture overview of the Enterprise Development Platform
|
|
---
|
|
|
|
This document describes the high-level architecture of our Enterprise Development Platform (EDP) system.
|
|
|
|
## Interactive Architecture Diagram
|
|
|
|
<div class="likec4-container">
|
|
<div class="likec4-header">
|
|
Enterprise Development Platform - OTC FaaS Deployment Architecture
|
|
</div>
|
|
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
|
|
<div class="likec4-loading" id="likec4-loading">
|
|
Loading architecture diagram...
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Enhanced loading check with fallback
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let attempts = 0;
|
|
const maxAttempts = 10;
|
|
|
|
function checkLikeC4Loading() {
|
|
attempts++;
|
|
const component = document.querySelector('likec4-view');
|
|
const loading = document.getElementById('likec4-loading');
|
|
|
|
if (component && component.shadowRoot && component.shadowRoot.children.length > 0) {
|
|
if (loading) loading.style.display = 'none';
|
|
console.log('LikeC4 component loaded successfully');
|
|
} else if (attempts >= maxAttempts) {
|
|
console.warn('LikeC4 component failed to load');
|
|
if (loading) {
|
|
loading.innerHTML = 'Interactive diagram failed to load. <br><small>Please ensure JavaScript is enabled and the webcomponent is generated.</small>';
|
|
loading.style.color = '#dc3545';
|
|
}
|
|
} else {
|
|
setTimeout(checkLikeC4Loading, 1000);
|
|
}
|
|
}
|
|
|
|
// Check if LikeC4 loader is available
|
|
if (typeof window.customElements !== 'undefined') {
|
|
setTimeout(checkLikeC4Loading, 1500);
|
|
} else {
|
|
const loading = document.getElementById('likec4-loading');
|
|
if (loading) {
|
|
loading.innerHTML = 'Interactive diagrams require a modern browser with JavaScript enabled.';
|
|
loading.style.color = '#dc3545';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{{< alert title="Interactive Diagram" >}}
|
|
The diagram above is interactive when viewed in a compatible browser.
|
|
You can click on components to explore the architecture details.
|
|
|
|
**Note:** The interactive diagram requires the LikeC4 webcomponent to be generated.
|
|
See the [setup instructions]({{< ref "/docs/architecture/setup" >}}) for details.
|
|
{{< /alert >}}
|
|
|
|
## Architecture Overview
|
|
|
|
The Enterprise Development Platform consists of several key components working together to provide a comprehensive development and deployment environment.
|
|
|
|
### Key Components
|
|
|
|
1. **OTC Foundry** - Central management and orchestration layer
|
|
2. **Per-Tenant EDP** - Isolated development environments for each tenant
|
|
3. **FaaS Environment** - Function-as-a-Service deployment targets on Open Telekom Cloud
|
|
4. **Cloud Services** - Managed services including databases, storage, and monitoring
|
|
|
|
### Deployment Environments
|
|
|
|
- **Development Environment** (`*.t09.de`) - For platform team development and testing
|
|
- **Production Environment** (`*.buildth.ing`) - For production workloads and tenant services
|
|
|
|
## Component Details
|
|
|
|
The interactive diagram above shows the relationships between different components and how they interact within the system architecture. You can explore the diagram by clicking on different elements to see more details.
|
|
|
|
### Infrastructure Components
|
|
|
|
- **Kubernetes Clusters** - Container orchestration using OTC CCE (Cloud Container Engine)
|
|
- **ArgoCD** - GitOps continuous deployment and application lifecycle management
|
|
- **Forgejo** - Git repository management and CI/CD pipelines
|
|
- **Observability Stack** - Monitoring (Prometheus, Grafana), logging (Loki), and alerting
|
|
|
|
### Security and Management
|
|
|
|
- **Keycloak** - Identity and access management (IAM)
|
|
- **OpenBao** - Secrets management (Hashicorp Vault fork)
|
|
- **External Secrets Operator** - Kubernetes secrets integration
|
|
- **Crossplane** - Infrastructure as Code and cloud resource provisioning
|
|
|
|
### Developer Experience
|
|
|
|
- **Backstage** - Internal developer portal and service catalog
|
|
- **Forgejo Actions** - CI/CD pipeline execution
|
|
- **Development Workflows** - GitOps-based inner and outer loop workflows
|
|
|
|
## Setup and Maintenance
|
|
|
|
To update or modify the architecture diagrams:
|
|
|
|
1. Edit the `.c4` files in `resources/edp-likec4/`
|
|
2. Regenerate the webcomponent:
|
|
|
|
```bash
|
|
cd resources/edp-likec4
|
|
npx likec4 codegen webcomponent \
|
|
--webcomponent-prefix likec4 \
|
|
--outfile ../../static/js/likec4-webcomponent.js
|
|
```
|
|
|
|
3. Commit both the model changes and the regenerated JavaScript file
|
|
|
|
For more information, see the [LikeC4 Integration Guide]({{< ref "/docs/architecture/setup" >}}).
|