From a55eb7da406fe7d4ec3bd19845eace0d7dde4132 Mon Sep 17 00:00:00 2001 From: PythonGermany <97847597+PythonGermany@users.noreply.github.com> Date: Wed, 10 Dec 2025 22:29:46 +0100 Subject: [PATCH] refactor(ui): Improve dev environment (#1429) --- web/app/src/App.vue | 5 ++--- web/app/src/main.js | 2 -- web/app/src/views/EndpointDetails.vue | 10 ++++------ web/app/src/views/Home.vue | 5 ++--- web/app/src/views/SuiteDetails.vue | 3 +-- web/app/vue.config.js | 18 ++++++++++++++++-- 6 files changed, 25 insertions(+), 18 deletions(-) diff --git a/web/app/src/App.vue b/web/app/src/App.vue index ab0cc962..41b307d6 100644 --- a/web/app/src/App.vue +++ b/web/app/src/App.vue @@ -133,7 +133,7 @@ @@ -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 diff --git a/web/app/src/main.js b/web/app/src/main.js index b53334fe..f527f564 100644 --- a/web/app/src/main.js +++ b/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') diff --git a/web/app/src/views/EndpointDetails.vue b/web/app/src/views/EndpointDetails.vue index e6ea86db..d78e2bef 100644 --- a/web/app/src/views/EndpointDetails.vue +++ b/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(() => { diff --git a/web/app/src/views/Home.vue b/web/app/src/views/Home.vue index 32001277..0ae81d76 100644 --- a/web/app/src/views/Home.vue +++ b/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) { diff --git a/web/app/src/views/SuiteDetails.vue b/web/app/src/views/SuiteDetails.vue index 1da5e95d..4daf38bb 100644 --- a/web/app/src/views/SuiteDetails.vue +++ b/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' }) diff --git a/web/app/vue.config.js b/web/app/vue.config.js index 9bdaa9fa..0734a1cd 100644 --- a/web/app/vue.config.js +++ b/web/app/vue.config.js @@ -6,5 +6,19 @@ module.exports = { filenameHashing: false, productionSourceMap: false, outputDir: '../static', - publicPath: '/' -} \ No newline at end of file + 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, + } + } + } +}