feat: make label values matching URLs clickable

get-glu · Nov 21, 2024 · e652910 · e652910
1 parent 8154b6b
commit e652910
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git a/examples/fakedata/main.go b/examples/fakedata/main.go
@@ -119,7 +119,7 @@ func run(ctx context.Context) error {
 		fdStagingPhase, err := phases.New(
 			glu.Name("staging",
 				glu.Label("environment", "staging"),
-				glu.Label("domain", "stage.billing.mycorp.com"),
+				glu.Label("domain", "http://stage.billing.mycorp.com"),
 			),
 			fdPipeline,
 			fdStagingSource,
@@ -134,7 +134,7 @@ func run(ctx context.Context) error {
 		phases.New(
 			glu.Name("production",
 				glu.Label("environment", "production"),
-				glu.Label("domain", "prod.billing.mycorp.com"),
+				glu.Label("domain", "https://prod.billing.mycorp.com"),
 				glu.Label("ssl", "enabled"),
 			),
 			fdPipeline,

diff --git a/ui/src/components/label.tsx b/ui/src/components/label.tsx
@@ -0,0 +1,25 @@
+import { getLabelColor } from '@/lib/utils';
+import { Badge } from './ui/badge';
+
+interface LabelProps {
+  labelKey: string;
+  value: string;
+}
+
+export function Label({ labelKey, value }: LabelProps) {
+  return (
+    <Badge
+      key={`${labelKey}-${value}`}
+      className={`whitespace-nowrap text-xs font-light ${getLabelColor(labelKey, value)}`}
+    >
+      {labelKey}:{' '}
+      {value.match('^https?://.*') ? (
+        <a className="ml-1 hover:underline" href={value} target="_blank">
+          {value}
+        </a>
+      ) : (
+        value
+      )}
+    </Badge>
+  );
+}
diff --git a/ui/src/components/node-panel.tsx b/ui/src/components/node-panel.tsx
@@ -4,6 +4,7 @@ import { Package, GitBranch, ChevronDown, ChevronUp } from 'lucide-react';
 import { getLabelColor } from '@/lib/utils';
 import { Button } from './ui/button';
 import { cn } from '@/lib/utils';
+import { Label } from './label';
 
 interface NodePanelProps {
   node: PhaseNode | null;
@@ -68,12 +69,7 @@ export function NodePanel({ node, isExpanded, onToggle }: NodePanelProps) {
               <div className="mt-2 flex flex-wrap gap-2">
                 {node.data.labels &&
                   Object.entries(node.data.labels).map(([key, value]) => (
-                    <Badge
-                      key={`${key}-${value}`}
-                      className={`whitespace-nowrap text-xs font-light ${getLabelColor(key, value)}`}
-                    >
-                      {key}: {value}
-                    </Badge>
+                    <Label labelKey={key} value={value} />
                   ))}
               </div>
             </div>

diff --git a/ui/src/components/node.tsx b/ui/src/components/node.tsx
@@ -16,6 +16,7 @@ import { Button } from '@/components/ui/button';
 import { useState } from 'react';
 import { ANNOTATION_OCI_IMAGE_URL } from '@/types/metadata';
 import { getLabelColor } from '@/lib/utils';
+import { Label } from './label';
 
 const PhaseNode = ({ data }: NodeProps<PhaseNodeType>) => {
   const getIcon = () => {
@@ -90,12 +91,7 @@ const PhaseNode = ({ data }: NodeProps<PhaseNodeType>) => {
           Object.entries(data.labels).length > 0 &&
           Object.entries(data.labels).map(([key, value]) => (
             <div key={`${key}-${value}`} className="mb-2 flex">
-              <Badge
-                key={`${key}-${value}`}
-                className={`whitespace-nowrap text-xs font-light ${getLabelColor(key, value)}`}
-              >
-                {key}: {value}
-              </Badge>
+              <Label labelKey={key} value={value} />
             </div>
           ))}
       </div>