feat: adds better disabled colors and loader while fetching big logs (#3816)

assets/components/LogViewer/LogAnalytics.vue

@@ -12,11 +12,14 @@
             v-model="query"
             class="textarea textarea-primary w-full font-mono text-lg"
             :class="{ 'textarea-error': error }"
+            :disabled="state !== 'ready'"
           ></textarea>
           <div class="mt-2">
             <span class="text-error" v-if="state === 'error'">{{ error }}</span>
             <span v-else-if="state === 'initializing'">{{ $t("analytics.creating_table") }}</span>
-            <span v-else-if="state === 'downloading'">{{ $t("analytics.downloading") }}</span>
+            <span v-else-if="state === 'downloading'">{{
+              $t("analytics.downloading", { size: formatBytes(bytes, { decimals: 1 }) })
+            }}</span>
             <span v-else-if="evaluating">{{ $t("analytics.evaluating_query") }}</span>
             <span v-else>
               {{ $t("analytics.total_records", { count: results.numRows.toLocaleString() }) }}
@@ -43,6 +46,7 @@ const debouncedQuery = debouncedRef(query, 500);
 const evaluating = ref(false);
 const pageLimit = 1000;
 const state = ref<"downloading" | "error" | "ready" | "initializing">("downloading");
+const bytes = ref(0);
 
 const url = withBase(
   `/api/hosts/${container.host}/containers/${container.id}/logs?stdout=1&stderr=1&everything&jsonOnly`,
@@ -61,7 +65,28 @@ const empty = await conn.query<Record<string, any>>(`SELECT 1 LIMIT 0`);
 onMounted(async () => {
   try {
     state.value = "downloading";
-    await db.registerFileBuffer("logs.json", new Uint8Array(await response.arrayBuffer()));
+
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error("No reader available from stream");
+
+    const chunks: Uint8Array[] = [];
+    bytes.value = 0;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+      bytes.value += value.length;
+    }
+
+    const arrayBuffer = new Uint8Array(bytes.value);
+    let position = 0;
+    for (const chunk of chunks) {
+      arrayBuffer.set(chunk, position);
+      position += chunk.length;
+    }
+
+    await db.registerFileBuffer("logs.json", arrayBuffer);
 
     state.value = "initializing";
     await conn.query(

locales/da.yml

@@ -116,7 +116,7 @@ toasts:
     message: Log kopieret til clipboard
 analytics:
   creating_table: Opretter midlertidig tabel...
-  downloading: Henter containerlogfiler...
+  downloading: Henter containerlogfiler... ({size})
   evaluating_query: Evaluerer forespørgsel...
   total_records: I alt {count} poster.
   showing_first: Viser de første {count}.

locales/de.yml

@@ -116,7 +116,7 @@ toasts:
     message: Log in Zwischenablage kopiert
 analytics:
   creating_table: Temporäre Tabelle wird erstellt...
-  downloading: Container-Logs werden abgerufen...
+  downloading: Container-Logs werden abgerufen... ({size})
   evaluating_query: Abfrage wird ausgewertet...
   total_records: Insgesamt {count} Datensätze.
   showing_first: Zeige die ersten {count}.

locales/en.yml

@@ -121,7 +121,7 @@ toasts:
     message: Log copied to clipboard
 analytics:
   creating_table: Creating temporary table...
-  downloading: Fetching containers logs...
+  downloading: Fetching container logs... ({size})
   evaluating_query: Evaluating query...
   total_records: Total {count} records.
   showing_first: Showing first {count}.

locales/es.yml

@@ -116,7 +116,7 @@ toasts:
     message: Registro copiado al portapapeles
 analytics:
   creating_table: Creando tabla temporal...
-  downloading: Obteniendo registros de contenedores...
+  downloading: Obteniendo registros de contenedores... ({size})
   evaluating_query: Evaluando consulta...
   total_records: Total {count} registros.
   showing_first: Mostrando los primeros {count}.

locales/fr.yml

@@ -116,7 +116,7 @@ toasts:
     message: Journal copié dans le presse-papiers
 analytics:
   creating_table: Création d'une table temporaire...
-  downloading: Récupération des journaux des conteneurs...
+  downloading: Récupération des journaux des conteneurs... ({size})
   evaluating_query: Évaluation de la requête...
   total_records: Total de {count} enregistrements.
   showing_first: Affichage des {count} premiers.

locales/it.yml

@@ -116,7 +116,7 @@ toasts:
     message: Log copiato nella clipboard
 analytics:
   creating_table: Creazione tabella temporanea...
-  downloading: Recupero dei log dei container...
+  downloading: Recupero dei log dei container... ({size})
   evaluating_query: Valutazione della query...
   total_records: Totale {count} record.
   showing_first: Mostrati i primi {count}.

locales/pl.yml

@@ -116,7 +116,7 @@ toasts:
     message: Log skopiowany do schowka
 analytics:
   creating_table: Tworzenie tymczasowej tabeli...
-  downloading: Pobieranie logów kontenerów...
+  downloading: Pobieranie logów kontenerów... ({size})
   evaluating_query: Przetwarzanie zapytania...
   total_records: Razem {count} rekordów.
   showing_first: Pokazywanie pierwszych {count}.

locales/pr.yml

@@ -112,7 +112,7 @@ settings:
 
 analytics:
   creating_table: A criar tabela temporária...
-  downloading: A obter registos dos contentores...
+  downloading: A obter registos dos contentores... ({size})
   evaluating_query: A avaliar consulta...
   total_records: Total de {count} registos.
   showing_first: A mostrar os primeiros {count}.

locales/pt.yml

@@ -116,7 +116,7 @@ toasts:
     message: Log copiado para a área de transferência
 analytics:
   creating_table: Criando tabela temporária...
-  downloading: Buscando logs dos containers...
+  downloading: Buscando logs dos containers... ({size})
   evaluating_query: Avaliando consulta...
   total_records: Total de {count} registros.
   showing_first: Mostrando os primeiros {count}.

locales/ru.yml

@@ -116,7 +116,7 @@ toasts:
     message: Log copied to clipboard
 analytics:
   creating_table: Создание временной таблицы...
-  downloading: Получение логов контейнеров...
+  downloading: Получение логов контейнеров... ({size})
   evaluating_query: Выполнение запроса...
   total_records: Всего {count} записей.
   showing_first: Показаны первые {count}.

locales/tr.yml

@@ -109,7 +109,7 @@ toasts:
     message: Günlük panoya kopyalandı
 analytics:
   creating_table: Geçici tablo oluşturuluyor...
-  downloading: Konteyner günlükleri alınıyor...
+  downloading: Konteyner günlükleri alınıyor... ({size})
   evaluating_query: Sorgu değerlendiriliyor...
   total_records: Toplam {count} kayıt.
   showing_first: İlk {count} gösteriliyor.

locales/zh-tw.yml

@@ -119,7 +119,7 @@ toasts:
     message: 日誌已複製到剪貼簿
 analytics:
   creating_table: 正在建立臨時資料表...
-  downloading: 正在取得容器日誌...
+  downloading: 正在取得容器日誌... ({size})
   evaluating_query: 正在評估查詢...
   total_records: 共計 {count} 筆記錄。
   showing_first: 顯示前 {count} 筆。

locales/zh.yml

@@ -116,7 +116,7 @@ toasts:
     message: 日志已复制到剪贴板
 analytics:
   creating_table: 正在创建临时表...
-  downloading: 正在获取容器日志...
+  downloading: 正在获取容器日志... ({size})
   evaluating_query: 正在评估查询...
   total_records: 总共 {count} 条记录。
   showing_first: 显示前 {count} 条。