Merge pull request #3960 from sniok/add-backend-loading-indicator

frontend: Layout: Add loader for backend connection

Author: k8s-ci-robot

frontend/src/App.test.tsx

@@ -25,6 +25,6 @@ test('renders without crashing', async () => {
     </React.Suspense>
   );
   await waitFor(() => {
-    expect(getByText(/Skip to main content/i)).toBeInTheDocument();
+    expect(getByText(/Connecting/i)).toBeInTheDocument();
   });
 });

frontend/src/components/App/Layout.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { Typography } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
@@ -23,7 +24,7 @@ import { styled } from '@mui/material/styles';
 import { Dispatch, UnknownAction } from '@reduxjs/toolkit';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { getCluster } from '../../lib/cluster';
 import { getSelectedClusters } from '../../lib/cluster';
@@ -37,6 +38,7 @@ import store from '../../redux/stores/store';
 import { useUIPanelsGroupedBySide } from '../../redux/uiSlice';
 import { fetchStatelessClusterKubeConfigs, isEqualClusterConfigs } from '../../stateless/';
 import { ActivitiesRenderer } from '../activity/Activity';
+import { ErrorPage, Loader } from '../common';
 import ActionsNotifier from '../common/ActionsNotifier';
 import AlertNotification from '../common/AlertNotification';
 import DetailsDrawer from '../common/Resource/DetailsDrawer';
