Merge branch 'master' into fix-1898/watch-api-streaming

# Conflicts:
#	src/renderer/api/kube-watch-api.ts
#	src/renderer/components/+namespaces/namespace.store.ts
#	src/renderer/components/+workloads-overview/overview.tsx
#	src/renderer/components/item-object-list/item-list-layout.tsx

.eslintrc.js

@@ -46,6 +46,8 @@ module.exports = {
           "avoidEscape": true,
           "allowTemplateLiterals": true,
         }],
+        "linebreak-style": ["error", "unix"],
+        "eol-last": ["error", "always"],
         "semi": ["error", "always"],
         "object-shorthand": "error",
         "prefer-template": "error",
@@ -101,6 +103,8 @@ module.exports = {
         }],
         "semi": "off",
         "@typescript-eslint/semi": ["error"],
+        "linebreak-style": ["error", "unix"],
+        "eol-last": ["error", "always"],
         "object-shorthand": "error",
         "prefer-template": "error",
         "template-curly-spacing": "error",
@@ -162,6 +166,8 @@ module.exports = {
         }],
         "semi": "off",
         "@typescript-eslint/semi": ["error"],
+        "linebreak-style": ["error", "unix"],
+        "eol-last": ["error", "always"],
         "object-shorthand": "error",
         "prefer-template": "error",
         "template-curly-spacing": "error",

__mocks__/imageMock.ts

@@ -1 +1 @@
-module.exports = {};
+module.exports = {};

__mocks__/styleMock.ts

@@ -1 +1 @@
-module.exports = {};
+module.exports = {};

extensions/kube-object-event-status/src/resolver.tsx

@@ -56,4 +56,4 @@ export function resolveStatusForCronJobs(cronJob: K8sApi.CronJob): K8sApi.KubeOb
     text: `${event.message}`,
     timestamp: event.metadata.creationTimestamp
   };
-}
+}

package.json

@@ -219,7 +219,7 @@
     "request-promise-native": "^1.0.8",
     "semver": "^7.3.2",
     "serializr": "^2.0.3",
-    "shell-env": "^3.0.0",
+    "shell-env": "^3.0.1",
     "spdy": "^4.0.2",
     "tar": "^6.0.5",
     "tcp-port-used": "^1.0.1",

src/common/__tests__/search-store.test.ts

@@ -77,4 +77,4 @@ describe("search store tests", () => {
     searchStore.onSearch(logs, "Starting");
     expect(searchStore.totalFinds).toBe(2);
   });
-});
+});

src/common/__tests__/user-store.test.ts

@@ -101,4 +101,4 @@ describe("user store tests", () => {
       expect(us.lastSeenAppVersion).toBe("0.0.0");
     });
   });
-});
+});

src/common/custom-errors.ts

@@ -10,4 +10,4 @@ export class ExecValidationNotFoundError extends Error {
     this.name = this.constructor.name;
     Error.captureStackTrace(this, this.constructor);
   }
-}
+}

src/common/kube-helpers.ts

@@ -175,4 +175,4 @@ export function validateKubeConfig (config: KubeConfig) {
       throw new ExecValidationNotFoundError(execCommand, isAbsolute);
     }
   }
-}
+}

src/common/prometheus-providers.ts

@@ -10,4 +10,4 @@ import { PrometheusProviderRegistry } from "../main/prometheus/provider-registry
   PrometheusProviderRegistry.registerProvider(provider.id, provider);
 });
 
-export const prometheusProviders = PrometheusProviderRegistry.getProviders();
+export const prometheusProviders = PrometheusProviderRegistry.getProviders();

src/common/search-store.ts

@@ -133,4 +133,4 @@ export class SearchStore {
   }
 }
 
-export const searchStore = new SearchStore;
+export const searchStore = new SearchStore;

src/common/utils/__tests__/splitArray.test.ts

@@ -28,4 +28,4 @@ describe("split array on element tests", () => {
   test("ten elements, in end array", () => {
     expect(splitArray([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 9)).toStrictEqual([[0, 1, 2, 3, 4, 5, 6, 7, 8], [], true]);
   });
-});
+});

