konduktor-nightly 0.1.0.dev20251128104812__py3-none-any.whl

konduktor/dashboard/frontend/app/components/Grafana.jsx

@@ -0,0 +1,66 @@
+'use client'
+import { useState, useRef } from 'react';
+import BarLoader from "react-spinners/BarLoader";
+
+
+function Grafana() {
+
+    const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const iframeRef = useRef(null);
+  
+    const handleLoad = () => {
+        setIsIframeLoaded(true);
+        setIsError(false);
+    };
+
+    const handleError = () => {
+        setIsError(true);
+        setIsIframeLoaded(false);
+    };
+
+    return (
+        <div>
+            {!isIframeLoaded ?
+                <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', marginTop: '48px' }}>
+                    <p style={{ fontFamily: 'Poppins', fontSize: '22px', marginBottom: '24px' }}>Loading Grafana Konduktor Dashboard</p>
+                    <BarLoader
+                        height={8}
+                        width={400}
+                        aria-label="Loading Spinner"
+                    />
+                    <p style={{ fontFamily: 'Poppins', fontSize: '18px', marginTop: '24px' }}>If stuck loading, check port forwarding for errors</p>
+                    <p style={{ fontFamily: 'Poppins', fontSize: '12px' }}>kubectl port-forward svc/kube-prometheus-stack-grafana 3000:80 -n prometheus</p>
+                </div>
+            :
+                null    
+            }
+            {isError ?
+                <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', marginTop: '48px' }}>
+                    <p style={{ fontFamily: 'Poppins', fontSize: '22px' }}>Error Loading Grafana Konduktor Dashboard</p>
+                    <p style={{ fontFamily: 'Poppins', fontSize: '22px', marginTop: '32px' }}>Check port forwarding for errors</p>
+                    <p style={{ fontFamily: 'Poppins', fontSize: '12px' }}>kubectl port-forward svc/kube-prometheus-stack-grafana 3000:80 -n prometheus</p>
+                </div>
+            :
+                null
+            }
+            <iframe
+                src='http://localhost:3000/dashboards'
+                style={{
+                    width: '100%',
+                    height: '800px',
+                    border: 'none',
+                    visibility: isIframeLoaded ? 'visible' : 'hidden', // Control visibility
+                    transition: 'visibility 0s, opacity 0.5s linear', // Smooth transition
+                    opacity: isIframeLoaded ? 1 : 0, // Fade in effect
+                }}
+                title="Grafana Dashboard"
+                onLoad={handleLoad}
+                onError={handleError}
+                ref={iframeRef}
+            />
+        </div>
+    )
+}
+
+export default Grafana

konduktor/dashboard/frontend/app/components/JobsData.jsx

