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

Allow extensions to register kube-object menus + details (#1108)

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2020-10-22 21:41:20 +03:00 committed by GitHub
parent 91bef77997
commit 99db7aca19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
101 changed files with 7858 additions and 1604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -4,6 +4,7 @@ module.exports = {
files: [
"src/renderer/**/*.js",
"build/**/*.js",
"extensions/**/*.js"
],
extends: [
'eslint:recommended',

5
extensions/node-menu/Makefile Normal file
View File

@ -0,0 +1,5 @@
install-deps:
npm install
build: install-deps
npm run build

3508
extensions/node-menu/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
extensions/node-menu/package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "lens-node-menu",
"version": "0.1.0",
"description": "Lens node menu",
"renderer": "dist/renderer.js",
"lens": {
"metadata": {},
"styles": []
},
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "npm run build --watch"
},
"dependencies": {},
"devDependencies": {
"ts-loader": "^8.0.4",
"typescript": "^4.0.3",
"webpack": "^4.44.2",
"mobx": "^5.15.5",
"react": "^16.13.1"
}
}

21
extensions/node-menu/renderer.tsx Normal file
View File

@ -0,0 +1,21 @@
import { Registry, LensRendererExtension } from "@k8slens/extensions";
import React from "react"
import { NodeMenu } from "./src/node-menu"
export default class NodeMenuRendererExtension extends LensRendererExtension {
async onActivate() {
console.log("node-menu extension activated")
}
registerKubeObjectMenus(registry: Registry.KubeObjectMenuRegistry) {
this.disposers.push(
registry.add({
kind: "Node",
apiVersions: ["v1"],
components: {
MenuItem: (props) => <NodeMenu {...props} />
}
})
)
}
}

70
extensions/node-menu/src/node-menu.tsx Normal file
View File

@ -0,0 +1,70 @@
import React from "react";
import { Component, K8sApi, Navigation} from "@k8slens/extensions"
export function NodeMenu(props: Component.KubeObjectMenuProps<K8sApi.Node>) {
const { object: node, toolbar } = props;
if (!node) return null;
const nodeName = node.getName();
const sendToTerminal = (command: string) => {
Component.terminalStore.sendCommand(command, {
enter: true,
newTab: true,
});
Navigation.hideDetails();
}
const shell = () => {
Component.createTerminalTab({
title: `Node: ${nodeName}`,
node: nodeName,
});
Navigation.hideDetails();
}
const cordon = () => {
sendToTerminal(`kubectl cordon ${nodeName}`);
}
const unCordon = () => {
sendToTerminal(`kubectl uncordon ${nodeName}`)
}
const drain = () => {
const command = `kubectl drain ${nodeName} --delete-local-data --ignore-daemonsets --force`;
Component.ConfirmDialog.open({
ok: () => sendToTerminal(command),
labelOk: `Drain Node`,
message: (
<p>
Are you sure you want to drain <b>{nodeName}</b>?
</p>
),
})
}
return (
<>
<Component.MenuItem onClick={shell}>
<Component.Icon svg="ssh" interactive={toolbar} title="Node shell"/>
<span className="title">Shell</span>
</Component.MenuItem>
{!node.isUnschedulable() && (
<Component.MenuItem onClick={cordon}>
<Component.Icon material="pause_circle_filled" title="Cordon" interactive={toolbar}/>
<span className="title">Cordon</span>
</Component.MenuItem>
)}
{node.isUnschedulable() && (
<Component.MenuItem onClick={unCordon}>
<Component.Icon material="play_circle_filled" title="Uncordon" interactive={toolbar}/>
<span className="title">Uncordon</span>
</Component.MenuItem>
)}
<Component.MenuItem onClick={drain}>
<Component.Icon material="delete_sweep" title="Drain" interactive={toolbar}/>
<span className="title">Drain</span>
</Component.MenuItem>
</>
);
}

27
extensions/node-menu/tsconfig.json Normal file
View File

@ -0,0 +1,27 @@
{
"compilerOptions": {
"outDir": "dist",
"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"
},
"include": [
"../../src/extensions/npm/**/*.d.ts",
"./*.ts",
"./*.tsx"
],
"exclude": [
"node_modules",
"*.js"
]
}

35
extensions/node-menu/webpack.config.js Normal file
View File

@ -0,0 +1,35 @@
const path = require('path');
module.exports = [
{
entry: './renderer.tsx',
context: __dirname,
target: "electron-renderer",
mode: "production",
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
externals: [
{
"@k8slens/extensions": "var global.LensExtensions",
"react": "var global.React",
"mobx": "var global.Mobx"
}
],
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
libraryTarget: "commonjs2",
globalObject: "this",
filename: 'renderer.js',
path: path.resolve(__dirname, 'dist'),
},
},
];

5
extensions/pod-menu/Makefile Normal file
View File

@ -0,0 +1,5 @@
install-deps:
npm install
build: install-deps
npm run build

3508
extensions/pod-menu/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
extensions/pod-menu/package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "lens-pod-menu",
"version": "0.1.0",
"description": "Lens pod menu",
"renderer": "dist/renderer.js",
"lens": {
"metadata": {},
"styles": []
},
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "npm run build --watch"
},
"dependencies": {},
"devDependencies": {
"ts-loader": "^8.0.4",
"typescript": "^4.0.3",
"webpack": "^4.44.2",
"mobx": "^5.15.5",
"react": "^16.13.1"
}
}

31
extensions/pod-menu/renderer.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Registry, LensRendererExtension } from "@k8slens/extensions";
import { PodShellMenu } from "./src/shell-menu"
import { PodLogsMenu } from "./src/logs-menu"
import React from "react"
export default class PodMenuRendererExtension extends LensRendererExtension {
async onActivate() {
console.log("pod-menu extension activated")
}
registerKubeObjectMenus(registry: Registry.KubeObjectMenuRegistry) {
this.disposers.push(
registry.add({
kind: "Pod",
apiVersions: ["v1"],
components: {
MenuItem: (props) => <PodShellMenu {...props} />
}
})
)
this.disposers.push(
registry.add({
kind: "Pod",
apiVersions: ["v1"],
components: {
MenuItem: (props) => <PodLogsMenu {...props} />
}
})
)
}
}

58
extensions/pod-menu/src/logs-menu.tsx Normal file
View File

@ -0,0 +1,58 @@
import React from "react";
import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
interface Props extends Component.KubeObjectMenuProps<K8sApi.Pod> {
}
export class PodLogsMenu extends React.Component<Props> {
showLogs(container: K8sApi.IPodContainer) {
Navigation.hideDetails();
const pod = this.props.object;
Component.createPodLogsTab({
pod,
containers: pod.getContainers(),
initContainers: pod.getInitContainers(),
selectedContainer: container,
showTimestamps: false,
previous: false,
tailLines: 1000
});
}
render() {
const { object: pod, toolbar } = this.props
const containers = pod.getAllContainers();
const statuses = pod.getContainerStatuses();
if (!containers.length) return;
return (
<Component.MenuItem onClick={Util.prevDefault(() => this.showLogs(containers[0]))}>
<Component.Icon material="subject" title="Logs" interactive={toolbar}/>
<span className="title">Logs</span>
{containers.length > 1 && (
<>
<Component.Icon className="arrow" material="keyboard_arrow_right"/>
<Component.SubMenu>
{
containers.map(container => {
const { name } = container
const status = statuses.find(status => status.name === name);
const brick = status ? (
<Component.StatusBrick
className={Util.cssNames(Object.keys(status.state)[0], { ready: status.ready })}
/>
) : null
return (
<Component.MenuItem key={name} onClick={Util.prevDefault(() => this.showLogs(container))} className="flex align-center">
{brick}
{name}
</Component.MenuItem>
)
})
}
</Component.SubMenu>
</>
)}
</Component.MenuItem>
)
}
}

64
extensions/pod-menu/src/shell-menu.tsx Normal file
View File

@ -0,0 +1,64 @@
import React from "react";
import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
interface Props extends Component.KubeObjectMenuProps<K8sApi.Pod> {
}
export class PodShellMenu extends React.Component<Props> {
async execShell(container?: string) {
Navigation.hideDetails();
const { object: pod } = this.props
const containerParam = container ? `-c ${container}` : ""
let command = `kubectl exec -i -t -n ${pod.getNs()} ${pod.getName()} ${containerParam} "--"`
if (window.navigator.platform !== "Win32") {
command = `exec ${command}`
}
if (pod.getSelectedNodeOs() === "windows") {
command = `${command} powershell`
} else {
command = `${command} sh -c "clear; (bash || ash || sh)"`
}
const shell = Component.createTerminalTab({
title: `Pod: ${pod.getName()} (namespace: ${pod.getNs()})`
});
Component.terminalStore.sendCommand(command, {
enter: true,
tabId: shell.id
});
}
render() {
const { object, toolbar } = this.props
console.log(Object.keys(object))
const containers = object.getRunningContainers();
if (!containers.length) return;
return (
<Component.MenuItem onClick={Util.prevDefault(() => this.execShell(containers[0].name))}>
<Component.Icon svg="ssh" interactive={toolbar} title="Pod shell"/>
<span className="title">Shell</span>
{containers.length > 1 && (
<>
<Component.Icon className="arrow" material="keyboard_arrow_right"/>
<Component.SubMenu>
{
containers.map(container => {
const { name } = container;
return (
<Component.MenuItem key={name} onClick={Util.prevDefault(() => this.execShell(name))} className="flex align-center">
<Component.StatusBrick/>
{name}
</Component.MenuItem>
)
})
}
</Component.SubMenu>
</>
)}
</Component.MenuItem>
)
}
}

27
extensions/pod-menu/tsconfig.json Normal file
View File

@ -0,0 +1,27 @@
{
"compilerOptions": {
"outDir": "dist",
"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"
},
"include": [
"../../src/extensions/npm/**/*.d.ts",
"./*.ts",
"./*.tsx"
],
"exclude": [
"node_modules",
"*.js"
]
}

35
extensions/pod-menu/webpack.config.js Normal file
View File

@ -0,0 +1,35 @@
const path = require('path');
module.exports = [
{
entry: './renderer.tsx',
context: __dirname,
target: "electron-renderer",
mode: "production",
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
externals: [
{
"@k8slens/extensions": "var global.LensExtensions",
"react": "var global.React",
"mobx": "var global.Mobx"
}
],
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
libraryTarget: "commonjs2",
globalObject: "this",
filename: 'renderer.js',
path: path.resolve(__dirname, 'dist'),
},
},
];

4
package.json
View File

