From 6571efedc83bb57929184116db6006142f57ee5f Mon Sep 17 00:00:00 2001
From: Jong Eun Lee <jongeun@lablup.com>
Date: Tue, 25 Jun 2024 13:55:05 +0800
Subject: [PATCH] feat: network soft timeout alert banner

---
 resources/i18n/ko.json           |  3 ++-
 src/lib/backend.ai-client-esm.ts | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
index a228730dc3..2d47b1f54f 100644
--- a/resources/i18n/ko.json
+++ b/resources/i18n/ko.json
@@ -75,7 +75,8 @@
     "UNAUTHORIZEDACCESS": "허가되지 않은 접근입니다.",
     "AdminOnlyPage": "접근하려는 페이지는 관리자 권한이 필요합니다.<br /> 아래 버튼을 클릭하면 요약 페이지로 돌아갑니다.",
     "CleanUpLoginSession": "로그인 된 세션을 종료합니다...",
-    "CleanUpNow": "종료합니다..."
+    "CleanUpNow": "종료합니다...",
+    "NetworkSoftTimeout": "서버와의 연결이 원할하지 않습니다."
   },
   "summary": {
     "StartMenu": "시작",
diff --git a/src/lib/backend.ai-client-esm.ts b/src/lib/backend.ai-client-esm.ts
index fe43dbbbeb..7e1cbadb07 100644
--- a/src/lib/backend.ai-client-esm.ts
+++ b/src/lib/backend.ai-client-esm.ts
@@ -204,10 +204,12 @@ class Client {
   public abortController: any;
   public abortSignal: any;
   public requestTimeout: number;
+  public requestSoftTimeout: number;
   static ERR_REQUEST: any;
   static ERR_RESPONSE: any;
   static ERR_ABORT: any;
   static ERR_TIMEOUT: any;
+  static ERR_SOFT_TIMEOUT: any;
   static ERR_SERVER: any;
   static ERR_UNKNOWN: any;
 
@@ -267,6 +269,7 @@ class Client {
     this.abortController = new AbortController();
     this.abortSignal = this.abortController.signal;
     this.requestTimeout = 15000;
+    this.requestSoftTimeout = 10000;
     if (localStorage.getItem('backendaiwebui.sessionid')) {
       this._loginSessionId = localStorage.getItem('backendaiwebui.sessionid');
     } else {
@@ -313,7 +316,7 @@ class Client {
     let errorTitle = '';
     let errorMsg;
     let errorDesc = '';
-    let resp, body, requestTimer;
+    let resp, body, requestTimer, requestTimerForSoftTimeout;
     try {
       if (rqst.method === 'GET') {
         rqst.body = undefined;
@@ -336,11 +339,20 @@ class Client {
           },
           timeout === 0 ? this.requestTimeout : timeout,
         );
+        requestTimerForSoftTimeout = setTimeout(
+          () => {
+            document?.dispatchEvent(new CustomEvent('backendai.client.softtimeout'));
+          }
+        );
       }
       resp = await fetch(rqst.uri, rqst);
       if (typeof requestTimer !== 'undefined') {
         clearTimeout(requestTimer);
       }
+      if (typeof requestTimerForSoftTimeout !== 'undefined') {
+        clearTimeout(requestTimerForSoftTimeout);
+      }
+      
       let loginSessionId = resp.headers.get('X-BackendAI-SessionID'); // Login session ID handler
       if (loginSessionId) {
         this._loginSessionId = loginSessionId;