Merge pull request #23 from NeoScript/view_attributes

Ability to view attributes

Author: NeoScript

webapp/src/app/components/subscription-details/subscription-details.component.html

@@ -1,38 +1,40 @@
 @if (this.details|async; as subscription) {
-  <div class="content">
-    <h3>Subscription Details</h3>
-    <div class="header">
-      <div id="path">path: {{subscription.name}}</div>
-      <div id="topic">topic: {{subscription.topic}}</div>
-      <button id="pullMessagesBtn" mat-raised-button color="primary" (click)="this.pullMessages()">
-        Pull Messages
-        <mat-icon matSuffix>download</mat-icon>
-      </button>
-    </div>
-    <div class="message-pane">
-      <div>Messages Received: {{this.messages.length}}</div>
-      @if (this.messages) {
-        <table class="message-table mat-table">
-          <thead>
-            <tr>
-              <th>Timestamp</th>
-              <th>Message</th>
-              <th>Ack</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (msg of this.messages; track msg) {
-              <tr class="pubsub-message">
-                <td>{{msg.message.publishTime | date : "long"}}</td>
-                <td>{{msg.message.data}}</td>
-                <td>
-                  <button mat-button color="warn" (click)="this.ackMessage(msg.ackId)">Ack</button>
-                </td>
-              </tr>
-            }
-          </tbody>
-        </table>
-      }
-    </div>
+<div class="content">
+  <h3>Subscription Details</h3>
+  <div class="header">
+    <div id="path">path: {{subscription.name}}</div>
+    <div id="topic">topic: {{subscription.topic}}</div>
+    <button id="pullMessagesBtn" mat-raised-button color="primary" (click)="this.pullMessages()">
+      Pull Messages
+      <mat-icon matSuffix>download</mat-icon>
+    </button>
   </div>
-}
+  <div class="message-pane">
+    <div>Messages Received: {{this.messages.length}}</div>
+    @if (this.messages) {
+    <table class="message-table mat-table">
+      <thead>
+        <tr>
+          <th>Timestamp</th>
+          <th>Message</th>
+          <th>Attributes</th>
+          <th>Ack</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (msg of this.messages; track msg) {
+        <tr class="pubsub-message">
+          <td>{{msg.message.publishTime | date : "long"}}</td>
+          <td>{{msg.message.data}}</td>
+          <td>{{msg.message.attributes | json}}</td>
+          <td>
+            <button mat-button color="warn" (click)="this.ackMessage(msg.ackId)">Ack</button>
+          </td>
+        </tr>
+        }
+      </tbody>
+    </table>
+    }
+  </div>
+</div>
+}

webapp/src/app/components/subscription-details/subscription-details.component.ts

@@ -1,17 +1,17 @@
 import { Component, Input, OnInit, inject } from '@angular/core';
 import { EMPTY, firstValueFrom, map, Observable } from 'rxjs';
 import { PubsubService, ReceivedMessage, Subscription } from 'src/app/services/pubsub.service';
-import { AsyncPipe, DatePipe } from '@angular/common';
+import { AsyncPipe, DatePipe, JsonPipe } from '@angular/common';
 import { MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatSuffix } from '@angular/material/form-field';
 
 @Component({
-    selector: 'app-subscription-details',
-    templateUrl: './subscription-details.component.html',
-    styleUrls: ['./subscription-details.component.scss'],
-    standalone: true,
-    imports: [MatButton, MatIcon, MatSuffix, AsyncPipe, DatePipe]
+  selector: 'app-subscription-details',
+  templateUrl: './subscription-details.component.html',
+  styleUrls: ['./subscription-details.component.scss'],
+  standalone: true,
+  imports: [MatButton, MatIcon, MatSuffix, AsyncPipe, DatePipe, JsonPipe]
 })
 export class SubscriptionDetailsComponent implements OnInit {
   private pubsub = inject(PubsubService);
@@ -50,11 +50,11 @@ export class SubscriptionDetailsComponent implements OnInit {
     console.log('called with', data)
   }
 
-  async ackMessage(ackId: string){
+  async ackMessage(ackId: string) {
     const result = await firstValueFrom(this.pubsub.ackMessage(this.subscriptionPath!, [ackId]))
     console.log("result", result)
-    
-    if(Object.keys(result).length == 0){  // a valid response will be no content
+
+    if (Object.keys(result).length == 0) {  // a valid response will be no content
       this.messages = this.messages.filter(msg => msg.ackId != ackId)
     }
   }