Frontend-Architektur¶

Das TCM365 Frontend ist eine Single-Page Application auf Basis von Vue 3.5, Vite 7, Pinia 3 und Tailwind CSS 3. Es bietet eine umfassende UI für alle Plattform-Features mit rollenbasierter Zugriffskontrolle, domain-spezifischen Konfigurations-Renderern und Echtzeit-Fortschrittsverfolgung.

Technology Stack¶

Technologie	Version	Zweck
Vue	3.5	UI Framework (Composition API)
Vite	7	Build Tool und Entwicklungsserver
Pinia	3	State Management
Vue Router	4	Client-Side Routing mit Navigation Guards
Tailwind CSS	3	Utility-First CSS Framework
ApexCharts	Latest	Interaktive Datenvisualisierung
Chart.js	Latest	Chart-Rendering
Monaco Editor	Latest	JSON/Code-Editing
TipTap	Latest	Rich Text Editing
CKEditor 5	Latest	Erweitertes Rich Text Editing
Axios	Latest	HTTP Client für API-Kommunikation

Projektstruktur¶

frontend/src/
├── views/                    # 55 Page-Level View-Komponenten
│   ├── admin/                # 7 Admin Views
│   │   ├── UsersView.vue
│   │   ├── GroupsView.vue
│   │   ├── OrgsView.vue
│   │   ├── SettingsView.vue
│   │   ├── AuditLogView.vue
│   │   ├── DataViewerView.vue
│   │   └── DiagnosticsView.vue
│   ├── auth/                 # Authentifizierungs-Views
│   │   └── LoginView.vue
│   ├── errors/               # 6 Fehlerseiten
│   │   ├── Error400.vue ... Error503.vue
│   ├── DashboardView.vue
│   ├── TenantsView.vue
│   ├── SnapshotsView.vue
│   ├── DiffView.vue
│   ├── DriftView.vue
│   ├── BaselinesView.vue
│   ├── ComplianceView.vue
│   ├── RollbackView.vue
│   ├── IncidentsView.vue
│   ├── RiskView.vue
│   ├── ChangeManagementView.vue
│   ├── BcdrView.vue
│   ├── AuditEvidenceView.vue
│   ├── ReportsView.vue
│   ├── WorkflowsView.vue
│   ├── CaWhatIfView.vue
│   ├── EmailSecurityView.vue
│   ├── AnomalyDetectionView.vue
│   ├── CopilotReadinessView.vue
│   ├── AtlassianSetupWizardView.vue  # Atlassian OAuth Setup (v2.5.0)
│   ├── AtlassianCallbackView.vue     # Atlassian OAuth Callback (v2.5.0)
│   └── ...                   # Weitere Feature Views
├── components/               # 106 wiederverwendbare Vue-Komponenten
│   ├── common/               # Gemeinsame UI-Primitive
│   ├── snapshots/            # Snapshot-bezogene Komponenten
│   │   └── viewer/           # 24 spezialisierte Renderer
│   ├── diff/                 # Diff-Visualisierung
│   ├── drift/                # Drift Monitoring
│   ├── baselines/            # 14 Baseline Template-Komponenten
│   ├── compliance/           # Compliance-Visualisierung
│   ├── tenants/              # Tenant Management
│   ├── incidents/            # Incident Management
│   ├── risk/                 # Risk Assessment
│   ├── change-management/    # Change Request-Komponenten
│   ├── rollback/             # Rollback UI
│   ├── anomaly/              # Anomaly Detection
│   ├── audit/                # Audit Evidence
│   ├── bcdr/                 # BC/DR-Komponenten
│   └── workflows/            # Workflow Builder
├── services/                 # 28 API Client Services
├── stores/                   # 10 Pinia State Stores
├── composables/              # Wiederverwendbare Composition Functions
├── router/                   # Vue Router-Konfiguration
├── layouts/                  # Seitenlayouts
│   ├── DefaultLayout.vue     # Hauptlayout mit Seitenleiste
│   ├── BlankLayout.vue       # Minimallayout (Login, Fehler)
│   └── partials/             # Layout-Fragmente
│       ├── NavigationSidebar.vue
│       ├── Topbar.vue
│       └── Footer.vue
├── utils/                    # Hilfsfunktionen
│   ├── formatters.js         # Datum, Zahlen, Groessenformatierung
│   └── snapshot-helpers.js   # Snapshot-Daten-Utilities
├── data/                     # Statische Konfigurationsdaten
│   ├── menu-config.js        # Seitenleisten-Navigationsstruktur
│   ├── utcm-config-areas.js  # UTCM-Konfigurationsbereiche
│   └── metadata.js           # App-Metadaten
├── App.vue                   # Root-Komponente
└── main.js                   # Anwendungs-Einstiegspunkt