@ -174,7 +174,9 @@
},
"lens": {
"extensions": [
"telemetry"
"telemetry",
"pod-menu",
"node-menu"
]
},
"dependencies": {

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

@ -1,2 +1,4 @@
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"

2
src/extensions/core-api/utils.ts
View File

@ -1 +1,3 @@
export { Singleton } from "../../common/utils"
export { prevDefault, stopPropagation } from "../../renderer/utils/prevDefault"
export { cssNames } from "../../renderer/utils/cssNames"

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

@ -8,6 +8,7 @@ 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"
export interface InstalledExtension extends ExtensionModel {
manifestPath: string;
@ -39,6 +40,7 @@ export class ExtensionLoader {
logger.info('[EXTENSIONS-LOADER]: load on cluster renderer')
this.autoloadExtensions(getLensRuntimeEnv, (instance: LensRendererExtension) => {
instance.registerPages(pageRegistry)
instance.registerKubeObjectMenus(kubeObjectMenuRegistry)
})
}

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

@ -1,6 +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";
export class LensRendererExtension extends LensExtension {
@ -11,4 +12,8 @@ export class LensRendererExtension extends LensExtension {
registerAppPreferences(registry: AppPreferenceRegistry) {
return
}
registerKubeObjectMenus(registry: KubeObjectMenuRegistry) {
return
}
}

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

@ -5,7 +5,15 @@ export * from "../../renderer/components/tooltip"
export * from "../../renderer/components/button"
export * from "../../renderer/components/tabs"
export * from "../../renderer/components/badge"
export * from "../../renderer/components/drawer"
// kube helpers
export { KubeObjectDetailsProps, KubeObjectMenuProps } from "../../renderer/components/kube-object"
export { KubeObjectMeta } from "../../renderer/components/kube-object/kube-object-meta";
export { KubeEventDetails } from "../../renderer/components/+events/kube-event-details"
// specific exports
export { ConfirmDialog } from "../../renderer/components/confirm-dialog";
export { MenuItem, SubMenu } from "../../renderer/components/menu";
export { StatusBrick } from "../../renderer/components/status-brick";
export { terminalStore, createTerminalTab } from "../../renderer/components/dock/terminal.store";

5
src/extensions/renderer-api/k8s-api.ts
View File

@ -1,7 +1,8 @@
export { apiManager } from "../../renderer/api/api-manager";
export { KubeApi } from "../../renderer/api/kube-api";
export { KubeObject } from "../../renderer/api/kube-object";
export { Pod, podsApi } from "../../renderer/api/endpoints";
export { Pod, podsApi, IPodContainer, IPodContainerStatus } from "../../renderer/api/endpoints";
export { Node, nodesApi } from "../../renderer/api/endpoints";
export { Deployment, deploymentApi } from "../../renderer/api/endpoints";
export { DaemonSet, daemonSetApi } from "../../renderer/api/endpoints";
@ -9,7 +10,7 @@ export { StatefulSet, statefulSetApi } from "../../renderer/api/endpoints";
export { Job, jobApi } from "../../renderer/api/endpoints";
export { CronJob, cronJobApi } from "../../renderer/api/endpoints";
export { ConfigMap, configMapApi } from "../../renderer/api/endpoints";
export { Secret, secretsApi } from "../../renderer/api/endpoints";
export { Secret, secretsApi, ISecretRef } from "../../renderer/api/endpoints";
export { ResourceQuota, resourceQuotaApi } from "../../renderer/api/endpoints";
export { HorizontalPodAutoscaler, hpaApi } from "../../renderer/api/endpoints";
export { PodDisruptionBudget, pdbApi } from "../../renderer/api/endpoints";

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

@ -1 +1 @@
export { navigate } from "../../renderer/navigation"
export { navigate, hideDetails, showDetails } from "../../renderer/navigation"

16
src/renderer/api/api-manager.ts
View File

@ -53,22 +53,6 @@ export class ApiManager {
getStore(api: string | KubeApi): KubeObjectStore {
return this.stores.get(this.resolveApi(api));
}
registerViews(api: KubeApi | KubeApi[], views: ApiComponents) {
if (Array.isArray(api)) {
api.forEach(api => this.registerViews(api, views));
return;
}
const currentViews = this.views.get(api) || {};
this.views.set(api, {
...currentViews,
...views,
});
}
getViews(api: string | KubeApi): ApiComponents {
return this.views.get(this.resolveApi(api)) || {}
}
}
export const apiManager = new ApiManager();

262
src/renderer/api/endpoints/cert-manager.api.ts
View File

@ -1,262 +0,0 @@
// Kubernetes certificate management controller apis
// Reference: https://docs.cert-manager.io/en/latest/reference/index.html
// API docs: https://docs.cert-manager.io/en/latest/reference/api-docs/index.html
import { KubeObject } from "../kube-object";
import { ISecretRef, secretsApi } from "./secret.api";
import { getDetailsUrl } from "../../navigation";
import { KubeApi } from "../kube-api";
export class Certificate extends KubeObject {
static kind = "Certificate"
spec: {
secretName: string;
commonName?: string;
dnsNames?: string[];
organization?: string[];
ipAddresses?: string[];
duration?: string;
renewBefore?: string;
isCA?: boolean;
keySize?: number;
keyAlgorithm?: "rsa" | "ecdsa";
issuerRef: {
kind?: string;
name: string;
};
acme?: {
config: {
domains: string[];
http01: {
ingress?: string;
ingressClass?: string;
};
dns01?: {
provider: string;
};
}[];
};
}
status: {
conditions?: {
lastTransitionTime: string; // 2019-06-04T07:35:58Z,
message: string; // Certificate is up to date and has not expired,
reason: string; // Ready,
status: string; // True,
type: string; // Ready
}[];
notAfter: string; // 2019-11-01T05:36:27Z
lastFailureTime?: string;
}
getType(): string {
const { isCA, acme } = this.spec;
if (isCA) return "CA"
if (acme) return "ACME"
}
getCommonName() {
return this.spec.commonName || ""
}
getIssuerName() {
return this.spec.issuerRef.name;
}
getSecretName() {
return this.spec.secretName;
}
getIssuerDetailsUrl() {
return getDetailsUrl(issuersApi.getUrl({
namespace: this.getNs(),
name: this.getIssuerName(),
}))
}
getSecretDetailsUrl() {
return getDetailsUrl(secretsApi.getUrl({
namespace: this.getNs(),
name: this.getSecretName(),
}))
}
getConditions() {
const { conditions = [] } = this.status;
return conditions.map(condition => {
const { message, reason, lastTransitionTime, status } = condition;
return {
...condition,
isReady: status === "True",
tooltip: `${message || reason} (${lastTransitionTime})`
}
});
}
}
export class Issuer extends KubeObject {
static kind = "Issuer"
spec: {
acme?: {
email: string;
server: string;
skipTLSVerify?: boolean;
privateKeySecretRef: ISecretRef;
solvers?: {
dns01?: {
cnameStrategy: string;
acmedns?: {
host: string;
accountSecretRef: ISecretRef;
};
akamai?: {
accessTokenSecretRef: ISecretRef;
clientSecretSecretRef: ISecretRef;
clientTokenSecretRef: ISecretRef;
serviceConsumerDomain: string;
};
azuredns?: {
clientID: string;
clientSecretSecretRef: ISecretRef;
hostedZoneName: string;
resourceGroupName: string;
subscriptionID: string;
tenantID: string;
};
clouddns?: {
project: string;
serviceAccountSecretRef: ISecretRef;
};
cloudflare?: {
email: string;
apiKeySecretRef: ISecretRef;
};
digitalocean?: {
tokenSecretRef: ISecretRef;
};
rfc2136?: {
nameserver: string;
tsigAlgorithm: string;
tsigKeyName: string;
tsigSecretSecretRef: ISecretRef;
};
route53?: {
accessKeyID: string;
hostedZoneID: string;
region: string;
secretAccessKeySecretRef: ISecretRef;
};
webhook?: {
config: object; // arbitrary json
groupName: string;
solverName: string;
};
};
http01?: {
ingress: {
class: string;
name: string;
serviceType: string;
};
};
selector?: {
dnsNames: string[];
matchLabels: {
[label: string]: string;
};
};
}[];
};
ca?: {
secretName: string;
};
vault?: {
path: string;
server: string;
caBundle: string; // <base64 encoded caBundle PEM file>
auth: {
appRole: {
path: string;
roleId: string;
secretRef: ISecretRef;
};
};
};
selfSigned?: {};
venafi?: {
zone: string;
cloud?: {
apiTokenSecretRef: ISecretRef;
};
tpp?: {
url: string;
caBundle: string; // <base64 encoded caBundle PEM file>
credentialsRef: {
name: string;
};
};
};
}
status: {
acme?: {
uri: string;
};
conditions?: {
lastTransitionTime: string; // 2019-06-05T07:10:42Z,
message: string; // The ACME account was registered with the ACME server,
reason: string; // ACMEAccountRegistered,
status: string; // True,
type: string; // Ready
}[];
}
getType() {
const { acme, ca, selfSigned, vault, venafi } = this.spec;
if (acme) return "ACME"
if (ca) return "CA"
if (selfSigned) return "SelfSigned"
if (vault) return "Vault"
if (venafi) return "Venafi"
}
getConditions() {
if (!this.status?.conditions) return [];
const { conditions = [] } = this.status;
return conditions.map(condition => {
const { message, reason, lastTransitionTime, status } = condition;
return {
...condition,
isReady: status === "True",
tooltip: `${message || reason} (${lastTransitionTime})`,
}
});
}
}
export class ClusterIssuer extends Issuer {
static kind = "ClusterIssuer"
}
export const certificatesApi = new KubeApi({
kind: Certificate.kind,
apiBase: "/apis/cert-manager.io/v1alpha2/certificates",
isNamespaced: true,
objectConstructor: Certificate,
});
export const issuersApi = new KubeApi({
kind: Issuer.kind,
apiBase: "/apis/cert-manager.io/v1alpha2/issuers",
isNamespaced: true,
objectConstructor: Issuer,
});
export const clusterIssuersApi = new KubeApi({
kind: ClusterIssuer.kind,
apiBase: "/apis/cert-manager.io/v1alpha2/clusterissuers",
isNamespaced: false,
objectConstructor: ClusterIssuer,
});

33
src/renderer/api/kube-object-detail-registry.ts Normal file
View File

@ -0,0 +1,33 @@
import { observable } from "mobx"
import React from "react"
export interface KubeObjectDetailComponents {
Details: React.ComponentType<any>;
}
export interface KubeObjectDetailRegistration {
kind: string;
apiVersions: string[];
components: KubeObjectDetailComponents;
}
export class KubeObjectDetailRegistry {
items = observable.array<KubeObjectDetailRegistration>([], { deep: false });
add(item: KubeObjectDetailRegistration) {
this.items.push(item)
return () => {
this.items.replace(
this.items.filter(c => c !== item)
)
};
}
getItemsForKind(kind: string, apiVersion: string) {
return this.items.filter((item) => {
return item.kind === kind && item.apiVersions.includes(apiVersion)
})
}
}
export const kubeObjectDetailRegistry = new KubeObjectDetailRegistry()

33
src/renderer/api/kube-object-menu-registry.ts Normal file
View File

@ -0,0 +1,33 @@
import { observable } from "mobx"
import React from "react"
export interface KubeObjectMenuComponents {
MenuItem: React.ComponentType<any>;
}
export interface KubeObjectMenuRegistration {
kind: string;
apiVersions: string[];
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)
)
};
}
getItemsForKind(kind: string, apiVersion: string) {
return this.items.filter((item) => {
return item.kind === kind && item.apiVersions.includes(apiVersion)
})
}
}
export const kubeObjectMenuRegistry = new KubeObjectMenuRegistry()

14
src/renderer/components/+config-autoscalers/hpa-details.tsx
View File

@ -7,14 +7,14 @@ import { DrawerItem, DrawerTitle } from "../drawer";
import { Badge } from "../badge";
import { KubeObjectDetailsProps } from "../kube-object";
import { cssNames } from "../../utils";
import { HorizontalPodAutoscaler, hpaApi, HpaMetricType, IHpaMetric } from "../../api/endpoints/hpa.api";
import { HorizontalPodAutoscaler, HpaMetricType, IHpaMetric } from "../../api/endpoints/hpa.api";
import { KubeEventDetails } from "../+events/kube-event-details";
import { Trans } from "@lingui/macro";
import { Table, TableCell, TableHead, TableRow } from "../table";
import { getDetailsUrl } from "../../navigation";
import { lookupApiLink } from "../../api/kube-api";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<HorizontalPodAutoscaler> {
}
@ -128,6 +128,10 @@ export class HpaDetails extends React.Component<Props> {
}
}
apiManager.registerViews(hpaApi, {
Details: HpaDetails,
});
kubeObjectDetailRegistry.add({
kind: "HorizontalPodAutoscaler",
apiVersions: ["autoscaling/v1"],
components: {
Details: (props) => <HpaDetails {...props} />
}
})

12
src/renderer/components/+config-autoscalers/hpa.tsx
View File

