Present kafka group id if available

Author: stavshamir

springwolf-ui/src/app/channels/channel-main/channel-main.component.css

@@ -12,3 +12,11 @@ textarea {
 button {
     margin-top: 8px;
 }
+
+.property-badge {
+    background-color: #C5CAE9;
+    border-radius: 4px;
+    padding: 6px;
+    font-size: small;
+    font-weight: bold;
+}

springwolf-ui/src/app/channels/channel-main/channel-main.component.html

@@ -1,4 +1,8 @@
 <section>
+    <div *ngIf="kafkaBinding.groupId" fxLayout fxLayoutAlign="flex-start center" fxLayoutGap="12px">
+        <div class="property-badge">Group ID</div>
+        <h4>{{ kafkaBinding.groupId }}</h4>
+    </div>
     <mat-tab-group animationDuration="0ms">
         <mat-tab label="Schema">
             <app-schema *ngIf="schema" [schema]="schema"></app-schema>

springwolf-ui/src/app/channels/channel-main/channel-main.component.ts

@@ -3,6 +3,7 @@ import { AsyncApiService } from 'src/app/shared/asyncapi.service';
 import { Example } from 'src/app/shared/models/example.model';
 import { PublisherService } from 'src/app/shared/publisher.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { Operation } from 'src/app/shared/models/channel.model';
 
 @Component({
   selector: 'app-channel-main',
@@ -12,11 +13,13 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 export class ChannelMainComponent implements OnInit {
 
   @Input() channelName: string;
-  @Input() payload: string;
+  @Input() operation: Operation;
   defaultExample: Example;
   exampleTextAreaLineCount: number;
   schema: any;
 
+  kafkaBinding?: { groupId?: string }
+
   constructor(
     private asyncApiService: AsyncApiService,
     private publisherService: PublisherService,
@@ -26,11 +29,15 @@ export class ChannelMainComponent implements OnInit {
   ngOnInit(): void {
     this.asyncApiService.getAsyncApi().subscribe(
       asyncapi => {
-        this.schema = asyncapi.components.schemas.get(this.payload);
+        this.schema = asyncapi.components.schemas.get(this.operation.message.title);
         this.defaultExample = this.schema.example;
         this.exampleTextAreaLineCount = this.defaultExample.lineCount;
       }
     );
+
+    if ("kafka" in this.operation.bindings) {
+      this.kafkaBinding = { groupId: this.operation.bindings.kafka.groupId.enum[0] } 
+    }
   }
 
   recalculateLineCount(text): void {

springwolf-ui/src/app/channels/channels.component.html

@@ -10,6 +10,6 @@ <h4>{{ channel.value.operation.message.title }}</h4>
                 <div class="payload-name">{{ channel.value.operation.message.name }}</div>
             </mat-panel-title>
         </mat-expansion-panel-header>
-        <app-channel-main [channelName]="channel.key" [payload]="channel.value.operation.message.title"></app-channel-main>
+        <app-channel-main [channelName]="channel.key" [operation]="channel.value.operation"></app-channel-main>
     </mat-expansion-panel>
 </mat-accordion>

springwolf-ui/src/app/shared/mock.json

@@ -1,56 +1,106 @@
 {
-    "asyncapi": "2.0.0",
-    "info": {
-        "title": "swagger4kafka example project",
-        "description": "This is a mock description.",
-        "version": "1.0.0"
-    },
-    "servers": {
-        "kafka": {
-            "url": "kafka:29092",
-            "protocol": "kafka"
-        }
-    },
-    "channels": {
-        "example-topic": {
-            "subscribe": {
-                "message": {
-                    "name": "io.github.stavshamir.swagger4kafka.example.dtos.ExamplePayloadDto",
-                    "title": "ExamplePayloadDto",
-                    "payload": {
-                        "$ref": "#/components/schemas/ExamplePayloadDto"
-                    }
-                }
+  "asyncapi": "2.0.0",
+  "info": {
+    "title": "Springwolf example project",
+    "description": "Mock data",
+    "version": "1.0.0"
+  },
+  "servers": {
+    "kafka": {
+      "url": "kafka:29092",
+      "protocol": "kafka"
+    }
+  },
+  "channels": {
+    "another-topic": {
+      "subscribe": {
+        "bindings": {
+          "kafka": {
+            "groupId": {
+              "type": "string",
+              "enum": [
+                "example-group-id"
+              ]
             }
+          }
+        },
+        "message": {
+          "name": "io.github.stavshamir.springwolf.example.dtos.AnotherPayloadDto",
+          "title": "AnotherPayloadDto",
+          "payload": {
+            "$ref": "#/components/schemas/AnotherPayloadDto"
+          }
         }
+      }
     },
-    "components": {
-        "schemas": {
-            "ExamplePayloadDto": {
-                "type": "object",
-                "properties": {
-                    "someString": {
-                        "type": "string"
-                    },
-                    "someLong": {
-                        "type": "integer",
-                        "format": "int64"
-                    },
-                    "someEnum": {
-                        "type": "string",
-                        "enum": [
-                            "FOO1",
-                            "FOO2",
-                            "FOO3"
-                        ]
-                    }
-                },
-                "example": {
-                    "someString": "string",
-                    "someLong": 0,
-                    "someEnum": "FOO1"
-                }
+    "example-topic": {
+      "subscribe": {
+        "bindings": {
+          "kafka": {
+            "groupId": {
+              "type": "string",
+              "enum": [
+                ""
+              ]
             }
+          }
+        },
+        "message": {
+          "name": "io.github.stavshamir.springwolf.example.dtos.ExamplePayloadDto",
+          "title": "ExamplePayloadDto",
+          "payload": {
+            "$ref": "#/components/schemas/ExamplePayloadDto"
+          }
+        }
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "ExamplePayloadDto": {
+        "type": "object",
+        "properties": {
+          "someString": {
+            "type": "string"
+          },
+          "someLong": {
+            "type": "integer",
+            "format": "int64"
+          },
+          "someEnum": {
+            "type": "string",
+            "enum": [
+              "FOO1",
+              "FOO2",
+              "FOO3"
+            ]
+          }
+        },
+        "example": {
+          "someString": "string",
+          "someLong": 0,
+          "someEnum": "FOO1"
+        }
+      },
+      "AnotherPayloadDto": {
+        "type": "object",
+        "properties": {
+          "foo": {
+            "type": "string"
+          },
+          "example": {
+            "$ref": "#/components/schemas/ExamplePayloadDto"
+          }
+        },
+        "example": {
+          "foo": "string",
+          "example": {
+            "someString": "string",
+            "someLong": 0,
+            "someEnum": "FOO1"
+          }
         }
+      }
     }
+  }
 }

springwolf-ui/src/app/shared/models/channel.model.ts

@@ -6,11 +6,11 @@ export interface Channel {
 export interface Operation {
     type: "SUBSCRIBE" | "PUBLISH";
     message: Message;
-    bindings?: any;
+    bindings?: { [type: string]: any };
 }
 
 export interface Message {
     name: string;
     title: string;
-    payload: { $ref: string};
+    payload: { $ref: string };
 }