feat: network soft timeout alert banner

lablup · Jun 25, 2024 · 91c443a · 91c443a
1 parent 5bb6d27
commit 91c443a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git 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
@@ -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 = 5000;
+    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;