@ -80,20 +80,8 @@ export class HorizontalPodAutoscalers extends React.Component<Props> {
)
})
]}
renderItemMenu={(item: HorizontalPodAutoscaler) => {
return <HpaMenu object={item}/>
}}
/>
);
}
}
export function HpaMenu(props: KubeObjectMenuProps<HorizontalPodAutoscaler>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(hpaApi, {
Menu: HpaMenu,
})

12
src/renderer/components/+config-maps/config-map-details.tsx
View File

@ -11,9 +11,9 @@ import { Button } from "../button";
import { KubeEventDetails } from "../+events/kube-event-details";
import { configMapsStore } from "./config-maps.store";
import { KubeObjectDetailsProps } from "../kube-object";
import { ConfigMap, configMapApi } from "../../api/endpoints";
import { apiManager } from "../../api/api-manager";
import { ConfigMap } from "../../api/endpoints";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<ConfigMap> {
}
@ -94,6 +94,10 @@ export class ConfigMapDetails extends React.Component<Props> {
}
}
apiManager.registerViews(configMapApi, {
Details: ConfigMapDetails
kubeObjectDetailRegistry.add({
kind: "ConfigMap",
apiVersions: ["v1"],
components: {
Details: (props) => <ConfigMapDetails {...props} />
}
})

12
src/renderer/components/+config-maps/config-maps.tsx
View File

@ -50,20 +50,8 @@ export class ConfigMaps extends React.Component<Props> {
configMap.getKeys().join(", "),
configMap.getAge(),
]}
renderItemMenu={(item: ConfigMap) => {
return <ConfigMapMenu object={item}/>
}}
/>
);
}
}
export function ConfigMapMenu(props: KubeObjectMenuProps<ConfigMap>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(configMapApi, {
Menu: ConfigMapMenu,
})

18
src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets-details.tsx
View File

@ -3,14 +3,12 @@ import "./pod-disruption-budgets-details.scss";
import React from "react";
import { observer } from "mobx-react";
import { Trans } from "@lingui/macro";
import { DrawerItem, DrawerTitle } from "../drawer";
import { DrawerItem } from "../drawer";
import { Badge } from "../badge";
import { Table, TableCell, TableHead, TableRow } from "../table";
import { KubeObjectDetailsProps } from "../kube-object";
import { PodDisruptionBudget, pdbApi } from "../../api/endpoints";
import { apiManager } from "../../api/api-manager";
import { KubeObjectStore } from "../../kube-object.store";
import { PodDisruptionBudget } from "../../api/endpoints";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<PodDisruptionBudget> {
}
@ -56,6 +54,10 @@ export class PodDisruptionBudgetDetails extends React.Component<Props> {
}
}
apiManager.registerViews(pdbApi, {
Details: PodDisruptionBudgetDetails,
});
kubeObjectDetailRegistry.add({
kind: "PodDisruptionBudget",
apiVersions: ["policy/v1beta1"],
components: {
Details: (props) => <PodDisruptionBudgetDetails {...props} />
}
})

13
src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx
View File

