Make API_BASEPATH configurable based on PATH_PREFIX

metalmatze · metalmatze · commit 2ad1eb7759c0 · 2022-01-30T19:01:59.000+01:00
diff --git a/main.go b/main.go
@@ -12,6 +12,7 @@ import (
 	"math"
 	"net/http"
 	"net/url"
+	"path"
 	"sort"
 	"strconv"
 	"strings"
@@ -152,9 +153,11 @@ func cmdAPI(prometheusURL, prometheusExternal, apiURL *url.URL, routePrefix, uiR
 			if err := tmpl.Execute(w, struct {
 				PrometheusURL string
 				PathPrefix    string
+				APIBasepath   string
 			}{
 				PrometheusURL: prometheusExternal.String(),
 				PathPrefix:    uiRoutePrefix,
+				APIBasepath:   path.Join(uiRoutePrefix, "/api/v1"),
 			}); err != nil {
 				log.Println(err)
 				return
@@ -166,9 +169,11 @@ func cmdAPI(prometheusURL, prometheusExternal, apiURL *url.URL, routePrefix, uiR
 				if err := tmpl.Execute(w, struct {
 					PrometheusURL string
 					PathPrefix    string
+					APIBasepath   string
 				}{
 					PrometheusURL: prometheusExternal.String(),
 					PathPrefix:    uiRoutePrefix,
+					APIBasepath:   path.Join(uiRoutePrefix, "/api/v1"),
 				}); err != nil {
 					log.Println(err)
 				}
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -23,6 +23,7 @@
     -->
     <title>Pyrra</title>
     <script>window.PATH_PREFIX = {{.PathPrefix}}</script>
+    <script>window.API_BASEPATH = {{.APIBasepath}}</script>
     <script>window.PROMETHEUS_URL = {{.PrometheusURL}}</script>
   </head>
   <body>
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -6,6 +6,8 @@ import Detail from './pages/Detail'
 // @ts-ignore - this is passed from the HTML template.
 export const PATH_PREFIX: string = window.PATH_PREFIX;
 // @ts-ignore - this is passed from the HTML template.
+export const API_BASEPATH: string = window.API_BASEPATH;
+// @ts-ignore - this is passed from the HTML template.
 export const PROMETHEUS_URL: string = window.PROMETHEUS_URL;
 
 const App = () => {
@@ -38,7 +40,6 @@ export const dateFormatter = (timeRange: number) => (t: number): string => {
   }
 
   return `${hourLeading}:${minuteLeading}`
-
 }
 
 export const dateFormatterFull = (t: number): string => {
diff --git a/ui/src/components/AlertsTable.tsx b/ui/src/components/AlertsTable.tsx
@@ -1,6 +1,6 @@
 import { OverlayTrigger, Table, Tooltip as OverlayTooltip } from 'react-bootstrap'
 import React, { useEffect, useMemo, useState } from 'react'
-import { formatDuration, PROMETHEUS_URL, PATH_PREFIX } from '../App'
+import { API_BASEPATH, formatDuration, PROMETHEUS_URL } from '../App'
 import { Configuration, MultiBurnrateAlert, Objective, ObjectivesApi } from '../client'
 import { IconExternal } from './Icons'
 import { labelsString } from "../labels";
@@ -12,7 +12,7 @@ interface AlertsTableProps {
 
 const AlertsTable = ({ objective, grouping }: AlertsTableProps): JSX.Element => {
   const api = useMemo(() => {
-    return new ObjectivesApi(new Configuration({ basePath: `./api/v1` }))
+    return new ObjectivesApi(new Configuration({ basePath: API_BASEPATH }))
   }, [])
 
   const [alerts, setAlerts] = useState<MultiBurnrateAlert[]>([])
diff --git a/ui/src/pages/Detail.tsx b/ui/src/pages/Detail.tsx
@@ -9,7 +9,7 @@ import {
   ObjectiveStatusAvailability,
   ObjectiveStatusBudget
 } from '../client'
-import { formatDuration, parseDuration, PATH_PREFIX } from '../App'
+import { API_BASEPATH, formatDuration, parseDuration } from '../App'
 import Navbar from '../components/Navbar'
 import { parseLabels } from "../labels";
 import ErrorBudgetGraph from "../components/graphs/ErrorBudgetGraph";
@@ -22,7 +22,7 @@ const Detail = () => {
   const query = new URLSearchParams(useLocation().search)
 
   const api = useMemo(() => {
-    return new ObjectivesApi(new Configuration({ basePath: `./api/v1` }))
+    return new ObjectivesApi(new Configuration({ basePath: API_BASEPATH }))
   }, [])
 
   const queryExpr = query.get('expr')
diff --git a/ui/src/pages/List.tsx b/ui/src/pages/List.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useReducer, useState } from 'react'
 import { Badge, Col, Container, OverlayTrigger, Row, Spinner, Table, Tooltip as OverlayTooltip } from 'react-bootstrap'
 import { Configuration, Objective, ObjectivesApi, ObjectiveStatus } from '../client'
-import { formatDuration, PATH_PREFIX } from '../App'
+import { API_BASEPATH, formatDuration } from '../App'
 import { Link, useHistory } from 'react-router-dom'
 import Navbar from '../components/Navbar'
 import { IconArrowDown, IconArrowUp, IconArrowUpDown } from '../components/Icons'
@@ -159,7 +159,7 @@ interface TableSorting {
 
 const List = () => {
   const api = useMemo(() => {
-    return new ObjectivesApi(new Configuration({ basePath: `./api/v1` }))
+    return new ObjectivesApi(new Configuration({ basePath: API_BASEPATH }))
   }, [])
 
   const history = useHistory()

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,8 @@ import Detail from './pages/Detail'`
`6`	`6`	`// @ts-ignore - this is passed from the HTML template.`
`7`	`7`	`export const PATH_PREFIX: string = window.PATH_PREFIX;`
`8`	`8`	`// @ts-ignore - this is passed from the HTML template.`
	`9`	`+export const API_BASEPATH: string = window.API_BASEPATH;`
	`10`	`+// @ts-ignore - this is passed from the HTML template.`
`9`	`11`	`export const PROMETHEUS_URL: string = window.PROMETHEUS_URL;`
`10`	`12`
`11`	`13`	`const App = () => {`
`@@ -38,7 +40,6 @@ export const dateFormatter = (timeRange: number) => (t: number): string => {`
`38`	`40`	`}`
`39`	`41`
`40`	`42`	return `${hourLeading}:${minuteLeading}`
`41`		`-`
`42`	`43`	`}`
`43`	`44`
`44`	`45`	`export const dateFormatterFull = (t: number): string => {`