osism 0.20250823.0__tar.gz → 0.20250824.0__tar.gz

osism-0.20250824.0/ChangeLog

@@ -0,0 +1,7 @@
+CHANGES
+=======
+
+v0.20250824.0
+-------------
+
+* chore(deps): update dependency websockets to v15 (#1667)

{osism-0.20250823.0/osism.egg-info → osism-0.20250824.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: osism
-Version: 0.20250823.0
+Version: 0.20250824.0
 Summary: OSISM manager interface
 Home-page: https://github.com/osism/python-osism
 Author: OSISM GmbH
@@ -55,6 +55,7 @@ Requires-Dist: transitions==0.9.3
 Requires-Dist: uvicorn[standard]==0.35.0
 Requires-Dist: validators==0.35.0
 Requires-Dist: watchdog==6.0.0
+Requires-Dist: websockets==15.0.1
 Provides-Extra: ansible
 Requires-Dist: ansible-runner==2.4.1; extra == "ansible"
 Requires-Dist: ansible-core==2.19.0; extra == "ansible"

{osism-0.20250823.0 → osism-0.20250824.0}/frontend/Containerfile

@@ -1,10 +1,10 @@
 # Multi-stage build for production-ready Next.js application
-FROM node:18-alpine AS dependencies
+FROM node:22-alpine AS dependencies
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci --only=production
 
-FROM node:18-alpine AS build
+FROM node:22-alpine AS build
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
@@ -12,7 +12,7 @@ COPY . .
 ENV NEXT_TELEMETRY_DISABLED=1
 RUN npm run build
 
-FROM node:18-alpine AS runner
+FROM node:22-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production

{osism-0.20250823.0 → osism-0.20250824.0}/frontend/Dockerfile

@@ -1,10 +1,10 @@
 # Multi-stage build for production-ready Next.js application
-FROM node:18-alpine AS dependencies
+FROM node:22-alpine AS dependencies
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci --only=production
 
-FROM node:18-alpine AS build
+FROM node:22-alpine AS build
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
@@ -12,7 +12,7 @@ COPY . .
 ENV NEXT_TELEMETRY_DISABLED=1
 RUN npm run build
 
-FROM node:18-alpine AS runner
+FROM node:22-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production

osism-0.20250824.0/frontend/app/api/config/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  return NextResponse.json({
+    apiUrl: process.env.NEXT_PUBLIC_OSISM_API_URL || 'http://api:8000'
+  });
+}

osism-0.20250824.0/frontend/app/api/health/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  return NextResponse.json({
+    status: 'healthy',
+    timestamp: new Date().toISOString(),
+    service: 'OSISM Frontend'
+  });
+}

