Implement HTTP proxy option (#515). (#521)

This commit adds a "Proxy" field to the network settings screen, which
can be used to specify a HTTP proxy for any outgoing requests from the
device.

ui/src/hooks/stores.ts

@@ -747,6 +747,7 @@ export type TimeSyncMode =
 export interface NetworkSettings {
   hostname: string;
   domain: string;
+  http_proxy: string;
   ipv4_mode: IPv4Mode;
   ipv6_mode: IPv6Mode;
   lldp_mode: LLDPMode;

ui/src/routes/devices.$id.settings.network.tsx

@@ -34,6 +34,7 @@ dayjs.extend(relativeTime);
 
 const defaultNetworkSettings: NetworkSettings = {
   hostname: "",
+  http_proxy: "",
   domain: "",
   ipv4_mode: "unknown",
   ipv6_mode: "unknown",
@@ -185,6 +186,10 @@ export default function SettingsNetworkRoute() {
     setNetworkSettings({ ...networkSettings, hostname: value });
   };
 
+  const handleProxyChange = (value: string) => {
+    setNetworkSettings({ ...networkSettings, http_proxy: value });
+  };
+
   const handleDomainChange = (value: string) => {
     setNetworkSettings({ ...networkSettings, domain: value });
   };
@@ -253,6 +258,26 @@ export default function SettingsNetworkRoute() {
             </div>
           </SettingsItem>
         </div>
+        <div className="space-y-4">
+          <SettingsItem
+            title="HTTP Proxy"
+            description="Proxy server for outgoing HTTP(S) requests from the device. Blank for none."
+          >
+            <div className="relative">
+              <div>
+                <InputField
+                  size="SM"
+                  type="text"
+                  placeholder="http://proxy.example.com:8080/"
+                  defaultValue={networkSettings.http_proxy}
+                  onChange={e => {
+                    handleProxyChange(e.target.value);
+                  }}
+                />
+              </div>
+            </div>
+          </SettingsItem>
+        </div>
 
         <div className="space-y-4">
           <div className="space-y-1">