@ -64,20 +64,7 @@ export class PodDisruptionBudgets extends React.Component<Props> {
pdb.getAge(),
]
}}
renderItemMenu={(pdb: PodDisruptionBudget) => {
return <PodDisruptionBudgetsMenu object={pdb}/>
}}
/>
);
}
}
export function PodDisruptionBudgetsMenu(props: KubeObjectMenuProps<PodDisruptionBudget>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(pdbApi, {
Menu: PodDisruptionBudgetsMenu,
})

13
src/renderer/components/+config-resource-quotas/resource-quota-details.tsx
View File

@ -6,11 +6,12 @@ import { Trans } from "@lingui/macro";
import { DrawerItem, DrawerTitle } from "../drawer";
import { cpuUnitsToNumber, cssNames, unitsToBytes, metricUnitsToNumber } from "../../utils";
import { KubeObjectDetailsProps } from "../kube-object";
import { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
import { ResourceQuota } from "../../api/endpoints/resource-quota.api";
import { LineProgress } from "../line-progress";
import { Table, TableCell, TableHead, TableRow } from "../table";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
import { ReplicaSetDetails } from "../+workloads-replicasets";
interface Props extends KubeObjectDetailsProps<ResourceQuota> {
}
@ -97,6 +98,10 @@ export class ResourceQuotaDetails extends React.Component<Props> {
}
}
apiManager.registerViews(resourceQuotaApi, {
Details: ResourceQuotaDetails
kubeObjectDetailRegistry.add({
kind: "ResourceQuota",
apiVersions: ["v1"],
components: {
Details: (props) => <ReplicaSetDetails {...props} />
}
})

13
src/renderer/components/+config-resource-quotas/resource-quotas.tsx
View File

@ -48,9 +48,6 @@ export class ResourceQuotas extends React.Component<Props> {
resourceQuota.getNs(),
resourceQuota.getAge(),
]}
renderItemMenu={(item: ResourceQuota) => {
return <ResourceQuotaMenu object={item}/>
}}
addRemoveButtons={{
onAdd: () => AddQuotaDialog.open(),
addTooltip: <Trans>Create new ResourceQuota</Trans>
@ -61,13 +58,3 @@ export class ResourceQuotas extends React.Component<Props> {
);
}
}
export function ResourceQuotaMenu(props: KubeObjectMenuProps<ResourceQuota>) {
return (
<KubeObjectMenu {...props}/>
);
}
apiManager.registerViews(resourceQuotaApi, {
Menu: ResourceQuotaMenu,
})

12
src/renderer/components/+config-secrets/secret-details.tsx
View File

@ -13,10 +13,10 @@ import { base64 } from "../../utils";
import { Icon } from "../icon";
import { secretsStore } from "./secrets.store";
import { KubeObjectDetailsProps } from "../kube-object";
import { Secret, secretsApi } from "../../api/endpoints";
import { Secret } from "../../api/endpoints";
import { _i18n } from "../../i18n";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Secret> {
}
@ -113,6 +113,10 @@ export class SecretDetails extends React.Component<Props> {
}
}
apiManager.registerViews(secretsApi, {
Details: SecretDetails,
kubeObjectDetailRegistry.add({
kind: "Secret",
apiVersions: ["v1"],
components: {
Details: (props) => <SecretDetails {...props} />
}
})

13
src/renderer/components/+config-secrets/secrets.tsx
View File

@ -61,9 +61,6 @@ export class Secrets extends React.Component<Props> {
secret.type,
secret.getAge(),
]}
renderItemMenu={(item: Secret) => {
return <SecretMenu object={item}/>
}}
addRemoveButtons={{
onAdd: () => AddSecretDialog.open(),
addTooltip: <Trans>Create new Secret</Trans>
@ -74,13 +71,3 @@ export class Secrets extends React.Component<Props> {
);
}
}
export function SecretMenu(props: KubeObjectMenuProps<Secret>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(secretsApi, {
Menu: SecretMenu,
})

12
src/renderer/components/+custom-resources/certmanager.k8s.io/cert-manager.mixins.scss
View File

@ -1,12 +0,0 @@
$cert-status-colors: (
ready: $colorOk,
);
@mixin cert-status-bgc {
@each $status, $color in $cert-status-colors {
&.#{$status} {
background: $color;
color: white;
}
}
}

7
src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.scss
View File

@ -1,7 +0,0 @@
@import "cert-manager.mixins";
.CertificateDetails {
.Badge {
@include cert-status-bgc;
}
}

142
src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx
View File

@ -1,142 +0,0 @@
import "./certificate-details.scss"
import React from "react";
import moment from "moment"
import { observer } from "mobx-react";
import { Link } from "react-router-dom";
import { Trans } from "@lingui/macro";
import { DrawerItem, DrawerTitle } from "../../drawer";
import { Badge } from "../../badge";
import { KubeEventDetails } from "../../+events/kube-event-details";
import { KubeObjectDetailsProps } from "../../kube-object";
import { Certificate, certificatesApi } from "../../../api/endpoints/cert-manager.api";
import { cssNames } from "../../../utils";
import { apiManager } from "../../../api/api-manager";
import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
interface Props extends KubeObjectDetailsProps<Certificate> {
}
@observer
export class CertificateDetails extends React.Component<Props> {
render() {
const { object: cert, className } = this.props;
if (!cert) return;
const { spec, status } = cert;
const { acme, isCA, commonName, secretName, dnsNames, duration, ipAddresses, keyAlgorithm, keySize, organization, renewBefore } = spec;
const { lastFailureTime, notAfter } = status;
return (
<div className={cssNames("CertificateDetails", className)}>
<KubeObjectMeta object={cert}/>
<DrawerItem name={<Trans>Issuer</Trans>}>
<Link to={cert.getIssuerDetailsUrl()}>
{cert.getIssuerName()}
</Link>
</DrawerItem>
<DrawerItem name={<Trans>Secret Name</Trans>}>
<Link to={cert.getSecretDetailsUrl()}>
{secretName}
</Link>
</DrawerItem>
<DrawerItem name="CA">
{isCA ? <Trans>Yes</Trans> : <Trans>No</Trans>}
</DrawerItem>
{commonName && (
<DrawerItem name={<Trans>Common Name</Trans>}>
{commonName}
</DrawerItem>
)}
{dnsNames && (
<DrawerItem name={<Trans>DNS names</Trans>} labelsOnly>
{dnsNames.map(name => <Badge key={name} label={name}/>)}
</DrawerItem>
)}
{ipAddresses && (
<DrawerItem name={<Trans>IP addresses</Trans>}>
{ipAddresses.join(", ")}
</DrawerItem>
)}
{organization && (
<DrawerItem name={<Trans>Organization</Trans>}>
{organization.join(", ")}
</DrawerItem>
)}
{duration && (
<DrawerItem name={<Trans>Duration</Trans>}>
{duration}
</DrawerItem>
)}
{renewBefore && (
<DrawerItem name={<Trans>Renew Before</Trans>}>
{renewBefore}
</DrawerItem>
)}
{keySize && (
<DrawerItem name={<Trans>Key Size</Trans>}>
{keySize}
</DrawerItem>
)}
{keyAlgorithm && (
<DrawerItem name={<Trans>Key Algorithm</Trans>}>
{keyAlgorithm}
</DrawerItem>
)}
<DrawerItem name={<Trans>Not After</Trans>}>
{moment(notAfter).format("LLL")}
</DrawerItem>
{lastFailureTime && (
<DrawerItem name={<Trans>Last Failure Time</Trans>}>
{lastFailureTime}
</DrawerItem>
)}
<DrawerItem name={<Trans>Status</Trans>} labelsOnly>
{cert.getConditions().map(({ type, tooltip, isReady }) => {
return (
<Badge
key={type}
label={type}
tooltip={tooltip}
className={cssNames({ [type.toLowerCase()]: isReady })}
/>
)
})}
</DrawerItem>
{acme && (
<>
<DrawerTitle title="ACME"/>
{acme.config.map(({ domains, http01, dns01 }, index) => {
return (
<div key={index} className="acme-config">
<DrawerItem name={<Trans>Domains</Trans>} labelsOnly>
{domains.map(domain => <Badge key={domain} label={domain}/>)}
</DrawerItem>
<DrawerItem name={<Trans>Http01</Trans>}>
{Object.entries(http01).map(([key, val]) => `${key}: ${val}`)[0]}
</DrawerItem>
{dns01 && (
<DrawerItem name={<Trans>DNS Provider</Trans>} labelsOnly>
{dns01.provider}
</DrawerItem>
)}
</div>
)
})}
</>
)}
<KubeEventDetails object={cert}/>
</div>
);
}
}
apiManager.registerViews(certificatesApi, {
Details: CertificateDetails
})

26
src/renderer/components/+custom-resources/certmanager.k8s.io/certificates.scss
View File

@ -1,26 +0,0 @@
@import "cert-manager.mixins";
.Certificates {
.TableCell {
&.name {
flex: 1.2;
}
&.type {
flex: .5;
}
&.status {
flex: .5;
@include table-cell-labels-offsets;
.Badge {
@include cert-status-bgc;
}
}
&.age {
flex: .5;
}
}
}

105
src/renderer/components/+custom-resources/certmanager.k8s.io/certificates.tsx
View File

@ -1,105 +0,0 @@
import "./certificates.scss"
import React from "react";
import { observer } from "mobx-react";
import { Trans } from "@lingui/macro";
import { KubeObjectMenu, KubeObjectMenuProps } from "../../kube-object/kube-object-menu";
import { KubeObjectListLayout, KubeObjectListLayoutProps } from "../../kube-object";
import { Certificate, certificatesApi } from "../../../api/endpoints/cert-manager.api";
import { cssNames, stopPropagation } from "../../../utils";
import { Link } from "react-router-dom";
import { Badge } from "../../badge";
import { apiManager } from "../../../api/api-manager";
import { Spinner } from "../../spinner";
enum sortBy {
name = "name",
namespace = "namespace",
age = "age",
commonName = "common-name",
secretName = "secret",
issuer = "issuer",
type = "type",
}
@observer
export class Certificates extends React.Component<KubeObjectListLayoutProps> {
render() {
const { store = apiManager.getStore(certificatesApi), ...layoutProps } = this.props;
if (!store) {
return <Spinner center/>
}
return (
<KubeObjectListLayout
{...layoutProps}
store={store}
className="Certificates"
sortingCallbacks={{
[sortBy.name]: (item: Certificate) => item.getName(),
[sortBy.namespace]: (item: Certificate) => item.getNs(),
[sortBy.secretName]: (item: Certificate) => item.getSecretName(),
[sortBy.commonName]: (item: Certificate) => item.getCommonName(),
[sortBy.issuer]: (item: Certificate) => item.getIssuerName(),
[sortBy.type]: (item: Certificate) => item.getType(),
}}
searchFilters={[
(item: Certificate) => item.getSearchFields(),
(item: Certificate) => item.getSecretName(),
(item: Certificate) => item.getCommonName(),
(item: Certificate) => item.getIssuerName(),
(item: Certificate) => item.getType(),
]}
renderHeaderTitle={<Trans>Certificates</Trans>}
renderTableHeader={[
{ title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
{ title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
{ title: <Trans>Common Name</Trans>, className: "common-name", sortBy: sortBy.type },
{ title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
{ title: <Trans>Issuer</Trans>, className: "issuer", sortBy: sortBy.issuer },
{ title: <Trans>Secret</Trans>, className: "secret", sortBy: sortBy.secretName },
{ title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
{ title: <Trans>Status</Trans>, className: "status" },
]}
renderTableContents={(cert: Certificate) => {
return [
cert.getName(),
cert.getNs(),
cert.getCommonName(),
cert.getType(),
<Link to={cert.getIssuerDetailsUrl()} onClick={stopPropagation}>
{cert.getIssuerName()}
</Link>,
<Link to={cert.getSecretDetailsUrl()} onClick={stopPropagation}>
{cert.getSecretName()}
</Link>,
cert.getAge(),
cert.getConditions().map(({ type, tooltip, isReady }) => {
return (
<Badge
key={type}
label={type}
tooltip={tooltip}
className={cssNames({ [type.toLowerCase()]: isReady })}
/>
)
})
]
}}
renderItemMenu={(item: Certificate) => {
return <CertificateMenu object={item}/>
}}
/>
);
}
}
export function CertificateMenu(props: KubeObjectMenuProps<Certificate>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(certificatesApi, {
List: Certificates,
Menu: CertificateMenu
})

4
src/renderer/components/+custom-resources/certmanager.k8s.io/index.ts
View File

@ -1,4 +0,0 @@
export * from "./certificates"
export * from "./certificate-details"
export * from "./issuers"
export * from "./issuer-details"

7
src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.scss
View File

@ -1,7 +0,0 @@
@import "cert-manager.mixins";
.IssuerDetails {
.Badge {
@include cert-status-bgc;
}
}

175
src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx
View File

@ -1,175 +0,0 @@
import "./issuer-details.scss"
import React from "react";
import { observer } from "mobx-react";
import { Trans } from "@lingui/macro";
import { Link } from "react-router-dom";
import { DrawerItem, DrawerTitle } from "../../drawer";
import { Badge } from "../../badge";
import { KubeEventDetails } from "../../+events/kube-event-details";
import { KubeObjectDetailsProps } from "../../kube-object";
import { clusterIssuersApi, Issuer, issuersApi } from "../../../api/endpoints/cert-manager.api";
import { autobind, cssNames } from "../../../utils";
import { getDetailsUrl } from "../../../navigation";
import { secretsApi } from "../../../api/endpoints";
import { apiManager } from "../../../api/api-manager";
import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
interface Props extends KubeObjectDetailsProps<Issuer> {
}
@observer
export class IssuerDetails extends React.Component<Props> {
@autobind()
renderSecretLink(secretName: string) {
const namespace = this.props.object.getNs();
if (!namespace) {
return secretName;
}
const secretDetailsUrl = getDetailsUrl(secretsApi.getUrl({
namespace: namespace,
name: secretName,
}));
return (
<Link to={secretDetailsUrl}>
{secretName}
</Link>
)
}
render() {
const { object: issuer, className } = this.props;
if (!issuer) return;
const { renderSecretLink } = this;
const { spec: { acme, ca, vault, venafi }, status } = issuer;
return (
<div className={cssNames("IssuerDetails", className)}>
<KubeObjectMeta object={issuer}/>
<DrawerItem name={<Trans>Type</Trans>}>
{issuer.getType()}
</DrawerItem>
<DrawerItem name={<Trans>Status</Trans>} labelsOnly>
{issuer.getConditions().map(({ type, tooltip, isReady }) => {
return (
<Badge
key={type}
label={type}
tooltip={tooltip}
className={cssNames({ [type.toLowerCase()]: isReady })}
/>
)
})}
</DrawerItem>
{acme && (() => {
const { email, server, skipTLSVerify, privateKeySecretRef, solvers } = acme;
return (
<>
<DrawerTitle title="ACME"/>
<DrawerItem name={<Trans>E-mail</Trans>}>
{email}
</DrawerItem>
<DrawerItem name={<Trans>Server</Trans>}>
{server}
</DrawerItem>
{status.acme && (
<DrawerItem name={<Trans>Status URI</Trans>}>
{status.acme.uri}
</DrawerItem>
)}
<DrawerItem name={<Trans>Private Key Secret</Trans>}>
{renderSecretLink(privateKeySecretRef.name)}
</DrawerItem>
<DrawerItem name={<Trans>Skip TLS Verify</Trans>}>
{skipTLSVerify ? <Trans>Yes</Trans> : <Trans>No</Trans>}
</DrawerItem>
</>
)
})()}
{ca && (() => {
const { secretName } = ca;
return (
<>
<DrawerTitle title="CA"/>
<DrawerItem name={<Trans>Secret Name</Trans>}>
{renderSecretLink(secretName)}
</DrawerItem>
</>
)
})()}
{vault && (() => {
const { auth, caBundle, path, server } = vault;
const { path: authPath, roleId, secretRef } = auth.appRole;
return (
<>
<DrawerTitle title="Vault"/>
<DrawerItem name={<Trans>Server</Trans>}>
{server}
</DrawerItem>
<DrawerItem name={<Trans>Path</Trans>}>
{path}
</DrawerItem>
<DrawerItem name={<Trans>CA Bundle</Trans>} labelsOnly>
<Badge label={caBundle}/>
</DrawerItem>
<DrawerTitle title={<Trans>Auth App Role</Trans>}/>
<DrawerItem name={<Trans>Path</Trans>}>
{authPath}
</DrawerItem>
<DrawerItem name={<Trans>Role ID</Trans>}>
{roleId}
</DrawerItem>
{secretRef && (
<DrawerItem name={<Trans>Secret</Trans>}>
{renderSecretLink(secretRef.name)}
</DrawerItem>
)}
</>
)
})()}
{venafi && (() => {
const { zone, cloud, tpp } = venafi;
return (
<>
<DrawerTitle title="CA"/>
<DrawerItem name={<Trans>Zone</Trans>}>
{zone}
</DrawerItem>
{cloud && (
<DrawerItem name={<Trans>Cloud API Token Secret</Trans>}>
{renderSecretLink(cloud.apiTokenSecretRef.name)}
</DrawerItem>
)}
{tpp && (
<>
<DrawerTitle title="TPP"/>
<DrawerItem name={<Trans>URL</Trans>}>
{tpp.url}
</DrawerItem>
<DrawerItem name={<Trans>CA Bundle</Trans>} labelsOnly>
<Badge label={tpp.caBundle}/>
</DrawerItem>
<DrawerItem name={<Trans>Credentials Ref</Trans>}>
{renderSecretLink(tpp.credentialsRef.name)}
</DrawerItem>
</>
)}
</>
)
})()}
<KubeEventDetails object={issuer}/>
</div>
);
}
}
apiManager.registerViews([issuersApi, clusterIssuersApi], {
Details: IssuerDetails
})

27
src/renderer/components/+custom-resources/certmanager.k8s.io/issuers.scss
View File

@ -1,27 +0,0 @@
@import "cert-manager.mixins";
.Issuers {
.TableCell {
&.name {
flex: 1.2;
}
&.labels {
flex: 2;
@include table-cell-labels-offsets;
}
&.status {
flex: .5;
@include table-cell-labels-offsets;
.Badge {
@include cert-status-bgc;
}
}
&.age {
flex: .5;
}
}
}

103
src/renderer/components/+custom-resources/certmanager.k8s.io/issuers.tsx
View File

@ -1,103 +0,0 @@
import "./issuers.scss"
import React from "react";
import { observer } from "mobx-react";
import { Trans } from "@lingui/macro";
import { KubeObjectMenu, KubeObjectMenuProps } from "../../kube-object/kube-object-menu";
import { KubeObjectListLayout, KubeObjectListLayoutProps } from "../../kube-object";
import { clusterIssuersApi, Issuer, issuersApi } from "../../../api/endpoints/cert-manager.api";
import { cssNames } from "../../../utils";
import { Badge } from "../../badge";
import { Spinner } from "../../spinner";
import { apiManager } from "../../../api/api-manager";
enum sortBy {
name = "name",
namespace = "namespace",
type = "type",
labels = "labels",
age = "age",
}
@observer
export class ClusterIssuers extends React.Component<KubeObjectListLayoutProps> {
render() {
const store = apiManager.getStore(clusterIssuersApi);
return (
<Issuers
{...this.props}
isClusterScoped={true}
store={store}
renderHeaderTitle={<Trans>Cluster Issuers</Trans>}
/>
)
}
}
@observer
export class Issuers extends React.Component<KubeObjectListLayoutProps> {
render() {
const { store = apiManager.getStore(issuersApi), ...layoutProps } = this.props;
if (!store) {
return <Spinner center/>
}
return (
<KubeObjectListLayout
store={store}
renderHeaderTitle={<Trans>Issuers</Trans>}
{...layoutProps}
className="Issuers"
sortingCallbacks={{
[sortBy.name]: (item: Issuer) => item.getName(),
[sortBy.namespace]: (item: Issuer) => item.getNs(),
[sortBy.type]: (item: Issuer) => item.getType(),
[sortBy.labels]: (item: Issuer) => item.getLabels(),
[sortBy.age]: (item: Issuer) => item.metadata.creationTimestamp,
}}
searchFilters={[
(item: Issuer) => item.getSearchFields(),
(item: Issuer) => item.getType(),
]}
renderTableHeader={[
{ title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
{ title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
{ title: <Trans>Labels</Trans>, className: "labels", sortBy: sortBy.labels },
{ title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
{ title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
{ title: <Trans>Status</Trans>, className: "status" },
]}
renderTableContents={(issuer: Issuer) => [
issuer.getName(),
issuer.getNs(),
issuer.getLabels().map(label => <Badge key={label} label={label} title={label}/>),
issuer.getType(),
issuer.getAge(),
issuer.getConditions().map(({ type, tooltip, isReady }) => {
return (
<Badge
key={type}
label={type}
tooltip={tooltip}
className={cssNames({ [type.toLowerCase()]: isReady })}
/>
)
})
]}
renderItemMenu={(item: Issuer) => {
return <IssuerMenu object={item}/>
}}
/>
);
}
}
export function IssuerMenu(props: KubeObjectMenuProps<Issuer>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews([issuersApi, clusterIssuersApi], {
List: Issuers,
Menu: IssuerMenu,
})

9
src/renderer/components/+custom-resources/crd-details.tsx
View File

@ -14,6 +14,7 @@ import { KubeObjectDetailsProps } from "../kube-object";
import { Table, TableCell, TableHead, TableRow } from "../table";
import { Input } from "../input";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
}
@ -133,6 +134,10 @@ export class CRDDetails extends React.Component<Props> {
}
}
apiManager.registerViews(crdApi, {
Details: CRDDetails
kubeObjectDetailRegistry.add({
kind: "CustomResourceDefinition",
apiVersions: ["apiextensions.k8s.io/v1", "apiextensions.k8s.io/v1beta1"],
components: {
Details: (props) => <CRDDetails {...props} />
}
})

16
src/renderer/components/+custom-resources/crd-list.tsx
View File

@ -8,9 +8,7 @@ import { Link } from "react-router-dom";
import { stopPropagation } from "../../utils";
import { KubeObjectListLayout } from "../kube-object";
import { crdStore } from "./crd.store";
import { apiManager } from "../../api/api-manager";
import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { CustomResourceDefinition } from "../../api/endpoints/crd.api";
import { Select, SelectOption } from "../select";
import { navigation, setQueryParams } from "../../navigation";
import { Icon } from "../icon";
@ -103,20 +101,8 @@ export class CrdList extends React.Component {
crd.getAge(),
]
}}
renderItemMenu={(item: CustomResourceDefinition) => {
return <CRDMenu object={item}/>
}}
/>
)
}
}
export function CRDMenu(props: KubeObjectMenuProps<CustomResourceDefinition>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(crdApi, {
Menu: CRDMenu,
});

10
src/renderer/components/+custom-resources/crd-resource-details.tsx
View File

@ -9,7 +9,6 @@ import { cssNames } from "../../utils";
import { Badge } from "../badge";
import { DrawerItem } from "../drawer";
import { KubeObjectDetailsProps } from "../kube-object";
import { apiManager } from "../../api/api-manager";
import { crdStore } from "./crd.store";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { Input } from "../input";
@ -39,20 +38,13 @@ export class CrdResourceDetails extends React.Component<Props> {
return crdStore.getByObject(this.props.object);
}
@computed get CustomDetailsViews() {
return apiManager.getViews(this.props.object.selfLink).Details;
}
render() {
const { object } = this.props;
const { crd, CustomDetailsViews } = this;
const { crd } = this;
if (!object || !crd) return null;
const className = cssNames("CrdResourceDetails", crd.getResourceKind());
const extraColumns = crd.getPrinterColumns();
const showStatus = !extraColumns.find(column => column.name == "Status") && object.status?.conditions;
if (CustomDetailsViews) {
return <CustomDetailsViews className={className} object={object}/>
}
return (
<div className={className}>
<KubeObjectMeta object={object}/>

18
src/renderer/components/+custom-resources/crd-resources.tsx
View File

@ -7,7 +7,6 @@ import { Trans } from "@lingui/macro";
import { RouteComponentProps } from "react-router";
import { KubeObjectListLayout } from "../kube-object";
import { KubeObject } from "../../api/kube-object";
import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { ICRDRouteParams } from "./crd.route";
import { autorun, computed } from "mobx";
import { crdStore } from "./crd.store";
@ -59,9 +58,7 @@ export class CrdResources extends React.Component<Props> {
extraColumns.forEach(column => {
sortingCallbacks[column.name] = (item: KubeObject) => jsonPath.query(item, column.jsonPath.slice(1))
})
// todo: merge extra columns and other params to predefined view
const { List } = apiManager.getViews(crd.getResourceApiBase());
const ListView = List || KubeObjectListLayout;
const ListView = KubeObjectListLayout;
return (
<ListView
className="CrdResources"
@ -93,20 +90,7 @@ export class CrdResources extends React.Component<Props> {
}),
crdInstance.getAge(),
]}
renderItemMenu={(item: KubeObject) => {
return <CrdResourceMenu object={item}/>
}}
/>
)
}
}
export function CrdResourceMenu(props: KubeObjectMenuProps<KubeObject>) {
const { Menu } = apiManager.getViews(props.object.selfLink);
if (Menu) {
return <Menu {...props}/>
}
return (
<KubeObjectMenu {...props}/>
)
}

3
src/renderer/components/+custom-resources/index.ts
View File

@ -3,6 +3,3 @@ export * from "./crd-list";
export * from "./crd-details";
export * from "./crd-resources";
export * from "./crd-resource-details";
// customized crd-s
export * from "./certmanager.k8s.io"

14
src/renderer/components/+events/event-details.tsx
View File

@ -7,12 +7,12 @@ import { DrawerItem, DrawerTitle } from "../drawer";
import { Link } from "react-router-dom";
import { observer } from "mobx-react";
import { KubeObjectDetailsProps } from "../kube-object";
import { eventApi, KubeEvent } from "../../api/endpoints/events.api";
import { apiManager } from "../../api/api-manager";
import { KubeEvent } from "../../api/endpoints/events.api";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { getDetailsUrl } from "../../navigation";
import { Table, TableCell, TableHead, TableRow } from "../table";
import { lookupApiLink } from "../../api/kube-api";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<KubeEvent> {
}
@ -74,6 +74,10 @@ export class EventDetails extends React.Component<Props> {
}
}
apiManager.registerViews(eventApi, {
Details: EventDetails,
});
kubeObjectDetailRegistry.add({
kind: "Event",
apiVersions: ["v1"],
components: {
Details: (props) => <EventDetails {...props}/>
}
})

14
src/renderer/components/+namespaces/namespace-details.tsx
View File

@ -6,14 +6,14 @@ import { observer } from "mobx-react";
import { Trans } from "@lingui/macro";
import { DrawerItem } from "../drawer";
import { cssNames } from "../../utils";
import { Namespace, namespacesApi } from "../../api/endpoints";
import { Namespace } from "../../api/endpoints";
import { KubeObjectDetailsProps } from "../kube-object";
import { Link } from "react-router-dom";
import { getDetailsUrl } from "../../navigation";
import { Spinner } from "../spinner";
import { resourceQuotaStore } from "../+config-resource-quotas/resource-quotas.store";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Namespace> {
}
@ -56,6 +56,10 @@ export class NamespaceDetails extends React.Component<Props> {
}
}
apiManager.registerViews(namespacesApi, {
Details: NamespaceDetails
});
kubeObjectDetailRegistry.add({
kind: "Namespace",
apiVersions: ["v1"],
components: {
Details: (props) => <NamespaceDetails {...props} />
}
})

13
src/renderer/components/+namespaces/namespaces.tsx
View File

@ -53,9 +53,6 @@ export class Namespaces extends React.Component<Props> {
item.getAge(),
{ title: item.getStatus(), className: item.getStatus().toLowerCase() },
]}
renderItemMenu={(item: Namespace) => {
return <NamespaceMenu object={item}/>
}}
addRemoveButtons={{
addTooltip: <Trans>Add Namespace</Trans>,
onAdd: () => AddNamespaceDialog.open(),
@ -69,13 +66,3 @@ export class Namespaces extends React.Component<Props> {
)
}
}
export function NamespaceMenu(props: KubeObjectMenuProps<Namespace>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(namespacesApi, {
Menu: NamespaceMenu,
});

17
src/renderer/components/+network-endpoints/endpoint-details.tsx
View File

@ -2,16 +2,15 @@ import "./endpoint-details.scss"
import React from "react";
import { observer } from "mobx-react";
import { t, Trans } from "@lingui/macro";
import { DrawerItem, DrawerTitle } from "../drawer";
import { Badge } from "../badge";
import { Trans } from "@lingui/macro";
import { DrawerTitle } from "../drawer";
import { KubeEventDetails } from "../+events/kube-event-details";
import { KubeObjectDetailsProps } from "../kube-object";
import { Endpoint, endpointApi } from "../../api/endpoints";
import { Endpoint } from "../../api/endpoints";
import { _i18n } from "../../i18n";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { EndpointSubsetList } from "./endpoint-subset-list";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Endpoint> {
}
@ -39,6 +38,10 @@ export class EndpointDetails extends React.Component<Props> {
}
}
apiManager.registerViews(endpointApi, {
Details: EndpointDetails,
kubeObjectDetailRegistry.add({
kind: "Endpoints",
apiVersions: ["v1"],
components: {
Details: (props) => <EndpointDetails {...props} />
}
})

13
src/renderer/components/+network-endpoints/endpoints.tsx
View File

@ -47,9 +47,6 @@ export class Endpoints extends React.Component<Props> {
endpoint.toString(),
endpoint.getAge(),
]}
renderItemMenu={(item: Endpoint) => {
return <EndpointMenu object={item}/>
}}
tableProps={{
customRowHeights: (item: Endpoint, lineHeight, paddings) => {
const lines = item.getEndpointSubsets().length || 1;
@ -60,13 +57,3 @@ export class Endpoints extends React.Component<Props> {
)
}
}
export function EndpointMenu(props: KubeObjectMenuProps<Endpoint>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(endpointApi, {
Menu: EndpointMenu
})

12
src/renderer/components/+network-ingresses/ingress-details.tsx
View File

@ -5,15 +5,15 @@ import { disposeOnUnmount, observer } from "mobx-react";
import { reaction } from "mobx";
import { Trans } from "@lingui/macro";
import { DrawerItem, DrawerTitle } from "../drawer";
import { Ingress, ILoadBalancerIngress, ingressApi } from "../../api/endpoints";
import { Ingress, ILoadBalancerIngress } from "../../api/endpoints";
import { Table, TableCell, TableHead, TableRow } from "../table";
import { KubeEventDetails } from "../+events/kube-event-details";
import { ingressStore } from "./ingress.store";
import { ResourceMetrics } from "../resource-metrics";
import { KubeObjectDetailsProps } from "../kube-object";
import { IngressCharts } from "./ingress-charts";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Ingress> {
}
@ -134,6 +134,10 @@ export class IngressDetails extends React.Component<Props> {
}
}
apiManager.registerViews(ingressApi, {
Details: IngressDetails,
kubeObjectDetailRegistry.add({
kind: "Ingress",
apiVersions: ["extensions/v1beta1"],
components: {
Details: (props) => <IngressDetails {...props} />
}
})

13
src/renderer/components/+network-ingresses/ingresses.tsx
View File

@ -48,9 +48,6 @@ export class Ingresses extends React.Component<Props> {
ingress.getRoutes().map(route => <p key={route}>{route}</p>),
ingress.getAge(),
]}
renderItemMenu={(item: Ingress) => {
return <IngressMenu object={item}/>
}}
tableProps={{
customRowHeights: (item: Ingress, lineHeight, paddings) => {
const lines = item.getRoutes().length || 1;
@ -61,13 +58,3 @@ export class Ingresses extends React.Component<Props> {
)
}
}
export function IngressMenu(props: KubeObjectMenuProps<Ingress>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(ingressApi, {
Menu: IngressMenu
})

13
src/renderer/components/+network-policies/network-policies.tsx
View File

@ -47,20 +47,7 @@ export class NetworkPolicies extends React.Component<Props> {
item.getTypes().join(", "),
item.getAge(),
]}
renderItemMenu={(item: NetworkPolicy) => {
return <NetworkPolicyMenu object={item}/>
}}
/>
)
}
}
export function NetworkPolicyMenu(props: KubeObjectMenuProps<NetworkPolicy>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(networkPolicyApi, {
Menu: NetworkPolicyMenu,
})

12
src/renderer/components/+network-policies/network-policy-details.tsx
View File

@ -4,15 +4,15 @@ import get from "lodash/get";
import React, { Fragment } from "react";
import { t, Trans } from "@lingui/macro";
import { DrawerItem, DrawerTitle } from "../drawer";
import { IPolicyEgress, IPolicyIngress, IPolicyIpBlock, IPolicySelector, NetworkPolicy, networkPolicyApi } from "../../api/endpoints/network-policy.api";
import { IPolicyEgress, IPolicyIngress, IPolicyIpBlock, IPolicySelector, NetworkPolicy } from "../../api/endpoints/network-policy.api";
import { Badge } from "../badge";
import { SubTitle } from "../layout/sub-title";
import { KubeEventDetails } from "../+events/kube-event-details";
import { observer } from "mobx-react";
import { KubeObjectDetailsProps } from "../kube-object";
import { _i18n } from "../../i18n";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<NetworkPolicy> {
}
@ -144,6 +144,10 @@ export class NetworkPolicyDetails extends React.Component<Props> {
}
}
apiManager.registerViews(networkPolicyApi, {
Details: NetworkPolicyDetails
kubeObjectDetailRegistry.add({
kind: "NetworkPolicy",
apiVersions: ["networking.k8s.io/v1"],
components: {
Details: (props) => <NetworkPolicyDetails {...props} />
}
})

12
src/renderer/components/+network-services/service-details.tsx
View File

@ -7,13 +7,13 @@ import { DrawerItem, DrawerTitle } from "../drawer";
import { Badge } from "../badge";
import { KubeEventDetails } from "../+events/kube-event-details";
import { KubeObjectDetailsProps } from "../kube-object";
import { Service, serviceApi, endpointApi } from "../../api/endpoints";
import { Service, endpointApi } from "../../api/endpoints";
import { _i18n } from "../../i18n";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { ServicePortComponent } from "./service-port-component";
import { endpointStore } from "../+network-endpoints/endpoints.store";
import { ServiceDetailsEndpoint } from "./service-details-endpoint";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Service> {
}
@ -85,6 +85,10 @@ export class ServiceDetails extends React.Component<Props> {
}
}
apiManager.registerViews(serviceApi, {
Details: ServiceDetails,
kubeObjectDetailRegistry.add({
kind: "Service",
apiVersions: ["v1"],
components: {
Details: (props) => <ServiceDetails {...props} />
}
})

13
src/renderer/components/+network-services/services.tsx
View File

@ -70,20 +70,7 @@ export class Services extends React.Component<Props> {
service.getAge(),
{ title: service.getStatus(), className: service.getStatus().toLowerCase() },
]}
renderItemMenu={(item: Service) => {
return <ServiceMenu object={item}/>
}}
/>
)
}
}
export function ServiceMenu(props: KubeObjectMenuProps<Service>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(serviceApi, {
Menu: ServiceMenu
})

1
src/renderer/components/+nodes/index.ts
View File

@ -1,4 +1,3 @@
export * from "./nodes"
export * from "./nodes.route"
export * from "./node-menu"
export * from "./node-details"

14
src/renderer/components/+nodes/node-details.tsx
View File

@ -11,13 +11,13 @@ import { nodesStore } from "./nodes.store";
import { ResourceMetrics } from "../resource-metrics";
import { podsStore } from "../+workloads-pods/pods.store";
import { KubeObjectDetailsProps } from "../kube-object";
import { Node, nodesApi } from "../../api/endpoints";
import { Node } from "../../api/endpoints";
import { NodeCharts } from "./node-charts";
import { reaction } from "mobx";
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { KubeEventDetails } from "../+events/kube-event-details";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Node> {
}
@ -155,6 +155,10 @@ export class NodeDetails extends React.Component<Props> {
}
}
apiManager.registerViews(nodesApi, {
Details: NodeDetails,
});
kubeObjectDetailRegistry.add({
kind: "Node",
apiVersions: ["v1"],
components: {
Details: (props) => <NodeDetails {...props} />
}
})

78
src/renderer/components/+nodes/node-menu.tsx
View File

@ -1,78 +0,0 @@
import React from "react";
import { t, Trans } from "@lingui/macro";
import { Node } from "../../api/endpoints/nodes.api";
import { createTerminalTab, terminalStore } from "../dock/terminal.store";
import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { ConfirmDialog } from "../confirm-dialog";
import { MenuItem } from "../menu";
import { Icon } from "../icon";
import { _i18n } from "../../i18n";
import { hideDetails } from "../../navigation";
export function NodeMenu(props: KubeObjectMenuProps<Node>) {
const { object: node, toolbar } = props;
if (!node) return null;
const nodeName = node.getName();
const sendToTerminal = (command: string) => {
terminalStore.sendCommand(command, {
enter: true,
newTab: true,
});
hideDetails();
}
const shell = () => {
createTerminalTab({
title: _i18n._(t`Node`) + `: ${nodeName}`,
node: nodeName,
});
hideDetails();
}
const cordon = () => {
sendToTerminal(`kubectl cordon ${nodeName}`);
}
const unCordon = () => {
sendToTerminal(`kubectl uncordon ${nodeName}`)
}
const drain = () => {
const command = `kubectl drain ${nodeName} --delete-local-data --ignore-daemonsets --force`;
ConfirmDialog.open({
ok: () => sendToTerminal(command),
labelOk: _i18n._(t`Drain Node`),
message: (
<p>
<Trans>Are you sure you want to drain <b>{nodeName}</b>?</Trans>
</p>
),
})
}
return (
<KubeObjectMenu {...props}>
<MenuItem onClick={shell}>
<Icon svg="ssh" interactive={toolbar} title={_i18n._(t`Node shell`)}/>
<span className="title"><Trans>Shell</Trans></span>
</MenuItem>
{!node.isUnschedulable() && (
<MenuItem onClick={cordon}>
<Icon material="pause_circle_filled" title={_i18n._(t`Cordon`)} interactive={toolbar}/>
<span className="title"><Trans>Cordon</Trans></span>
</MenuItem>
)}
{node.isUnschedulable() && (
<MenuItem onClick={unCordon}>
<Icon material="play_circle_filled" title={_i18n._(t`Uncordon`)} interactive={toolbar}/>
<span className="title"><Trans>Uncordon</Trans></span>
</MenuItem>
)}
<MenuItem onClick={drain}>
<Icon material="delete_sweep" title={_i18n._(t`Drain`)} interactive={toolbar}/>
<span className="title"><Trans>Drain</Trans></span>
</MenuItem>
</KubeObjectMenu>
);
}

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

@ -9,15 +9,13 @@ import { nodesStore } from "./nodes.store";
import { podsStore } from "../+workloads-pods/pods.store";
import { KubeObjectListLayout } from "../kube-object";
import { INodesRouteParams } from "./nodes.route";
import { Node, nodesApi } from "../../api/endpoints/nodes.api";
import { NodeMenu } from "./node-menu";
import { Node } from "../../api/endpoints/nodes.api";
import { LineProgress } from "../line-progress";
import { _i18n } from "../../i18n";
import { bytesToUnits } from "../../utils/convertMemory";
import { Tooltip, TooltipPosition } from "../tooltip";
import kebabCase from "lodash/kebabCase";
import upperFirst from "lodash/upperFirst";
import { apiManager } from "../../api/api-manager";
enum sortBy {
name = "name",
@ -178,15 +176,8 @@ export class Nodes extends React.Component<Props> {
this.renderConditions(node),
]
}}
renderItemMenu={(item: Node) => {
return <NodeMenu object={item}/>
}}
/>
</TabLayout>
)
}
}
apiManager.registerViews(nodesApi, {
Menu: NodeMenu,
});

