Merge branch 'master' into fix/jsonpath_on_additional_printer_columns

.azure-pipelines-k8s-matrix.yml

@@ -0,0 +1,57 @@
+variables:
+  YARN_CACHE_FOLDER: $(Pipeline.Workspace)/.yarn
+  node_version: 12.x
+pr:
+  branches:
+    include:
+    - master
+    - releases/*
+  paths:
+    exclude:
+    - .github/*
+    - docs/*
+    - mkdocs/*
+trigger: none
+jobs:
+  - job: Linux
+    pool:
+      vmImage: ubuntu-16.04
+    strategy:
+      matrix:
+        kube_1.16:
+          kubernetes_version: v1.16.15
+        kube_1.17:
+          kubernetes_version: v1.17.15
+        kube_1.18:
+          kubernetes_version: v1.18.13
+        kube_1.19:
+          kubernetes_version: v1.19.5
+        kube_1.20:
+          kubernetes_version: v1.20.0
+    steps:
+      - task: NodeTool@0
+        inputs:
+          versionSpec: $(node_version)
+        displayName: Install Node.js
+      - task: Cache@2
+        inputs:
+          key: 'yarn | "$(Agent.OS)" | yarn.lock'
+          restoreKeys: |
+            yarn | "$(Agent.OS)"
+          path: $(YARN_CACHE_FOLDER)
+        displayName: Cache Yarn packages
+      - bash: |
+          sudo apt-get update
+          sudo apt-get install libgconf-2-4 conntrack -y
+          curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64
+          sudo install minikube-linux-amd64 /usr/local/bin/minikube
+          sudo minikube start --driver=none --kubernetes-version $(kubernetes_version)
+          # Although the kube and minikube config files are in placed $HOME they are owned by root
+          sudo chown -R $USER $HOME/.kube $HOME/.minikube
+        displayName: Install integration test dependencies
+      - script: make node_modules
+        displayName: Install dependencies
+      - script: make -j2 build
+        displayName: Run build
+      - script: xvfb-run --auto-servernum --server-args='-screen 0, 1600x900x24' yarn integration
+        displayName: Run integration tests for Kubernetes $(kubernetes_version)

Makefile

@@ -13,7 +13,7 @@ binaries/client:
 	yarn download-bins
 
 node_modules:
-	yarn install --frozen-lockfile --verbose
+	yarn install --frozen-lockfile
 	yarn check --verify-tree --integrity
 
 static/build/LensDev.html:

src/renderer/api/api-manager.ts

@@ -17,6 +17,10 @@ export class ApiManager {
     return Array.from(this.apis.values()).find(pathOrCallback ?? (() => true));
   }
 
+  getApiByKind(kind: string, apiVersion: string) {
+    return Array.from(this.apis.values()).find((api) => api.kind === kind && api.apiVersion === apiVersion);
+  }
+
   registerApi(apiBase: string, api: KubeApi) {
     if (!this.apis.has(apiBase)) {
       this.apis.set(apiBase, api);

src/renderer/api/kube-api.ts

@@ -79,6 +79,18 @@ export function forCluster<T extends KubeObject>(cluster: IKubeApiCluster, kubeC
   });
 }
 
+export function ensureObjectSelfLink(api: KubeApi, object: KubeJsonApiData) {
+  if (!object.metadata.selfLink) {
+    object.metadata.selfLink = createKubeApiURL({
+      apiPrefix: api.apiPrefix,
+      apiVersion: api.apiVersionWithGroup,
+      resource: api.apiResource,
+      namespace: api.isNamespaced ? object.metadata.namespace : undefined,
+      name: object.metadata.name,
+    });
+  }
+}
+
 export class KubeApi<T extends KubeObject = any> {
   static parseApi = parseKubeApi;
 
@@ -260,7 +272,11 @@ export class KubeApi<T extends KubeObject = any> {
     const KubeObjectConstructor = this.objectConstructor;
 
     if (KubeObject.isJsonApiData(data)) {
-      return new KubeObjectConstructor(data);
+      const object = new KubeObjectConstructor(data);
+
+      ensureObjectSelfLink(this, object);
+
+      return object;
     }
 
     // process items list response
@@ -270,11 +286,17 @@ export class KubeApi<T extends KubeObject = any> {
       this.setResourceVersion(namespace, metadata.resourceVersion);
       this.setResourceVersion("", metadata.resourceVersion);
 
-      return items.map(item => new KubeObjectConstructor({
-        kind: this.kind,
-        apiVersion,
-        ...item,
-      }));
+      return items.map((item) => {
+        const object = new KubeObjectConstructor({
+          kind: this.kind,
+          apiVersion,
+          ...item,
+        });
+
+        ensureObjectSelfLink(this, object);
+
+        return object;
+      });
     }
 
     // custom apis might return array for list response, e.g. users, groups, etc.

src/renderer/api/kube-watch-api.ts

@@ -5,7 +5,7 @@ import { stringify } from "querystring";
 import { autobind, EventEmitter } from "../utils";
 import { KubeJsonApiData } from "./kube-json-api";
 import type { KubeObjectStore } from "../kube-object.store";
-import { KubeApi } from "./kube-api";
+import { ensureObjectSelfLink, KubeApi } from "./kube-api";
 import { apiManager } from "./api-manager";
 import { apiPrefix, isDevelopment } from "../../common/vars";
 import { getHostedCluster } from "../../common/cluster-store";
@@ -158,12 +158,14 @@ export class KubeWatchApi {
 
   addListener(store: KubeObjectStore, callback: (evt: IKubeWatchEvent) => void) {
     const listener = (evt: IKubeWatchEvent<KubeJsonApiData>) => {
-      const { selfLink, namespace, resourceVersion } = evt.object.metadata;
-      const api = apiManager.getApi(selfLink);
+      const { namespace, resourceVersion } = evt.object.metadata;
+      const api = apiManager.getApiByKind(evt.object.kind, evt.object.apiVersion);
 
       api.setResourceVersion(namespace, resourceVersion);
       api.setResourceVersion("", resourceVersion);
 
+      ensureObjectSelfLink(api, evt.object);
+
       if (store == apiManager.getStore(api)) {
         callback(evt);
       }

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
+
+export type SidebarContextValue = {
+  pinned: boolean;
+};

src/renderer/components/layout/sidebar-nav-item.scss

@@ -0,0 +1,76 @@
+.SidebarNavItem {
+  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
+
+  width: 100%;
+  user-select: none;
+  flex-shrink: 0;
+
+  .nav-item {
+    cursor: pointer;
+    width: inherit;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    border: none;
+    padding: $itemSpacing;
+
+    &.active, &:hover {
+      background: $lensBlue;
+      color: $sidebarActiveColor;
+    }
+  }
+
+  .expand-icon {
+    --size: 20px;
+  }
+
+  .sub-menu {
+    border-left: 4px solid transparent;
+
+    &.active {
+      border-left-color: $lensBlue;
+    }
+
+    a, .SidebarNavItem {
+      display: block;
+      border: none;
+      text-decoration: none;
+      color: $textColorPrimary;
+      font-weight: normal;
+      padding-left: 40px; // parent icon width
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 0px; // hidden by default
+      max-height: 0px;
+      opacity: 0;
+      transition: 125ms line-height ease-out, 200ms 100ms opacity;
+
+      &.visible {
+        line-height: 28px;
+        max-height: 1000px;
+        opacity: 1;
+      }
+
+      &.active, &:hover {
+        color: $sidebarSubmenuActiveColor;
+      }
+    }
+
+    .sub-menu-parent {
+      padding-left: 27px;
+      font-weight: 500;
+
+      .nav-item {
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      .sub-menu {
+        a {
+          padding-left: $padding * 3;
+        }
+      }
+    }
+  }
+}

src/renderer/components/layout/sidebar-nav-item.tsx

@@ -0,0 +1,83 @@
+import "./sidebar-nav-item.scss";
+
+import React from "react";
+import { computed, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
+import { NavLink } from "react-router-dom";
+
+import { createStorage, cssNames } from "../../utils";
+import { Icon } from "../icon";
+import { SidebarContext } from "./sidebar-context";
+
+import type { TabLayoutRoute } from "./tab-layout";
+import type { SidebarContextValue } from "./sidebar-context";
+
+interface SidebarNavItemProps {
+  id: string; // Used to save nav item collapse/expand state in local storage
+  url: string;
+  text: React.ReactNode | string;
+  className?: string;
+  icon?: React.ReactNode;
+  isHidden?: boolean;
+  isActive?: boolean;
+  subMenus?: TabLayoutRoute[];
+}
+
+const navItemStorage = createStorage<[string, boolean][]>("sidebar_menu_item", []);
+const navItemState = observable.map<string, boolean>(navItemStorage.get());
+
+reaction(() => [...navItemState], (value) => navItemStorage.set(value));
+
+@observer
+export class SidebarNavItem extends React.Component<SidebarNavItemProps> {
+  static contextType = SidebarContext;
+  public context: SidebarContextValue;
+
+  @computed get isExpanded() {
+    return navItemState.get(this.props.id);
+  }
+
+  toggleSubMenu = () => {
+    navItemState.set(this.props.id, !this.isExpanded);
+  };
+
+  render() {
+    const { isHidden, isActive, subMenus = [], icon, text, url, children, className, id } = this.props;
+
+    if (isHidden) {
+      return null;
+    }
+    const extendedView = (subMenus.length > 0 || children) && this.context.pinned;
+
+    if (extendedView) {
+      return (
+        <div className={cssNames("SidebarNavItem", className)} data-test-id={id}>
+          <div className={cssNames("nav-item", { active: isActive })} onClick={this.toggleSubMenu}>
+            {icon}
+            <span className="link-text">{text}</span>
+            <Icon className="expand-icon" material={this.isExpanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}/>
+          </div>
+          <ul className={cssNames("sub-menu", { active: isActive })}>
+            {subMenus.map(({ title, url }) => (
+              <NavLink key={url} to={url} className={cssNames({ visible: this.isExpanded })}>
+                {title}
+              </NavLink>
+            ))}
+            {React.Children.toArray(children).map((child: React.ReactElement<any>) => {
+              return React.cloneElement(child, {
+                className: cssNames(child.props.className, { visible: this.isExpanded }),
+              });
+            })}
+          </ul>
+        </div>
+      );
+    }
+
+    return (
+      <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={() => isActive}>
+        {icon}
+        <span className="link-text">{text}</span>
+      </NavLink>
+    );
+  }
+}

src/renderer/components/layout/sidebar.scss

@@ -1,22 +1,7 @@
 .Sidebar {
   $iconSize: 24px;
-  $activeBgc: $lensBlue;
-  $activeTextColor: $sidebarActiveColor;
   $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
 
-  @mixin activeLinkState {
-    &.active {
-      background: $activeBgc;
-      color: $activeTextColor;
-    }
-    @media (hover: hover) { // only for devices supported "true" hover (with mouse or similar)
-      &:hover {
-        background: $activeBgc;
-        color: $activeTextColor;
-      }
-    }
-  }
-
   &.pinned {
     .sidebar-nav {
       overflow: auto;
@@ -77,13 +62,16 @@
     }
 
     > a {
-      @include activeLinkState;
-
       display: flex;
       align-items: center;
       text-decoration: none;
       border: none;
       padding: $itemSpacing;
+
+      &.active, &:hover {
+        background: $lensBlue;
+        color: $sidebarActiveColor;
+      }
     }
 
     hr {
@@ -91,78 +79,6 @@
     }
   }
 
-  .SidebarNavItem {
-    width: 100%;
-    user-select: none;
-    flex-shrink: 0;
-
-    .nav-item {
-      @include activeLinkState;
-
-      cursor: pointer;
-      width: inherit;
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      border: none;
-      padding: $itemSpacing;
-    }
-
-    .expand-icon {
-      --size: 20px;
-    }
-
-    .sub-menu {
-      border-left: 4px solid transparent;
-
-      &.active {
-        border-left-color: $activeBgc;
-      }
-
-      a, .SidebarNavItem {
-        display: block;
-        border: none;
-        text-decoration: none;
-        color: $textColorPrimary;
-        font-weight: normal;
-        padding-left: 40px; // parent icon width
-        overflow: hidden;
-        text-overflow: ellipsis;
-        line-height: 0px; // hidden by default
-        max-height: 0px;
-        opacity: 0;
-        transition: 125ms line-height ease-out, 200ms 100ms opacity;
-
-        &.visible {
-          line-height: 28px;
-          max-height: 1000px;
-          opacity: 1;
-        }
-
-        &.active, &:hover {
-          color: $sidebarSubmenuActiveColor;
-        }
-      }
-
-      .sub-menu-parent {
-        padding-left: 27px;
-        font-weight: 500;
-
-        .nav-item {
-          &:hover {
-            background: transparent;
-          }
-        }
-
-        .sub-menu {
-          a {
-            padding-left: $padding * 3;
-          }
-        }
-      }
-    }
-  }
-
   .loading {
     padding: $padding;
     text-align: center;

src/renderer/components/layout/sidebar.tsx

@@ -1,12 +1,11 @@
-import type { TabLayoutRoute } from "./tab-layout";
 import "./sidebar.scss";
 
 import React from "react";
-import { computed, observable, reaction } from "mobx";
+import type { TabLayoutRoute } from "./tab-layout";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { createStorage, cssNames } from "../../utils";
+import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
 import { namespacesRoute, namespacesURL } from "../+namespaces/namespaces.route";
@@ -30,12 +29,8 @@ import { isActiveRoute } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac";
 import { Spinner } from "../spinner";
 import { ClusterPageMenuRegistration, clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
-
-const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
-
-type SidebarContextValue = {
-  pinned: boolean;
-};
+import { SidebarNavItem } from "./sidebar-nav-item";
+import { SidebarContext } from "./sidebar-context";
 
 interface Props {
   className?: string;
@@ -69,6 +64,7 @@ export class Sidebar extends React.Component<Props> {
       return (
         <SidebarNavItem
           key={group}
+          id={`crd-${group}`}
           className="sub-menu-parent"
           url={crdURL({ query: { groups: group } })}
           subMenus={submenus}
@@ -105,6 +101,7 @@ export class Sidebar extends React.Component<Props> {
     return clusterPageMenuRegistry.getRootItems().map((menuItem, index) => {
       const registeredPage = clusterPageRegistry.getByPageMenuTarget(menuItem.target);
       const tabRoutes = this.getTabLayoutRoutes(menuItem);
+      const id = `registered-item-${index}`;
       let pageUrl: string;
       let isActive = false;
 
@@ -122,7 +119,8 @@ export class Sidebar extends React.Component<Props> {
 
       return (
         <SidebarNavItem
-          key={`registered-item-${index}`}
+          key={id}
+          id={id}
           url={pageUrl}
           text={menuItem.title}
           icon={<menuItem.components.Icon/>}
@@ -155,7 +153,7 @@ export class Sidebar extends React.Component<Props> {
           </div>
           <div className="sidebar-nav flex column box grow-fixed">
             <SidebarNavItem
-              testId="cluster"
+              id="cluster"
               isActive={isActiveRoute(clusterRoute)}
               isHidden={!isAllowedResource("nodes")}
               url={clusterURL()}
@@ -163,7 +161,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon svg="kube"/>}
             />
             <SidebarNavItem
-              testId="nodes"
+              id="nodes"
               isActive={isActiveRoute(nodesRoute)}
               isHidden={!isAllowedResource("nodes")}
               url={nodesURL()}
@@ -171,7 +169,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon svg="nodes"/>}
             />
             <SidebarNavItem
-              testId="workloads"
+              id="workloads"
               isActive={isActiveRoute(workloadsRoute)}
               isHidden={Workloads.tabRoutes.length == 0}
               url={workloadsURL({ query })}
@@ -180,7 +178,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon svg="workloads"/>}
             />
             <SidebarNavItem
-              testId="config"
+              id="config"
               isActive={isActiveRoute(configRoute)}
               isHidden={Config.tabRoutes.length == 0}
               url={configURL({ query })}
@@ -189,7 +187,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon material="list"/>}
             />
             <SidebarNavItem
-              testId="networks"
+              id="networks"
               isActive={isActiveRoute(networkRoute)}
               isHidden={Network.tabRoutes.length == 0}
               url={networkURL({ query })}
@@ -198,7 +196,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon material="device_hub"/>}
             />
             <SidebarNavItem
-              testId="storage"
+              id="storage"
               isActive={isActiveRoute(storageRoute)}
               isHidden={Storage.tabRoutes.length == 0}
               url={storageURL({ query })}
@@ -207,7 +205,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Storage</Trans>}
             />
             <SidebarNavItem
-              testId="namespaces"
+              id="namespaces"
               isActive={isActiveRoute(namespacesRoute)}
               isHidden={!isAllowedResource("namespaces")}
               url={namespacesURL()}
@@ -215,7 +213,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Namespaces</Trans>}
             />
             <SidebarNavItem
-              testId="events"
+              id="events"
               isActive={isActiveRoute(eventRoute)}
               isHidden={!isAllowedResource("events")}
               url={eventsURL({ query })}
@@ -223,7 +221,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Events</Trans>}
             />
             <SidebarNavItem
-              testId="apps"
+              id="apps"
               isActive={isActiveRoute(appsRoute)}
               url={appsURL({ query })}
               subMenus={Apps.tabRoutes}
@@ -231,7 +229,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Apps</Trans>}
             />
             <SidebarNavItem
-              testId="users"
+              id="users"
               isActive={isActiveRoute(usersManagementRoute)}
               url={usersManagementURL({ query })}
               subMenus={UserManagement.tabRoutes}
@@ -239,7 +237,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Access Control</Trans>}
             />
             <SidebarNavItem
-              testId="custom-resources"
+              id="custom-resources"
               isActive={isActiveRoute(crdRoute)}
               isHidden={!isAllowedResource("customresourcedefinitions")}
               url={crdURL()}
@@ -256,79 +254,3 @@ export class Sidebar extends React.Component<Props> {
     );
   }
 }
-
-interface SidebarNavItemProps {
-  url: string;
-  text: React.ReactNode | string;
-  className?: string;
-  icon?: React.ReactNode;
-  isHidden?: boolean;
-  isActive?: boolean;
-  subMenus?: TabLayoutRoute[];
-  testId?: string; // data-test-id="" property for integration tests
-}
-
-const navItemStorage = createStorage<[string, boolean][]>("sidebar_menu_item", []);
-const navItemState = observable.map<string, boolean>(navItemStorage.get());
-
-reaction(() => [...navItemState], (value) => navItemStorage.set(value));
-
-@observer
-class SidebarNavItem extends React.Component<SidebarNavItemProps> {
-  static contextType = SidebarContext;
-  public context: SidebarContextValue;
-
-  get itemId() {
-    const url = new URL(this.props.url, `${window.location.protocol}//${window.location.host}`);
-
-    return url.pathname; // pathname without get params
-  }
-
-  @computed get isExpanded() {
-    return navItemState.get(this.itemId);
-  }
-
-  toggleSubMenu = () => {
-    navItemState.set(this.itemId, !this.isExpanded);
-  };
-
-  render() {
-    const { isHidden, isActive, subMenus = [], icon, text, url, children, className, testId } = this.props;
-
-    if (isHidden) {
-      return null;
-    }
-    const extendedView = (subMenus.length > 0 || children) && this.context.pinned;
-
-    if (extendedView) {
-      return (
-        <div className={cssNames("SidebarNavItem", className)} data-test-id={testId}>
-          <div className={cssNames("nav-item", { active: isActive })} onClick={this.toggleSubMenu}>
-            {icon}
-            <span className="link-text">{text}</span>
-            <Icon className="expand-icon" material={this.isExpanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}/>
-          </div>
-          <ul className={cssNames("sub-menu", { active: isActive })}>
-            {subMenus.map(({ title, url }) => (
-              <NavLink key={url} to={url} className={cssNames({ visible: this.isExpanded })}>
-                {title}
-              </NavLink>
-            ))}
-            {React.Children.toArray(children).map((child: React.ReactElement<any>) => {
-              return React.cloneElement(child, {
-                className: cssNames(child.props.className, { visible: this.isExpanded }),
-              });
-            })}
-          </ul>
-        </div>
-      );
-    }
-
-    return (
-      <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={() => isActive}>
-        {icon}
-        <span className="link-text">{text}</span>
-      </NavLink>
-    );
-  }
-}

src/renderer/kube-object.store.ts

@@ -195,10 +195,9 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
     const items = this.items.toJS();
 
     for (const {type, object} of this.eventsBuffer.clear()) {
-      const { uid, selfLink } = object.metadata;
-      const index = items.findIndex(item => item.getId() === uid);
+      const index = items.findIndex(item => item.getId() === object.metadata?.uid);
       const item = items[index];
-      const api = apiManager.getApi(selfLink);
+      const api = apiManager.getApiByKind(object.kind, object.apiVersion);
 
       switch (type) {
         case "ADDED":