hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Extension support page (#1112)

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
Co-authored-by: Jim Ehrismann <40840436+jim-docker@users.noreply.github.com>
This commit is contained in:
Roman 2020-10-24 09:24:54 +03:00 committed by GitHub
parent ce995f3deb
commit f3a0059355
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
67 changed files with 4511 additions and 553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -12,6 +12,6 @@ binaries/client/
binaries/server/
src/extensions/*/*.js
src/extensions/*/*.d.ts
src/extensions/example-extension/src/**
types/extension-api.d.ts
types/extension-renderer-api.d.ts
extensions/*/dist

2
extensions/example-extension/renderer.tsx
View File

@ -10,7 +10,7 @@ export default class ExampleExtension extends LensRendererExtension {
registerPages(registry: Registry.PageRegistry) {
this.disposers.push(
registry.add({
type: Registry.DynamicPageType.CLUSTER,
type: Registry.PageRegistryType.CLUSTER,
path: "/extension-example",
title: "Example Extension",
components: {

23
extensions/support-page/main.ts Normal file
View File

@ -0,0 +1,23 @@
import { LensMainExtension, Registry, windowManager } from "@k8slens/extensions";
import { supportPageURL } from "./src/support.route";
export default class SupportPageMainExtension extends LensMainExtension {
async onActivate() {
console.log("support page extension activated")
}
async registerAppMenus(registry: Registry.MenuRegistry) {
this.disposers.push(
registry.add({
parentId: "help",
label: "Support",
click() {
windowManager.navigate({
channel: "menu:navigate", // fixme: use windowManager.ensureMainWindow from Tray's PR
url: supportPageURL(),
});
}
})
)
}
}

3623
extensions/support-page/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

24
extensions/support-page/package.json Normal file
View File

@ -0,0 +1,24 @@
{
"name": "lens-support-page",
"version": "0.1.0",
"description": "Lens support page",
"main": "dist/main.js",
"renderer": "dist/renderer.js",
"scripts": {
"build": "webpack -p",
"dev": "webpack --watch"
},
"dependencies": {},
"devDependencies": {
"@types/node": "^14.11.11",
"@types/react": "^16.9.53",
"@types/react-router": "^5.1.8",
"@types/webpack": "^4.41.17",
"mobx": "^5.15.5",
"react": "^16.13.1",
"ts-loader": "^8.0.4",
"ts-node": "^9.0.0",
"typescript": "^4.0.3",
"webpack": "^4.44.2"
}
}

37
extensions/support-page/renderer.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import { Component, LensRendererExtension, Navigation, Registry } from "@k8slens/extensions";
import { supportPageRoute, supportPageURL } from "./src/support.route";
import { Support } from "./src/support";
export default class SupportPageRendererExtension extends LensRendererExtension {
async onActivate() {
console.log("support page extension activated")
}
registerPages(registry: Registry.PageRegistry) {
this.disposers.push(
registry.add({
...supportPageRoute,
type: Registry.PageRegistryType.GLOBAL,
url: supportPageURL(),
components: {
Page: Support,
}
})
)
}
registerStatusBarIcon(registry: Registry.StatusBarRegistry) {
this.disposers.push(
registry.add({
icon: (
<Component.Icon
material="support"
tooltip="Support"
onClick={() => Navigation.navigate(supportPageURL())}
/>
)
})
)
}
}

7
extensions/support-page/src/support.route.ts Normal file
View File

@ -0,0 +1,7 @@
import type { RouteProps } from "react-router";
export const supportPageRoute: RouteProps = {
path: "/support"
}
export const supportPageURL = () => supportPageRoute.path.toString();

29
extensions/support-page/src/support.tsx Normal file
View File

@ -0,0 +1,29 @@
// TODO: figure out how to consume styles / handle import "./support.scss"
// TODO: support localization / figure out how to extract / consume i18n strings
import React from "react"
import { observer } from "mobx-react"
import { CommonVars, Component } from "@k8slens/extensions";
@observer
export class Support extends React.Component {
render() {
const { PageLayout } = Component;
const { slackUrl, issuesTrackerUrl } = CommonVars;
return (
<PageLayout showOnTop className="Support" header={<h2>Support</h2>}>
<h2>Community Slack Channel</h2>
<p>
Ask a question, see what's being discussed, join the conversation <a href={slackUrl} target="_blank">here</a>
</p>
<h2>Report an Issue</h2>
<p>
Review existing issues or open a new one <a href={issuesTrackerUrl} target="_blank">here</a>
</p>
{/*<h2><Trans>Commercial Support</Trans></h2>*/}
</PageLayout>
);
}
}

30
extensions/support-page/tsconfig.json Normal file
View File

@ -0,0 +1,30 @@
{
"compilerOptions": {
"outDir": "dist",
"baseUrl": ".",
"module": "CommonJS",
"target": "ES2017",
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"moduleResolution": "Node",
"sourceMap": false,
"declaration": false,
"strict": false,
"noImplicitAny": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "react",
"paths": {
"*": [
"node_modules/*",
"../../types/*"
]
}
},
"include": [
"renderer.ts",
"../../src/extensions/npm/**/*.d.ts",
"src/**/*"
]
}

68
extensions/support-page/webpack.config.ts Normal file
View File

@ -0,0 +1,68 @@
import path from "path"
const outputPath = path.resolve(__dirname, 'dist');
// TODO: figure out how to share base TS and Webpack configs from Lens (npm, filesystem, etc?)
const lensExternals = {
"@k8slens/extensions": "var global.LensExtensions",
"react": "var global.React",
"mobx": "var global.Mobx",
"mobx-react": "var global.MobxReact",
};
export default [
{
entry: './main.ts',
context: __dirname,
target: "electron-main",
mode: "production",
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
externals: [
lensExternals,
],
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
libraryTarget: "commonjs2",
globalObject: "this",
filename: 'main.js',
path: outputPath,
},
},
{
entry: './renderer.tsx',
context: __dirname,
target: "electron-renderer",
mode: "production",
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
externals: [
lensExternals,
],
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
libraryTarget: "commonjs2",
globalObject: "this",
filename: 'renderer.js',
path: outputPath,
},
},
];

4
extensions/telemetry/package.json
View File

@ -9,8 +9,8 @@
"styles": []
},
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "npm run build --watch"
"build": "webpack -p",
"dev": "webpack --watch"
},
"dependencies": {},
"devDependencies": {

2
extensions/telemetry/tsconfig.json
View File

@ -26,5 +26,5 @@
"renderer.ts",
"../../src/extensions/npm/**/*.d.ts",
"src/**/*"
],
]
}

4
package.json
View File

@ -176,7 +176,8 @@
"extensions": [
"telemetry",
"pod-menu",
"node-menu"
"node-menu",
"support-page"
]
},
"dependencies": {
@ -314,7 +315,6 @@
"jest": "^26.0.1",
"jest-mock-extended": "^1.0.10",
"make-plural": "^6.2.1",
"material-design-icons": "^3.0.1",
"mini-css-extract-plugin": "^0.9.0",
"mobx-react": "^6.2.2",
"moment": "^2.26.0",

5
src/common/vars.ts
View File

@ -21,11 +21,6 @@ export const rendererDir = path.join(contextDir, "src/renderer");
export const htmlTemplate = path.resolve(rendererDir, "template.html");
export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
// Extensions
export const extensionsLibName = `${appName}-extensions.api`
export const extensionsRendererLibName = `${appName}-extensions-renderer.api`
export const extensionsDir = path.join(contextDir, "src/extensions");
// Special runtime paths
defineGlobal("__static", {
get() {

27
src/extensions/app-preference-registry.ts
View File

@ -1,27 +0,0 @@
import { observable } from "mobx"
import React from "react"
export interface AppPreferenceComponents {
Hint: React.ComponentType<any>;
Input: React.ComponentType<any>;
}
export interface AppPreferenceRegistration {
title: string;
components: AppPreferenceComponents;
}
export class AppPreferenceRegistry {
preferences = observable.array<AppPreferenceRegistration>([], { deep: false });
add(preference: AppPreferenceRegistration) {
this.preferences.push(preference)
return () => {
this.preferences.replace(
this.preferences.filter(c => c !== preference)
)
};
}
}
export const appPreferenceRegistry = new AppPreferenceRegistry()

22
src/extensions/core-api/index.ts Normal file
View File

@ -0,0 +1,22 @@
// Lens-extensions api developer's kit
export * from "../lens-main-extension"
export * from "../lens-renderer-extension"
import type { WindowManager } from "../../main/window-manager";
// APIs
import * as EventBus from "./event-bus"
import * as Store from "./stores"
import * as Util from "./utils"
import * as Registry from "../registries"
import * as CommonVars from "../../common/vars";
export let windowManager: WindowManager;
export {
EventBus,
Store,
Util,
Registry,
CommonVars,
}

4
src/extensions/core-api/registries.ts
View File

@ -1,4 +0,0 @@
export type { DynamicPageType, PageRegistry } from "../page-registry"
export type { AppPreferenceRegistry } from "../app-preference-registry"
export type { KubeObjectMenuRegistry } from "../../renderer/api/kube-object-menu-registry"
export type { KubeObjectDetailRegistry } from "../../renderer/api/kube-object-detail-registry"

17
src/extensions/core-extension-api.ts
View File

@ -1,17 +0,0 @@
// Lens-extensions api developer's kit
export type { LensExtensionRuntimeEnv } from "./lens-runtime";
export * from "./lens-main-extension"
export * from "./lens-renderer-extension"
// APIs
import * as EventBus from "./core-api/event-bus"
import * as Store from "./core-api/stores"
import * as Util from "./core-api/utils"
import * as Registry from "./core-api/registries"
export {
EventBus,
Registry,
Store,
Util
}

2
src/extensions/dynamic-page.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { cssNames } from "../renderer/utils";
import { TabLayout } from "../renderer/components/layout/tab-layout";
import { PageRegistration } from "./page-registry"
import { PageRegistration } from "./registries/page-registry"
export class DynamicPage extends React.Component<{ page: PageRegistration }> {
render() {

6
src/extensions/extension-api.ts
View File

@ -1,2 +1,4 @@
export * from "./core-extension-api"
export * from "./renderer-extension-api"
// Extension-api types generation bundle (used by rollup.js)
export * from "./core-api"
export * from "./renderer-api"

63
src/extensions/extension-loader.ts
View File

@ -1,14 +1,12 @@
import type { ExtensionId, LensExtension, ExtensionManifest, ExtensionModel } from "./lens-extension"
import type { ExtensionId, ExtensionManifest, ExtensionModel, LensExtension } from "./lens-extension"
import type { LensMainExtension } from "./lens-main-extension"
import type { LensRendererExtension } from "./lens-renderer-extension"
import { broadcastIpc } from "../common/ipc"
import type { LensExtensionRuntimeEnv } from "./lens-runtime"
import path from "path"
import { broadcastIpc } from "../common/ipc"
import { observable, reaction, toJS, } from "mobx"
import logger from "../main/logger"
import { app, remote, ipcRenderer } from "electron"
import { pageRegistry } from "./page-registry";
import { appPreferenceRegistry } from "./app-preference-registry"
import { kubeObjectMenuRegistry } from "../renderer/api/kube-object-menu-registry"
import { app, ipcRenderer, remote } from "electron"
import { appPreferenceRegistry, kubeObjectMenuRegistry, menuRegistry, pageRegistry, statusBarRegistry } from "./registries";
export interface InstalledExtension extends ExtensionModel {
manifestPath: string;
@ -36,33 +34,34 @@ export class ExtensionLoader {
}
}
loadOnClusterRenderer(getLensRuntimeEnv: () => LensExtensionRuntimeEnv) {
logger.info('[EXTENSIONS-LOADER]: load on cluster renderer')
this.autoloadExtensions(getLensRuntimeEnv, (instance: LensRendererExtension) => {
loadOnMain() {
logger.info('[EXTENSIONS-LOADER]: load on main')
this.autoloadExtensions((instance: LensMainExtension) => {
instance.registerAppMenus(menuRegistry);
})
}
loadOnClusterManagerRenderer() {
logger.info('[EXTENSIONS-LOADER]: load on main renderer (cluster manager)')
this.autoloadExtensions((instance: LensRendererExtension) => {
instance.registerPages(pageRegistry)
instance.registerAppPreferences(appPreferenceRegistry)
instance.registerStatusBarIcon(statusBarRegistry)
})
}
loadOnClusterRenderer() {
logger.info('[EXTENSIONS-LOADER]: load on cluster renderer (dashboard)')
this.autoloadExtensions((instance: LensRendererExtension) => {
instance.registerPages(pageRegistry)
instance.registerKubeObjectMenus(kubeObjectMenuRegistry)
})
}
loadOnMainRenderer(getLensRuntimeEnv: () => LensExtensionRuntimeEnv) {
logger.info('[EXTENSIONS-LOADER]: load on main renderer')
this.autoloadExtensions(getLensRuntimeEnv, (instance: LensRendererExtension) => {
instance.registerPages(pageRegistry)
instance.registerAppPreferences(appPreferenceRegistry)
})
}
loadOnMain(getLensRuntimeEnv: () => LensExtensionRuntimeEnv) {
logger.info('[EXTENSIONS-LOADER]: load on main')
this.autoloadExtensions(getLensRuntimeEnv, (instance: LensExtension) => {
// todo
})
}
protected autoloadExtensions(getLensRuntimeEnv: () => LensExtensionRuntimeEnv, callback: (instance: LensExtension) => void) {
protected autoloadExtensions(callback: (instance: LensExtension) => void) {
return reaction(() => this.extensions.toJS(), (installedExtensions) => {
for(const [id, ext] of installedExtensions) {
let instance = this.instances.get(ext.manifestPath)
for (const [id, ext] of installedExtensions) {
let instance = this.instances.get(ext.name)
if (!instance) {
const extensionModule = this.requireExtension(ext)
if (!extensionModule) {
@ -70,9 +69,9 @@ export class ExtensionLoader {
}
const LensExtensionClass = extensionModule.default;
instance = new LensExtensionClass({ ...ext.manifest, manifestPath: ext.manifestPath, id: ext.manifestPath }, ext.manifest);
instance.enable(getLensRuntimeEnv())
instance.enable();
callback(instance)
this.instances.set(ext.id, instance)
this.instances.set(ext.name, instance)
}
}
}, {
@ -106,7 +105,9 @@ export class ExtensionLoader {
const extension = this.getById(id);
if (extension) {
const instance = this.instances.get(extension.id)
if (instance) { await instance.disable() }
if (instance) {
await instance.disable()
}
this.extensions.delete(id);
}
}

6
src/extensions/lens-extension.ts
View File

@ -1,4 +1,3 @@
import type { LensExtensionRuntimeEnv } from "./lens-runtime";
import { readJsonSync } from "fs-extra";
import { action, observable, toJS } from "mobx";
import logger from "../main/logger";
@ -34,7 +33,6 @@ export class LensExtension implements ExtensionModel {
@observable manifest: ExtensionManifest;
@observable manifestPath: string;
@observable isEnabled = false;
@observable.ref runtime: LensExtensionRuntimeEnv;
constructor(model: ExtensionModel, manifest: ExtensionManifest) {
this.importModel(model, manifest);
@ -56,9 +54,8 @@ export class LensExtension implements ExtensionModel {
// mock
}
async enable(runtime: LensExtensionRuntimeEnv) {
async enable() {
this.isEnabled = true;
this.runtime = runtime;
logger.info(`[EXTENSION]: enabled ${this.name}@${this.version}`);
this.onActivate();
}
@ -66,7 +63,6 @@ export class LensExtension implements ExtensionModel {
async disable() {
this.onDeactivate();
this.isEnabled = false;
this.runtime = null;
this.disposers.forEach(cleanUp => cleanUp());
this.disposers.length = 0;
logger.info(`[EXTENSION]: disabled ${this.name}@${this.version}`);

10
src/extensions/lens-main-extension.ts
View File

@ -1,11 +1,17 @@
import { LensExtension } from "./lens-extension"
import type { MenuRegistry } from "./registries/menu-registry";
import type { StatusBarRegistry } from "./registries/status-bar-registry";
export class LensMainExtension extends LensExtension {
async registerAppMenus() {
registerAppMenus(registry: MenuRegistry) {
//
}
async registerPrometheusProviders(registry: any) {
registerStatusBarIcon(registry: StatusBarRegistry) {
//
}
registerPrometheusProviders(registry: any) {
//
}
}

9
src/extensions/lens-renderer-extension.ts
View File

@ -1,10 +1,7 @@
import { LensExtension } from "./lens-extension"
import type { PageRegistry } from "./page-registry"
import type { AppPreferenceRegistry } from "./app-preference-registry";
import type { KubeObjectMenuRegistry } from "../renderer/api/kube-object-menu-registry";
import type { PageRegistry, AppPreferenceRegistry, StatusBarRegistry, KubeObjectMenuRegistry } from "./registries"
export class LensRendererExtension extends LensExtension {
registerPages(registry: PageRegistry) {
return
}
@ -13,6 +10,10 @@ export class LensRendererExtension extends LensExtension {
return
}
registerStatusBarIcon(registry: StatusBarRegistry) {
return
}
registerKubeObjectMenus(registry: KubeObjectMenuRegistry) {
return
}

13
src/extensions/lens-runtime.ts
View File

@ -1,13 +0,0 @@
// Lens extension runtime params available to extensions after activation
import logger from "../main/logger";
export interface LensExtensionRuntimeEnv {
logger: typeof logger;
}
export function getLensRuntime(): LensExtensionRuntimeEnv {
return {
logger
}
}

52
src/extensions/page-registry.ts
View File

@ -1,52 +0,0 @@
// Extensions-api -> Dynamic pages
import { computed, observable } from "mobx";
import React from "react";
import { RouteProps } from "react-router";
import { IconProps } from "../renderer/components/icon";
import { IClassName } from "../renderer/utils";
import { TabRoute } from "../renderer/components/layout/tab-layout";
export enum DynamicPageType {
GLOBAL = "lens-scope",
CLUSTER = "cluster-view-scope",
}
export interface PageRegistration extends RouteProps {
className?: IClassName;
url?: string; // initial url to be used for building menus and tabs, otherwise "path" applied by default
path: string; // route-path
title: React.ReactNode; // used in sidebar's & tabs-layout
type: DynamicPageType;
components: PageComponents;
subPages?: (PageRegistration & TabRoute)[];
}
export interface PageComponents {
Page: React.ComponentType<any>;
MenuIcon: React.ComponentType<IconProps>;
}
export class PageRegistry {
protected pages = observable.array<PageRegistration>([], { deep: false });
@computed get globalPages() {
return this.pages.filter(page => page.type === DynamicPageType.GLOBAL);
}
@computed get clusterPages() {
return this.pages.filter(page => page.type === DynamicPageType.CLUSTER);
}
// todo: verify paths to avoid collision with existing pages
add(params: PageRegistration) {
this.pages.push(params);
return () => {
this.pages.replace(
this.pages.filter(page => page.components !== params.components)
)
};
}
}
export const pageRegistry = new PageRegistry();

17
src/extensions/registries/app-preference-registry.ts Normal file
View File

@ -0,0 +1,17 @@
import type React from "react"
import { BaseRegistry } from "./base-registry";
export interface AppPreferenceComponents {
Hint: React.ComponentType<any>;
Input: React.ComponentType<any>;
}
export interface AppPreferenceRegistration {
title: string;
components: AppPreferenceComponents;
}
export class AppPreferenceRegistry extends BaseRegistry<AppPreferenceRegistration> {
}
export const appPreferenceRegistry = new AppPreferenceRegistry()

17
src/extensions/registries/base-registry.ts Normal file
View File

@ -0,0 +1,17 @@
// Base class for extensions-api registries
import { observable } from "mobx";
export class BaseRegistry<T = any> {
protected items = observable<T>([], { deep: false });
getItems(): T[] {
return this.items.toJS();
}
add(item: T) {
this.items.push(item);
return () => {
this.items.remove(item); // works because of {deep: false};
}
}
}

7
src/extensions/registries/index.ts Normal file
View File

@ -0,0 +1,7 @@
// All registries managed by extensions api
export * from "./page-registry"
export * from "./menu-registry"
export * from "./app-preference-registry"
export * from "./status-bar-registry"
export * from "./kube-object-menu-registry";

15
src/renderer/api/kube-object-menu-registry.ts → src/extensions/registries/kube-object-menu-registry.ts
View File

@ -1,5 +1,5 @@
import { observable } from "mobx"
import React from "react"
import { BaseRegistry } from "./base-registry";
export interface KubeObjectMenuComponents {
MenuItem: React.ComponentType<any>;
@ -11,18 +11,7 @@ export interface KubeObjectMenuRegistration {
components: KubeObjectMenuComponents;
}
export class KubeObjectMenuRegistry {
items = observable.array<KubeObjectMenuRegistration>([], { deep: false });
add(item: KubeObjectMenuRegistration) {
this.items.push(item)
return () => {
this.items.replace(
this.items.filter(c => c !== item)
)
};
}
export class KubeObjectMenuRegistry extends BaseRegistry<KubeObjectMenuRegistration> {
getItemsForKind(kind: string, apiVersion: string) {
return this.items.filter((item) => {
return item.kind === kind && item.apiVersions.includes(apiVersion)

14
src/extensions/registries/menu-registry.ts Normal file
View File

@ -0,0 +1,14 @@
// Extensions API -> Global menu customizations
import type { MenuTopId } from "../../main/menu";
import type { MenuItemConstructorOptions } from "electron";
import { BaseRegistry } from "./base-registry";
export interface MenuRegistration extends MenuItemConstructorOptions {
parentId?: MenuTopId;
}
export class MenuRegistry extends BaseRegistry<MenuRegistration> {
}
export const menuRegistry = new MenuRegistry();

40
src/extensions/registries/page-registry.ts Normal file
View File

@ -0,0 +1,40 @@
// Extensions-api -> Dynamic pages
import type React from "react";
import type { RouteProps } from "react-router";
import type { IconProps } from "../../renderer/components/icon";
import type { IClassName } from "../../renderer/utils";
import type { TabRoute } from "../../renderer/components/layout/tab-layout";
import { BaseRegistry } from "./base-registry";
import { computed } from "mobx";
export enum PageRegistryType {
GLOBAL = "lens-scope",
CLUSTER = "cluster-view-scope",
}
export interface PageRegistration extends RouteProps {
type: PageRegistryType;
components: PageComponents;
className?: IClassName;
url?: string; // initial url to be used for building menus and tabs, otherwise "path" applied by default
title?: React.ReactNode; // used in sidebar's & tabs-layout if provided
subPages?: (PageRegistration & TabRoute)[];
}
export interface PageComponents {
Page: React.ComponentType<any>;
MenuIcon?: React.ComponentType<IconProps>;
}
export class PageRegistry extends BaseRegistry<PageRegistration> {
@computed get globalPages() {
return this.items.filter(page => page.type === PageRegistryType.GLOBAL);
}
@computed get clusterPages() {
return this.items.filter(page => page.type === PageRegistryType.CLUSTER);
}
}
export const pageRegistry = new PageRegistry();

13
src/extensions/registries/status-bar-registry.ts Normal file
View File

@ -0,0 +1,13 @@
// Extensions API -> Status bar customizations
import React from "react";
import { BaseRegistry } from "./base-registry";
export interface StatusBarRegistration {
icon?: React.ReactNode;
}
export class StatusBarRegistry extends BaseRegistry<StatusBarRegistration> {
}
export const statusBarRegistry = new StatusBarRegistry();

2
src/extensions/renderer-api/components.ts
View File

@ -1,10 +1,12 @@
// TODO: add more common re-usable UI components + refactor interfaces (Props -> ComponentProps)
export * from "../../renderer/components/icon"
export * from "../../renderer/components/checkbox"
export * from "../../renderer/components/tooltip"
export * from "../../renderer/components/button"
export * from "../../renderer/components/tabs"
export * from "../../renderer/components/badge"
export * from "../../renderer/components/layout/page-layout"
export * from "../../renderer/components/drawer"
// kube helpers

12
src/extensions/renderer-api/index.ts Normal file
View File

@ -0,0 +1,12 @@
// Lens-extensions apis, required in renderer process runtime
// APIs
import * as Component from "./components"
import * as K8sApi from "./k8s-api"
import * as Navigation from "./navigation"
export {
Component,
K8sApi,
Navigation,
}

10
src/extensions/renderer-extension-api.ts
View File

@ -1,10 +0,0 @@
// APIs
import * as Component from "./renderer-api/components"
import * as K8sApi from "./renderer-api/k8s-api"
import * as Navigation from "./renderer-api/navigation"
export {
Component,
K8sApi,
Navigation,
}

25
src/main/index.ts
View File

@ -2,6 +2,8 @@
import "../common/system-ca"
import "../common/prometheus-providers"
import * as Mobx from "mobx"
import * as LensExtensions from "../extensions/core-api";
import { app, dialog } from "electron"
import { appName } from "../common/vars";
import path from "path"
@ -17,17 +19,9 @@ import { clusterStore } from "../common/cluster-store"
import { userStore } from "../common/user-store";
import { workspaceStore } from "../common/workspace-store";
import { appEventBus } from "../common/event-bus"
import * as LensExtensions from "../extensions/core-extension-api";
import { extensionManager } from "../extensions/extension-manager";
import { extensionLoader } from "../extensions/extension-loader";
import { getLensRuntime } from "../extensions/lens-runtime";
import logger from "./logger"
import * as Mobx from "mobx"
export {
LensExtensions,
Mobx
}
const workingDir = path.join(app.getPath("appData"), appName);
app.setName(appName);
@ -35,7 +29,6 @@ if (!process.env.CICD) {
app.setPath("userData", workingDir);
}
let windowManager: WindowManager;
let clusterManager: ClusterManager;
let proxyServer: LensProxy;
@ -83,9 +76,9 @@ async function main() {
}
// create window manager and open app
windowManager = new WindowManager(proxyPort);
LensExtensionsApi.windowManager = new WindowManager(proxyPort);
extensionLoader.loadOnMain(getLensRuntime)
extensionLoader.loadOnMain()
extensionLoader.extensions.replace(await extensionManager.load())
extensionLoader.broadcastExtensions()
@ -102,3 +95,13 @@ app.on("will-quit", async (event) => {
if (clusterManager) clusterManager.stop()
app.exit();
})
// Extensions-api runtime exports
export const LensExtensionsApi = {
...LensExtensions,
};
export {
Mobx,
LensExtensionsApi as LensExtensions,
}

39
src/main/menu.ts
View File

@ -6,8 +6,11 @@ import { addClusterURL } from "../renderer/components/+add-cluster/add-cluster.r
import { preferencesURL } from "../renderer/components/+preferences/preferences.route";
import { whatsNewURL } from "../renderer/components/+whats-new/whats-new.route";
import { clusterSettingsURL } from "../renderer/components/+cluster-settings/cluster-settings.route";
import { menuRegistry } from "../extensions/registries/menu-registry";
import logger from "./logger";
export type MenuTopId = "mac" | "file" | "edit" | "view" | "help"
export function initMenu(windowManager: WindowManager) {
autorun(() => buildMenu(windowManager), {
delay: 100
@ -53,8 +56,6 @@ export function buildMenu(windowManager: WindowManager) {
})
}
const mt: MenuItemConstructorOptions[] = [];
const macAppMenu: MenuItemConstructorOptions = {
label: app.getName(),
submenu: [
@ -83,10 +84,6 @@ export function buildMenu(windowManager: WindowManager) {
]
};
if (isMac) {
mt.push(macAppMenu);
}
const fileMenu: MenuItemConstructorOptions = {
label: "File",
submenu: [
@ -124,7 +121,6 @@ export function buildMenu(windowManager: WindowManager) {
])
]
};
mt.push(fileMenu)
const editMenu: MenuItemConstructorOptions = {
label: 'Edit',
@ -140,7 +136,7 @@ export function buildMenu(windowManager: WindowManager) {
{ role: 'selectAll' },
]
};
mt.push(editMenu)
const viewMenu: MenuItemConstructorOptions = {
label: 'View',
submenu: [
@ -174,7 +170,6 @@ export function buildMenu(windowManager: WindowManager) {
{ role: 'togglefullscreen' }
]
};
mt.push(viewMenu)
const helpMenu: MenuItemConstructorOptions = {
role: 'help',
@ -214,7 +209,29 @@ export function buildMenu(windowManager: WindowManager) {
]
};
mt.push(helpMenu)
// Prepare menu items order
const appMenu: Record<MenuTopId, MenuItemConstructorOptions> = {
mac: macAppMenu,
file: fileMenu,
edit: editMenu,
view: viewMenu,
help: helpMenu,
}
Menu.setApplicationMenu(Menu.buildFromTemplate(mt));
// Modify menu from extensions-api
menuRegistry.getItems().forEach(({ parentId, ...menuItem }) => {
try {
const topMenu = appMenu[parentId].submenu as MenuItemConstructorOptions[];
topMenu.push(menuItem);
} catch (err) {
logger.error(`[MENU]: can't register menu item, parentId=${parentId}`, { menuItem })
}
})
if (!isMac) {
delete appMenu.mac
}
const menu = Menu.buildFromTemplate(Object.values(appMenu));
Menu.setApplicationMenu(menu);
}

1
src/renderer/bootstrap.tsx
View File

@ -1,4 +1,5 @@
import "./components/app.scss"
import React from "react";
import * as Mobx from "mobx"
import * as MobxReact from "mobx-react"

106
src/renderer/components/+cluster-settings/cluster-settings.scss
View File

@ -1,87 +1,51 @@
.ClusterSettings {
.WizardLayout {
grid-template-columns: unset;
grid-template-rows: 76px 1fr;
padding: 0;
$spacing: $padding * 3;
.head-col {
justify-content: space-between;
> .content-wrapper {
--flex-gap: #{$spacing};
}
:nth-child(2) {
flex: 1 0 0;
}
}
// TODO: move sub-component styles to separate files
.admin-note {
font-size: small;
opacity: 0.5;
margin-left: $margin;
}
.content-col {
margin: 0;
padding-top: $padding * 3;
background-color: $clusterSettingsBackground;
.button-area {
margin-top: $margin * 2;
}
.SubTitle {
text-transform: none;
}
.file-loader {
margin-top: $margin * 2;
}
> div {
margin-top: $margin * 5;
}
.status-table {
margin: $spacing 0;
.admin-note {
font-size: small;
opacity: 0.5;
margin-left: $margin;
}
.Table {
border: 1px solid var(--drawerSubtitleBackground);
border-radius: $radius;
.button-area {
margin-top: $margin * 2;
}
.TableRow {
&:not(:last-of-type) {
border-bottom: 1px solid var(--drawerSubtitleBackground);
}
.file-loader {
margin-top: $margin * 2;
}
.value {
flex-grow: 2;
word-break: break-word;
color: var(--textColorSecondary);
}
.hint {
font-size: smaller;
opacity: 0.8;
}
p + p, .hint + p {
padding-top: $padding;
}
}
.status-table {
margin: $margin * 3 0;
.Table {
border: 1px solid var(--drawerSubtitleBackground);
border-radius: $radius;
.TableRow {
&:not(:last-of-type) {
border-bottom: 1px solid var(--drawerSubtitleBackground);
}
.value {
flex-grow: 2;
word-break: break-word;
color: var(--textColorSecondary);
}
.link {
@include pseudo-link;
}
.link {
@include pseudo-link;
}
}
}
}
.Input, .Select {
margin-top: 10px;
}
.Select {
&__control {
box-shadow: 0 0 0 1px $borderFaintColor;
}
}
.Input, .Select {
margin-top: $padding;
}
}

47
src/renderer/components/+cluster-settings/cluster-settings.tsx
View File

@ -1,21 +1,19 @@
import "./cluster-settings.scss";
import React from "react";
import { observer, disposeOnUnmount } from "mobx-react";
import { autorun } from "mobx";
import { disposeOnUnmount, observer } from "mobx-react";
import { Features } from "./features";
import { Removal } from "./removal";
import { Status } from "./status";
import { General } from "./general";
import { Cluster } from "../../../main/cluster";
import { WizardLayout } from "../layout/wizard-layout";
import { ClusterIcon } from "../cluster-icon";
import { Icon } from "../icon";
import { navigate } from "../../navigation";
import { IClusterSettingsRouteParams } from "./cluster-settings.route";
import { clusterStore } from "../../../common/cluster-store";
import { RouteComponentProps } from "react-router";
import { clusterIpc } from "../../../common/cluster-ipc";
import { autorun } from "mobx";
import { PageLayout } from "../layout/page-layout";
interface Props extends RouteComponentProps<IClusterSettingsRouteParams> {
}
@ -27,7 +25,6 @@ export class ClusterSettings extends React.Component<Props> {
}
async componentDidMount() {
window.addEventListener('keydown', this.onEscapeKey);
disposeOnUnmount(this,
autorun(() => {
this.refreshCluster();
@ -35,51 +32,29 @@ export class ClusterSettings extends React.Component<Props> {
)
}
componentWillUnmount() {
window.removeEventListener('keydown', this.onEscapeKey);
}
onEscapeKey = (evt: KeyboardEvent) => {
if (evt.code === "Escape") {
evt.stopPropagation();
this.close();
}
}
refreshCluster = async () => {
if(this.cluster) {
if (this.cluster) {
await clusterIpc.activate.invokeFromRenderer(this.cluster.id);
await clusterIpc.refresh.invokeFromRenderer(this.cluster.id);
}
}
close() {
navigate("/");
}
render() {
const cluster = this.cluster
if (!cluster) return null;
const header = (
<>
<ClusterIcon
cluster={cluster}
showErrors={false}
showTooltip={false}
/>
<ClusterIcon cluster={cluster} showErrors={false} showTooltip={false}/>
<h2>{cluster.preferences.clusterName}</h2>
<Icon material="close" onClick={this.close} big/>
</>
);
return (
<div className="ClusterSettings">
<WizardLayout header={header} centered>
<Status cluster={cluster}></Status>
<General cluster={cluster}></General>
<Features cluster={cluster}></Features>
<Removal cluster={cluster}></Removal>
</WizardLayout>
</div>
<PageLayout className="ClusterSettings" header={header}>
<Status cluster={cluster}></Status>
<General cluster={cluster}></General>
<Features cluster={cluster}></Features>
<Removal cluster={cluster}></Removal>
</PageLayout>
);
}
}

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

@ -41,10 +41,10 @@ export class ClusterHomeDirSetting extends React.Component<Props> {
onBlur={this.save}
placeholder="$HOME"
/>
<span className="hint">
<small className="hint">
An explicit start path where the terminal will be launched,{" "}
this is used as the current working directory (cwd) for the shell process.
</span>
</small>
</>
);
}

6
src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
View File

@ -90,7 +90,7 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
}}
options={options}
/>
<span className="hint">What query format is used to fetch metrics from Prometheus</span>
<small className="hint">What query format is used to fetch metrics from Prometheus</small>
{this.canEditPrometheusPath && (
<>
<p>Prometheus service address.</p>
@ -101,10 +101,10 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
onBlur={this.onSavePath}
placeholder="<namespace>/<service>:<port>"
/>
<span className="hint">
<small className="hint">
An address to an existing Prometheus installation{" "}
({'<namespace>/<service>:<port>'}). Lens tries to auto-detect address if left empty.
</span>
</small>
</>
)}
</>

6
src/renderer/components/+nodes/nodes.tsx
View File

@ -55,7 +55,7 @@ export class Nodes extends React.Component<Props> {
max={cores}
value={usage}
tooltip={{
position: TooltipPosition.BOTTOM,
preferredPositions: TooltipPosition.BOTTOM,
children: _i18n._(t`CPU:`) + ` ${Math.ceil(usage * 100) / cores}\%, ` + _i18n._(t`cores:`) + ` ${cores}`
}}
/>
@ -72,7 +72,7 @@ export class Nodes extends React.Component<Props> {
max={capacity}
value={usage}
tooltip={{
position: TooltipPosition.BOTTOM,
preferredPositions: TooltipPosition.BOTTOM,
children: _i18n._(t`Memory:`) + ` ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`
}}
/>
@ -89,7 +89,7 @@ export class Nodes extends React.Component<Props> {
max={capacity}
value={usage}
tooltip={{
position: TooltipPosition.BOTTOM,
preferredPositions: TooltipPosition.BOTTOM,
children: _i18n._(t`Disk:`) + ` ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`
}}
/>

62
src/renderer/components/+preferences/preferences.scss
View File

@ -1,60 +1,24 @@
.Preferences {
position: fixed!important; // Allows to cover ClustersMenu
z-index: 1;
$spacing: $padding * 2;
.WizardLayout {
grid-template-columns: unset;
grid-template-rows: 76px 1fr;
padding: 0;
.repos {
position: relative;
.content-col {
padding: $padding * 8 0;
background-color: $clusterSettingsBackground;
h2 {
margin-bottom: $margin * 2;
&:not(:first-child) {
margin-top: $margin * 3;
}
}
.SubTitle {
text-transform: none;
margin: 0!important;
}
.repos {
position: relative;
.Badge {
display: flex;
margin: 0;
margin-bottom: 1px;
padding: $padding $padding * 2;
}
}
.hint {
margin-top: -$margin;
}
.Badge {
display: flex;
margin: 0;
margin-bottom: 1px;
padding: $padding $spacing;
}
}
.is-mac & {
.WizardLayout .head-col {
padding-top: 32px;
overflow: hidden;
.Icon {
margin-top: -$margin * 2;
}
.extensions {
h2 {
margin: $spacing 0;
}
}
.Select {
&__control {
box-shadow: 0 0 0 1px $borderFaintColor;
&:empty {
display: none;
}
}
}

160
src/renderer/components/+preferences/preferences.tsx
View File

@ -1,10 +1,10 @@
import "./preferences.scss"
import React from "react";
import { observer } from "mobx-react";
import { action, computed, observable } from "mobx";
import { t, Trans } from "@lingui/macro";
import { _i18n } from "../../i18n";
import { WizardLayout } from "../layout/wizard-layout";
import { Icon } from "../icon";
import { Select, SelectOption } from "../select";
import { userStore } from "../../../common/user-store";
@ -14,10 +14,10 @@ import { Checkbox } from "../checkbox";
import { Notifications } from "../notifications";
import { Badge } from "../badge";
import { themeStore } from "../../theme.store";
import { history } from "../../navigation";
import { Tooltip } from "../tooltip";
import { KubectlBinaries } from "./kubectl-binaries";
import { appPreferenceRegistry } from "../../../extensions/app-preference-registry";
import { appPreferenceRegistry } from "../../../extensions/registries/app-preference-registry";
import { PageLayout } from "../layout/page-layout";
@observer
export class Preferences extends React.Component {
@ -41,21 +41,9 @@ export class Preferences extends React.Component {
}
async componentDidMount() {
window.addEventListener('keydown', this.onEscapeKey);
await this.loadHelmRepos();
}
componentWillUnmount() {
window.removeEventListener('keydown', this.onEscapeKey);
}
onEscapeKey = (evt: KeyboardEvent) => {
if (evt.code === "Escape") {
evt.stopPropagation();
history.goBack();
}
}
@action
async loadHelmRepos() {
this.helmLoading = true;
@ -115,91 +103,85 @@ export class Preferences extends React.Component {
render() {
const { preferences } = userStore;
const extensionPreferences = appPreferenceRegistry.preferences
const header = (
<>
<h2>Preferences</h2>
<Icon material="close" big onClick={history.goBack}/>
</>
);
const header = <h2><Trans>Preferences</Trans></h2>;
return (
<div className="Preferences">
<WizardLayout header={header} centered>
<h2><Trans>Color Theme</Trans></h2>
<Select
options={this.themeOptions}
value={preferences.colorTheme}
onChange={({ value }: SelectOption) => preferences.colorTheme = value}
/>
<PageLayout showOnTop className="Preferences" header={header}>
<h2><Trans>Color Theme</Trans></h2>
<Select
options={this.themeOptions}
value={preferences.colorTheme}
onChange={({ value }: SelectOption) => preferences.colorTheme = value}
/>
<h2><Trans>HTTP Proxy</Trans></h2>
<Input
theme="round-black"
placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
value={this.httpProxy}
onChange={v => this.httpProxy = v}
onBlur={() => preferences.httpsProxy = this.httpProxy}
/>
<small className="hint">
<Trans>Proxy is used only for non-cluster communication.</Trans>
</small>
<h2><Trans>HTTP Proxy</Trans></h2>
<Input
theme="round-black"
placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
value={this.httpProxy}
onChange={v => this.httpProxy = v}
onBlur={() => preferences.httpsProxy = this.httpProxy}
/>
<small className="hint">
<Trans>Proxy is used only for non-cluster communication.</Trans>
</small>
<KubectlBinaries preferences={preferences} />
<KubectlBinaries preferences={preferences}/>
<h2><Trans>Helm</Trans></h2>
<Select
placeholder={<Trans>Repositories</Trans>}
isLoading={this.helmLoading}
isDisabled={this.helmLoading}
options={this.helmOptions}
onChange={this.onRepoSelect}
formatOptionLabel={this.formatHelmOptionLabel}
controlShouldRenderValue={false}
/>
<div className="repos flex gaps column">
{Array.from(this.helmAddedRepos).map(([name, repo]) => {
const tooltipId = `message-${name}`;
return (
<Badge key={name} className="added-repo flex gaps align-center justify-space-between">
<span id={tooltipId} className="repo">{name}</span>
<Icon
material="delete"
onClick={() => this.removeRepo(repo)}
tooltip={<Trans>Remove</Trans>}
/>
<Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
{repo.url}
</Tooltip>
</Badge>
)
})}
</div>
<h2><Trans>Certificate Trust</Trans></h2>
<Checkbox
label={<Trans>Allow untrusted Certificate Authorities</Trans>}
value={preferences.allowUntrustedCAs}
onChange={v => preferences.allowUntrustedCAs = v}
/>
<small className="hint">
<Trans>This will make Lens to trust ANY certificate authority without any validations.</Trans>{" "}
<Trans>Needed with some corporate proxies that do certificate re-writing.</Trans>{" "}
<Trans>Does not affect cluster communications!</Trans>
</small>
{extensionPreferences.map(({title, components: { Hint, Input}}) => {
<h2><Trans>Helm</Trans></h2>
<Select
placeholder={<Trans>Repositories</Trans>}
isLoading={this.helmLoading}
isDisabled={this.helmLoading}
options={this.helmOptions}
onChange={this.onRepoSelect}
formatOptionLabel={this.formatHelmOptionLabel}
controlShouldRenderValue={false}
/>
<div className="repos flex gaps column">
{Array.from(this.helmAddedRepos).map(([name, repo]) => {
const tooltipId = `message-${name}`;
return (
<div key={title}>
<Badge key={name} className="added-repo flex gaps align-center justify-space-between">
<span id={tooltipId} className="repo">{name}</span>
<Icon
material="delete"
onClick={() => this.removeRepo(repo)}
tooltip={<Trans>Remove</Trans>}
/>
<Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
{repo.url}
</Tooltip>
</Badge>
)
})}
</div>
<h2><Trans>Certificate Trust</Trans></h2>
<Checkbox
label={<Trans>Allow untrusted Certificate Authorities</Trans>}
value={preferences.allowUntrustedCAs}
onChange={v => preferences.allowUntrustedCAs = v}
/>
<small className="hint">
<Trans>This will make Lens to trust ANY certificate authority without any validations.</Trans>{" "}
<Trans>Needed with some corporate proxies that do certificate re-writing.</Trans>{" "}
<Trans>Does not affect cluster communications!</Trans>
</small>
<div className="extensions flex column gaps">
{appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
return (
<div key={index} className="preference">
<h2>{title}</h2>
<Input />
<Input/>
<small className="hint">
<Hint />
<Hint/>
</small>
</div>
)
})}
</WizardLayout>
</div>
</div>
</PageLayout>
);
}
}

6
src/renderer/components/+user-management-service-accounts/service-accounts.tsx
View File

@ -3,9 +3,9 @@ import "./service-accounts.scss";
import React from "react";
import { observer } from "mobx-react";
import { Trans } from "@lingui/macro";
import { ServiceAccount, serviceAccountsApi } from "../../api/endpoints/service-accounts.api";
import { ServiceAccount } from "../../api/endpoints/service-accounts.api";
import { RouteComponentProps } from "react-router";
import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { MenuItem } from "../menu";
import { openServiceAccountKubeConfig } from "../kubeconfig-dialog";
import { Icon } from "../icon";
@ -13,7 +13,7 @@ import { KubeObjectListLayout } from "../kube-object";
import { IServiceAccountsRouteParams } from "../+user-management";
import { serviceAccountsStore } from "./service-accounts.store";
import { CreateServiceAccountDialog } from "./create-service-account-dialog";
import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
enum sortBy {
name = "name",

6
src/renderer/components/+workloads-cronjobs/cronjobs.tsx
View File

@ -4,19 +4,19 @@ import React from "react";
import { observer } from "mobx-react";
import { RouteComponentProps } from "react-router";
import { t, Trans } from "@lingui/macro";
import { CronJob, cronJobApi } from "../../api/endpoints/cron-job.api";
import { CronJob } from "../../api/endpoints/cron-job.api";
import { MenuItem } from "../menu";
import { Icon } from "../icon";
import { cronJobStore } from "./cronjob.store";
import { jobStore } from "../+workloads-jobs/job.store";
import { eventStore } from "../+events/event.store";
import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { ICronJobsRouteParams } from "../+workloads";
import { KubeObjectListLayout } from "../kube-object";
import { KubeEventIcon } from "../+events/kube-event-icon";
import { _i18n } from "../../i18n";
import { CronJobTriggerDialog } from "./cronjob-trigger-dialog";
import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
enum sortBy {
name = "name",

7
src/renderer/components/+workloads-deployments/deployments.tsx
View File

@ -4,8 +4,8 @@ import React from "react";
import { observer } from "mobx-react";
import { RouteComponentProps } from "react-router";
import { t, Trans } from "@lingui/macro";
import { Deployment, deploymentApi } from "../../api/endpoints";
import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { Deployment } from "../../api/endpoints";
import { KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { MenuItem } from "../menu";
import { Icon } from "../icon";
import { DeploymentScaleDialog } from "./deployment-scale-dialog";
@ -21,8 +21,7 @@ import { cssNames } from "../../utils";
import kebabCase from "lodash/kebabCase";
import orderBy from "lodash/orderBy";
import { KubeEventIcon } from "../+events/kube-event-icon";
import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
import { DeploymentDetails } from "./deployment-details";
import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
enum sortBy {
name = "name",

9
src/renderer/components/app.tsx
View File

@ -35,11 +35,10 @@ import { getHostedCluster, getHostedClusterId } from "../../common/cluster-store
import logger from "../../main/logger";
import { clusterIpc } from "../../common/cluster-ipc";
import { webFrame } from "electron";
import { pageRegistry } from "../../extensions/page-registry";
import { pageRegistry } from "../../extensions/registries/page-registry";
import { DynamicPage } from "../../extensions/dynamic-page";
import { extensionLoader } from "../../extensions/extension-loader";
import { getLensRuntime } from "../../extensions/lens-runtime";
import { appEventBus } from "../../common/event-bus"
import { appEventBus } from "../../common/event-bus"
@observer
export class App extends React.Component {
@ -51,7 +50,7 @@ export class App extends React.Component {
await clusterIpc.setFrameId.invokeFromRenderer(clusterId, frameId);
await getHostedCluster().whenReady; // cluster.activate() is done at this point
extensionLoader.loadOnClusterRenderer(getLensRuntime)
extensionLoader.loadOnClusterRenderer();
appEventBus.emit({name: "cluster", action: "open", params: {
clusterId: clusterId
}})
@ -83,7 +82,7 @@ export class App extends React.Component {
<Route component={UserManagement} {...usersManagementRoute}/>
<Route component={Apps} {...appsRoute}/>
{pageRegistry.clusterPages.map(page => {
return <Route {...page} key={page.path} render={() => <DynamicPage page={page}/>}/>
return <Route {...page} key={String(page.path)} render={() => <DynamicPage page={page}/>}/>
})}
<Redirect exact from="/" to={this.startURL}/>
<Route component={NotFound}/>

14
src/renderer/components/cluster-manager/bottom-bar.tsx
View File

@ -1,9 +1,11 @@
import "./bottom-bar.scss"
import React from "react";
import { observer } from "mobx-react";
import { Icon } from "../icon";
import { WorkspaceMenu } from "../+workspaces/workspace-menu";
import { workspaceStore } from "../../../common/workspace-store";
import { statusBarRegistry } from "../../../extensions/registries";
@observer
export class BottomBar extends React.Component {
@ -11,11 +13,19 @@ export class BottomBar extends React.Component {
const { currentWorkspace } = workspaceStore;
return (
<div className="BottomBar flex gaps">
<div id="current-workspace" className="flex gaps align-center box">
<div id="current-workspace" className="flex gaps align-center">
<Icon small material="layers"/>
<span className="workspace-name">{currentWorkspace.name}</span>
</div>
<WorkspaceMenu htmlFor="current-workspace"/>
<WorkspaceMenu
htmlFor="current-workspace"
/>
<div className="extensions box grow flex gaps justify-flex-end">
{statusBarRegistry.getItems().map(({ icon }, index) => {
if (!icon) return;
return <React.Fragment key={index}>{icon}</React.Fragment>
})}
</div>
</div>
)
}

6
src/renderer/components/cluster-manager/cluster-manager.tsx
View File

@ -14,7 +14,7 @@ import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
import { clusterViewRoute, clusterViewURL, getMatchedCluster, getMatchedClusterId } from "./cluster-view.route";
import { clusterStore } from "../../../common/cluster-store";
import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
import { pageRegistry } from "../../../extensions/page-registry";
import { pageRegistry } from "../../../extensions/registries/page-registry";
@observer
export class ClusterManager extends React.Component {
@ -63,8 +63,8 @@ export class ClusterManager extends React.Component {
<Route component={AddCluster} {...addClusterRoute} />
<Route component={ClusterView} {...clusterViewRoute} />
<Route component={ClusterSettings} {...clusterSettingsRoute} />
{pageRegistry.globalPages.map(({ path, components: { Page } }) => {
return <Route key={path} path={path} component={Page}/>
{pageRegistry.globalPages.map(({ path, url = String(path), components: { Page } }) => {
return <Route key={url} path={path} component={Page}/>
})}
<Redirect exact to={this.startUrl} />
</Switch>

2
src/renderer/components/cluster-manager/clusters-menu.scss
View File

@ -67,7 +67,7 @@
}
}
> .dynamic-pages {
> .extensions {
&:not(:empty) {
padding-top: $spacing;
}

13
src/renderer/components/cluster-manager/clusters-menu.tsx
View File

@ -11,7 +11,7 @@ import { ClusterId, clusterStore } from "../../../common/cluster-store";
import { workspaceStore } from "../../../common/workspace-store";
import { ClusterIcon } from "../cluster-icon";
import { Icon } from "../icon";
import { cssNames, IClassName, autobind } from "../../utils";
import { autobind, cssNames, IClassName } from "../../utils";
import { Badge } from "../badge";
import { navigate } from "../../navigation";
import { addClusterURL } from "../+add-cluster";
@ -21,8 +21,8 @@ import { Tooltip } from "../tooltip";
import { ConfirmDialog } from "../confirm-dialog";
import { clusterIpc } from "../../../common/cluster-ipc";
import { clusterViewURL } from "./cluster-view.route";
import { DragDropContext, Droppable, Draggable, DropResult, DroppableProvided, DraggableProvided } from "react-beautiful-dnd";
import { pageRegistry } from "../../../extensions/page-registry";
import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
import { pageRegistry } from "../../../extensions/registries/page-registry";
interface Props {
className?: IClassName;
@ -155,9 +155,10 @@ export class ClustersMenu extends React.Component<Props> {
<Badge className="counter" label={newContexts.size} tooltip={<Trans>new</Trans>} />
)}
</div>
<div className="dynamic-pages">
{pageRegistry.globalPages.map(({ path, components: { MenuIcon } }) => {
return <MenuIcon key={path} onClick={() => navigate(path)}/>
<div className="extensions">
{pageRegistry.globalPages.map(({ path, url = String(path), components: { MenuIcon } }) => {
if (!MenuIcon) return;
return <MenuIcon key={url} onClick={() => navigate(url)}/>
})}
</div>
</div>

10
src/renderer/components/fonts.scss
View File

@ -1,7 +1,15 @@
// Custom fonts
@import "~material-design-icons/iconfont/material-icons.css";
@import "~typeface-roboto/index.css";
// Material Design Icons, used primarily in icon.tsx
// Latest: https://github.com/google/material-design-icons/tree/master/font
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
}
// Patched RobotoMono font with icons
// RobotoMono Windows Compatible for using in terminal
// https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono

2
src/renderer/components/kube-object/kube-object-menu.tsx
View File

@ -6,7 +6,7 @@ import { editResourceTab } from "../dock/edit-resource.store";
import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
import { hideDetails } from "../../navigation";
import { apiManager } from "../../api/api-manager";
import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
export interface KubeObjectMenuProps<T extends KubeObject = any> extends MenuActionsProps {
object: T;

64
src/renderer/components/layout/page-layout.scss Normal file
View File

@ -0,0 +1,64 @@
.PageLayout {
$spacing: $padding * 2;
position: relative;
height: 100%;
display: grid !important;
grid-template-rows: min-content 1fr;
// covers whole app view area
&.top {
position: fixed !important; // allow to cover ClustersMenu
z-index: 1;
// adds extra space for traffic-light top buttons (mac only)
.is-mac & > .header {
padding-top: $spacing * 2;
}
}
> .header {
position: sticky;
padding: $spacing;
background-color: $layoutTabsBackground;
}
> .content-wrapper {
@include custom-scrollbar-themed;
padding: $spacing * 2;
> .content {
margin: 0 auto;
width: 60%;
min-width: 570px;
max-width: 1000px;
}
}
h2:not(:first-of-type) {
margin-top: $spacing;
}
p {
line-height: 140%;
}
a {
color: $colorInfo;
}
.SubTitle {
text-transform: none;
margin-bottom: 0 !important;
+ * + .hint {
margin-top: -$padding / 2;
}
}
.Select {
&__control {
box-shadow: 0 0 0 1px $borderFaintColor;
}
}
}

82
src/renderer/components/layout/page-layout.tsx Normal file
View File

@ -0,0 +1,82 @@
import "./page-layout.scss"
import React from "react";
import { observer } from "mobx-react";
import { autobind, cssNames, IClassName } from "../../utils";
import { Icon } from "../icon";
import { navigation } from "../../navigation";
export interface PageLayoutProps extends React.DOMAttributes<any> {
className?: IClassName;
header: React.ReactNode;
headerClass?: IClassName;
contentClass?: IClassName;
provideBackButtonNavigation?: boolean;
contentGaps?: boolean;
showOnTop?: boolean; // covers whole app view
back?: (evt: React.MouseEvent | KeyboardEvent) => void;
}
const defaultProps: Partial<PageLayoutProps> = {
provideBackButtonNavigation: true,
contentGaps: true,
}
@observer
export class PageLayout extends React.Component<PageLayoutProps> {
static defaultProps = defaultProps as object;
@autobind()
back(evt?: React.MouseEvent | KeyboardEvent) {
if (this.props.back) {
this.props.back(evt);
} else {
navigation.goBack();
}
}
async componentDidMount() {
window.addEventListener('keydown', this.onEscapeKey);
}
componentWillUnmount() {
window.removeEventListener('keydown', this.onEscapeKey);
}
onEscapeKey = (evt: KeyboardEvent) => {
if (!this.props.provideBackButtonNavigation) {
return;
}
if (evt.code === "Escape") {
evt.stopPropagation();
this.back(evt);
}
}
render() {
const {
contentClass, header, headerClass, provideBackButtonNavigation,
contentGaps, showOnTop, children, ...elemProps
} = this.props;
const className = cssNames("PageLayout", { top: showOnTop }, this.props.className);
return (
<div {...elemProps} className={className}>
<div className={cssNames("header flex gaps align-center", headerClass)}>
{header}
{provideBackButtonNavigation && (
<Icon
big material="close"
className="back box right"
onClick={this.back}
/>
)}
</div>
<div className="content-wrapper">
<div className={cssNames("content", contentGaps && "flex column gaps", contentClass)}>
{children}
</div>
</div>
</div>
)
}
}

36
src/renderer/components/layout/sidebar.tsx
View File

@ -28,7 +28,7 @@ import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resourc
import { CustomResources } from "../+custom-resources/custom-resources";
import { navigation } from "../../navigation";
import { isAllowedResource } from "../../../common/rbac"
import { pageRegistry } from "../../../extensions/page-registry";
import { pageRegistry } from "../../../extensions/registries/page-registry";
const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
type SidebarContextValue = {
@ -80,7 +80,7 @@ export class Sidebar extends React.Component<Props> {
<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" />
<Icon svg="logo-full" className="logo-icon"/>
<div className="logo-text">Lens</div>
</NavLink>
<Icon
@ -97,14 +97,14 @@ export class Sidebar extends React.Component<Props> {
isHidden={!isAllowedResource("nodes")}
url={clusterURL()}
text={<Trans>Cluster</Trans>}
icon={<Icon svg="kube" />}
icon={<Icon svg="kube"/>}
/>
<SidebarNavItem
id="nodes"
isHidden={!isAllowedResource("nodes")}
url={nodesURL()}
text={<Trans>Nodes</Trans>}
icon={<Icon svg="nodes" />}
icon={<Icon svg="nodes"/>}
/>
<SidebarNavItem
id="workloads"
@ -113,7 +113,7 @@ export class Sidebar extends React.Component<Props> {
routePath={workloadsRoute.path}
subMenus={Workloads.tabRoutes}
text={<Trans>Workloads</Trans>}
icon={<Icon svg="workloads" />}
icon={<Icon svg="workloads"/>}
/>
<SidebarNavItem
id="config"
@ -122,7 +122,7 @@ export class Sidebar extends React.Component<Props> {
routePath={configRoute.path}
subMenus={Config.tabRoutes}
text={<Trans>Configuration</Trans>}
icon={<Icon material="list" />}
icon={<Icon material="list"/>}
/>
<SidebarNavItem
id="networks"
@ -131,7 +131,7 @@ export class Sidebar extends React.Component<Props> {
routePath={networkRoute.path}
subMenus={Network.tabRoutes}
text={<Trans>Network</Trans>}
icon={<Icon material="device_hub" />}
icon={<Icon material="device_hub"/>}
/>
<SidebarNavItem
id="storage"
@ -139,14 +139,14 @@ export class Sidebar extends React.Component<Props> {
url={storageURL({ query })}
routePath={storageRoute.path}
subMenus={Storage.tabRoutes}
icon={<Icon svg="storage" />}
icon={<Icon svg="storage"/>}
text={<Trans>Storage</Trans>}
/>
<SidebarNavItem
id="namespaces"
isHidden={!isAllowedResource("namespaces")}
url={namespacesURL()}
icon={<Icon material="layers" />}
icon={<Icon material="layers"/>}
text={<Trans>Namespaces</Trans>}
/>
<SidebarNavItem
@ -154,7 +154,7 @@ export class Sidebar extends React.Component<Props> {
isHidden={!isAllowedResource("events")}
url={eventsURL({ query })}
routePath={eventRoute.path}
icon={<Icon material="access_time" />}
icon={<Icon material="access_time"/>}
text={<Trans>Events</Trans>}
/>
<SidebarNavItem
@ -162,7 +162,7 @@ export class Sidebar extends React.Component<Props> {
url={appsURL({ query })}
subMenus={Apps.tabRoutes}
routePath={appsRoute.path}
icon={<Icon material="apps" />}
icon={<Icon material="apps"/>}
text={<Trans>Apps</Trans>}
/>
<SidebarNavItem
@ -170,7 +170,7 @@ export class Sidebar extends React.Component<Props> {
url={usersManagementURL({ query })}
routePath={usersManagementRoute.path}
subMenus={UserManagement.tabRoutes}
icon={<Icon material="security" />}
icon={<Icon material="security"/>}
text={<Trans>Access Control</Trans>}
/>
<SidebarNavItem
@ -179,17 +179,17 @@ export class Sidebar extends React.Component<Props> {
url={crdURL()}
subMenus={CustomResources.tabRoutes}
routePath={crdRoute.path}
icon={<Icon material="extension" />}
icon={<Icon material="extension"/>}
text={<Trans>Custom Resources</Trans>}
>
{this.renderCustomResources()}
</SidebarNavItem>
{pageRegistry.clusterPages.map(({ path, title, components: { MenuIcon } }) => {
{pageRegistry.clusterPages.map(({ path, title, url = String(path), components: { MenuIcon } }) => {
if (!MenuIcon) return;
return (
<SidebarNavItem
key={path}
id={`extension-${path}`}
url={path}
key={url} id={`sidebar_item_${url}`}
url={url}
routePath={path}
text={title}
icon={<MenuIcon/>}
@ -255,7 +255,7 @@ class SidebarNavItem extends React.Component<SidebarNavItemProps> {
<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"} />
<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 }) => (

6
src/renderer/components/layout/wizard-layout.scss
View File

@ -8,13 +8,9 @@
grid-template-columns: 1fr 40%;
> * {
@include custom-scrollbar;
@include custom-scrollbar-themed;
--flex-gap: #{$spacing};
padding: $spacing;
.theme-light & {
@include custom-scrollbar(dark);
}
}
> .head-col {

16
src/renderer/components/mixins.scss
View File

@ -6,6 +6,22 @@
@import "table/table.mixins";
@import "+network/network-mixins";
// todo: re-use in other places with theming
@mixin custom-scrollbar-themed($invert: false) {
@if ($invert) {
@include custom-scrollbar(dark);
.theme-light & {
@include custom-scrollbar(light);
}
} @else {
// fits better with dark background
@include custom-scrollbar(light);
.theme-light & {
@include custom-scrollbar(dark);
}
}
}
@mixin custom-scrollbar($theme: light, $size: 7px, $borderSpacing: 5px) {
$themes: (
light: #5f6064,

79
src/renderer/components/tooltip/tooltip.tsx
View File

@ -11,6 +11,10 @@ export enum TooltipPosition {
BOTTOM = "bottom",
LEFT = "left",
RIGHT = "right",
TOP_LEFT = "top_left",
TOP_RIGHT = "top_right",
BOTTOM_LEFT = "bottom_left",
BOTTOM_RIGHT = "bottom_right",
}
export interface TooltipProps {
@ -19,7 +23,7 @@ export interface TooltipProps {
visible?: boolean; // initial visibility
offset?: number; // offset from target element in pixels (all sides)
usePortal?: boolean; // renders element outside of parent (in body), disable for "easy-styling", default: true
position?: TooltipPosition;
preferredPositions?: TooltipPosition | TooltipPosition[];
className?: IClassName;
formatters?: TooltipContentFormatters;
style?: React.CSSProperties;
@ -82,17 +86,25 @@ export class Tooltip extends React.Component<TooltipProps> {
@autobind()
refreshPosition() {
const { position } = this.props;
const { preferredPositions } = this.props;
const { elem, targetElem } = this;
const positionPreference = new Set<TooltipPosition>();
if (typeof position !== "undefined") {
positionPreference.add(position);
let positions = new Set<TooltipPosition>([
TooltipPosition.RIGHT,
TooltipPosition.BOTTOM,
TooltipPosition.TOP,
TooltipPosition.LEFT,
TooltipPosition.TOP_RIGHT,
TooltipPosition.TOP_LEFT,
TooltipPosition.BOTTOM_RIGHT,
TooltipPosition.BOTTOM_LEFT,
]);
if (preferredPositions) {
positions = new Set([
...[preferredPositions].flat(),
...positions,
])
}
positionPreference.add(TooltipPosition.RIGHT)
.add(TooltipPosition.BOTTOM)
.add(TooltipPosition.TOP)
.add(TooltipPosition.LEFT)
// reset position first and get all possible client-rect area for tooltip element
this.setPosition({ left: 0, top: 0 });
@ -102,20 +114,20 @@ export class Tooltip extends React.Component<TooltipProps> {
const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
// find proper position
for (const pos of positionPreference) {
for (const pos of positions) {
const { left, top, right, bottom } = this.getPosition(pos, selfBounds, targetBounds)
const fitsToWindow = left >= 0 && top >= 0 && right <= viewportWidth && bottom <= viewportHeight;
if (fitsToWindow) {
this.activePosition = pos;
this.setPosition({ top, left });
return;
}
}
const preferedPosition = Array.from(positionPreference)[0];
const { left, top } = this.getPosition(preferedPosition, selfBounds, targetBounds)
this.activePosition = preferedPosition;
// apply fallback position if nothing helped from above
const fallbackPosition = Array.from(positions)[0];
const { left, top } = this.getPosition(fallbackPosition, selfBounds, targetBounds)
this.activePosition = fallbackPosition;
this.setPosition({ left, top });
}
@ -125,35 +137,54 @@ export class Tooltip extends React.Component<TooltipProps> {
elemStyle.top = pos.top + "px"
}
protected getPosition(position: TooltipPosition, selfBounds: DOMRect, targetBounds: DOMRect) {
let left: number
let top: number
protected getPosition(position: TooltipPosition, tooltipBounds: DOMRect, targetBounds: DOMRect) {
let left: number;
let top: number;
const offset = this.props.offset;
const horizontalCenter = targetBounds.left + (targetBounds.width - selfBounds.width) / 2;
const verticalCenter = targetBounds.top + (targetBounds.height - selfBounds.height) / 2;
const horizontalCenter = targetBounds.left + (targetBounds.width - tooltipBounds.width) / 2;
const verticalCenter = targetBounds.top + (targetBounds.height - tooltipBounds.height) / 2;
const topCenter = targetBounds.top - tooltipBounds.height - offset;
const bottomCenter = targetBounds.bottom + offset;
switch (position) {
case "top":
left = horizontalCenter;
top = targetBounds.top - selfBounds.height - offset;
top = topCenter;
break;
case "bottom":
left = horizontalCenter;
top = targetBounds.bottom + offset;
top = bottomCenter;
break;
case "left":
top = verticalCenter;
left = targetBounds.left - selfBounds.width - offset;
left = targetBounds.left - tooltipBounds.width - offset;
break;
case "right":
top = verticalCenter;
left = targetBounds.right + offset;
break;
case "top_left":
left = targetBounds.left;
top = topCenter;
break;
case "top_right":
default:
left = targetBounds.right - tooltipBounds.width;
top = topCenter;
break;
case "bottom_left":
top = bottomCenter;
left = targetBounds.left;
break;
case "bottom_right":
top = bottomCenter;
left = targetBounds.right - tooltipBounds.width;
break;
}
return {
left: left,
top: top,
right: left + selfBounds.width,
bottom: top + selfBounds.height,
right: left + tooltipBounds.width,
bottom: top + tooltipBounds.height,
};
}

BIN
src/renderer/fonts/MaterialIcons-Regular.ttf Normal file
View File

Binary file not shown.

2
src/renderer/i18n.ts
View File

@ -14,7 +14,7 @@ export interface ILanguage {
export const _i18n = setupI18n({
missing: (message, id) => {
console.warn('Missing localization:', message, id);
// console.warn('Missing localization:', message, id);
return id;
}
});

3
src/renderer/lens-app.tsx
View File

@ -12,12 +12,11 @@ import { WhatsNew, whatsNewRoute } from "./components/+whats-new";
import { Notifications } from "./components/notifications";
import { ConfirmDialog } from "./components/confirm-dialog";
import { extensionLoader } from "../extensions/extension-loader";
import { getLensRuntime } from "../extensions/lens-runtime";
@observer
export class LensApp extends React.Component {
static async init() {
extensionLoader.loadOnMainRenderer(getLensRuntime)
extensionLoader.loadOnClusterManagerRenderer();
}
render() {

2
webpack.renderer.ts
View File

@ -1,4 +1,4 @@
import { appName, buildDir, extensionsDir, extensionsLibName, extensionsRendererLibName, htmlTemplate, isDevelopment, isProduction, publicPath, rendererDir, sassCommonVars } from "./src/common/vars";
import { appName, buildDir, htmlTemplate, isDevelopment, isProduction, publicPath, rendererDir, sassCommonVars } from "./src/common/vars";
import path from "path";
import webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";

5
yarn.lock
View File

@ -8644,11 +8644,6 @@ matcher@^3.0.0:
dependencies:
escape-string-regexp "^4.0.0"
material-design-icons@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/material-design-icons/-/material-design-icons-3.0.1.tgz#9a71c48747218ebca51e51a66da682038cdcb7bf"
integrity sha1-mnHEh0chjrylHlGmbaaCA4zct78=
md5-file@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-5.0.0.tgz#e519f631feca9c39e7f9ea1780b63c4745012e20"