Suk suk: show json invalid message

.github/workflows/build-and-push-image.yml

@@ -0,0 +1,41 @@
+name: build-and-push-image
+
+on:
+  push:
+    branches: ['main']
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: "Checkout repository"
+        uses: actions/checkout@v3
+
+      - name: "Container registry login"
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: "Extract metadata (tags, labels) for Docker"
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: "Build and push Docker image"
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -1,13 +1,19 @@
+# Builder
 FROM node:16-alpine as build
 
 WORKDIR /app
+
 ADD webapp .
+
 RUN npm install
 RUN npm run build
 
-FROM nginx:alpine as serve
-COPY scripts/docker/docker_nginx.conf /etc/nginx/conf.d/default.conf
+# Runner
+FROM amd64/nginx:alpine as run
 
 WORKDIR /usr/share/nginx/html
+
 COPY --from=build /app/dist/webapp .
-EXPOSE 80
+
+COPY scripts/replace_variable_on_start.sh /docker-entrypoint.d/
+COPY scripts/default.conf.template /etc/nginx/templates/

scripts/docker/docker_nginx.conf → scripts/default.conf.template

@@ -1,3 +1,7 @@
+upstream emulator {
+  server ${PUBSUB_EMULATOR_HOST}:${PUBSUB_EMULATOR_PORT};
+}
+
 server {
 	listen 80 default_server;
 
@@ -24,4 +28,13 @@ server {
 		expires 1d;
 		add_header Cache-Control "public";
 	}
+
+    location ~ ^/proxy(/?)(.*) {
+        proxy_pass http://emulator/$2;
+		proxy_pass_request_headers off;
+		proxy_set_header Host $http_host;
+		proxy_set_header X-Real-IP $remote_addr;
+		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+		proxy_set_header X-Forwarded-Proto $scheme;
+    }
 }

scripts/replace_variable_on_start.sh

@@ -0,0 +1 @@
+sed -i "s|__EMULATOR_HOST_PROXY_URL__|$EMULATOR_HOST_PROXY_URL|g" /usr/share/nginx/html/main.*.js

webapp/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
+    "lodash": "^4.17.21",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -29,6 +30,7 @@
     "@angular/cli": "~13.3.5",
     "@angular/compiler-cli": "~13.3.0",
     "@types/jasmine": "~3.10.0",
+    "@types/lodash": "^4.14.191",
     "@types/node": "^12.11.1",
     "jasmine-core": "~4.0.0",
     "karma": "~6.3.0",

webapp/src/app/angular-material-checkbox/angular-material-checkbox.component.html

@@ -0,0 +1 @@
+<p>angular-material-checkbox works!</p>

webapp/src/app/angular-material-checkbox/angular-material-checkbox.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AngularMaterialCheckboxComponent } from './angular-material-checkbox.component';
+
+describe('AngularMaterialCheckboxComponent', () => {
+  let component: AngularMaterialCheckboxComponent;
+  let fixture: ComponentFixture<AngularMaterialCheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AngularMaterialCheckboxComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AngularMaterialCheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

webapp/src/app/angular-material-checkbox/angular-material-checkbox.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-angular-material-checkbox',
+  templateUrl: './angular-material-checkbox.component.html',
+  styleUrls: ['./angular-material-checkbox.component.scss']
+})
+export class AngularMaterialCheckboxComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

webapp/src/app/app.module.ts

@@ -23,6 +23,9 @@ import { SubscriptionListComponent } from './components/subscription-list/subscr
 import { TopicDetailsComponent } from './components/topic-details/topic-details.component';
 import { NewTopicDialogComponent } from './components/topic-list/new-topic-dialog/new-topic-dialog.component';
 import { TopicListComponent } from './components/topic-list/topic-list.component';
+import { AngularMaterialCheckboxComponent } from './angular-material-checkbox/angular-material-checkbox.component';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
 
 
 
@@ -38,15 +41,16 @@ import { TopicListComponent } from './components/topic-list/topic-list.component
     SubscriptionDetailsComponent,
     TopicDetailsComponent,
     NewTopicDialogComponent,
-    NewSubscriptionDialogComponent
+    NewSubscriptionDialogComponent,
+    AngularMaterialCheckboxComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
     ReactiveFormsModule,
-
+    MatCheckboxModule,
     MatButtonModule,
     MatCardModule,
     MatIconModule,

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

@@ -1,19 +1,15 @@
 <div class="container">
     <div class="header">