13
src/renderer/components/+pod-security-policies/pod-security-policies.tsx
View File

@ -50,20 +50,7 @@ export class PodSecurityPolicies extends React.Component {
item.getAge(),
]
}}
renderItemMenu={(item: PodSecurityPolicy) => {
return <PodSecurityPolicyMenu object={item}/>
}}
/>
)
}
}
export function PodSecurityPolicyMenu(props: KubeObjectMenuProps<PodSecurityPolicy>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(pspApi, {
Menu: PodSecurityPolicyMenu,
})

14
src/renderer/components/+pod-security-policies/pod-security-policy-details.tsx
View File

@ -5,11 +5,11 @@ import { observer } from "mobx-react";
import { Trans } from "@lingui/macro";
import { DrawerItem, DrawerTitle } from "../drawer";
import { KubeObjectDetailsProps } from "../kube-object";
import { PodSecurityPolicy, pspApi } from "../../api/endpoints";
import { PodSecurityPolicy } from "../../api/endpoints";
import { Badge } from "../badge";
import { Table, TableCell, TableHead, TableRow } from "../table";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<PodSecurityPolicy> {
}
@ -209,6 +209,10 @@ export class PodSecurityPolicyDetails extends React.Component<Props> {
}
}
apiManager.registerViews(pspApi, {
Details: PodSecurityPolicyDetails,
});
kubeObjectDetailRegistry.add({
kind: "PodSecurityPolicy",
apiVersions: ["policy/v1beta1"],
components: {
Details: (props) => <PodSecurityPolicyDetails {...props}/>
}
})