src/common/utils/singleton.ts

@@ -26,4 +26,4 @@ class Singleton {
 }
 
 export { Singleton };
-export default Singleton;
+export default Singleton;

src/extensions/interfaces/index.ts

@@ -1 +1 @@
-export * from "./registrations";
+export * from "./registrations";

src/extensions/interfaces/registrations.ts

@@ -5,4 +5,4 @@ export type { KubeObjectMenuRegistration, KubeObjectMenuComponents } from "../re
 export type { KubeObjectStatusRegistration } from "../registries/kube-object-status-registry";
 export type { PageRegistration, RegisteredPage, PageParams, PageComponentProps, PageComponents, PageTarget } from "../registries/page-registry";
 export type { PageMenuRegistration, ClusterPageMenuRegistration, PageMenuComponents } from "../registries/page-menu-registry";
-export type { StatusBarRegistration } from "../registries/status-bar-registry";
+export type { StatusBarRegistration } from "../registries/status-bar-registry";

src/extensions/renderer-api/kube-object-status.ts

@@ -8,4 +8,4 @@ export enum KubeObjectStatusLevel {
   INFO = 1,
   WARNING = 2,
   CRITICAL = 3
-}
+}

src/extensions/renderer-api/theming.ts

@@ -2,4 +2,4 @@ import { themeStore } from "../../renderer/theme.store";
 
 export function getActiveTheme() {
   return themeStore.activeTheme;
-}
+}

src/main/cluster-detectors/base-cluster-detector.ts

@@ -31,4 +31,4 @@ export class BaseClusterDetector {
       },
     });
   }
-}
+}

src/main/cluster-detectors/cluster-id-detector.ts

@@ -23,4 +23,4 @@ export class ClusterIdDetector extends BaseClusterDetector {
 
     return response.metadata.uid;
   }
-}
+}

src/main/cluster-detectors/detector-registry.ts

@@ -48,4 +48,4 @@ detectorRegistry.add(ClusterIdDetector);
 detectorRegistry.add(LastSeenDetector);
 detectorRegistry.add(VersionDetector);
 detectorRegistry.add(DistributionDetector);
-detectorRegistry.add(NodesCountDetector);
+detectorRegistry.add(NodesCountDetector);

src/main/cluster-detectors/last-seen-detector.ts

@@ -11,4 +11,4 @@ export class LastSeenDetector extends BaseClusterDetector {
 
     return { value: new Date().toJSON(), accuracy: 100 };
   }
-}
+}

src/main/cluster-detectors/nodes-count-detector.ts

@@ -16,4 +16,4 @@ export class NodesCountDetector extends BaseClusterDetector {
 
     return response.items.length;
   }
-}
+}

src/main/cluster-detectors/version-detector.ts

@@ -16,4 +16,4 @@ export class VersionDetector extends BaseClusterDetector {
 
     return response.gitVersion;
   }
-}
+}

src/migrations/cluster-store/index.ts

@@ -18,4 +18,4 @@ export default {
   ...version270Beta1,
   ...version360Beta1,
   ...snap
-};
+};

src/renderer/api/__tests__/kube-api.test.ts

@@ -79,4 +79,4 @@ describe("KubeApi", () => {
     expect(kubeApi.apiPrefix).toEqual("/apis");
     expect(kubeApi.apiGroup).toEqual("extensions");
   });
-});
+});

src/renderer/api/workload-kube-object.ts

@@ -1,7 +1,7 @@
 import get from "lodash/get";
 import { KubeObject } from "./kube-object";
 
-interface IToleration {
+export interface IToleration {
   key?: string;
   operator?: string;
   effect?: string;
@@ -82,4 +82,4 @@ export class WorkloadKubeObject extends KubeObject {
 
     return Object.keys(affinity).length;
   }
-}
+}

src/renderer/components/+apps-helm-charts/helm-charts.route.ts

@@ -11,4 +11,4 @@ export interface IHelmChartsRouteParams {
   repo?: string;
 }
 
-export const helmChartsURL = buildURL<IHelmChartsRouteParams>(helmChartsRoute.path);
+export const helmChartsURL = buildURL<IHelmChartsRouteParams>(helmChartsRoute.path);

