Course: Diploma Thesis

Course: Building a Data Pipeline and Visualization System

Objective

Learn the components and workflow of a service-oriented architecture (SOA) to handle and visualize power grid anomalies. This includes the integration of Apache Kafka, PostgreSQL, GraphQL, and Angular.

Lesson 1: Introduction to the Architecture

Key Components:

1. Apache Kafka: A messaging system for real-time data ingestion.

2. PostgreSQL: A relational database to persist anomaly data.

3. GraphQL API: Serves as the interface between backend and frontend, enabling queries and filtering.

4. Angular: Frontend framework used to create an interactive and user-friendly dashboard.

Workflow:

1. Anomaly data is generated by Siemens’ Global Network Analysis (GNA) system.

2. Data flows through Apache Kafka to PostgreSQL for structured storage.

3. A GraphQL API exposes this data for frontend use.

4. Angular-based dashboards visualize the data in tables, graphs, and key performance indicators (KPIs).

Interactive Question 1: Kafka’s Role

What is Apache Kafka used for in this project?

• Database management
• Real-time data ingestion
• Frontend visualization
• API implementation

Submit

Lesson 2: Backend Details

Apache Kafka:

• Provides a publish-subscribe messaging model.

• Guarantees high throughput and fault tolerance.

• Messages persist for later consumption if needed.

PostgreSQL:

• Relational storage optimized for anomaly data.

• Queries can be filtered, sorted, and paginated.

GraphQL API:

• Flexible querying capabilities, reducing over-fetching.

• Facilitates frontend data access with structured responses.

Key Consideration:

The decoupling of the backend from data sources and consumers ensures scalability and reliability.

Interactive Question 2: Backend Technologies

Which technologies form the backend of the application?

• Kafka
• MySQL
• PostgreSQL
• GraphQL API

Submit

Lesson 3: Frontend Visualization

Angular Framework:

• Enables dynamic and responsive UI.

• Used to design key components:

  • Anomalies Table: Searchable, paginated, and filterable table for anomaly data.

  • Graph View: Visual representation of the power grid, pinpointing sources of issues.

  • Dashboard Overview: Displays aggregated metrics for quick insights.

Best Practices for Visualization:

• Intuitive design with interactive elements.

• Use of frameworks like Cytoscape.js for graph rendering.

Interactive Question 3: Frontend Framework

Why was Angular chosen for this project?

• Its support for backend integration
• Inherent support for SQL queries
• It is a messaging framework
• Responsive and dynamic UI capabilities

Submit

Lesson 4: Deployment and Integration

Deployment:

• Docker containers ensure consistency across environments.

• The SOA allows for modular development and maintenance.

Integration with Siemens Infrastructure:

• Kafka seamlessly integrates for data transmission.

• PostgreSQL supports Siemens’ existing data workflows.

Outcome:

The solution enhances anomaly analysis by transforming unstructured logs into actionable insights, significantly reducing resolution time for Siemens engineers.

Interactive Question 4: Integration

Which feature enhances the system's modularity and scalability?

• Service-Oriented Architecture
• Direct database access
• Monolithic architecture
• Hardcoded endpoints

Submit

Transcript

00:01 Visualisierung der Ergebnisse des Stromnetzmodells

00:05 Was bedeutet das denn eigentlich?

00:07 Fangen wir am besten mit der Ausgangssituation an.

00:10 Siemens entwickelt ein Programm, welches die Fehler im Stromnetzmodell berechnet und aktuell

00:16 in Log Files speichert.

00:18 Diese Log Files sind äußerst unübersichtlich und es kann lange dauern, bis ein Ingenieur

00:23 von Siemens den Ursprung des Fehlers gefunden hat.

00:26 Genau hier wird unsere Applikation relevant.

00:30 Wir haben ein System entwickelt, welches die Fehlerdaten von Siemens über das Apache Kafka

00:35 System - das ist ein Message Bus - an das Backend übergibt und dort persistiert.

00:40 Das Backend ist mittels Java Spring Framework und PostgreSQL Datenbank implementiert.

00:47 Über eine GraphQL Schnittstelle kann das Angular Frontend die Daten visualisieren.

00:55 Kommen wir nun zu den Besonderheiten unserer Applikation.

00:58 Aufgrund des Message Busses ist unsere Applikation optimal von dem Service von Siemens entkoppelt.

01:05 Dies ermöglicht eine einfache Integration in die Production bei Siemens.

01:09 Das Frontend bietet ideale Möglichkeiten, um die Daten zu analysieren.

01:14 Wie Sie hier sehen können, verfügt es über ein Dashboard, welches die vier Eigenschaften,

01:18 Klasse, Kategorie, Schweregrad und Spannungslevel, darstellt.

01:22 Das Herzstück der Applikation ist jedoch die Tabelle, welcher jegliche Art von Such-

01:27 und Filtermöglichkeiten implementiert.

01:30 Man kann die Daten nicht nur Sortieren, sondern eben auch nach gewissen Begriffen, und den

01:35 vier vorhin genannten Eigenschaften filtern.

01:37 Ein wichtiger Bestandteil ist auch der Button zum Zurücksetzen aller Filter.

01:43 Kommen wir nun zum Graph.

01:46 Dieser zeigt einen Teil des Stromnetzwerkes an.

01:49 Hierbei ist das Objekt mit dem aktuellen Fehler in blau dargestellt, sodass die Ingenieure von Siemens

01:54 die nähere Umgebung des Fehlers analysieren können.

01:58 Dadurch ist das Ausfindigmachen des Ursprungs sehr effizient, sodass das Netzmodell schnellstmöglich

02:03 wieder funktionieren kann.

02:05 Das ist auch schon wieder das Ende unseres kurzen Videos.

02:10 Wir hoffen es hat euch gefallen.