Lens app source code (#119)

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

dashboard/client/components/layout/login-layout.scss

@@ -0,0 +1,50 @@
+
+.LoginLayout {
+  $logo-size: 6 * $unit;
+  height: 100vh;
+  padding: $padding * 2;
+
+  .logo {
+    width: $logo-size;
+    height: $logo-size;
+    margin: auto;
+
+    svg * {
+      fill: $kontenaBlue;
+    }
+  }
+
+  .header {
+    font-size: $font-size-small;
+  }
+
+  .main {
+    $spacing: $padding * 3;
+    width: 100%;
+    min-width: 34 * $unit;
+    max-width: 42 * $unit;
+    margin: $padding * 2 0;
+    overflow: hidden;
+
+    > * {
+      padding: $spacing;
+    }
+
+    .title {
+      background: $layoutBackground;
+      text-align: center;
+
+      h5 {
+        color: $textColorAccent;
+      }
+    }
+
+    .content {
+      background: $contentColor;
+    }
+  }
+
+  .footer {
+    font-size: $font-size-small;
+  }
+}

dashboard/client/components/layout/login-layout.tsx

@@ -0,0 +1,36 @@
+import "./login-layout.scss";
+
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { cssNames } from "../../utils";
+import { Icon } from "../icon";
+
+interface Props {
+  className?: any;
+  header?: any;
+  title?: any;
+  footer?: any;
+}
+
+export class LoginLayout extends React.Component<Props> {
+  render() {
+    const { className, header, title, footer, children } = this.props;
+    return (
+      <section className={cssNames('LoginLayout flex', className)}>
+        <div className="header">{header}</div>
+        <div className="box main">
+          <div className="title">
+            <Link to="/">
+              <Icon svg="logo" className="logo"/>
+            </Link>
+            {title}
+          </div>
+          <div className="content">
+            {children}
+          </div>
+        </div>
+        <div className="footer">{footer}</div>
+      </section>
+    );
+  }
+}

dashboard/client/components/layout/main-layout.scss

@@ -0,0 +1,86 @@
+
+.MainLayout {
+  --main-layout-header: 40px;
+  --sidebar-max-size: 200px;
+
+  display: grid;
+  grid-template-areas: "aside header" "aside tabs" "aside main" "aside footer";
+  grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
+  grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
+  height: 100vh;
+
+  &.light {
+    main {
+      @include custom-scrollbar(dark);
+      overflow-y: scroll;
+    }
+  }
+
+  > .Tabs {
+    grid-area: tabs;
+    background: $layoutTabsBackground;
+
+    .Tab {
+      --color-active: #{$layoutTabsActiveColor};
+    }
+  }
+
+  header {
+    grid-area: header;
+    background: $layoutBackground;
+    padding: $padding $padding * 2;
+
+    span + .lens-version {
+      margin-left: $margin;
+    }
+
+    .lens-version {
+      font-size: x-small;
+      text-transform: uppercase;
+    }
+  }
+
+  aside {
+    grid-area: aside;
+    position: relative;
+    background: $sidebarBackground;
+    white-space: nowrap;
+    transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 100;
+
+    &.pinned {
+      width: var(--sidebar-max-size);
+    }
+
+    &:not(.pinned) {
+      position: absolute;
+      width: var(--main-layout-header);
+      height: 100%;
+      overflow: hidden;
+
+      &.accessible:hover {
+        width: var(--sidebar-max-size);
+        transition-delay: 750ms;
+        box-shadow: 3px 3px 16px rgba(0, 0, 0, .35);
+        z-index: $zIndex-sidebar-hover;
+      }
+    }
+  }
+
+  main {
+    @include custom-scrollbar;
+    $spacing: $margin * 2;
+
+    grid-area: main;
+    overflow-y: scroll; // always reserve space for scrollbar (17px)
+    overflow-x: auto;
+    margin: $spacing;
+    margin-right: 0;
+  }
+
+  footer {
+    position: relative;
+    grid-area: footer;
+    min-width: 0; // restrict size when overflow content (e.g. <Dock> tabs scrolling)
+  }
+}

dashboard/client/components/layout/main-layout.tsx

@@ -0,0 +1,97 @@
+import "./main-layout.scss";
+
+import * as React from "react";
+import { observable, reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { matchPath, RouteProps } from "react-router-dom";
+import { Trans } from "@lingui/macro";
+import { createStorage, cssNames, isElectron } from "../../utils";
+import { Tab, Tabs } from "../tabs";
+import { Icon } from "../icon";
+import { openUserKubeConfig } from "../kubeconfig-dialog";
+import { Sidebar } from "./sidebar";
+import { configStore } from "../../config.store";
+import { ErrorBoundary } from "../error-boundary";
+import { Dock } from "../dock";
+import { MenuItem } from "../menu";
+import { MenuActions } from "../menu/menu-actions";
+import { navigate, navigation } from "../../navigation";
+import { i18nStore } from "../../i18n";
+import { Badge } from "../badge";
+import { themeStore } from "../../theme.store";
+
+export interface TabRoute extends RouteProps {
+  title: React.ReactNode;
+  url: string;
+}
+
+interface Props {
+  className?: any;
+  tabs?: TabRoute[];
+  footer?: React.ReactNode;
+  headerClass?: string;
+  contentClass?: string;
+  footerClass?: string;
+}
+
+@observer
+export class MainLayout extends React.Component<Props> {
+  public storage = createStorage("main_layout", { pinnedSidebar: true });
+
+  @observable isPinned = this.storage.get().pinnedSidebar;
+  @observable isAccessible = true;
+
+  @disposeOnUnmount syncPinnedStateWithStorage = reaction(
+    () => this.isPinned,
+    isPinned => this.storage.merge({ pinnedSidebar: isPinned })
+  );
+
+  toggleSidebar = () => {
+    this.isPinned = !this.isPinned;
+    this.isAccessible = false;
+    setTimeout(() => this.isAccessible = true, 250);
+  }
+
+  render() {
+    const { className, contentClass, headerClass, tabs, footer, footerClass, children } = this.props;
+    const { clusterName, username, lensVersion, kubectlAccess } = configStore.config;
+    const { pathname } = navigation.location;
+    const { languages, setLocale, activeLang } = i18nStore;
+    return (
+      <div className={cssNames("MainLayout", className, themeStore.activeTheme.type)}>
+        <header className={cssNames("flex gaps align-center", headerClass)}>
+          <div className="box grow flex align-center">
+            {clusterName && <span>{clusterName}</span>}
+          </div>
+        </header>
+
+        <aside className={cssNames("flex column", { pinned: this.isPinned, accessible: this.isAccessible })}>
+          <Sidebar
+            className="box grow"
+            isPinned={this.isPinned}
+            toggle={this.toggleSidebar}
+          />
+        </aside>
+
+        {tabs && (
+          <Tabs center onChange={url => navigate(url)}>
+            {tabs.map(({ title, path, url, ...routeProps }) => {
+              const isActive = !!matchPath(pathname, { path, ...routeProps });
+              return <Tab key={url} label={title} value={url} active={isActive}/>
+            })}
+          </Tabs>
+        )}
+
+        <main className={contentClass}>
+          <ErrorBoundary>
+            {children}
+          </ErrorBoundary>
+        </main>
+
+        <footer className={footerClass}>
+          {footer === undefined ? <Dock/> : footer}
+        </footer>
+      </div>
+    );
+  }
+}

dashboard/client/components/layout/sidebar.scss

@@ -0,0 +1,164 @@
+.Sidebar {
+  $iconSize: 24px;
+  $activeBgc: $kontenaBlue;
+  $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 {
+      @include custom-scrollbar;
+    }
+  }
+
+  .header {
+    background: $sidebarLogoBackground;
+    padding: $padding / 2;
+    height: var(--main-layout-header);
+
+    .logo-icon {
+      width: 100px;
+      height: 100%;
+      margin-left: $padding / 1.5;
+      margin-top: $padding / 1.5;
+    }
+
+    .pin-icon {
+      margin: auto;
+      margin-right: $padding / 2;
+    }
+  }
+
+  .sidebar-nav {
+    @include hidden-scrollbar;
+
+    padding: $padding / 1.5 0;
+
+    .Icon {
+      --size: #{$iconSize};
+
+      box-sizing: content-box;
+      padding: floor($padding / 2.6);
+      border-radius: 50%;
+
+      &.logout {
+        width: ceil($iconSize * .9);
+        padding: $padding / 2;
+      }
+    }
+
+    .link-text {
+      flex: 1;
+      margin-left: $margin;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    > a {
+      @include activeLinkState;
+
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      border: none;
+      padding: $itemSpacing;
+    }
+
+    > .logout {
+      margin-top: auto;
+    }
+
+    hr {
+      background-color: transparent;
+    }
+  }
+
+  .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;
+  }
+}

dashboard/client/components/layout/sidebar.tsx

@@ -0,0 +1,257 @@
+import "./sidebar.scss";
+
+import * as React from "react";
+import { computed, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
+import { matchPath, NavLink } from "react-router-dom";
+import { Trans } from "@lingui/macro";
+import { configStore } from "../../config.store";
+import { createStorage, cssNames } from "../../utils";
+import { Icon } from "../icon";
+import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
+import { namespacesURL } from "../+namespaces/namespaces.route";
+import { nodesURL } from "../+nodes/nodes.route";
+import { usersManagementRoute, usersManagementURL } from "../+user-management/user-management.routes";
+import { networkRoute, networkURL } from "../+network/network.route";
+import { storageRoute, storageURL } from "../+storage/storage.route";
+import { clusterURL } from "../+cluster";
+import { Config, configRoute, configURL } from "../+config";
+import { eventRoute, eventsURL } from "../+events";
+import { Apps, appsRoute, appsURL } from "../+apps";
+import { namespaceStore } from "../+namespaces/namespace.store";
+import { TabRoute } from "./main-layout";
+import { Workloads } from "../+workloads";
+import { UserManagement } from "../+user-management";
+import { Storage } from "../+storage";
+import { Network } from "../+network";
+import { crdStore } from "../+custom-resources/crd.store";
+import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
+import { CustomResources } from "../+custom-resources/custom-resources";
+import { navigation } from "../../navigation";
+
+const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
+type SidebarContextValue = {
+  pinned: boolean;
+};
+
+interface Props {
+  className?: string;
+  isPinned: boolean;
+  toggle(): void;
+}
+
+@observer
+export class Sidebar extends React.Component<Props> {
+  renderCustomResources() {
+    return Object.entries(crdStore.groups).map(([group, crds]) => {
+      const submenus = crds.map(crd => {
+        return {
+          title: crd.getResourceKind(),
+          component: CrdList,
+          url: crd.getResourceUrl(),
+          path: crdResourcesRoute.path,
+        }
+      })
+      return (
+        <SidebarNavItem
+          key={group}
+          id={group}
+          className="sub-menu-parent"
+          url={crdURL({ query: { groups: group } })}
+          subMenus={submenus}
+          text={group}
+        />
+      )
+    })
+  }
+
+  render() {
+    const { toggle, isPinned, className } = this.props;
+    const { isClusterAdmin } = configStore;
+    const query = namespaceStore.getContextParams();
+    return (
+      <SidebarContext.Provider value={{ pinned: isPinned }}>
+        <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
+          <div className="header flex align-center">
+            <NavLink exact to="/" className="box grow">
+              <Icon svg="logo-full" className="logo-icon"/>
+            </NavLink>
+            <Icon
+              className="pin-icon"
+              material={isPinned ? "keyboard_arrow_left" : "keyboard_arrow_right"}
+              onClick={toggle}
+              tooltip={isPinned ? <Trans>Compact view</Trans> : <Trans>Extended view</Trans>}
+              focusable={false}
+            />
+          </div>
+          <div className="sidebar-nav flex column box grow-fixed">
+            <SidebarNavItem
+              id="cluster"
+              isHidden={!isClusterAdmin}
+              url={clusterURL()}
+              text={<Trans>Cluster</Trans>}
+              icon={<Icon svg="kube"/>}
+            />
+            <SidebarNavItem
+              id="nodes"
+              isHidden={!isClusterAdmin}
+              url={nodesURL()}
+              text={<Trans>Nodes</Trans>}
+              icon={<Icon svg="nodes"/>}
+            />
+            <SidebarNavItem
+              id="workloads"
+              url={workloadsURL({ query })}
+              routePath={workloadsRoute.path}
+              subMenus={Workloads.tabRoutes}
+              text={<Trans>Workloads</Trans>}
+              icon={<Icon svg="workloads"/>}
+            />
+            <SidebarNavItem
+              id="config"
+              url={configURL({ query })}
+              routePath={configRoute.path}
+              subMenus={Config.tabRoutes}
+              text={<Trans>Configuration</Trans>}
+              icon={<Icon material="list"/>}
+            />
+            <SidebarNavItem
+              id="networks"
+              url={networkURL({ query })}
+              routePath={networkRoute.path}
+              subMenus={Network.tabRoutes}
+              text={<Trans>Network</Trans>}
+              icon={<Icon material="device_hub"/>}
+            />
+            <SidebarNavItem
+              id="storage"
+              url={storageURL({ query })}
+              routePath={storageRoute.path}
+              subMenus={Storage.tabRoutes}
+              icon={<Icon svg="storage"/>}
+              text={<Trans>Storage</Trans>}
+            />
+            <SidebarNavItem
+              id="namespaces"
+              url={namespacesURL()}
+              icon={<Icon material="layers"/>}
+              text={<Trans>Namespaces</Trans>}
+            />
+            <SidebarNavItem
+              id="events"
+              url={eventsURL({ query })}
+              routePath={eventRoute.path}
+              icon={<Icon material="access_time"/>}
+              text={<Trans>Events</Trans>}
+            />
+            <SidebarNavItem
+              id="apps"
+              url={appsURL({ query })}
+              subMenus={Apps.tabRoutes}
+              routePath={appsRoute.path}
+              icon={<Icon material="apps"/>}
+              text={<Trans>Apps</Trans>}
+            />
+            <SidebarNavItem
+              id="users"
+              url={usersManagementURL({ query })}
+              routePath={usersManagementRoute.path}
+              subMenus={UserManagement.tabRoutes}
+              icon={<Icon material="security"/>}
+              text={<Trans>Access Control</Trans>}
+            />
+            <SidebarNavItem
+              id="custom-resources"
+              isHidden={!isClusterAdmin}
+              url={crdURL()}
+              subMenus={CustomResources.tabRoutes}
+              routePath={crdRoute.path}
+              icon={<Icon material="extension"/>}
+              text={<Trans>Custom Resources</Trans>}
+            >
+              {this.renderCustomResources()}
+            </SidebarNavItem>
+          </div>
+        </div>
+      </SidebarContext.Provider>
+    )
+  }
+}
+
+interface SidebarNavItemProps {
+  id: string;
+  url: string;
+  text: React.ReactNode | string;
+  className?: string;
+  icon?: React.ReactNode;
+  isHidden?: boolean;
+  routePath?: string | string[];
+  subMenus?: TabRoute[];
+}
+
+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;
+
+  @computed get isExpanded() {
+    return navItemState.get(this.props.id);
+  }
+
+  toggleSubMenu = () => {
+    navItemState.set(this.props.id, !this.isExpanded);
+  }
+
+  isActive = () => {
+    const { routePath, url } = this.props;
+    const { pathname } = navigation.location;
+    return !!matchPath(pathname, {
+      path: routePath || url
+    });
+  }
+
+  render() {
+    const { isHidden, subMenus = [], icon, text, url, children, className } = this.props;
+    if (isHidden) {
+      return null;
+    }
+    const extendedView = (subMenus.length > 0 || children) && this.context.pinned;
+    if (extendedView) {
+      const isActive = this.isActive();
+      return (
+        <div className={cssNames("SidebarNavItem", className)}>
+          <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={this.isActive}>
+        {icon}
+        <span className="link-text">{text}</span>
+      </NavLink>
+    )
+  }
+}

dashboard/client/components/layout/sub-header.scss

@@ -0,0 +1,13 @@
+.SubHeader {
+  color: $textColorAccent;
+  font-weight: $font-weight-bold;
+  text-align: center;
+
+  &:not(.compact) {
+    padding: $padding * 2;
+  }
+
+  &.withLine {
+    border-bottom: 1px solid $borderColor;
+  }
+}

dashboard/client/components/layout/sub-header.tsx

@@ -0,0 +1,25 @@
+import "./sub-header.scss"
+import * as React from "react";
+import { cssNames } from "../../utils";
+
+export interface SubHeaderProps {
+  className?: string;
+  withLine?: boolean; // add bottom line
+  compact?: boolean; // no extra padding around content
+}
+
+export class SubHeader extends React.Component<SubHeaderProps> {
+  render() {
+    const { withLine, compact, children } = this.props;
+    let { className } = this.props;
+    className = cssNames("SubHeader", {
+      withLine,
+      compact,
+    }, className)
+    return (
+      <div className={className}>
+        {children}
+      </div>
+    )
+  }
+}

dashboard/client/components/layout/sub-title.scss

@@ -0,0 +1,14 @@
+.SubTitle {
+  --sub-title-spacing: #{$margin * 2};
+
+  text-transform: uppercase;
+  font-weight: bold;
+
+  &:not(.compact) {
+    padding-bottom: $margin;
+  }
+
+  &:not(:first-child) {
+    margin-top: var(--sub-title-spacing);
+  }
+}

dashboard/client/components/layout/sub-title.tsx

@@ -0,0 +1,24 @@
+import "./sub-title.scss"
+import * as React from "react";
+import { cssNames } from "../../utils";
+
+interface Props {
+  className?: string;
+  title: React.ReactNode;
+  compact?: boolean; // no bottom padding
+}
+
+export class SubTitle extends React.Component<Props> {
+  render() {
+    const { compact, title, children } = this.props;
+    let { className } = this.props;
+    className = cssNames("SubTitle", className, {
+      compact,
+    })
+    return (
+      <div className={className}>
+        {title} {children}
+      </div>
+    )
+  }
+}