Moving logs load and properties into store

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

src/renderer/components/+workloads-pods/pod-menu.tsx

@@ -42,9 +42,14 @@ export class PodMenu extends React.Component<Props> {
   }
 
   showLogs(container: IPodContainer) {
+    const pod = this.props.object;
     createPodLogsTab({
-      pod: this.props.object,
+      pod,
-      container
+      containers: pod.getContainers(),
+      initContainers: pod.getInitContainers(),
+      selectedContainer: container,
+      showTimestamps: false,
+      tailLines: 1000
     });
   }
 

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

@@ -1,15 +1,94 @@
-import { Pod, IPodContainer } from "../../api/endpoints";
+import { observable } from "mobx";
+import { Pod, IPodContainer, podsApi } from "../../api/endpoints";
 import { autobind } from "../../utils";
 import { DockTabStore } from "./dock-tab.store";
 import { dockStore, IDockTab, TabKind } from "./dock.store";
+import { t } from "@lingui/macro";
+import { _i18n } from "../../i18n";
 
 export interface IPodLogsData {
   pod: Pod;
-  container: IPodContainer;
+  selectedContainer: IPodContainer
+  containers: IPodContainer[]
+  initContainers: IPodContainer[]
+  showTimestamps: boolean
+  tailLines: number
+}
+
+type TabId = string;
+
+interface PodLogs {
+  oldLogs: string
+  newLogs: string
 }
 
 @autobind()
 export class PodLogsStore extends DockTabStore<IPodLogsData> {
+  @observable logs = observable.map<TabId, PodLogs>();
+
+  constructor() {
+    super({
+      storageName: "pod_logs"
+    });
+  }
+
+  load = async (tabId: TabId) => {
+    if (!this.logs.has(tabId)) {
+      this.logs.set(tabId, { oldLogs: "", newLogs: "" })
+    }
+    const data = this.getData(tabId);
+    const { oldLogs, newLogs } = this.logs.get(tabId);
+    const { selectedContainer, tailLines } = data;
+    const pod = new Pod(data.pod);
+    try {
+      // if logs already loaded, check the latest timestamp for getting updates only from this point
+      const logsTimestamps = this.getTimestamps(newLogs || oldLogs);
+      let lastLogDate = new Date(0);
+      if (logsTimestamps) {
+        lastLogDate = new Date(logsTimestamps.slice(-1)[0]);
+        lastLogDate.setSeconds(lastLogDate.getSeconds() + 1); // avoid duplicates from last second
+      }
+      const namespace = pod.getNs();
+      const name = pod.getName();
+      const loadedLogs = await podsApi.getLogs({ namespace, name }, {
+        sinceTime: lastLogDate.toISOString(),
+        timestamps: true,  // Always setting timestampt to separate old logs from new ones
+        container: selectedContainer.name,
+        tailLines: tailLines,
+      });
+      if (!oldLogs) {
+        this.update(tabId, loadedLogs);
+      }
+      else if (oldLogs) {
+        this.update(tabId, "", `${newLogs}\n${loadedLogs}`.trim());
+      }
+    } catch (error) {
+      this.update(tabId, [
+        _i18n._(t`Failed to load logs: ${error.message}`),
+        _i18n._(t`Reason: ${error.reason} (${error.code})`),
+      ].join("\n"));
+    }
+  }
+
+  update(tabId: TabId, oldLogs?: string, newLogs?: string) {
+    const logs = this.logs.get(tabId);
+    this.logs.set(tabId, {
+      oldLogs: oldLogs || logs.oldLogs,
+      newLogs: newLogs || logs.newLogs
+    });
+  }
+
+  getTimestamps(logs: string) {
+    return logs.match(/^\d+\S+/gm);
+  }
+
+  removeTimestamps(logs: string) {
+    return logs.replace(/^\d+.*?\s/gm, "");
+  }
+
+  clearLogs(tabId: TabId) {
+    this.logs.delete(tabId);
+  }
 }
 
 export const podLogsStore = new PodLogsStore();

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

@@ -3,17 +3,16 @@ import React from "react";
 import AnsiUp from "ansi_up";
 import DOMPurify from "dompurify";
 import { t, Trans } from "@lingui/macro";
-import { observable } from "mobx";
+import { computed, observable, reaction } from "mobx";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { _i18n } from "../../i18n";
-import { IPodContainer, podsApi } from "../../api/endpoints";
+import { autobind, cssNames, downloadFile } from "../../utils";
-import { cssNames, downloadFile, interval } from "../../utils";
 import { Icon } from "../icon";
 import { Select, SelectOption } from "../select";
 import { Spinner } from "../spinner";
 import { IDockTab } from "./dock.store";
 import { InfoPanel } from "./info-panel";
