Visit camera directly from system page (#8405)

* Visit camera directly from system page

* Processed all feedback

* Changed button caption

docs/docs/configuration/index.md

@@ -520,6 +520,9 @@ cameras:
     # to be replaced by a newer image. (default: shown below)
     best_image_timeout: 60
 
+    # Optional: URL to visit the camera web UI directly from the system page. Might not be available on every camera.
+    webui_url: ""
+
     # Optional: zones for this camera
     zones:
       # Required: name of the zone

frigate/config.py

@@ -731,6 +731,9 @@ class CameraConfig(FrigateBaseModel):
         default=60,
         title="How long to wait for the image with the highest confidence score.",
     )
+    webui_url: Optional[str] = Field(
+        title="URL to visit the camera directly from system page",
+    )
     zones: Dict[str, ZoneConfig] = Field(
         default_factory=dict, title="Zone configuration."
     )

web/src/components/Button.jsx

@@ -67,6 +67,7 @@ export default function Button({
   disabled = false,
   ariaCapitalize = false,
   href,
+  target,
   type = 'contained',
   ...attrs
 }) {
@@ -101,6 +102,7 @@ export default function Button({
         tabindex="0"
         className={classes}
         href={href}
+        target={target}
         ref={ref}
         onmouseenter={handleMousenter}
         onmouseleave={handleMouseleave}

web/src/icons/WebUI.jsx

@@ -0,0 +1,21 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function WebUI({ className = 'h-6 w-6', stroke = 'currentColor', fill = 'none', onClick = () => {} }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill={fill}
+      viewBox="0 0 24 24"
+      stroke={stroke}
+      onClick={onClick}
+    >
+      <path
+        d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"
+      />
+    </svg>
+  );
+}
+
+export default memo(WebUI);

web/src/routes/System.jsx

@@ -12,6 +12,7 @@ import Dialog from '../components/Dialog';
 import TimeAgo from '../components/TimeAgo';
 import copy from 'copy-to-clipboard';
 import { About } from '../icons/About';
+import { WebUI } from '../icons/WebUI';
 
 const emptyObject = Object.freeze({});
 
@@ -347,7 +348,17 @@ export default function System() {
                     >
                       <div className="capitalize text-lg flex justify-between p-4">
                         <Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
-                        <Button onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button>
+                        <div className="flex">
+                          {config.cameras[camera]['webui_url'] && (
+                            <Button 
+                              href={config.cameras[camera]['webui_url']}
+                              target="_blank"
+                            >
+                             Web UI<WebUI className="ml-1 h-4 w-4" fill="white" stroke="white" />
+                            </Button>
+                          )}
+                          <Button className="ml-2" onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button>
+                        </div>
                       </div>
                       <div className="p-2">
                         <Table className="w-full">