environment variables fixed

src/pages/Maintenance.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Box, Paper, Typography, Fade, useTheme, AppBar, Toolbar, Chip } from '@mui/material';
 import Plot from 'react-plotly.js';
 import { Layout, PlotData } from 'plotly.js';
+import { config } from '../config/env';
 
 interface DataItem {
   now_timestamp: string;
@@ -15,6 +16,8 @@ interface DataItem {
   flag: string;
 }
 
+const API_BASE_URL = config.apiUrl;
+
 const Maintenance = () => {
   const theme = useTheme();
   
@@ -24,7 +27,7 @@ const Maintenance = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await fetch('http://141.196.166.241:8003/prom/get_chart_data/maintenance/20');
+        const response = await fetch(`${API_BASE_URL}/prom/get_chart_data/maintenance/20`);
         const result = await response.json();
         
         if (result.data && result.data.length > 0) {

src/pages/Migration.tsx

@@ -29,9 +29,10 @@ import ResourceDistributionChart from '../components/Migration/ResourceDistribut
 import MigrationAdviceCard from '../components/Migration/MigrationAdviceCard';
 import VerifiedMigration from '../components/Migration/VerifiedMigration';
 import { useMigrationData, useGainAfterData } from '../components/Migration/hooks';
+import { config } from '../config/env';
 
 // Constants
-const API_BASE_URL = 'http://141.196.166.241:8003';
+const API_BASE_URL = config.apiUrl;
 const REFRESH_INTERVAL = 30000; // 30 seconds
 
 interface VMPlacementData {
@@ -412,8 +413,7 @@ const Migration = () => {
       setMigrationProgress([]);
       setHasProgress(true);
       
-      // First, send the POST request for migration approval
-      const approvalResponse = await fetch('http://141.196.166.241:8003/prom/migration/decisions4?run_migration=true', {
+      const approvalResponse = await fetch(`${API_BASE_URL}/prom/migration/decisions4?run_migration=true`, {
         method: 'POST',
         headers: {
           'accept': 'application/json'
@@ -455,7 +455,7 @@ const Migration = () => {
     try {
       setIsProcessing(true);
       
-      const response = await fetch('http://141.196.166.241:8003/prom/migration/decisions4?run_migration=false', {
+      const response = await fetch(`${API_BASE_URL}/prom/migration/decisions4?run_migration=false`, {
         method: 'POST',
         headers: {
           'accept': 'application/json'

src/pages/MonitoringSystem.tsx

@@ -23,6 +23,9 @@ import ComputerIcon from '@mui/icons-material/Computer';
 import MemoryIcon from '@mui/icons-material/Memory';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import SaveIcon from '@mui/icons-material/Save';
+import { config } from '../config/env';
+
+const API_BASE_URL = config.apiUrl;
 
 // Define the structure of our tree nodes
 interface TreeNode {
@@ -108,7 +111,7 @@ const MonitoringSystem: React.FC<MonitoringSystemProps> = ({
   const fetchData = async () => {
     setLoading(true);
     try {
-      const response = await fetch('http://141.196.166.241:8003/prom/monitoring');
+      const response = await fetch(`${API_BASE_URL}/prom/monitoring`);
       const result: ApiResponse = await response.json();
       
       // Create hierarchical structure

src/pages/Temperature.tsx

@@ -5,6 +5,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import CancelIcon from '@mui/icons-material/Cancel';
 import Plot from 'react-plotly.js';
 import { Layout, PlotData, Config } from 'plotly.js';
+import { config } from '../config/env';
 
 // Extend the Window interface to include Google Charts
 declare global {
@@ -26,6 +27,8 @@ interface ChartData {
   power_future_min: string;
 }
 
+const API_BASE_URL = config.apiUrl;
+
 const Temperature = () => {
   const theme = useTheme();
   const [data, setData] = useState<ChartData[]>([]);
@@ -52,7 +55,7 @@ const Temperature = () => {
         setRefreshing(true);
       }
       
-      const response = await fetch('http://141.196.166.241:8003/prom/get_chart_data/temperature/20');
+      const response = await fetch(`${API_BASE_URL}/prom/get_chart_data/temperature/20`);
       const result = await response.json();
       
       if (result.data && result.data.length > 0) {
@@ -337,7 +340,7 @@ const Temperature = () => {
   const handleTemperatureDecision = async (approval: boolean) => {
     try {
       setDecisionLoading(true);
-      const response = await fetch('http://141.196.166.241:8003/prom/temperature/decisions?approval=' + approval, {
+      const response = await fetch(`${API_BASE_URL}/prom/temperature/decisions?approval=${approval}`, {
         method: 'POST',
         headers: {
           'accept': 'application/json',

src/pages/Test.tsx

@@ -25,6 +25,7 @@ import ScienceIcon from '@mui/icons-material/Science';
 import SpeedIcon from '@mui/icons-material/Speed';
 import ComputerIcon from '@mui/icons-material/Computer';
 import { stressService } from '../services/stressService';
+import { config } from '../config/env';
 
 const PageTitle = styled(Typography)(({ theme }) => ({
   display: 'flex',
@@ -78,6 +79,8 @@ interface VM {
   ip: string;
 }
 
+const API_BASE_URL = config.apiUrl;
+
 const Test = () => {
   const [stressLevel, setStressLevel] = useState<'low' | 'medium' | 'high'>('low');
   const [stressedVMs, setStressedVMs] = useState<string[]>([]);
@@ -106,7 +109,7 @@ const Test = () => {
     const fetchVMs = async () => {
       setIsLoadingVMs(true);
       try {
-        const response = await fetch('http://141.196.166.241:8003/prom/monitoring');
+        const response = await fetch(`${API_BASE_URL}/prom/monitoring`);
         const data: MonitoringResponse = await response.json();
         
         // Extract VMs from the optimization space