feat: show no logs view when opening logs tab and waiting for logs to being fetched (#1117) (#1353)

* feat:  show no logs page when waiting for logs

Signed-off-by: luca <lstocchi@redhat.com>

packages/renderer/src/lib/ContainerDetailsLogs.svelte

@@ -9,6 +9,8 @@ import { TerminalSettings } from '../../../main/src/plugin/terminal-settings';
 import { getPanelDetailColor } from './color/color';
 
 import { isMultiplexedLog } from './stream/stream-utils';
+import EmptyScreen from './ui/EmptyScreen.svelte';
+import NoLogIcon from './ui/NoLogIcon.svelte';
 
 export let container: ContainerInfoUI;
 
@@ -16,7 +18,6 @@ export let container: ContainerInfoUI;
 let logsXtermDiv: HTMLDivElement;
 let logsContainer;
 // logs has been initialized
-let logsReady = false;
 let noLogs = true;
 
 // Terminal resize
@@ -42,7 +43,6 @@ function callback(name: string, data: string) {
     logsTerminal?.clear();
   } else if (name === 'data') {
     noLogs = false;
-
     if (isMultiplexedLog(data)) {
       logsTerminal?.write(data.substring(8) + '\r');
     } else {
@@ -54,7 +54,6 @@ function callback(name: string, data: string) {
 async function fetchContainerLogs() {
   // grab logs of the container
   await window.logsContainer(container.engineId, container.id, callback);
-  logsReady = true;
 }
 
 async function refreshTerminal() {
@@ -84,6 +83,7 @@ async function refreshTerminal() {
   logsTerminal.loadAddon(termFit);
 
   logsTerminal.open(logsXtermDiv);
+
   // disable cursor
   logsTerminal.write('\x1b[?25l');
 
@@ -115,27 +115,18 @@ onDestroy(() => {
 });
 </script>
 
-{#if logsReady}
-  <div
-    class="h-full min-w-full flex flex-col"
-    class:hidden="{noLogs === false}"
-    style="background-color: {getPanelDetailColor()}">
-    <div class="pf-c-empty-state h-full">
-      <div class="pf-c-empty-state__content">
-        <i class="fas fa-terminal pf-c-empty-state__icon" aria-hidden="true"></i>
-
-        <h1 class="pf-c-title pf-m-lg">No Log</h1>
-
-        <div class="pf-c-empty-state__body">Log output of {container.name}</div>
-      </div>
-    </div>
-  </div>
-{/if}
+<EmptyScreen
+  icon="{NoLogIcon}"
+  title="No Log"
+  message="Log output of {container.name}"
+  hidden="{noLogs === false}"
+  style="background-color: {getPanelDetailColor()}" />
 
 <div
-  class="flex flex-col"
-  style="background-color: {getPanelDetailColor()}"
+  class="min-w-full flex flex-col"
+  class:invisible="{noLogs === true}"
+  class:h-0="{noLogs === true}"
   class:h-full="{noLogs === false}"
-  class:min-w-full="{noLogs === false}"
+  style="background-color: {getPanelDetailColor()}"
   bind:this="{logsXtermDiv}">
 </div>

packages/renderer/src/lib/pod/PodDetailsLogs.svelte

@@ -8,6 +8,8 @@ import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings'
 import { getPanelDetailColor } from '../color/color';
 import type { PodInfoUI } from './PodInfoUI';
 import { isMultiplexedLog } from '../stream/stream-utils';
+import EmptyScreen from '../ui/EmptyScreen.svelte';
+import NoLogIcon from '../ui/NoLogIcon.svelte';
 
 export let pod: PodInfoUI;
 
@@ -15,7 +17,6 @@ export let pod: PodInfoUI;
 let logsXtermDiv: HTMLDivElement;
 
 // Logs has been initialized
-let logsReady = false;
 let noLogs = true;
 let logsTerminal: Terminal;
 
@@ -100,9 +101,8 @@ async function fetchPodLogs() {
       callback(name, `${colouredName} ${padding} | ${content}`);
     };
 
-    // Get the logs for the container and set logsReady as true
+    // Get the logs for the container
     await window.logsContainer(pod.engineId, container.Id, logsCallback);
-    logsReady = true;
   });
 }
 
@@ -166,27 +166,18 @@ onDestroy(() => {
 });
 </script>
 
-{#if logsReady}
-  <div
-    class="h-full min-w-full flex flex-col"
-    class:hidden="{noLogs === false}"
-    style="background-color: {getPanelDetailColor()}">
-    <div class="pf-c-empty-state h-full">
-      <div class="pf-c-empty-state__content">
-        <i class="fas fa-terminal pf-c-empty-state__icon" aria-hidden="true"></i>
-
-        <h1 class="pf-c-title pf-m-lg">No Log</h1>
-
-        <div class="pf-c-empty-state__body">Log output of Pod {pod.name}</div>
-      </div>
-    </div>
-  </div>
-{/if}
+<EmptyScreen
+  icon="{NoLogIcon}"
+  title="No Log"
+  message="Log output of Pod {pod.name}"
+  hidden="{noLogs === false}"
+  style="background-color: {getPanelDetailColor()}" />
 
 <div
-  class="flex flex-col"
-  style="background-color: {getPanelDetailColor()}"
+  class="min-w-full flex flex-col"
+  class:invisible="{noLogs === true}"
+  class:h-0="{noLogs === true}"
   class:h-full="{noLogs === false}"
-  class:min-w-full="{noLogs === false}"
+  style="background-color: {getPanelDetailColor()}"
   bind:this="{logsXtermDiv}">
 </div>

packages/renderer/src/lib/ui/EmptyScreen.svelte

@@ -8,6 +8,7 @@ export let title: string = 'No title';
 export let message: string = 'Message';
 export let commandline: string = '';
 export let hidden: boolean = false;
+export let style: string = '';
 
 let fontAwesomeIcon = false;
 let processed = false;
@@ -27,7 +28,7 @@ function copyRunInstructionToClipboard() {
 let copyTextDivElement: HTMLDivElement;
 </script>
 
-<div class="h-full min-w-full flex flex-col" class:hidden="{hidden}">
+<div class="h-full min-w-full flex flex-col" class:hidden="{hidden}" style="{style}">
   <div class="pf-c-empty-state h-full">
     <div class="pf-c-empty-state__content">
       <p class="pf-c-empty-state__body">

packages/renderer/src/lib/ui/NoLogIcon.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+export let size: string = '40';
+</script>
+
+<svg
+  width="{size}"
+  height="{size}"
+  class="{$$props.class}"
+  style="{$$props.style}"
+  aria-hidden="true"
+  data-prefix="far"
+  data-icon="terminal"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 640 512">
+  <path
+    fill="currentColor"
+    d="M41.678 38.101l209.414 209.414c4.686 4.686 4.686 12.284 0 16.971L41.678 473.899c-4.686 4.686-12.284 4.686-16.971 0L4.908 454.101c-4.686-4.686-4.686-12.284 0-16.971L185.607 256 4.908 74.87c-4.686-4.686-4.686-12.284 0-16.971L24.707 38.1c4.686-4.686 12.284-4.686 16.971.001zM640 468v-28c0-6.627-5.373-12-12-12H300c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h328c6.627 0 12-5.373 12-12z"
+    class="">
+  </path>
+</svg>