From 8db19757bde8c0fd02a71d0a9255db63b5a1b462 Mon Sep 17 00:00:00 2001
From: LbP22 <aakopyan@devforth.io>
Date: Thu, 2 May 2024 13:57:08 +0300
Subject: [PATCH] init loader for logs  search

---
 application/frontend/src/Stores/stores.js     |  1 +
 .../frontend/src/Views/Logs/Loader.svelte     | 56 +++++++++++++++++++
 .../frontend/src/Views/Logs/NewLogsV2.svelte  | 34 +++++++----
 3 files changed, 81 insertions(+), 10 deletions(-)
 create mode 100644 application/frontend/src/Views/Logs/Loader.svelte

diff --git a/application/frontend/src/Stores/stores.js b/application/frontend/src/Stores/stores.js
index ee7b588..f47e58b 100644
--- a/application/frontend/src/Stores/stores.js
+++ b/application/frontend/src/Stores/stores.js
@@ -81,6 +81,7 @@ export const urlHash = writable("");
 //cancel fetch (for bed connection)
 
 export const isFeatching = writable(false);
+export const isSearching = writable(false);
 
 //status for serching logs by status
 
diff --git a/application/frontend/src/Views/Logs/Loader.svelte b/application/frontend/src/Views/Logs/Loader.svelte
new file mode 100644
index 0000000..420bba9
--- /dev/null
+++ b/application/frontend/src/Views/Logs/Loader.svelte
@@ -0,0 +1,56 @@
+<span class="loader"></span>
+
+<style>
+    .loader {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  left: -32px;
+  border-radius: 50%;
+  color: #fff;
+  background: currentColor;
+  box-shadow: 32px 0 , -32px 0 ,  64px 0;
+}
+.loader::after {
+  content: '';
+  position: absolute;
+  left: -32px;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 10px;
+  background: #c244db;
+  animation: move 3s linear infinite alternate;
+}
+@keyframes move {
+  0% , 5%{
+    left: -32px;
+    width: 16px;
+  }
+  15% , 20%{
+    left: -32px;
+    width: 48px;
+  }
+  30% , 35%{
+    left: 0px;
+    width: 16px;
+  }
+  45% , 50%{
+    left: 0px;
+    width: 48px;
+  }
+  60% , 65%{
+    left: 32px;
+    width: 16px;
+  }
+
+  75% , 80% {
+    left: 32px;
+    width: 48px;
+  }
+  95%, 100% {
+    left: 64px;
+    width: 16px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/application/frontend/src/Views/Logs/NewLogsV2.svelte b/application/frontend/src/Views/Logs/NewLogsV2.svelte
index 9d99e11..555196b 100644
--- a/application/frontend/src/Views/Logs/NewLogsV2.svelte
+++ b/application/frontend/src/Views/Logs/NewLogsV2.svelte
@@ -8,6 +8,7 @@
   import LogsViewHeder from "./LogsViewHeder/LogsViewHeder.svelte";
   import IntersectionObserver from "svelte-intersection-observer";
   import Spiner from "./Spiner.svelte";
+  import Loader from "./Loader.svelte";
   import LogStringHeader from "./LogStringHeader.svelte";
   import { fade } from "svelte/transition";
   import { handleKeydown, copyCustomText } from "../../utils/functions.js";
@@ -26,6 +27,7 @@
     isPending,
     urlHash,
     isFeatching,
+    isSearching,
     chosenStatus,
     WSisMuted,
     manuallyUnmuted,
@@ -140,6 +142,7 @@
       let last_key = "";
       let is_all_logs_processed = false;
       while (total_logs_amount < limit && !is_all_logs_processed) {
+        isSearching.set(true);
         let data = await api.getLogs({
             containerName: $lastChosenService,
             hostName: $lastChosenHost,
@@ -164,6 +167,7 @@
             previousLogs = allLogsCopy.splice(0, limit);
         }
       }
+      isSearching.set(false);
       isPending.set(false);
       autoscroll = true;
       pauseWS = false;
@@ -442,15 +446,16 @@
           let is_all_logs_processed = false;
           let last_key = customStartWith ? customStartWith : customStartWith === 0 ? "" : allLogs.at(0)?.at(0);
           while (limit < total_logs_amount && !is_all_logs_processed) {
-                const data = (await getLogs({
-                containerName: $lastChosenService,
-                search: searchText,
-                limit,
-                status: $chosenStatus,
-                caseSens: !$store.caseInSensitive,
-                startWith: last_key,
-                hostName: $lastChosenHost,
-                signal,
+            isSearching.set(true);
+            const data = (await getLogs({
+              containerName: $lastChosenService,
+              search: searchText,
+              limit,
+              status: $chosenStatus,
+              caseSens: !$store.caseInSensitive,
+              startWith: last_key,
+              hostName: $lastChosenHost,
+              signal,
             })).logs.reverse();
             total_logs = [...total_logs, ...data];
             total_logs_amount += data.length;
@@ -491,6 +496,7 @@
                 }
                 
             }
+          isSearching.set(false);
         } 
           lastFetchActionIsFetch = true;
           return total_logs;
@@ -523,6 +529,7 @@
       let last_key = customStartWith ? customStartWith : customStartWith === 0 ? "" : allLogs.at(0)?.at(0);
         
       while (limit > total_received_logs_count && !is_all_logs_processed) {
+        isSearching.set(true);
         const data = await getLogs({
           containerName: $lastChosenService,
           search: searchText,
@@ -538,6 +545,7 @@
         total_received_logs_count += data.logs.length;
         total_logs = [...total_logs, ...data.logs.reverse()];
       }
+      isSearching.set(false);
       isFeatching.set(false);
 
       if (initialService === $lastChosenService) {
@@ -567,6 +575,7 @@
         let total_received_logs_count = 0;
         let is_all_logs_processed = false;
         while (total_received_logs_count < limit && !is_all_logs_processed) {
+          isSearching.set(true);
           const data = await getPrevLogs({
             containerName: $lastChosenService,
             search: searchText,
@@ -581,6 +590,7 @@
           last_key = data.last_processed_key;
           total_logs = [...total_logs, ...data.logs];
         }
+        isSearching.set(false);
         isFeatching.set(false);
         if (initialService === $lastChosenService) {
             if (total_logs.length) {
@@ -772,6 +782,11 @@
   <div id="logs" class="logs" bind:this={div}>
     <div class="logsTableContainer">
       <table class="logsTable {$store.breakLines ? 'breakLines' : ''}">
+        {#if $isSearching}
+        <div style="left: 50%; top: 50%; padding-bottom: 10px;" class="flex">
+          <Loader />
+        </div>
+        {/if}
         <div id="startOfLogs" />
         <IntersectionObserver
           element={startOfLogs}
@@ -779,7 +794,6 @@
         >
           <div id="startOfLogs" bind:this={startOfLogs} />
         </IntersectionObserver>
-
         {#each allLogs as logItem, i}
           {#if transformLogStringForTimeBudget(logItem, $store.UTCtime) !== transformLogStringForTimeBudget(allLogs[i - 1], $store.UTCtime) && i - 1 >= 0}
             <div class="timeBudgeContainer">