src/renderer/components/+apps-helm-charts/index.ts

@@ -1,2 +1,2 @@
 export * from "./helm-charts";
-export * from "./helm-charts.route";
+export * from "./helm-charts.route";

src/renderer/components/+apps-releases/index.ts

@@ -1,2 +1,2 @@
 export * from "./releases";
-export * from "./release.route";
+export * from "./release.route";

src/renderer/components/+apps/index.ts

@@ -1,2 +1,2 @@
 export * from "./apps";
-export * from "./apps.route";
+export * from "./apps.route";

src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx

@@ -48,4 +48,4 @@ export class ClusterHomeDirSetting extends React.Component<Props> {
       </>
     );
   }
-}
+}

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

@@ -45,4 +45,4 @@ export class ClusterNameSetting extends React.Component<Props> {
       </>
     );
   }
-}
+}

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

@@ -45,4 +45,4 @@ export class ClusterProxySetting extends React.Component<Props> {
       </>
     );
   }
-}
+}

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

@@ -25,4 +25,4 @@ export class General extends React.Component<Props> {
       <ClusterAccessibleNamespaces cluster={this.props.cluster} />
     </div>;
   }
-}
+}

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

@@ -17,4 +17,4 @@ export class Removal extends React.Component<Props> {
       </div>
     );
   }
-}
+}

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

@@ -58,4 +58,4 @@ export class Status extends React.Component<Props> {
       </div>
     </div>;
   }
-}
+}

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

@@ -23,11 +23,13 @@ interface IWarning extends ItemObject {
   kind: string;
   message: string;
   selfLink: string;
+  age: string | number;
 }
 
 enum sortBy {
   type = "type",
-  object = "object"
+  object = "object",
+  age = "age",
 }
 
 @observer