Komponenten-Organisation¶

Komponenten sind nach Geschaeftsdomaene organisiert, sodass zusammengehoerige UI-Elemente zusammenbleiben.

Common Components (Gemeinsame UI-Primitive)¶

Komponente	Zweck
`AppModal.vue`	Modal-Dialog mit konfigurierbarem Header, Body und Footer
`FormField.vue`	Formularfeld-Wrapper mit Label, Validierung und Fehleranzeige
`StatusBadge.vue`	Farbcodierter Status-Indikator
`StatCard.vue`	Dashboard-Statistik-Karte mit Icon und Trend
`EmptyState.vue`	Leerzustands-Platzhalter mit Aktions-Button
`ErrorDisplay.vue`	Fehlermeldungs-Anzeige
`FilterChip.vue`	Entfernbarer Filter-Tag
`FilterGroup.vue`	Gruppe von Filter-Chips mit Alle-Entfernen
`BaseBlock.vue`	Inhaltsblock mit Ueberschrift und optionalem Collapse
`BasePageHeading.vue`	Seitenuebrschrift mit Breadcrumbs und Aktionen

Snapshot Viewer-Komponenten¶

Der Snapshot Viewer verwendet eine modulare Renderer-Architektur mit 24 spezialisierten Komponenten, die verschiedene Konfigurationstypen darstellen:

Renderer	Konfigurationstyp
`ConditionalAccessRenderer.vue`	Conditional Access Policies
`AuthMethodsRenderer.vue`	Authentication Methods
`AuthStrengthRenderer.vue`	Authentication Strengths
`NamedLocationsRenderer.vue`	Named Locations
`DirectorySettingsRenderer.vue`	Directory Settings
`RoleAssignmentsRenderer.vue`	Rollenzuweisungen
`ServicePrincipalsRenderer.vue`	Service Principals
`AppRegistrationsRenderer.vue`	App Registrations
`DeviceConfigRenderer.vue`	Gerätekonfigurationen
`CompliancePoliciesRenderer.vue`	Compliance Policies
`EndpointSecurityRenderer.vue`	Endpoint Security
`EnrollmentConfigRenderer.vue`	Enrollment-Konfigurationen
`SecureScoresRenderer.vue`	Secure Scores
`SecureScoreControlsRenderer.vue`	Secure Score Controls
`GroupSettingsRenderer.vue`	Gruppeneinstellungen
`CrossTenantAccessRenderer.vue`	Cross-Tenant Access
`SecurityDefaultsRenderer.vue`	Security Defaults
`AuthorizationPolicyRenderer.vue`	Authorization Policies
`OrgSettingsRenderer.vue`	Organisationseinstellungen
`AppProtectionRenderer.vue`	App Protection Policies
`SecurityTemplatesRenderer.vue`	Security Templates
`ConfigAreaRenderer.vue`	Generischer Konfigurationsbereich
`GenericObjectRenderer.vue`	Generische JSON-Objektanzeige
`GenericArrayRenderer.vue`	Generische JSON-Array-Anzeige
`AtlassianJiraRenderer.vue`	Atlassian Jira-Konfigurationen (v2.5.0)
`AtlassianConfluenceRenderer.vue`	Atlassian Confluence-Konfigurationen (v2.5.0)
`AtlassianOrgSecurityRenderer.vue`	Atlassian Org Security-Einstellungen (v2.5.0)

Baseline Template-Komponenten¶

14 Komponenten für Security Baseline Management:

