[ViPPET] Cameras view (open-edge-platform#1919)

Co-authored-by: Taube, Krystian <krystian.taube@intel.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/config/navigation.ts

@@ -7,6 +7,7 @@ import {
   Home,
   ListTodo,
   GitFork,
+  Camera,
 } from "lucide-react";
 import { redirect, type RouteObject } from "react-router";
 import { Home as HomePage } from "@/pages/Home.tsx";
@@ -20,6 +21,7 @@ import { PerformanceJobDetail } from "@/pages/PerformanceJobDetail.tsx";
 import { DensityJobDetail } from "@/pages/DensityJobDetail.tsx";
 import { OptimizationJobDetail } from "@/pages/OptimizationJobDetail.tsx";
 import { Pipelines2 } from "@/pages/Pipelines2";
+import { Cameras } from "@/pages/Cameras";
 
 export type NavigationItem = {
   url: string;
@@ -38,6 +40,7 @@ export const menuItems: Array<NavigationItem> = [
   { url: "/pipelines", title: "Pipelines", icon: GitFork },
   { url: "/models", title: "Models", icon: Cpu },
   { url: "/videos", title: "Videos", icon: Film },
+  { url: "/cameras", title: "Cameras", icon: Camera },
   {
     url: "/tests/performance",
     title: "Performance",
@@ -53,6 +56,7 @@ export const routeConfig: Array<RouteObject> = [
   { path: "pipelines/:id/:variant", Component: Pipelines },
   { path: "models", Component: Models },
   { path: "videos", Component: Videos },
+  { path: "cameras", Component: Cameras },
   { path: "tests/performance", Component: PerformanceTests },
   { path: "tests/density", Component: DensityTests },
   {

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/cameras/CameraAuthDialog.tsx

@@ -0,0 +1,143 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field.tsx";
+import { useLoadCameraProfilesMutation } from "@/api/api.generated.ts";
+import { toast } from "sonner";
+import { handleApiError } from "@/lib/apiUtils";
+
+type CameraAuthFormData = {
+  username: string;
+  password: string;
+};
+
+type CameraAuthDialogProps = {
+  cameraId: string;
+  cameraName: string;
+  onSuccess?: () => void;
+};
+
+export const CameraAuthDialog = ({
+  cameraId,
+  cameraName,
+  onSuccess,
+}: CameraAuthDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [loadCameraProfiles, { isLoading }] = useLoadCameraProfilesMutation();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<CameraAuthFormData>({
+    defaultValues: {
+      username: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = async (data: CameraAuthFormData) => {
+    try {
+      await loadCameraProfiles({
+        cameraId,
+        cameraProfilesRequest: {
+          username: data.username,
+          password: data.password,
+        },
+      }).unwrap();
+
+      toast.success("Camera authorized", {
+        description: "Camera authorized successfully",
+      });
+
+      setOpen(false);
+      reset();
+      onSuccess?.();
+    } catch (error) {
+      handleApiError(error, "Camera authorization failed");
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (!newOpen) {
+      reset();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button size="sm">Authorize</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Authorize Camera</DialogTitle>
+          <DialogDescription>
+            Enter credentials to authorize {cameraName}
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="space-y-4 py-4">
+            <Field>
+              <FieldLabel htmlFor="username">Username</FieldLabel>
+              <Input
+                id="username"
+                type="text"
+                autoComplete="username"
+                placeholder="Enter username"
+                {...register("username", {
+                  required: "Username is required",
+                })}
+              />
+              {errors.username && (
+                <FieldError>{errors.username.message}</FieldError>
+              )}
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="password">Password</FieldLabel>
+              <Input
+                id="password"
+                type="password"
+                autoComplete="current-password"
+                placeholder="Enter password"
+                {...register("password", {
+                  required: "Password is required",
+                })}
+              />
+              {errors.password && (
+                <FieldError>{errors.password.message}</FieldError>
+              )}
+            </Field>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => handleOpenChange(false)}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? "Authorizing..." : "Authorize"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/cameras/mockCameras.ts

@@ -0,0 +1,52 @@
+import { type Camera } from "@/api/api.generated.ts";
+
+const isMockCamerasFromEnv = import.meta.env.VITE_MOCK_CAMERAS === "1";
+
+const isMockCamerasFromQuery =
+  typeof window !== "undefined" &&
+  new URLSearchParams(window.location.search).get("mockCameras") === "1";
+
+export const isCameraMockEnabled =
+  isMockCamerasFromEnv || isMockCamerasFromQuery;
+
+export const mockCameras: Camera[] = [
+  {
+    device_id: "usb-1",
+    device_name: "Thronmax StreamGo Webcam: Thron",
+    device_type: "USB",
+    details: {
+      device_path: "/dev/video2",
+      best_capture: {
+        fourcc: "MJPG",
+        width: 1920,
+        height: 1080,
+        fps: 30,
+      },
+    },
+  },
+  {
+    device_id: "usb-2",
+    device_name: "C270 HD WEBCAM",
+    device_type: "USB",
+    details: {
+      device_path: "/dev/video0",
+      best_capture: {
+        fourcc: "MJPG",
+        width: 1280,
+        height: 720,
+        fps: 30,
+      },
+    },
+  },
+  {
+    device_id: "net-1",
+    device_name: "ONVIF Camera 10.91.106.249",
+    device_type: "NETWORK",
+    details: {
+      ip: "10.91.106.249",
+      port: 1000,
+      profiles: [],
+      best_profile: null,
+    },
+  },
+];

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/demo/DemoMode.tsx

@@ -53,6 +53,7 @@ import {
   parsePipelineVariantReference,
   resolvePipelineVariantLabel,
 } from "@/features/pipeline-tests/pipelineVariantReference";
+import { filterOutTransportStreams } from "@/lib/videoUtils.ts";
 
 const nodeTypeToTag: Record<string, string> = {
   // Sources
@@ -276,7 +277,7 @@ const DemoMode = () => {
   const [selectedVariantByPipelineId, setSelectedVariantByPipelineId] =
     useState<Record<string, string>>({});
   const videoFilenames = useMemo(
-    () => videos.map((video) => video.filename),
+    () => filterOutTransportStreams(videos).map((video) => video.filename),
     [videos],
   );
   const getFilenameFromPath = (value: unknown): string => {
@@ -1891,10 +1892,6 @@ const DemoMode = () => {
                                                                 }
                                                                 className={`w-full px-2 py-1.5 bg-slate-900/90 border border-slate-400/40 rounded text-slate-200 text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 ${isReadOnly ? "opacity-60 cursor-not-allowed" : ""}`}
                                                               >
-                                                                <option value="">
-                                                                  Select
-                                                                  filename
-                                                                </option>
                                                                 {videoFilenames.map(
                                                                   (
                                                                     filename,

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/NodeDataPanel.tsx

@@ -10,6 +10,7 @@ import { useAppSelector } from "@/store/hooks";
 import { selectModels } from "@/store/reducers/models";
 import DeviceSelect from "@/components/shared/DeviceSelect";
 import { useGetCamerasQuery, useGetVideosQuery } from "@/api/api.generated";
+import { filterOutTransportStreams } from "@/lib/videoUtils.ts";
 
 type NodePropertyConfig = {
   key: string;
@@ -46,6 +47,7 @@ const NodeDataPanel = ({
   const cameraOptions = cameras.map((camera) => {
     const details = camera.details as Record<string, unknown> | undefined;
     let value = "";
+    let disabled = false;
 
     if (camera.device_type === "USB") {
       const devicePath =
@@ -54,6 +56,16 @@ const NodeDataPanel = ({
           : undefined;
       value = typeof devicePath === "string" ? devicePath : "";
     } else {
+      // NETWORK camera
+      const profiles =
+        details && typeof details === "object" && "profiles" in details
+          ? details["profiles"]
+          : undefined;
+      const hasProfiles = Array.isArray(profiles) && profiles.length > 0;
+
+      // Disable if network camera is not authorized (no profiles loaded)
+      disabled = !hasProfiles;
+
       const bestProfile =
         details && typeof details === "object" && "best_profile" in details
           ? details["best_profile"]
@@ -67,10 +79,14 @@ const NodeDataPanel = ({
       value = typeof rtspUrl === "string" ? rtspUrl : "";
     }
 
-    return { label: camera.device_name, value };
+    return {
+      label: camera.device_name,
+      value,
+      disabled,
+    };
   });
 
-  const videoOptions = videos.map((video) => ({
+  const videoOptions = filterOutTransportStreams(videos).map((video) => ({
     label: video.filename,
     value: video.filename,
   }));
@@ -211,9 +227,6 @@ const NodeDataPanel = ({
                     onChange={(e) => handleInputChange(keyStr, e.target.value)}
                     className="w-full bg-background text-xs border border-gray-300 px-2 py-1"
                   >
-                    <option value="">
-                      Select {propConfig?.label ?? keyStr}
-                    </option>
                     {(selectedNode.type === "filesrc"
                       ? videoOptions
                       : editableData.kind === "camera"
@@ -223,8 +236,21 @@ const NodeDataPanel = ({
                       <option
                         key={(option.value || option.label) as string}
                         value={option.value}
+                        disabled={
+                          "disabled" in option
+                            ? Boolean(option.disabled)
+                            : false
+                        }
+                        className={
+                          "disabled" in option && option.disabled
+                            ? "text-gray-400 dark:text-gray-500"
+                            : ""
+                        }
                       >
                         {option.label}
+                        {"disabled" in option && option.disabled
+                          ? " (Not authorized)"
+                          : ""}
                       </option>
                     ))}
                   </select>
@@ -234,7 +260,6 @@ const NodeDataPanel = ({
                     onChange={(e) => handleInputChange(keyStr, e.target.value)}
                     className="w-full bg-background text-xs border border-gray-300 px-2 py-1"
                   >
-                    <option value="">Select {propConfig?.label}</option>
                     {propConfig?.options?.map((option) => (
                       <option key={option} value={option}>
                         {option}

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipelines/CreatePipelineDialog.tsx

@@ -71,6 +71,7 @@ import {
   createPipelineSchema,
 } from "./pipelineSchemas";
 import { PipelineTagsCombobox } from "./PipelineTagsCombobox";
+import { isSupportedVideoFilename } from "@/lib/videoUtils.ts";
 
 type CreatePipelineDialogProps = {
   children: ReactNode;
@@ -116,7 +117,9 @@ export const CreatePipelineDialog = ({
 
   const tags = watch("tags");
 
-  const videoOptions = videos.map((v) => v.filename);
+  const videoOptions = videos
+    .filter((video) => isSupportedVideoFilename(video.filename))
+    .map((video) => video.filename);
 
   const [createPipeline, { isLoading: isCreating }] =
     useCreatePipelineMutation();

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/lib/videoUtils.ts

@@ -0,0 +1,6 @@
+export const isSupportedVideoFilename = (filename: string): boolean =>
+  !filename.toLowerCase().endsWith(".ts");
+
+export const filterOutTransportStreams = <T extends { filename: string }>(
+  files: T[],
+): T[] => files.filter((file) => isSupportedVideoFilename(file.filename));