@@ -35,6 +37,7 @@ export class ClusterIssues extends React.Component<Props> {
   private sortCallbacks = {
     [sortBy.type]: (warning: IWarning) => warning.kind,
     [sortBy.object]: (warning: IWarning) => warning.getName(),
+    [sortBy.age]: (warning: IWarning) => warning.age || "",
   };
 
   @computed get warnings() {
@@ -42,15 +45,16 @@ export class ClusterIssues extends React.Component<Props> {
 
     // Node bad conditions
     nodesStore.items.forEach(node => {
-      const { kind, selfLink, getId, getName } = node;
+      const { kind, selfLink, getId, getName, getAge } = node;
 
       node.getWarningConditions().forEach(({ message }) => {
         warnings.push({
-          kind,
+          age: getAge(),
           getId,
           getName,
-          selfLink,
+          kind,
           message,
+          selfLink,
         });
       });
     });
@@ -59,12 +63,13 @@ export class ClusterIssues extends React.Component<Props> {
     const events = eventStore.getWarnings();
 
     events.forEach(error => {
-      const { message, involvedObject } = error;
+      const { message, involvedObject, getAge } = error;
       const { uid, name, kind } = involvedObject;
 
       warnings.push({
         getId: () => uid,
         getName: () => name,
+        age: getAge(),
         message,
         kind,
         selfLink: lookupApiLink(involvedObject, error),
@@ -78,7 +83,7 @@ export class ClusterIssues extends React.Component<Props> {
   getTableRow(uid: string) {
     const { warnings } = this;
     const warning = warnings.find(warn => warn.getId() == uid);
-    const { getId, getName, message, kind, selfLink } = warning;
+    const { getId, getName, message, kind, selfLink, age } = warning;
 
     return (
       <TableRow
@@ -96,6 +101,9 @@ export class ClusterIssues extends React.Component<Props> {
         <TableCell className="kind">
           {kind}
         </TableCell>
+        <TableCell className="age">
+          {age}
+        </TableCell>
       </TableRow>
     );
   }
@@ -139,6 +147,7 @@ export class ClusterIssues extends React.Component<Props> {
             <TableCell className="message">Message</TableCell>
             <TableCell className="object" sortBy={sortBy.object}>Object</TableCell>
             <TableCell className="kind" sortBy={sortBy.type}>Type</TableCell>
+            <TableCell className="timestamp" sortBy={sortBy.age}>Age</TableCell>
           </TableHead>
         </Table>
       </>

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

@@ -95,4 +95,4 @@ export const ClusterMetrics = observer(() => {
       {renderMetrics()}
     </div>
   );
-});
+});

src/renderer/components/+landing-page/index.tsx

@@ -1,2 +1,2 @@
 export * from "./landing-page.route";
-export * from "./landing-page";
+export * from "./landing-page";

src/renderer/components/+pod-security-policies/index.ts

@@ -1,3 +1,3 @@
 export * from "./pod-security-policies.route";
 export * from "./pod-security-policies";
-export * from "./pod-security-policy-details";
+export * from "./pod-security-policy-details";

src/renderer/components/+user-management-roles/roles.store.ts

@@ -47,4 +47,4 @@ export const rolesStore = new RolesStore();
 apiManager.registerStore(rolesStore, [
   roleApi,
   clusterRoleApi,
-]);
+]);

src/renderer/components/+user-management-service-accounts/index.ts

@@ -1,3 +1,3 @@
 export * from "./service-accounts";
 export * from "./service-accounts-details";
-export * from "./create-service-account-dialog";
+export * from "./create-service-account-dialog";

src/renderer/components/+user-management/index.ts

@@ -1,2 +1,2 @@
 export * from "./user-management";
-export * from "./user-management.route";
+export * from "./user-management.route";

src/renderer/components/+workloads-pods/__tests__/pod-tolerations.test.tsx

@@ -0,0 +1,59 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { fireEvent, render } from "@testing-library/react";
+import { IToleration } from "../../../api/workload-kube-object";
+import { PodTolerations } from "../pod-tolerations";
+
+const tolerations: IToleration[] =[
+  {
+    key: "CriticalAddonsOnly",
+    operator: "Exist",
+    effect: "NoExecute",
+    tolerationSeconds: 3600
+  },
+  {
+    key: "node.kubernetes.io/not-ready",
+    operator: "NoExist",
+    effect: "NoSchedule",
+    tolerationSeconds: 7200
+  },
+];
+
+describe("<PodTolerations />", () => {
+  it("renders w/o errors", () => {
+    const { container } = render(<PodTolerations tolerations={tolerations} />);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  it("shows all tolerations", () => {
+    const { container } = render(<PodTolerations tolerations={tolerations} />);
+    const rows = container.querySelectorAll(".TableRow");
+
+    expect(rows[0].querySelector(".key").textContent).toBe("CriticalAddonsOnly");
+    expect(rows[0].querySelector(".operator").textContent).toBe("Exist");
+    expect(rows[0].querySelector(".effect").textContent).toBe("NoExecute");
+    expect(rows[0].querySelector(".seconds").textContent).toBe("3600");
+
+    expect(rows[1].querySelector(".key").textContent).toBe("node.kubernetes.io/not-ready");
+    expect(rows[1].querySelector(".operator").textContent).toBe("NoExist");
+    expect(rows[1].querySelector(".effect").textContent).toBe("NoSchedule");
+    expect(rows[1].querySelector(".seconds").textContent).toBe("7200");
+  });
+
+  it("sorts table properly", () => {
+    const { container, getByText } = render(<PodTolerations tolerations={tolerations} />);
+    const headCell = getByText("Key");
+
+    fireEvent.click(headCell);
+    fireEvent.click(headCell);
+
+    const rows = container.querySelectorAll(".TableRow");
+
+    expect(rows[0].querySelector(".key").textContent).toBe("node.kubernetes.io/not-ready");
+  });
+});

src/renderer/components/+workloads-pods/index.ts

@@ -1,2 +1,2 @@
 export * from "./pods";
-export * from "./pod-details";
+export * from "./pod-details";

src/renderer/components/+workloads-pods/pod-details-statuses.tsx

@@ -27,4 +27,4 @@ export class PodDetailsStatuses extends React.Component<Props> {
       </div>
     );
   }
-}
+}

src/renderer/components/+workloads-pods/pod-details-tolerations.scss

@@ -1,5 +1,23 @@
 .PodDetailsTolerations {
-  .toleration {
+  grid-template-columns: auto;
-    margin-bottom: $margin;
+
+  .PodTolerations {
+    margin-top: var(--margin);
+  }
+
+  // Expanding value cell to cover 2 columns (whole Drawer width)
+
+  > .name {
+    grid-row-start: 1;
+    grid-column-start: 1;
+  }
+
+  > .value {
+    grid-row-start: 1;
+    grid-column-start: 1;
+  }
+
+  .DrawerParamToggler > .params {
+    margin-left: var(--drawer-item-title-width);
   }
 }

src/renderer/components/+workloads-pods/pod-details-tolerations.tsx

@@ -1,10 +1,11 @@
 import "./pod-details-tolerations.scss";
 import React from "react";
-import { Pod, Deployment, DaemonSet, StatefulSet, ReplicaSet, Job } from "../../api/endpoints";
 import { DrawerParamToggler, DrawerItem } from "../drawer";
+import { WorkloadKubeObject } from "../../api/workload-kube-object";
+import { PodTolerations } from "./pod-tolerations";
 
 interface Props {
-  workload: Pod | Deployment | DaemonSet | StatefulSet | ReplicaSet | Job;
+  workload: WorkloadKubeObject;
 }
 
 export class PodDetailsTolerations extends React.Component<Props> {
@@ -17,20 +18,7 @@ export class PodDetailsTolerations extends React.Component<Props> {
     return (
       <DrawerItem name="Tolerations" className="PodDetailsTolerations">
         <DrawerParamToggler label={tolerations.length}>
-          {
+          <PodTolerations tolerations={tolerations} />
-            tolerations.map((toleration, index) => {
-              const { key, operator, effect, tolerationSeconds } = toleration;
-
-              return (
-                <div className="toleration" key={index}>
-                  <DrawerItem name="Key">{key}</DrawerItem>
-                  {operator && <DrawerItem name="Operator">{operator}</DrawerItem>}
-                  {effect && <DrawerItem name="Effect">{effect}</DrawerItem>}
-                  {!!tolerationSeconds && <DrawerItem name="Effect">{tolerationSeconds}</DrawerItem>}
-                </div>
-              );
-            })
-          }
         </DrawerParamToggler>
       </DrawerItem>
     );

src/renderer/components/+workloads-pods/pod-tolerations.scss

@@ -0,0 +1,14 @@
+.PodTolerations {
+  .TableHead {
+    background-color: var(--drawerSubtitleBackground);
+  }
+
+  .TableCell {
+    white-space: normal;
+    word-break: normal;
+
+    &.key {
+      flex-grow: 3;
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+import "./pod-tolerations.scss";
+import React from "react";
+import uniqueId from "lodash/uniqueId";
+
+import { IToleration } from "../../api/workload-kube-object";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+
+interface Props {
+  tolerations: IToleration[];
+}
+
+enum sortBy {
+  Key = "key",
+  Operator = "operator",
+  Effect = "effect",
+  Seconds = "seconds",
+}
+
+const sortingCallbacks = {
+  [sortBy.Key]: (toleration: IToleration) => toleration.key,
+  [sortBy.Operator]: (toleration: IToleration) => toleration.operator,
+  [sortBy.Effect]: (toleration: IToleration) => toleration.effect,
+  [sortBy.Seconds]: (toleration: IToleration) => toleration.tolerationSeconds,
+};
+
+const getTableRow = (toleration: IToleration) => {
+  const { key, operator, effect, tolerationSeconds } = toleration;
+
+  return (
+    <TableRow
+      key={uniqueId("toleration-")}
+      sortItem={toleration}
+      nowrap
+    >
+      <TableCell className="key">{key}</TableCell>
+      <TableCell className="operator">{operator}</TableCell>
+      <TableCell className="effect">{effect}</TableCell>
+      <TableCell className="seconds">{tolerationSeconds}</TableCell>
+    </TableRow>
+  );
+};
+
+export function PodTolerations({ tolerations }: Props) {
+  return (
+    <Table
+      selectable
+      scrollable={false}
+      sortable={sortingCallbacks}
+      sortSyncWithUrl={false}
+      className="PodTolerations"
+    >
+      <TableHead sticky={false}>
+        <TableCell className="key" sortBy={sortBy.Key}>Key</TableCell>
+        <TableCell className="operator" sortBy={sortBy.Operator}>Operator</TableCell>
+        <TableCell className="effect" sortBy={sortBy.Effect}>Effect</TableCell>
+        <TableCell className="seconds" sortBy={sortBy.Seconds}>Seconds</TableCell>
+      </TableHead>
+      {
+        tolerations.map(getTableRow)
+      }
+    </Table>
+  );
+}

src/renderer/components/+workloads-statefulsets/index.ts

@@ -1,2 +1,2 @@
 export * from "./statefulsets";
-export * from "./statefulset-details";
+export * from "./statefulset-details";

src/renderer/components/ace-editor/ace-editor.tsx

@@ -154,4 +154,4 @@ export class AceEditor extends React.Component<Props, State> {
       </div>
     );
   }
-}
+}

src/renderer/components/ace-editor/index.ts

@@ -1 +1 @@
-export * from "./ace-editor";
+export * from "./ace-editor";

src/renderer/components/add-remove-buttons/index.ts

@@ -1 +1 @@
-export * from "./add-remove-buttons";
+export * from "./add-remove-buttons";

src/renderer/components/animate/index.ts

@@ -1 +1 @@
-export * from "./animate";
+export * from "./animate";

src/renderer/components/chart/background-block.plugin.ts

@@ -39,4 +39,4 @@ export const BackgroundBlock = {
     ctx.stroke();
     ctx.restore();
   }
-};
+};

src/renderer/components/chart/bar-chart.tsx

@@ -220,4 +220,4 @@ export const cpuOptions: ChartOptions = {
       }
     }
   }
-};
+};

src/renderer/components/chart/chart.tsx

@@ -213,4 +213,4 @@ export class Chart extends React.Component<ChartProps> {
       </>
     );
   }
-}
+}

