Merge branch 'master' into extensions-api

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/api/api-manager.ts

@@ -3,7 +3,7 @@ import type { KubeObjectDetailsProps, KubeObjectListLayoutProps, KubeObjectMenuP
 import type React from "react";
 
 import { observable } from "mobx";
-import { autobind } from "../utils/autobind";
+import { autobind } from "../utils";
 import { KubeApi } from "./kube-api";
 
 export interface ApiComponents {

src/renderer/api/endpoints/pods.api.ts

@@ -42,11 +42,14 @@ export interface IPodMetrics<T = IMetrics> {
   networkTransmit: T;
 }
 
+// Reference: https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.19/#read-log-pod-v1-core
 export interface IPodLogsQuery {
   container?: string;
   tailLines?: number;
   timestamps?: boolean;
   sinceTime?: string; // Date.toISOString()-format
+  follow?: boolean;
+  previous?: boolean;
 }
 
 export enum PodStatus {

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -13,7 +13,7 @@ import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
 import { Icon } from "../icon";
 import { WizardLayout } from "../layout/wizard-layout";
-import { kubeConfigDefaultPath, loadConfig, splitConfig, validateConfig } from "../../../common/kube-helpers";
+import { kubeConfigDefaultPath, loadConfig, splitConfig, validateConfig, validateKubeConfig } from "../../../common/kube-helpers";
 import { ClusterModel, ClusterStore, clusterStore } from "../../../common/cluster-store";
 import { workspaceStore } from "../../../common/workspace-store";
 import { v4 as uuid } from "uuid"
@@ -23,6 +23,7 @@ import { clusterViewURL } from "../cluster-manager/cluster-view.route";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Tab, Tabs } from "../tabs";
+import { ExecValidationNotFoundError } from "../../../common/custom-errors";
 
 enum KubeConfigSourceTab {
   FILE = "file",
@@ -118,14 +119,32 @@ export class AddCluster extends React.Component {
   }
 
   addClusters = () => {
+    const configValidationErrors:string[] = [];
+    let newClusters: ClusterModel[] = [];
+
     try {
       if (!this.selectedContexts.length) {
         this.error = <Trans>Please select at least one cluster context</Trans>
         return;
       }
       this.error = ""
-      this.isWaiting = true
-      const newClusters: ClusterModel[] = this.selectedContexts.map(context => {
+      this.isWaiting = true      
+
+      newClusters = this.selectedContexts.filter(context => {
+        try {
+          const kubeConfig = this.kubeContexts.get(context);
+          validateKubeConfig(kubeConfig);
+          return true;
+        } catch (err) {
+          this.error = String(err.message)
+          if (err instanceof ExecValidationNotFoundError ) {
+            Notifications.error(<Trans>Error while adding cluster(s): {this.error}</Trans>); 
+            return false; 
+          } else {
+            throw new Error(err);
+          }
+        }
+      }).map(context => {
         const clusterId = uuid();
         const kubeConfig = this.kubeContexts.get(context);
         const kubeConfigPath = this.sourceTab === KubeConfigSourceTab.FILE
@@ -141,7 +160,8 @@ export class AddCluster extends React.Component {
             httpsProxy: this.proxyServer || undefined,
           },
         }
-      });
+      })
+
       runInAction(() => {
         clusterStore.addCluster(...newClusters);
         if (newClusters.length === 1) {
@@ -149,9 +169,11 @@ export class AddCluster extends React.Component {
           clusterStore.setActive(clusterId);
           navigate(clusterViewURL({ params: { clusterId } }));
         } else {
-          Notifications.ok(
-            <Trans>Successfully imported <b>{newClusters.length}</b> cluster(s)</Trans>
-          );
+          if (newClusters.length > 1) { 
+            Notifications.ok(
+              <Trans>Successfully imported <b>{newClusters.length}</b> cluster(s)</Trans>
+            );
+          }
         }
       })
       this.refreshContexts();

src/renderer/components/+cluster-settings/cluster-settings.tsx

@@ -46,8 +46,9 @@ export class ClusterSettings extends React.Component<Props> {
     }
   }
 
-  refreshCluster = () => {
+  refreshCluster = async () => {
     if(this.cluster) {
+      await clusterIpc.activate.invokeFromRenderer(this.cluster.id);
       clusterIpc.refresh.invokeFromRenderer(this.cluster.id);
     }
   }

src/renderer/components/+preferences/kubectl-binaries.tsx

@@ -6,7 +6,7 @@ import { Input } from '../input';
 import { SubTitle } from '../layout/sub-title';
 import { UserPreferences, userStore } from '../../../common/user-store';
 import { observer } from 'mobx-react';
-import { Kubectl } from '../../../main/kubectl';
+import { bundledKubectlPath } from '../../../main/kubectl';
 import { SelectOption, Select } from '../select';
 
 export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => {
@@ -58,7 +58,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
       <SubTitle title="Path to Kubectl binary" />
       <Input
         theme="round-black"
-        placeholder={Kubectl.bundledKubectlPath}
+        placeholder={bundledKubectlPath()}
         value={binariesPath}
         validators={isPath}
         onChange={setBinariesPath}

src/renderer/components/+workloads-pods/pod-logs-dialog.scss

@@ -1,110 +0,0 @@
-.PodLogsDialog {
-  --log-line-height: 16px;
-
-  .Wizard {
-    width: 90vw;
-    max-height: none;
-
-    .WizardStep {
-      & > .step-content.scrollable {
-        max-height: none;
-      }
-
-      & > :last-child {
-        padding: $padding * 2;
-      }
-    }
-  }
-
-  .log-controls {
-    padding-bottom: $padding * 2;
-
-    .time-range {
-      flex-grow: 2;
-      text-align: center;
-    }
-
-    .controls {
-      width: 100%;
-    }
-
-    .control-buttons {
-      margin-right: 0;
-      white-space: nowrap;
-
-      .Icon {
-        border-radius: $radius;
-        padding: 3px;
-
-        &:hover {
-          color: $textColorPrimary;
-          background: #f4f4f4;
-        }
-
-        &.active {
-          color: $primary;
-          background: #f4f4f4;
-        }
-      }
-    }
-
-    @include media("<=desktop") {
-      flex-direction: column;
-      align-items: start;
-
-      .container {
-        width: 100%;
-      }
-
-      .controls {
-        margin-top: $margin * 2;
-
-        .time-range {
-          text-align: left;
-        }
-      }
-    }
-  }
-
-  .logs-area {
-    position: relative;
-    @include custom-scrollbar;
-
-    // fix for `this.logsArea.scrollTop = this.logsArea.scrollHeight`
-    // `overflow: overlay` don't allow scroll to the last line
-    overflow: auto;
-
-    color: #C5C8C6;
-    background: #1D1F21;
-    line-height: var(--log-line-height);
-    border-radius: 2px;
-    height: 45vh;
-    padding: $padding / 4 $padding;
-    font-family: $font-monospace;
-    font-size: smaller;
-    white-space: pre;
-
-    .no-logs {
-      text-align: center;
-    }
-  }
-
-  .new-logs-sep {
-    position: relative;
-    display: block;
-    height: 0;
-    border-top: 1px solid $primary;
-    margin: $margin * 2;
-
-    &:after {
-      position: absolute;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      content: 'new';
-      background: $primary;
-      color: white;
-      padding: $padding / 3 $padding /2;
-      border-radius: $radius;
-    }
-  }
-}

src/renderer/components/+workloads-pods/pod-logs-dialog.tsx

@@ -1,307 +0,0 @@
-import "./pod-logs-dialog.scss";
-
-import React from "react";
-import { observable } from "mobx";
-import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
-import { Dialog, DialogProps } from "../dialog";
-import { Wizard, WizardStep } from "../wizard";
-import { IPodContainer, Pod, podsApi } from "../../api/endpoints";
-import { Icon } from "../icon";
-import { Select, SelectOption } from "../select";
-import { Spinner } from "../spinner";
-import { cssNames, downloadFile, interval } from "../../utils";
-import AnsiUp from "ansi_up";
-import DOMPurify from "dompurify"
-
-interface IPodLogsDialogData {
-  pod: Pod;
-  container?: IPodContainer;
-}
-
-interface Props extends Partial<DialogProps> {
-}
-
-@observer
-export class PodLogsDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: IPodLogsDialogData = null;
-
-  static open(pod: Pod, container?: IPodContainer) {
-    PodLogsDialog.isOpen = true;
-    PodLogsDialog.data = { pod, container };
-  }
-
-  static close() {
-    PodLogsDialog.isOpen = false;
-  }
-
-  get data() {
-    return PodLogsDialog.data;
-  }
-
-  private logsArea: 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();
-
-  @observable logs = ""; // latest downloaded logs for pod
-  @observable newLogs = ""; // new logs since dialog is open
-  @observable logsReady = false;
-  @observable selectedContainer: IPodContainer;
-  @observable showTimestamps = true;
-  @observable tailLines = 1000;
-
-  lineOptions = [
-    { label: _i18n._(t`All logs`), value: Number.MAX_SAFE_INTEGER },
-    { label: 1000, value: 1000 },
-    { label: 10000, value: 10000 },
-    { label: 100000, value: 100000 },
-  ]
-
-  onOpen = async () => {
-    const { pod, container } = this.data;
-    this.containers = pod.getContainers();
-    this.initContainers = pod.getInitContainers();
-    this.selectedContainer = container || this.containers[0];
-    await this.load();
-    this.refresher.start();
-  }
-
-  onClose = () => {
-    this.resetLogs();
-    this.refresher.stop();
-  }
-
-  close = () => {
-    PodLogsDialog.close();
-  }
-
-  load = async () => {
-    if (!this.data) return;
-    const { pod } = this.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 = pod.getNs();
-      const name = pod.getName();
-      const logs = await podsApi.getLogs({ namespace, name }, {
-        container: this.selectedContainer.name,
-        timestamps: true,
-        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.logsReady = true;
-  }
-
-  reload = async () => {
-    this.resetLogs();
-    this.refresher.stop();
-    await this.load();
-    this.refresher.start();
-  }
-
-  componentDidUpdate() {
-    // scroll logs only when it's already in the end,
-    // otherwise it can interrupt reading by jumping after loading new logs update
-    if (this.logsArea && this.lastLineIsShown) {
-      this.logsArea.scrollTop = this.logsArea.scrollHeight;
-    }
-  }
-
-  onScroll = (evt: React.UIEvent<HTMLDivElement>) => {
-    const logsArea = evt.currentTarget;
-    const { scrollHeight, clientHeight, scrollTop } = logsArea;
-    this.lastLineIsShown = clientHeight + scrollTop === scrollHeight;
-  };
-
-  getLogs() {
-    const { logs, newLogs, showTimestamps } = this;
-    return {
-      logs: showTimestamps ? logs : this.removeTimestamps(logs),
-      newLogs: showTimestamps ? newLogs : this.removeTimestamps(newLogs),
-    }
-  }
-
-  getTimestamps(logs: string) {
-    return logs.match(/^\d+\S+/gm);
-  }
-
-  removeTimestamps(logs: string) {
-    return logs.replace(/^\d+.*?\s/gm, "");
-  }
-
-  resetLogs() {
-    this.logs = "";
-    this.newLogs = "";
-    this.lastLineIsShown = true;
-    this.logsReady = false;
-  }
-
-  onContainerChange = (option: SelectOption) => {
-    this.selectedContainer = this.containers
-      .concat(this.initContainers)
-      .find(container => container.name === option.value);
-    this.reload();
-  }
-
-  onTailLineChange = (option: SelectOption) => {
-    this.tailLines = option.value;
-    this.reload();
-  }
-
-  formatOptionLabel = (option: SelectOption) => {
-    const { value, label } = option;
-    return label || <><Icon small material="view_carousel"/> {value}</>;
-  }
-
-  toggleTimestamps = () => {
-    this.showTimestamps = !this.showTimestamps;
-  }
-
-  downloadLogs = () => {
-    const { logs, newLogs } = this.getLogs();
-    const fileName = this.selectedContainer.name + ".log";
-    const fileContents = logs + newLogs;
-    downloadFile(fileName, fileContents, "text/plain");
-  }
-
-  get containerSelectOptions() {
-    return [
-      {
-        label: _i18n._(t`Containers`),
-        options: this.containers.map(container => {
-          return { value: container.name }
-        }),
-      },
-      {
-        label: _i18n._(t`Init Containers`),
-        options: this.initContainers.map(container => {
-          return { value: container.name }
-        }),
-      }
-    ];
-  }
-
-  renderControlsPanel() {
-    const { logsReady, showTimestamps } = this;
-    if (!logsReady) return;
-    const timestamps = this.getTimestamps(this.logs + this.newLogs);
-    let from = "";
-    let to = "";
-    if (timestamps) {
-      from = new Date(timestamps[0]).toLocaleString();
-      to = new Date(timestamps[timestamps.length - 1]).toLocaleString();
-    }
-    return (
-      <div className="controls flex align-center">
-        <div className="time-range">
-          {timestamps && <Trans>From <b>{from}</b> to <b>{to}</b></Trans>}
-        </div>
-        <div className="control-buttons flex gaps">
-          <Icon
-            material="av_timer"
-            onClick={this.toggleTimestamps}
-            className={cssNames("timestamps-icon", { active: showTimestamps })}
-            tooltip={(showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)) + " " + _i18n._(t`timestamps`)}
-          />
-          <Icon
-            material="get_app"
-            onClick={this.downloadLogs}
-            tooltip={_i18n._(t`Save`)}
-          />
-        </div>
-      </div>
-    )
-  }
-
-  renderLogs() {
-    if (!this.logsReady) {
-      return <Spinner center/>
-    }
-    const { logs, newLogs } = this.getLogs();
-    if (!logs && !newLogs) {
-      return <p className="no-logs"><Trans>There are no logs available for container.</Trans></p>
-    }
-    return (
-      <>
-        <div dangerouslySetInnerHTML={{ __html:  DOMPurify.sanitize(this.colorConverter.ansi_to_html(logs))}} />
-        {newLogs && (
-          <>
-            <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))}} />
-          </>
-        )}
-      </>
-    );
-  }
-
-  render() {
-    const { ...dialogProps } = this.props;
-    const { selectedContainer, tailLines } = this;
-    const podName = this.data ? this.data.pod.getName() : "";
-    const header = <h5><Trans>{podName} Logs</Trans></h5>;
-    return (
-      <Dialog
-        {...dialogProps}
-        isOpen={PodLogsDialog.isOpen}
-        className="PodLogsDialog"
-        onOpen={this.onOpen}
-        onClose={this.onClose}
-        close={this.close}
-      >
-        <Wizard header={header} done={this.close}>
-          <WizardStep hideNextBtn prevLabel={<Trans>Close</Trans>}>
-            <div className="log-controls flex gaps align-center justify-space-between">
-              <div className="container flex gaps align-center">
-                <span><Trans>Container</Trans></span>
-                {selectedContainer && (
-                  <Select
-                    className="container-selector"
-                    options={this.containerSelectOptions}
-                    themeName="light"
-                    value={{ value: selectedContainer.name }}
-                    onChange={this.onContainerChange}
-                    formatOptionLabel={this.formatOptionLabel}
-                    autoConvertOptions={false}
-                  />
-                )}
-                <span><Trans>Lines</Trans></span>
-                <Select
-                  value={tailLines}
-                  options={this.lineOptions}
-                  onChange={this.onTailLineChange}
-                  themeName="light"
-                />
-              </div>
-              {this.renderControlsPanel()}
-            </div>
-            <div className="logs-area" onScroll={this.onScroll} ref={e => this.logsArea = e}>
-              {this.renderLogs()}
-            </div>
-          </WizardStep>
-        </Wizard>
-      </Dialog>
-    )
-  }
-}

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

@@ -3,15 +3,15 @@ import "./pod-menu.scss";
 import React from "react";
 import { t, Trans } from "@lingui/macro";
 import { MenuItem, SubMenu } from "../menu";
-import { IPodContainer, Pod, nodesApi } from "../../api/endpoints";
+import { IPodContainer, Pod } from "../../api/endpoints";
 import { Icon } from "../icon";
 import { StatusBrick } from "../status-brick";
-import { PodLogsDialog } from "./pod-logs-dialog";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { cssNames, prevDefault } from "../../utils";
 import { terminalStore, createTerminalTab } from "../dock/terminal.store";
 import { _i18n } from "../../i18n";
 import { hideDetails } from "../../navigation";
+import { createPodLogsTab } from "../dock/pod-logs.store";
 
 interface Props extends KubeObjectMenuProps<Pod> {
 }
@@ -42,7 +42,17 @@ export class PodMenu extends React.Component<Props> {
   }
 
   showLogs(container: IPodContainer) {
-    PodLogsDialog.open(this.props.object, container);
+    hideDetails();
+    const pod = this.props.object;
+    createPodLogsTab({
+      pod,
+      containers: pod.getContainers(),
+      initContainers: pod.getInitContainers(),
+      selectedContainer: container,
+      showTimestamps: false,
+      previous: false,
+      tailLines: 1000
+    });
   }
 
   renderShellMenu() {

src/renderer/components/app.tsx

@@ -23,7 +23,6 @@ import { eventRoute } from "./+events";
 import { Apps, appsRoute } from "./+apps";
 import { KubeObjectDetails } from "./kube-object/kube-object-details";
 import { AddRoleBindingDialog } from "./+user-management-roles-bindings";
-import { PodLogsDialog } from "./+workloads-pods/pod-logs-dialog";
 import { DeploymentScaleDialog } from "./+workloads-deployments/deployment-scale-dialog";
 import { CronJobTriggerDialog } from "./+workloads-cronjobs/cronjob-trigger-dialog";
 import { CustomResources } from "./+custom-resources/custom-resources";
@@ -90,7 +89,6 @@ export class App extends React.Component {
             <KubeObjectDetails/>
             <KubeConfigDialog/>
             <AddRoleBindingDialog/>
-            <PodLogsDialog/>
             <DeploymentScaleDialog/>
             <CronJobTriggerDialog/>
           </ErrorBoundary>

src/renderer/components/cluster-manager/cluster-status.tsx

@@ -47,13 +47,14 @@ export class ClusterStatus extends React.Component<Props> {
     ipcRenderer.removeAllListeners(`kube-auth:${this.props.clusterId}`);
   }
 
-  activateCluster = async () => {
-    await clusterIpc.activate.invokeFromRenderer(this.props.clusterId);
+  activateCluster = async (force = false) => {
+    await clusterIpc.activate.invokeFromRenderer(this.props.clusterId, force);
   }
 
   reconnect = async () => {
+    this.authOutput = []
     this.isReconnecting = true;
-    await this.activateCluster();
+    await this.activateCluster(true);
     this.isReconnecting = false;
   }
 

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -9,7 +9,7 @@ import { hasLoadedView } from "./lens-views";
 export class ClusterView extends React.Component {
   render() {
     const cluster = getMatchedCluster();
-    const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id))
+    const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id) || !cluster.ready)
     return (
       <div className="ClusterView">
         {showStatus && (

src/renderer/components/dock/dock.store.ts

@@ -11,6 +11,7 @@ export enum TabKind {
   EDIT_RESOURCE = "edit-resource",
   INSTALL_CHART = "install-chart",
   UPGRADE_CHART = "upgrade-chart",
+  POD_LOGS = "pod-logs",
 }
 
 export interface IDockTab {

src/renderer/components/dock/dock.tsx

@@ -22,6 +22,8 @@ import { createResourceTab, isCreateResourceTab } from "./create-resource.store"
 import { isEditResourceTab } from "./edit-resource.store";
 import { isInstallChartTab } from "./install-chart.store";
 import { isUpgradeChartTab } from "./upgrade-chart.store";
+import { PodLogs } from "./pod-logs";
+import { isPodLogsTab } from "./pod-logs.store";
 
 interface Props {
   className?: string;
@@ -59,6 +61,9 @@ export class Dock extends React.Component<Props> {
     if (isInstallChartTab(tab) || isUpgradeChartTab(tab)) {
       return <DockTab value={tab} icon={<Icon svg="install" />} />
     }
+    if (isPodLogsTab(tab)) {
+      return <DockTab value={tab} icon="subject" />
+    }
   }
 
   renderTabContent() {
@@ -71,6 +76,7 @@ export class Dock extends React.Component<Props> {
         {isInstallChartTab(tab) && <InstallChart tab={tab} />}
         {isUpgradeChartTab(tab) && <UpgradeChart tab={tab} />}
         {isTerminalTab(tab) && <TerminalWindow tab={tab} />}
+        {isPodLogsTab(tab) && <PodLogs tab={tab} />}
       </div>
     )
   }

src/renderer/components/dock/info-panel.tsx

@@ -13,7 +13,7 @@ import { Notifications } from "../notifications";
 
 interface Props extends OptionalProps {
   tabId: TabId;
-  submit: () => Promise<ReactNode | string>;
+  submit?: () => Promise<ReactNode | string>;
 }
 
 interface OptionalProps {
@@ -23,6 +23,7 @@ interface OptionalProps {
   submitLabel?: ReactNode;
   submittingMessage?: ReactNode;
   disableSubmit?: boolean;
+  showButtons?: boolean
   showSubmitClose?: boolean;
   showInlineInfo?: boolean;
   showNotifications?: boolean;
@@ -33,6 +34,7 @@ export class InfoPanel extends Component<Props> {
   static defaultProps: OptionalProps = {
     submitLabel: <Trans>Submit</Trans>,
     submittingMessage: <Trans>Submitting..</Trans>,
+    showButtons: true,
     showSubmitClose: true,
     showInlineInfo: true,
     showNotifications: true,
@@ -87,7 +89,7 @@ export class InfoPanel extends Component<Props> {
   }
 
   render() {
-    const { className, controls, submitLabel, disableSubmit, error, submittingMessage, showSubmitClose } = this.props;
+    const { className, controls, submitLabel, disableSubmit, error, submittingMessage, showButtons, showSubmitClose } = this.props;
     const { submit, close, submitAndClose, waiting } = this;
     const isDisabled = !!(disableSubmit || waiting || error);
     return (
@@ -98,22 +100,26 @@ export class InfoPanel extends Component<Props> {
         <div className="info flex gaps align-center">
           {waiting ? <><Spinner /> {submittingMessage}</> : this.renderErrorIcon()}
         </div>
-        <Button plain label={<Trans>Cancel</Trans>} onClick={close} />
-        <Button
-          active
-          outlined={showSubmitClose}
-          primary={!showSubmitClose}// one button always should be primary (blue)
-          label={submitLabel}
-          onClick={submit}
-          disabled={isDisabled}
-        />
-        {showSubmitClose && (
-          <Button
-            primary active
-            label={<Trans>{submitLabel} & Close</Trans>}
-            onClick={submitAndClose}
-            disabled={isDisabled}
-          />
+        {showButtons && (
+          <>
+            <Button plain label={<Trans>Cancel</Trans>} onClick={close} />
+            <Button
+              active
+              outlined={showSubmitClose}
+              primary={!showSubmitClose}// one button always should be primary (blue)
+              label={submitLabel}
+              onClick={submit}
+              disabled={isDisabled}
+            />
+            {showSubmitClose && (
+              <Button
+                primary active
+                label={<Trans>{submitLabel} & Close</Trans>}
+                onClick={submitAndClose}
+                disabled={isDisabled}
+              />
+            )}
+          </>
         )}
       </div>
     );

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

@@ -0,0 +1,43 @@
+.PodLogs {
+  .logs {
+    @include custom-scrollbar;
+
+    // fix for `this.logsElement.scrollTop = this.logsElement.scrollHeight`
+    // `overflow: overlay` don't allow scroll to the last line
+    overflow: auto;
+
+    color: $textColorAccent;
+    background: $logsBackground;
+    line-height: var(--log-line-height);
+    border-radius: 2px;
+    padding: $padding * 2;
+    font-family: $font-monospace;
+    font-size: smaller;
+    white-space: pre;
+    flex-grow: 1;
+
+    > div {
+     // Provides font better readability on large screens
+      -webkit-font-smoothing: subpixel-antialiased;
+    }
+  }
+
+  .new-logs-sep {
+    position: relative;
+    display: block;
+    height: 0;
+    border-top: 1px solid $primary;
+    margin: $margin * 2;
+
+    &:after {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: 'new';
+      background: $primary;
+      color: white;
+      padding: $padding / 3;
+      border-radius: $radius;
+    }
+  }
+}

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

@@ -0,0 +1,128 @@
+import { autorun, observable } from "mobx";
+import { Pod, IPodContainer, podsApi } from "../../api/endpoints";
+import { autobind, interval } 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;
+  selectedContainer: IPodContainer
+  containers: IPodContainer[]
+  initContainers: IPodContainer[]
+  showTimestamps: boolean
+  tailLines: number
+  previous: boolean
+}
+
+type TabId = string;
+
+interface PodLogs {
+  oldLogs?: string
+  newLogs?: string
+}
+
+@autobind()
+export class PodLogsStore extends DockTabStore<IPodLogsData> {
+  private refresher = interval(10, () => this.load(dockStore.selectedTabId));
+
+  @observable logs = observable.map<TabId, PodLogs>();
+
+  constructor() {
+    super({
+      storageName: "pod_logs"
+    });
+    autorun(() => {
+      const { selectedTab, isOpen } = dockStore;
+      if (isPodLogsTab(selectedTab) && isOpen) {
+        this.refresher.start();
+      } else {
+        this.refresher.stop();
+      }
+    }, { delay: 500 });
+  }
+
+  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, previous } = 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,
+        previous
+      });
+      if (!oldLogs) {
+        this.logs.set(tabId, { oldLogs: loadedLogs, newLogs });
+      } else {
+        this.logs.set(tabId, { oldLogs, newLogs: loadedLogs });
+      }
+    } catch ({error}) {
+      this.logs.set(tabId, {
+        oldLogs: [
+          _i18n._(t`Failed to load logs: ${error.message}`),
+          _i18n._(t`Reason: ${error.reason} (${error.code})`)
+        ].join("\n"),
+        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);
+  }
+
+  clearData(tabId: TabId) {
+    this.data.delete(tabId);
+    this.clearLogs(tabId);
+  }
+}
+
+export const podLogsStore = new PodLogsStore();
+
+export function createPodLogsTab(data: IPodLogsData, tabParams: Partial<IDockTab> = {}) {
+  const podId = data.pod.getId();
+  let tab = dockStore.getTabById(podId);
+  if (tab) {
+    dockStore.open();
+    dockStore.selectTab(tab.id);
+    return;
+  }
+  // If no existent tab found
+  tab = dockStore.createTab({
+    id: podId,
+    kind: TabKind.POD_LOGS,
+    title: `Logs: ${data.pod.getName()}`,
+    ...tabParams
+  }, false);
+  podLogsStore.setData(tab.id, data);
+  return tab;
+}
+
+export function isPodLogsTab(tab: IDockTab) {
+  return tab && tab.kind === TabKind.POD_LOGS;
+}

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

@@ -0,0 +1,246 @@
+import "./pod-logs.scss";
+import React from "react";
+import AnsiUp from "ansi_up";
+import DOMPurify from "dompurify";
+import { t, Trans } from "@lingui/macro";
+import { computed, observable, reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { _i18n } from "../../i18n";
+import { autobind, cssNames, downloadFile } 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 { IPodLogsData, podLogsStore } from "./pod-logs.store";
+
+interface Props {
+  className?: string
+  tab: IDockTab
+}
+
+@observer
+export class PodLogs extends React.Component<Props> {
+  @observable ready = false;
+
+  private logsElement: HTMLDivElement;
+  private lastLineIsShown = true; // used for proper auto-scroll content after refresh
+  private colorConverter = new AnsiUp();
+  private lineOptions = [
+    { label: _i18n._(t`All logs`), value: Number.MAX_SAFE_INTEGER },
+    { label: 1000, value: 1000 },
+    { label: 10000, value: 10000 },
+    { label: 100000, value: 100000 },
+  ];
+
+  componentDidMount() {
+    disposeOnUnmount(this,
+      reaction(() => this.props.tab.id, async () => {
+        if (podLogsStore.logs.has(this.tabId)) {
+          this.ready = true;
+          return;
+        }
+        await this.load();
+      }, { fireImmediately: true })
+    );
+  }
+
+  componentDidUpdate() {
+    // scroll logs only when it's already in the end,
+    // otherwise it can interrupt reading by jumping after loading new logs update
+    if (this.logsElement && this.lastLineIsShown) {
+      this.logsElement.scrollTop = this.logsElement.scrollHeight;
+    }
+  }
+
+  get tabData() {
+    return podLogsStore.getData(this.tabId);
+  }
+
+  get tabId() {
+    return this.props.tab.id;
+  }
+
+  @autobind()
+  save(data: Partial<IPodLogsData>) {
+    podLogsStore.setData(this.tabId, { ...this.tabData, ...data });
+  }
+
+  load = async () => {
+    this.ready = false;
+    await podLogsStore.load(this.tabId);
+    this.ready = true;
+  }
+
+  reload = async () => {
+    podLogsStore.clearLogs(this.tabId);
+    this.lastLineIsShown = true;
+    await this.load();
+  }
+
+  @computed
+  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 {
+      oldLogs: showTimestamps ? oldLogs : removeTimestamps(oldLogs),
+      newLogs: showTimestamps ? newLogs : removeTimestamps(newLogs)
+    }
+  }
+
+  toggleTimestamps = () => {
+    this.save({ showTimestamps: !this.tabData.showTimestamps });
+  }
+
+  togglePrevious = () => {
+    this.save({ previous: !this.tabData.previous });
+    this.reload();
+  }
+
+  onScroll = (evt: React.UIEvent<HTMLDivElement>) => {
+    const logsArea = evt.currentTarget;
+    const { scrollHeight, clientHeight, scrollTop } = logsArea;
+    this.lastLineIsShown = clientHeight + scrollTop === scrollHeight;
+  };
+
+  downloadLogs = () => {
+    const { oldLogs, newLogs } = this.logs;
+    const { pod, selectedContainer } = this.tabData;
+    const fileName = selectedContainer ? selectedContainer.name : pod.getName();
+    const fileContents = oldLogs + newLogs;
+    downloadFile(fileName + ".log", fileContents, "text/plain");
+  }
+
+  onContainerChange = (option: SelectOption) => {
+    const { containers, initContainers } = this.tabData;
+    this.save({
+      selectedContainer: containers
+        .concat(initContainers)
+        .find(container => container.name === option.value)
+    })
+    this.reload();
+  }
+
+  onTailLineChange = (option: SelectOption) => {
+    this.save({ tailLines: option.value })
+    this.reload();
+  }
+
+  get containerSelectOptions() {
+    const { containers, initContainers } = this.tabData;
+    return [
+      {
+        label: _i18n._(t`Containers`),
+        options: containers.map(container => {
+          return { value: container.name }
+        }),
+      },
+      {
+        label: _i18n._(t`Init Containers`),
+        options: initContainers.map(container => {
+          return { value: container.name }
+        }),
+      }
+    ];
+  }
+
+  formatOptionLabel = (option: SelectOption) => {
+    const { value, label } = option;
+    return label || <><Icon small material="view_carousel"/> {value}</>;
+  }
+
+  renderControls() {
+    if (!this.ready) return null;
+    const { selectedContainer, showTimestamps, tailLines, previous } = 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: selectedContainer.name }}
+          formatOptionLabel={this.formatOptionLabel}
+          onChange={this.onContainerChange}
+          autoConvertOptions={false}
+        />
+        <span><Trans>Lines</Trans></span>
+        <Select
+          value={tailLines}
+          options={this.lineOptions}
+          onChange={this.onTailLineChange}
+        />
+        <div className="time-range">
+          {timestamps && (
+            <>
+              <Trans>Since</Trans>{" "}
+              <b>{new Date(timestamps[0]).toLocaleString()}</b>
+            </>
+          )}
+        </div>
+        <div className="flex gaps">
+          <Icon
+            material="av_timer"
+            onClick={this.toggleTimestamps}
+            className={cssNames("timestamps-icon", { active: showTimestamps })}
+            tooltip={(showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)) + " " + _i18n._(t`timestamps`)}
+          />
+          <Icon
+            material="undo"
+            onClick={this.togglePrevious}
+            className={cssNames("undo-icon", { active: previous })}
+            tooltip={(previous ? _i18n._(t`Show current logs`) : _i18n._(t`Show previous terminated container logs`))}
+          />
+          <Icon
+            material="get_app"
+            onClick={this.downloadLogs}
+            tooltip={_i18n._(t`Save`)}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  renderLogs() {
+    if (!this.ready) {
+      return <Spinner center/>;
+    }
+    const { oldLogs, newLogs } = this.logs;
+    if (!oldLogs && !newLogs) {
+      return (
+        <div className="flex align-center justify-center">
+          <Trans>There are no logs available for container.</Trans>
+        </div>
+      );
+    }
+    return (
+      <>
+        <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`)}/>
+            <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(newLogs))}} />
+          </>
+        )}
+      </>
+    );
+  }
+
+  render() {
+    const { className } = this.props;
+    return (
+      <div className={cssNames("PodLogs flex column", className)}>
+        <InfoPanel
+          tabId={this.props.tab.id}
+          controls={this.renderControls()}
+          showSubmitClose={false}
+          showButtons={false}
+        />
+        <div className="logs" onScroll={this.onScroll} ref={e => this.logsElement = e}>
+          {this.renderLogs()}
+        </div>
+      </div>
+    );
+  }
+}

src/renderer/components/dock/terminal.ts

@@ -5,7 +5,7 @@ import { FitAddon } from "xterm-addon-fit";
 import { dockStore, TabId } from "./dock.store";
 import { TerminalApi } from "../../api/terminal-api";
 import { themeStore } from "../../theme.store";
-import { autobind } from "../../utils/autobind";
+import { autobind } from "../../utils";
 
 export class Terminal {
   static spawningPool: HTMLElement;

src/renderer/components/input/input_validators.ts

@@ -39,7 +39,7 @@ export const isNumber: Validator = {
 export const isUrl: Validator = {
   condition: ({ type }) => type === "url",
   message: () => _i18n._(t`Wrong url format`),
-  validate: value => !!value.match(/^http(s)?:\/\/\w+(\.\w+)*(:[0-9]+)?\/?(\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)*$/),
+  validate: value => !!value.match(/^$|^http(s)?:\/\/\w+(\.\w+)*(:[0-9]+)?\/?(\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)*$/),
 };
 
 export const isPath: Validator = {

src/renderer/components/input/search-input.scss

@@ -7,7 +7,11 @@
   > label {
     color: inherit;
     border-radius: $radius;
-    padding: $padding / 1.33 $padding * 1.25;
+    padding: 6px 6px 6px 10px;
+
+    .Icon {
+      height: $margin * 2;
+    }
   }
 
   &.compact {

src/renderer/components/item-object-list/item-list-layout.scss

@@ -15,6 +15,14 @@
       white-space: nowrap;
     }
 
+    .NamespaceSelect {
+      .Select {
+        &__value-container {
+          margin-bottom: 0;
+        }
+      }
+    }
+
     .SearchInput {
       label {
         background: none;

src/renderer/components/layout/main-layout.scss

@@ -1,6 +1,4 @@
 .MainLayout {
-  --sidebar-max-size: 200px;
-
   display: grid;
   grid-template-areas:
     "aside header"
@@ -35,7 +33,7 @@
     transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
     &.pinned {
-      width: var(--sidebar-max-size);
+      width: var(--sidebar-width);
     }
 
     &:not(.pinned) {
@@ -45,7 +43,7 @@
       overflow: hidden;
 
       &.accessible:hover {
-        width: var(--sidebar-max-size);
+        width: var(--sidebar-width);
         transition-delay: 750ms;
         box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);
         z-index: $zIndex-sidebar-hover;

src/renderer/components/layout/main-layout.tsx

@@ -3,11 +3,12 @@ import "./main-layout.scss";
 import React from "react";
 import { observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { createStorage, cssNames } from "../../utils";
+import { autobind, createStorage, cssNames } from "../../utils";
 import { Sidebar } from "./sidebar";
 import { ErrorBoundary } from "../error-boundary";
 import { Dock } from "../dock";
 import { getHostedCluster } from "../../../common/cluster-store";
+import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
 
 export interface MainLayoutProps {
   className?: any;
@@ -18,22 +19,42 @@ export interface MainLayoutProps {
 
 @observer
 export class MainLayout extends React.Component<MainLayoutProps> {
-  public storage = createStorage("main_layout", { pinnedSidebar: true });
+  public storage = createStorage("main_layout", {
+    pinnedSidebar: true,
+    sidebarWidth: 200,
+  });
 
   @observable isPinned = this.storage.get().pinnedSidebar;
   @observable isAccessible = true;
+  @observable sidebarWidth = this.storage.get().sidebarWidth
 
   @disposeOnUnmount syncPinnedStateWithStorage = reaction(
     () => this.isPinned,
     (isPinned) => this.storage.merge({ pinnedSidebar: isPinned })
   );
 
+  @disposeOnUnmount syncWidthStateWithStorage = reaction(
+    () => this.sidebarWidth,
+    (sidebarWidth) => this.storage.merge({ sidebarWidth })
+  );
+
   toggleSidebar = () => {
     this.isPinned = !this.isPinned;
     this.isAccessible = false;
     setTimeout(() => (this.isAccessible = true), 250);
   };
 
+  getSidebarSize = () => {
+    return {
+      "--sidebar-width": `${this.sidebarWidth}px`,
+    }
+  }
+
+  @autobind()
+  adjustWidth(newWidth: number): void {
+    this.sidebarWidth = newWidth
+  }
+
   render() {
     const { className, headerClass, footer, footerClass, children } = this.props;
     const cluster = getHostedCluster();
@@ -41,20 +62,31 @@ export class MainLayout extends React.Component<MainLayoutProps> {
       return null; // fix: skip render when removing active (visible) cluster
     }
     return (
-      <div className={cssNames("MainLayout", className)}>
+      <div className={cssNames("MainLayout", className)} style={this.getSidebarSize() as any}>
         <header className={cssNames("flex gaps align-center", headerClass)}>
           <span className="cluster">{cluster.preferences.clusterName || cluster.contextName}</span>
         </header>
 
         <aside className={cssNames("flex column", { pinned: this.isPinned, accessible: this.isAccessible })}>
           <Sidebar className="box grow" isPinned={this.isPinned} toggle={this.toggleSidebar} />
+          <ResizingAnchor
+            direction={ResizeDirection.HORIZONTAL}
+            placement={ResizeSide.TRAILING}
+            growthDirection={ResizeGrowthDirection.LEFT_TO_RIGHT}
+            getCurrentExtent={() => this.sidebarWidth}
+            onDrag={this.adjustWidth}
+            onDoubleClick={this.toggleSidebar}
+            disabled={!this.isPinned}
+            minExtent={120}
+            maxExtent={400}
+          />
         </aside>
 
         <main>
           <ErrorBoundary>{children}</ErrorBoundary>
         </main>
 
-        <footer className={footerClass}>{footer === undefined ? <Dock /> : footer}</footer>
+        <footer className={footerClass}>{footer ?? <Dock />}</footer>
       </div>
     );
   }

src/renderer/theme.store.ts

@@ -1,5 +1,5 @@
 import { computed, observable, reaction } from "mobx";
-import { autobind } from "./utils/autobind";
+import { autobind } from "./utils";
 import { userStore } from "../common/user-store";
 import logger from "../main/logger";
 

src/renderer/themes/kontena-dark.json

@@ -60,6 +60,7 @@
     "dockHeadBackground": "#2e3136",
     "dockInfoBackground": "#1e2125",
     "dockInfoBorderColor": "#303136",
+    "logsBackground": "#000000",
     "terminalBackground": "#000000",
     "terminalForeground": "#ffffff",
     "terminalCursor": "#ffffff",

src/renderer/themes/kontena-light.json

@@ -61,6 +61,7 @@
     "dockHeadBackground": "#e8e8e8",
     "dockInfoBackground": "#e8e8e8",
     "dockInfoBorderColor": "#c9cfd3",
+    "logsBackground": "#ffffff",
     "terminalBackground": "#ffffff",
     "terminalForeground": "#2d2d2d",
     "terminalCursor": "#2d2d2d",

src/renderer/themes/theme-vars.scss

@@ -91,6 +91,9 @@ $terminalBrightMagenta: var(--terminalBrightMagenta);
 $terminalBrightCyan: var(--terminalBrightCyan);
 $terminalBrightWhite: var(--terminalBrightWhite);
 
+// Logs
+$logsBackground: var(--logsBackground);
+
 // Dialogs
 $dialogTextColor: var(--dialogTextColor);
 $dialogBackground: var(--dialogBackground);

src/renderer/utils/autobind.ts

@@ -1,44 +0,0 @@
-// Decorator for binding class methods
-// Can be applied to class or single method as @autobind()
-type Constructor<T = {}> = new (...args: any[]) => T;
-
-export function autobind() {
-  return function (target: Constructor | object, prop?: string, descriptor?: PropertyDescriptor) {
-    if (target instanceof Function) return bindClass(target);
-    else return bindMethod(target, prop, descriptor);
-  }
-}
-
-function bindClass<T extends Constructor>(constructor: T) {
-  const proto = constructor.prototype;
-  const descriptors = Object.getOwnPropertyDescriptors(proto);
-
-  const skipMethod = (methodName: string) => {
-    return methodName === "constructor"
-      || typeof descriptors[methodName].value !== "function";
-  };
-
-  Object.keys(descriptors).forEach(prop => {
-    if (skipMethod(prop)) return;
-    const boundDescriptor = bindMethod(proto, prop, descriptors[prop]);
-    Object.defineProperty(proto, prop, boundDescriptor);
-  })
-}
-
-function bindMethod(target: object, prop?: string, descriptor?: PropertyDescriptor) {
-  if (!descriptor || typeof descriptor.value !== "function") {
-    throw new Error(`@autobind() must be used on class or method only`)
-  }
-  const { value: func, enumerable, configurable } = descriptor;
-  const boundFunc = new WeakMap<object, Function>();
-
-  return Object.defineProperty(target, prop, {
-    enumerable,
-    configurable,
-    get() {
-      if (this === target) return func; // direct access from prototype
-      if (!boundFunc.has(this)) boundFunc.set(this, func.bind(this));
-      return boundFunc.get(this);
-    }
-  });
-}

src/renderer/utils/debouncePromise.ts

@@ -1,9 +0,0 @@
-// Debouncing promise evaluation
-
-export const debouncePromise = function (promisedFunc: Function, timeout = 0) {
-  let timer: number;
-  return (...params: any[]) => new Promise((resolve, reject) => {
-    clearTimeout(timer);
-    timer = window.setTimeout(() => resolve(promisedFunc.apply(this, params)), timeout);
-  });
-};

src/renderer/utils/index.ts

@@ -3,21 +3,18 @@
 export const noop: any = Function();
 export const isElectron = !!navigator.userAgent.match(/Electron/);
 
-export * from '../../common/utils/camelCase'
-export * from '../../common/utils/base64'
+export * from "../../common/utils"
 
-export * from './autobind'
-export * from './cssVar'
-export * from './cssNames'
-export * from './eventEmitter'
-export * from './downloadFile'
-export * from './prevDefault'
-export * from './createStorage'
-export * from './interval'
-export * from './debouncePromise'
-export * from './copyToClipboard'
-export * from './formatDuration'
-export * from './isReactNode'
-export * from './convertMemory'
-export * from './convertCpu'
-export * from './metricUnitsToNumber'
+export * from "./cssVar"
+export * from "./cssNames"
+export * from "./eventEmitter"
+export * from "./downloadFile"
+export * from "./prevDefault"
+export * from "./createStorage"
+export * from "./interval"
+export * from "./copyToClipboard"
+export * from "./formatDuration"
+export * from "./isReactNode"
+export * from "./convertMemory"
+export * from "./convertCpu"
+export * from "./metricUnitsToNumber"