Move payload to channel exapnsion panel body

Author: stavshamir

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

@@ -19,4 +19,10 @@ button {
     padding: 6px;
     font-size: small;
     font-weight: bold;
+}
+
+.payload-name {
+    background-color: #E0E0E0;
+    border-radius: 4px;
+    padding: 6px;
 }

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

@@ -1,4 +1,10 @@
 <section>
+    <mat-divider></mat-divider>
+    <div fxLayout fxLayoutAlign="flex-start center" fxLayoutGap="12px">
+        <div class="property-badge">Payload</div>
+        <h4>{{ operation.message.title }}</h4>
+        <div class="payload-name">{{ operation.message.name }}</div>
+    </div>
     <div *ngIf="kafkaBinding.groupId" fxLayout fxLayoutAlign="flex-start center" fxLayoutGap="12px">
         <div class="property-badge">Group ID</div>
         <h4>{{ kafkaBinding.groupId }}</h4>

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

@@ -9,9 +9,3 @@
 mat-divider {
     height: 20px;
 }
-
-.payload-name {
-    background-color: #E0E0E0;
-    border-radius: 4px;
-    padding: 6px;
-}

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

@@ -5,9 +5,6 @@ <h1>Channels</h1>
             <mat-panel-title fxLayout fxLayoutAlign="flex-start center" fxLayoutGap="16px">
                 <div class="operation-badge">{{ channel.value.operation.type === "SUBSCRIBE" ? "CONSUMER" : "PRODUCER" }}</div>
                 <h3>{{ channel.key }}</h3>
-                <mat-divider vertical></mat-divider>
-                <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" [operation]="channel.value.operation"></app-channel-main>