frontend: Use selected namespaces when fetching lists in map view

Signed-off-by: Oleksandr Dubenko <[email protected]>

frontend/src/components/common/Resource/ResourceTable.tsx

@@ -10,6 +10,7 @@ import { KubeObject } from '../../../lib/k8s/KubeObject';
 import { KubeObjectClass } from '../../../lib/k8s/KubeObject';
 import { useFilterFunc } from '../../../lib/util';
 import { DefaultHeaderAction, RowAction } from '../../../redux/actionButtonsSlice';
+import { useNamespaces } from '../../../redux/filterSlice';
 import { HeadlampEventType, useEventCallback } from '../../../redux/headlampEventSlice';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
 import { useSettings } from '../../App/Settings/hook';
@@ -22,7 +23,6 @@ import EditButton from './EditButton';
 import { RestartButton } from './RestartButton';
 import ScaleButton from './ScaleButton';
 import ViewButton from './ViewButton';
-import { useNamespaces } from '../../../redux/filterSlice';
 
 export type ResourceTableColumn<RowItem> = {
   /** Unique id for the column, not required but recommended */

frontend/src/components/crd/CustomResourceInstancesList.tsx

@@ -3,10 +3,10 @@ import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import CRD from '../../lib/k8s/crd';
 import { KubeObject } from '../../lib/k8s/KubeObject';
+import { useNamespaces } from '../../redux/filterSlice';
 import { Link, Loader, SectionBox, ShowHideLabel } from '../common/';
 import Empty from '../common/EmptyContent';
 import { ResourceListView } from '../common/Resource';
-import { useNamespaces } from '../../redux/filterSlice';
 
 function CrInstancesView({ crds }: { crds: CRD[]; key: string }) {
   const { t } = useTranslation(['glossary', 'translation']);

frontend/src/components/crd/List.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import CRD from '../../lib/k8s/crd';
+import { useNamespaces } from '../../redux/filterSlice';
 import { Link, useThrottle } from '../common';
 import ResourceListView from '../common/Resource/ResourceListView';
-import { useNamespaces } from '../../redux/filterSlice';
 
 export default function CustomResourceDefinitionList() {
   const { t } = useTranslation(['glossary', 'frequent']);

frontend/src/components/job/List.tsx

@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { KubeContainer } from '../../lib/k8s/cluster';
 import Job from '../../lib/k8s/job';
 import { formatDuration } from '../../lib/util';
+import { useNamespaces } from '../../redux/filterSlice';
 import { LightTooltip, SimpleTableProps, StatusLabel, StatusLabelProps } from '../common';
 import ResourceListView from '../common/Resource/ResourceListView';
-import { useNamespaces } from '../../redux/filterSlice';
 
 export function makeJobStatusLabel(job: Job) {
   if (!job?.status?.conditions) {

frontend/src/components/limitRange/List.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from 'react-i18next';
 import { ApiError } from '../../lib/k8s/apiProxy';
 import { LimitRange } from '../../lib/k8s/limitRange';
+import { useNamespaces } from '../../redux/filterSlice';
 import { SimpleTableProps } from '../common';
 import ResourceListView from '../common/Resource/ResourceListView';
-import { useNamespaces } from '../../redux/filterSlice';
 
 export interface LimitRangeProps {
   limitRanges: LimitRange[] | null;

frontend/src/components/pod/List.tsx

@@ -5,12 +5,12 @@ import { useTranslation } from 'react-i18next';
 import { ApiError } from '../../lib/k8s/apiProxy';
 import Pod from '../../lib/k8s/pod';
 import { timeAgo } from '../../lib/util';
+import { useNamespaces } from '../../redux/filterSlice';
 import { HeadlampEventType, useEventCallback } from '../../redux/headlampEventSlice';
 import { LightTooltip, Link, SimpleTableProps } from '../common';
 import { StatusLabel, StatusLabelProps } from '../common/Label';
 import ResourceListView from '../common/Resource/ResourceListView';
 import { ResourceTableProps } from '../common/Resource/ResourceTable';
-import { useNamespaces } from '../../redux/filterSlice';
 
 export function makePodStatusLabel(pod: Pod) {
   const phase = pod.status.phase;

frontend/src/components/resourceMap/sources/definitions/configurationSource.tsx

@@ -7,6 +7,7 @@ import Pod from '../../../../lib/k8s/pod';
 import Secret from '../../../../lib/k8s/secret';
 import Service from '../../../../lib/k8s/service';
 import ValidatingWebhookConfiguration from '../../../../lib/k8s/validatingWebhookConfiguration';
+import { useNamespaces } from '../../../../redux/filterSlice';
 import { GraphEdge, GraphSource } from '../../graph/graphModel';
 import { getKindGroupColor, KubeIcon } from '../../kubeIcon/KubeIcon';
 import { makeKubeObjectNode, makeKubeToKubeEdge } from '../GraphSources';
@@ -17,9 +18,8 @@ const secretsSource: GraphSource = {
   icon: <KubeIcon kind="Secret" />,
   isEnabledByDefault: false,
   useData() {
-    const [secrets] = Secret.useList();
-
-    const [pods] = Pod.useList();
+    const [secrets] = Secret.useList({ namespace: useNamespaces() });
+    const [pods] = Pod.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!secrets || !pods) return null;
@@ -76,9 +76,9 @@ const configMapsSource: GraphSource = {
   isEnabledByDefault: false,
   icon: <KubeIcon kind="ConfigMap" />,
   useData() {
-    const [configMaps] = ConfigMap.useList();
-    const [pods] = Pod.useList();
-    const [jobs] = Job.useList();
+    const [configMaps] = ConfigMap.useList({ namespace: useNamespaces() });
+    const [pods] = Pod.useList({ namespace: useNamespaces() });
+    const [jobs] = Job.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!configMaps || !pods || !jobs) return null;
@@ -123,8 +123,8 @@ const validatingWebhookConfigurationSource: GraphSource = {
   icon: <KubeIcon kind="ConfigMap" />,
   isEnabledByDefault: false,
   useData() {
-    const [vwc] = ValidatingWebhookConfiguration.useList();
-    const [services] = Service.useList();
+    const [vwc] = ValidatingWebhookConfiguration.useList({ namespace: useNamespaces() });
+    const [services] = Service.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!vwc || !services) return null;
@@ -155,8 +155,8 @@ const mutatingWebhookConfigurationSource: GraphSource = {
   icon: <KubeIcon kind="ConfigMap" />,
   isEnabledByDefault: false,
   useData() {
-    const [mwc] = MutatingWebhookConfiguration.useList();
-    const [services] = Service.useList();
+    const [mwc] = MutatingWebhookConfiguration.useList({ namespace: useNamespaces() });
+    const [services] = Service.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!mwc || !services) return null;

frontend/src/components/resourceMap/sources/definitions/networkSource.tsx

@@ -7,6 +7,7 @@ import NetworkPolicy from '../../../../lib/k8s/networkpolicy';
 import Pod from '../../../../lib/k8s/pod';
 import Secret from '../../../../lib/k8s/secret';
 import Service from '../../../../lib/k8s/service';
+import { useNamespaces } from '../../../../redux/filterSlice';
 import { GraphEdge, GraphSource } from '../../graph/graphModel';
 import { getKindGroupColor, KubeIcon } from '../../kubeIcon/KubeIcon';
 import { makeKubeObjectNode, makeKubeToKubeEdge } from '../GraphSources';
@@ -17,8 +18,8 @@ const serviceSource: GraphSource = {
   label: 'Services',
   icon: <KubeIcon kind={'Service'} />,
   useData() {
-    const [services] = Service.useList();
-    const [pods] = Pod.useList();
+    const [services] = Service.useList({ namespace: useNamespaces() });
+    const [pods] = Pod.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!services || !pods) return null;
@@ -46,8 +47,8 @@ const endpointsSource: GraphSource = {
   label: 'Endpoints',
   icon: <KubeIcon kind="Endpoint" />,
   useData() {
-    const [endpoints] = Endpoints.useList();
-    const [services] = Service.useList();
+    const [endpoints] = Endpoints.useList({ namespace: useNamespaces() });
+    const [services] = Service.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       const nodes = endpoints?.map(makeKubeObjectNode) ?? [];
@@ -71,9 +72,9 @@ const ingressListSource: GraphSource = {
   label: 'Ingress',
   icon: <KubeIcon kind={'Ingress'} />,
   useData() {
-    const [ingresses] = Ingress.useList();
-    const [services] = Service.useList();
-    const [secrets] = Secret.useList();
+    const [ingresses] = Ingress.useList({ namespace: useNamespaces() });
+    const [services] = Service.useList({ namespace: useNamespaces() });
+    const [secrets] = Secret.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!ingresses || !services || !secrets) return null;
@@ -115,8 +116,8 @@ const networkPoliciesSource: GraphSource = {
   label: 'Network Policies',
   icon: <KubeIcon kind="NetworkPolicy" />,
   useData() {
-    const [networkPolicies] = NetworkPolicy.useList();
-    const [pods] = Pod.useList();
+    const [networkPolicies] = NetworkPolicy.useList({ namespace: useNamespaces() });
+    const [pods] = Pod.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!networkPolicies || !pods) return null;
@@ -144,7 +145,7 @@ const ingressClassesSource: GraphSource = {
   label: 'Ingress Classes',
   icon: <KubeIcon kind="Ingress" />,
   useData() {
-    const [ingressClasses] = IngressClass.useList();
+    const [ingressClasses] = IngressClass.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       return {

frontend/src/components/resourceMap/sources/definitions/securitySource.tsx

@@ -5,6 +5,7 @@ import Deployment from '../../../../lib/k8s/deployment';
 import Role from '../../../../lib/k8s/role';
 import RoleBinding from '../../../../lib/k8s/roleBinding';
 import ServiceAccount from '../../../../lib/k8s/serviceAccount';
+import { useNamespaces } from '../../../../redux/filterSlice';
 import { GraphEdge, GraphSource } from '../../graph/graphModel';
 import { getKindGroupColor, KubeIcon } from '../../kubeIcon/KubeIcon';
 import { makeKubeObjectNode, makeKubeToKubeEdge } from '../GraphSources';
@@ -14,7 +15,7 @@ const rolesSource: GraphSource = {
   label: 'Roles',
   icon: <KubeIcon kind="Role" />,
   useData() {
-    const [roles] = Role.useList();
+    const [roles] = Role.useList({ namespace: useNamespaces() });
 
     return useMemo(
       () =>
@@ -33,9 +34,9 @@ const roleBindingsSource: GraphSource = {
   label: 'Role Bindings',
   icon: <KubeIcon kind="RoleBinding" />,
   useData() {
-    const [roleBindings] = RoleBinding.useList();
-    const [roles] = Role.useList();
-    const [serviceAccounts] = ServiceAccount.useList();
+    const [roleBindings] = RoleBinding.useList({ namespace: useNamespaces() });
+    const [roles] = Role.useList({ namespace: useNamespaces() });
+    const [serviceAccounts] = ServiceAccount.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!roleBindings || !roles || !serviceAccounts) return null;
@@ -72,9 +73,9 @@ const serviceAccountsSource: GraphSource = {
   label: 'Service Accounts',
   icon: <KubeIcon kind="ServiceAccount" />,
   useData() {
-    const [serviceAccounts] = ServiceAccount.useList();
-    const [deployments] = Deployment.useList();
-    const [daemonSets] = DaemonSet.useList();
+    const [serviceAccounts] = ServiceAccount.useList({ namespace: useNamespaces() });
+    const [deployments] = Deployment.useList({ namespace: useNamespaces() });
+    const [daemonSets] = DaemonSet.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!serviceAccounts || !deployments || !daemonSets) return null;

frontend/src/components/resourceMap/sources/definitions/storageSource.tsx

@@ -2,6 +2,7 @@ import { Icon } from '@iconify/react';
 import { useMemo } from 'react';
 import PersistentVolumeClaim from '../../../../lib/k8s/persistentVolumeClaim';
 import Pod from '../../../../lib/k8s/pod';
+import { useNamespaces } from '../../../../redux/filterSlice';
 import { GraphEdge, GraphSource } from '../../graph/graphModel';
 import { getKindGroupColor, KubeIcon } from '../../kubeIcon/KubeIcon';
 import { makeKubeObjectNode, makeKubeToKubeEdge } from '../GraphSources';
@@ -11,8 +12,8 @@ const pvcSource: GraphSource = {
   label: 'PVCs',
   icon: <KubeIcon kind="PersistentVolumeClaim" />,
   useData() {
-    const [pvcs] = PersistentVolumeClaim.useList();
-    const [pods] = Pod.useList();
+    const [pvcs] = PersistentVolumeClaim.useList({ namespace: useNamespaces() });
+    const [pods] = Pod.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!pvcs || !pods) return null;

frontend/src/components/resourceMap/sources/definitions/workloadSource.tsx

@@ -10,6 +10,7 @@ import Pod from '../../../../lib/k8s/pod';
 import ReplicaSet from '../../../../lib/k8s/replicaSet';
 import Secret from '../../../../lib/k8s/secret';
 import StatefulSet from '../../../../lib/k8s/statefulSet';
+import { useNamespaces } from '../../../../redux/filterSlice';
 import { GraphEdge, GraphSource } from '../../graph/graphModel';
 import { getKindGroupColor, KubeIcon } from '../../kubeIcon/KubeIcon';
 import { kubeOwnersEdges, makeKubeObjectNode, makeKubeToKubeEdge } from '../GraphSources';
@@ -27,8 +28,8 @@ const podsSource: GraphSource = {
   label: 'Pods',
   icon: <KubeIcon kind="Pod" />,
   useData: () => {
-    const [pods] = Pod.useList();
-    const [nodes] = Node.useList();
+    const [pods] = Pod.useList({ namespace: useNamespaces() });
+    const [nodes] = Node.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!pods || !nodes) return null;
@@ -77,7 +78,7 @@ const deploymentsSource: GraphSource = {
   label: 'Deployments',
   icon: <KubeIcon kind="Deployment" />,
   useData() {
-    const [deployments] = Deployment.useList();
+    const [deployments] = Deployment.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!deployments) return null;
@@ -93,7 +94,7 @@ const cronJobSource: GraphSource = {
   label: 'CronJobs',
   icon: <KubeIcon kind="CronJob" />,
   useData() {
-    const [cronJobs] = CronJob.useList();
+    const [cronJobs] = CronJob.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!cronJobs) return null;
@@ -110,8 +111,8 @@ const jobsSource: GraphSource = {
   label: 'Jobs',
   icon: <KubeIcon kind="Job" />,
   useData() {
-    const [jobs] = Job.useList();
-    const [secrets] = Secret.useList();
+    const [jobs] = Job.useList({ namespace: useNamespaces() });
+    const [secrets] = Secret.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!jobs || !secrets) return null;
@@ -159,7 +160,7 @@ const replicaSetsSource: GraphSource = {
   label: 'Replica Sets',
   icon: <KubeIcon kind="ReplicaSet" />,
   useData() {
-    const [replicaSets] = ReplicaSet.useList();
+    const [replicaSets] = ReplicaSet.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!replicaSets) return null;
@@ -183,7 +184,7 @@ const statefulSetSource: GraphSource = {
   label: 'Stateful Sets',
   icon: <KubeIcon kind="StatefulSet" />,
   useData() {
-    const [statefulSets] = StatefulSet.useList();
+    const [statefulSets] = StatefulSet.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!statefulSets) return null;
@@ -199,7 +200,7 @@ const daemonSetSource: GraphSource = {
   label: 'Daemon Sets',
   icon: <KubeIcon kind="DaemonSet" />,
   useData() {
-    const [daemonSets] = DaemonSet.useList();
+    const [daemonSets] = DaemonSet.useList({ namespace: useNamespaces() });
 
     return useMemo(() => {
       if (!daemonSets) return null;

frontend/src/components/resourceQuota/List.tsx

@@ -4,9 +4,9 @@ import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ApiError } from '../../lib/k8s/apiProxy';
 import ResourceQuota from '../../lib/k8s/resourceQuota';
+import { useNamespaces } from '../../redux/filterSlice';
 import { SimpleTableProps } from '../common';
 import ResourceListView from '../common/Resource/ResourceListView';
-import { useNamespaces } from '../../redux/filterSlice';
 
 const WrappingBox = styled(Box)(({ theme }) => ({
   display: 'flex',

frontend/src/components/role/BindingList.tsx

@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next';
 import ClusterRoleBinding from '../../lib/k8s/clusterRoleBinding';
 import RoleBinding from '../../lib/k8s/roleBinding';
 import { combineClusterListErrors, getClusterGroup } from '../../lib/util';
+import { useNamespaces } from '../../redux/filterSlice';
 import { Link } from '../common';
 import LabelListItem from '../common/LabelListItem';
 import ResourceListView from '../common/Resource/ResourceListView';
-import { useNamespaces } from '../../redux/filterSlice';
 
 function RoleLink(props: { role: string; namespace?: string }) {
   const { role, namespace } = props;

frontend/src/components/role/List.tsx

@@ -4,10 +4,10 @@ import { useClusterGroup } from '../../lib/k8s';
 import ClusterRole from '../../lib/k8s/clusterRole';
 import Role from '../../lib/k8s/role';
 import { combineClusterListErrors } from '../../lib/util';
+import { useNamespaces } from '../../redux/filterSlice';
 import Link from '../common/Link';
 import ResourceListView from '../common/Resource/ResourceListView';
 import { ColumnType } from '../common/Resource/ResourceTable';
-import { useNamespaces } from '../../redux/filterSlice';
 
 export default function RoleList() {
   const { t } = useTranslation('glossary');

frontend/src/redux/filterSlice.ts

@@ -1,9 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { JSONPath } from 'jsonpath-plus';
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import { KubeEvent } from '../lib/k8s/event';
 import { KubeObjectInterface } from '../lib/k8s/KubeObject';
-import { useSelector } from 'react-redux';
-import { useMemo } from 'react';
 
 export interface FilterState {
   /** The namespaces to filter on. */