src/renderer/components/chart/index.ts

@@ -1,3 +1,3 @@
 export * from "./chart";
 export * from "./pie-chart";
-export * from "./bar-chart";
+export * from "./bar-chart";

src/renderer/components/chart/pie-chart.tsx

@@ -64,4 +64,4 @@ export class PieChart extends React.Component<Props> {
 
 ChartJS.Tooltip.positioners.cursor = function (elements: any, position: { x: number; y: number }) {
   return position;
-};
+};

src/renderer/components/chart/useRealTimeMetrics.ts

@@ -42,4 +42,4 @@ export function useRealTimeMetrics(metrics: IMetricValues, chartData: IChartData
   }
 
   return data;
-}
+}

src/renderer/components/chart/zebra-stripes.plugin.ts

@@ -95,4 +95,4 @@ export const ZebraStripes = {
       cover.style.backgroundPositionX = `${-step * minutes}px`;
     }
   }
-};
+};

src/renderer/components/checkbox/checkbox.tsx

@@ -50,4 +50,4 @@ export class Checkbox extends React.PureComponent<CheckboxProps> {
       </label>
     );
   }
-}
+}

src/renderer/components/checkbox/index.ts

@@ -1 +1 @@
-export * from "./checkbox";
+export * from "./checkbox";

src/renderer/components/cluster-icon/index.ts

