Use BadgeNavigatable for pod and node selectors

Signed-off-by: devodev <abalexandrebarone@gmail.com>

src/renderer/components/+network-services/service-details.tsx

@@ -24,7 +24,7 @@ import "./service-details.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
-import { Badge } from "../badge";
+import { Badge, BadgeNavigatable } from "../badge";
 import type { KubeObjectDetailsProps } from "../kube-object";
 import type { Service } from "../../api/endpoints";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
@@ -61,7 +61,7 @@ export class ServiceDetails extends React.Component<Props> {
         <KubeObjectMeta object={service}/>
 
         <DrawerItem name="Selector" labelsOnly>
-          {service.getSelector().map(selector => <Badge key={selector} label={selector}/>)}
+          {service.getSelector().map(selector => <BadgeNavigatable key={selector} searchFilter={selector} resource="pods"/>)}
         </DrawerItem>
 
         <DrawerItem name="Type">

src/renderer/components/+workloads-daemonsets/daemonset-details.tsx

@@ -24,7 +24,7 @@ import "./daemonset-details.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
-import { Badge } from "../badge";
+import { BadgeNavigatable } from "../badge";
 import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
@@ -83,16 +83,12 @@ export class DaemonSetDetails extends React.Component<Props> {
         <KubeObjectMeta object={daemonSet}/>
         {selectors.length > 0 &&
         <DrawerItem name="Selector" labelsOnly>
-          {
-            selectors.map(label => <Badge key={label} label={label}/>)
-          }
+          {selectors.map(label => <BadgeNavigatable key={label} searchFilter={label} resource="pods"/>)}
         </DrawerItem>
         }
         {nodeSelector.length > 0 &&
         <DrawerItem name="Node Selector" labelsOnly>
-          {
-            nodeSelector.map(label => (<Badge key={label} label={label}/>))
-          }
+          {nodeSelector.map(label => <BadgeNavigatable key={label} searchFilter={label} resource="nodes"/>)}
         </DrawerItem>
         }
         {images.length > 0 &&

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -25,7 +25,7 @@ import React from "react";
 import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
-import { Badge } from "../badge";
+import { Badge, BadgeNavigatable } from "../badge";
 import type { Deployment } from "../../api/endpoints";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
@@ -91,18 +91,12 @@ export class DeploymentDetails extends React.Component<Props> {
         </DrawerItem>
         {selectors.length > 0 &&
         <DrawerItem name="Selector" labelsOnly>
-          {
-            selectors.map(label => <Badge key={label} label={label}/>)
-          }
+          {selectors.map(label => <BadgeNavigatable key={label} searchFilter={label} resource="pods"/>)}
         </DrawerItem>
         }
         {nodeSelector.length > 0 &&
         <DrawerItem name="Node Selector">
-          {
-            nodeSelector.map(label => (
-              <Badge key={label} label={label}/>
-            ))
-          }
+          {nodeSelector.map(label => <BadgeNavigatable key={label} searchFilter={label} resource="nodes"/>)}
         </DrawerItem>
         }
         <DrawerItem name="Strategy Type">

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -28,7 +28,7 @@ import { Link } from "react-router-dom";
 import { autorun, observable, reaction, makeObservable } from "mobx";
 import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi } from "../../api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
-import { Badge } from "../badge";
+import { Badge, BadgeNavigatable } from "../badge";
 import { boundMethod, cssNames, interval, toJS } from "../../utils";
 import { PodDetailsContainer } from "./pod-details-container";
 import { PodDetailsAffinities } from "./pod-details-affinities";
@@ -152,11 +152,7 @@ export class PodDetails extends React.Component<Props> {
         }
         {nodeSelector.length > 0 &&
         <DrawerItem name="Node Selector">
-          {
-            nodeSelector.map(label => (
-              <Badge key={label} label={label}/>
-            ))
-          }
+          {nodeSelector.map(label => <BadgeNavigatable key={label} searchFilter={label} resource="nodes"/>)}
         </DrawerItem>
         }
         <PodDetailsTolerations workload={pod}/>

src/renderer/components/+workloads-replicasets/replicaset-details.tsx

@@ -23,7 +23,7 @@ import "./replicaset-details.scss";
 import React from "react";
 import { reaction } from "mobx";
 import { DrawerItem } from "../drawer";
-import { Badge } from "../badge";
+import { BadgeNavigatable } from "../badge";
 import { replicaSetStore } from "./replicasets.store";
 import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
@@ -83,16 +83,12 @@ export class ReplicaSetDetails extends React.Component<Props> {
         <KubeObjectMeta object={replicaSet}/>
         {selectors.length > 0 &&
         <DrawerItem name="Selector" labelsOnly>
-          {
-            selectors.map(label => <Badge key={label} label={label}/>)
-          }
+          {selectors.map(label => <BadgeNavigatable key={label} searchFilter={label} resource="pods"/>)}
         </DrawerItem>
         }
         {nodeSelector.length > 0 &&
         <DrawerItem name="Node Selector" labelsOnly>
-          {
-            nodeSelector.map(label => <Badge key={label} label={label}/>)
-          }
+          {nodeSelector.map(label => <BadgeNavigatable key={label} searchFilter={label} resource="nodes"/>)}
         </DrawerItem>
         }
         {images.length > 0 &&

src/renderer/components/+workloads-statefulsets/statefulset-details.tsx

@@ -24,7 +24,7 @@ import "./statefulset-details.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { reaction } from "mobx";
-import { Badge } from "../badge";
+import { BadgeNavigatable } from "../badge";
 import { DrawerItem } from "../drawer";
 import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
@@ -82,18 +82,12 @@ export class StatefulSetDetails extends React.Component<Props> {
         <KubeObjectMeta object={statefulSet}/>
         {selectors.length &&
         <DrawerItem name="Selector" labelsOnly>
-          {
-            selectors.map(label => <Badge key={label} label={label}/>)
-          }
+          {selectors.map(label => <BadgeNavigatable key={label} searchFilter={label} resource="pods"/>)}
         </DrawerItem>
         }
         {nodeSelector.length > 0 &&
         <DrawerItem name="Node Selector" labelsOnly>
-          {
-            nodeSelector.map(label => (
-              <Badge key={label} label={label}/>
-            ))
-          }
+          {nodeSelector.map(label => <BadgeNavigatable key={label} searchFilter={label} resource="nodes"/>)}
         </DrawerItem>
         }
         {images.length > 0 &&