12
src/renderer/components/+storage-classes/storage-class-details.tsx
View File

@ -8,10 +8,10 @@ import { Badge } from "../badge";
import { KubeEventDetails } from "../+events/kube-event-details";
import { observer } from "mobx-react";
import { KubeObjectDetailsProps } from "../kube-object";
import { StorageClass, storageClassApi } from "../../api/endpoints";
import { StorageClass } from "../../api/endpoints";
import { _i18n } from "../../i18n";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<StorageClass> {
}
@ -62,6 +62,10 @@ export class StorageClassDetails extends React.Component<Props> {
}
}
apiManager.registerViews(storageClassApi, {
Details: StorageClassDetails
kubeObjectDetailRegistry.add({
kind: "StorageClass",
apiVersions: ["storage.k8s.io/v1"],
components: {
Details: (props) => <StorageClassDetails {...props} />
}
})

13
src/renderer/components/+storage-classes/storage-classes.tsx
View File

@ -53,20 +53,7 @@ export class StorageClasses extends React.Component<Props> {
storageClass.isDefault() ? <Trans>Yes</Trans> : null,
storageClass.getAge(),
]}
renderItemMenu={(item: StorageClass) => {
return <StorageClassMenu object={item}/>
}}
/>
)
}
}
export function StorageClassMenu(props: KubeObjectMenuProps<StorageClass>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(storageClassApi, {
Menu: StorageClassMenu,
})

12
src/renderer/components/+storage-volume-claims/volume-claim-details.tsx
View File

@ -14,10 +14,10 @@ import { getDetailsUrl } from "../../navigation";
import { ResourceMetrics } from "../resource-metrics";
import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
import { KubeObjectDetailsProps } from "../kube-object";
import { PersistentVolumeClaim, pvcApi } from "../../api/endpoints";
import { PersistentVolumeClaim } from "../../api/endpoints";
import { _i18n } from "../../i18n";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<PersistentVolumeClaim> {
}
@ -95,6 +95,10 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
}
}
apiManager.registerViews(pvcApi, {
Details: PersistentVolumeClaimDetails,
kubeObjectDetailRegistry.add({
kind: "PersistentVolumeClaim",
apiVersions: ["v1"],
components: {
Details: (props) => <PersistentVolumeClaimDetails {...props} />
}
})

13
src/renderer/components/+storage-volume-claims/volume-claims.tsx
View File

@ -82,20 +82,7 @@ export class PersistentVolumeClaims extends React.Component<Props> {
{ title: pvc.getStatus(), className: pvc.getStatus().toLowerCase() },
]
}}
renderItemMenu={(item: PersistentVolumeClaim) => {
return <PersistentVolumeClaimMenu object={item}/>
}}
/>
)
}
}
export function PersistentVolumeClaimMenu(props: KubeObjectMenuProps<PersistentVolumeClaim>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(pvcApi, {
Menu: PersistentVolumeClaimMenu,
})

12
src/renderer/components/+storage-volumes/volume-details.tsx
View File

@ -9,10 +9,10 @@ import { DrawerItem, DrawerTitle } from "../drawer";
import { Badge } from "../badge";
import { KubeEventDetails } from "../+events/kube-event-details";
import { getDetailsUrl } from "../../navigation";
import { PersistentVolume, persistentVolumeApi, pvcApi } from "../../api/endpoints";
import { PersistentVolume, pvcApi } from "../../api/endpoints";
import { KubeObjectDetailsProps } from "../kube-object";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<PersistentVolume> {
}
@ -103,6 +103,10 @@ export class PersistentVolumeDetails extends React.Component<Props> {
}
}
apiManager.registerViews(persistentVolumeApi, {
Details: PersistentVolumeDetails
kubeObjectDetailRegistry.add({
kind: "PersistentVolume",
apiVersions: ["v1"],
components: {
Details: (props) => <PersistentVolumeDetails {...props} />
}
})

13
src/renderer/components/+storage-volumes/volumes.tsx
View File

@ -72,20 +72,7 @@ export class PersistentVolumes extends React.Component<Props> {
{ title: volume.getStatus(), className: volume.getStatus().toLowerCase() }
]
}}
renderItemMenu={(item: PersistentVolume) => {
return <PersistentVolumeMenu object={item}/>
}}
/>
)
}
}
export function PersistentVolumeMenu(props: KubeObjectMenuProps<PersistentVolume>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(persistentVolumeApi, {
Menu: PersistentVolumeMenu,
})

21
src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx
View File

@ -3,7 +3,7 @@ import "./role-binding-details.scss"
import React from "react";
import { t, Trans } from "@lingui/macro";
import { AddRemoveButtons } from "../add-remove-buttons";
import { clusterRoleBindingApi, IRoleBindingSubject, RoleBinding, roleBindingApi } from "../../api/endpoints";
import { IRoleBindingSubject, RoleBinding } from "../../api/endpoints";
import { autobind, prevDefault } from "../../utils";
import { Table, TableCell, TableHead, TableRow } from "../table";
import { ConfirmDialog } from "../confirm-dialog";
@ -15,8 +15,8 @@ import { roleBindingsStore } from "./role-bindings.store";
import { AddRoleBindingDialog } from "./add-role-binding-dialog";
import { KubeObjectDetailsProps } from "../kube-object";
import { _i18n } from "../../i18n";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<RoleBinding> {
}
@ -125,6 +125,17 @@ export class RoleBindingDetails extends React.Component<Props> {
}
}
apiManager.registerViews([roleBindingApi, clusterRoleBindingApi], {
Details: RoleBindingDetails,
});
kubeObjectDetailRegistry.add({
kind: "RoleBinding",
apiVersions: ["rbac.authorization.k8s.io/v1"],
components: {
Details: (props) => <RoleBindingDetails {...props} />
}
})
kubeObjectDetailRegistry.add({
kind: "ClusterRoleBinding",
apiVersions: ["rbac.authorization.k8s.io/v1"],
components: {
Details: (props) => <RoleBindingDetails {...props} />
}
})