@@ -1 +1 @@
-export * from "./cluster-icon";
+export * from "./cluster-icon";

src/renderer/components/confirm-dialog/index.ts

@@ -1 +1 @@
-export * from "./confirm-dialog";
+export * from "./confirm-dialog";

src/renderer/components/dock/dock-tabs.tsx

@@ -48,4 +48,4 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
       {tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)}
     </Tabs>
   );
-};
+};

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

@@ -1,12 +1,16 @@
 .InfoPanel {
   @include hidden-scrollbar;
 
-  background: $dockInfoBackground;
+  background: var(--dockInfoBackground);
-  padding: $padding $padding * 2;
+  padding: var(--padding) calc(var(--padding) * 2);
   flex-shrink: 0;
 
   .Spinner {
-    margin-right: $padding;
+    margin-right: var(--padding);
+  }
+
+  .Badge {
+    background-color: var(--dockBadgeBackground);
   }
 
   > .controls {
@@ -15,8 +19,8 @@
 
     &:not(:empty) + .info {
       min-height: 25px;
-      padding-left: $padding;
+      padding-left: var(--padding);
-      padding-right: $padding;
+      padding-right: var(--padding);
     }
   }
 }

src/renderer/components/dock/log-controls.tsx

@@ -41,7 +41,12 @@ export const LogControls = observer((props: Props) => {
   return (
     <div className={cssNames("LogControls flex gaps align-center justify-space-between wrap")}>
       <div className="time-range">
-        {since && `Logs from ${new Date(since[0]).toLocaleString()}`}
+        {since && (
+          <span>
+            Logs from{" "}
+            <b>{new Date(since[0]).toLocaleString()}</b>
+          </span>
+        )}
       </div>
       <div className="flex gaps align-center">
         <Checkbox

src/renderer/components/drawer/drawer-item.scss

@@ -1,6 +1,8 @@
 .DrawerItem {
+  --drawer-item-title-width: 30%;
+
   display: grid;
-  grid-template-columns: minmax(30%, min-content) auto;
+  grid-template-columns: minmax(var(--drawer-item-title-width), min-content) auto;
   border-bottom: 1px solid $borderFaintColor;
   padding: $padding 0;
 

src/renderer/components/drawer/drawer-param-toggler.tsx

@@ -25,7 +25,7 @@ export class DrawerParamToggler extends React.Component<DrawerParamTogglerProps,
 
     return (
       <div className="DrawerParamToggler">
-        <div className="flex gaps align-center">
+        <div className="flex gaps align-center params">
           <div className="param-label">{label}</div>
           <div className="param-link" onClick={this.toggle}>
             <span className="param-link-text">{link}</span>

src/renderer/components/drawer/drawer.scss

@@ -69,7 +69,6 @@
     padding: var(--spacing);
 
     .Table .TableHead {
-      background-color: $contentColor;
       border-bottom: 1px solid $borderFaintColor;
     }
   }

src/renderer/components/editable-list/index.ts

@@ -1 +1 @@
-export * from "./editable-list";
+export * from "./editable-list";

src/renderer/components/error-boundary/index.ts

@@ -1 +1 @@
-export * from "./error-boundary";
+export * from "./error-boundary";

src/renderer/components/file-picker/file-picker.tsx

@@ -209,4 +209,4 @@ export class FilePicker extends React.Component<Props> {
         return <Icon material="error" title={this.errorText}></Icon>;
     }
   }
-}
+}

src/renderer/components/file-picker/index.ts

@@ -1 +1 @@
-export * from "./file-picker";
+export * from "./file-picker";

src/renderer/components/icon/index.ts

@@ -1 +1 @@
-export * from "./icon";
+export * from "./icon";

src/renderer/components/input/search-input-url.tsx

@@ -54,4 +54,4 @@ export class SearchInputUrl extends React.Component<Props> {
       />
     );
   }
