Rework extension API into parts (#2879)

* `Main`, `Common`, and `Renderer`
* move registry types to Common.Types

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton authored and GitHub committed 2021-05-27 14:56:33 -04:00
1 parent db54a658a2
commit df1f6e128e
28 files changed
+227 -161

No files matched your search

+30 -13
View File
@@ -20,17 +20,34 @@
*/
import React from "react";
import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
import { Renderer, Common } from "@k8slens/extensions";
export interface PodLogsMenuProps extends Component.KubeObjectMenuProps<K8sApi.Pod> {
type Pod = Renderer.K8sApi.Pod;
type IPodContainer = Renderer.K8sApi.IPodContainer;
const {
Component: {
logTabStore,
MenuItem,
Icon,
SubMenu,
StatusBrick,
},
Navigation,
} = Renderer;
const {
Util,
} = Common;
export interface PodLogsMenuProps extends Renderer.Component.KubeObjectMenuProps<Pod> {
}
export class PodLogsMenu extends React.Component<PodLogsMenuProps> {
showLogs(container: K8sApi.IPodContainer) {
showLogs(container: IPodContainer) {
Navigation.hideDetails();
const pod = this.props.object;
Component.logTabStore.createPodTab({
logTabStore.createPodTab({
selectedPod: pod,
selectedContainer: container,
});
@@ -44,35 +61,35 @@ export class PodLogsMenu extends React.Component<PodLogsMenuProps> {
if (!containers.length) return null;
return (
<Component.MenuItem onClick={Util.prevDefault(() => this.showLogs(containers[0]))}>
<Component.Icon material="subject" title="Logs" interactive={toolbar}/>
<MenuItem onClick={Util.prevDefault(() => this.showLogs(containers[0]))}>
<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>
<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 ? (
<Component.StatusBrick
<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">
<MenuItem key={name} onClick={Util.prevDefault(() => this.showLogs(container))} className="flex align-center">
{brick}
<span>{name}</span>
</Component.MenuItem>
</MenuItem>
);
})
}
</Component.SubMenu>
</SubMenu>
</>
)}
</Component.MenuItem>
</MenuItem>
);
}
}
+30 -13
View File
@@ -22,9 +22,26 @@
import React from "react";
import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
import { Renderer, Common } from "@k8slens/extensions";
export interface PodShellMenuProps extends Component.KubeObjectMenuProps<K8sApi.Pod> {
type Pod = Renderer.K8sApi.Pod;
const {
Component: {
createTerminalTab,
terminalStore,
MenuItem,
Icon,
SubMenu,
StatusBrick,
},
Navigation,
} = Renderer;
const {
Util,
} = Common;
export interface PodShellMenuProps extends Renderer.Component.KubeObjectMenuProps<Pod> {
}
export class PodShellMenu extends React.Component<PodShellMenuProps> {
@@ -44,11 +61,11 @@ export class PodShellMenu extends React.Component<PodShellMenuProps> {
command = `${command} sh -c "clear; (bash || ash || sh)"`;
}
const shell = Component.createTerminalTab({
const shell = createTerminalTab({
title: `Pod: ${pod.getName()} (namespace: ${pod.getNs()})`
});
Component.terminalStore.sendCommand(command, {
terminalStore.sendCommand(command, {
enter: true,
tabId: shell.id
});
@@ -61,29 +78,29 @@ export class PodShellMenu extends React.Component<PodShellMenuProps> {
if (!containers.length) return null;
return (
<Component.MenuItem onClick={Util.prevDefault(() => this.execShell(containers[0].name))}>
<Component.Icon svg="ssh" interactive={toolbar} title="Pod shell"/>
<MenuItem onClick={Util.prevDefault(() => this.execShell(containers[0].name))}>
<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>
<Icon className="arrow" material="keyboard_arrow_right"/>
<SubMenu>
{
containers.map(container => {
const { name } = container;
return (
<Component.MenuItem key={name} onClick={Util.prevDefault(() => this.execShell(name))} className="flex align-center">
<Component.StatusBrick/>
<MenuItem key={name} onClick={Util.prevDefault(() => this.execShell(name))} className="flex align-center">
<StatusBrick/>
<span>{name}</span>
</Component.MenuItem>
</MenuItem>
);
})
}
</Component.SubMenu>
</SubMenu>
</>
)}
</Component.MenuItem>
</MenuItem>
);
}
}