neoscript / pubsub-emulator-ui

A handy UI tool that provides visibility into the gcloud pusub emulator

PubSub Emulator UI

This application is meant to assist in local development of software related to Google Pub/Sub. This will allow one to view and create pubsub messages as well as create topics + pull subscriptions on a locally hosted instance of the pubsub emulator

Quickstart

1. Utilize docker to run the pubsub emulator ui

   docker run -p 4200:80 ghcr.io/neoscript/pubsub-emulator-ui:latest
   

   • Note if you want to also spin up an instance of the pubsub emulator take a look at the docker-compose.yml file in this project's root 😉
2. Add the project you would like to track
3. Now add topics/subscribers and send/receive messages as you would like 😄

Motivations

• The current Google Pub/Sub emulator does not have any visual tooling
• I hate having to communicate with the emulator strictly through code
• An existing project (gcp-pubsub-emulator-ui) would allow users to pull messages, but was limited to only pulling 1 message at a time.
  • I didn't know enough about Maven/Gradle/Java to go in and modify so I just decided to rebuild the tool and try and pick-up some new skills in the process.

Setting Up For Development

1. First Clone the repository

   git clone https://github.com/NeoScript/pubsub-ui.git
   

2. Then open the folder with VSCode

   • vscode is not required, but I've got a .devcontainers setup that may be helpful

   cd pubsub-ui
   code .
   

3. Reopen the workspace in a container

   • To learn more about devcontainers check out this link

4. Spin up the supporting docker-compose file

   • note: we are currently spinning up this very helpful wrapper around the emulator.
   • at some point we may try and transition to just spinning up the gcloud sdk itself (if anyone knows an easy way, tell me!)

5. Start serving the angular webapp

   cd webapp
   npm run start
   

6. You should now be able to develop and have changes trigger refreshes on the webapp!

---

Additional Info

LICENSE: MIT

All improvements and suggestions are welcome!

pubsub-emulator-ui's Issues

Ability to create push subscriptions and trigger the code

Non-English characters in messages are not correctly encoded

The app uses btoa/atob to convert the message content to/from base-64. However, this treats the content as a binary string, using Latin1/ISO-8859-1 encoding. But most applications expect text in UTF-8 encoding.

For instance, if I send the message "café", it's encoded as Y2Fm6Q==. Trying to decode this as UTF-8 in the application that receives the message produces an incorrect result: "caf�".

The emulator UI should use UTF-8 to encode the message, or at least give the choice of which encoding to use.

feature: add possibility to pre-provision projects to Docker Container env

Similar to echocode-io/gcp-pubsub-emulator-ui project please add possibility to predefine projects on container build, ie.:

version: "3.9"

services:
  pubsub_emulator:
    image: messagebird/gcloud-pubsub-emulator:latest
    ports:
      - "8681:8681"
    environment:
      - PUBSUB_PROJECT1=test-project,topic1:topic1-sub,topic2:t2-s1:t2-s2

  emulator-ui:
    image: ghcr.io/neoscript/pubsub-emulator-ui:latest
    ports:
      - "7200:80"
    environment:
      - PUBSUB_PROJECTS=test-project

Licence + Improve dockerfile

Hello, lovely single page application already in a container, thanks for sharing.

• To make it a bit more usable, could you add a LICENCE.md ? you can find a ton of them on github, I usually use apache, but MIT is nice too. I cannot help more since it have to be your choose.
• Can I suggest to improve the dockerfile by adding a nginx conf in order to allow refreshing the page and avoid getting 404 (spa application). Like so:

Dockerfile in the last stage:

COPY scripts/docker/docker_nginx.conf /etc/nginx/conf.d/default.conf

scripts/docker/docker_nginx.conf content:

server {
	listen 80 default_server;

	gzip on;
	gzip_min_length 1000;
	gzip_types text/plain text/xml application/javascript text/css;

	root /app;

	# normal routes
	# serve given url and default to index.html if not found
	# e.g. /, /user and /foo/bar will return index.html
	location / {
		add_header Cache-Control "no-store";
		try_files $uri $uri/index.html /index.html;
	}

	# files
	# for all routes matching a dot, check for files and return 404 if not found
	# e.g. /file.js returns a 404 if not found
	location ~ \.(?!html) {
		add_header Cache-Control "public, max-age=3600";
		try_files $uri =404;
	}
}

I'll make feedback while using it if you do add a licence ;)

Cant create topic when there is none

After running the emulator, there is no topic and the api return an empty object {}, but you expect the property topics, and there is none.

So its impossible to create a new topic if there is no topic already created.

pubsub-emulator-ui/webapp/src/app/services/pubsub.service.ts

Line 49 in 94540d8

return this.http.get<{ topics: Topic[] }>(`${this.currentHost}/v1/projects/${this.project_id}/topics`).pipe(map(incoming => incoming.topics))

Ability to create subscriptions from ui

Would be nice to have the ability to create subscriptions from the UI

Gives the ability to use another port for PubSub

It is not possible yet to use another port for PubSub (not configurable).

I've the following docker-compose:

pubsub:
  image: 'google/cloud-sdk'
  command: 'gcloud beta emulators pubsub start --host-port=0.0.0.0:8085'
  ports:
    - '8085:8085'

pubsub-dashboard:
  image: ghcr.io/neoscript/pubsub-emulator-ui:latest
  ports:
    - '8086:80'

that expose PubSub on port 8085 which makes it impossible to use the UI

Ability to edit topics via UI

would be nice to create/delete topics via the UI