1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Use custom remove namespaces dialog

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

View File

@ -18,6 +18,8 @@ import { KubeObjectAge } from "../kube-object/age";
import openAddNamepaceDialogInjectable from "./add-dialog/open.injectable";
import { SubnamespaceBadge } from "./subnamespace-badge";
import { NamespaceMenu } from "./namespace-menu";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
enum columnId {
name = "name",
@ -29,72 +31,101 @@ enum columnId {
interface Dependencies {
namespaceStore: NamespaceStore;
openAddNamespaceDialog: () => void;
openConfirmDialog: OpenConfirmDialog;
}
const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog }: Dependencies) => (
<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 => [
const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog, openConfirmDialog }: Dependencies) => {
function onConfirm() {
namespaceStore.removeSelectedItems();
}
function openRemoveNamespaceDialog() {
const namespaces = namespaceStore.selectedItems;
const message = (
<div>
<>
{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}
Remove following namespaces?
{" "}
<div style={{ overflow: "auto", maxHeight: "200px" }}>
{namespaces.map(namespace => (
<li key={namespace.getId()}>{namespace.getName()}</li>
))}
</div>
</>
</div>
);
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() },
]}
addRemoveButtons={{
addTooltip: "Add Namespace",
onAdd: openAddNamespaceDialog,
onRemove: () => {
namespaceStore.selectedItems.forEach(namespace => namespaceStore.remove(namespace));
},
}}
renderItemMenu={namespace => (
<NamespaceMenu
namespace={namespace}
/>
)}
/>
<AddNamespaceDialog/>
</TabLayout>
);
)}
/>
<AddNamespaceDialog/>
</TabLayout>
);
}
export const NamespacesRoute = withInjectables<Dependencies>(NonInjectedNamespacesRoute, {
getProps: (di) => ({
namespaceStore: di.inject(namespaceStoreInjectable),
openAddNamespaceDialog: di.inject(openAddNamepaceDialogInjectable),
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});