feat: run under a subpath (#663)

Adds a `-api.base-url` flag to support running the UI under a different baseUrl.
Closes #638

---------
Co-authored-by: Christian Simon <simon@swine.de>

Author: eh-am

.github/workflows/e2e.yaml

@@ -0,0 +1,77 @@
+name: e2e
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  # Cancel any running workflow for the same branch when new commits are pushed.
+  # We group both by ref_name (available when CI is triggered by a push to a branch/tag)
+  # and head_ref (available when CI is triggered by a PR).
+  group: "e2e-${{ github.ref_name }}-${{ github.head_ref }}"
+  cancel-in-progress: true
+
+jobs:
+  regular-path:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.15.0
+          cache: yarn
+      - name: Install Go
+        uses: actions/setup-go@v4
+        with:
+          go-version: "1.19.9"
+          cache: true         
+      - run: yarn --frozen-lockfile
+      - run: make build
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          wait-on: http://localhost:4100/ui/
+          start: make run
+          config-file: cypress/ci.ts
+        env:
+          ELECTRON_ENABLE_LOGGING: 1
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: regular-path-cypress-screenshots
+          path: cypress/screenshots
+
+  base-path:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.15.0
+          cache: yarn
+      - name: Install Go
+        uses: actions/setup-go@v4
+        with:
+          go-version: "1.19.9"
+          cache: true         
+      - run: yarn --frozen-lockfile
+      - run: make build
+      - name: run nginx with /foobar/
+        run: docker-compose -f scripts/base-url/docker-compose.yaml up -d
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          wait-on: http://localhost:8080/foobar/
+          start: |
+            make run PARAMS=-api.base-url=/foobar/
+          config-file: cypress/ci-base-path.ts
+        env:
+          ELECTRON_ENABLE_LOGGING: 1
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: base-path-cypress-screenshots
+          path: cypress/screenshots

.gitignore

@@ -35,3 +35,5 @@ public/build
 
 # Contains the docker image id for phlare
 /.docker-image-id-phlare
+
+cypress/screenshots

Makefile

@@ -371,3 +371,7 @@ deploy-demo: $(BIN)/kind
 .PHONY: docs/%
 docs/%:
 	$(MAKE) -C docs $*
+
+.PHONY: run
+run: ## Run the phlare binary (pass parameters with 'make run PARAMS=-myparam')
+	./phlare $(PARAMS)

cmd/phlare/help-all.txt.tmpl

@@ -1,4 +1,6 @@
 Usage of ./phlare:
+  -api.base-url string
+    	base URL for when the server is behind a reverse proxy with a different path
   -auth.multitenancy-enabled
     	When set to true, incoming HTTP requests must specify tenant ID in HTTP X-Scope-OrgId header. When set to false, tenant ID anonymous is used instead.
   -client.tenant-id string

cmd/phlare/help.txt.tmpl

@@ -1,4 +1,6 @@
 Usage of ./phlare:
+  -api.base-url string
+    	base URL for when the server is behind a reverse proxy with a different path
   -auth.multitenancy-enabled
     	When set to true, incoming HTTP requests must specify tenant ID in HTTP X-Scope-OrgId header. When set to false, tenant ID anonymous is used instead.
   -client.tenant-id string

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:4040',
+    video: false,
+  },
+});

cypress/ci-base-path.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8080/foobar/ui/',
+    env: {
+      apiBasePath: '/foobar',
+    },
+    video: false,
+  },
+});

cypress/ci.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:4100/ui/',
+    video: false,
+  },
+});

cypress/e2e/smoke.cy.ts

@@ -0,0 +1,29 @@
+// / <reference types="cypress" />
+describe('smoke', () => {
+  beforeEach(function () {
+    const apiBasePath = Cypress.env('apiBasePath') || '';
+
+    cy.intercept(`${apiBasePath}/pyroscope/label-values?label=__name__`, {
+      fixture: 'profileTypes.json',
+    }).as('profileTypes');
+  });
+
+  it('loads admin page', () => {
+    cy.visit('../');
+  });
+
+  it('loads single view (/)', () => {
+    cy.visit('/');
+    cy.wait(`@profileTypes`);
+  });
+
+  it('loads comparison view (/comparison)', () => {
+    cy.visit('/comparison');
+    cy.wait(`@profileTypes`);
+  });
+
+  it('loads diff view (/comparison-diff)', () => {
+    cy.visit('/comparison-diff');
+    cy.wait(`@profileTypes`);
+  });
+});

cypress/fixtures/profileTypes.json

@@ -0,0 +1,2 @@
+["memory:alloc_objects:count::","memory:alloc_space:bytes::","memory:inuse_objects:count::","memory:inuse_space:bytes::","process_cpu:cpu:nanoseconds:cpu:nanoseconds"]
+