refactor(ui): Improve dev environment (#1429)

web/app/src/App.vue

@@ -133,7 +133,7 @@
           </div>
           
           <a
-            :href="`${SERVER_URL}/oidc/login`"
+            :href="`/oidc/login`"
             class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8 w-full"
             @click="isOidcLoading = true"
           >
@@ -162,7 +162,6 @@ import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
 import Social from './components/Social.vue'
 import Tooltip from './components/Tooltip.vue'
 import Loading from './components/Loading.vue'
-import { SERVER_URL } from '@/main'
 
 const route = useRoute()
 
@@ -196,7 +195,7 @@ const buttons = computed(() => {
 // Methods
 const fetchConfig = async () => {
   try {
-    const response = await fetch(`${SERVER_URL}/api/v1/config`, { credentials: 'include' })
+    const response = await fetch(`/api/v1/config`, { credentials: 'include' })
     if (response.status === 200) {
       const data = await response.json()
       config.value = data

web/app/src/main.js

@@ -3,6 +3,4 @@ import App from './App.vue'
 import './index.css'
 import router from './router'
 
-export const SERVER_URL = process.env.NODE_ENV === 'production' ? '' : 'http://localhost:8080'
-
 createApp(App).use(router).mount('#app')

web/app/src/views/EndpointDetails.vue

@@ -213,7 +213,6 @@ import Settings from '@/components/Settings.vue'
 import Pagination from '@/components/Pagination.vue'
 import Loading from '@/components/Loading.vue'
 import ResponseTimeChart from '@/components/ResponseTimeChart.vue'
-import { SERVER_URL } from '@/main.js'
 import { generatePrettyTimeAgo, generatePrettyTimeDifference } from '@/utils/time'
 
 const router = useRouter()
@@ -228,7 +227,6 @@ const resultPageSize = 50
 const showResponseTimeChartAndBadges = ref(false)
 const showAverageResponseTime = ref(false)
 const selectedChartDuration = ref('24h')
-const serverUrl = SERVER_URL === '.' ? '..' : SERVER_URL
 const isRefreshing = ref(false)
 
 const latestResult = computed(() => {
@@ -305,7 +303,7 @@ const lastCheckTime = computed(() => {
 const fetchData = async () => {
   isRefreshing.value = true
   try {
-    const response = await fetch(`${serverUrl}/api/v1/endpoints/${route.params.key}/statuses?page=${currentPage.value}&pageSize=${resultPageSize}`, {
+    const response = await fetch(`/api/v1/endpoints/${route.params.key}/statuses?page=${currentPage.value}&pageSize=${resultPageSize}`, {
       credentials: 'include'
     })
     
@@ -386,15 +384,15 @@ const prettifyTimestamp = (timestamp) => {
 }
 
 const generateHealthBadgeImageURL = () => {
-  return `${serverUrl}/api/v1/endpoints/${endpointStatus.value.key}/health/badge.svg`
+  return `/api/v1/endpoints/${endpointStatus.value.key}/health/badge.svg`
 }
 
 const generateUptimeBadgeImageURL = (duration) => {
-  return `${serverUrl}/api/v1/endpoints/${endpointStatus.value.key}/uptimes/${duration}/badge.svg`
+  return `/api/v1/endpoints/${endpointStatus.value.key}/uptimes/${duration}/badge.svg`
 }
 
 const generateResponseTimeBadgeImageURL = (duration) => {
-  return `${serverUrl}/api/v1/endpoints/${endpointStatus.value.key}/response-times/${duration}/badge.svg`
+  return `/api/v1/endpoints/${endpointStatus.value.key}/response-times/${duration}/badge.svg`
 }
 
 onMounted(() => {

web/app/src/views/Home.vue

@@ -193,7 +193,6 @@ import Settings from '@/components/Settings.vue'
 import Loading from '@/components/Loading.vue'
 import AnnouncementBanner from '@/components/AnnouncementBanner.vue'
 import PastAnnouncements from '@/components/PastAnnouncements.vue'
-import { SERVER_URL } from '@/main.js'
 
 const props = defineProps({
   announcements: {
@@ -434,7 +433,7 @@ const fetchData = async () => {
   }
   try {
     // Fetch endpoints
-    const endpointResponse = await fetch(`${SERVER_URL}/api/v1/endpoints/statuses?page=1&pageSize=${resultPageSize}`, {
+    const endpointResponse = await fetch(`/api/v1/endpoints/statuses?page=1&pageSize=${resultPageSize}`, {
       credentials: 'include'
     })
     if (endpointResponse.status === 200) {
@@ -445,7 +444,7 @@ const fetchData = async () => {
     }
     
     // Fetch suites
-    const suiteResponse = await fetch(`${SERVER_URL}/api/v1/suites/statuses?page=1&pageSize=${resultPageSize}`, {
+    const suiteResponse = await fetch(`/api/v1/suites/statuses?page=1&pageSize=${resultPageSize}`, {
       credentials: 'include'
     })
     if (suiteResponse.status === 200) {

web/app/src/views/SuiteDetails.vue

@@ -154,7 +154,6 @@ import StepDetailsModal from '@/components/StepDetailsModal.vue'
 import Settings from '@/components/Settings.vue'
 import Loading from '@/components/Loading.vue'
 import { generatePrettyTimeAgo } from '@/utils/time'
-import { SERVER_URL } from '@/main'
 
 const router = useRouter()
 const route = useRoute()
@@ -191,7 +190,7 @@ const fetchData = async () => {
   }
 
   try {
-    const response = await fetch(`${SERVER_URL}/api/v1/suites/${route.params.key}/statuses`, {
+    const response = await fetch(`/api/v1/suites/${route.params.key}/statuses`, {
       credentials: 'include'
     })
 

web/app/vue.config.js

@@ -6,5 +6,19 @@ module.exports = {
 	filenameHashing: false,
 	productionSourceMap: false,
 	outputDir: '../static',
-	publicPath: '/'
+	publicPath: '/',
-}
+	devServer: {
+		port: 8081,
+		https: false,
+		client: {
+			webSocketURL:'auto://0.0.0.0/ws'
+		},
+		proxy: {
+			'^/api|^/css|^/oicd': {
+				target: "http://localhost:8080",
+				changeOrigin: true,
+				secure: false,
+			}
+		}
+	}
+}