Merge remote-tracking branch 'origin/master' into improve-ui-config-handling

Author: PythonGermany

.github/workflows/test.yml

@@ -28,7 +28,7 @@ jobs:
         # was configured by the "Set up Go" step (otherwise, it'd use sudo's "go" executable)
         run: sudo env "PATH=$PATH" "GOROOT=$GOROOT" go test ./... -race -coverprofile=coverage.txt -covermode=atomic
       - name: Codecov
-        uses: codecov/[email protected].1
+        uses: codecov/[email protected].2
         with:
           files: ./coverage.txt
           token: ${{ secrets.CODECOV_TOKEN }}

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()
 
@@ -188,7 +187,7 @@ const buttons = computed(() => window.config?.buttons ?? [])
 // 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/components/SearchBar.vue

@@ -64,9 +64,10 @@ const sortOptions = [
 
 const emit = defineEmits(['search', 'update:showOnlyFailing', 'update:showRecentFailures', 'update:groupByGroup', 'update:sortBy', 'initializeCollapsedGroups'])
 
-const handleFilterChange = (value) => {
+const handleFilterChange = (value, store = true) => {
   filterBy.value = value
-  localStorage.setItem('gatus:filter-by', value)
+  if (store)
+    localStorage.setItem('gatus:filter-by', value)
   
   // Reset all filter states first
   emit('update:showOnlyFailing', false)
@@ -80,9 +81,11 @@ const handleFilterChange = (value) => {
   }
 }
 
-const handleSortChange = (value) => {
+const handleSortChange = (value, store = true) => {
   sortBy.value = value
-  localStorage.setItem('gatus:sort-by', value)
+  if (store)
+    localStorage.setItem('gatus:sort-by', value)
+
   emit('update:sortBy', value)
   emit('update:groupByGroup', value === 'group')
   
@@ -93,8 +96,8 @@ const handleSortChange = (value) => {
 }
 
 onMounted(() => {
-  // Apply saved filter/sort state on load
-  handleFilterChange(filterBy.value)
-  handleSortChange(sortBy.value)
+  // Apply saved or application wide filter/sort state on load but do not store it in localstorage
+  handleFilterChange(filterBy.value, false)
+  handleSortChange(sortBy.value, false)
 })
 </script>

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,
+			}
+		}
+	}
+}