PgAdmin & Supabase Studio

2026-06-04 21:04:37 +08:00 · 2024-12-28 21:33:30 -08:00 · 2024-12-28 21:33:30 -08:00 · 1bce908c7d
commit 1bce908c7d
parent cf95bb707f
4 changed files with 130 additions and 12 deletions
--- a/apps/dev-launchpad/public/index.html
+++ b/apps/dev-launchpad/public/index.html
@ -221,7 +221,7 @@
          name: "Svix server",
          port: 8113,
          importance: 1,
-          img: "https://yt3.googleusercontent.com/H3gTWq_CsJiRsDcscTFlqDBzZSL5_LcO7HkILLT7G701SL-XUZPYEDIjPu5cExrdP4YO0Lkt=s900-c-k-c0x00ffffff-no-rj",
+          img: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iODQuOSA4NC45IDM0NyAzNDciPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjMmM3MGZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEtMiI+CiAgICA8Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjI1OC40IiBjeT0iMjU4LjQiIHI9IjE3My41Ii8+CiAgICA8Zz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzYwLjgsMjMyLjljLTI4LjgtMS40LTU1LjctMTcuMi02OC4yLTQ1LTUuNS0xMi4zLTE3LjgtMjAuNC0zMS4zLTIwLjgtMjguNi0uOC00Ni43LDM1LjEtMjguNyw1Ny42LDYuMiw3LjgsMTUuNCwxMi4xLDI3LjUsMTIuOWgwYzIzLjQsMS43LDQzLjUsMTEuOCw1Ni44LDI4LjUsMjQuNCwzMC43LDIwLjksNzcuMS03LjQsMTA0LTM0LjEsMzIuNS05MS4xLDI1LjgtMTE3LjEtMTMuMi0yLjMtMy41LTQuMy03LjEtNi4xLTEwLjktNS41LTEyLjMtMTcuOC0yMC40LTMxLjMtMjAuOC0xMy45LS40LTI3LDQuOS0zNS4zLDEzLjgsMjcuMyw0Ni45LDc3LjcsNzguNywxMzUuOSw3OS43LDg4LjYsMS41LDE2MS43LTY5LDE2My4yLTE1Ny42LjMtMTQuOS0xLjYtMjkuNC01LjEtNDMuMi43LDIuOS0yMi4zLDEwLjktMjQuOCwxMS42LTkuMiwyLjctMTguNywzLjctMjgsMy4zaDBaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTE1NiwyODMuNmMyOS40LjcsNTYuMSwxOC41LDY4LjIsNDUuMyw1LjUsMTIuMywxNy44LDIwLjQsMzEuMywyMC44LDkuNC4zLDE4LjMtMy4yLDI1LjItOS43LDEyLjgtMTIuMSwxNC41LTM0LjEsMy41LTQ4LTYuMi03LjgtMTUuNC0xMi4xLTI3LjUtMTIuOWgwYy0yMy40LTEuNy00My41LTExLjgtNTYuOC0yOC41LTI5LjYtMzcuMi0xNy05Mi41LDIzLjctMTE1LjQsMTEuOC02LjYsMjUuMi0xMC4yLDM4LjctOS44LDI5LjQuNyw1Ni4xLDE4LjUsNjguMiw0NS4zLDUuNSwxMi4zLDE3LjgsMjAuNCwzMS4zLDIwLjgsMTQsLjQsMjctNC45LDM1LjMtMTMuOC0yNy4zLTQ2LjktNzcuNy03OC43LTEzNS45LTc5LjgtODguNi0xLjUtMTYxLjYsNjkuMS0xNjMuMiwxNTcuNi0uMywxNC45LDEuNiwyOS40LDUuMiw0My4yLDE0LjktMTAuMSwzMy4zLTE1LjYsNTIuOS0xNS4yaDBaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=",
          description: [
            "Webhooks",
          ],
@ -244,11 +244,30 @@
          name: "PgHero",
          port: 8116,
          description: [
-            "For database monitoring",
+            "For database performance analysis",
          ],
          importance: 1,
          img: "https://pghero.dokkuapp.com/assets/pghero-88a0d052.png",
        },
