Merge pull request #19 from NeoScript/add_emulator_host_configuration

Add emulator host configuration

Author: NeoScript

webapp/angular.json

@@ -18,7 +18,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:browser-esbuild",
           "options": {
             "outputPath": "dist/webapp",
             "index": "src/index.html",
@@ -59,12 +59,9 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"

webapp/src/app/components/index/index.component.ts

@@ -25,9 +25,9 @@ export class IndexComponent implements OnInit {
 
     ref.afterClosed()
       .pipe(filter(r => !!r))
-      .subscribe((result: { project_id: string }) => {
+      .subscribe((result: { user_input: string }) => {
         console.log(result)
-        this.pubsub.attachProject(result.project_id)
+        this.pubsub.attachProject(result.user_input)
       })
   }
 

webapp/src/app/components/input-dialog/input-dialog.component.html

@@ -1,9 +1,9 @@
 <mat-dialog-content>
-    <mat-form-field appearance="outline" color="accent">
+    <mat-form-field appearance="outline" color="accent" style="min-width: 20em;">
         <mat-label>Enter a value</mat-label>
         <input matInput type="text" autocomplete="off" [formControl]="input">
     </mat-form-field>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-raised-button [disabled]="input.invalid" (click)="save()">save</button>
+    <button mat-raised-button color="accent" [disabled]="input.invalid" (click)="save()">save</button>
 </mat-dialog-actions>

webapp/src/app/components/input-dialog/input-dialog.component.scss

@@ -0,0 +1,4 @@
+mat-dialog-actions{
+    display: flex;
+    justify-content: end;
+}

webapp/src/app/components/input-dialog/input-dialog.component.ts

@@ -21,7 +21,7 @@ export class InputDialogComponent {
   }
 
   save(){
-    this.dialogRef.close({project_id: this.input.value})
+    this.dialogRef.close({user_input: this.input.value})
   }
 
 }

webapp/src/app/components/navbar/navbar.component.html

@@ -11,7 +11,15 @@ <h3>pubsub-ui</h3>
         </div>
 
         <div class="config">
-            <h4>current host: {{this.currentHost}}</h4>
+            <div class="links">
+                <button mat-icon-button (click)="updateHostUrl()">
+                    <mat-icon>settings</mat-icon>
+                </button>
+
+                @if (this.currentHost|async; as host) {
+                    <h4>current host: <a [href]="host">{{host}}</a></h4>
+                }
+            </div>
         </div>
     </div>
 

webapp/src/app/components/navbar/navbar.component.scss

@@ -14,7 +14,7 @@
     align-items: center;
 }
 
-.home-btn {
+button {
     &:hover {
         color: lightgreen;
     }

webapp/src/app/components/navbar/navbar.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import {  Observable, filter } from 'rxjs';
 import { PubsubService } from 'src/app/services/pubsub.service';
+import { InputDialogComponent } from '../input-dialog/input-dialog.component';
 
 @Component({
   selector: 'app-navbar',
@@ -9,12 +11,20 @@ import { PubsubService } from 'src/app/services/pubsub.service';
 })
 export class NavbarComponent implements OnInit {
 
-  currentHost: string
-  constructor(private pubsub: PubsubService) {
-    this.currentHost = pubsub.currentHost;
-   }
+  currentHost: Observable<string>
+  constructor(private pubsub: PubsubService, private dialog: MatDialog) {
+    this.currentHost = pubsub._currentHost$.asObservable();
+  }
 
   ngOnInit(): void {
   }
 
+  updateHostUrl() {
+    const ref = this.dialog.open(InputDialogComponent)
+    ref.afterClosed().pipe(filter(result => !!result))
+      .subscribe((result: { user_input: string }) => {
+        this.pubsub.setHost(result.user_input)
+      })
+  }
+
 }

webapp/src/app/services/pubsub.service.ts

@@ -7,7 +7,7 @@ import { NewSubscriptionRequest } from '../components/subscription-list/new-subs
   providedIn: 'root'
 })
 export class PubsubService {
-  public currentHost = "http://localhost:8681"
+  public _currentHost$ = new BehaviorSubject<string>("http://localhost:8681")
 
   private _projectList = new BehaviorSubject<string[]>([])
   private _currentProject = new ReplaySubject<string>()
@@ -21,12 +21,27 @@ export class PubsubService {
   public currentSubscription$ = this._currentSubscription.asObservable()
 
   constructor(private http: HttpClient) {
+    const prevHost = localStorage.getItem("host")
+    if(prevHost){
+      console.log('loaded previous host', prevHost)
+      this._currentHost$.next(prevHost)
+    }
+
+    const prevProjects = localStorage.getItem("projects") ?? "[]"
+    const projects: string[] = JSON.parse(prevProjects) ?? []
+    this._projectList.next(projects)
 
     this.currentProject$.subscribe(project =>
       this.topicList$ = this.listTopics(project)
     )
   }
 
+  setHost(hostUrl: string){
+    this._currentHost$.next(hostUrl)
+
+    localStorage.setItem("host", hostUrl)
+  }
+
   selectProject(projectId: string) {
     this._currentProject.next(projectId)
   }
@@ -36,31 +51,34 @@ export class PubsubService {
     newList.push(newProject)
 
     this._projectList.next(newList)
+
+    const jsonList = JSON.stringify(newList)
+    localStorage.setItem("projects", jsonList)
   }
 
   createTopic(projectId: string, topicId: string){
-    const url = `${this.currentHost}/v1/projects/${projectId}/topics/${topicId}`
+    const url = `${this._currentHost$.value}/v1/projects/${projectId}/topics/${topicId}`
 
     return this.http.put<Topic>(url, {})
   }
 
   listTopics(projectId: string) {
-    return this.http.get<{ topics: Topic[] }>(`${this.currentHost}/v1/projects/${projectId}/topics`).pipe(map(incoming => incoming?.topics || []))
+    return this.http.get<{ topics: Topic[] }>(`${this._currentHost$.value}/v1/projects/${projectId}/topics`).pipe(map(incoming => incoming?.topics || []))
   }
 
   createSubscription(projectId: string, request: NewSubscriptionRequest){
-    const url = `${this.currentHost}/v1/projects/${projectId}/subscriptions/${request.name}`
+    const url = `${this._currentHost$.value}/v1/projects/${projectId}/subscriptions/${request.name}`
 
     return this.http.put<Subscription>(url, {topic: request.topic, pushConfig: request.pushConfig})
   }
 
   deleteSubscription(subscriptionPath: string){
-    const url = `${this.currentHost}/v1/${subscriptionPath}`
+    const url = `${this._currentHost$.value}/v1/${subscriptionPath}`
     return this.http.delete(url)
   }
 
   listSubscriptions(projectId: string): Observable<Subscription[]> {
-    return this.http.get<{ subscriptions?: string[] }>(`${this.currentHost}/v1/projects/${projectId}/subscriptions`)
+    return this.http.get<{ subscriptions?: string[] }>(`${this._currentHost$.value}/v1/projects/${projectId}/subscriptions`)
       .pipe(
         map(incoming => incoming.subscriptions), // first we pull out the subscriptions object
         map(subNames => subNames??[]),
@@ -70,7 +88,7 @@ export class PubsubService {
 
   listSubscriptionsOnTopic(topicPath: string): Observable<Subscription[]> {
     console.log('looking up subscriptions on', topicPath)
-    const url = `${this.currentHost}/v1/${topicPath}/subscriptions`
+    const url = `${this._currentHost$.value}/v1/${topicPath}/subscriptions`
     console.log('request url', url)
     return this.http.get<{ subscriptions?: string[] }>(url)
       .pipe(
@@ -81,25 +99,25 @@ export class PubsubService {
   }
 
   getSubscriptionDetails(subscriptionPath: string){
-    const url = `${this.currentHost}/v1/${subscriptionPath}`
+    const url = `${this._currentHost$.value}/v1/${subscriptionPath}`
     return this.http.get<Subscription>(url)
   }
 
   fetchMessages(subPath: string, maxMessages: number) {
     return this.http
       .post<{ receivedMessages: ReceivedMessage[] }>(
-        `${this.currentHost}/v1/${subPath}:pull`,
+        `${this._currentHost$.value}/v1/${subPath}:pull`,
         { returnImmediately: true, maxMessages }
       ).pipe(map(incoming => incoming.receivedMessages ?? []))
   }
 
   ackMessage(subscriptionPath:string, ackIds: string[]){
-    const url = `${this.currentHost}/v1/${subscriptionPath}:acknowledge`
+    const url = `${this._currentHost$.value}/v1/${subscriptionPath}:acknowledge`
     return this.http.post(url, {ackIds})
   }
 
   publishMessages(topicPath: string, messages: PubsubMessage[]){
-    const url = `${this.currentHost}/v1/${topicPath}:publish`
+    const url = `${this._currentHost$.value}/v1/${topicPath}:publish`
     return this.http.post<{messageIds: string[]}>(url, {messages})
   }
 }