Change Cursor Style for Clickable Badges (#56)

Author: ricoberger

src/datasource/components/kubernetes/overview/Pod.tsx

@@ -8,7 +8,8 @@ import {
   V1Pod,
   V1Probe,
 } from '@kubernetes/client-node';
-import { Badge, Box, InteractiveTable, Stack } from '@grafana/ui';
+import { Badge, Box, InteractiveTable, Stack, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
 
 import {
   DefinitionList,
@@ -23,6 +24,14 @@ interface Props {
 }
 
 export function Pod({ datasource, namespace, manifest }: Props) {
+  const styles = useStyles2(() => {
+    return {
+      badge: css({
+        cursor: 'pointer',
+      }),
+    };
+  });
+
   const [selectedNode, setSelectedNode] = useState<string>('');
 
   const { phase, reason, isReady, shouldReady, restarts } = useMemo(() => {
@@ -87,6 +96,7 @@ export function Pod({ datasource, namespace, manifest }: Props) {
         <DefinitionItem label="Node">
           {manifest.spec?.nodeName ? (
             <Badge
+              className={styles.badge}
               color="blue"
               onClick={() => setSelectedNode(manifest.spec!.nodeName!)}
               text={manifest.spec.nodeName}

src/datasource/components/shared/details/Metadata.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { Badge } from '@grafana/ui';
+import { Badge, useStyles2 } from '@grafana/ui';
 import { V1OwnerReference } from '@kubernetes/client-node';
+import { css } from '@emotion/css';
 
 import {
   DefinitionItem,
@@ -19,6 +20,14 @@ interface Props {
 }
 
 export function Metadata({ datasource, namespace, name, manifest }: Props) {
+  const styles = useStyles2(() => {
+    return {
+      badge: css({
+        cursor: 'pointer',
+      }),
+    };
+  });
+
   const [selectedOwner, setSelectedOwner] = useState<
     V1OwnerReference | undefined
   >(undefined);
@@ -68,6 +77,7 @@ export function Metadata({ datasource, namespace, name, manifest }: Props) {
             {manifest.metadata.ownerReferences.map((owner, index) => (
               <Badge
                 key={index}
+                className={styles.badge}
                 color="blue"
                 onClick={() => setSelectedOwner(owner)}
                 text={`${owner.kind}: ${owner.name}`}

src/datasource/components/shared/details/Selector.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { V1LabelSelector } from '@kubernetes/client-node';
-import { Badge } from '@grafana/ui';
+import { Badge, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
 
 import { DefinitionItem } from '../../shared/definitionlist/DefinitionList';
 import { Resources } from './Resources';
@@ -12,6 +13,14 @@ interface Props {
 }
 
 export function Selector({ datasource, namespace, selector }: Props) {
+  const styles = useStyles2(() => {
+    return {
+      badge: css({
+        cursor: 'pointer',
+      }),
+    };
+  });
+
   const [selectedSelector, setSelectedSelector] = useState<string>('');
 
   return (
@@ -21,6 +30,7 @@ export function Selector({ datasource, namespace, selector }: Props) {
           Object.keys(selector.matchLabels).map((key) => (
             <Badge
               key={key}
+              className={styles.badge}
               color="blue"
               onClick={() =>
                 setSelectedSelector(