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

Split KubeObject related components into seperate folders (#3533)

Browse Source
This commit is contained in:
Sebastian Malton authored and GitHub committed 2021-08-03 17:39:29 -04:00
1 parent 3fe8014f11
commit fb74859f66
92 files changed
+305 -179
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/renderer/components/kube-object/index.ts
-25
View File
@@ -1,25 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
export * from "./kube-object-details";
export * from "./kube-object-list-layout";
export * from "./kube-object-menu";
export * from "./kube-object-meta";
src/renderer/components/kube-object/kube-object-details.scss
-24
View File
@@ -1,24 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.KubeObjectDetails {
z-index: $zIndex-drawer + 1 !important;
}
src/renderer/components/kube-object/kube-object-details.tsx
-201
View File
@@ -1,201 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import "./kube-object-details.scss";
import React from "react";
import { disposeOnUnmount, observer } from "mobx-react";
import { computed, observable, reaction, makeObservable } from "mobx";
import { createPageParam, navigation } from "../../navigation";
import { Drawer } from "../drawer";
import type { KubeObject } from "../../api/kube-object";
import { Spinner } from "../spinner";
import { apiManager } from "../../api/api-manager";
import { crdStore } from "../+custom-resources/crd.store";
import { KubeObjectMenu } from "./kube-object-menu";
import { KubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
import logger from "../../../main/logger";
import { CrdResourceDetails } from "../+custom-resources";
import { KubeObjectMeta } from "./kube-object-meta";
/**
* Used to store `object.selfLink` to show more info about resource in the details panel.
*/
export const kubeDetailsUrlParam = createPageParam({
name: "kube-details",
});
/**
* Used to highlight last active/selected table row with the resource.
*
* @example
* If we go to "Nodes (page) -> Node (details) -> Pod (details)",
* last clicked Node should be "active" while Pod details are shown).
*/
export const kubeSelectedUrlParam = createPageParam({
name: "kube-selected",
get defaultValue() {
return kubeDetailsUrlParam.get();
}
});
export function showDetails(selfLink = "", resetSelected = true) {
const detailsUrl = getDetailsUrl(selfLink, resetSelected);
navigation.merge({ search: detailsUrl });
}
export function hideDetails() {
showDetails();
}
export function getDetailsUrl(selfLink: string, resetSelected = false, mergeGlobals = true) {
logger.debug("getDetailsUrl", { selfLink, resetSelected, mergeGlobals });
const params = new URLSearchParams(mergeGlobals ? navigation.searchParams : "");
params.set(kubeDetailsUrlParam.name, selfLink);
if (resetSelected) {
params.delete(kubeSelectedUrlParam.name);
} else {
params.set(kubeSelectedUrlParam.name, kubeSelectedUrlParam.get());
}
return `?${params}`;
}
export interface KubeObjectDetailsProps<T extends KubeObject = KubeObject> {
className?: string;
object: T;
}
@observer
export class KubeObjectDetails extends React.Component {
@observable isLoading = false;
@observable.ref loadingError: React.ReactNode;
constructor(props: {}) {
super(props);
makeObservable(this);
}
@computed get path() {
return kubeDetailsUrlParam.get();
}
@computed get object() {
try {
return apiManager
.getStore(this.path)
?.getByPath(this.path);
} catch (error) {
logger.error(`[KUBE-OBJECT-DETAILS]: failed to get store or object: ${error}`, { path: this.path });
return undefined;
}
}
@disposeOnUnmount
loader = reaction(() => [
this.path,
this.object, // resource might be updated via watch-event or from already opened details
crdStore.items.length, // crd stores initialized after loading
], async () => {
this.loadingError = "";
const { path, object } = this;
if (!object) {
const store = apiManager.getStore(path);
if (store) {
this.isLoading = true;
try {
await store.loadFromPath(path);
} catch (err) {
this.loadingError = <>Resource loading has failed: <b>{err.toString()}</b></>;
} finally {
this.isLoading = false;
}
}
}
});
render() {
const { object, isLoading, loadingError } = this;
const isOpen = !!(object || isLoading || loadingError);
if (!object) {
return (
<Drawer
className="KubeObjectDetails flex column"
open={isOpen}
title=""
toolbar={<KubeObjectMenu object={object} toolbar={true} />}
onClose={hideDetails}
>
{isLoading && <Spinner center />}
{loadingError && <div className="box center">{loadingError}</div>}
</Drawer>
);
}
const { kind, getName } = object;
const title = `${kind}: ${getName()}`;
const details = KubeObjectDetailRegistry
.getInstance()
.getItemsForKind(object.kind, object.apiVersion)
.map((item, index) => (
<item.components.Details object={object} key={`object-details-${index}`} />
));
if (details.length === 0) {
const crd = crdStore.getByObject(object);
/**
* This is a fallback so that if a custom resource object doesn't have
* any defined details we should try and display at least some details
*/
if (crd) {
details.push(<CrdResourceDetails key={object.getId()} object={object} crd={crd} />);
}
}
if (details.length === 0) {
// if we still don't have any details to show, just show the standard object metadata
details.push(<KubeObjectMeta key={object.getId()} object={object} />);
}
return (
<Drawer
className="KubeObjectDetails flex column"
open={isOpen}
title={title}
toolbar={<KubeObjectMenu object={object} toolbar={true}/>}
onClose={hideDetails}
>
{isLoading && <Spinner center/>}
{loadingError && <div className="box center">{loadingError}</div>}
{details}
</Drawer>
);
}
}
src/renderer/components/kube-object/kube-object-list-layout.tsx
-102
View File
@@ -1,102 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import React from "react";
import { computed, makeObservable } from "mobx";
import { disposeOnUnmount, observer } from "mobx-react";
import { cssNames } from "../../utils";
import type { KubeObject } from "../../api/kube-object";
import { ItemListLayout, ItemListLayoutProps } from "../item-object-list/item-list-layout";
import type { KubeObjectStore } from "../../kube-object.store";
import { KubeObjectMenu } from "./kube-object-menu";
import { kubeSelectedUrlParam, showDetails } from "./kube-object-details";
import { kubeWatchApi } from "../../api/kube-watch-api";
import { clusterContext } from "../context";
import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
import { ResourceKindMap, ResourceNames } from "../../utils/rbac";
export interface KubeObjectListLayoutProps<K extends KubeObject> extends ItemListLayoutProps<K> {
store: KubeObjectStore<K>;
dependentStores?: KubeObjectStore<KubeObject>[];
}
const defaultProps: Partial<KubeObjectListLayoutProps<KubeObject>> = {
onDetails: (item: KubeObject) => showDetails(item.selfLink),
};
@observer
export class KubeObjectListLayout<K extends KubeObject> extends React.Component<KubeObjectListLayoutProps<K>> {
static defaultProps = defaultProps as object;
constructor(props: KubeObjectListLayoutProps<K>) {
super(props);
makeObservable(this);
}
@computed get selectedItem() {
return this.props.store.getByPath(kubeSelectedUrlParam.get());
}
componentDidMount() {
const { store, dependentStores = [] } = this.props;
const stores = Array.from(new Set([store, ...dependentStores]));
disposeOnUnmount(this, [
kubeWatchApi.subscribeStores(stores, {
preload: true,
namespaces: clusterContext.contextNamespaces,
})
]);
}
render() {
const { className, customizeHeader, store, items = store.contextItems, ...layoutProps } = this.props;
const placeholderString = ResourceNames[ResourceKindMap[store.api.kind]] || store.api.kind;
return (
<ItemListLayout
{...layoutProps}
className={cssNames("KubeObjectListLayout", className)}
store={store}
items={items}
preloadStores={false} // loading handled in kubeWatchApi.subscribeStores()
detailsItem={this.selectedItem}
customizeHeader={[
({ filters, searchProps, ...headerPlaceHolders }) => ({
filters: (
<>
{filters}
{store.api.isNamespaced && <NamespaceSelectFilter />}
</>
),
searchProps: {
...searchProps,
placeholder: `Search ${placeholderString}...`,
},
...headerPlaceHolders,
}),
...[customizeHeader].flat(),
]}
renderItemMenu={item => <KubeObjectMenu object={item} />}
/>
);
}
}
src/renderer/components/kube-object/kube-object-menu.tsx
-121
View File
@@ -1,121 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import React from "react";
import { boundMethod, cssNames } from "../../utils";
import type { KubeObject } from "../../api/kube-object";
import { editResourceTab } from "../dock/edit-resource.store";
import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
import { hideDetails } from "./kube-object-details";
import { apiManager } from "../../api/api-manager";
import { KubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
export interface KubeObjectMenuProps<T> extends MenuActionsProps {
object: T | null | undefined;
editable?: boolean;
removable?: boolean;
}
export class KubeObjectMenu<T extends KubeObject> extends React.Component<KubeObjectMenuProps<T>> {
get store() {
const { object } = this.props;
if (!object) return null;
return apiManager.getStore(object.selfLink);
}
get isEditable() {
const { editable } = this.props;
return editable !== undefined ? editable : !!(this.store && this.store.update);
}
get isRemovable() {
const { removable } = this.props;
return removable !== undefined ? removable : !!(this.store && this.store.remove);
}
@boundMethod
async update() {
hideDetails();
editResourceTab(this.props.object);
}
@boundMethod
async remove() {
hideDetails();
const { object, removeAction } = this.props;
if (removeAction) await removeAction();
else await this.store.remove(object);
}
@boundMethod
renderRemoveMessage() {
const { object } = this.props;
if (!object) {
return null;
}
return (
<p>Remove {object.kind} <b>{object.getName()}</b>?</p>
);
}
getMenuItems(): React.ReactChild[] {
const { object, toolbar } = this.props;
if (!object) {
return [];
}
return KubeObjectMenuRegistry
.getInstance()
.getItemsForKind(object.kind, object.apiVersion)
.map(({components: { MenuItem }}, index) => (
<MenuItem
object={object}
key={`menu-item-${index}`}
toolbar={toolbar}
/>
));
}
render() {
const { remove, update, renderRemoveMessage, isEditable, isRemovable } = this;
const { className, editable, removable, ...menuProps } = this.props;
return (
<MenuActions
className={cssNames("KubeObjectMenu", className)}
updateAction={isEditable ? update : undefined}
removeAction={isRemovable ? remove : undefined}
removeConfirmationMessage={renderRemoveMessage}
{...menuProps}
>
{this.getMenuItems()}
</MenuActions>
);
}
}
src/renderer/components/kube-object/kube-object-meta.tsx
-110
View File
@@ -1,110 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import React from "react";
import type { KubeMetaField, KubeObject } from "../../api/kube-object";
import { DrawerItem, DrawerItemLabels } from "../drawer";
import { lookupApiLink } from "../../api/kube-api";
import { Link } from "react-router-dom";
import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { LocaleDate } from "../locale-date";
import { getDetailsUrl } from "./kube-object-details";
export interface KubeObjectMetaProps {
object: KubeObject;
hideFields?: KubeMetaField[];
}
export class KubeObjectMeta extends React.Component<KubeObjectMetaProps> {
static defaultHiddenFields: KubeMetaField[] = [
"uid", "resourceVersion", "selfLink"
];
isHidden(field: KubeMetaField): boolean {
const { hideFields = KubeObjectMeta.defaultHiddenFields } = this.props;
return hideFields.includes(field);
}
render() {
const { object } = this.props;
const {
getNs, getLabels, getResourceVersion, selfLink, getAnnotations,
getFinalizers, getId, getAge, getName, metadata: { creationTimestamp },
} = object;
const ownerRefs = object.getOwnerRefs();
return (
<>
<DrawerItem name="Created" hidden={this.isHidden("creationTimestamp")}>
{getAge(true, false)} ago ({<LocaleDate date={creationTimestamp} />})
</DrawerItem>
<DrawerItem name="Name" hidden={this.isHidden("name")}>
{getName()}
<KubeObjectStatusIcon key="icon" object={object} />
</DrawerItem>
<DrawerItem name="Namespace" hidden={this.isHidden("namespace") || !getNs()}>
{getNs()}
</DrawerItem>
<DrawerItem name="UID" hidden={this.isHidden("uid")}>
{getId()}
</DrawerItem>
<DrawerItem name="Link" hidden={this.isHidden("selfLink")}>
{selfLink}
</DrawerItem>
<DrawerItem name="Resource Version" hidden={this.isHidden("resourceVersion")}>
{getResourceVersion()}
</DrawerItem>
<DrawerItemLabels
name="Labels"
labels={getLabels()}
hidden={this.isHidden("labels")}
/>
<DrawerItemLabels
name="Annotations"
labels={getAnnotations()}
hidden={this.isHidden("annotations")}
/>
<DrawerItemLabels
name="Finalizers"
labels={getFinalizers()}
hidden={this.isHidden("finalizers")}
/>
{ownerRefs?.length > 0 &&
<DrawerItem name="Controlled By" hidden={this.isHidden("ownerReferences")}>
{
ownerRefs.map(ref => {
const { name, kind } = ref;
const ownerDetailsUrl = getDetailsUrl(lookupApiLink(ref, object));
return (
<p key={name}>
{kind} <Link to={ownerDetailsUrl}>{name}</Link>
</p>
);
})
}
</DrawerItem>
}
</>
);
}
}