@@ -190,10 +192,14 @@ export default function Layout({}: LayoutProps) {
    * indexDB and then sends the backend to parse it and then updates the parsed value into redux
    * store on an interval.
    * */
-  useQuery({
+  const {
+    data: config,
+    isLoading,
+    error,
+  } = useQuery({
     queryKey: ['cluster-fetch'],
     queryFn: () => fetchConfig(dispatch),
-    refetchInterval: CLUSTER_FETCH_INTERVAL,
+    refetchInterval: query => (query.state.status === 'error' ? false : CLUSTER_FETCH_INTERVAL),
   });
 
   // Remove splash screen styles from the body
@@ -214,6 +220,40 @@ export default function Layout({}: LayoutProps) {
 
   const panels = useUIPanelsGroupedBySide();
 
+  if (error && !config) {
+    return <ErrorPage message={<Trans>Failed to connect to the backend</Trans>} error={error} />;
+  }
+
+  if (isLoading) {
+    return (
+      <Box
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100dvw',
+          height: '100dvh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 2,
+          animation: 'loader-appear',
+          animationFillMode: 'both',
+          animationDelay: '2s',
+          animationDuration: '0.3s',
+
+          '@keyframes loader-appear': {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+          },
+        }}
+      >
+        <Loader title={t('Connecting to backend...')} />
+        <Typography>{t('Connecting to backend...')}</Typography>
+      </Box>
+    );
+  }
+
   return (
     <>
       <Link

frontend/src/i18n/locales/de/translation.json

@@ -69,6 +69,8 @@
   "Load cluster": "Cluster laden",
   "Something went wrong with cluster {{ cluster }}": "Mit dem Cluster ist etwas schief gelaufen {{ cluster }}",
   "Choose another cluster": "Wählen Sie einen anderen Cluster",
+  "Failed to connect to the backend": "",
+  "Connecting to backend...": "",
   "Skip to main content": "Zum Hauptinhalt springen",
   "Menu": "",
   "Mark all as read": "Alle als gelesen markieren",
@@ -322,6 +324,7 @@
   "Init Containers": "Init-Container",
   "Conditions": "Bedingungen",
   "Volumes": "Speicher-Volumes",
+  "Kind": "",
   "Restarting {{ itemName }}…": "Starte {{ itemName }} neu…",
   "Cancelled restarting {{ itemName }}.": "Der Neustart von {{ itemName }} wurde abgebrochen.",
   "Restarted {{ itemName }}.": "{{ itemName }} neu gestartet.",
@@ -438,7 +441,6 @@
   "ParentRefs": "",
   "No rules data to be shown.": "Keine Regeldaten vorhanden.",
   "Namespace": "",
-  "Kind": "",
   "Section Name": "",
   "Press<1>/</1>to search": "",
   "Search resources, pages, clusters by name": "",

frontend/src/i18n/locales/en/translation.json

@@ -69,6 +69,8 @@
   "Load cluster": "Load cluster",
   "Something went wrong with cluster {{ cluster }}": "Something went wrong with cluster {{ cluster }}",
   "Choose another cluster": "Choose another cluster",
+  "Failed to connect to the backend": "Failed to connect to the backend",
+  "Connecting to backend...": "Connecting to backend...",
   "Skip to main content": "Skip to main content",
   "Menu": "Menu",
   "Mark all as read": "Mark all as read",
@@ -322,6 +324,7 @@
   "Init Containers": "Init Containers",
   "Conditions": "Conditions",
   "Volumes": "Volumes",
+  "Kind": "Kind",
   "Restarting {{ itemName }}…": "Restarting {{ itemName }}…",
   "Cancelled restarting {{ itemName }}.": "Cancelled restarting {{ itemName }}.",
   "Restarted {{ itemName }}.": "Restarted {{ itemName }}.",
@@ -438,7 +441,6 @@
   "ParentRefs": "ParentRefs",
   "No rules data to be shown.": "No rules data to be shown.",
   "Namespace": "Namespace",
-  "Kind": "Kind",
   "Section Name": "Section Name",
   "Press<1>/</1>to search": "Press<1>/</1>to search",
   "Search resources, pages, clusters by name": "Search resources, pages, clusters by name",

frontend/src/i18n/locales/es/translation.json

@@ -69,6 +69,8 @@
   "Load cluster": "Cargar cluster",
   "Something went wrong with cluster {{ cluster }}": "Algo ha fallado en el cluster {{ cluster }}",
   "Choose another cluster": "Elegir un otro cluster",
+  "Failed to connect to the backend": "",
+  "Connecting to backend...": "",
   "Skip to main content": "Avanzar hacia el contenido principal",
   "Menu": "",
   "Mark all as read": "Marcar todo como leído",
@@ -324,6 +326,7 @@
   "Init Containers": "Contenedores de Inicialización",
   "Conditions": "Condiciones",
   "Volumes": "Volumenes",
+  "Kind": "Tipo",
   "Restarting {{ itemName }}…": "Reiniciando {{ itemName }}…",
   "Cancelled restarting {{ itemName }}.": "Se ha cancelado el reinicio de {{ itemName }}.",
   "Restarted {{ itemName }}.": "Se ha reiniciado {{ itemName }}.",
@@ -441,7 +444,6 @@
   "ParentRefs": "Referencias Padre",
   "No rules data to be shown.": "Sin datos de reglas",
   "Namespace": "Namespace",
-  "Kind": "Tipo",
   "Section Name": "Nombre de sección",
   "Press<1>/</1>to search": "Presione<1>/</1>para buscar",
   "Search resources, pages, clusters by name": "Buscar recursos, páginas, clusters por nombre",

frontend/src/i18n/locales/fr/translation.json

@@ -69,6 +69,8 @@
   "Load cluster": "Charger cluster",
   "Something went wrong with cluster {{ cluster }}": "Quelque chose s'est mal passé avec le cluster {{ cluster }}",
   "Choose another cluster": "Choisir un autre cluster",
+  "Failed to connect to the backend": "",
+  "Connecting to backend...": "",
   "Skip to main content": "Aller au contenu principal",
   "Menu": "",
   "Mark all as read": "Marquer toutes les notifications comme lues",
@@ -324,6 +326,7 @@
   "Init Containers": "Conteneurs d'initialisation",
   "Conditions": "Conditions",
   "Volumes": "Volumes",
+  "Kind": "",
   "Restarting {{ itemName }}…": "Redémarrage de {{ itemName }}…",
   "Cancelled restarting {{ itemName }}.": "Redémarrage de {{ itemName }} annulé.",
   "Restarted {{ itemName }}.": "{{ itemName }} redémarré.",
@@ -441,7 +444,6 @@
   "ParentRefs": "",
   "No rules data to be shown.": "Aucune donnée sur les règles à afficher.",
   "Namespace": "",
-  "Kind": "",
   "Section Name": "",
   "Press<1>/</1>to search": "",
   "Search resources, pages, clusters by name": "",

frontend/src/i18n/locales/hi/translation.json

@@ -69,6 +69,8 @@
   "Load cluster": "क्लस्टर लोड करें",
   "Something went wrong with cluster {{ cluster }}": "क्लस्टर {{ cluster }} के साथ कुछ गलत हुआ",
   "Choose another cluster": "दूसरा क्लस्टर चुनें",
+  "Failed to connect to the backend": "",
+  "Connecting to backend...": "",
   "Skip to main content": "मुख्य सामग्री पर जाएँ",
   "Menu": "",
   "Mark all as read": "सभी को पढ़ा हुआ चिह्नित करें",
@@ -322,6 +324,7 @@
   "Init Containers": "इनिट कंटेनर्स",
   "Conditions": "शर्तें",
   "Volumes": "वॉल्यूम्स",
+  "Kind": "",
   "Restarting {{ itemName }}…": "{{ itemName }} पुनरारंभ कर रहे हैं…",
   "Cancelled restarting {{ itemName }}.": "{{ itemName }} पुनरारंभ करना रद्द किया गया।",
   "Restarted {{ itemName }}.": "{{ itemName }} पुनरारंभ किया गया।",
@@ -438,7 +441,6 @@
   "ParentRefs": "",
   "No rules data to be shown.": "दिखाने के लिए कोई नियम डेटा नहीं है।",
   "Namespace": "",
-  "Kind": "",
   "Section Name": "",
   "Press<1>/</1>to search": "खोजने के लिए <1>/</1> दबाएँ",
   "Search resources, pages, clusters by name": "नाम से रिसोर्सेज़, पेजेज़ और क्लस्टर खोजें",

frontend/src/i18n/locales/it/translation.json

@@ -69,6 +69,8 @@
   "Load cluster": "Carica cluster",
   "Something went wrong with cluster {{ cluster }}": "Qualcosa è andato storto con il cluster {{ cluster }}",
   "Choose another cluster": "Scegli un altro cluster",
+  "Failed to connect to the backend": "",
+  "Connecting to backend...": "",
   "Skip to main content": "Salta al contenuto principale",
   "Menu": "",
   "Mark all as read": "Segna tutto come letto",
@@ -324,6 +326,7 @@
   "Init Containers": "Container di Avvio",
   "Conditions": "Condizioni",
   "Volumes": "Volume",
+  "Kind": "Kind",
   "Restarting {{ itemName }}…": "Riavvio di {{ itemName }}…",
   "Cancelled restarting {{ itemName }}.": "Riavvio di {{ itemName }} annullato.",
   "Restarted {{ itemName }}.": "{{ itemName }} riavviato.",
@@ -441,7 +444,6 @@
   "ParentRefs": "ParentRefs",
   "No rules data to be shown.": "Nessun dato sulle regole da mostrare.",
   "Namespace": "Namespace",
-  "Kind": "Kind",
   "Section Name": "Nome Sezione",
   "Press<1>/</1>to search": "Premi<1>/</1> per cercare",
   "Search resources, pages, clusters by name": "Cerca risorse, pagine, cluster per nome",

frontend/src/i18n/locales/ja/translation.json

@@ -69,6 +69,8 @@
   "Load cluster": "クラスターの読み込み",
   "Something went wrong with cluster {{ cluster }}": "クラスター {{ cluster }} で問題が発生しました",
   "Choose another cluster": "別のクラスターを選択",
+  "Failed to connect to the backend": "",
+  "Connecting to backend...": "",
   "Skip to main content": "メインコンテンツへスキップ",
   "Menu": "",
   "Mark all as read": "すべて既読にする",
@@ -320,6 +322,7 @@
   "Init Containers": "初期化コンテナー",
   "Conditions": "条件",
   "Volumes": "ボリューム",
+  "Kind": "種類",
   "Restarting {{ itemName }}…": "{{ itemName }} を再起動中…",
   "Cancelled restarting {{ itemName }}.": "{{ itemName }} の再起動をキャンセルしました。",
   "Restarted {{ itemName }}.": "{{ itemName }} を再起動しました。",
@@ -435,7 +438,6 @@
   "ParentRefs": "親参照",
   "No rules data to be shown.": "表示するルールデータがありません。",
   "Namespace": "ネームスペース",
-  "Kind": "種類",
   "Section Name": "セクション名",
   "Press<1>/</1>to search": "<1>/</1>キーを押して検索",
   "Search resources, pages, clusters by name": "名前でリソース、ページ、クラスターを検索",

frontend/src/i18n/locales/ko/translation.json

@@ -69,6 +69,8 @@
   "Load cluster": "클러스터 불러오기",
   "Something went wrong with cluster {{ cluster }}": "{{ cluster }} 클러스터에서 문제가 발생했습니다.",
   "Choose another cluster": "다른 클러스터 선택",
+  "Failed to connect to the backend": "",
+  "Connecting to backend...": "",
   "Skip to main content": "주요 콘텐츠로 건너뛰기",
   "Menu": "",
   "Mark all as read": "모두 읽은 것으로 표시",
@@ -320,6 +322,7 @@
   "Init Containers": "초기화 컨테이너",
   "Conditions": "상태",
   "Volumes": "볼륨",
+  "Kind": "종류",
   "Restarting {{ itemName }}…": "{{ itemName }} 재시작 중…",
   "Cancelled restarting {{ itemName }}.": "{{ itemName }} 재시작 취소됨.",
   "Restarted {{ itemName }}.": "{{ itemName }} 재시작됨.",
@@ -435,7 +438,6 @@
   "ParentRefs": "상위 참조",
   "No rules data to be shown.": "표시할 규칙 데이터가 없습니다.",
   "Namespace": "네임스페이스",
-  "Kind": "종류",
   "Section Name": "섹션 이름",
   "Press<1>/</1>to search": "검색하려면 <1>/</1>를 누르세요",
   "Search resources, pages, clusters by name": "이름으로 리소스, 페이지, 클러스터 검색",