+
+
-
- );
-}
diff --git a/ui/src/assets/stu.png b/ui/src/assets/stu.png
new file mode 100644
index 0000000..2a08341
Binary files /dev/null and b/ui/src/assets/stu.png differ
diff --git a/ui/src/components/header.tsx b/ui/src/components/header.tsx
new file mode 100644
index 0000000..ea10a7d
--- /dev/null
+++ b/ui/src/components/header.tsx
@@ -0,0 +1,31 @@
+import { useAppSelector } from '@/store/hooks';
+import { RootState } from '@/store';
+import { ThemeToggle } from './theme-toggle';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { SidebarTrigger } from './ui/sidebar';
+
+export function Header({ className }: { className?: string }) {
+ const { data: system, loading } = useAppSelector((state: RootState) => state.system);
+ const selectedPipeline = useAppSelector((state: RootState) => state.pipelines.selectedPipeline);
+
+ return (
+
-
-
-
-
-
-
-
-
- {key}: {(system.labels ?? {})[key]}
-
- );
- })}
-
- )}
-
- )}
- {system.name}
- {system.labels && ( - <> - {Object.keys(system.labels).map((key: string) => { - return ( -
-
-
- {pipelines &&
- pipelines.map((pipeline: PipelineType) => (
-
-
- ))}
-
-
+
+ );
+}
diff --git a/ui/src/components/node-panel.tsx b/ui/src/components/node-panel.tsx
new file mode 100644
index 0000000..f824de1
--- /dev/null
+++ b/ui/src/components/node-panel.tsx
@@ -0,0 +1,85 @@
+import { PhaseNode } from '@/types/flow';
+import { Badge } from './ui/badge';
+import { Package, GitBranch, ChevronDown, ChevronUp } from 'lucide-react';
+import { getLabelColor } from '@/lib/utils';
+import { Button } from './ui/button';
+import { cn } from '@/lib/utils';
+
+interface NodePanelProps {
+ node: PhaseNode | null;
+ isExpanded: boolean;
+ onToggle: () => void;
+}
+
+export function NodePanel({ node, isExpanded, onToggle }: NodePanelProps) {
+ if (!node) return null;
+
+ const getIcon = () => {
+ switch (node.data.source.name ?? '') {
+ case 'oci':
+ return
+
+
+
+
+ {loading ? 'Loading...' : system?.name}
+ {selectedPipeline && (
+ <>
+
+
+
+ );
+}
diff --git a/ui/src/components/node.tsx b/ui/src/components/node.tsx
index 752f036..f6cf834 100644
--- a/ui/src/components/node.tsx
+++ b/ui/src/components/node.tsx
@@ -15,6 +15,7 @@ import {
import { Button } from '@/components/ui/button';
import { useState } from 'react';
import { ANNOTATION_OCI_IMAGE_URL } from '@/types/metadata';
+import { getLabelColor } from '@/lib/utils';
const PhaseNode = ({ data }: NodeProps
+
+
+
+ {getIcon()}
+
+
+ {node.data.name}
+
+
+
+
+
+
+
+ Details
+
+
+
+ Pipeline:
+ {node.data.pipeline}
+
+
+ Depends on:
+ {node.data.depends_on || 'None'}
+
+
+ Digest:
+ {node.data.digest}
+
+
+ {node.data.labels && Object.keys(node.data.labels).length > 0 && (
+
+
+
+ )}
+ Labels
+
+ {node.data.labels &&
+ Object.entries(node.data.labels).map(([key, value]) => (
+
+ {key}: {value}
+
+ ))}
+
+
+
@@ -119,24 +120,4 @@ const PhaseNode = ({ data }: NodeProps) => {
);
};
-function getLabelColor(key: string, value: string): string {
- const hash = `${key}:${value}`.split('').reduce((acc, char) => {
- return char.charCodeAt(0) + ((acc << 5) - acc);
- }, 0);
-
- const colors = [
- 'bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-800 dark:text-red-200',
- 'bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800 dark:text-blue-200',
- 'bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:hover:bg-green-800 dark:text-green-200',
- 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-900 dark:hover:bg-yellow-800 dark:text-yellow-200',
- 'bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900 dark:hover:bg-purple-800 dark:text-purple-200',
- 'bg-pink-100 text-pink-800 hover:bg-pink-200 dark:bg-pink-900 dark:hover:bg-pink-800 dark:text-pink-200',
- 'bg-indigo-100 text-indigo-800 hover:bg-indigo-200 dark:bg-indigo-900 dark:hover:bg-indigo-800 dark:text-indigo-200',
- 'bg-orange-100 text-orange-800 hover:bg-orange-200 dark:bg-orange-900 dark:hover:bg-orange-800 dark:text-orange-200',
- 'bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-200'
- ];
-
- return colors[Math.abs(hash) % colors.length];
-}
-
export { PhaseNode };
diff --git a/ui/src/components/pipeline.tsx b/ui/src/components/pipeline.tsx
index 0f5fd38..f13da0c 100644
--- a/ui/src/components/pipeline.tsx
+++ b/ui/src/components/pipeline.tsx
@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react';
import {
+ Node,
ReactFlow,
Controls,
Background,
@@ -15,8 +16,7 @@ import { PhaseNode as PhaseNodeComponent } from '@/components/node';
import { Pipeline as PipelineType } from '@/types/pipeline';
import { FlowPipeline, PipelineEdge, PhaseNode, PipelineNode } from '@/types/flow';
import Dagre from '@dagrejs/dagre';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { ChevronDown } from 'lucide-react';
+import { NodePanel } from '@/components/node-panel';
const nodeTypes = {
phase: PhaseNodeComponent
@@ -25,7 +25,8 @@ const nodeTypes = {
export function Pipeline(props: { pipeline: PipelineType }) {
const { theme } = useTheme();
const { fitView, getNodes, getEdges } = useReactFlow();
- const [isOpen, setIsOpen] = useState(true);
+ const [selectedNode, setSelectedNode] = useState(null);
+ const [isPanelExpanded, setIsPanelExpanded] = useState(true);
const { pipeline } = props;
const { nodes: initNodes, edges: initEdges } = getElements(pipeline);
@@ -50,50 +51,47 @@ export function Pipeline(props: { pipeline: PipelineType }) {
return () => window.removeEventListener('resize', handleResize);
}, [nodes, edges, fitView]);
+ const onNodeClick = (event: React.MouseEvent, node: Node) => {
+ setSelectedNode(node as PhaseNode);
+ };
+
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No pipeline found.
+
+ {loading ? (
+ Loading pipelines...
+ ) : (
+ pipelines?.map((pipeline: Pipeline) => (
+ {
+ setValue(currentValue === value ? '' : currentValue);
+ setOpen(false);
+ navigate(`/pipelines/${currentValue}`);
+ }}
+ className="truncate"
+ >
+
+ ))
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/ui/src/components/ui/command.tsx b/ui/src/components/ui/command.tsx
new file mode 100644
index 0000000..2ee33a0
--- /dev/null
+++ b/ui/src/components/ui/command.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+
+const Command = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandShortcut,
+ CommandSeparator
+};
diff --git a/ui/src/components/ui/popover.tsx b/ui/src/components/ui/popover.tsx
new file mode 100644
index 0000000..f224d5e
--- /dev/null
+++ b/ui/src/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+
+
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/ui/src/components/ui/separator.tsx b/ui/src/components/ui/separator.tsx
new file mode 100644
index 0000000..89b9167
--- /dev/null
+++ b/ui/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '@/lib/utils';
+
+const Separator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ (null);
+
+function useSidebar() {
+ const context = React.useContext(SidebarContext);
+ if (!context) {
+ throw new Error('useSidebar must be used within a SidebarProvider.');
+ }
+
+ return context;
+}
+
+const SidebarProvider = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<'div'> & {
+ defaultOpen?: boolean;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+ }
+>(
+ (
+ {
+ defaultOpen = true,
+ open: openProp,
+ onOpenChange: setOpenProp,
+ className,
+ style,
+ children,
+ ...props
+ },
+ ref
+ ) => {
+ const isMobile = useIsMobile();
+ const [openMobile, setOpenMobile] = React.useState(false);
+
+ // This is the internal state of the sidebar.
+ // We use openProp and setOpenProp for control from outside the component.
+ const [_open, _setOpen] = React.useState(defaultOpen);
+ const open = openProp ?? _open;
+ const setOpen = React.useCallback(
+ (value: boolean | ((value: boolean) => boolean)) => {
+ const openState = typeof value === 'function' ? value(open) : value;
+ if (setOpenProp) {
+ setOpenProp(openState);
+ } else {
+ _setOpen(openState);
+ }
+
+ // This sets the cookie to keep the sidebar state.
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+ },
+ [setOpenProp, open]
+ );
+
+ // Helper to toggle the sidebar.
+ const toggleSidebar = React.useCallback(() => {
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+ }, [isMobile, setOpen, setOpenMobile]);
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+ event.preventDefault();
+ toggleSidebar();
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [toggleSidebar]);
+
+ // We add a state so that we can do data-state="expanded" or "collapsed".
+ // This makes it easier to style the sidebar with Tailwind classes.
+ const state = open ? 'expanded' : 'collapsed';
+
+ const contextValue = React.useMemo(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar
+ }),
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+ );
+
+ return (
+
+
+
+
+ );
+ }
+);
+SidebarProvider.displayName = 'SidebarProvider';
+
+const Sidebar = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<'div'> & {
+ side?: 'left' | 'right';
+ variant?: 'sidebar' | 'floating' | 'inset';
+ collapsible?: 'offcanvas' | 'icon' | 'none';
+ }
+>(
+ (
+ {
+ side = 'left',
+ variant = 'sidebar',
+ collapsible = 'offcanvas',
+ className,
+ children,
+ ...props
+ },
+ ref
+ ) => {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+ if (collapsible === 'none') {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+ ,
+ React.ComponentProps
+>(({ className, onClick, ...props }, ref) => {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+
+ );
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+
+const SidebarRail = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+
+ );
+ }
+);
+SidebarRail.displayName = 'SidebarRail';
+
+const SidebarInset = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+SidebarInset.displayName = 'SidebarInset';
+
+const SidebarInput = React.forwardRef<
+ React.ElementRef,
+ React.ComponentProps
+>(({ className, ...props }, ref) => {
+ return (
+
+ );
+});
+SidebarInput.displayName = 'SidebarInput';
+
+const SidebarHeader = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+SidebarHeader.displayName = 'SidebarHeader';
+
+const SidebarFooter = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+SidebarFooter.displayName = 'SidebarFooter';
+
+const SidebarSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentProps
+>(({ className, ...props }, ref) => {
+ return (
+ >(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+SidebarContent.displayName = 'SidebarContent';
+
+const SidebarGroup = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+SidebarGroup.displayName = 'SidebarGroup';
+
+const SidebarGroupLabel = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<'div'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'div';
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0',
+ 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+ className
+ )}
+ {...props}
+ />
+ );
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+
+const SidebarGroupAction = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps<'button'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button';
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0',
+ // Increases the hit area of the button on mobile.
+ 'after:absolute after:-inset-2 after:md:hidden',
+ 'group-data-[collapsible=icon]:hidden',
+ className
+ )}
+ {...props}
+ />
+ );
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+
+const SidebarGroupContent = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+
+const SidebarMenu = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+ >(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+
+const sidebarMenuButtonVariants = cva(
+ 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+ {
+ variants: {
+ variant: {
+ default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+ outline:
+ 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
+ },
+ size: {
+ default: 'h-8 text-sm',
+ sm: 'h-7 text-xs',
+ lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0'
+ }
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default'
+ }
+ }
+);
+
+const SidebarMenuButton = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps<'button'> & {
+ asChild?: boolean;
+ isActive?: boolean;
+ tooltip?: string | React.ComponentProps;
+ } & VariantProps
+>(
+ (
+ {
+ asChild = false,
+ isActive = false,
+ variant = 'default',
+ size = 'default',
+ tooltip,
+ className,
+ ...props
+ },
+ ref
+ ) => {
+ const Comp = asChild ? Slot : 'button';
+ const { isMobile, state } = useSidebar();
+
+ const button = (
+
+ {button}
+
+ );
+ }
+);
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+
+const SidebarMenuAction = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps<'button'> & {
+ asChild?: boolean;
+ showOnHover?: boolean;
+ }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button';
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0',
+ // Increases the hit area of the button on mobile.
+ 'after:absolute after:-inset-2 after:md:hidden',
+ 'peer-data-[size=sm]/menu-button:top-1',
+ 'peer-data-[size=default]/menu-button:top-1.5',
+ 'peer-data-[size=lg]/menu-button:top-2.5',
+ 'group-data-[collapsible=icon]:hidden',
+ showOnHover &&
+ 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+ className
+ )}
+ {...props}
+ />
+ );
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+
+const SidebarMenuBadge = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+
+const SidebarMenuSkeleton = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<'div'> & {
+ showIcon?: boolean;
+ }
+>(({ className, showIcon = false, ...props }, ref) => {
+ // Random width between 50 to 90%.
+ const width = React.useMemo(() => {
+ return `${Math.floor(Math.random() * 40) + 50}%`;
+ }, []);
+
+ return (
+ >(
+ ({ className, ...props }, ref) => (
+ >(
+ ({ ...props }, ref) =>
+);
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+
+const SidebarMenuSubButton = React.forwardRef<
+ HTMLAnchorElement,
+ React.ComponentProps<'a'> & {
+ asChild?: boolean;
+ size?: 'sm' | 'md';
+ isActive?: boolean;
+ }
+>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'a';
+
+ return (
+ svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+ 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+ size === 'sm' && 'text-xs',
+ size === 'md' && 'text-sm',
+ 'group-data-[collapsible=icon]:hidden',
+ className
+ )}
+ {...props}
+ />
+ );
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar
+};
diff --git a/ui/src/components/ui/skeleton.tsx b/ui/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..f0a2781
--- /dev/null
+++ b/ui/src/components/ui/skeleton.tsx
@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes) {
+ return ;
+}
+
+export { Skeleton };
diff --git a/ui/src/components/ui/tooltip.tsx b/ui/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..e015b75
--- /dev/null
+++ b/ui/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+ //
+);
diff --git a/ui/src/lib/utils.ts b/ui/src/lib/utils.ts
index 2819a83..3b53dd4 100644
--- a/ui/src/lib/utils.ts
+++ b/ui/src/lib/utils.ts
@@ -4,3 +4,23 @@ import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
+
+export function getLabelColor(key: string, value: string): string {
+ const hash = `${key}:${value}`.split('').reduce((acc, char) => {
+ return char.charCodeAt(0) + ((acc << 5) - acc);
+ }, 0);
+
+ const colors = [
+ 'bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-800 dark:text-red-200',
+ 'bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800 dark:text-blue-200',
+ 'bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:hover:bg-green-800 dark:text-green-200',
+ 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-900 dark:hover:bg-yellow-800 dark:text-yellow-200',
+ 'bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900 dark:hover:bg-purple-800 dark:text-purple-200',
+ 'bg-pink-100 text-pink-800 hover:bg-pink-200 dark:bg-pink-900 dark:hover:bg-pink-800 dark:text-pink-200',
+ 'bg-indigo-100 text-indigo-800 hover:bg-indigo-200 dark:bg-indigo-900 dark:hover:bg-indigo-800 dark:text-indigo-200',
+ 'bg-orange-100 text-orange-800 hover:bg-orange-200 dark:bg-orange-900 dark:hover:bg-orange-800 dark:text-orange-200',
+ 'bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-200'
+ ];
+
+ return colors[Math.abs(hash) % colors.length];
+}
diff --git a/ui/src/store/hooks.ts b/ui/src/store/hooks.ts
new file mode 100644
index 0000000..81bfc17
--- /dev/null
+++ b/ui/src/store/hooks.ts
@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './index';
+
+export const useAppDispatch = () => useDispatch();
+export const useAppSelector: TypedUseSelectorHook = useSelector;
diff --git a/ui/src/store/index.ts b/ui/src/store/index.ts
new file mode 100644
index 0000000..26a26f7
--- /dev/null
+++ b/ui/src/store/index.ts
@@ -0,0 +1,18 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { systemSlice, SystemState } from './systemSlice';
+import { pipelinesSlice, PipelinesState } from './pipelinesSlice';
+
+export interface StoreState {
+ system: SystemState;
+ pipelines: PipelinesState;
+}
+
+export const store = configureStore({
+ reducer: {
+ system: systemSlice.reducer,
+ pipelines: pipelinesSlice.reducer
+ }
+});
+
+export type RootState = StoreState;
+export type AppDispatch = typeof store.dispatch;
diff --git a/ui/src/store/pipelinesSlice.ts b/ui/src/store/pipelinesSlice.ts
new file mode 100644
index 0000000..7e562ba
--- /dev/null
+++ b/ui/src/store/pipelinesSlice.ts
@@ -0,0 +1,61 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import { listPipelines } from '@/services/api';
+import { RootState } from '.';
+import { Pipeline } from '@/types/pipeline';
+
+export const fetchPipelines = createAsyncThunk('pipelines/fetchPipelines', async () => {
+ return await listPipelines();
+});
+
+interface PipelinesState {
+ data: Pipeline[] | null;
+ loading: boolean;
+ error: string | null;
+ selectedPipeline: Pipeline | null;
+}
+
+const initialState: PipelinesState = {
+ data: null,
+ loading: false,
+ error: null,
+ selectedPipeline: null
+};
+
+export const pipelinesSlice = createSlice({
+ name: 'pipelines',
+ initialState,
+ reducers: {
+ setSelectedPipeline: (state, action: PayloadAction) => {
+ state.selectedPipeline = action.payload;
+ }
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchPipelines.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchPipelines.fulfilled, (state, action) => {
+ state.loading = false;
+ state.data = action.payload;
+ })
+ .addCase(fetchPipelines.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.error.message || 'Failed to fetch pipelines';
+ });
+ }
+});
+
+export const selectPipelineByName = (state: RootState, name?: string): Pipeline | undefined => {
+ if (!name) return undefined;
+ return state.pipelines.data?.find((pipeline: Pipeline) => pipeline.name === name);
+};
+
+export const selectSelectedPipeline = (state: RootState): Pipeline | null =>
+ state.pipelines.selectedPipeline;
+
+export const { setSelectedPipeline } = pipelinesSlice.actions;
+
+export default pipelinesSlice.reducer;
+
+export type { PipelinesState };
diff --git a/ui/src/store/systemSlice.ts b/ui/src/store/systemSlice.ts
new file mode 100644
index 0000000..4ba49e8
--- /dev/null
+++ b/ui/src/store/systemSlice.ts
@@ -0,0 +1,49 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import { getSystem } from '@/services/api';
+
+export const fetchSystem = createAsyncThunk('system/fetchSystem', async () => {
+ return await getSystem();
+});
+
+interface SystemType {
+ name: string;
+ labels?: Record;
+ // add other system properties you need
+}
+
+interface SystemState {
+ data: SystemType | null;
+ loading: boolean;
+ error: string | null;
+}
+
+const initialState: SystemState = {
+ data: null,
+ loading: false,
+ error: null
+};
+
+export const systemSlice = createSlice({
+ name: 'system',
+ initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchSystem.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchSystem.fulfilled, (state, action) => {
+ state.loading = false;
+ state.data = action.payload;
+ })
+ .addCase(fetchSystem.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.error.message || 'Failed to fetch system';
+ });
+ }
+});
+
+export default systemSlice.reducer;
+
+export type { SystemType, SystemState };
-
-
-
-
+ setIsPanelExpanded(!isPanelExpanded)}
+ />
+
);
}
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
new file mode 100644
index 0000000..3f12387
--- /dev/null
+++ b/ui/src/components/sidebar.tsx
@@ -0,0 +1,133 @@
+import { useAppSelector } from '@/store/hooks';
+import { RootState } from '@/store/index';
+import { Button } from '@/components/ui/button';
+import stu from '@/assets/stu.png';
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+import { useState } from 'react';
+import {
+ Sidebar as SidebarComponent,
+ SidebarContent,
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarMenu,
+ SidebarMenuItem
+} from '@/components/ui/sidebar';
+import { Check, ChevronsUpDown, BookOpen, Github } from 'lucide-react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Pipeline } from '@/types/pipeline';
+
+export function Sidebar() {
+ const navigate = useNavigate();
+ const [open, setOpen] = useState(false);
+ const [value, setValue] = useState('');
+ const { data: pipelines, loading } = useAppSelector((state: RootState) => state.pipelines);
+
+ return (
+
+
+
+
+
+ 
+
+
+ Glu
+
+
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+ {children}
+
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ );
+ }
+);
+Sidebar.displayName = 'Sidebar';
+
+const SidebarTrigger = React.forwardRef<
+ React.ElementRef
+
+
+ {children}
+
+
+ {showIcon &&
+ );
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+
+const SidebarMenuSub = React.forwardRef