-        <h3>Select a Project from the list:</h3>
-        <p class="caption">Or Create a new one!</p>
+        <h3></h3>
+        <p class="caption"></p>
     </div>
+    <div style="margin: 10px; padding: 10px;">
+        <input type="text" id="manualProject" placeholder="PROJECT_ID" style="margin: 10px;padding: 18px 10px;">
 
-    <div class="project-list">
-
-        <button mat-raised-button class="project" *ngFor="let project of (this.projectList$|async)"
-        [routerLink]="['project']" [queryParams]="{'project': project}">
-            {{project}}
-        </button>
-
-        <button mat-stroked-button class="new-project">
+        <button mat-raised-button class="project" [routerLink]="['project']" [queryParams]="{'project': getValue()}"
+            style="margin: 10px;padding: 10px 55px;">
             <mat-icon>add_circle</mat-icon>
-            Attach new project
+            Attach
         </button>
     </div>
 </div>

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

@@ -8,6 +8,7 @@ import { PubsubService } from 'src/app/services/pubsub.service';
   styleUrls: ['./index.component.scss']
 })
 export class IndexComponent implements OnInit {
+  project_id = '';
 
   projectList$: Observable<string[]>
 
@@ -18,4 +19,7 @@ export class IndexComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  getValue() {
+    return (document.getElementById("manualProject") as HTMLInputElement).value
+  }
 }

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

@@ -3,15 +3,14 @@
     <div class="content">
         <div class="links">
 
-            <button mat-icon-button class="home-btn"
-            [routerLink]="['']">
-                <mat-icon>home</mat-icon>
+            <button mat-icon-button class="home-btn" [routerLink]="['']">
+                <img src="assets/home_btn.png">
             </button>
-            <h3>pubsub-ui</h3>
+            <h3>__PubSub__Emulator__UI__</h3>
         </div>
-    
+
         <div class="config">
-            <h4>current host: {{this.currentHost}}</h4>
+            <h4>🟢 Connected: {{this.currentHost}}</h4>
         </div>
     </div>
 

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

@@ -5,32 +5,29 @@ <h1>Project: {{this.currentProject}}</h1>
 
         <div class="topics" *ngIf="this.topicList$ | async as topicList">
             <h2>Topics</h2>
-            <app-topic-list 
-            [topics]="topicList" 
-            [(currentTopic)]="this.currentTopic" 
-            (currentTopicChange)="loadSubsFor($event)"
-            (newTopicRequest)="this.handleNewTopicRequest($event)"></app-topic-list>
+            <app-topic-list [topics]="topicList" [(currentTopic)]="this.currentTopic"
+                (currentTopicChange)="loadSubsFor($event)"
+                (newTopicRequest)="this.handleNewTopicRequest($event)"></app-topic-list>
         </div>
 
         <div class="subscriptions" *ngIf="this.subscriptionList$ | async as possibleSubs">
             <h2>Subscriptions</h2>
-            <app-subscription-list [topic]="this.currentTopic" [subscriptions]="possibleSubs" [(currentSubscription)]="this.currentSubscription" (newSubscriptionRequest)="this.handleNewSubscription($event)">
+            <app-subscription-list [topic]="this.currentTopic" [subscriptions]="possibleSubs"
+                [(currentSubscription)]="this.currentSubscription"
+                (newSubscriptionRequest)="this.handleNewSubscription($event)">
             </app-subscription-list>
         </div>
 
     </div>
 
-    <div class="main-container" [ngClass]="{
-        'main-container--no-topic': this.currentTopic == undefined,
-        'main-container--no-subscription': this.currentTopic != undefined && this.currentSubscription == undefined
-    }">
+    <div class="main-container">
         <div *ngIf="this.currentTopic && this.currentSubscription">
             <app-subscription-details [subscriptionPath]="this.currentSubscription.name"></app-subscription-details>
         </div>
 
         <div *ngIf="this.currentTopic && !this.currentSubscription">
-            <app-topic-details [topic]="this.currentTopic" 
-            (onMessagePublish)="this.handlePublishRequest($event)"></app-topic-details>
+            <app-topic-details [topic]="this.currentTopic"
+                (onMessagePublish)="this.handlePublishRequest($event)"></app-topic-details>
         </div>
 
     </div>

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

@@ -48,7 +48,7 @@
         display: grid;
         place-items: center;
 
-        color: gray;
+        color: rgb(255, 0, 0);
         content: "select a subscription to continue.";
 
         animation: glow 1s infinite alternate;