-import { podLogsStore } from "./pod-logs.store";
+import { IPodLogsData, podLogsStore } from "./pod-logs.store";
 
 interface Props {
   className?: string
@@ -22,17 +21,9 @@ interface Props {
 
 @observer
 export class PodLogs extends React.Component<Props> {
-  @observable logs = ""; // latest downloaded logs for pod
-  @observable newLogs = ""; // new logs since dialog is open
   @observable ready = false;
-  @observable selectedContainer: IPodContainer;
-  @observable showTimestamps = false;
-  @observable tailLines = 1000;
 
   private logsElement: HTMLDivElement;
-  private refresher = interval(5, () => this.load());
-  private containers: IPodContainer[] = []
-  private initContainers: IPodContainer[] = []
   private lastLineIsShown = true; // used for proper auto-scroll content after refresh
   private colorConverter = new AnsiUp();
   private lineOptions = [
@@ -40,11 +31,14 @@ export class PodLogs extends React.Component<Props> {
     { label: 1000, value: 1000 },
     { label: 10000, value: 10000 },
     { label: 100000, value: 100000 },
-  ]
+  ];
 
-  componentDidMount() {
+  @disposeOnUnmount
-    this.onOpen();
+  updateLogsTabChange = reaction(() => this.props.tab.id, async () => {
-  }
+    this.ready = false;
+    await podLogsStore.load(this.tabId);
+    this.ready = true;
+  }, { fireImmediately: true });
 
   componentDidUpdate() {
     // scroll logs only when it's already in the end,
@@ -55,80 +49,41 @@ export class PodLogs extends React.Component<Props> {
   }
 
   get tabData() {
-    return podLogsStore.getData(this.props.tab.id);
+    return podLogsStore.getData(this.tabId);
   }
 
-  onOpen = async () => {
+  get tabId() {
-    const { pod, container } = this.tabData;
+    return this.props.tab.id;
-    this.containers = pod.getContainers();
-    this.initContainers = pod.getInitContainers();
-    this.selectedContainer = container || this.containers[0];
-    await this.load();
-    this.refresher.start();
   }
 
-  load = async () => {
+  @autobind()
-    const data = this.tabData;
+  save(data: Partial<IPodLogsData>) {
-    if (!data) return;
+    podLogsStore.setData(this.tabId, { ...this.tabData, ...data });
-    try {
-      // if logs already loaded, check the latest timestamp for getting updates only from this point
-      const logsTimestamps = this.getTimestamps(this.newLogs || this.logs);
-      let lastLogDate = new Date(0)
-      if (logsTimestamps) {
-        lastLogDate = new Date(logsTimestamps.slice(-1)[0]);
-        lastLogDate.setSeconds(lastLogDate.getSeconds() + 1); // avoid duplicates from last second
-      }
-      const namespace = data.pod.getNs();
-      const name = data.pod.getName();
-      const logs = await podsApi.getLogs({ namespace, name }, {
-        timestamps: true,
-        container: this.selectedContainer?.name,
-        tailLines: this.tailLines ? this.tailLines : undefined,
-        sinceTime: lastLogDate.toISOString(),
-      });
-      if (!this.logs) {
-        this.logs = logs;
-      }
-      else if (logs) {
-        this.newLogs = `${this.newLogs}\n${logs}`.trim();
-      }
-    } catch (error) {
-      this.logs = [
-        _i18n._(t`Failed to load logs: ${error.message}`),
-        _i18n._(t`Reason: ${error.reason} (${error.code})`),
-      ].join("\n")
-    }
-    this.ready = true;
   }
 
   reload = async () => {
-    this.logs = "";
+    const { clearLogs, load } = podLogsStore;
-    this.newLogs = "";
     this.lastLineIsShown = true;
     this.ready = false;
-    this.refresher.stop();
+    clearLogs(this.tabId);
-    await this.load();
+    await load(this.tabId);
-    this.refresher.start();
+    this.ready = true;
   }
 
-  getLogs() {
+  @computed
-    const { logs, newLogs, showTimestamps } = this;
+  get logs() {
+    if (!podLogsStore.logs.has(this.tabId)) return;
+    const { oldLogs, newLogs } = podLogsStore.logs.get(this.tabId);
+    const { getData, removeTimestamps } = podLogsStore;
+    const { showTimestamps } = getData(this.tabId);
     return {
-      logs: showTimestamps ? logs : this.removeTimestamps(logs),
+      oldLogs: showTimestamps ? oldLogs : removeTimestamps(oldLogs),
-      newLogs: showTimestamps ? newLogs : this.removeTimestamps(newLogs),
+      newLogs: showTimestamps ? newLogs : removeTimestamps(newLogs)
     }
   }
 
-  getTimestamps(logs: string) {
-    return logs.match(/^\d+\S+/gm);
-  }
-
-  removeTimestamps(logs: string) {
-    return logs.replace(/^\d+.*?\s/gm, "");
-  }
-
   toggleTimestamps = () => {
-    this.showTimestamps = !this.showTimestamps;
+    this.save({ showTimestamps: !this.tabData.showTimestamps });
   }
 
   onScroll = (evt: React.UIEvent<HTMLDivElement>) => {
@@ -138,36 +93,40 @@ export class PodLogs extends React.Component<Props> {
   };
 
   downloadLogs = () => {
-    const { logs, newLogs } = this.getLogs();
+    const { oldLogs, newLogs } = this.logs;
-    const podName = this.tabData.pod.getName();
+    const { pod, selectedContainer } = this.tabData;
-    const fileName = this.selectedContainer ? this.selectedContainer.name : podName;
+    const fileName = selectedContainer ? selectedContainer.name : pod.getName();
-    const fileContents = logs + newLogs;
+    const fileContents = oldLogs + newLogs;
     downloadFile(fileName + ".log", fileContents, "text/plain");
   }
 
   onContainerChange = (option: SelectOption) => {
-    this.selectedContainer = this.containers
+    const { containers, initContainers } = this.tabData;
-      .concat(this.initContainers)
+    this.save({
-      .find(container => container.name === option.value);
+      selectedContainer: containers
+        .concat(initContainers)
+        .find(container => container.name === option.value)
+    })
     this.reload();
   }
 
   onTailLineChange = (option: SelectOption) => {
-    this.tailLines = option.value;
+    this.save({ tailLines: option.value })
     this.reload();
   }
 
   get containerSelectOptions() {
+    const { containers, initContainers } = this.tabData;
     return [
       {
         label: _i18n._(t`Containers`),
-        options: this.containers.map(container => {
+        options: containers.map(container => {
           return { value: container.name }
         }),
       },
       {
         label: _i18n._(t`Init Containers`),
-        options: this.initContainers.map(container => {
+        options: initContainers.map(container => {
           return { value: container.name }
         }),
       }
@@ -181,30 +140,29 @@ export class PodLogs extends React.Component<Props> {
 
   renderControls() {
     if (!this.ready) return null;
-    const timestamps = this.getTimestamps(this.logs + this.newLogs);
+    const { selectedContainer, showTimestamps, tailLines } = this.tabData;
+    const timestamps = podLogsStore.getTimestamps(podLogsStore.logs.get(this.tabId).oldLogs);
     return (
       <div className="controls flex gaps align-center">
         <span><Trans>Container</Trans></span>
         <Select
           options={this.containerSelectOptions}
-          value={{ value: this.selectedContainer.name }}
+          value={{ value: selectedContainer.name }}
           formatOptionLabel={this.formatOptionLabel}
           onChange={this.onContainerChange}
           autoConvertOptions={false}
         />
         <span><Trans>Lines</Trans></span>
         <Select
-          value={this.tailLines}
+          value={tailLines}
           options={this.lineOptions}
           onChange={this.onTailLineChange}
         />
         <div className="time-range">
           {timestamps && (
             <>
-              <Trans>From</Trans>{" "}
+              <Trans>Since</Trans>{" "}
-              <b>{new Date(timestamps[0]).toLocaleString()}</b>{" "}
+              <b>{new Date(timestamps[0]).toLocaleString()}</b>
-              <Trans>to</Trans>{" "}
-              <b>{new Date(timestamps[timestamps.length - 1]).toLocaleString()}</b>
             </>
           )}
         </div>
@@ -212,8 +170,8 @@ export class PodLogs extends React.Component<Props> {
           <Icon
             material="av_timer"
             onClick={this.toggleTimestamps}
-            className={cssNames("timestamps-icon", { active: this.showTimestamps })}
+            className={cssNames("timestamps-icon", { active: showTimestamps })}
-            tooltip={(this.showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)) + " " + _i18n._(t`timestamps`)}
+            tooltip={(showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)) + " " + _i18n._(t`timestamps`)}
           />
           <Icon
             material="get_app"
@@ -229,8 +187,8 @@ export class PodLogs extends React.Component<Props> {
     if (!this.ready) {
       return <Spinner center/>;
     }
-    const { logs, newLogs } = this.getLogs();
+    const { oldLogs, newLogs } = this.logs;
-    if (!logs && !newLogs) {
+    if (!oldLogs && !newLogs) {
       return (
         <div className="flex align-center justify-center">
           <Trans>There are no logs available for container.</Trans>
@@ -239,7 +197,7 @@ export class PodLogs extends React.Component<Props> {
     }
     return (
       <>
-        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(logs))}} />
+        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(oldLogs))}} />
         {newLogs && (
           <>
             <p className="new-logs-sep" title={_i18n._(t`New logs since opening the dialog`)}/>