osism-0.20250824.0/frontend/app/components/ConnectionStatus.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Wifi, WifiOff, AlertCircle } from "lucide-react";
+import { ConnectionStatus as ConnectionStatusType } from "@/lib/types";
+import { formatDistanceToNow } from "date-fns";
+
+interface ConnectionStatusProps {
+  status: ConnectionStatusType;
+  className?: string;
+}
+
+export default function ConnectionStatus({ status, className = "" }: ConnectionStatusProps) {
+  const getStatusContent = () => {
+    if (status.connected) {
+      return {
+        icon: Wifi,
+        text: "Connected",
+        color: "text-green-600",
+        bgColor: "bg-green-100",
+      };
+    } else if (status.error) {
+      return {
+        icon: AlertCircle,
+        text: `Disconnected: ${status.error}`,
+        color: "text-red-600",
+        bgColor: "bg-red-100",
+      };
+    } else {
+      return {
+        icon: WifiOff,
+        text: "Disconnected",
+        color: "text-gray-600",
+        bgColor: "bg-gray-100",
+      };
+    }
+  };
+
+  const { icon: Icon, text, color, bgColor } = getStatusContent();
+
+  return (
+    <div className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${bgColor} ${color} ${className}`}>
+      <Icon className="h-4 w-4 mr-2" />
+      <span>{text}</span>
+      {status.lastConnected && !status.connected && (
+        <span className="ml-2 text-xs opacity-75">
+          (Last: {formatDistanceToNow(status.lastConnected)} ago)
+        </span>
+      )}
+    </div>
+  );
+}

osism-0.20250824.0/frontend/app/components/EventsFilters.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Filter, X } from "lucide-react";
+import { WebSocketFilter } from "@/lib/types";
+
+interface EventsFiltersProps {
+  onFiltersChange: (filters: WebSocketFilter) => void;
+  className?: string;
+}
+
+const BAREMETAL_EVENT_TYPES = [
+  "baremetal.node.power_set.end",
+  "baremetal.node.provision_set.start",
+  "baremetal.node.provision_set.end", 
+  "baremetal.node.provision_set.success",
+  "baremetal.node.power_state_corrected.success",
+  "baremetal.node.maintenance_set.end",
+  "baremetal.node.create.end",
+  "baremetal.node.delete.end",
+];
+
+export default function EventsFilters({ onFiltersChange, className = "" }: EventsFiltersProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedEventTypes, setSelectedEventTypes] = useState<string[]>([]);
+  const [nodeFilter, setNodeFilter] = useState("");
+
+  const applyFilters = useCallback(() => {
+    const filters: WebSocketFilter = {
+      service_filters: ["baremetal"], // Always filter for baremetal events
+    };
+
+    if (selectedEventTypes.length > 0) {
+      filters.event_filters = selectedEventTypes;
+    }
+
+    if (nodeFilter.trim()) {
+      filters.node_filters = nodeFilter.split(",").map(n => n.trim()).filter(n => n);
+    }
+
+    onFiltersChange(filters);
+    setIsOpen(false);
+  }, [selectedEventTypes, nodeFilter, onFiltersChange]);
+
+  const clearFilters = useCallback(() => {
+    setSelectedEventTypes([]);
+    setNodeFilter("");
+    onFiltersChange({ service_filters: ["baremetal"] });
+  }, [onFiltersChange]);
+
+  const toggleEventType = useCallback((eventType: string) => {
+    setSelectedEventTypes(prev => 
+      prev.includes(eventType)
+        ? prev.filter(t => t !== eventType)
+        : [...prev, eventType]
+    );
+  }, []);
+
+  const hasActiveFilters = selectedEventTypes.length > 0 || nodeFilter.trim().length > 0;
+
+  return (
+    <div className={`relative ${className}`}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium transition-colors ${
+          hasActiveFilters
+            ? "border-blue-500 bg-blue-50 text-blue-700"
+            : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
+        }`}
+      >
+        <Filter className="h-4 w-4 mr-2" />
+        Filters
+        {hasActiveFilters && (
+          <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+            {(selectedEventTypes.length > 0 ? 1 : 0) + (nodeFilter ? 1 : 0)}
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-2 w-96 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
+          <div className="p-4 border-b border-gray-200">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-medium text-gray-900">Event Filters</h3>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+
+          <div className="p-4 space-y-4">
+            {/* Node Filter */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Node Names (comma-separated)
+              </label>
+              <input
+                type="text"
+                value={nodeFilter}
+                onChange={(e) => setNodeFilter(e.target.value)}
+                placeholder="e.g., server-01, server-02"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+
+            {/* Event Type Filter */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Event Types
+              </label>
+              <div className="space-y-2 max-h-48 overflow-y-auto">
+                {BAREMETAL_EVENT_TYPES.map((eventType) => (
+                  <label key={eventType} className="flex items-center">
+                    <input
+                      type="checkbox"
+                      checked={selectedEventTypes.includes(eventType)}
+                      onChange={() => toggleEventType(eventType)}
+                      className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                    />
+                    <span className="ml-2 text-sm text-gray-700 font-mono">
+                      {eventType}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="p-4 border-t border-gray-200 flex justify-between">
+            <button
+              onClick={clearFilters}
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+            >
+              Clear All
+            </button>
+            <button
+              onClick={applyFilters}
+              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
+            >
+              Apply Filters
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

osism-0.20250824.0/frontend/app/components/EventsList.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { format } from "date-fns";
+import { 
+  Server, 
+  Power, 
+  Settings, 
+  Trash2, 
+  Plus,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  Clock,
+  Pause,
+  Play
+} from "lucide-react";
+import { OpenStackEvent, BaremetalEvent } from "@/lib/types";
+
+interface EventsListProps {
+  events: OpenStackEvent[];
+  className?: string;
+}
+
+const getEventIcon = (eventType: string) => {
+  if (eventType.includes("power")) return Power;
+  if (eventType.includes("provision")) return Settings;
+  if (eventType.includes("maintenance")) return AlertTriangle;
+  if (eventType.includes("create")) return Plus;
+  if (eventType.includes("delete")) return Trash2;
+  return Server;
+};
+
+const getEventColor = (eventType: string) => {
+  if (eventType.includes("power_set.end")) return "text-blue-600 bg-blue-50";
+  if (eventType.includes("provision_set.success")) return "text-green-600 bg-green-50";
+  if (eventType.includes("provision_set.start")) return "text-yellow-600 bg-yellow-50";
+  if (eventType.includes("maintenance")) return "text-orange-600 bg-orange-50";
+  if (eventType.includes("create")) return "text-green-600 bg-green-50";
+  if (eventType.includes("delete")) return "text-red-600 bg-red-50";
+  return "text-gray-600 bg-gray-50";
+};
+
+const getStatusIcon = (eventType: string) => {
+  if (eventType.includes("success")) return CheckCircle;
+  if (eventType.includes("error") || eventType.includes("fail")) return XCircle;
+  if (eventType.includes("start")) return Clock;
+  return null;
+};
+
+const formatEventData = (event: OpenStackEvent) => {
+  if (event.data.service_type === "baremetal" && "ironic_object" in event.data) {
+    const baremetalEvent = event as BaremetalEvent;
+    const ironicData = baremetalEvent.data.ironic_object?.data;
+    
+    if (!ironicData) return null;
+
+    const details = [];
+    if (ironicData.power_state) details.push(`Power: ${ironicData.power_state}`);
+    if (ironicData.provision_state) details.push(`Provision: ${ironicData.provision_state}`);
+    if (ironicData.maintenance !== undefined) details.push(`Maintenance: ${ironicData.maintenance ? "Yes" : "No"}`);
+    
+    return details.join(" | ");
+  }
+  
+  return null;
+};
+
+export default function EventsList({ events, className = "" }: EventsListProps) {
+  const [isPaused, setIsPaused] = useState(false);
+  const [maxEvents, setMaxEvents] = useState(50);
+
+  const displayEvents = useMemo(() => {
+    return isPaused ? events : events.slice(0, maxEvents);
+  }, [events, isPaused, maxEvents]);
+
+  const togglePause = () => {
+    setIsPaused(!isPaused);
+  };
+
+  const loadMore = () => {
+    setMaxEvents(prev => prev + 50);
+  };
+
+  if (events.length === 0) {
+    return (
+      <div className={`text-center py-12 ${className}`}>
+        <Server className="mx-auto h-12 w-12 text-gray-400" />
+        <h3 className="mt-2 text-sm font-medium text-gray-900">No events yet</h3>
+        <p className="mt-1 text-sm text-gray-500">
+          Baremetal events will appear here in real-time.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {/* Controls */}
+      <div className="flex items-center justify-between mb-4 text-sm text-gray-600">
+        <span>{events.length} events total</span>
+        <div className="flex items-center space-x-2">
+          <button
+            onClick={togglePause}
+            className="inline-flex items-center px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-50"
+          >
+            {isPaused ? (
+              <>
+                <Play className="h-4 w-4 mr-1" />
+                Resume
+              </>
+            ) : (
+              <>
+                <Pause className="h-4 w-4 mr-1" />
+                Pause
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Events List */}
+      <div className="space-y-1">
+        {displayEvents.map((event) => {
+          const Icon = getEventIcon(event.event_type);
+          const StatusIcon = getStatusIcon(event.event_type);
+          const colorClass = getEventColor(event.event_type);
+          const eventDetails = formatEventData(event);
+
+          return (
+            <div
+              key={event.id}
+              className="flex items-start space-x-3 p-3 bg-white border border-gray-200 rounded-lg hover:border-gray-300 transition-colors"
+            >
+              {/* Icon */}
+              <div className={`flex-shrink-0 p-2 rounded-lg ${colorClass}`}>
+                <Icon className="h-4 w-4" />
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-2">
+                    <span className="text-sm font-medium text-gray-900 font-mono">
+                      {event.event_type}
+                    </span>
+                    {StatusIcon && (
+                      <StatusIcon className="h-4 w-4 text-gray-400" />
+                    )}
+                  </div>
+                  <time className="text-xs text-gray-500 flex-shrink-0">
+                    {format(new Date(event.timestamp), "HH:mm:ss")}
+                  </time>
+                </div>
+
+                {event.node_name && (
+                  <div className="flex items-center mt-1">
+                    <Server className="h-3 w-3 text-gray-400 mr-1" />
+                    <span className="text-sm font-medium text-gray-700">
+                      {event.node_name}
+                    </span>
+                  </div>
+                )}
+
+                {eventDetails && (
+                  <p className="text-sm text-gray-600 mt-1">
+                    {eventDetails}
+                  </p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Load More */}
+      {!isPaused && events.length > maxEvents && (
+        <div className="mt-4 text-center">
+          <button
+            onClick={loadMore}
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+          >
+            Load More Events ({events.length - maxEvents} remaining)
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

osism-0.20250824.0/frontend/app/events/page.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Activity, RefreshCw, Trash2 } from "lucide-react";
+import useWebSocket from "@/lib/hooks/useWebSocket";
+import EventsList from "../components/EventsList";
+import EventsFilters from "../components/EventsFilters";
+import ConnectionStatus from "../components/ConnectionStatus";
+import { WebSocketFilter } from "@/lib/types";
+
+async function getWebSocketUrl(): Promise<string> {
+  if (typeof window !== 'undefined') {
+    try {
+      const response = await fetch('/api/config');
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const config = await response.json();
+      // Convert HTTP URL to WebSocket URL
+      const apiUrl = config.apiUrl.replace(/^http/, 'ws');
+      const wsUrl = `${apiUrl}/v1/events/openstack`;
+      console.log('Using WebSocket URL from config:', wsUrl);
+      return wsUrl;
+    } catch (error) {
+      console.warn('Failed to fetch API config for WebSocket:', error);
+      const fallbackUrl = 'ws://localhost:8000/v1/events/openstack';
+      console.log('Using fallback WebSocket URL:', fallbackUrl);
+      return fallbackUrl;
+    }
+  }
+  // Server-side fallback
+  const apiUrl = (process.env.NEXT_PUBLIC_OSISM_API_URL || 'http://api:8000').replace(/^http/, 'ws');
+  const wsUrl = `${apiUrl}/v1/events/openstack`;
+  console.log('Using server-side WebSocket URL:', wsUrl);
+  return wsUrl;
+}
+
+export default function EventsPage() {
+  const [wsUrl, setWsUrl] = useState<string>('');
+  const [eventCount, setEventCount] = useState(0);
+
+  // Initialize WebSocket URL
+  useEffect(() => {
+    getWebSocketUrl().then((url) => {
+      console.log('WebSocket URL resolved:', url);
+      setWsUrl(url);
+    });
+  }, []);
+
+  const {
+    events,
+    connectionStatus,
+    connect,
+    disconnect,
+    clearEvents,
+    setFilters
+  } = useWebSocket(wsUrl, {
+    autoConnect: false, // Don't auto-connect until URL is ready
+    onEvent: useCallback(() => {
+      setEventCount(prev => prev + 1);
+    }, [])
+  });
+
+  // Connect only after wsUrl is available
+  useEffect(() => {
+    if (wsUrl) {
+      connect();
+    }
+  }, [wsUrl, connect]);
+
+  const handleFiltersChange = useCallback((filters: WebSocketFilter) => {
+    setFilters(filters);
+  }, [setFilters]);
+
+  const handleReconnect = () => {
+    disconnect();
+    setTimeout(() => {
+      connect();
+    }, 100);
+  };
+
+  const handleClearEvents = () => {
+    clearEvents();
+    setEventCount(0);
+  };
+
+  if (!wsUrl) {
+    return (
+      <div className="px-4 sm:px-0">
+        <div className="animate-pulse">
+          <div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
+          <div className="h-4 bg-gray-200 rounded w-1/2"></div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-4 sm:px-0">
+      {/* Header */}
+      <div className="mb-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 flex items-center">
+              <Activity className="h-7 w-7 mr-3" />
+              Events
+            </h2>
+            <p className="mt-1 text-sm text-gray-600">
+              Real-time Baremetal events from OpenStack Ironic
+            </p>
+          </div>
+          
+          {/* Connection Status */}
+          <ConnectionStatus status={connectionStatus} />
+        </div>
+      </div>
+
+      {/* Stats & Controls */}
+      <div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
+        <div className="flex items-center space-x-4">
+          <div className="bg-white px-4 py-2 rounded-lg border border-gray-200">
+            <div className="flex items-center">
+              <Activity className="h-4 w-4 text-gray-400 mr-2" />
+              <span className="text-sm font-medium text-gray-700">
+                {events.length} events
+              </span>
+              {eventCount > 0 && (
+                <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                  +{eventCount} new
+                </span>
+              )}
+            </div>
+          </div>
+          
+          <EventsFilters onFiltersChange={handleFiltersChange} />
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <button
+            onClick={handleReconnect}
+            className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+            disabled={connectionStatus.connected}
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Reconnect
+          </button>
+          
+          <button
+            onClick={handleClearEvents}
+            className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+            disabled={events.length === 0}
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            Clear Events
+          </button>
+        </div>
+      </div>
+
+      {/* Connection Warning */}
+      {!connectionStatus.connected && (
+        <div className="mb-6 bg-yellow-50 border border-yellow-200 rounded-md p-4">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <Activity className="h-5 w-5 text-yellow-400" />
+            </div>
+            <div className="ml-3">
+              <h3 className="text-sm font-medium text-yellow-800">
+                Connection Issue
+              </h3>
+              <div className="mt-2 text-sm text-yellow-700">
+                <p>
+                  Unable to connect to the events stream. Events may not appear in real-time.
+                  {connectionStatus.error && ` Error: ${connectionStatus.error}`}
+                </p>
+              </div>
+              <div className="mt-4">
+                <div className="-mx-2 -my-1.5 flex">
+                  <button
+                    onClick={handleReconnect}
+                    className="bg-yellow-50 px-2 py-1.5 rounded-md text-sm font-medium text-yellow-800 hover:bg-yellow-100"
+                  >
+                    Try Reconnecting
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Events List */}
+      <div className="bg-gray-50 rounded-lg p-6">
+        <EventsList events={events} />
+      </div>
+    </div>
+  );
+}

{osism-0.20250823.0 → osism-0.20250824.0}/frontend/app/globals.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 :root {
   --background: #ffffff;