feat: allow to customize api endpoint (#77)

* feat: allow to customize api endpoint

* fix: regression

Signed-off-by: Olivier Vernin <olivier@vernin.me>

---------

Signed-off-by: Olivier Vernin <olivier@vernin.me>

Author: olblak

docker/config.js

@@ -2,6 +2,7 @@ const config = (() => {
   return {
     "OAUTH_DOMAIN": "https://oauth.domain",
     "OAUTH_CLIENTID": "client_id",
-    "OAUTH_AUDIENCE": "http://localhost:8080/api"
+    "OAUTH_AUDIENCE": "http://localhost:8080/api",
+    "API_BASE_URL": "/api",
   };
 })();

src/components/pipeline/configs/_configsSearch.vue

@@ -88,6 +88,8 @@
 
 <script>
 
+import { getApiBaseURL } from '@/composables/api';
+
 export default {
   name: 'ConfigsSearchFilter',
 
@@ -118,7 +120,7 @@ export default {
       this.$emit('loaded', false)
       const auth_enabled = process.env.VUE_APP_AUTH_ENABLED === 'true';
 
-      let query = `/api/pipeline/config/kinds?type=${this.configType}`;
+      let query = `${getApiBaseURL()}/pipeline/config/kinds?type=${this.configType}`;
 
       if (auth_enabled) {
         const token = await this.$auth0.getAccessTokenSilently();

src/components/pipeline/configs/config.vue

@@ -164,6 +164,8 @@ import { toYAML } from '@/composables/yaml'
 import GitRepositorySection from './GitRepositorySection.vue'
 import ReportCard from './ReportCard.vue'
 
+import { getApiBaseURL } from '@/composables/api';
+
 export default {
   name: 'PipelineConfigView',
   components: {
@@ -383,7 +385,7 @@ export default {
       this.$emit('loaded', false)
 
       try {
-        const queryURL = `/api/pipeline/config/${this.configType}s/search`
+        const queryURL = `${getApiBaseURL()}/pipeline/config/${this.configType}s/search`;
         const isAuthEnabled = process.env.VUE_APP_AUTH_ENABLED === 'true'
 
         const jsonReqBody = { id: this.configID }
@@ -426,7 +428,7 @@ export default {
 
       try {
         const isAuthEnabled = process.env.VUE_APP_AUTH_ENABLED === 'true'
-        const queryURL = `/api/pipeline/reports/search`
+        const queryURL = `${getApiBaseURL()}/pipeline/reports/search`
 
         const jsonReqBody = {}
         const fieldMap = {

src/components/pipeline/configs/configs.vue

@@ -194,6 +194,7 @@
 <script>
 import { toYAML } from '@/composables/yaml'
 import { toLocalDate } from '@/composables/date'
+import { getApiBaseURL } from '@/composables/api';
 
 export default {
   name: 'ConfigsTable',
@@ -302,7 +303,7 @@ export default {
       this.$emit('loaded', false);
 
       try {
-        let queryURL = `/api/pipeline/config/${this.resourceType}s/search`;
+        let queryURL = `${getApiBaseURL()}/pipeline/config/${this.resourceType}s/search`;
         const isAuthEnabled = process.env.VUE_APP_AUTH_ENABLED === 'true';
 
         // Build request body with pagination

src/components/pipeline/report.vue

@@ -240,6 +240,7 @@ import PipelineGraphComponent from './_graph.vue';
 
 import { getStatusColor, getStatusIcon, getStatusText } from '@/composables/status';
 import { toLocalDate } from '@/composables/date';
+import { getApiBaseURL } from '@/composables/api';
 
 export default {
   name: 'PipelineReportView',
@@ -355,7 +356,7 @@ export default {
       const isAuthEnabled = process.env.VUE_APP_AUTH_ENABLED === 'true';
       if (isAuthEnabled) {
         const token = await this.$auth0.getAccessTokenSilently();
-        const response = await fetch(`/api/pipeline/reports/` + this.$route.params.id, {
+        const response = await fetch(`${getApiBaseURL()}/pipeline/reports/` + this.$route.params.id, {
             headers: {
             Authorization: `Bearer ${token}`
           }
@@ -370,7 +371,7 @@ export default {
           this.isLatestReport()
         }
       } else {
-        const response = await fetch(`/api/pipeline/reports/` + this.$route.params.id);
+        const response = await fetch(`${getApiBaseURL()}/pipeline/reports/` + this.$route.params.id);
         const data = await response.json();
 
         this.pipeline = data.data;

src/components/pipeline/reports.vue

@@ -162,6 +162,7 @@
 import { getStatusColor, getStatusIcon } from '@/composables/status';
 import { extractGitURLInfo } from '@/composables/git'
 import { toLocalDate } from '@/composables/date'
+import { getApiBaseURL } from '@/composables/api';
 
 export default {
   name: 'PipelinesTable',
@@ -279,7 +280,7 @@ export default {
 
     async getReportsData(page =1 ) {
       this.$emit('loaded', false)
-      let queryURL = `/api/pipeline/reports`
+      let queryURL = `${getApiBaseURL()}/pipeline/reports`
 
       const params = new URLSearchParams();
       if (this.scmid != undefined && this.scmid != '' && this.scmid != null) {

src/components/scm/_filter.vue

@@ -58,6 +58,8 @@
 <script>
 import router from '../../router'
 
+import { getApiBaseURL } from '@/composables/api';
+
 export default {
   name: 'PipelineSCMS',
 
@@ -90,7 +92,7 @@ export default {
       this.$emit('loaded', false)
       const auth_enabled = process.env.VUE_APP_AUTH_ENABLED === 'true';
 
-      let query = `/api/pipeline/scms`;
+      let query = `${getApiBaseURL()}/pipeline/scms`;
 
       if (this.restrictedSCM != "") {
         query = query + `?scmid=${this.restrictedSCM}`

src/components/scm/_summary.vue

@@ -195,6 +195,8 @@ import router from '../../router'
 
 import SCMDoughnut from './_scmDoughnut.vue'
 
+import { getApiBaseURL } from '@/composables/api';
+
 ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend)
 
 export default {
@@ -334,7 +336,7 @@ export default {
                     params.append('scmid', this.scmid);
                 }
 
-                let query = `/api/pipeline/scms?${params.toString()}`;
+                let query = `${getApiBaseURL()}/pipeline/scms?${params.toString()}`;
 
                 let response;
                 if (auth_enabled) {

src/composables/api.js

@@ -0,0 +1,8 @@
+
+// getApiBaseURL returns the base URL for API requests with no trailing slash
+export function getApiBaseURL() {
+    const raw = config.API_BASE_URL || '/api'
+
+    // remove any trailing slashes so we can safely append paths like "/pipeline/..."
+    return raw.replace(/\/+$/, '')
+}