13
src/renderer/components/+user-management-roles-bindings/role-bindings.tsx
View File

@ -54,9 +54,6 @@ export class RoleBindings extends React.Component<Props> {
binding.getNs() || "-",
binding.getAge(),
]}
renderItemMenu={(item: RoleBinding) => {
return <RoleBindingMenu object={item}/>
}}
addRemoveButtons={{
onAdd: () => AddRoleBindingDialog.open(),
addTooltip: <Trans>Create new RoleBinding</Trans>,
@ -65,13 +62,3 @@ export class RoleBindings extends React.Component<Props> {
)
}
}
export function RoleBindingMenu(props: KubeObjectMenuProps<RoleBinding>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews([roleBindingApi, clusterRoleBindingApi], {
Menu: RoleBindingMenu,
})

20
src/renderer/components/+user-management-roles/role-details.tsx
View File

@ -6,9 +6,9 @@ import { DrawerTitle } from "../drawer";
import { KubeEventDetails } from "../+events/kube-event-details";
import { observer } from "mobx-react";
import { KubeObjectDetailsProps } from "../kube-object";
import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
import { apiManager } from "../../api/api-manager";
import { Role } from "../../api/endpoints";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Role> {
}
@ -66,6 +66,18 @@ export class RoleDetails extends React.Component<Props> {
}
}
apiManager.registerViews([roleApi, clusterRoleApi], {
Details: RoleDetails,
kubeObjectDetailRegistry.add({
kind: "Role",
apiVersions: ["rbac.authorization.k8s.io/v1"],
components: {
Details: (props) => <RoleDetails {...props}/>
}
})
kubeObjectDetailRegistry.add({
kind: "ClusterRole",
apiVersions: ["rbac.authorization.k8s.io/v1"],
components: {
Details: (props) => <RoleDetails {...props}/>
}
})

17
src/renderer/components/+user-management-roles/roles.tsx
View File

@ -5,12 +5,10 @@ import { observer } from "mobx-react";
import { Trans } from "@lingui/macro";
import { RouteComponentProps } from "react-router";
import { IRolesRouteParams } from "../+user-management/user-management.route";
import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { rolesStore } from "./roles.store";
import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
import { Role } from "../../api/endpoints";
import { KubeObjectListLayout } from "../kube-object";
import { AddRoleDialog } from "./add-role-dialog";
import { apiManager } from "../../api/api-manager";
enum sortBy {
name = "name",
@ -48,9 +46,6 @@ export class Roles extends React.Component<Props> {
role.getNs() || "-",
role.getAge(),
]}
renderItemMenu={(item: Role) => {
return <RoleMenu object={item}/>
}}
addRemoveButtons={{
onAdd: () => AddRoleDialog.open(),
addTooltip: <Trans>Create new Role</Trans>,
@ -61,13 +56,3 @@ export class Roles extends React.Component<Props> {
)
}
}
export function RoleMenu(props: KubeObjectMenuProps<Role>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews([roleApi, clusterRoleApi], {
Menu: RoleMenu,
});

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

@ -9,13 +9,13 @@ import { DrawerItem, DrawerTitle } from "../drawer";
import { disposeOnUnmount, observer } from "mobx-react";
import { secretsStore } from "../+config-secrets/secrets.store";
import { Link } from "react-router-dom";
import { Secret, ServiceAccount, serviceAccountsApi } from "../../api/endpoints";
import { Secret, ServiceAccount } from "../../api/endpoints";
import { KubeEventDetails } from "../+events/kube-event-details";
import { getDetailsUrl } from "../../navigation";
import { KubeObjectDetailsProps } from "../kube-object";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { Icon } from "../icon";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<ServiceAccount> {
}
@ -132,6 +132,10 @@ export class ServiceAccountsDetails extends React.Component<Props> {
}
}
apiManager.registerViews(serviceAccountsApi, {
Details: ServiceAccountsDetails
kubeObjectDetailRegistry.add({
kind: "ServiceAccount",
apiVersions: ["v1"],
components: {
Details: (props) => <ServiceAccountsDetails {...props} />
}
})

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

@ -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 { apiManager } from "../../api/api-manager";
import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
enum sortBy {
name = "name",
@ -64,18 +64,20 @@ export class ServiceAccounts extends React.Component<Props> {
}
}
export function ServiceAccountMenu(props: KubeObjectMenuProps<ServiceAccount>) {
function ServiceAccountMenu(props: KubeObjectMenuProps<ServiceAccount>) {
const { object, toolbar } = props;
return (
<KubeObjectMenu {...props}>
<MenuItem onClick={() => openServiceAccountKubeConfig(object)}>
<Icon material="insert_drive_file" title="Kubeconfig File" interactive={toolbar}/>
<span className="title"><Trans>Kubeconfig</Trans></span>
</MenuItem>
</KubeObjectMenu>
)
}
apiManager.registerViews(serviceAccountsApi, {
Menu: ServiceAccountMenu,
kubeObjectMenuRegistry.add({
kind: "ServiceAccount",
apiVersions: ["v1"],
components: {
MenuItem: ServiceAccountMenu
}
})

12
src/renderer/components/+workloads-cronjobs/cronjob-details.tsx
View File

@ -12,9 +12,9 @@ import { KubeEventDetails } from "../+events/kube-event-details";
import { cronJobStore } from "./cronjob.store";
import { getDetailsUrl } from "../../navigation";
import { KubeObjectDetailsProps } from "../kube-object";
import { CronJob, cronJobApi, Job } from "../../api/endpoints";
import { apiManager } from "../../api/api-manager";
import { CronJob, Job } from "../../api/endpoints";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<CronJob> {
}
@ -87,6 +87,10 @@ export class CronJobDetails extends React.Component<Props> {
}
}
apiManager.registerViews(cronJobApi, {
Details: CronJobDetails,
kubeObjectDetailRegistry.add({
kind: "CronJob",
apiVersions: ["batch/v1"],
components: {
Details: (props) => <CronJobDetails {...props} />
}
})

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

@ -15,8 +15,8 @@ import { ICronJobsRouteParams } from "../+workloads";
import { KubeObjectListLayout } from "../kube-object";
import { KubeEventIcon } from "../+events/kube-event-icon";
import { _i18n } from "../../i18n";
import { apiManager } from "../../api/api-manager";
import { CronJobTriggerDialog } from "./cronjob-trigger-dialog";
import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
enum sortBy {
name = "name",
@ -85,15 +85,17 @@ export class CronJobs extends React.Component<Props> {
export function CronJobMenu(props: KubeObjectMenuProps<CronJob>) {
const { object, toolbar } = props;
return (
<KubeObjectMenu {...props}>
<MenuItem onClick={() => CronJobTriggerDialog.open(object)}>
<Icon material="play_circle_filled" title={_i18n._(t`Trigger`)} interactive={toolbar}/>
<span className="title"><Trans>Trigger</Trans></span>
</MenuItem>
</KubeObjectMenu>
)
}
apiManager.registerViews(cronJobApi, {
Menu: CronJobMenu,
kubeObjectMenuRegistry.add({
kind: "CronJob",
apiVersions: ["batch/v1beta1"],
components: {
MenuItem: CronJobMenu
}
})

12
src/renderer/components/+workloads-daemonsets/daemonset-details.tsx
View File

@ -12,13 +12,13 @@ import { KubeEventDetails } from "../+events/kube-event-details";
import { daemonSetStore } from "./daemonsets.store";
import { podsStore } from "../+workloads-pods/pods.store";
import { KubeObjectDetailsProps } from "../kube-object";
import { DaemonSet, daemonSetApi } from "../../api/endpoints";
import { DaemonSet } from "../../api/endpoints";
import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
import { reaction } from "mobx";
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<DaemonSet> {
}
@ -97,6 +97,10 @@ export class DaemonSetDetails extends React.Component<Props> {
}
}
apiManager.registerViews(daemonSetApi, {
Details: DaemonSetDetails,
kubeObjectDetailRegistry.add({
kind: "DaemonSet",
apiVersions: ["apps/v1"],
components: {
Details: (props: any) => <DaemonSetDetails {...props} />
}
})

12
src/renderer/components/+workloads-daemonsets/daemonsets.tsx
View File

@ -70,20 +70,8 @@ export class DaemonSets extends React.Component<Props> {
this.renderNodeSelector(daemonSet),
daemonSet.getAge(),
]}
renderItemMenu={(item: DaemonSet) => {
return <DaemonSetMenu object={item}/>
}}
/>
)
}
}
export function DaemonSetMenu(props: KubeObjectMenuProps<DaemonSet>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(daemonSetApi, {
Menu: DaemonSetMenu,
})

10
src/renderer/components/+workloads-deployments/deployment-details.tsx
View File

@ -21,8 +21,8 @@ import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
import { reaction } from "mobx";
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
import { ReplicaSets } from "../+workloads-replicasets";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Deployment> {
}
@ -122,6 +122,10 @@ export class DeploymentDetails extends React.Component<Props> {
}
}
apiManager.registerViews(deploymentApi, {
Details: DeploymentDetails
kubeObjectDetailRegistry.add({
kind: "Deployment",
apiVersions: ["apps/v1"],
components: {
Details: (props: any) => <DeploymentDetails {...props} />
}
})

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

@ -21,7 +21,8 @@ import { cssNames } from "../../utils";
import kebabCase from "lodash/kebabCase";
import orderBy from "lodash/orderBy";
import { KubeEventIcon } from "../+events/kube-event-icon";
import { apiManager } from "../../api/api-manager";
import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
import { DeploymentDetails } from "./deployment-details";
enum sortBy {
name = "name",
@ -96,15 +97,18 @@ export class Deployments extends React.Component<Props> {
export function DeploymentMenu(props: KubeObjectMenuProps<Deployment>) {
const { object, toolbar } = props;
return (
<KubeObjectMenu {...props}>
<MenuItem onClick={() => DeploymentScaleDialog.open(object)}>
<Icon material="open_with" title={_i18n._(t`Scale`)} interactive={toolbar}/>
<span className="title"><Trans>Scale</Trans></span>
</MenuItem>
</KubeObjectMenu>
)
}
apiManager.registerViews(deploymentApi, {
Menu: DeploymentMenu,
});
kubeObjectMenuRegistry.add({
kind: "Deployment",
apiVersions: ["apps/v1"],
components: {
MenuItem: DeploymentMenu
}
})

14
src/renderer/components/+workloads-jobs/job-details.tsx
View File

@ -15,11 +15,11 @@ import { podsStore } from "../+workloads-pods/pods.store";
import { jobStore } from "./job.store";
import { getDetailsUrl } from "../../navigation";
import { KubeObjectDetailsProps } from "../kube-object";
import { Job, jobApi } from "../../api/endpoints";
import { Job } from "../../api/endpoints";
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
import { lookupApiLink } from "../../api/kube-api";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Job> {
}
@ -107,6 +107,10 @@ export class JobDetails extends React.Component<Props> {
}
}
apiManager.registerViews(jobApi, {
Details: JobDetails
});
kubeObjectDetailRegistry.add({
kind: "Job",
apiVersions: ["batch/v1"],
components: {
Details: (props: any) => <JobDetails {...props}/>
}
})

13
src/renderer/components/+workloads-jobs/jobs.tsx
View File

@ -64,20 +64,7 @@ export class Jobs extends React.Component<Props> {
}
]
}}
renderItemMenu={(item: Job) => {
return <JobMenu object={item}/>
}}
/>
)
}
}
export function JobMenu(props: KubeObjectMenuProps<Job>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(jobApi, {
Menu: JobMenu,
})

13
src/renderer/components/+workloads-pods/pod-details.tsx
View File

@ -6,7 +6,7 @@ import { disposeOnUnmount, observer } from "mobx-react";
import { Link } from "react-router-dom";
import { autorun, observable, reaction, toJS } from "mobx";
import { Trans } from "@lingui/macro";
import { IPodMetrics, nodesApi, Pod, podsApi, pvcApi, configMapApi } from "../../api/endpoints";
import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi } from "../../api/endpoints";
import { DrawerItem, DrawerTitle } from "../drawer";
import { Badge } from "../badge";
import { autobind, cssNames, interval } from "../../utils";
@ -22,9 +22,8 @@ import { getDetailsUrl } from "../../navigation";
import { KubeObjectDetailsProps } from "../kube-object";
import { getItemMetrics } from "../../api/endpoints/metrics.api";
import { PodCharts, podMetricTabs } from "./pod-charts";
import { lookupApiLink } from "../../api/kube-api";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<Pod> {
}
@ -223,6 +222,10 @@ export class PodDetails extends React.Component<Props> {
}
}
apiManager.registerViews(podsApi, {
Details: PodDetails
kubeObjectDetailRegistry.add({
kind: "Pod",
apiVersions: ["v1"],
components: {
Details: (props: any) => <PodDetails {...props} />
}
})

10
src/renderer/components/+workloads-pods/pod-menu.scss
View File

@ -1,10 +0,0 @@
.PodMenu {
.StatusBrick {
margin-right: $margin;
@include pod-status-bgs;
&.running:not(.ready) {
background-color: $pod-status-pending-color;
}
}
}

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

@ -1,134 +0,0 @@
import "./pod-menu.scss";
import React from "react";
import { t, Trans } from "@lingui/macro";
import { MenuItem, SubMenu } from "../menu";
import { IPodContainer, Pod } from "../../api/endpoints";
import { Icon } from "../icon";
import { StatusBrick } from "../status-brick";
import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
import { cssNames, prevDefault } from "../../utils";
import { terminalStore, createTerminalTab } from "../dock/terminal.store";
import { _i18n } from "../../i18n";
import { hideDetails } from "../../navigation";
import { createPodLogsTab } from "../dock/pod-logs.store";
interface Props extends KubeObjectMenuProps<Pod> {
}
export class PodMenu extends React.Component<Props> {
async execShell(container?: string) {
hideDetails();
const { object: pod } = this.props
const containerParam = container ? `-c ${container}` : ""
let command = `kubectl exec -i -t -n ${pod.getNs()} ${pod.getName()} ${containerParam} "--"`
if (window.navigator.platform !== "Win32") {
command = `exec ${command}`
}
if (pod.getSelectedNodeOs() === "windows") {
command = `${command} powershell`
} else {
command = `${command} sh -c "clear; (bash || ash || sh)"`
}
const shell = createTerminalTab({
title: _i18n._(t`Pod`) + `: ${pod.getName()} (namespace: ${pod.getNs()})`
});
terminalStore.sendCommand(command, {
enter: true,
tabId: shell.id
});
}
showLogs(container: IPodContainer) {
hideDetails();
const pod = this.props.object;
createPodLogsTab({
pod,
containers: pod.getContainers(),
initContainers: pod.getInitContainers(),
selectedContainer: container,
showTimestamps: false,
previous: false,
tailLines: 1000
});
}
renderShellMenu() {
const { object: pod, toolbar } = this.props
const containers = pod.getRunningContainers();
if (!containers.length) return;
return (
<MenuItem onClick={prevDefault(() => this.execShell(containers[0].name))}>
<Icon svg="ssh" interactive={toolbar} title={_i18n._(t`Pod shell`)}/>
<span className="title"><Trans>Shell</Trans></span>
{containers.length > 1 && (
<>
<Icon className="arrow" material="keyboard_arrow_right"/>
<SubMenu>
{
containers.map(container => {
const { name } = container;
return (
<MenuItem key={name} onClick={prevDefault(() => this.execShell(name))} className="flex align-center">
<StatusBrick/>
{name}
</MenuItem>
)
})
}
</SubMenu>
</>
)}
</MenuItem>
)
}
renderLogsMenu() {
const { object: pod, toolbar } = this.props
const containers = pod.getAllContainers();
const statuses = pod.getContainerStatuses();
if (!containers.length) return;
return (
<MenuItem onClick={prevDefault(() => this.showLogs(containers[0]))}>
<Icon material="subject" title={_i18n._(t`Logs`)} interactive={toolbar}/>
<span className="title"><Trans>Logs</Trans></span>
{containers.length > 1 && (
<>
<Icon className="arrow" material="keyboard_arrow_right"/>
<SubMenu>
{
containers.map(container => {
const { name } = container
const status = statuses.find(status => status.name === name);
const brick = status ? (
<StatusBrick
className={cssNames(Object.keys(status.state)[0], { ready: status.ready })}
/>
) : null
return (
<MenuItem key={name} onClick={prevDefault(() => this.showLogs(container))} className="flex align-center">
{brick}
{name}
</MenuItem>
)
})
}
</SubMenu>
</>
)}
</MenuItem>
)
}
render() {
const { ...menuProps } = this.props;
return (
<KubeObjectMenu {...menuProps} className="PodMenu">
{this.renderShellMenu()}
{this.renderLogsMenu()}
</KubeObjectMenu>
)
}
}

11
src/renderer/components/+workloads-pods/pods.tsx
View File

@ -10,8 +10,7 @@ import { volumeClaimStore } from "../+storage-volume-claims/volume-claim.store";
import { IPodsRouteParams } from "../+workloads";
import { eventStore } from "../+events/event.store";
import { KubeObjectListLayout } from "../kube-object";
import { Pod, podsApi } from "../../api/endpoints";
import { PodMenu } from "./pod-menu";
import { Pod } from "../../api/endpoints";
import { StatusBrick } from "../status-brick";
import { cssNames, stopPropagation } from "../../utils";
import { KubeEventIcon } from "../+events/kube-event-icon";
@ -20,7 +19,6 @@ import toPairs from "lodash/toPairs";
import startCase from "lodash/startCase";
import kebabCase from "lodash/kebabCase";
import { lookupApiLink } from "../../api/kube-api";
import { apiManager } from "../../api/api-manager";
enum sortBy {
name = "name",
@ -119,14 +117,7 @@ export class Pods extends React.Component<Props> {
pod.getAge(),
{ title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) }
]}
renderItemMenu={(item: Pod) => {
return <PodMenu object={item}/>
}}
/>
)
}
}
apiManager.registerViews(podsApi, {
Menu: PodMenu,
})

12
src/renderer/components/+workloads-replicasets/replicaset-details.tsx
View File

@ -12,12 +12,12 @@ import { KubeEventDetails } from "../+events/kube-event-details";
import { disposeOnUnmount, observer } from "mobx-react";
import { podsStore } from "../+workloads-pods/pods.store";
import { KubeObjectDetailsProps } from "../kube-object";
import { ReplicaSet, replicaSetApi } from "../../api/endpoints";
import { ReplicaSet } from "../../api/endpoints";
import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<ReplicaSet> {
}
@ -97,6 +97,10 @@ export class ReplicaSetDetails extends React.Component<Props> {
}
}
apiManager.registerViews(replicaSetApi, {
Details: ReplicaSetDetails,
kubeObjectDetailRegistry.add({
kind: "ReplicaSet",
apiVersions: ["apps/v1"],
components: {
Details: (props: any) => <ReplicaSetDetails {...props} />
}
})

4
src/renderer/components/+workloads-replicasets/replicasets.tsx
View File

@ -92,7 +92,3 @@ export function ReplicaSetMenu(props: KubeObjectMenuProps<ReplicaSet>) {
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(replicaSetApi, {
Menu: ReplicaSetMenu,
});

13
src/renderer/components/+workloads-statefulsets/statefulset-details.tsx
View File

@ -13,12 +13,12 @@ import { KubeEventDetails } from "../+events/kube-event-details";
import { podsStore } from "../+workloads-pods/pods.store";
import { statefulSetStore } from "./statefulset.store";
import { KubeObjectDetailsProps } from "../kube-object";
import { StatefulSet, statefulSetApi } from "../../api/endpoints";
import { StatefulSet } from "../../api/endpoints";
import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMeta } from "../kube-object/kube-object-meta";
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
interface Props extends KubeObjectDetailsProps<StatefulSet> {
}
@ -95,6 +95,11 @@ export class StatefulSetDetails extends React.Component<Props> {
}
}
apiManager.registerViews(statefulSetApi, {
Details: StatefulSetDetails
kubeObjectDetailRegistry.add({
kind: "StatefulSet",
apiVersions: ["apps/v1"],
components: {
Details: (props: any) => <StatefulSetDetails {...props} />
}
})

13
src/renderer/components/+workloads-statefulsets/statefulsets.tsx
View File

@ -60,20 +60,7 @@ export class StatefulSets extends React.Component<Props> {
<KubeEventIcon object={statefulSet}/>,
statefulSet.getAge(),
]}
renderItemMenu={(item: StatefulSet) => {
return <StatefulSetMenu object={item}/>
}}
/>
)
}
}
export function StatefulSetMenu(props: KubeObjectMenuProps<StatefulSet>) {
return (
<KubeObjectMenu {...props}/>
)
}
apiManager.registerViews(statefulSetApi, {
Menu: StatefulSetMenu,
})

23
src/renderer/components/kube-object/kube-object-details.tsx
View File

@ -8,9 +8,11 @@ import { getDetails, hideDetails } from "../../navigation";
import { Drawer } from "../drawer";
import { KubeObject } from "../../api/kube-object";
import { Spinner } from "../spinner";
import { apiManager, ApiComponents } from "../../api/api-manager";
import { apiManager } from "../../api/api-manager";
import { crdStore } from "../+custom-resources/crd.store";
import { CrdResourceDetails, CrdResourceMenu } from "../+custom-resources";
import { CrdResourceDetails } from "../+custom-resources";
import { KubeObjectMenu } from "./kube-object-menu"
import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
export interface KubeObjectDetailsProps<T = KubeObject> {
className?: string;
@ -64,14 +66,15 @@ export class KubeObjectDetails extends React.Component {
const { object, isLoading, loadingError, isCrdInstance } = this;
const isOpen = !!(object || isLoading || loadingError);
let title = "";
let apiComponents: ApiComponents;
let details: JSX.Element[];
if (object) {
const { kind, getName, selfLink } = object;
const { kind, getName } = object;
title = `${kind}: ${getName()}`;
apiComponents = apiManager.getViews(selfLink);
if (isCrdInstance && !apiComponents.Details) {
apiComponents.Details = CrdResourceDetails
apiComponents.Menu = CrdResourceMenu
details = kubeObjectDetailRegistry.getItemsForKind(object.kind, object.apiVersion).map((item, index) => {
return <item.components.Details object={object} key={`object-details-${index}`}/>
})
if (isCrdInstance && details.length === 0) {
details.push(<CrdResourceDetails object={object} />)
}
}
return (
@ -79,12 +82,12 @@ export class KubeObjectDetails extends React.Component {
className="KubeObjectDetails flex column"
open={isOpen}
title={title}
toolbar={apiComponents && apiComponents.Menu && <apiComponents.Menu object={object} toolbar/>}
toolbar={<KubeObjectMenu object={object} toolbar={true} />}
onClose={hideDetails}
>
{isLoading && <Spinner center/>}
{loadingError && <div className="box center">{loadingError}</div>}
{apiComponents && apiComponents.Details && <apiComponents.Details object={object}/>}
{details}
</Drawer>
)
}

4
src/renderer/components/kube-object/kube-object-list-layout.tsx
View File

@ -6,6 +6,7 @@ import { KubeObject } from "../../api/kube-object";
import { getSelectedDetails, showDetails } from "../../navigation";
import { ItemListLayout, ItemListLayoutProps } from "../item-object-list/item-list-layout";
import { KubeObjectStore } from "../../kube-object.store";
import { KubeObjectMenu } from "./kube-object-menu";
export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
store: KubeObjectStore;
@ -34,6 +35,9 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
className={cssNames("KubeObjectListLayout", className)}
detailsItem={this.selectedItem}
onDetails={this.onDetails}
renderItemMenu={(item) => {
return <KubeObjectMenu object={item}/>
}}
/>
);
}

Some files were not shown because too many files have changed in this diff Show More