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

Use custom remove namespaces dialog

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2023-03-02 16:58:49 +03:00
parent e9fbde7213
commit ccc5034930
1 changed files with 88 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
packages/core/src/renderer/components/+namespaces/route.tsx
View File

@ -18,6 +18,8 @@ import { KubeObjectAge } from "../kube-object/age";
import openAddNamepaceDialogInjectable from "./add-dialog/open.injectable"; import openAddNamepaceDialogInjectable from "./add-dialog/open.injectable";
import { SubnamespaceBadge } from "./subnamespace-badge"; import { SubnamespaceBadge } from "./subnamespace-badge";
import { NamespaceMenu } from "./namespace-menu"; import { NamespaceMenu } from "./namespace-menu";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
enum columnId { enum columnId {
name = "name", name = "name",
@ -29,72 +31,101 @@ enum columnId {
interface Dependencies { interface Dependencies {
namespaceStore: NamespaceStore; namespaceStore: NamespaceStore;
openAddNamespaceDialog: () => void; openAddNamespaceDialog: () => void;
openConfirmDialog: OpenConfirmDialog;
} }
const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog }: Dependencies) => ( const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog, openConfirmDialog }: Dependencies) => {
<TabLayout> function onConfirm() {
<KubeObjectListLayout namespaceStore.removeSelectedItems();
isConfigurable }
tableId="namespaces"
className="Namespaces" function openRemoveNamespaceDialog() {
store={namespaceStore} const namespaces = namespaceStore.selectedItems;
sortingCallbacks={{ const message = (
[columnId.name]: namespace => namespace.getName(), <div>
[columnId.labels]: namespace => namespace.getLabels(),
[columnId.age]: namespace => -namespace.getCreationTimestamp(),
[columnId.status]: namespace => namespace.getStatus(),
}}
searchFilters={[
namespace => namespace.getSearchFields(),
namespace => namespace.getStatus(),
]}
renderHeaderTitle="Namespaces"
renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning", showWithColumn: columnId.name },
{ title: "Labels", className: "labels scrollable", sortBy: columnId.labels, id: columnId.labels },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
{ title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
]}
renderTableContents={namespace => [
<> <>
{namespace.getName()} Remove following namespaces?
{namespace.isSubnamespace() && ( {" "}
<SubnamespaceBadge className="subnamespaceBadge" id={`namespace-list-badge-for-${namespace.getId()}`} /> <div style={{ overflow: "auto", maxHeight: "200px" }}>
)} {namespaces.map(namespace => (
</>, <li key={namespace.getId()}>{namespace.getName()}</li>
<KubeObjectStatusIcon key="icon" object={namespace} />, ))}
namespace.getLabels().map(label => ( </div>
<Badge </>
scrollable </div>
key={label} );
label={label}
openConfirmDialog({
ok: onConfirm,
labelOk: "Remove",
message,
});
}
return (
<TabLayout>
<KubeObjectListLayout
isConfigurable
tableId="namespaces"
className="Namespaces"
store={namespaceStore}
sortingCallbacks={{
[columnId.name]: namespace => namespace.getName(),
[columnId.labels]: namespace => namespace.getLabels(),
[columnId.age]: namespace => -namespace.getCreationTimestamp(),
[columnId.status]: namespace => namespace.getStatus(),
}}
searchFilters={[
namespace => namespace.getSearchFields(),
namespace => namespace.getStatus(),
]}
renderHeaderTitle="Namespaces"
renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning", showWithColumn: columnId.name },
{ title: "Labels", className: "labels scrollable", sortBy: columnId.labels, id: columnId.labels },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
{ title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
]}
renderTableContents={namespace => [
<>
{namespace.getName()}
{namespace.isSubnamespace() && (
<SubnamespaceBadge className="subnamespaceBadge" id={`namespace-list-badge-for-${namespace.getId()}`} />
)}
</>,
<KubeObjectStatusIcon key="icon" object={namespace} />,
namespace.getLabels().map(label => (
<Badge
scrollable
key={label}
label={label}
/>
)),
<KubeObjectAge key="age" object={namespace} />,
{ title: namespace.getStatus(), className: namespace.getStatus().toLowerCase() },
]}
addRemoveButtons={{
addTooltip: "Add Namespace",
onAdd: openAddNamespaceDialog,
onRemove: openRemoveNamespaceDialog,
}}
renderItemMenu={namespace => (
<NamespaceMenu
namespace={namespace}
/> />
)), )}
<KubeObjectAge key="age" object={namespace} />, />
{ title: namespace.getStatus(), className: namespace.getStatus().toLowerCase() }, <AddNamespaceDialog/>
]} </TabLayout>
addRemoveButtons={{ );
addTooltip: "Add Namespace", }
onAdd: openAddNamespaceDialog,
onRemove: () => {
namespaceStore.selectedItems.forEach(namespace => namespaceStore.remove(namespace));
},
}}
renderItemMenu={namespace => (
<NamespaceMenu
namespace={namespace}
/>
)}
/>
<AddNamespaceDialog/>
</TabLayout>
);
export const NamespacesRoute = withInjectables<Dependencies>(NonInjectedNamespacesRoute, { export const NamespacesRoute = withInjectables<Dependencies>(NonInjectedNamespacesRoute, {
getProps: (di) => ({ getProps: (di) => ({
namespaceStore: di.inject(namespaceStoreInjectable), namespaceStore: di.inject(namespaceStoreInjectable),
openAddNamespaceDialog: di.inject(openAddNamepaceDialogInjectable), openAddNamespaceDialog: di.inject(openAddNamepaceDialogInjectable),
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}), }),
}); });