@@ -0,0 +1,197 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+
+
+function JobsData() {
+
+    const [data, setData] = useState([])
+
+    const [paginationModel, setPaginationModel] = useState({
+        pageSize: 10,
+        page: 0,
+    });
+
+    const fetchData = async () => {
+        try {
+            const response = await fetch(`/api/jobs`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+            const data = await response.json();
+            setData(data)
+            return data
+        } catch (error) {
+            console.error('Error fetching from backend:', error);
+            return []
+        }
+    }
+
+    const handleDelete = async (row) => {
+        const { name, namespace } = row
+        try {
+            const response = await fetch(`/api/jobs`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ name, namespace })
+            })
+            const data2 = await response.json()
+
+            // Optimistically remove the row from the state
+            const newData = data.filter((job) => job.name !== name || job.namespace !== namespace);
+            setData(newData);
+
+        } catch (error) {
+            console.error("Delete error:", error)
+        }
+    }
+    
+    const updatePriority = async (name, namespace, priority, priority_class_name) => {
+        try {
+            const response = await fetch(`/api/jobs`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ name, namespace, priority, priority_class_name })
+            })
+            const data = await response.json();
+            return data
+        } catch (error) {
+            console.error("Put error:", error);
+            return error
+        }
+    }
+
+    const columns = [
+        { 
+            field: 'name', 
+            headerName: 'NAME', 
+            width: 200 
+        },
+        { 
+            field: 'namespace', 
+            headerName: 'NAMESPACE', 
+            width: 120 
+        },
+        { 
+            field: 'priority', 
+            headerName: 'PRIORITY', 
+            width: 100,
+            type: 'number',
+            editable: true,
+        },
+        { 
+            field: 'status', 
+            headerName: 'STATUS', 
+            width: 120,
+        },
+        { 
+            field: 'active', 
+            headerName: 'ACTIVE', 
+            width: 100,
+        },
+        { 
+            field: 'created_at', 
+            headerName: 'CREATED AT', 
+            width: 160 
+        },
+        { 
+            field: 'localQueueName', 
+            headerName: 'CREATED BY', 
+            width: 160 
+        },
+        { 
+            field: 'order', 
+            headerName: 'order', 
+            width: 10,
+            type: 'number',
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            headerName: 'DELETE',
+            width: 70,
+            cellClassName: 'actions',
+            getActions: (params) => {
+      
+              return [
+                    <GridActionsCellItem
+                        icon={<DeleteIcon />}
+                        key={`delete-${params.row.id}`}
+                        label="Delete"
+                        onClick={() => handleDelete(params.row)}
+                        color="inherit"
+                    />,
+              ];
+            },
+        },
+    ];
+
+    const processRowUpdate = async (newRow, oldRow) => {
+        const updatedRow = { ...newRow };
+
+        try {
+            const res = await updatePriority(updatedRow.name, updatedRow.namespace, updatedRow.priority, "")
+        } catch (error) {
+            console.error("Fetch error:", error);
+        }
+
+        await fetchData()
+
+        return oldRow
+    };
+
+    useEffect(() => {
+        fetchData()
+    }, [])
+
+
+    return (
+        <div className='flex w-full h-full flex-col p-8'>
+            <DataGrid
+                sx={{ 
+                    color: 'black', 
+                    fontFamily: 'Poppins',
+                    bgcolor: 'white',
+                    border: '2px solid hsl(var(--border))',
+                    '& .MuiDataGrid-filler': {
+                        backgroundColor: 'rgb(248 250 252)',
+                    }, 
+                    '& .MuiDataGrid-scrollbar--horizontal': {
+                        left: 0
+                    },
+                    '--DataGrid-containerBackground': 'rgb(248 250 252)',
+                }}
+                rows={data}
+                getRowId={(row) => row.id}
+                columns={columns}
+                paginationModel={paginationModel}
+                onPaginationModelChange={setPaginationModel}
+                processRowUpdate={processRowUpdate}
+                editMode='row'
+                sortModel={[
+                    { field: 'order', sort: 'desc' },
+                ]}
+                initialState={{
+                    columns: {
+                      columnVisibilityModel: {
+                        order: false,
+                      },
+                    },
+                  }}
+                checkboxSelection
+                disableRowSelectionOnClick
+                pageSizeOptions={[5, 10, 20, 50]}
+            />
+        </div>
+    )
+}
+
+export default JobsData

