feat: add token auto-refresh configuration in application.properties

src/main/resources/application.properties

@@ -79,3 +79,11 @@ quarkus.log.category."org.jboss.resteasy.reactive.client.logging".level=DEBUG
 quarkus.rest-client.logging.scope=request-response
 quarkus.rest-client.logging.body-limit=10000
 quarkus.oidc.authentication.add-openid-scope=true
+
+# Session and token management
+quarkus.oidc.authentication.session-age-extension=30M
+quarkus.oidc.authentication.restore-path-after-redirect=true
+quarkus.oidc.authentication.cookie-path=/
+quarkus.oidc.authentication.cookie-same-site=lax
+quarkus.oidc.token.refresh-expired=true
+quarkus.oidc.token.auto-refresh-interval=2M

src/main/webui/package.json

@@ -22,7 +22,8 @@
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "axios": "^1.7.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/main/webui/src/App.tsx

@@ -6,28 +6,32 @@ import LogoutButton from "./components/LogoutButton";
 import {UserInfo} from "./entities/users";
 import TabPanel from "./components/TabPanel";
 import {AppMetadata} from "./entities/metadata";
+import {httpClient} from "./utils/httpClient";
+import {useSessionKeepAlive} from "./hooks/useSessionKeepAlive";
+import {AxiosResponse} from "axios";
 
 
 function App() {
     const [value, setValue] = useState(0);
     const [userInfo, setUserInfo] = useState<UserInfo>({authenticated: false});
     const [metadata, setMetadata] = useState<AppMetadata | null>(null);
     const [metadataLoading, setMetadataLoading] = useState(true);
+
+    // Keep session alive during user activity
+    useSessionKeepAlive();
 
     useEffect(() => {
-        const fetchAuthStatus = fetch("/colly/auth-status")
-            .then(res => res.json())
-            .then(authData => {
-                setUserInfo(authData);
+        const fetchAuthStatus = httpClient.get<UserInfo>("/colly/auth-status")
+            .then((response: AxiosResponse<UserInfo>) => {
+                setUserInfo(response.data);
             })
-            .catch(err => {
+            .catch((err: any) => {
                 console.error("Failed to fetch auth status:", err);
             });
 
-        const fetchMetadata = fetch("/colly/metadata")
-            .then(res => res.json())
-            .then((metaData: AppMetadata) => setMetadata(metaData))
-            .catch(err => {
+        const fetchMetadata = httpClient.get<AppMetadata>("/colly/metadata")
+            .then((response: AxiosResponse<AppMetadata>) => setMetadata(response.data))
+            .catch((err: any) => {
                 console.error("Failed to fetch app metadata:", err);
                 setMetadata({
                     monitoringColumns: []

src/main/webui/src/components/ClustersTable.tsx

@@ -15,6 +15,8 @@ import EditIcon from "@mui/icons-material/Edit";
 import EditClusterDialog from "./EditClusterDialog";
 import SearchIcon from "@mui/icons-material/Search";
 import CancelIcon from "@mui/icons-material/Cancel";
+import {httpClient} from "../utils/httpClient";
+import {AxiosResponse} from "axios";
 
 interface ClusterTableProps {
     userInfo: UserInfo;
@@ -28,10 +30,9 @@ export default function ClustersTable({userInfo}: ClusterTableProps) {
 
 
     useEffect(() => {
-        fetch("/colly/clusters")
-            .then(res => res.json())
-            .then(clustersData => setClusters(clustersData))
-            .catch(err => console.error("Failed to fetch clusters:", err))
+        httpClient.get<Cluster[]>("/colly/clusters")
+            .then((response: AxiosResponse<Cluster[]>) => setClusters(response.data))
+            .catch((err: any) => console.error("Failed to fetch clusters:", err))
             .finally(() => setLoading(false));
     }, []);
 
@@ -50,18 +51,10 @@ export default function ClustersTable({userInfo}: ClusterTableProps) {
             }
             formData.append("name", changedCluster.name);
 
-            const response = await fetch(`/colly/clusters/${changedCluster.name}`, {
-                method: "POST",
-                body: formData
-            });
-
-            if (response.ok) {
-                setSelectedCluster(null);
-                setClusters(prev => prev.map(cluster => cluster.name === changedCluster.name ? changedCluster : cluster));
-            } else {
-                console.error("Failed to save changes", await response.text());
-            }
-        } catch (error) {
+            await httpClient.post(`/colly/clusters/${changedCluster.name}`, formData);
+            setSelectedCluster(null);
+            setClusters(prev => prev.map(cluster => cluster.name === changedCluster.name ? changedCluster : cluster));
+        } catch (error: any) {
             console.error("Error during save:", error);
         }
     };

src/main/webui/src/components/EnvTable.tsx

@@ -21,6 +21,8 @@ import EditEnvironmentDialog from "./EditEnvironmentDialog";
 import {Environment, ENVIRONMENT_TYPES_MAPPING, EnvironmentStatus, STATUS_MAPPING} from "../entities/environments";
 import {UserInfo} from "../entities/users";
 import dayjs from "dayjs";
+import {httpClient} from "../utils/httpClient";
+import {AxiosResponse} from "axios";
 
 interface EnvTableProps {
     userInfo: UserInfo;
@@ -39,9 +41,9 @@ export default function EnvTable({userInfo, monitoringColumns}: EnvTableProps) {
     const [isInitialized, setIsInitialized] = useState(false);
 
     useEffect(() => {
-        fetch("/colly/environments").then(res => res.json())
-            .then(envData => setEnvironments(envData))
-            .catch(err => console.error("Failed to fetch environments:", err))
+        httpClient.get<Environment[]>("/colly/environments")
+            .then((response: AxiosResponse<Environment[]>) => setEnvironments(response.data))
+            .catch((err: any) => console.error("Failed to fetch environments:", err))
             .finally(() => setLoading(false));
     }, []);
 
@@ -125,18 +127,10 @@ export default function EnvTable({userInfo, monitoringColumns}: EnvTableProps) {
             formData.append("expirationDate", changedEnv.expirationDate ? dayjs(changedEnv.expirationDate).format("YYYY-MM-DD") : "");
             changedEnv.labels.forEach(label => formData.append("labels", label));
 
-            const response = await fetch(`/colly/environments/${changedEnv.id}`, {
-                method: "POST",
-                body: formData
-            });
-
-            if (response.ok) {
-                setSelectedEnv(null);
-                setEnvironments(prev => prev.map(env => env.id === changedEnv.id ? changedEnv : env));
-            } else {
-                console.error("Failed to save changes", await response.text());
-            }
-        } catch (error) {
+            await httpClient.post(`/colly/environments/${changedEnv.id}`, formData);
+            setSelectedEnv(null);
+            setEnvironments(prev => prev.map(env => env.id === changedEnv.id ? changedEnv : env));
+        } catch (error: any) {
             console.error("Error during save:", error);
         }
     }, []);