From 19d6de3d7651f5610b81092a55cd920e2701575e Mon Sep 17 00:00:00 2001
From: tpjanssen <25168870+tpjanssen@users.noreply.github.com>
Date: Wed, 1 Nov 2023 12:56:47 +0100
Subject: [PATCH] Processed all feedback

---
 docs/docs/configuration/index.md |  4 ++--
 frigate/config.py                |  5 ++---
 web/src/components/Button.jsx    |  2 ++
 web/src/icons/WebUI.jsx          | 21 +++++++++++++++++++++
 web/src/routes/System.jsx        | 13 ++++++-------
 5 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 web/src/icons/WebUI.jsx

diff --git a/docs/docs/configuration/index.md b/docs/docs/configuration/index.md
index 8e4ecd127..efaa64382 100644
--- a/docs/docs/configuration/index.md
+++ b/docs/docs/configuration/index.md
@@ -520,8 +520,8 @@ cameras:
     # to be replaced by a newer image. (default: shown below)
     best_image_timeout: 60
 
-    # Optional: URL to visit the camera directly from system page (default: shown below)
-    visit_url: ""
+    # 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:
diff --git a/frigate/config.py b/frigate/config.py
index dfe2ed0c4..b9bb4c7ed 100644
--- a/frigate/config.py
+++ b/frigate/config.py
@@ -731,9 +731,8 @@ class CameraConfig(FrigateBaseModel):
         default=60,
         title="How long to wait for the image with the highest confidence score.",
     )
-    visit_url: str = Field(
-        default="",
-        title="URL to visit the camera directly from system page.",
+    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."
diff --git a/web/src/components/Button.jsx b/web/src/components/Button.jsx
index abaf81548..11e469506 100644
--- a/web/src/components/Button.jsx
+++ b/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}
diff --git a/web/src/icons/WebUI.jsx b/web/src/icons/WebUI.jsx
new file mode 100644
index 000000000..214f30a60
--- /dev/null
+++ b/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);
diff --git a/web/src/routes/System.jsx b/web/src/routes/System.jsx
index 8bd5a1620..b57569a43 100644
--- a/web/src/routes/System.jsx
+++ b/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({});
 
@@ -348,15 +349,13 @@ export default function System() {
                       <div className="capitalize text-lg flex justify-between p-4">
                         <Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
                         <div className="flex">
-                          {(config.cameras[camera]['visit_url'] != "") && (
-                            <Link
-                              className="text-blue-500 hover:underline"
+                          {config.cameras[camera]['webui_url'] && (
+                            <Button 
+                              href={config.cameras[camera]['webui_url']}
                               target="_blank"
-                              rel="noopener noreferrer"
-                              href={config.cameras[camera]['visit_url']}
                             >
-                              visit
-                            </Link>
+                             visit<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>