konduktor/dashboard/frontend/app/components/LogsData.jsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react';
+import { io } from 'socket.io-client';
+import { Input } from "./ui/input";
+import ChipSelect from "./ui/chip-select";
+import { FaSearch } from 'react-icons/fa';
+
+function LogsData() {
+
+    const [logsData, setLogsData] = useState([]);
+    const [namespaces, setNamespaces] = useState([]);
+    const [selectedNamespaces, setSelectedNamespaces] = useState(['default']);
+    const [isAtBottom, setIsAtBottom] = useState(true);  // Track if user is at the bottom
+    const logContainerRef = useRef(null);
+    const [searchQuery, setSearchQuery] = useState('')
+
+    const socketRef = useRef(null);
+
+    const fetchData = async () => {
+        try {
+            const response = await fetch(`/api/namespaces`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+            const data = await response.json();
+            setNamespaces(data)
+            return
+        } catch (error) {
+            console.error('Error fetching from backend:', error);
+            return
+        }
+    }
+
+    // Check if user is at the bottom of the log container
+    const handleScroll = () => {
+        if (logContainerRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = logContainerRef.current
+            const isUserAtBottom = scrollTop + clientHeight >= scrollHeight
+            setIsAtBottom(isUserAtBottom)
+        }
+    }
+
+    const handleSearchChange = (event) => {
+        setSearchQuery(event.target.value)
+    }
+
+    const filteredLogs = logsData.filter(log => 
+        log.log.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        log.timestamp.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+
+    useEffect(() => {
+        fetchData()
+    }, []);
+
+    useEffect(() => {
+        // Create and store the socket instance only once
+        if (!socketRef.current) {
+          socketRef.current = io('http://localhost:5173');  // Connect to Next.js server
+    
+          socketRef.current.on('connect', () => {
+            console.log('Connected to Next.js Socket.IO server');
+          });
+    
+          socketRef.current.on('log_data', (data) => {
+            setLogsData((prevLogs) => [...prevLogs, ...data]);
+          });
+    
+          socketRef.current.on('disconnect', () => {
+            console.log('Disconnected from Next.js Socket.IO server');
+          });
+        }
+    
+        // Clean up and disconnect the socket when the component unmounts
+        return () => {
+          if (socketRef.current) {
+            socketRef.current.disconnect();
+            socketRef.current = null;
+            console.log('Socket disconnected on component unmount');
+          }
+        };
+    }, []);
+    
+    // Emit selected namespaces whenever they change
+    useEffect(() => {
+        if (socketRef.current) {
+          socketRef.current.emit('update_namespaces', selectedNamespaces);
+        }
+    }, [selectedNamespaces]);
+
+    useEffect(() => {
+        if (isAtBottom && logContainerRef.current) {
+            logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+        }
+    }, [logsData, isAtBottom]);
+
+    return (
+        <div className='flex w-full h-full flex-col px-8'>
+            <div className='flex w-full my-4 py-4 justify-center gap-2'>
+                <div className="relative w-full md:w-1/4 min-w-[250px] mx-8 md:mx-0 flex justify-center items-center">
+                    <span className="absolute left-3 text-gray-500">
+                        <FaSearch />
+                    </span>
+                    <Input
+                        className="pl-10 w-full"
+                        placeholder="Search"
+                        value={searchQuery}
+                        onChange={handleSearchChange}
+                    />
+                </div>
+                <ChipSelect namespaces={namespaces} selectedNamespaces={selectedNamespaces} setSelectedNamespaces={setSelectedNamespaces} />
+            </div>
+            <div className='flex w-full bg-white h-full py-2 justify-center bg-slate-50 rounded-md border-2 max-h-[450px] box-border'>
+                <div ref={logContainerRef} onScroll={handleScroll} className='w-full bg-white flex flex-col overflow-y-scroll box-border'>
+                    {filteredLogs.map((data, index) => (
+                        <div key={index} className='py-1 px-2 flex flex-row box-border'>
+                            <div className='w-36 min-w-36 max-w-36'>
+                                <p className='text-gray-500 text-[12px]'>{data.timestamp}</p>
+                            </div>
+                            <div className='flex justify-center mr-4'>
+                                <div className='bg-[rgb(0,0,0,0.08)] rounded-[4px] px-2 h-[18px]'>
+                                    <p className='text-gray-900 text-[12px]'>{data.namespace}</p>
+                                </div>
+                            </div>
+                            <div>
+                                <p className="text-gray-900 text-[12px] leading-4">{data.log}</p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LogsData

konduktor/dashboard/frontend/app/components/NavMenu.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import {
+    NavigationMenu,
+    NavigationMenuContent,
+    NavigationMenuIndicator,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuList,
+    NavigationMenuTrigger,
+    NavigationMenuViewport,
+} from "./ui/navigation-menu"
+import Box from '@mui/material/Box';  
+
+function NavMenu() {
+  return (
+    <NavigationMenu>
+        <NavigationMenuList>
+            <NavigationMenuItem>
+                <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                    <Box sx={{ width: '600px', height: '300px', display: 'flex', justifyContent: 'center', p: '16px' }}>
+                        <NavigationMenuLink>Link</NavigationMenuLink>
+                    </Box>
+                </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+                <NavigationMenuTrigger>Item Two</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                    <Box sx={{ width: '300px', height: '300px', display: 'flex', justifyContent: 'center' }}>
+                        <NavigationMenuLink>Link</NavigationMenuLink>
+                    </Box>
+                </NavigationMenuContent>
+            </NavigationMenuItem>
+        </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+
+export default NavMenu

konduktor/dashboard/frontend/app/components/NavTabs.jsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link'; // Import Link from Next.js for client-side navigation
+import Box from '@mui/material/Box';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+
+function NavTabs() {
+  const pathname = usePathname();
+  const [tabValue, setTabValue] = useState(undefined);
+
+  useEffect(() => {
+    if (!pathname) return;
+
+    if (pathname === '/') {
+      setTabValue(0);
+    } else if (pathname === '/logs') {
+      setTabValue(1);
+    } else if (pathname === '/jobs') {
+      setTabValue(2);
+    }
+  }, [pathname]);
+
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      {tabValue !== undefined ? (
+        <Tabs
+          value={tabValue}
+          onChange={handleTabChange}
+          sx={{
+            borderBottom: '2px solid rgb(229 231 235) !important',
+            '& .MuiTabs-indicator': {
+              backgroundColor: 'rgb(75 85 99) !important',
+            },
+            '& .MuiTab-root': {
+              color: 'rgb(107 114 128) !important',
+            },
+            '& .Mui-selected': {
+              color: 'black !important',
+            },
+          }}
+        >
+          <Tab
+            component={Link}
+            href="/"
+            label="Metrics"
+            sx={{ fontWeight: 'bold', fontFamily: 'Poppins' }}
+          />
+          <Tab
+            component={Link}
+            href="/logs"
+            label="Logs"
+            sx={{ fontWeight: 'bold', fontFamily: 'Poppins' }}
+          />
+          <Tab
+            component={Link}
+            href="/jobs"
+            label="Jobs"
+            sx={{ fontWeight: 'bold', fontFamily: 'Poppins' }}
+          />
+        </Tabs>
+      ) : null}
+    </Box>
+  );
+}
+
+export default NavTabs;

konduktor/dashboard/frontend/app/components/NavTabs2.jsx

@@ -0,0 +1,30 @@
+
+import Box from '@mui/material/Box';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+
+
+function NavTabs2(props) {
+  
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Tabs value={props.tab} onChange={props.handleTabChange} sx={{ 
+          borderBottom: '2px solid rgb(229 231 235) !important',
+          '& .MuiTabs-indicator': {
+            backgroundColor: 'rgb(75 85 99) !important', // Change the indicator color
+          },
+          '& .MuiTab-root': {
+            color: 'rgb(107 114 128) !important', // Change the default text color
+          },
+          '& .Mui-selected': {
+            color: 'black !important',
+          },
+        }} >
+          <Tab sx={{ fontFamily: 'Poppins', }} label="Application Logs" />
+          {/*<Tab sx={{ fontFamily: 'Poppins', }} label="Workspace Events" />*/}
+        </Tabs>
+      </Box>
+    );
+}
+
+export default NavTabs2

konduktor/dashboard/frontend/app/components/SelectBtn.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select"
+
+function SelectBtn() {
+  return (
+    <div className="flex flex-col space-y-1.5">
+        <Select>
+            <SelectTrigger id="framework" className='tracking-wide mr-2'>
+                <SelectValue placeholder="View In Grafana" />
+            </SelectTrigger>
+            <SelectContent position="popper">
+                <SelectItem value="1">Core Dashboard</SelectItem>
+                <SelectItem value="2">Ray Data Dashboard</SelectItem>
+            </SelectContent>
+        </Select>
+    </div>
+  )
+}
+
+export default SelectBtn

konduktor/dashboard/frontend/app/components/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}

konduktor/dashboard/frontend/app/components/ui/chip-select.jsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Chip from '@mui/material/Chip';
+
+
+export default function ChipSelect(props) {
+
+    const handleChange = (event) => {
+            const {
+            target: { value },
+        } = event;
+        props.setSelectedNamespaces(
+            // On autofill we get a stringified value.
+            typeof value === 'string' ? value.split(',') : value,
+        );
+    };
+
+  return (
+    <FormControl className='flex w-3/4' >
+        <InputLabel id="demo-multiple-chip-label" sx={{ 
+            lineHeight: 1.2, 
+            fontSize: '14px', 
+            color: 'gray', 
+            "&.Mui-focused": {
+                color: 'gray'
+            } 
+        }} >
+            Namespace(s)
+        </InputLabel>
+        <Select
+            labelId="demo-multiple-chip-label"
+            id="demo-multiple-chip"
+            multiple
+            value={props.selectedNamespaces}
+            onChange={handleChange}
+            input={<OutlinedInput id="select-multiple-chip" label="Namespace(s)" />}
+            sx={{ 
+                minHeight: '48px',
+                borderRadius: '0.375rem',
+                '.MuiSelect-select': {
+                    height: 'auto',
+                    p: '8px',
+                },
+                '.MuiOutlinedInput-notchedOutline': {
+                    borderColor: '#e5e7eb',
+                },
+                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    borderColor: '#e5e7eb',
+                },
+                '&:hover .MuiOutlinedInput-notchedOutline': {
+                    borderColor: '#e5e7eb',
+                },
+            }}
+            renderValue={(selected) => (
+                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.3 }}>
+                    {selected.map((value) => (
+                        <Chip sx={{ fontSize: '12px', maxHeight: '24px', borderRadius: '4px' }} key={value} label={value} />
+                    ))}
+                </Box>
+            )}
+        >
+          {props.namespaces.map((choice) => (
+            <MenuItem
+              key={choice}
+              value={choice}
+            >
+              {choice}
+            </MenuItem>
+          ))}
+        </Select>
+    </FormControl>
+  );
+}

konduktor/dashboard/frontend/app/components/ui/input.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    (<input
+      type={type}
+      className={cn(
+        "flex h-12 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props} />)
+  );
+})
+Input.displayName = "Input"
+
+export { Input }