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

Better visibility of updating global namespace from resource listing views (#6962)

Browse Source 
* - <NamespaceSelectBadge/> new component refactored out from multiple resource views with excessive dependencies (e.g updating global namespace filter)
- better UX to and visibility for user on click action (sometimes namespace-filter might not be visible in app/UI)
- updated some snapshots with `jest --updateSnapshot src` (somehow affected `helm-charts/releases/*`)
This commit is contained in:
Roman 2023-01-18 17:47:14 +02:00 committed by GitHub
parent 5fc8ec610d
commit 5b3f11f80a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
47 changed files with 525 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
View File

@ -1375,11 +1375,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
my-second-namespace my-second-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
my-second-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -2172,11 +2178,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
my-second-namespace my-second-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
my-second-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -2985,11 +2997,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
my-second-namespace my-second-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
my-second-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -3834,11 +3852,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
my-second-namespace my-second-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
my-second-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -4823,11 +4847,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
my-second-namespace my-second-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
my-second-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -5814,11 +5844,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
my-second-namespace my-second-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
my-second-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"

288
src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
View File

@ -2242,11 +2242,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -2328,11 +2334,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -3206,11 +3218,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -3292,11 +3310,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -4231,11 +4255,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -4317,11 +4347,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -5256,11 +5292,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -5342,11 +5384,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -6526,11 +6574,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -6612,11 +6666,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -7796,11 +7856,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -7882,11 +7948,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -11242,11 +11314,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -11328,11 +11406,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -12512,11 +12596,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -12598,11 +12688,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -13537,11 +13633,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -13623,11 +13725,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -14565,11 +14673,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -14651,11 +14765,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -15529,11 +15649,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -15615,11 +15741,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -16554,11 +16686,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-namespace some-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"
@ -16640,11 +16778,17 @@ exports[`showing details for helm release given application is started when navi
<div <div
class="TableCell namespace" class="TableCell namespace"
> >
<a <div
class="filterNamespace" class="badge NamespaceSelectBadge flat clickable"
> >
some-other-namespace some-other-namespace
</a> </div>
<div>
Set global namespace filter to:
<b>
some-other-namespace
</b>
</div>
</div> </div>
<div <div
class="TableCell chart" class="TableCell chart"

4
src/renderer/components/+config-leases/leases.scss
View File

@ -21,8 +21,6 @@
flex: .5; flex: .5;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+config-leases/leases.tsx
View File

@ -16,9 +16,7 @@ import { KubeObjectAge } from "../kube-object/age";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import leaseStoreInjectable from "./store.injectable"; import leaseStoreInjectable from "./store.injectable";
import type { LeaseStore } from "./store"; import type { LeaseStore } from "./store";
import { prevDefault } from "../../utils"; import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
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";
enum columnId { enum columnId {
name = "name", name = "name",
@ -32,7 +30,6 @@ export interface LeaseProps extends KubeObjectDetailsProps<Lease> {
interface Dependencies { interface Dependencies {
leaseStore: LeaseStore; leaseStore: LeaseStore;
filterByNamespace: FilterByNamespace;
} }
@observer @observer
@ -67,13 +64,10 @@ class NonInjectedLease extends React.Component<LeaseProps & Dependencies> {
renderTableContents={lease => [ renderTableContents={lease => [
lease.getName(), lease.getName(),
<KubeObjectStatusIcon key="icon" object={lease} />, <KubeObjectStatusIcon key="icon" object={lease} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={lease.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(lease.getNs()))} />,
>
{lease.getNs()}
</a>,
lease.getHolderIdentity(), lease.getHolderIdentity(),
<KubeObjectAge key="age" object={lease} />, <KubeObjectAge key="age" object={lease} />,
]} ]}
@ -87,6 +81,5 @@ export const Leases = withInjectables<Dependencies, LeaseProps>(NonInjectedLease
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
leaseStore: di.inject(leaseStoreInjectable), leaseStore: di.inject(leaseStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
}), }),
}); });

4
src/renderer/components/+config-maps/config-maps.scss
View File

@ -21,8 +21,6 @@
flex: .5; flex: .5;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+config-maps/config-maps.tsx
View File

@ -11,12 +11,10 @@ import { KubeObjectListLayout } from "../kube-object-list-layout";
import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import { prevDefault } from "../../utils";
import type { ConfigMapStore } from "./store"; 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 { withInjectables } from "@ogre-tools/injectable-react";
import configMapStoreInjectable from "./store.injectable"; 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 { enum columnId {
name = "name", name = "name",
@ -27,7 +25,6 @@ enum columnId {
interface Dependencies { interface Dependencies {
configMapStore: ConfigMapStore; configMapStore: ConfigMapStore;
filterByNamespace: FilterByNamespace;
} }
@observer @observer
@ -61,13 +58,10 @@ class NonInjectedConfigMaps extends React.Component<Dependencies> {
renderTableContents={configMap => [ renderTableContents={configMap => [
configMap.getName(), configMap.getName(),
<KubeObjectStatusIcon key="icon" object={configMap} />, <KubeObjectStatusIcon key="icon" object={configMap} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={configMap.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(configMap.getNs()))} />,
>
{configMap.getNs()}
</a>,
configMap.getKeys().join(", "), configMap.getKeys().join(", "),
<KubeObjectAge key="age" object={configMap} />, <KubeObjectAge key="age" object={configMap} />,
]} ]}
@ -81,6 +75,5 @@ export const ConfigMaps = withInjectables<Dependencies>(NonInjectedConfigMaps, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
configMapStore: di.inject(configMapStoreInjectable), configMapStore: di.inject(configMapStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
}), }),
}); });

4
src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.scss
View File

@ -21,8 +21,6 @@
flex: .5; flex: .5;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx
View File

@ -13,12 +13,10 @@ import type { KubeObjectDetailsProps } from "../kube-object-details";
import { KubeObjectListLayout } from "../kube-object-list-layout"; import { KubeObjectListLayout } from "../kube-object-list-layout";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; 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 type { PodDisruptionBudgetStore } from "./store";
import { withInjectables } from "@ogre-tools/injectable-react"; 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 podDisruptionBudgetStoreInjectable from "./store.injectable";
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -34,7 +32,6 @@ export interface PodDisruptionBudgetsProps extends KubeObjectDetailsProps<PodDis
} }
interface Dependencies { interface Dependencies {
filterByNamespace: FilterByNamespace;
podDisruptionBudgetStore: PodDisruptionBudgetStore; podDisruptionBudgetStore: PodDisruptionBudgetStore;
} }
@ -74,13 +71,10 @@ class NonInjectedPodDisruptionBudgets extends React.Component<PodDisruptionBudge
renderTableContents={pdb => [ renderTableContents={pdb => [
pdb.getName(), pdb.getName(),
<KubeObjectStatusIcon key="icon" object={pdb} />, <KubeObjectStatusIcon key="icon" object={pdb} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={pdb.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(pdb.getNs()))} />,
>
{pdb.getNs()}
</a>,
pdb.getMinAvailable(), pdb.getMinAvailable(),
pdb.getMaxUnavailable(), pdb.getMaxUnavailable(),
pdb.getCurrentHealthy(), pdb.getCurrentHealthy(),
@ -96,7 +90,6 @@ class NonInjectedPodDisruptionBudgets extends React.Component<PodDisruptionBudge
export const PodDisruptionBudgets = withInjectables<Dependencies, PodDisruptionBudgetsProps>(NonInjectedPodDisruptionBudgets, { export const PodDisruptionBudgets = withInjectables<Dependencies, PodDisruptionBudgetsProps>(NonInjectedPodDisruptionBudgets, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
filterByNamespace: di.inject(filterByNamespaceInjectable),
podDisruptionBudgetStore: di.inject(podDisruptionBudgetStoreInjectable), podDisruptionBudgetStore: di.inject(podDisruptionBudgetStoreInjectable),
}), }),
}); });

4
src/renderer/components/+config-resource-quotas/resource-quotas.scss
View File

@ -9,8 +9,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+config-resource-quotas/resource-quotas.tsx
View File

@ -12,13 +12,11 @@ import { AddQuotaDialog } from "./add-dialog/view";
import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import { prevDefault } from "../../utils";
import type { ResourceQuotaStore } from "./store"; 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 { withInjectables } from "@ogre-tools/injectable-react";
import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
import resourceQuotaStoreInjectable from "./store.injectable"; import resourceQuotaStoreInjectable from "./store.injectable";
import openAddQuotaDialogInjectable from "./add-dialog/open.injectable"; import openAddQuotaDialogInjectable from "./add-dialog/open.injectable";
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -28,7 +26,6 @@ enum columnId {
interface Dependencies { interface Dependencies {
resourceQuotaStore: ResourceQuotaStore; resourceQuotaStore: ResourceQuotaStore;
filterByNamespace: FilterByNamespace;
openAddQuotaDialog: () => void; openAddQuotaDialog: () => void;
} }
@ -61,13 +58,10 @@ class NonInjectedResourceQuotas extends React.Component<Dependencies> {
renderTableContents={resourceQuota => [ renderTableContents={resourceQuota => [
resourceQuota.getName(), resourceQuota.getName(),
<KubeObjectStatusIcon key="icon" object={resourceQuota}/>, <KubeObjectStatusIcon key="icon" object={resourceQuota}/>,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={resourceQuota.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(resourceQuota.getNs()))} />,
>
{resourceQuota.getNs()}
</a>,
<KubeObjectAge key="age" object={resourceQuota} />, <KubeObjectAge key="age" object={resourceQuota} />,
]} ]}
addRemoveButtons={{ addRemoveButtons={{
@ -84,7 +78,6 @@ class NonInjectedResourceQuotas extends React.Component<Dependencies> {
export const ResourceQuotas = withInjectables<Dependencies>(NonInjectedResourceQuotas, { export const ResourceQuotas = withInjectables<Dependencies>(NonInjectedResourceQuotas, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
filterByNamespace: di.inject(filterByNamespaceInjectable),
resourceQuotaStore: di.inject(resourceQuotaStoreInjectable), resourceQuotaStore: di.inject(resourceQuotaStoreInjectable),
openAddQuotaDialog: di.inject(openAddQuotaDialogInjectable), openAddQuotaDialog: di.inject(openAddQuotaDialogInjectable),
}), }),

4
src/renderer/components/+config-secrets/secrets.scss
View File

@ -17,8 +17,6 @@
@include table-cell-labels-offsets; @include table-cell-labels-offsets;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+config-secrets/secrets.tsx
View File

@ -13,13 +13,11 @@ import { Badge } from "../badge";
import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; 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 type { SecretStore } from "./store";
import { withInjectables } from "@ogre-tools/injectable-react"; 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 secretStoreInjectable from "./store.injectable";
import openAddSecretDialogInjectable from "./add-dialog/open.injectable"; import openAddSecretDialogInjectable from "./add-dialog/open.injectable";
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -31,7 +29,6 @@ enum columnId {
} }
interface Dependencies { interface Dependencies {
filterByNamespace: FilterByNamespace;
secretStore: SecretStore; secretStore: SecretStore;
openAddSecretDialog: () => void; openAddSecretDialog: () => void;
} }
@ -71,13 +68,10 @@ class NonInjectedSecrets extends React.Component<Dependencies> {
renderTableContents={secret => [ renderTableContents={secret => [
secret.getName(), secret.getName(),
<KubeObjectStatusIcon key="icon" object={secret} />, <KubeObjectStatusIcon key="icon" object={secret} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={secret.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(secret.getNs()))} />,
>
{secret.getNs()}
</a>,
secret.getLabels().map(label => ( secret.getLabels().map(label => (
<Badge <Badge
scrollable scrollable
@ -104,7 +98,6 @@ class NonInjectedSecrets extends React.Component<Dependencies> {
export const Secrets = withInjectables<Dependencies>(NonInjectedSecrets, { export const Secrets = withInjectables<Dependencies>(NonInjectedSecrets, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
filterByNamespace: di.inject(filterByNamespaceInjectable),
secretStore: di.inject(secretStoreInjectable), secretStore: di.inject(secretStoreInjectable),
openAddSecretDialog: di.inject(openAddSecretDialogInjectable), openAddSecretDialog: di.inject(openAddSecretDialogInjectable),
}), }),

4
src/renderer/components/+helm-releases/releases.scss
View File

@ -21,8 +21,6 @@
} }
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

24
src/renderer/components/+helm-releases/releases.tsx
View File

@ -23,9 +23,7 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import helmReleasesRouteParametersInjectable from "./helm-releases-route-parameters.injectable"; 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 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 navigateToHelmReleasesInjectable from "../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
import { prevDefault } from "../../utils"; import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
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";
enum columnId { enum columnId {
name = "name", name = "name",
@ -43,19 +41,9 @@ interface Dependencies {
releasesArePending: IComputedValue<boolean>; releasesArePending: IComputedValue<boolean>;
namespace: IComputedValue<string>; namespace: IComputedValue<string>;
navigateToHelmReleases: NavigateToHelmReleases; navigateToHelmReleases: NavigateToHelmReleases;
filterByNamespace: FilterByNamespace;
} }
class NonInjectedHelmReleases extends Component<Dependencies> { class NonInjectedHelmReleases extends Component<Dependencies> {
// TODO: This side-effect in mount must go.
componentDidMount() {
const namespace = this.props.namespace.get();
if (namespace) {
this.props.filterByNamespace(namespace);
}
}
onDetails = (item: HelmRelease) => { onDetails = (item: HelmRelease) => {
this.showDetails(item); this.showDetails(item);
}; };
@ -188,13 +176,10 @@ class NonInjectedHelmReleases extends Component<Dependencies> {
]} ]}
renderTableContents={release => [ renderTableContents={release => [
release.getName(), release.getName(),
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={release.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(release.getNs()))} />,
>
{release.getNs()}
</a>,
release.getChart(), release.getChart(),
release.getRevision(), release.getRevision(),
release.getVersion(), release.getVersion(),
@ -226,7 +211,6 @@ export const HelmReleases = withInjectables<Dependencies>(NonInjectedHelmRelease
releases: di.inject(removableReleasesInjectable), releases: di.inject(removableReleasesInjectable),
releasesArePending: di.inject(releasesInjectable).pending, releasesArePending: di.inject(releasesInjectable).pending,
navigateToHelmReleases: di.inject(navigateToHelmReleasesInjectable), navigateToHelmReleases: di.inject(navigateToHelmReleasesInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
...di.inject(helmReleasesRouteParametersInjectable), ...di.inject(helmReleasesRouteParametersInjectable),
}), }),
}); });

9
src/renderer/components/+namespaces/namespace-select-badge.module.scss Normal file
View File

@ -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;
}

58
src/renderer/components/+namespaces/namespace-select-badge.tsx Normal file
View File

@ -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 (
<Badge
flat={true}
expandable={false}
{...props}
label={namespace ?? label}
tooltip={(
<>
Set global namespace filter to:
<b>{namespace}</b>
</>
)}
className={cssNames(styles.NamespaceSelectBadge, props.className)}
onClick={prevDefault(() => filterByNamespace(namespace))}
/>
);
}
export const NamespaceSelectBadge = withInjectables<Dependencies, NamespaceSelectBadgeProps>(NamespaceSelectBadgeNonInjected, {
getProps(di, props) {
return {
...props,
filterByNamespace: di.inject(filterByNamespaceInjectable),
};
},
});

4
src/renderer/components/+network-endpoints/endpoints.scss
View File

@ -13,8 +13,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+network-endpoints/endpoints.tsx
View File

@ -11,12 +11,10 @@ import { KubeObjectListLayout } from "../kube-object-list-layout";
import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import { prevDefault } from "../../utils";
import type { EndpointsStore } from "./store"; 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 { withInjectables } from "@ogre-tools/injectable-react";
import endpointsStoreInjectable from "./store.injectable"; 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 { enum columnId {
name = "name", name = "name",
@ -27,7 +25,6 @@ enum columnId {
interface Dependencies { interface Dependencies {
endpointsStore: EndpointsStore; endpointsStore: EndpointsStore;
filterByNamespace: FilterByNamespace;
} }
@observer @observer
@ -59,13 +56,10 @@ class NonInjectedEndpoints extends React.Component<Dependencies> {
renderTableContents={endpoint => [ renderTableContents={endpoint => [
endpoint.getName(), endpoint.getName(),
<KubeObjectStatusIcon key="icon" object={endpoint} />, <KubeObjectStatusIcon key="icon" object={endpoint} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={endpoint.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(endpoint.getNs()))} />,
>
{endpoint.getNs()}
</a>,
endpoint.toString(), endpoint.toString(),
<KubeObjectAge key="age" object={endpoint} />, <KubeObjectAge key="age" object={endpoint} />,
]} ]}
@ -86,6 +80,5 @@ export const Endpoints = withInjectables<Dependencies>(NonInjectedEndpoints, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
endpointsStore: di.inject(endpointsStoreInjectable), endpointsStore: di.inject(endpointsStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
}), }),
}); });

4
src/renderer/components/+network-ingresses/ingresses.scss
View File

@ -32,8 +32,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+network-ingresses/ingresses.tsx
View File

@ -12,12 +12,10 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import { computeRouteDeclarations } from "../../../common/k8s-api/endpoints"; import { computeRouteDeclarations } from "../../../common/k8s-api/endpoints";
import { prevDefault } from "../../utils";
import type { IngressStore } from "./ingress-store"; 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 { 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 ingressStoreInjectable from "./ingress-store.injectable";
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -29,13 +27,11 @@ enum columnId {
interface Dependencies { interface Dependencies {
ingressStore: IngressStore; ingressStore: IngressStore;
filterByNamespace: FilterByNamespace;
} }
const NonInjectedIngresses = observer((props: Dependencies) => { const NonInjectedIngresses = observer((props: Dependencies) => {
const { const {
ingressStore, ingressStore,
filterByNamespace,
} = props; } = props;
return ( return (
@ -66,13 +62,7 @@ const NonInjectedIngresses = observer((props: Dependencies) => {
renderTableContents={ ingress => [ renderTableContents={ ingress => [
ingress.getName(), ingress.getName(),
<KubeObjectStatusIcon key="icon" object={ ingress } />, <KubeObjectStatusIcon key="icon" object={ ingress } />,
<a <NamespaceSelectBadge key="namespace" namespace={ingress.getNs()} />,
key="namespace"
className="filterNamespace"
onClick={prevDefault(() => filterByNamespace(ingress.getNs()))}
>
{ingress.getNs()}
</a>,
ingress.getLoadBalancers().map(lb => <p key={ lb }>{ lb }</p>), ingress.getLoadBalancers().map(lb => <p key={ lb }>{ lb }</p>),
computeRouteDeclarations(ingress).map(decl => ( computeRouteDeclarations(ingress).map(decl => (
decl.displayAsLink decl.displayAsLink
@ -112,6 +102,5 @@ export const Ingresses = withInjectables<Dependencies>(NonInjectedIngresses, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
ingressStore: di.inject(ingressStoreInjectable), ingressStore: di.inject(ingressStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
}), }),
}); });

4
src/renderer/components/+network-policies/network-policies.scss
View File

@ -9,8 +9,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+network-policies/network-policies.tsx
View File

@ -12,11 +12,9 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import type { NetworkPolicyStore } from "./store"; 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 { withInjectables } from "@ogre-tools/injectable-react";
import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
import networkPolicyStoreInjectable from "./store.injectable"; import networkPolicyStoreInjectable from "./store.injectable";
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -27,7 +25,6 @@ enum columnId {
interface Dependencies { interface Dependencies {
networkPolicyStore: NetworkPolicyStore; networkPolicyStore: NetworkPolicyStore;
filterByNamespace: FilterByNamespace;
} }
@observer @observer
@ -59,13 +56,10 @@ class NonInjectedNetworkPolicies extends React.Component<Dependencies> {
renderTableContents={networkPolicy => [ renderTableContents={networkPolicy => [
networkPolicy.getName(), networkPolicy.getName(),
<KubeObjectStatusIcon key="icon" object={networkPolicy} />, <KubeObjectStatusIcon key="icon" object={networkPolicy} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={networkPolicy.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(networkPolicy.getNs()))} />,
>
{networkPolicy.getNs()}
</a>,
networkPolicy.getTypes().join(", "), networkPolicy.getTypes().join(", "),
<KubeObjectAge key="age" object={networkPolicy} />, <KubeObjectAge key="age" object={networkPolicy} />,
]} ]}
@ -78,7 +72,6 @@ class NonInjectedNetworkPolicies extends React.Component<Dependencies> {
export const NetworkPolicies = withInjectables<Dependencies>(NonInjectedNetworkPolicies, { export const NetworkPolicies = withInjectables<Dependencies>(NonInjectedNetworkPolicies, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
filterByNamespace: di.inject(filterByNamespaceInjectable),
networkPolicyStore: di.inject(networkPolicyStoreInjectable), networkPolicyStore: di.inject(networkPolicyStoreInjectable),
}), }),
}); });

4
src/renderer/components/+network-port-forwards/port-forwards.scss
View File

@ -14,8 +14,6 @@
flex: 0.6; flex: 0.6;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+network-port-forwards/port-forwards.tsx
View File

@ -19,9 +19,7 @@ import { computed, makeObservable } from "mobx";
import portForwardsRouteParametersInjectable from "./port-forwards-route-parameters.injectable"; 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 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 navigateToPortForwardsInjectable from "../../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
import { prevDefault } from "../../utils"; import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
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";
enum columnId { enum columnId {
name = "name", name = "name",
@ -37,7 +35,6 @@ interface Dependencies {
portForwardStore: PortForwardStore; portForwardStore: PortForwardStore;
forwardport: IComputedValue<string>; forwardport: IComputedValue<string>;
navigateToPortForwards: NavigateToPortForwards; navigateToPortForwards: NavigateToPortForwards;
filterByNamespace: FilterByNamespace;
} }
@observer @observer
@ -132,13 +129,10 @@ class NonInjectedPortForwards extends React.Component<Dependencies> {
]} ]}
renderTableContents={item => [ renderTableContents={item => [
item.getName(), item.getName(),
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={item.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(item.getNs()))} />,
>
{item.getNs()}
</a>,
item.getKind(), item.getKind(),
item.getPort(), item.getPort(),
item.getForwardPort(), item.getForwardPort(),
@ -173,7 +167,6 @@ export const PortForwards = withInjectables<Dependencies>(NonInjectedPortForward
portForwardStore: di.inject(portForwardStoreInjectable), portForwardStore: di.inject(portForwardStoreInjectable),
...di.inject(portForwardsRouteParametersInjectable), ...di.inject(portForwardsRouteParametersInjectable),
navigateToPortForwards: di.inject(navigateToPortForwardsInjectable), navigateToPortForwards: di.inject(navigateToPortForwardsInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
}), }),
}); });

4
src/renderer/components/+network-services/services.scss
View File

@ -26,8 +26,6 @@
flex: 0.6; flex: 0.6;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

15
src/renderer/components/+network-services/services.tsx
View File

@ -12,13 +12,11 @@ import { Badge } from "../badge";
import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import { prevDefault } from "../../utils";
import type { ServiceStore } from "./store"; 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 type { Service } from "../../../common/k8s-api/endpoints";
import { withInjectables } from "@ogre-tools/injectable-react"; 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 serviceStoreInjectable from "./store.injectable";
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -48,7 +46,6 @@ const formatExternalIps = (service: Service) => {
interface Dependencies { interface Dependencies {
serviceStore: ServiceStore; serviceStore: ServiceStore;
filterByNamespace: FilterByNamespace;
} }
@observer @observer
@ -92,13 +89,10 @@ class NonInjectedServices extends React.Component<Dependencies> {
renderTableContents={service => [ renderTableContents={service => [
service.getName(), service.getName(),
<KubeObjectStatusIcon key="icon" object={ service } />, <KubeObjectStatusIcon key="icon" object={ service } />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={service.getNs()}
onClick={ prevDefault(() => this.props.filterByNamespace(service.getNs())) } />,
>
{ service.getNs() }
</a>,
service.getType(), service.getType(),
service.getClusterIp(), service.getClusterIp(),
service.getPorts().join(", "), service.getPorts().join(", "),
@ -116,7 +110,6 @@ class NonInjectedServices extends React.Component<Dependencies> {
export const Services = withInjectables<Dependencies>(NonInjectedServices, { export const Services = withInjectables<Dependencies>(NonInjectedServices, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
filterByNamespace: di.inject(filterByNamespaceInjectable),
serviceStore: di.inject(serviceStoreInjectable), serviceStore: di.inject(serviceStoreInjectable),
}), }),
}); });

4
src/renderer/components/+storage-volume-claims/volume-claims.scss
View File

@ -39,8 +39,6 @@
flex: 0.4; flex: 0.4;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

4
src/renderer/components/+user-management/+role-bindings/view.scss
View File

@ -13,8 +13,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

16
src/renderer/components/+user-management/+role-bindings/view.tsx
View File

@ -14,17 +14,15 @@ import { KubeObjectAge } from "../../kube-object/age";
import type { RoleStore } from "../+roles/store"; import type { RoleStore } from "../+roles/store";
import type { ServiceAccountStore } from "../+service-accounts/store"; import type { ServiceAccountStore } from "../+service-accounts/store";
import type { RoleBindingStore } from "./store"; import type { RoleBindingStore } from "./store";
import { prevDefault } from "../../../utils";
import type { ClusterRoleStore } from "../+cluster-roles/store"; 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 { withInjectables } from "@ogre-tools/injectable-react";
import clusterRoleStoreInjectable from "../+cluster-roles/store.injectable"; 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 roleBindingStoreInjectable from "./store.injectable";
import roleStoreInjectable from "../+roles/store.injectable"; import roleStoreInjectable from "../+roles/store.injectable";
import serviceAccountStoreInjectable from "../+service-accounts/store.injectable"; import serviceAccountStoreInjectable from "../+service-accounts/store.injectable";
import type { OpenRoleBindingDialog } from "./dialog/open.injectable"; import type { OpenRoleBindingDialog } from "./dialog/open.injectable";
import openRoleBindingDialogInjectable from "./dialog/open.injectable"; import openRoleBindingDialogInjectable from "./dialog/open.injectable";
import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -38,7 +36,6 @@ interface Dependencies {
roleStore: RoleStore; roleStore: RoleStore;
clusterRoleStore: ClusterRoleStore; clusterRoleStore: ClusterRoleStore;
serviceAccountStore: ServiceAccountStore; serviceAccountStore: ServiceAccountStore;
filterByNamespace: FilterByNamespace;
openRoleBindingDialog: OpenRoleBindingDialog; openRoleBindingDialog: OpenRoleBindingDialog;
} }
@ -50,7 +47,6 @@ class NonInjectedRoleBindings extends React.Component<Dependencies> {
roleBindingStore, roleBindingStore,
roleStore, roleStore,
serviceAccountStore, serviceAccountStore,
filterByNamespace,
openRoleBindingDialog, openRoleBindingDialog,
} = this.props; } = this.props;
@ -83,13 +79,10 @@ class NonInjectedRoleBindings extends React.Component<Dependencies> {
renderTableContents={binding => [ renderTableContents={binding => [
binding.getName(), binding.getName(),
<KubeObjectStatusIcon key="icon" object={binding} />, <KubeObjectStatusIcon key="icon" object={binding} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={binding.getNs()}
onClick={prevDefault(() => filterByNamespace(binding.getNs()))} />,
>
{binding.getNs()}
</a>,
binding.getSubjectNames(), binding.getSubjectNames(),
<KubeObjectAge key="age" object={binding} />, <KubeObjectAge key="age" object={binding} />,
]} ]}
@ -108,7 +101,6 @@ export const RoleBindings = withInjectables<Dependencies>(NonInjectedRoleBinding
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
clusterRoleStore: di.inject(clusterRoleStoreInjectable), clusterRoleStore: di.inject(clusterRoleStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
roleBindingStore: di.inject(roleBindingStoreInjectable), roleBindingStore: di.inject(roleBindingStoreInjectable),
roleStore: di.inject(roleStoreInjectable), roleStore: di.inject(roleStoreInjectable),
serviceAccountStore: di.inject(serviceAccountStoreInjectable), serviceAccountStore: di.inject(serviceAccountStoreInjectable),

4
src/renderer/components/+user-management/+roles/view.scss
View File

@ -13,8 +13,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

16
src/renderer/components/+user-management/+roles/view.tsx
View File

@ -13,12 +13,10 @@ import { AddRoleDialog } from "./add-dialog/view";
import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../../kube-object/age"; import { KubeObjectAge } from "../../kube-object/age";
import type { RoleStore } from "./store"; 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 { withInjectables } from "@ogre-tools/injectable-react";
import filterByNamespaceInjectable from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
import roleStoreInjectable from "./store.injectable"; import roleStoreInjectable from "./store.injectable";
import openAddRoleDialogInjectable from "./add-dialog/open.injectable"; import openAddRoleDialogInjectable from "./add-dialog/open.injectable";
import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -28,7 +26,6 @@ enum columnId {
interface Dependencies { interface Dependencies {
roleStore: RoleStore; roleStore: RoleStore;
filterByNamespace: FilterByNamespace;
openAddRoleDialog: () => void; openAddRoleDialog: () => void;
} }
@ -36,7 +33,6 @@ interface Dependencies {
class NonInjectedRoles extends React.Component<Dependencies> { class NonInjectedRoles extends React.Component<Dependencies> {
render() { render() {
const { const {
filterByNamespace,
roleStore, roleStore,
openAddRoleDialog, openAddRoleDialog,
} = this.props; } = this.props;
@ -66,13 +62,10 @@ class NonInjectedRoles extends React.Component<Dependencies> {
renderTableContents={role => [ renderTableContents={role => [
role.getName(), role.getName(),
<KubeObjectStatusIcon key="icon" object={role} />, <KubeObjectStatusIcon key="icon" object={role} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={role.getNs()}
onClick={prevDefault(() => filterByNamespace(role.getNs()))} />,
>
{role.getNs()}
</a>,
<KubeObjectAge key="age" object={role} />, <KubeObjectAge key="age" object={role} />,
]} ]}
addRemoveButtons={{ addRemoveButtons={{
@ -89,7 +82,6 @@ class NonInjectedRoles extends React.Component<Dependencies> {
export const Roles = withInjectables<Dependencies>(NonInjectedRoles, { export const Roles = withInjectables<Dependencies>(NonInjectedRoles, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
filterByNamespace: di.inject(filterByNamespaceInjectable),
roleStore: di.inject(roleStoreInjectable), roleStore: di.inject(roleStoreInjectable),
openAddRoleDialog: di.inject(openAddRoleDialogInjectable), openAddRoleDialog: di.inject(openAddRoleDialogInjectable),
}), }),

4
src/renderer/components/+user-management/+service-accounts/view.scss
View File

@ -9,8 +9,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

16
src/renderer/components/+user-management/+service-accounts/view.tsx
View File

@ -12,14 +12,12 @@ import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
import { CreateServiceAccountDialog } from "./create-dialog/view"; import { CreateServiceAccountDialog } from "./create-dialog/view";
import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../../kube-object/age"; import { KubeObjectAge } from "../../kube-object/age";
import { prevDefault } from "../../../utils";
import type { ServiceAccountStore } from "./store"; 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 { withInjectables } from "@ogre-tools/injectable-react";
import filterByNamespaceInjectable from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
import serviceAccountStoreInjectable from "./store.injectable"; import serviceAccountStoreInjectable from "./store.injectable";
import type { OpenCreateServiceAccountDialog } from "./create-dialog/open.injectable"; import type { OpenCreateServiceAccountDialog } from "./create-dialog/open.injectable";
import openCreateServiceAccountDialogInjectable from "./create-dialog/open.injectable"; import openCreateServiceAccountDialogInjectable from "./create-dialog/open.injectable";
import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -29,7 +27,6 @@ enum columnId {
interface Dependencies { interface Dependencies {
serviceAccountStore: ServiceAccountStore; serviceAccountStore: ServiceAccountStore;
filterByNamespace: FilterByNamespace;
openCreateServiceAccountDialog: OpenCreateServiceAccountDialog; openCreateServiceAccountDialog: OpenCreateServiceAccountDialog;
} }
@ -37,7 +34,6 @@ interface Dependencies {
class NonInjectedServiceAccounts extends React.Component<Dependencies> { class NonInjectedServiceAccounts extends React.Component<Dependencies> {
render() { render() {
const { const {
filterByNamespace,
serviceAccountStore, serviceAccountStore,
openCreateServiceAccountDialog, openCreateServiceAccountDialog,
} = this.props; } = this.props;
@ -67,13 +63,10 @@ class NonInjectedServiceAccounts extends React.Component<Dependencies> {
renderTableContents={account => [ renderTableContents={account => [
account.getName(), account.getName(),
<KubeObjectStatusIcon key="icon" object={account} />, <KubeObjectStatusIcon key="icon" object={account} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={account.getNs()}
onClick={prevDefault(() => filterByNamespace(account.getNs()))} />,
>
{account.getNs()}
</a>,
<KubeObjectAge key="age" object={account} />, <KubeObjectAge key="age" object={account} />,
]} ]}
addRemoveButtons={{ addRemoveButtons={{
@ -90,7 +83,6 @@ class NonInjectedServiceAccounts extends React.Component<Dependencies> {
export const ServiceAccounts = withInjectables<Dependencies>(NonInjectedServiceAccounts, { export const ServiceAccounts = withInjectables<Dependencies>(NonInjectedServiceAccounts, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
filterByNamespace: di.inject(filterByNamespaceInjectable),
serviceAccountStore: di.inject(serviceAccountStoreInjectable), serviceAccountStore: di.inject(serviceAccountStoreInjectable),
openCreateServiceAccountDialog: di.inject(openCreateServiceAccountDialogInjectable), openCreateServiceAccountDialog: di.inject(openCreateServiceAccountDialogInjectable),
}), }),

4
src/renderer/components/+workloads-cronjobs/cronjobs.scss
View File

@ -9,8 +9,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

16
src/renderer/components/+workloads-cronjobs/cronjobs.tsx
View File

@ -17,9 +17,7 @@ import type { EventStore } from "../+events/store";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import cronJobStoreInjectable from "./store.injectable"; import cronJobStoreInjectable from "./store.injectable";
import eventStoreInjectable from "../+events/store.injectable"; import eventStoreInjectable from "../+events/store.injectable";
import { prevDefault } from "../../utils"; import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
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";
enum columnId { enum columnId {
name = "name", name = "name",
@ -34,14 +32,12 @@ enum columnId {
interface Dependencies { interface Dependencies {
cronJobStore: CronJobStore; cronJobStore: CronJobStore;
eventStore: EventStore; eventStore: EventStore;
filterByNamespace: FilterByNamespace;
} }
const NonInjectedCronJobs = observer((props: Dependencies) => { const NonInjectedCronJobs = observer((props: Dependencies) => {
const { const {
cronJobStore, cronJobStore,
eventStore, eventStore,
filterByNamespace,
} = props; } = props;
return ( return (
@ -82,13 +78,10 @@ const NonInjectedCronJobs = observer((props: Dependencies) => {
renderTableContents={cronJob => [ renderTableContents={cronJob => [
cronJob.getName(), cronJob.getName(),
<KubeObjectStatusIcon key="icon" object={cronJob} />, <KubeObjectStatusIcon key="icon" object={cronJob} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={cronJob.getNs()}
onClick={prevDefault(() => filterByNamespace(cronJob.getNs()))} />,
>
{cronJob.getNs()}
</a>,
cronJob.isNeverRun() ? "never" : cronJob.getSchedule(), cronJob.isNeverRun() ? "never" : cronJob.getSchedule(),
cronJob.getSuspendFlag(), cronJob.getSuspendFlag(),
cronJobStore.getActiveJobsNum(cronJob), cronJobStore.getActiveJobsNum(cronJob),
@ -105,6 +98,5 @@ export const CronJobs = withInjectables<Dependencies>(NonInjectedCronJobs, {
...props, ...props,
cronJobStore: di.inject(cronJobStoreInjectable), cronJobStore: di.inject(cronJobStoreInjectable),
eventStore: di.inject(eventStoreInjectable), eventStore: di.inject(eventStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
}), }),
}); });

4
src/renderer/components/+workloads-daemonsets/daemonsets.scss
View File

@ -22,8 +22,6 @@
@include table-cell-labels-offsets; @include table-cell-labels-offsets;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

23
src/renderer/components/+workloads-daemonsets/daemonsets.tsx
View File

@ -15,12 +15,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import type { DaemonSetStore } from "./store"; import type { DaemonSetStore } from "./store";
import type { EventStore } from "../+events/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 { withInjectables } from "@ogre-tools/injectable-react";
import daemonSetStoreInjectable from "./store.injectable"; import daemonSetStoreInjectable from "./store.injectable";
import eventStoreInjectable from "../+events/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 { enum columnId {
name = "name", name = "name",
@ -33,14 +31,12 @@ enum columnId {
interface Dependencies { interface Dependencies {
daemonSetStore: DaemonSetStore; daemonSetStore: DaemonSetStore;
eventStore: EventStore; eventStore: EventStore;
filterByNamespace: FilterByNamespace;
} }
const NonInjectedDaemonSets = observer((props: Dependencies) => { const NonInjectedDaemonSets = observer((props: Dependencies) => {
const { const {
daemonSetStore, daemonSetStore,
eventStore, eventStore,
filterByNamespace,
} = props; } = props;
const getPodsLength = (daemonSet: DaemonSet) => daemonSetStore.getChildPods(daemonSet).length; const getPodsLength = (daemonSet: DaemonSet) => daemonSetStore.getChildPods(daemonSet).length;
@ -66,7 +62,12 @@ const NonInjectedDaemonSets = observer((props: Dependencies) => {
renderHeaderTitle="Daemon Sets" renderHeaderTitle="Daemon Sets"
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { 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 }, { title: "Pods", className: "pods", sortBy: columnId.pods, id: columnId.pods },
{ className: "warning", showWithColumn: columnId.pods }, { className: "warning", showWithColumn: columnId.pods },
{ title: "Node Selector", className: "labels scrollable", id: columnId.labels }, { title: "Node Selector", className: "labels scrollable", id: columnId.labels },
@ -74,13 +75,10 @@ const NonInjectedDaemonSets = observer((props: Dependencies) => {
]} ]}
renderTableContents={daemonSet => [ renderTableContents={daemonSet => [
daemonSet.getName(), daemonSet.getName(),
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={daemonSet.getNs()}
onClick={prevDefault(() => filterByNamespace(daemonSet.getNs()))} />,
>
{daemonSet.getNs()}
</a>,
getPodsLength(daemonSet), getPodsLength(daemonSet),
<KubeObjectStatusIcon key="icon" object={daemonSet} />, <KubeObjectStatusIcon key="icon" object={daemonSet} />,
daemonSet.getNodeSelectors().map(selector => ( daemonSet.getNodeSelectors().map(selector => (
@ -102,6 +100,5 @@ export const DaemonSets = withInjectables<Dependencies>(NonInjectedDaemonSets, {
...props, ...props,
daemonSetStore: di.inject(daemonSetStoreInjectable), daemonSetStore: di.inject(daemonSetStoreInjectable),
eventStore: di.inject(eventStoreInjectable), eventStore: di.inject(eventStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
}), }),
}); });

4
src/renderer/components/+workloads-deployments/deployments.scss
View File

@ -43,8 +43,6 @@
} }
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

38
src/renderer/components/+workloads-deployments/deployments.tsx
View File

@ -9,7 +9,7 @@ import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import type { Deployment } from "../../../common/k8s-api/endpoints"; import type { Deployment } from "../../../common/k8s-api/endpoints";
import { KubeObjectListLayout } from "../kube-object-list-layout"; import { KubeObjectListLayout } from "../kube-object-list-layout";
import { cssNames, prevDefault } from "../../utils"; import { cssNames } from "../../utils";
import kebabCase from "lodash/kebabCase"; import kebabCase from "lodash/kebabCase";
import orderBy from "lodash/orderBy"; import orderBy from "lodash/orderBy";
import { KubeObjectStatusIcon } from "../kube-object-status-icon"; 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 { KubeObjectAge } from "../kube-object/age";
import type { DeploymentStore } from "./store"; import type { DeploymentStore } from "./store";
import type { EventStore } from "../+events/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 { withInjectables } from "@ogre-tools/injectable-react";
import deploymentStoreInjectable from "./store.injectable"; import deploymentStoreInjectable from "./store.injectable";
import eventStoreInjectable from "../+events/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 { enum columnId {
name = "name", name = "name",
@ -35,7 +34,6 @@ enum columnId {
interface Dependencies { interface Dependencies {
deploymentStore: DeploymentStore; deploymentStore: DeploymentStore;
eventStore: EventStore; eventStore: EventStore;
filterByNamespace: FilterByNamespace;
} }
@observer @observer
@ -64,7 +62,6 @@ class NonInjectedDeployments extends React.Component<Dependencies> {
const { const {
deploymentStore, deploymentStore,
eventStore, eventStore,
filterByNamespace,
} = this.props; } = this.props;
return ( return (
@ -90,22 +87,34 @@ class NonInjectedDeployments extends React.Component<Dependencies> {
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning", showWithColumn: 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: "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: "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 => [ renderTableContents={deployment => [
deployment.getName(), deployment.getName(),
<KubeObjectStatusIcon key="icon" object={deployment} />, <KubeObjectStatusIcon key="icon" object={deployment} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={deployment.getNs()}
onClick={prevDefault(() => filterByNamespace(deployment.getNs()))} />,
>
{deployment.getNs()}
</a>,
this.renderPods(deployment), this.renderPods(deployment),
deployment.getReplicas(), deployment.getReplicas(),
<KubeObjectAge key="age" object={deployment} />, <KubeObjectAge key="age" object={deployment} />,
@ -122,6 +131,5 @@ export const Deployments = withInjectables<Dependencies>(NonInjectedDeployments,
...props, ...props,
deploymentStore: di.inject(deploymentStoreInjectable), deploymentStore: di.inject(deploymentStoreInjectable),
eventStore: di.inject(eventStoreInjectable), eventStore: di.inject(eventStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
}), }),
}); });

4
src/renderer/components/+workloads-jobs/jobs.scss
View File

@ -19,8 +19,6 @@
@include job-condition-colors; @include job-condition-colors;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

16
src/renderer/components/+workloads-jobs/jobs.tsx
View File

@ -14,12 +14,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import type { JobStore } from "./store"; import type { JobStore } from "./store";
import type { EventStore } from "../+events/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 { withInjectables } from "@ogre-tools/injectable-react";
import eventStoreInjectable from "../+events/store.injectable"; import eventStoreInjectable from "../+events/store.injectable";
import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
import jobStoreInjectable from "./store.injectable"; import jobStoreInjectable from "./store.injectable";
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -32,13 +30,11 @@ enum columnId {
interface Dependencies { interface Dependencies {
jobStore: JobStore; jobStore: JobStore;
eventStore: EventStore; eventStore: EventStore;
filterByNamespace: FilterByNamespace;
} }
const NonInjectedJobs = observer((props: Dependencies) => { const NonInjectedJobs = observer((props: Dependencies) => {
const { const {
eventStore, eventStore,
filterByNamespace,
jobStore, jobStore,
} = props; } = props;
@ -73,13 +69,10 @@ const NonInjectedJobs = observer((props: Dependencies) => {
return [ return [
job.getName(), job.getName(),
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={job.getNs()}
onClick={prevDefault(() => filterByNamespace(job.getNs()))} />,
>
{job.getNs()}
</a>,
`${job.getCompletions()} / ${job.getDesiredCompletions()}`, `${job.getCompletions()} / ${job.getDesiredCompletions()}`,
<KubeObjectStatusIcon key="icon" object={job} />, <KubeObjectStatusIcon key="icon" object={job} />,
<KubeObjectAge key="age" object={job} />, <KubeObjectAge key="age" object={job} />,
@ -98,7 +91,6 @@ export const Jobs = withInjectables<Dependencies>(NonInjectedJobs, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
eventStore: di.inject(eventStoreInjectable), eventStore: di.inject(eventStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
jobStore: di.inject(jobStoreInjectable), jobStore: di.inject(jobStoreInjectable),
}), }),
}); });

4
src/renderer/components/+workloads-pods/pods.scss
View File

@ -38,8 +38,6 @@
flex-grow: 0.7; flex-grow: 0.7;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

50
src/renderer/components/+workloads-pods/pods.tsx
View File

@ -11,7 +11,7 @@ import { Link } from "react-router-dom";
import { KubeObjectListLayout } from "../kube-object-list-layout"; import { KubeObjectListLayout } from "../kube-object-list-layout";
import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints"; import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints";
import { StatusBrick } from "../status-brick"; 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 startCase from "lodash/startCase";
import kebabCase from "lodash/kebabCase"; import kebabCase from "lodash/kebabCase";
import type { ApiManager } from "../../../common/k8s-api/api-manager"; 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 nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.injectable";
import eventStoreInjectable from "../+events/store.injectable"; import eventStoreInjectable from "../+events/store.injectable";
import podStoreInjectable from "./store.injectable"; import podStoreInjectable from "./store.injectable";
import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
enum columnId { enum columnId {
name = "name", name = "name",
@ -45,7 +44,6 @@ enum columnId {
interface Dependencies { interface Dependencies {
getDetailsUrl: GetDetailsUrl; getDetailsUrl: GetDetailsUrl;
filterByNamespace: FilterByNamespace;
apiManager: ApiManager; apiManager: ApiManager;
eventStore: EventStore; eventStore: EventStore;
podStore: PodStore; podStore: PodStore;
@ -111,7 +109,7 @@ class NonInjectedPods extends React.Component<Dependencies> {
className="Pods" className="Pods"
store={podStore} store={podStore}
dependentStores={[eventStore]} // status icon component uses event store dependentStores={[eventStore]} // status icon component uses event store
tableId = "workloads_pods" tableId="workloads_pods"
isConfigurable isConfigurable
sortingCallbacks={{ sortingCallbacks={{
[columnId.name]: pod => getConvertedParts(pod.getName()), [columnId.name]: pod => getConvertedParts(pod.getName()),
@ -134,10 +132,30 @@ class NonInjectedPods extends React.Component<Dependencies> {
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning", showWithColumn: 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: "Namespace",
{ title: "Restarts", className: "restarts", sortBy: columnId.restarts, id: columnId.restarts }, className: "namespace",
{ title: "Controlled By", className: "owners", sortBy: columnId.owners, id: columnId.owners }, 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: "Node", className: "node", sortBy: columnId.node, id: columnId.node },
{ title: "QoS", className: "qos", sortBy: columnId.qos, id: columnId.qos }, { title: "QoS", className: "qos", sortBy: columnId.qos, id: columnId.qos },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
@ -152,13 +170,10 @@ class NonInjectedPods extends React.Component<Dependencies> {
expandable={false} expandable={false}
/>, />,
<KubeObjectStatusIcon key="icon" object={pod} />, <KubeObjectStatusIcon key="icon" object={pod} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={pod.getNs()}
onClick={prevDefault(() => this.props.filterByNamespace(pod.getNs()))} />,
>
{pod.getNs()}
</a>,
this.renderContainersStatus(pod), this.renderContainersStatus(pod),
pod.getRestartsCount(), pod.getRestartsCount(),
pod.getOwnerRefs().map(ref => { pod.getOwnerRefs().map(ref => {
@ -186,7 +201,9 @@ class NonInjectedPods extends React.Component<Dependencies> {
tooltip={pod.getNodeName()} tooltip={pod.getNodeName()}
expandable={false} expandable={false}
> >
<Link to={getDetailsUrl(nodeApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}> <Link
to={getDetailsUrl(nodeApi.getUrl({ name: pod.getNodeName() }))}
onClick={stopPropagation}>
{pod.getNodeName()} {pod.getNodeName()}
</Link> </Link>
</Badge> </Badge>
@ -210,6 +227,5 @@ export const Pods = withInjectables<Dependencies>(NonInjectedPods, {
nodeApi: di.inject(nodeApiInjectable), nodeApi: di.inject(nodeApiInjectable),
eventStore: di.inject(eventStoreInjectable), eventStore: di.inject(eventStoreInjectable),
podStore: di.inject(podStoreInjectable), podStore: di.inject(podStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
}), }),
}); });

4
src/renderer/components/+workloads-replicasets/replicasets.scss
View File

@ -13,8 +13,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

37
src/renderer/components/+workloads-replicasets/replicasets.tsx
View File

@ -13,12 +13,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import type { ReplicaSetStore } from "./store"; import type { ReplicaSetStore } from "./store";
import type { EventStore } from "../+events/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 { withInjectables } from "@ogre-tools/injectable-react";
import eventStoreInjectable from "../+events/store.injectable"; import eventStoreInjectable from "../+events/store.injectable";
import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
import replicaSetStoreInjectable from "./store.injectable"; import replicaSetStoreInjectable from "./store.injectable";
import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -32,13 +30,11 @@ enum columnId {
interface Dependencies { interface Dependencies {
replicaSetStore: ReplicaSetStore; replicaSetStore: ReplicaSetStore;
eventStore: EventStore; eventStore: EventStore;
filterByNamespace: FilterByNamespace;
} }
const NonInjectedReplicaSets = observer((props: Dependencies) => { const NonInjectedReplicaSets = observer((props: Dependencies) => {
const { const {
eventStore, eventStore,
filterByNamespace,
replicaSetStore, replicaSetStore,
} = props; } = props;
@ -65,22 +61,34 @@ const NonInjectedReplicaSets = observer((props: Dependencies) => {
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning", showWithColumn: 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: "Namespace",
{ title: "Current", className: "current", sortBy: columnId.current, id: columnId.current }, 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: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
]} ]}
renderTableContents={replicaSet => [ renderTableContents={replicaSet => [
replicaSet.getName(), replicaSet.getName(),
<KubeObjectStatusIcon key="icon" object={replicaSet} />, <KubeObjectStatusIcon key="icon" object={replicaSet} />,
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={replicaSet.getNs()}
onClick={prevDefault(() => filterByNamespace(replicaSet.getNs()))} />,
>
{replicaSet.getNs()}
</a>,
replicaSet.getDesired(), replicaSet.getDesired(),
replicaSet.getCurrent(), replicaSet.getCurrent(),
replicaSet.getReady(), replicaSet.getReady(),
@ -95,7 +103,6 @@ export const ReplicaSets = withInjectables<Dependencies>(NonInjectedReplicaSets,
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
eventStore: di.inject(eventStoreInjectable), eventStore: di.inject(eventStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
replicaSetStore: di.inject(replicaSetStoreInjectable), replicaSetStore: di.inject(replicaSetStoreInjectable),
}), }),
}); });

4
src/renderer/components/+workloads-statefulsets/statefulsets.scss
View File

@ -17,8 +17,6 @@
@include table-cell-warning; @include table-cell-warning;
} }
a.filterNamespace {
border-bottom: unset;
}
} }
} }

30
src/renderer/components/+workloads-statefulsets/statefulsets.tsx
View File

@ -14,12 +14,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import type { StatefulSetStore } from "./store"; import type { StatefulSetStore } from "./store";
import type { EventStore } from "../+events/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 { withInjectables } from "@ogre-tools/injectable-react";
import eventStoreInjectable from "../+events/store.injectable"; import eventStoreInjectable from "../+events/store.injectable";
import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
import statefulSetStoreInjectable from "./store.injectable"; import statefulSetStoreInjectable from "./store.injectable";
import { prevDefault } from "../../utils"; import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
enum columnId { enum columnId {
name = "name", name = "name",
@ -32,7 +30,6 @@ enum columnId {
interface Dependencies { interface Dependencies {
statefulSetStore: StatefulSetStore; statefulSetStore: StatefulSetStore;
eventStore: EventStore; eventStore: EventStore;
filterByNamespace: FilterByNamespace;
} }
const renderPodCounts = (statefulSet: StatefulSet) => { const renderPodCounts = (statefulSet: StatefulSet) => {
@ -44,7 +41,6 @@ const renderPodCounts = (statefulSet: StatefulSet) => {
const NonInjectedStatefulSets = observer((props: Dependencies) => { const NonInjectedStatefulSets = observer((props: Dependencies) => {
const { const {
eventStore, eventStore,
filterByNamespace,
statefulSetStore, statefulSetStore,
} = props; } = props;
@ -68,21 +64,28 @@ const NonInjectedStatefulSets = observer((props: Dependencies) => {
renderHeaderTitle="Stateful Sets" renderHeaderTitle="Stateful Sets"
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { 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: "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 }, { className: "warning", showWithColumn: columnId.replicas },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
]} ]}
renderTableContents={statefulSet => [ renderTableContents={statefulSet => [
statefulSet.getName(), statefulSet.getName(),
<a <NamespaceSelectBadge
key="namespace" key="namespace"
className="filterNamespace" namespace={statefulSet.getNs()}
onClick={prevDefault(() => filterByNamespace(statefulSet.getNs()))} />,
>
{statefulSet.getNs()}
</a>,
renderPodCounts(statefulSet), renderPodCounts(statefulSet),
statefulSet.getReplicas(), statefulSet.getReplicas(),
<KubeObjectStatusIcon key="icon" object={statefulSet} />, <KubeObjectStatusIcon key="icon" object={statefulSet} />,
@ -97,7 +100,6 @@ export const StatefulSets = withInjectables<Dependencies>(NonInjectedStatefulSet
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
eventStore: di.inject(eventStoreInjectable), eventStore: di.inject(eventStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable),
statefulSetStore: di.inject(statefulSetStoreInjectable), statefulSetStore: di.inject(statefulSetStoreInjectable),
}), }),
}); });