From dc27078bf9d05fc4e19408c35bf48a84d6a0c02a Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Wed, 30 Nov 2022 08:19:15 -0500 Subject: [PATCH] Add quick namespace filtering to ResourceQuotas view Signed-off-by: Sebastian Malton --- .../+config-resource-quotas/legacy-store.ts | 12 ------- .../resource-quotas.scss | 4 +++ .../resource-quotas.tsx | 32 ++++++++++++++++--- 3 files changed, 32 insertions(+), 16 deletions(-) delete mode 100644 src/renderer/components/+config-resource-quotas/legacy-store.ts diff --git a/src/renderer/components/+config-resource-quotas/legacy-store.ts b/src/renderer/components/+config-resource-quotas/legacy-store.ts deleted file mode 100644 index 2f13765856..0000000000 --- a/src/renderer/components/+config-resource-quotas/legacy-store.ts +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ - -import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api"; -import resourceQuotaStoreInjectable from "./store.injectable"; - -/** - * @deprecated use `di.inject(resourceQuotaStoreInjectable)` instead - */ -export const resourceQuotaStore = asLegacyGlobalForExtensionApi(resourceQuotaStoreInjectable); diff --git a/src/renderer/components/+config-resource-quotas/resource-quotas.scss b/src/renderer/components/+config-resource-quotas/resource-quotas.scss index 154d5d429a..5cfef82e92 100644 --- a/src/renderer/components/+config-resource-quotas/resource-quotas.scss +++ b/src/renderer/components/+config-resource-quotas/resource-quotas.scss @@ -8,5 +8,9 @@ &.warning { @include table-cell-warning; } + + a.filterNamespace { + border-bottom: unset; + } } } diff --git a/src/renderer/components/+config-resource-quotas/resource-quotas.tsx b/src/renderer/components/+config-resource-quotas/resource-quotas.tsx index 607274ee0f..06cba945ad 100644 --- a/src/renderer/components/+config-resource-quotas/resource-quotas.tsx +++ b/src/renderer/components/+config-resource-quotas/resource-quotas.tsx @@ -9,10 +9,15 @@ import React from "react"; import { observer } from "mobx-react"; import { KubeObjectListLayout } from "../kube-object-list-layout"; import { AddQuotaDialog } from "./add-quota-dialog"; -import { resourceQuotaStore } from "./legacy-store"; import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../kube-object/age"; +import { prevDefault } from "../../utils"; +import type { ResourceQuotaStore } from "./store"; +import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import resourceQuotaStoreInjectable from "./store.injectable"; enum columnId { name = "name", @@ -20,8 +25,13 @@ enum columnId { age = "age", } +interface Dependencies { + resourceQuotaStore: ResourceQuotaStore; + filterByNamespace: FilterByNamespace; +} + @observer -export class ResourceQuotas extends React.Component { +class NonInjectedResourceQuotas extends React.Component { render() { return ( @@ -29,7 +39,7 @@ export class ResourceQuotas extends React.Component { isConfigurable tableId="configuration_quotas" className="ResourceQuotas" - store={resourceQuotaStore} + store={this.props.resourceQuotaStore} sortingCallbacks={{ [columnId.name]: resourceQuota => resourceQuota.getName(), [columnId.namespace]: resourceQuota => resourceQuota.getNs(), @@ -49,7 +59,13 @@ export class ResourceQuotas extends React.Component { renderTableContents={resourceQuota => [ resourceQuota.getName(), , - resourceQuota.getNs(), + this.props.filterByNamespace(resourceQuota.getNs()))} + > + {resourceQuota.getNs()} + , , ]} addRemoveButtons={{ @@ -62,3 +78,11 @@ export class ResourceQuotas extends React.Component { ); } } + +export const ResourceQuotas = withInjectables(NonInjectedResourceQuotas, { + getProps: (di, props) => ({ + ...props, + filterByNamespace: di.inject(filterByNamespaceInjectable), + resourceQuotaStore: di.inject(resourceQuotaStoreInjectable), + }), +});