-}
+}

src/renderer/components/item-object-list/index.tsx

@@ -1 +1 @@
-export * from "./item-list-layout";
+export * from "./item-list-layout";

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

@@ -2,7 +2,7 @@ import "./item-list-layout.scss";
 import groupBy from "lodash/groupBy";
 
 import React, { ReactNode } from "react";
-import { computed, observable, reaction, toJS } from "mobx";
+import { computed, IReactionDisposer, observable, reaction, toJS } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
 import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table";

src/renderer/components/kube-object-status-icon/index.ts

@@ -1 +1 @@
-export * from "./kube-object-status-icon";
+export * from "./kube-object-status-icon";

src/renderer/components/kubeconfig-dialog/index.ts

@@ -1 +1 @@
-export * from "./kubeconfig-dialog";
+export * from "./kubeconfig-dialog";

src/renderer/components/layout/__test__/main-layout-header.test.tsx

@@ -46,4 +46,4 @@ describe("<MainLayoutHeader />", () => {
 
     expect(getByText("minikube")).toBeInTheDocument();
   });
-});
+});

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

@@ -34,4 +34,4 @@ export class LoginLayout extends React.Component<Props> {
       </section>
     );
   }
-}
+}

src/renderer/components/layout/sidebar-context.ts

@@ -4,4 +4,4 @@ export const SidebarContext = React.createContext<SidebarContextValue>({ pinned:
 
 export type SidebarContextValue = {
   pinned: boolean;
-};
+};

src/renderer/components/line-progress/index.ts

@@ -1 +1 @@
-export * from "./line-progress";
+export * from "./line-progress";

src/renderer/components/markdown-viewer/index.ts

@@ -1 +1 @@
-export * from "./markdown-viewer";
+export * from "./markdown-viewer";

src/renderer/components/markdown-viewer/markdown-viewer.tsx

@@ -34,4 +34,4 @@ export class MarkdownViewer extends Component<Props> {
       />
     );
   }