+        {
+          name: "PgAdmin",
+          port: 8117,
+          description: [
+            "For database administration",
+          ],
+          importance: 1,
+          img: "https://www.w3schools.com/postgresql/screenshot_postgresql_pgadmin4_6.png",
+        },
+        {
+          name: "Supabase Studio",
+          port: 8118,
+          path: "/project/default/editor",
+          description: [
+            "For database administration",
+          ],
+          importance: 1,
+          img: "https://cdn.prod.website-files.com/655b60964be1a1b36c746790/655b60964be1a1b36c746d41_646dfce3b9c4849f6e401bff_supabase-logo-icon_1.png",
+        },
      ];

      const appsContainers = document.querySelectorAll(".apps-container");
@ -259,7 +278,7 @@
          if ((app.importance ?? 0) === importance) {
            // TODO escape HTML
            appContainer.innerHTML += `
-              <a href="http://localhost:${app.port}" target="_blank" rel="noopener noreferrer" class="${app.importance === 2 ? "important" : app.importance === 1 ? "" : "unimportant"}">
+              <a href="http://localhost:${app.port}${app.path ?? ""}" target="_blank" rel="noopener noreferrer" class="${app.importance === 2 ? "important" : app.importance === 1 ? "" : "unimportant"}">
                <div class="port">:${app.port}</div>
                <div>
                  <img src=${app.img || `//localhost:${app.port}/favicon.ico`} />
--- a/dependencies.compose.yaml
+++ b/dependencies.compose.yaml
@ -1,9 +1,11 @@
+version: '3.9'
+
 services:

  # ================= PostgreSQL =================

  db:
-    image: postgres:latest
+    build: ./docker/dependencies/postgres-with-extensions
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: PASSWORD-PLACEHOLDER--uqfEC1hmmv
@ -13,14 +15,8 @@ services:
      - 5432:5432
    volumes:
      - postgres-data:/var/lib/postgresql/data
-    entrypoint: ["sh", "-c", "
-      if [ $POSTGRES_DELAY_MS -gt 0 ]; then 
-        apt-get update && apt-get install -y iproute2 && \
-        tc qdisc add dev eth0 root netem delay ${POSTGRES_DELAY_MS}ms;
-      fi;
-      exec docker-entrypoint.sh postgres -c shared_preload_libraries='pg_stat_statements' -c pg_stat_statements.track=all"]
    cap_add:
-      - NET_ADMIN
+      - NET_ADMIN  # TODO why do we need this? is it for the delay?

  # ================= PgHero =================

@ -31,6 +27,60 @@ services:
    ports:
      - 8116:8080

+  # ================= PgAdmin =================
+
+  pgadmin:
+    image: dpage/pgadmin4
+    environment:
+      PGADMIN_DEFAULT_EMAIL: admin@example.com
+      PGADMIN_DEFAULT_PASSWORD: PASSWORD-PLACEHOLDER--vu9p2iy3f
+      PGADMIN_CONFIG_SERVER_MODE: "False"
+      PGADMIN_CONFIG_MASTER_PASSWORD_REQUIRED: "False"
+    configs:
+      - source: pgadmin_servers
+        target: /pgadmin4/servers.json
+    ports:
+      - 8117:80
+
+  # ================= Supabase Studio =================
+
+  supabase-studio:
+    image: supabase/studio:20241202-71e5240
+    restart: unless-stopped
+    healthcheck:
+      test:
+        [
+          "CMD",
+          "node",
+          "-e",
+          "fetch('http://studio:3000/api/profile').then((r) => {if (r.status !== 200) throw new Error(r.status)})"
+        ]
+      timeout: 10s
+      interval: 5s
+      retries: 3
+    environment:
+      STUDIO_PG_META_URL: http://supabase-meta:8080
+      POSTGRES_PASSWORD: PASSWORD-PLACEHOLDER--uqfEC1hmmv
+
+      OPENAI_API_KEY: ${OPENAI_API_KEY:-}
+
+      NEXT_PUBLIC_ENABLE_LOGS: true
+      NEXT_ANALYTICS_BACKEND_PROVIDER: postgres
+    ports:
+      - 8118:3000
+  
+  supabase-meta:
+    image: supabase/postgres-meta:v0.84.2
+    restart: unless-stopped
+    environment:
+      PG_META_PORT: 8080
+      PG_META_DB_HOST: db
+      PG_META_DB_PORT: 5432
+      PG_META_DB_NAME: stackframe
+      PG_META_DB_USER: postgres
+      PG_META_DB_PASSWORD: PASSWORD-PLACEHOLDER--uqfEC1hmmv
+
+
  # ================= Inbucket =================

  inbucket:
@ -94,3 +144,21 @@ volumes:
  svix-redis-data:
  svix-postgres-data:

+# ================= configs =================
+
+configs:
+  pgadmin_servers:
+    content: |
+      {
+        "Servers": {
+          "1": {
+            "Name": "Local Postgres DB",
+            "Group": "Servers",
+            "Host": "db",
+            "Port": 5432,
+            "Username": "postgres",
+            "PasswordExecCommand": "echo 'PASSWORD-PLACEHOLDER--uqfEC1hmmv'",
+            "MaintenanceDB": "stackframe"
+          }
+        }
+      }
--- a/docker/dependencies/postgres-with-extensions/Dockerfile
+++ b/docker/dependencies/postgres-with-extensions/Dockerfile
@ -0,0 +1,31 @@
+FROM postgres:15
+
+RUN apt-get update && apt-get install -y \
+    git \
+    build-essential \
+    libpq-dev \
+    postgresql-server-dev-15
+
+# Install HypoPG
+RUN git clone https://github.com/HypoPG/hypopg.git /hypopg
+RUN cd /hypopg && make install
+
+# Install index_advisor
+RUN git clone https://github.com/supabase/index_advisor.git /index_advisor
+RUN cd /index_advisor && make install
+
+# Write initialization SQL
+RUN echo "CREATE EXTENSION pg_stat_statements;" >> /docker-entrypoint-initdb.d/init.sql
+RUN echo "CREATE EXTENSION hypopg;" >> /docker-entrypoint-initdb.d/init.sql
+RUN echo "CREATE EXTENSION index_advisor;" >> /docker-entrypoint-initdb.d/init.sql
+
+# Add args to Postgres entrypoint
+ENTRYPOINT ["sh", "-c", "\
+  # Add delay if POSTGRES_DELAY_MS is set \
+  if [ $POSTGRES_DELAY_MS -gt 0 ]; then \
+    apt-get update && apt-get install -y iproute2 && tc qdisc add dev eth0 root netem delay ${POSTGRES_DELAY_MS}ms; \
+  fi; \
+  \
+  # Start Postgres with extensions enabled \
+  exec docker-entrypoint.sh postgres -c shared_preload_libraries='pg_stat_statements' -c shared_preload_libraries='hypopg' -c pg_stat_statements.track=all \
+"]
--- a/package.json
+++ b/package.json
@ -16,7 +16,7 @@
    "deps-compose": "docker compose -f dependencies.compose.yaml",
    "stop-deps": "POSTGRES_DELAY_MS=0 pnpm run deps-compose kill && POSTGRES_DELAY_MS=0 pnpm run deps-compose down -v",
    "init-db": "pnpm run prisma db push && pnpm run prisma db seed",
-    "start-deps:no-delay": "pnpm run deps-compose up --detach && sleep 5 && pnpm run init-db && echo \"\\nDependencies started in the background as Docker containers. 'pnpm run stop-deps' to stop them\"n",
+    "start-deps:no-delay": "pnpm run deps-compose up --detach --build && sleep 5 && pnpm run init-db && echo \"\\nDependencies started in the background as Docker containers. 'pnpm run stop-deps' to stop them\"n",
    "start-deps": "POSTGRES_DELAY_MS=${POSTGRES_DELAY_MS:-20} pnpm run start-deps:no-delay",
    "restart-deps": "pnpm run stop-deps && pnpm run start-deps",
    "restart-deps:no-delay": "pnpm run stop-deps && pnpm run start-deps:no-delay",