Komponente	Zweck
`TemplateCard.vue`	Baseline Template-Karte mit Vorschau
`TemplateTable.vue`	Tabellarische Template-Auflistung
`TemplateFilters.vue`	Framework- und Kategorie-Filter
`TemplateGroup.vue`	Gruppierte Template-Anzeige
`TemplateStats.vue`	Template-Statistik-Dashboard
`TemplateViewSwitcher.vue`	Umschalten zwischen Karten-/Tabellenansicht
`FrameworkIcon.vue`	Framework-Logo-Anzeige
`FrameworkQuickFilters.vue`	Ein-Klick Framework-Filterung
`BaselineRangeChart.vue`	Compliance-Bereichs-Visualisierung
`BaselineUpdateConfirmModal.vue`	Baseline-Update-Bestätigung
`ComplianceFieldComparison.vue`	Side-by-Side Compliance-Feld-Diff
`SeverityBadge.vue`	Schweregrad-Indikator
`BooleanDisplay.vue`	Boolean-Wert-Renderer
`PropertyDisplay.vue`	Schlüssel-Wert-Eigenschafts-Renderer

State Management (Pinia)¶

TCM365 verwendet 10 Pinia Stores für zentralisiertes State Management:

Store	Zweck	Wichtiger State
`auth.js`	Authentifizierungsstatus und Tokens	`user`, `token`, `isAuthenticated`, `role`
`tenants.js`	Tenant-Liste und Auswahl	`tenants`, `currentTenant`, `loading`
`snapshots.js`	Snapshot-Daten und Capture-Status	`snapshots`, `captureProgress`, `comparing`
`baselines.js`	Baseline Templates und Bewertungen	`templates`, `evaluations`, `filters`
`notifications.js`	UI-Benachrichtigungswarteschlange	`notifications`, `unreadCount`
`settings.js`	Anwendungseinstellungen	`systemSettings`, `userPreferences`
`compliance.js`	Compliance Scores und Checks	`scores`, `checks`, `frameworks`
`drift.js`	Drift Monitors und Alerts	`monitors`, `drifts`, `activeAlerts`
`workflows.js`	Workflow-Definitionen und Ausführungen	`workflows`, `executions`, `running`
`ui.js`	UI State (Seitenleiste, Theme etc.)	`sidebarCollapsed`, `theme`, `loading`

Store-Pattern¶

Stores folgen dem Pinia Options API-Pattern:

import { defineStore } from 'pinia';
import { tenantsService } from '@/services/tenants.service';

export const useTenantsStore = defineStore('tenants', {
  state: () => ({
    tenants: [],
    currentTenant: null,
    loading: false,
    error: null,
  }),

  getters: {
    m365Tenants: (state) => state.tenants.filter(t => t.vendor === 'microsoft'),
    zscalerTenants: (state) => state.tenants.filter(t => t.vendor === 'zscaler'),
    atlassianTenants: (state) => state.tenants.filter(t => t.vendor === 'atlassian'),
  },

  actions: {
    async fetchTenants() {
      this.loading = true;
      try {
        this.tenants = await tenantsService.getAll();
      } catch (error) {
        this.error = error.message;
      } finally {
        this.loading = false;
      }
    },
  },
});

API Services¶

28 TypeScript Service-Dateien stellen typisierte API Clients für die Backend-Kommunikation bereit. Alle Services nutzen eine gemeinsame Axios-Instanz, die in services/api.ts konfiguriert ist.

API Client-Konfiguration¶

// services/api.ts
import axios from 'axios';

const api = axios.create({
  baseURL: '/api/v1',
  headers: { 'Content-Type': 'application/json' },
});

// Request Interceptor: JWT Token anhaengen
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Response Interceptor: 401 behandeln (Weiterleitung zum Login)
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Weiterleitung zum Login
    }
    return Promise.reject(error);
  },
);

export default api;

Service-Beispiele¶

Service	Endpoints	Beschreibung
`auth.service.ts`	Login, Logout, Refresh, Profil	Authentifizierungsoperationen
`tenants.service.ts`	CRUD, Verbindungstest, Feature Flags	Tenant Management
`snapshots.service.ts`	Capture, Liste, Get, Compare, Delete	Snapshot-Operationen
`diff.service.ts`	Compare, JSON-Export, HTML-Export	Konfigurationsvergleich
`baselines.service.ts`	Templates, Evaluate, Create, Update	Baseline Management
`compliance.service.ts`	Evaluate, Scores, Frameworks	Compliance-Bewertung
`drift.service.ts`	Monitors, Alerts, History	Drift Detection
`rollback.service.ts`	Execute, History, Preview	Rollback-Operationen
`reports.service.ts`	Generate, List, Download	Report Management
`notifications.service.ts`	Channels, Test, Logs	Benachrichtigungskonfiguration
`incidents.service.ts`	CRUD, Timeline, NIS2	Incident Management
`risk.service.ts`	Assessments, Heat Maps	Risk Management