-}
+}

src/renderer/components/radio/index.ts

@@ -1 +1 @@
-export * from "./radio";
+export * from "./radio";

src/renderer/components/resource-metrics/index.ts

@@ -1,2 +1,2 @@
 export * from "./resource-metrics";
-export * from "./resource-metrics-text";
+export * from "./resource-metrics-text";

src/renderer/components/select/select.scss

@@ -3,11 +3,9 @@
 
 html {
   $menuBackgroundColor: $contentColor;
-  $menuSelectedOptionBgc: $layoutBackground;
 
   --select-menu-bgc: #{$menuBackgroundColor};
   --select-menu-border-color: #{$halfGray};
-  --select-option-selected-bgc: #{$menuSelectedOptionBgc};
   --select-option-selected-color: #{$selectOptionHoveredColor};
   --select-option-focused-bgc: #{$colorInfo};
   --select-option-focused-color: #{$textColorAccent};
@@ -95,7 +93,7 @@ html {
       }
 
       &--is-selected {
-        background: var(--select-option-selected-bgc);
+        background: var(--menuSelectedOptionBgc);
         color: var(--select-option-selected-color);
       }
 
@@ -148,7 +146,6 @@ html {
     &.theme-light {
       --select-menu-bgc: white;
       --select-option-selected-color: $textColorSecondary;
-      --select-option-selected-bgc: $textColorSecondary;
 
       .Select {
         &__multi-value {

src/renderer/components/slider/index.ts

@@ -1 +1 @@
-export * from "./slider";
+export * from "./slider";

src/renderer/components/status-brick/index.ts

@@ -1 +1 @@
-export * from "./status-brick";
+export * from "./status-brick";

src/renderer/components/status-brick/status-brick.tsx

@@ -19,4 +19,4 @@ export class StatusBrick extends React.Component<StatusBrickProps> {
       />
     );
   }
-}
+}

src/renderer/components/virtual-list/index.ts

@@ -1 +1 @@
-export * from "./virtual-list";
+export * from "./virtual-list";

src/renderer/components/wizard/index.ts

@@ -1 +1 @@
-export * from "./wizard";
+export * from "./wizard";

src/renderer/hooks/useInterval.ts

@@ -16,4 +16,4 @@ export function useInterval(callback: () => void, delay: number) {
 
     return () => clearInterval(id);
   }, [delay]);
-}
+}

src/renderer/hooks/useOnUnmount.ts

@@ -2,4 +2,4 @@ import { useEffect } from "react";
 
 export function useOnUnmount(callback: () => void) {
   useEffect(() => callback, []);
-}
+}

src/renderer/hooks/useStorage.ts

@@ -10,4 +10,4 @@ export function useStorage<T>(key: string, initialValue?: T, options?: IStorageH
   };
 
   return [storageValue, setValue] as [T, (value: T) => void];
-}
+}

src/renderer/navigation/events.ts

@@ -28,4 +28,4 @@ export function bindEvents() {
   subscribeToBroadcast("renderer:reload", () => {
     location.reload();
   });
-}
+}