diff --git a/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap b/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap index 0aaff6db77ab..9e3eaf6f93de 100644 --- a/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap +++ b/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap @@ -1375,11 +1375,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
- my-second-namespace - +
+
+ Set global namespace filter to: + + my-second-namespace + +
- my-second-namespace - +
+
+ Set global namespace filter to: + + my-second-namespace + +
- my-second-namespace - +
+
+ Set global namespace filter to: + + my-second-namespace + +
- my-second-namespace - +
+
+ Set global namespace filter to: + + my-second-namespace + +
- my-second-namespace - +
+
+ Set global namespace filter to: + + my-second-namespace + +
- my-second-namespace - +
+
+ Set global namespace filter to: + + my-second-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
- some-namespace - +
+
+ Set global namespace filter to: + + some-namespace + +
- some-other-namespace - +
+
+ Set global namespace filter to: + + some-other-namespace + +
{ interface Dependencies { leaseStore: LeaseStore; - filterByNamespace: FilterByNamespace; } @observer @@ -67,13 +64,10 @@ class NonInjectedLease extends React.Component { renderTableContents={lease => [ lease.getName(), , - this.props.filterByNamespace(lease.getNs()))} - > - {lease.getNs()} - , + namespace={lease.getNs()} + />, lease.getHolderIdentity(), , ]} @@ -87,6 +81,5 @@ export const Leases = withInjectables(NonInjectedLease getProps: (di, props) => ({ ...props, leaseStore: di.inject(leaseStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/+config-maps/config-maps.scss b/src/renderer/components/+config-maps/config-maps.scss index 7f8fd61f5c00..cf81669f7936 100644 --- a/src/renderer/components/+config-maps/config-maps.scss +++ b/src/renderer/components/+config-maps/config-maps.scss @@ -21,8 +21,6 @@ flex: .5; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+config-maps/config-maps.tsx b/src/renderer/components/+config-maps/config-maps.tsx index 212e8020e032..b422c6e91659 100644 --- a/src/renderer/components/+config-maps/config-maps.tsx +++ b/src/renderer/components/+config-maps/config-maps.tsx @@ -11,12 +11,10 @@ import { KubeObjectListLayout } from "../kube-object-list-layout"; 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 { ConfigMapStore } from "./store"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import { withInjectables } from "@ogre-tools/injectable-react"; import configMapStoreInjectable from "./store.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -27,7 +25,6 @@ enum columnId { interface Dependencies { configMapStore: ConfigMapStore; - filterByNamespace: FilterByNamespace; } @observer @@ -61,13 +58,10 @@ class NonInjectedConfigMaps extends React.Component { renderTableContents={configMap => [ configMap.getName(), , - this.props.filterByNamespace(configMap.getNs()))} - > - {configMap.getNs()} - , + namespace={configMap.getNs()} + />, configMap.getKeys().join(", "), , ]} @@ -81,6 +75,5 @@ export const ConfigMaps = withInjectables(NonInjectedConfigMaps, { getProps: (di, props) => ({ ...props, configMapStore: di.inject(configMapStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.scss b/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.scss index 99f8fedec661..8dc2dfd72179 100644 --- a/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.scss +++ b/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.scss @@ -21,8 +21,6 @@ flex: .5; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx b/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx index f2cfa7609016..9a57b972a458 100644 --- a/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx +++ b/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx @@ -13,12 +13,10 @@ import type { KubeObjectDetailsProps } from "../kube-object-details"; import { KubeObjectListLayout } from "../kube-object-list-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../kube-object/age"; -import { prevDefault } from "../../utils"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import type { PodDisruptionBudgetStore } from "./store"; import { withInjectables } from "@ogre-tools/injectable-react"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import podDisruptionBudgetStoreInjectable from "./store.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -34,7 +32,6 @@ export interface PodDisruptionBudgetsProps extends KubeObjectDetailsProps [ pdb.getName(), , - this.props.filterByNamespace(pdb.getNs()))} - > - {pdb.getNs()} - , + namespace={pdb.getNs()} + />, pdb.getMinAvailable(), pdb.getMaxUnavailable(), pdb.getCurrentHealthy(), @@ -96,7 +90,6 @@ class NonInjectedPodDisruptionBudgets extends React.Component(NonInjectedPodDisruptionBudgets, { getProps: (di, props) => ({ ...props, - filterByNamespace: di.inject(filterByNamespaceInjectable), podDisruptionBudgetStore: di.inject(podDisruptionBudgetStoreInjectable), }), }); diff --git a/src/renderer/components/+config-resource-quotas/resource-quotas.scss b/src/renderer/components/+config-resource-quotas/resource-quotas.scss index 5cfef82e923a..b0bf869741bf 100644 --- a/src/renderer/components/+config-resource-quotas/resource-quotas.scss +++ b/src/renderer/components/+config-resource-quotas/resource-quotas.scss @@ -9,8 +9,6 @@ @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 28c3355b4318..d769de7d073f 100644 --- a/src/renderer/components/+config-resource-quotas/resource-quotas.tsx +++ b/src/renderer/components/+config-resource-quotas/resource-quotas.tsx @@ -12,13 +12,11 @@ import { AddQuotaDialog } from "./add-dialog/view"; 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"; import openAddQuotaDialogInjectable from "./add-dialog/open.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -28,7 +26,6 @@ enum columnId { interface Dependencies { resourceQuotaStore: ResourceQuotaStore; - filterByNamespace: FilterByNamespace; openAddQuotaDialog: () => void; } @@ -61,13 +58,10 @@ class NonInjectedResourceQuotas extends React.Component { renderTableContents={resourceQuota => [ resourceQuota.getName(), , - this.props.filterByNamespace(resourceQuota.getNs()))} - > - {resourceQuota.getNs()} - , + namespace={resourceQuota.getNs()} + />, , ]} addRemoveButtons={{ @@ -84,7 +78,6 @@ class NonInjectedResourceQuotas extends React.Component { export const ResourceQuotas = withInjectables(NonInjectedResourceQuotas, { getProps: (di, props) => ({ ...props, - filterByNamespace: di.inject(filterByNamespaceInjectable), resourceQuotaStore: di.inject(resourceQuotaStoreInjectable), openAddQuotaDialog: di.inject(openAddQuotaDialogInjectable), }), diff --git a/src/renderer/components/+config-secrets/secrets.scss b/src/renderer/components/+config-secrets/secrets.scss index 41dd4ca70972..4a533a5f34e3 100644 --- a/src/renderer/components/+config-secrets/secrets.scss +++ b/src/renderer/components/+config-secrets/secrets.scss @@ -17,8 +17,6 @@ @include table-cell-labels-offsets; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+config-secrets/secrets.tsx b/src/renderer/components/+config-secrets/secrets.tsx index c58d06ce18a7..248bfcca8530 100644 --- a/src/renderer/components/+config-secrets/secrets.tsx +++ b/src/renderer/components/+config-secrets/secrets.tsx @@ -13,13 +13,11 @@ import { Badge } from "../badge"; 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 { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import type { SecretStore } from "./store"; import { withInjectables } from "@ogre-tools/injectable-react"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import secretStoreInjectable from "./store.injectable"; import openAddSecretDialogInjectable from "./add-dialog/open.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -31,7 +29,6 @@ enum columnId { } interface Dependencies { - filterByNamespace: FilterByNamespace; secretStore: SecretStore; openAddSecretDialog: () => void; } @@ -71,13 +68,10 @@ class NonInjectedSecrets extends React.Component { renderTableContents={secret => [ secret.getName(), , - this.props.filterByNamespace(secret.getNs()))} - > - {secret.getNs()} - , + namespace={secret.getNs()} + />, secret.getLabels().map(label => ( { export const Secrets = withInjectables(NonInjectedSecrets, { getProps: (di, props) => ({ ...props, - filterByNamespace: di.inject(filterByNamespaceInjectable), secretStore: di.inject(secretStoreInjectable), openAddSecretDialog: di.inject(openAddSecretDialogInjectable), }), diff --git a/src/renderer/components/+helm-releases/releases.scss b/src/renderer/components/+helm-releases/releases.scss index 04955a60eb98..1cce1c535878 100644 --- a/src/renderer/components/+helm-releases/releases.scss +++ b/src/renderer/components/+helm-releases/releases.scss @@ -21,8 +21,6 @@ } } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+helm-releases/releases.tsx b/src/renderer/components/+helm-releases/releases.tsx index 5714c92fd118..1a0aded7b00b 100644 --- a/src/renderer/components/+helm-releases/releases.tsx +++ b/src/renderer/components/+helm-releases/releases.tsx @@ -23,9 +23,7 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import helmReleasesRouteParametersInjectable from "./helm-releases-route-parameters.injectable"; import type { NavigateToHelmReleases } from "../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable"; import navigateToHelmReleasesInjectable from "../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable"; -import { prevDefault } from "../../utils"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -43,19 +41,9 @@ interface Dependencies { releasesArePending: IComputedValue; namespace: IComputedValue; navigateToHelmReleases: NavigateToHelmReleases; - filterByNamespace: FilterByNamespace; } class NonInjectedHelmReleases extends Component { - // TODO: This side-effect in mount must go. - componentDidMount() { - const namespace = this.props.namespace.get(); - - if (namespace) { - this.props.filterByNamespace(namespace); - } - } - onDetails = (item: HelmRelease) => { this.showDetails(item); }; @@ -188,13 +176,10 @@ class NonInjectedHelmReleases extends Component { ]} renderTableContents={release => [ release.getName(), - this.props.filterByNamespace(release.getNs()))} - > - {release.getNs()} - , + namespace={release.getNs()} + />, release.getChart(), release.getRevision(), release.getVersion(), @@ -226,7 +211,6 @@ export const HelmReleases = withInjectables(NonInjectedHelmRelease releases: di.inject(removableReleasesInjectable), releasesArePending: di.inject(releasesInjectable).pending, navigateToHelmReleases: di.inject(navigateToHelmReleasesInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), ...di.inject(helmReleasesRouteParametersInjectable), }), }); diff --git a/src/renderer/components/+namespaces/namespace-select-badge.module.scss b/src/renderer/components/+namespaces/namespace-select-badge.module.scss new file mode 100644 index 000000000000..75bb18bf40a8 --- /dev/null +++ b/src/renderer/components/+namespaces/namespace-select-badge.module.scss @@ -0,0 +1,9 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +.NamespaceSelectBadge { + @include pseudo-link; + border-bottom: unset; +} \ No newline at end of file diff --git a/src/renderer/components/+namespaces/namespace-select-badge.tsx b/src/renderer/components/+namespaces/namespace-select-badge.tsx new file mode 100644 index 000000000000..9ae46b034230 --- /dev/null +++ b/src/renderer/components/+namespaces/namespace-select-badge.tsx @@ -0,0 +1,58 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import styles from "./namespace-select-badge.module.scss"; +import React from "react"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import type { BadgeProps } from "../badge"; +import { Badge } from "../badge"; +import type { + FilterByNamespace, +} from "./namespace-select-filter-model/filter-by-namespace.injectable"; +import filterByNamespaceInjectable + from "./namespace-select-filter-model/filter-by-namespace.injectable"; +import { prevDefault, cssNames } from "../../utils"; + +export interface NamespaceSelectBadgeProps extends BadgeProps { + namespace: string; +} + +export interface Dependencies { + filterByNamespace: FilterByNamespace; +} + +export function NamespaceSelectBadgeNonInjected( + { + namespace, + label, + filterByNamespace, + ...props + }: NamespaceSelectBadgeProps & Dependencies) { + return ( + + Set global namespace filter to: + {namespace} + + )} + className={cssNames(styles.NamespaceSelectBadge, props.className)} + onClick={prevDefault(() => filterByNamespace(namespace))} + /> + ); +} + +export const NamespaceSelectBadge = withInjectables(NamespaceSelectBadgeNonInjected, { + getProps(di, props) { + return { + ...props, + filterByNamespace: di.inject(filterByNamespaceInjectable), + }; + }, +}); diff --git a/src/renderer/components/+network-endpoints/endpoints.scss b/src/renderer/components/+network-endpoints/endpoints.scss index a79d36ff1784..3e4ea7a85c95 100644 --- a/src/renderer/components/+network-endpoints/endpoints.scss +++ b/src/renderer/components/+network-endpoints/endpoints.scss @@ -13,8 +13,6 @@ @include table-cell-warning; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+network-endpoints/endpoints.tsx b/src/renderer/components/+network-endpoints/endpoints.tsx index 4358906a6749..55d155186080 100644 --- a/src/renderer/components/+network-endpoints/endpoints.tsx +++ b/src/renderer/components/+network-endpoints/endpoints.tsx @@ -11,12 +11,10 @@ import { KubeObjectListLayout } from "../kube-object-list-layout"; 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 { EndpointsStore } from "./store"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import { withInjectables } from "@ogre-tools/injectable-react"; import endpointsStoreInjectable from "./store.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -27,7 +25,6 @@ enum columnId { interface Dependencies { endpointsStore: EndpointsStore; - filterByNamespace: FilterByNamespace; } @observer @@ -59,13 +56,10 @@ class NonInjectedEndpoints extends React.Component { renderTableContents={endpoint => [ endpoint.getName(), , - this.props.filterByNamespace(endpoint.getNs()))} - > - {endpoint.getNs()} - , + namespace={endpoint.getNs()} + />, endpoint.toString(), , ]} @@ -86,6 +80,5 @@ export const Endpoints = withInjectables(NonInjectedEndpoints, { getProps: (di, props) => ({ ...props, endpointsStore: di.inject(endpointsStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/+network-ingresses/ingresses.scss b/src/renderer/components/+network-ingresses/ingresses.scss index fdf0bda6b802..4c6d5a75c1fd 100644 --- a/src/renderer/components/+network-ingresses/ingresses.scss +++ b/src/renderer/components/+network-ingresses/ingresses.scss @@ -32,8 +32,6 @@ @include table-cell-warning; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+network-ingresses/ingresses.tsx b/src/renderer/components/+network-ingresses/ingresses.tsx index e8c87459261b..6817d967fbc9 100644 --- a/src/renderer/components/+network-ingresses/ingresses.tsx +++ b/src/renderer/components/+network-ingresses/ingresses.tsx @@ -12,12 +12,10 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../kube-object/age"; import { computeRouteDeclarations } from "../../../common/k8s-api/endpoints"; -import { prevDefault } from "../../utils"; import type { IngressStore } from "./ingress-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 ingressStoreInjectable from "./ingress-store.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -29,13 +27,11 @@ enum columnId { interface Dependencies { ingressStore: IngressStore; - filterByNamespace: FilterByNamespace; } const NonInjectedIngresses = observer((props: Dependencies) => { const { ingressStore, - filterByNamespace, } = props; return ( @@ -66,13 +62,7 @@ const NonInjectedIngresses = observer((props: Dependencies) => { renderTableContents={ ingress => [ ingress.getName(), , - filterByNamespace(ingress.getNs()))} - > - {ingress.getNs()} - , + , ingress.getLoadBalancers().map(lb =>

{ lb }

), computeRouteDeclarations(ingress).map(decl => ( decl.displayAsLink @@ -112,6 +102,5 @@ export const Ingresses = withInjectables(NonInjectedIngresses, { getProps: (di, props) => ({ ...props, ingressStore: di.inject(ingressStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/+network-policies/network-policies.scss b/src/renderer/components/+network-policies/network-policies.scss index d9170a4cb43f..38e6cd3d7575 100644 --- a/src/renderer/components/+network-policies/network-policies.scss +++ b/src/renderer/components/+network-policies/network-policies.scss @@ -9,8 +9,6 @@ @include table-cell-warning; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+network-policies/network-policies.tsx b/src/renderer/components/+network-policies/network-policies.tsx index a4aeac21f75e..47f8e5277631 100644 --- a/src/renderer/components/+network-policies/network-policies.tsx +++ b/src/renderer/components/+network-policies/network-policies.tsx @@ -12,11 +12,9 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../kube-object/age"; import type { NetworkPolicyStore } from "./store"; -import { prevDefault } from "../../utils"; -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 networkPolicyStoreInjectable from "./store.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -27,7 +25,6 @@ enum columnId { interface Dependencies { networkPolicyStore: NetworkPolicyStore; - filterByNamespace: FilterByNamespace; } @observer @@ -59,13 +56,10 @@ class NonInjectedNetworkPolicies extends React.Component { renderTableContents={networkPolicy => [ networkPolicy.getName(), , - this.props.filterByNamespace(networkPolicy.getNs()))} - > - {networkPolicy.getNs()} - , + namespace={networkPolicy.getNs()} + />, networkPolicy.getTypes().join(", "), , ]} @@ -78,7 +72,6 @@ class NonInjectedNetworkPolicies extends React.Component { export const NetworkPolicies = withInjectables(NonInjectedNetworkPolicies, { getProps: (di, props) => ({ ...props, - filterByNamespace: di.inject(filterByNamespaceInjectable), networkPolicyStore: di.inject(networkPolicyStoreInjectable), }), }); diff --git a/src/renderer/components/+network-port-forwards/port-forwards.scss b/src/renderer/components/+network-port-forwards/port-forwards.scss index ede9873736a8..0da7b0e002db 100644 --- a/src/renderer/components/+network-port-forwards/port-forwards.scss +++ b/src/renderer/components/+network-port-forwards/port-forwards.scss @@ -14,8 +14,6 @@ flex: 0.6; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+network-port-forwards/port-forwards.tsx b/src/renderer/components/+network-port-forwards/port-forwards.tsx index 8010bf95457a..97ab37cdd6ac 100644 --- a/src/renderer/components/+network-port-forwards/port-forwards.tsx +++ b/src/renderer/components/+network-port-forwards/port-forwards.tsx @@ -19,9 +19,7 @@ import { computed, makeObservable } from "mobx"; import portForwardsRouteParametersInjectable from "./port-forwards-route-parameters.injectable"; import type { NavigateToPortForwards } from "../../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable"; import navigateToPortForwardsInjectable from "../../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable"; -import { prevDefault } from "../../utils"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -37,7 +35,6 @@ interface Dependencies { portForwardStore: PortForwardStore; forwardport: IComputedValue; navigateToPortForwards: NavigateToPortForwards; - filterByNamespace: FilterByNamespace; } @observer @@ -132,13 +129,10 @@ class NonInjectedPortForwards extends React.Component { ]} renderTableContents={item => [ item.getName(), - this.props.filterByNamespace(item.getNs()))} - > - {item.getNs()} - , + namespace={item.getNs()} + />, item.getKind(), item.getPort(), item.getForwardPort(), @@ -173,7 +167,6 @@ export const PortForwards = withInjectables(NonInjectedPortForward portForwardStore: di.inject(portForwardStoreInjectable), ...di.inject(portForwardsRouteParametersInjectable), navigateToPortForwards: di.inject(navigateToPortForwardsInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/+network-services/services.scss b/src/renderer/components/+network-services/services.scss index 5136582cf065..dcc8ed9d1de5 100644 --- a/src/renderer/components/+network-services/services.scss +++ b/src/renderer/components/+network-services/services.scss @@ -26,8 +26,6 @@ flex: 0.6; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+network-services/services.tsx b/src/renderer/components/+network-services/services.tsx index 17295b0af861..7d9a7ba7f4c9 100644 --- a/src/renderer/components/+network-services/services.tsx +++ b/src/renderer/components/+network-services/services.tsx @@ -12,13 +12,11 @@ import { Badge } from "../badge"; 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 { ServiceStore } from "./store"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import type { Service } from "../../../common/k8s-api/endpoints"; import { withInjectables } from "@ogre-tools/injectable-react"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import serviceStoreInjectable from "./store.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -48,7 +46,6 @@ const formatExternalIps = (service: Service) => { interface Dependencies { serviceStore: ServiceStore; - filterByNamespace: FilterByNamespace; } @observer @@ -92,13 +89,10 @@ class NonInjectedServices extends React.Component { renderTableContents={service => [ service.getName(), , - this.props.filterByNamespace(service.getNs())) } - > - { service.getNs() } - , + namespace={service.getNs()} + />, service.getType(), service.getClusterIp(), service.getPorts().join(", "), @@ -116,7 +110,6 @@ class NonInjectedServices extends React.Component { export const Services = withInjectables(NonInjectedServices, { getProps: (di, props) => ({ ...props, - filterByNamespace: di.inject(filterByNamespaceInjectable), serviceStore: di.inject(serviceStoreInjectable), }), }); diff --git a/src/renderer/components/+storage-volume-claims/volume-claims.scss b/src/renderer/components/+storage-volume-claims/volume-claims.scss index ac476c595c8b..f34b575bb30a 100644 --- a/src/renderer/components/+storage-volume-claims/volume-claims.scss +++ b/src/renderer/components/+storage-volume-claims/volume-claims.scss @@ -39,8 +39,6 @@ flex: 0.4; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+user-management/+role-bindings/view.scss b/src/renderer/components/+user-management/+role-bindings/view.scss index d57c5679c3a8..3c72d3f11507 100644 --- a/src/renderer/components/+user-management/+role-bindings/view.scss +++ b/src/renderer/components/+user-management/+role-bindings/view.scss @@ -13,8 +13,6 @@ @include table-cell-warning; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+user-management/+role-bindings/view.tsx b/src/renderer/components/+user-management/+role-bindings/view.tsx index 3f5e45845373..2489d9cfa381 100644 --- a/src/renderer/components/+user-management/+role-bindings/view.tsx +++ b/src/renderer/components/+user-management/+role-bindings/view.tsx @@ -14,17 +14,15 @@ import { KubeObjectAge } from "../../kube-object/age"; import type { RoleStore } from "../+roles/store"; import type { ServiceAccountStore } from "../+service-accounts/store"; import type { RoleBindingStore } from "./store"; -import { prevDefault } from "../../../utils"; import type { ClusterRoleStore } from "../+cluster-roles/store"; -import type { FilterByNamespace } from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import { withInjectables } from "@ogre-tools/injectable-react"; import clusterRoleStoreInjectable from "../+cluster-roles/store.injectable"; -import filterByNamespaceInjectable from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import roleBindingStoreInjectable from "./store.injectable"; import roleStoreInjectable from "../+roles/store.injectable"; import serviceAccountStoreInjectable from "../+service-accounts/store.injectable"; import type { OpenRoleBindingDialog } from "./dialog/open.injectable"; import openRoleBindingDialogInjectable from "./dialog/open.injectable"; +import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -38,7 +36,6 @@ interface Dependencies { roleStore: RoleStore; clusterRoleStore: ClusterRoleStore; serviceAccountStore: ServiceAccountStore; - filterByNamespace: FilterByNamespace; openRoleBindingDialog: OpenRoleBindingDialog; } @@ -50,7 +47,6 @@ class NonInjectedRoleBindings extends React.Component { roleBindingStore, roleStore, serviceAccountStore, - filterByNamespace, openRoleBindingDialog, } = this.props; @@ -83,13 +79,10 @@ class NonInjectedRoleBindings extends React.Component { renderTableContents={binding => [ binding.getName(), , - filterByNamespace(binding.getNs()))} - > - {binding.getNs()} - , + namespace={binding.getNs()} + />, binding.getSubjectNames(), , ]} @@ -108,7 +101,6 @@ export const RoleBindings = withInjectables(NonInjectedRoleBinding getProps: (di, props) => ({ ...props, clusterRoleStore: di.inject(clusterRoleStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), roleBindingStore: di.inject(roleBindingStoreInjectable), roleStore: di.inject(roleStoreInjectable), serviceAccountStore: di.inject(serviceAccountStoreInjectable), diff --git a/src/renderer/components/+user-management/+roles/view.scss b/src/renderer/components/+user-management/+roles/view.scss index 7ed72f8cc2a3..6fae603fd331 100644 --- a/src/renderer/components/+user-management/+roles/view.scss +++ b/src/renderer/components/+user-management/+roles/view.scss @@ -13,8 +13,6 @@ @include table-cell-warning; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+user-management/+roles/view.tsx b/src/renderer/components/+user-management/+roles/view.tsx index bf308b38af5c..a299ac10857f 100644 --- a/src/renderer/components/+user-management/+roles/view.tsx +++ b/src/renderer/components/+user-management/+roles/view.tsx @@ -13,12 +13,10 @@ import { AddRoleDialog } from "./add-dialog/view"; import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../../kube-object/age"; import type { RoleStore } from "./store"; -import { prevDefault } from "../../../utils"; -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 roleStoreInjectable from "./store.injectable"; import openAddRoleDialogInjectable from "./add-dialog/open.injectable"; +import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -28,7 +26,6 @@ enum columnId { interface Dependencies { roleStore: RoleStore; - filterByNamespace: FilterByNamespace; openAddRoleDialog: () => void; } @@ -36,7 +33,6 @@ interface Dependencies { class NonInjectedRoles extends React.Component { render() { const { - filterByNamespace, roleStore, openAddRoleDialog, } = this.props; @@ -66,13 +62,10 @@ class NonInjectedRoles extends React.Component { renderTableContents={role => [ role.getName(), , - filterByNamespace(role.getNs()))} - > - {role.getNs()} - , + namespace={role.getNs()} + />, , ]} addRemoveButtons={{ @@ -89,7 +82,6 @@ class NonInjectedRoles extends React.Component { export const Roles = withInjectables(NonInjectedRoles, { getProps: (di, props) => ({ ...props, - filterByNamespace: di.inject(filterByNamespaceInjectable), roleStore: di.inject(roleStoreInjectable), openAddRoleDialog: di.inject(openAddRoleDialogInjectable), }), diff --git a/src/renderer/components/+user-management/+service-accounts/view.scss b/src/renderer/components/+user-management/+service-accounts/view.scss index e1fa133b5edf..4cc730d949c9 100644 --- a/src/renderer/components/+user-management/+service-accounts/view.scss +++ b/src/renderer/components/+user-management/+service-accounts/view.scss @@ -9,8 +9,6 @@ @include table-cell-warning; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+user-management/+service-accounts/view.tsx b/src/renderer/components/+user-management/+service-accounts/view.tsx index 1043250d732c..ce7eb4988e51 100644 --- a/src/renderer/components/+user-management/+service-accounts/view.tsx +++ b/src/renderer/components/+user-management/+service-accounts/view.tsx @@ -12,14 +12,12 @@ import { KubeObjectStatusIcon } from "../../kube-object-status-icon"; import { CreateServiceAccountDialog } from "./create-dialog/view"; import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../../kube-object/age"; -import { prevDefault } from "../../../utils"; import type { ServiceAccountStore } 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 serviceAccountStoreInjectable from "./store.injectable"; import type { OpenCreateServiceAccountDialog } from "./create-dialog/open.injectable"; import openCreateServiceAccountDialogInjectable from "./create-dialog/open.injectable"; +import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -29,7 +27,6 @@ enum columnId { interface Dependencies { serviceAccountStore: ServiceAccountStore; - filterByNamespace: FilterByNamespace; openCreateServiceAccountDialog: OpenCreateServiceAccountDialog; } @@ -37,7 +34,6 @@ interface Dependencies { class NonInjectedServiceAccounts extends React.Component { render() { const { - filterByNamespace, serviceAccountStore, openCreateServiceAccountDialog, } = this.props; @@ -67,13 +63,10 @@ class NonInjectedServiceAccounts extends React.Component { renderTableContents={account => [ account.getName(), , - filterByNamespace(account.getNs()))} - > - {account.getNs()} - , + namespace={account.getNs()} + />, , ]} addRemoveButtons={{ @@ -90,7 +83,6 @@ class NonInjectedServiceAccounts extends React.Component { export const ServiceAccounts = withInjectables(NonInjectedServiceAccounts, { getProps: (di, props) => ({ ...props, - filterByNamespace: di.inject(filterByNamespaceInjectable), serviceAccountStore: di.inject(serviceAccountStoreInjectable), openCreateServiceAccountDialog: di.inject(openCreateServiceAccountDialogInjectable), }), diff --git a/src/renderer/components/+workloads-cronjobs/cronjobs.scss b/src/renderer/components/+workloads-cronjobs/cronjobs.scss index 29b9fb18c108..9fc51383b7fa 100644 --- a/src/renderer/components/+workloads-cronjobs/cronjobs.scss +++ b/src/renderer/components/+workloads-cronjobs/cronjobs.scss @@ -9,8 +9,6 @@ @include table-cell-warning; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+workloads-cronjobs/cronjobs.tsx b/src/renderer/components/+workloads-cronjobs/cronjobs.tsx index 1dba28c4781b..365c46991768 100644 --- a/src/renderer/components/+workloads-cronjobs/cronjobs.tsx +++ b/src/renderer/components/+workloads-cronjobs/cronjobs.tsx @@ -17,9 +17,7 @@ import type { EventStore } from "../+events/store"; import { withInjectables } from "@ogre-tools/injectable-react"; import cronJobStoreInjectable from "./store.injectable"; import eventStoreInjectable from "../+events/store.injectable"; -import { prevDefault } from "../../utils"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -34,14 +32,12 @@ enum columnId { interface Dependencies { cronJobStore: CronJobStore; eventStore: EventStore; - filterByNamespace: FilterByNamespace; } const NonInjectedCronJobs = observer((props: Dependencies) => { const { cronJobStore, eventStore, - filterByNamespace, } = props; return ( @@ -82,13 +78,10 @@ const NonInjectedCronJobs = observer((props: Dependencies) => { renderTableContents={cronJob => [ cronJob.getName(), , - filterByNamespace(cronJob.getNs()))} - > - {cronJob.getNs()} - , + namespace={cronJob.getNs()} + />, cronJob.isNeverRun() ? "never" : cronJob.getSchedule(), cronJob.getSuspendFlag(), cronJobStore.getActiveJobsNum(cronJob), @@ -105,6 +98,5 @@ export const CronJobs = withInjectables(NonInjectedCronJobs, { ...props, cronJobStore: di.inject(cronJobStoreInjectable), eventStore: di.inject(eventStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/+workloads-daemonsets/daemonsets.scss b/src/renderer/components/+workloads-daemonsets/daemonsets.scss index 1500c74d7881..a5ea8e74be51 100644 --- a/src/renderer/components/+workloads-daemonsets/daemonsets.scss +++ b/src/renderer/components/+workloads-daemonsets/daemonsets.scss @@ -22,8 +22,6 @@ @include table-cell-labels-offsets; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+workloads-daemonsets/daemonsets.tsx b/src/renderer/components/+workloads-daemonsets/daemonsets.tsx index 5fc4ac6bc8d6..9760cd2457f5 100644 --- a/src/renderer/components/+workloads-daemonsets/daemonsets.tsx +++ b/src/renderer/components/+workloads-daemonsets/daemonsets.tsx @@ -15,12 +15,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../kube-object/age"; import type { DaemonSetStore } from "./store"; import type { EventStore } from "../+events/store"; -import { prevDefault } from "../../utils"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import { withInjectables } from "@ogre-tools/injectable-react"; import daemonSetStoreInjectable from "./store.injectable"; import eventStoreInjectable from "../+events/store.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -33,14 +31,12 @@ enum columnId { interface Dependencies { daemonSetStore: DaemonSetStore; eventStore: EventStore; - filterByNamespace: FilterByNamespace; } const NonInjectedDaemonSets = observer((props: Dependencies) => { const { daemonSetStore, eventStore, - filterByNamespace, } = props; const getPodsLength = (daemonSet: DaemonSet) => daemonSetStore.getChildPods(daemonSet).length; @@ -66,7 +62,12 @@ const NonInjectedDaemonSets = observer((props: Dependencies) => { renderHeaderTitle="Daemon Sets" renderTableHeader={[ { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, - { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, + { + title: "Namespace", + className: "namespace", + sortBy: columnId.namespace, + id: columnId.namespace, + }, { title: "Pods", className: "pods", sortBy: columnId.pods, id: columnId.pods }, { className: "warning", showWithColumn: columnId.pods }, { title: "Node Selector", className: "labels scrollable", id: columnId.labels }, @@ -74,13 +75,10 @@ const NonInjectedDaemonSets = observer((props: Dependencies) => { ]} renderTableContents={daemonSet => [ daemonSet.getName(), - filterByNamespace(daemonSet.getNs()))} - > - {daemonSet.getNs()} - , + namespace={daemonSet.getNs()} + />, getPodsLength(daemonSet), , daemonSet.getNodeSelectors().map(selector => ( @@ -102,6 +100,5 @@ export const DaemonSets = withInjectables(NonInjectedDaemonSets, { ...props, daemonSetStore: di.inject(daemonSetStoreInjectable), eventStore: di.inject(eventStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/+workloads-deployments/deployments.scss b/src/renderer/components/+workloads-deployments/deployments.scss index 322faa6d8d16..5d9ed72c03fc 100644 --- a/src/renderer/components/+workloads-deployments/deployments.scss +++ b/src/renderer/components/+workloads-deployments/deployments.scss @@ -43,8 +43,6 @@ } } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+workloads-deployments/deployments.tsx b/src/renderer/components/+workloads-deployments/deployments.tsx index d069cd73c190..6fa9fff2111a 100644 --- a/src/renderer/components/+workloads-deployments/deployments.tsx +++ b/src/renderer/components/+workloads-deployments/deployments.tsx @@ -9,7 +9,7 @@ import React from "react"; import { observer } from "mobx-react"; import type { Deployment } from "../../../common/k8s-api/endpoints"; import { KubeObjectListLayout } from "../kube-object-list-layout"; -import { cssNames, prevDefault } from "../../utils"; +import { cssNames } from "../../utils"; import kebabCase from "lodash/kebabCase"; import orderBy from "lodash/orderBy"; import { KubeObjectStatusIcon } from "../kube-object-status-icon"; @@ -17,11 +17,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../kube-object/age"; import type { DeploymentStore } from "./store"; import type { EventStore } from "../+events/store"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import { withInjectables } from "@ogre-tools/injectable-react"; import deploymentStoreInjectable from "./store.injectable"; import eventStoreInjectable from "../+events/store.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -35,7 +34,6 @@ enum columnId { interface Dependencies { deploymentStore: DeploymentStore; eventStore: EventStore; - filterByNamespace: FilterByNamespace; } @observer @@ -64,7 +62,6 @@ class NonInjectedDeployments extends React.Component { const { deploymentStore, eventStore, - filterByNamespace, } = this.props; return ( @@ -90,22 +87,34 @@ class NonInjectedDeployments extends React.Component { renderTableHeader={[ { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { className: "warning", showWithColumn: columnId.name }, - { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, + { + title: "Namespace", + className: "namespace", + sortBy: columnId.namespace, + id: columnId.namespace, + }, { title: "Pods", className: "pods", id: columnId.pods }, - { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas }, + { + title: "Replicas", + className: "replicas", + sortBy: columnId.replicas, + id: columnId.replicas, + }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, - { title: "Conditions", className: "conditions", sortBy: columnId.condition, id: columnId.condition }, + { + title: "Conditions", + className: "conditions", + sortBy: columnId.condition, + id: columnId.condition, + }, ]} renderTableContents={deployment => [ deployment.getName(), , - filterByNamespace(deployment.getNs()))} - > - {deployment.getNs()} - , + namespace={deployment.getNs()} + />, this.renderPods(deployment), deployment.getReplicas(), , @@ -122,6 +131,5 @@ export const Deployments = withInjectables(NonInjectedDeployments, ...props, deploymentStore: di.inject(deploymentStoreInjectable), eventStore: di.inject(eventStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/+workloads-jobs/jobs.scss b/src/renderer/components/+workloads-jobs/jobs.scss index a24cfc7b0639..f293ba5b38ea 100644 --- a/src/renderer/components/+workloads-jobs/jobs.scss +++ b/src/renderer/components/+workloads-jobs/jobs.scss @@ -19,8 +19,6 @@ @include job-condition-colors; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+workloads-jobs/jobs.tsx b/src/renderer/components/+workloads-jobs/jobs.tsx index c0bc9e2d6649..5893a2770857 100644 --- a/src/renderer/components/+workloads-jobs/jobs.tsx +++ b/src/renderer/components/+workloads-jobs/jobs.tsx @@ -14,12 +14,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../kube-object/age"; import type { JobStore } from "./store"; import type { EventStore } from "../+events/store"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; -import { prevDefault } from "../../utils"; import { withInjectables } from "@ogre-tools/injectable-react"; import eventStoreInjectable from "../+events/store.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import jobStoreInjectable from "./store.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -32,13 +30,11 @@ enum columnId { interface Dependencies { jobStore: JobStore; eventStore: EventStore; - filterByNamespace: FilterByNamespace; } const NonInjectedJobs = observer((props: Dependencies) => { const { eventStore, - filterByNamespace, jobStore, } = props; @@ -73,13 +69,10 @@ const NonInjectedJobs = observer((props: Dependencies) => { return [ job.getName(), - filterByNamespace(job.getNs()))} - > - {job.getNs()} - , + namespace={job.getNs()} + />, `${job.getCompletions()} / ${job.getDesiredCompletions()}`, , , @@ -98,7 +91,6 @@ export const Jobs = withInjectables(NonInjectedJobs, { getProps: (di, props) => ({ ...props, eventStore: di.inject(eventStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), jobStore: di.inject(jobStoreInjectable), }), }); diff --git a/src/renderer/components/+workloads-pods/pods.scss b/src/renderer/components/+workloads-pods/pods.scss index ee606bc7629b..3555c54701ff 100644 --- a/src/renderer/components/+workloads-pods/pods.scss +++ b/src/renderer/components/+workloads-pods/pods.scss @@ -38,8 +38,6 @@ flex-grow: 0.7; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+workloads-pods/pods.tsx b/src/renderer/components/+workloads-pods/pods.tsx index 2e5556215493..ab793359b09e 100644 --- a/src/renderer/components/+workloads-pods/pods.tsx +++ b/src/renderer/components/+workloads-pods/pods.tsx @@ -11,7 +11,7 @@ import { Link } from "react-router-dom"; import { KubeObjectListLayout } from "../kube-object-list-layout"; import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints"; import { StatusBrick } from "../status-brick"; -import { cssNames, getConvertedParts, object, prevDefault, stopPropagation } from "../../utils"; +import { cssNames, getConvertedParts, object, stopPropagation } from "../../utils"; import startCase from "lodash/startCase"; import kebabCase from "lodash/kebabCase"; import type { ApiManager } from "../../../common/k8s-api/api-manager"; @@ -28,8 +28,7 @@ import type { PodStore } from "./store"; import nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.injectable"; import eventStoreInjectable from "../+events/store.injectable"; import podStoreInjectable from "./store.injectable"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -45,7 +44,6 @@ enum columnId { interface Dependencies { getDetailsUrl: GetDetailsUrl; - filterByNamespace: FilterByNamespace; apiManager: ApiManager; eventStore: EventStore; podStore: PodStore; @@ -111,7 +109,7 @@ class NonInjectedPods extends React.Component { className="Pods" store={podStore} dependentStores={[eventStore]} // status icon component uses event store - tableId = "workloads_pods" + tableId="workloads_pods" isConfigurable sortingCallbacks={{ [columnId.name]: pod => getConvertedParts(pod.getName()), @@ -134,10 +132,30 @@ class NonInjectedPods extends React.Component { renderTableHeader={[ { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { className: "warning", showWithColumn: columnId.name }, - { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, - { title: "Containers", className: "containers", sortBy: columnId.containers, id: columnId.containers }, - { title: "Restarts", className: "restarts", sortBy: columnId.restarts, id: columnId.restarts }, - { title: "Controlled By", className: "owners", sortBy: columnId.owners, id: columnId.owners }, + { + title: "Namespace", + className: "namespace", + sortBy: columnId.namespace, + id: columnId.namespace, + }, + { + title: "Containers", + className: "containers", + sortBy: columnId.containers, + id: columnId.containers, + }, + { + title: "Restarts", + className: "restarts", + sortBy: columnId.restarts, + id: columnId.restarts, + }, + { + title: "Controlled By", + className: "owners", + sortBy: columnId.owners, + id: columnId.owners, + }, { title: "Node", className: "node", sortBy: columnId.node, id: columnId.node }, { title: "QoS", className: "qos", sortBy: columnId.qos, id: columnId.qos }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, @@ -152,13 +170,10 @@ class NonInjectedPods extends React.Component { expandable={false} />, , - this.props.filterByNamespace(pod.getNs()))} - > - {pod.getNs()} - , + namespace={pod.getNs()} + />, this.renderContainersStatus(pod), pod.getRestartsCount(), pod.getOwnerRefs().map(ref => { @@ -186,7 +201,9 @@ class NonInjectedPods extends React.Component { tooltip={pod.getNodeName()} expandable={false} > - + {pod.getNodeName()} @@ -210,6 +227,5 @@ export const Pods = withInjectables(NonInjectedPods, { nodeApi: di.inject(nodeApiInjectable), eventStore: di.inject(eventStoreInjectable), podStore: di.inject(podStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/+workloads-replicasets/replicasets.scss b/src/renderer/components/+workloads-replicasets/replicasets.scss index 07e70c53c108..15274677e2a6 100644 --- a/src/renderer/components/+workloads-replicasets/replicasets.scss +++ b/src/renderer/components/+workloads-replicasets/replicasets.scss @@ -13,8 +13,6 @@ @include table-cell-warning; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+workloads-replicasets/replicasets.tsx b/src/renderer/components/+workloads-replicasets/replicasets.tsx index 685315551c4b..92eb0c45ac8f 100644 --- a/src/renderer/components/+workloads-replicasets/replicasets.tsx +++ b/src/renderer/components/+workloads-replicasets/replicasets.tsx @@ -13,12 +13,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../kube-object/age"; import type { ReplicaSetStore } from "./store"; import type { EventStore } from "../+events/store"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; -import { prevDefault } from "../../utils"; import { withInjectables } from "@ogre-tools/injectable-react"; import eventStoreInjectable from "../+events/store.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import replicaSetStoreInjectable from "./store.injectable"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -32,13 +30,11 @@ enum columnId { interface Dependencies { replicaSetStore: ReplicaSetStore; eventStore: EventStore; - filterByNamespace: FilterByNamespace; } const NonInjectedReplicaSets = observer((props: Dependencies) => { const { eventStore, - filterByNamespace, replicaSetStore, } = props; @@ -65,22 +61,34 @@ const NonInjectedReplicaSets = observer((props: Dependencies) => { renderTableHeader={[ { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { className: "warning", showWithColumn: columnId.name }, - { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, - { title: "Desired", className: "desired", sortBy: columnId.desired, id: columnId.desired }, - { title: "Current", className: "current", sortBy: columnId.current, id: columnId.current }, + { + title: "Namespace", + className: "namespace", + sortBy: columnId.namespace, + id: columnId.namespace, + }, + { + title: "Desired", + className: "desired", + sortBy: columnId.desired, + id: columnId.desired, + }, + { + title: "Current", + className: "current", + sortBy: columnId.current, + id: columnId.current, + }, { title: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, ]} renderTableContents={replicaSet => [ replicaSet.getName(), , - filterByNamespace(replicaSet.getNs()))} - > - {replicaSet.getNs()} - , + namespace={replicaSet.getNs()} + />, replicaSet.getDesired(), replicaSet.getCurrent(), replicaSet.getReady(), @@ -95,7 +103,6 @@ export const ReplicaSets = withInjectables(NonInjectedReplicaSets, getProps: (di, props) => ({ ...props, eventStore: di.inject(eventStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), replicaSetStore: di.inject(replicaSetStoreInjectable), }), }); diff --git a/src/renderer/components/+workloads-statefulsets/statefulsets.scss b/src/renderer/components/+workloads-statefulsets/statefulsets.scss index 23b4da92422d..ce9277c6bb63 100644 --- a/src/renderer/components/+workloads-statefulsets/statefulsets.scss +++ b/src/renderer/components/+workloads-statefulsets/statefulsets.scss @@ -17,8 +17,6 @@ @include table-cell-warning; } - a.filterNamespace { - border-bottom: unset; - } + } } diff --git a/src/renderer/components/+workloads-statefulsets/statefulsets.tsx b/src/renderer/components/+workloads-statefulsets/statefulsets.tsx index 30a3970c6951..0e35cd658475 100644 --- a/src/renderer/components/+workloads-statefulsets/statefulsets.tsx +++ b/src/renderer/components/+workloads-statefulsets/statefulsets.tsx @@ -14,12 +14,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../kube-object/age"; import type { StatefulSetStore } from "./store"; import type { EventStore } from "../+events/store"; -import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import { withInjectables } from "@ogre-tools/injectable-react"; import eventStoreInjectable from "../+events/store.injectable"; -import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import statefulSetStoreInjectable from "./store.injectable"; -import { prevDefault } from "../../utils"; +import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge"; enum columnId { name = "name", @@ -32,7 +30,6 @@ enum columnId { interface Dependencies { statefulSetStore: StatefulSetStore; eventStore: EventStore; - filterByNamespace: FilterByNamespace; } const renderPodCounts = (statefulSet: StatefulSet) => { @@ -44,7 +41,6 @@ const renderPodCounts = (statefulSet: StatefulSet) => { const NonInjectedStatefulSets = observer((props: Dependencies) => { const { eventStore, - filterByNamespace, statefulSetStore, } = props; @@ -68,21 +64,28 @@ const NonInjectedStatefulSets = observer((props: Dependencies) => { renderHeaderTitle="Stateful Sets" renderTableHeader={[ { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, - { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, + { + title: "Namespace", + className: "namespace", + sortBy: columnId.namespace, + id: columnId.namespace, + }, { title: "Pods", className: "pods", id: columnId.pods }, - { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas }, + { + title: "Replicas", + className: "replicas", + sortBy: columnId.replicas, + id: columnId.replicas, + }, { className: "warning", showWithColumn: columnId.replicas }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, ]} renderTableContents={statefulSet => [ statefulSet.getName(), - filterByNamespace(statefulSet.getNs()))} - > - {statefulSet.getNs()} - , + namespace={statefulSet.getNs()} + />, renderPodCounts(statefulSet), statefulSet.getReplicas(), , @@ -97,7 +100,6 @@ export const StatefulSets = withInjectables(NonInjectedStatefulSet getProps: (di, props) => ({ ...props, eventStore: di.inject(eventStoreInjectable), - filterByNamespace: di.inject(filterByNamespaceInjectable), statefulSetStore: di.inject(statefulSetStoreInjectable), }), });