Routen-Konfiguration¶

Routen sind in frontend/src/router/index.js mit Metadaten für Authentifizierung und Rollenanforderungen definiert:

const routes = [
  {
    path: '/login',
    component: BlankLayout,
    children: [
      { path: '', name: 'Login', component: LoginView, meta: { public: true } },
    ],
  },
  {
    path: '/',
    component: DefaultLayout,
    children: [
      { path: '', name: 'Dashboard', component: DashboardView, meta: { requiresAuth: true } },
      { path: 'tenants', name: 'Tenants', component: TenantsView, meta: { requiresAuth: true } },
      {
        path: 'admin/users',
        name: 'AdminUsers',
        component: UsersView,
        meta: { requiresAuth: true, requiresAdmin: true },
      },
      // ... weitere Routen
    ],
  },
  // Fehlerrouten
  { path: '/401', component: Error401 },
  { path: '/403', component: Error403 },
  { path: '/404', component: Error404 },
  { path: '/:pathMatch(.*)*', redirect: '/404' },
];

Guard	Zweck	Weiterleitung
Auth Guard	Blockiert nicht-authentifizierten Zugriff auf geschuetzte Routen	`/login`
Admin Guard	Blockiert Nicht-Admin-Zugriff auf Admin-Routen	`/403`
Role Guard	Erzwingt minimale Rollenstufe pro Route	`/403`

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();

  if (to.meta.public) return next();

  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    return next('/login');
  }

  if (to.meta.requiresAdmin && !authStore.isAdmin) {
    return next('/403');
  }

  next();
});

Composables¶

Wiederverwendbare Composition Functions kapseln häufige Muster:

Composable	Zweck	Rueckgabe
`useAsyncAction`	Umschliesst Async-Operationen mit Loading/Error State	`{ execute, loading, error }`
`useDebounce`	Entprellt reaktive Werte	`{ debouncedValue }`
`useNotification`	Fuegt Benachrichtigungen zur Warteschlange hinzu	`{ success, error, warning, info }`
`useCopyToClipboard`	Kopiert Text in die Zwischenablage mit Feedback	`{ copy, copied }`
`useCountUp`	Animiert Zaehlen von Zahlen	`{ count }`

Verwendungsbeispiel¶

<script setup>
import { useAsyncAction } from '@/composables/useAsyncAction';
import { snapshotsService } from '@/services/snapshots.service';

const { execute: captureSnapshot, loading, error } = useAsyncAction(
  (tenantId) => snapshotsService.capture(tenantId)
);
</script>

<template>
  <button @click="captureSnapshot(tenantId)" :disabled="loading">
    {{ loading ? 'Wird erfasst...' : 'Neuer Snapshot' }}
  </button>
  <p v-if="error" class="text-red-500">{{ error }}</p>
</template>

Styling-Konventionen¶

TCM365 verwendet Tailwind CSS 3 für jegliches Styling. Keine eigenen CSS-Dateien, sofern nicht unbedingt notwendig.

Tailwind-Patterns¶

<!-- Karten-Komponente -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
    Kartentitel
  </h3>
  <p class="text-sm text-gray-600 dark:text-gray-400">
    Karteninhalt
  </p>
</div>

<!-- Status-Badge -->
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
      :class="{
        'bg-green-100 text-green-800': status === 'active',
        'bg-red-100 text-red-800': status === 'error',
        'bg-yellow-100 text-yellow-800': status === 'warning',
      }">
  {{ status }}
</span>

Build und Entwicklung¶

Entwicklungsserver¶

cd frontend
npm run dev

Vite startet auf http://localhost:5173 mit Hot Module Replacement. API-Anfragen an /api/* werden an das Backend auf Port 8000 weitergeleitet (konfiguriert in vite.config.js).

Produktions-Build¶

npm run build

Erzeugt optimierte statische Assets in frontend/dist/ für die Bereitstellung hinter Nginx oder einem beliebigen Static File Server.

Vite-Konfiguration¶

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
      '/health': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
  },
});

Code-Qualitaet¶

Tool	Zweck	Befehl
Prettier	Code-Formatierung	`npm run format`
ESLint	Linting	`npm run lint`
Playwright	E2E Testing	`npm run test:e2e`