Transform logs into array in store

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/pod-logs.store.ts

@@ -5,7 +5,6 @@ import { DockTabStore } from "./dock-tab.store";
 import { dockStore, IDockTab, TabKind } from "./dock.store";
 import { t } from "@lingui/macro";
 import { _i18n } from "../../i18n";
-import { Notifications } from "../notifications";
 import { isDevelopment } from "../../../common/vars";
 
 export interface IPodLogsData {
@@ -18,7 +17,7 @@ export interface IPodLogsData {
 }
 
 type TabId = string;
-type PodLogs = string;
+type PodLogLine = string;
 
 // Number for log lines to load
 export const logRange = isDevelopment ? 100 : 1000;
@@ -31,7 +30,7 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
     this.loadMore(id)
   });
 
-  @observable logs = observable.map<TabId, PodLogs>();
+  @observable logs = observable.map<TabId, PodLogLine[]>();
   @observable newLogSince = observable.map<TabId, string>(); // Timestamp after which all logs are considered to be new
 
   constructor() {
@@ -64,13 +63,13 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
       const logs = await this.loadLogs(tabId, {
         tailLines: this.lines + logRange
       });
-      if (!this.refresher.isRunning) this.refresher.start();
+      this.refresher.start();
       this.logs.set(tabId, logs);
     } catch ({error}) {
       const message = [
         _i18n._(t`Failed to load logs: ${error.message}`),
         _i18n._(t`Reason: ${error.reason} (${error.code})`)
-      ].join("\n");
+      ];
       this.refresher.stop();
       this.logs.set(tabId, message);
     }
@@ -88,7 +87,7 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
       sinceTime: this.getLastSinceTime(tabId)
     });
     // Add newly received logs to bottom
-    this.logs.set(tabId, oldLogs + logs);
+    this.logs.set(tabId, [...oldLogs, ...logs]);
   }
 
   /**
@@ -104,11 +103,15 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
     const pod = new Pod(data.pod);
     const namespace = pod.getNs();
     const name = pod.getName();
-    return await podsApi.getLogs({ namespace, name }, {
+    return podsApi.getLogs({ namespace, name }, {
       ...params,
       timestamps: true,  // Always setting timestampt to separate old logs from new ones
       container: selectedContainer.name,
       previous
+    }).then(result => {
+      const logs = [...result.split("\n")]; // Transform them into array
+      logs.pop();  // Remove last empty element
+      return logs;
     });
   }
 
@@ -130,7 +133,7 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
   get lines() {
     const id = dockStore.selectedTabId;
     const logs = this.logs.get(id);
-    return logs ? logs.split("\n").length : 0;
+    return logs ? logs.length : 0;
   }
 
   /**
@@ -139,7 +142,7 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
    * @param tabId
    */
   getLastSinceTime(tabId: TabId) {
-    const timestamps = this.getTimestamps(this.logs.get(tabId));
+    const timestamps = this.getTimestamps(this.logs.get(tabId).join("\n"));
     let stamp = new Date(0);
     if (timestamps) {
       stamp = new Date(timestamps.slice(-1)[0]);

src/renderer/components/dock/pod-logs.tsx

@@ -80,7 +80,7 @@ export class PodLogs extends React.Component<Props> {
    * scrolling position
    * @param scrollHeight previous scrollHeight position before adding new lines
    */
-  preload = async (scrollHeight: number) => {
+  loadMore = async (scrollHeight: number) => {
     if (podLogsStore.lines < logRange) return;
     this.preloading = true;
     await podLogsStore.load(this.tabId).then(() => this.preloading = false);
@@ -101,19 +101,21 @@ export class PodLogs extends React.Component<Props> {
     const logs = podLogsStore.logs.get(this.tabId);
     const { getData, removeTimestamps, newLogSince } = podLogsStore;
     const { showTimestamps } = getData(this.tabId);
-    let oldLogs = logs;
-    let newLogs = "";
+    let oldLogs: string[] = logs;
+    let newLogs: string[] = [];
     if (newLogSince.has(this.tabId)) {
       // Finding separator timestamp in logs
-      const index = logs.indexOf(newLogSince.get(this.tabId));
+      const index = logs.findIndex(item => item.includes(newLogSince.get(this.tabId)));
       if (index !== -1) {
         // Splitting logs to old and new ones
-        oldLogs = logs.substring(0, index);
-        newLogs = logs.substring(index);
+        oldLogs = logs.slice(0, index);
+        newLogs = logs.slice(index);
+
+
       }
     }
     if (!showTimestamps) {
-      return [removeTimestamps(oldLogs), removeTimestamps(newLogs)];
+      return [oldLogs, newLogs].map(logs => logs.map(item => removeTimestamps(item)))
     }
     return [oldLogs, newLogs];
   }
@@ -135,7 +137,7 @@ export class PodLogs extends React.Component<Props> {
     const toBottomOffset = 100 * 16; // 100 lines * 16px (height of each line)
     const { scrollHeight, clientHeight, scrollTop } = logsArea;
     if (scrollTop === 0) {
-      this.preload(scrollHeight);
+      this.loadMore(scrollHeight);
     }
     if (scrollHeight - scrollTop > toBottomOffset) {
       this.showJumpToBottom = true;
@@ -149,7 +151,7 @@ export class PodLogs extends React.Component<Props> {
     const { pod, selectedContainer } = this.tabData;
     const fileName = selectedContainer ? selectedContainer.name : pod.getName();
     const [oldLogs, newLogs] = this.logs;
-    downloadFile(fileName + ".log", oldLogs + newLogs, "text/plain");
+    downloadFile(fileName + ".log", [...oldLogs, ...newLogs].join("\n"), "text/plain");
   }
 
   onContainerChange = (option: SelectOption) => {
@@ -208,7 +210,7 @@ export class PodLogs extends React.Component<Props> {
   renderControls() {
     if (!this.ready) return null;
     const { selectedContainer, showTimestamps, previous } = this.tabData;
-    const timestamps = podLogsStore.getTimestamps(podLogsStore.logs.get(this.tabId));
+    const timestamps = podLogsStore.getTimestamps(podLogsStore.logs.get(this.tabId).join("\n"));
     return (
       <div className="controls flex gaps align-center">
         <span><Trans>Container</Trans></span>
@@ -255,7 +257,7 @@ export class PodLogs extends React.Component<Props> {
     if (!this.ready) {
       return <Spinner center/>;
     }
-    if (!oldLogs && !newLogs) {
+    if (!oldLogs.length && !newLogs.length) {
       return (
         <div className="flex align-center justify-center">
           <Trans>There are no logs available for container.</Trans>
@@ -269,11 +271,11 @@ export class PodLogs extends React.Component<Props> {
             <Spinner />
           </div>
         )}
-        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(oldLogs))}} />
-        {newLogs && (
+        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(oldLogs.join("\n"))) }} />
+        {newLogs.length > 0 && (
           <>
             <p className="new-logs-sep" title={_i18n._(t`New logs since opening the dialog`)}/>
-            <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(newLogs))}} />
+            <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(newLogs.join("\n"))) }} />
           </>
         )}
       </>