Advanced networking settings (#899)

Exposes NetworkManager interface name and more robustly handles device/interface names internally. --------- Co-authored-by: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
2026-06-28 02:11:40 +00:00 · 2023-09-01 12:58:35 -07:00
parent 08892b9e68
commit 306677e56f
14 changed files with 313 additions and 90 deletions
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -104,7 +104,7 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title class="text-wrap">
-              {{ useStateStore().backendConnected ? "Backend Connected" : "Trying to connect to Backend" }}
+              {{ useStateStore().backendConnected ? "Backend connected" : "Trying to connect to backend" }}
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
--- a/photon-client/src/components/common/cv-select.vue
+++ b/photon-client/src/components/common/cv-select.vue
@@ -35,6 +35,11 @@ const localValue = computed({

 // Computed in case items changes
 const items = computed<SelectItem[]>(() => {
+  // Trivial case for empty list; we have no data
+  if (!props.items.length) {
+    return [];
+  }
+
  // Check if the prop exists on the object to infer object type
  if ((props.items[0] as SelectItem).name) {
    return props.items as SelectItem[];
--- a/photon-client/src/components/settings/NetworkingCard.vue
+++ b/photon-client/src/components/settings/NetworkingCard.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import CvInput from "@/components/common/cv-input.vue";
 import CvRadio from "@/components/common/cv-radio.vue";
 import CvSwitch from "@/components/common/cv-switch.vue";
+import CvSelect from "@/components/common/cv-select.vue";
 import { NetworkConnectionType } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";

@@ -76,6 +77,11 @@ const saveGeneralSettings = () => {
      }
    });
 };
+
+const currentNetworkInterfaceIndex = computed<number>({
+  get: () => useSettingsStore().networkInterfaceNames.indexOf(useSettingsStore().network.networkManagerIface || ""),
+  set: (v) => (useSettingsStore().network.networkManagerIface = useSettingsStore().networkInterfaceNames[v])
+});
 </script>

 <template>
@@ -87,7 +93,7 @@ const saveGeneralSettings = () => {
          v-model="useSettingsStore().network.ntServerAddress"
          label="Team Number/NetworkTables Server Address"
          tooltip="Enter the Team Number or the IP address of the NetworkTables Server"
-          :label-cols="3"
+          :label-cols="4"
          :disabled="useSettingsStore().network.runNTServer"
          :rules="[
            (v) =>
@@ -109,33 +115,65 @@ const saveGeneralSettings = () => {
          The NetworkTables Server Address is not set or is invalid. NetworkTables is unable to connect.
        </v-banner>
        <cv-radio
-          v-show="useSettingsStore().network.shouldManage"
          v-model="useSettingsStore().network.connectionType"
          label="IP Assignment Mode"
          tooltip="DHCP will make the radio (router) automatically assign an IP address; this may result in an IP address that changes across reboots. Static IP assignment means that you pick the IP address and it won't change."
-          :input-cols="12 - 3"
+          :input-cols="12 - 4"
          :list="['DHCP', 'Static']"
+          :disabled="!(useSettingsStore().network.shouldManage && useSettingsStore().network.canManage)"
        />
        <cv-input
          v-if="useSettingsStore().network.connectionType === NetworkConnectionType.Static"
          v-model="useSettingsStore().network.staticIp"
-          :input-cols="12 - 3"
+          :input-cols="12 - 4"
          label="Static IP"
          :rules="[(v) => isValidIPv4(v) || 'Invalid IPv4 address']"
+          :disabled="!(useSettingsStore().network.shouldManage && useSettingsStore().network.canManage)"
        />
        <cv-input
-          v-show="useSettingsStore().network.shouldManage"
          v-model="useSettingsStore().network.hostname"
          label="Hostname"
-          :input-cols="12 - 3"
+          :input-cols="12 - 4"
          :rules="[(v) => isValidHostname(v) || 'Invalid hostname']"
+          :disabled="!(useSettingsStore().network.shouldManage && useSettingsStore().network.canManage)"
        />
+        <v-divider class="pb-3" />
+        <span style="font-weight: 700">Advanced Networking</span>
+        <cv-switch
+          v-model="useSettingsStore().network.shouldManage"
+          :disabled="!useSettingsStore().network.canManage"
+          label="Manage Device Networking"
+          tooltip="If enabled, Photon will manage device hostname and network settings."
+          :label-cols="4"
+          class="pt-2"
+        />
+        <cv-select
+          v-model="currentNetworkInterfaceIndex"
+          label="NetworkManager interface"
+          :disabled="!(useSettingsStore().network.shouldManage && useSettingsStore().network.canManage)"
+          :select-cols="12 - 4"
+          tooltip="Name of the interface PhotonVision should manage the IP address of"
+          :items="useSettingsStore().networkInterfaceNames"
+        />
+        <v-banner
+          v-show="
+            !useSettingsStore().networkInterfaceNames.length &&
+            useSettingsStore().network.shouldManage &&
+            useSettingsStore().network.canManage
+          "
+          rounded
+          color="red"
+          text-color="white"
+          icon="mdi-information-outline"
+        >
+          Photon cannot detect any wired connections! Please send program logs to the developers for help.
+        </v-banner>
        <cv-switch
          v-model="useSettingsStore().network.runNTServer"
          label="Run NetworkTables Server (Debugging Only)"
          tooltip="If enabled, this device will create a NT server. This is useful for home debugging, but should be disabled on-robot."
          class="mt-3 mb-3"
-          :label-cols="3"
+          :label-cols="4"
        />
        <v-banner
          v-show="useSettingsStore().network.runNTServer"
--- a/photon-client/src/stores/settings/GeneralSettingsStore.ts
+++ b/photon-client/src/stores/settings/GeneralSettingsStore.ts
@@ -1,5 +1,11 @@
 import { defineStore } from "pinia";
-import type { GeneralSettings, LightingSettings, MetricData, NetworkSettings } from "@/types/SettingTypes";
+import type {
+  GeneralSettings,
+  LightingSettings,
+  MetricData,
+  NetworkSettings,
+  ConfigurableNetworkSettings
+} from "@/types/SettingTypes";
 import { NetworkConnectionType } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
 import axios from "axios";
@@ -23,10 +29,17 @@ export const useSettingsStore = defineStore("settings", {
    network: {
      ntServerAddress: "",
      shouldManage: true,
+      canManage: true,
      connectionType: NetworkConnectionType.DHCP,
      staticIp: "",
      hostname: "photonvision",
-      runNTServer: false
+      runNTServer: false,
+      networkInterfaceNames: [
+        {
+          connName: "Example Wired Connection",
+          devName: "eth0"
+        }
+      ]
    },
    lighting: {
      supported: true,
@@ -47,6 +60,9 @@ export const useSettingsStore = defineStore("settings", {
  getters: {
    gpuAccelerationEnabled(): boolean {
      return this.general.gpuAcceleration !== undefined;
+    },
+    networkInterfaceNames(): string[] {
+      return this.network.networkInterfaceNames.map((i) => i.connName);
    }
  },
  actions: {
@@ -77,12 +93,11 @@ export const useSettingsStore = defineStore("settings", {
      this.network = data.networkSettings;
    },
    saveGeneralSettings() {
-      const payload: Required<NetworkSettings> = {
+      const payload: Required<ConfigurableNetworkSettings> = {
        connectionType: this.network.connectionType,
        hostname: this.network.hostname,
        networkManagerIface: this.network.networkManagerIface || "",
        ntServerAddress: this.network.ntServerAddress,
-        physicalInterface: this.network.physicalInterface || "",
        runNTServer: this.network.runNTServer,
        setDHCPcommand: this.network.setDHCPcommand || "",
        setStaticCommand: this.network.setStaticCommand || "",
--- a/photon-client/src/types/SettingTypes.ts
+++ b/photon-client/src/types/SettingTypes.ts
@@ -24,6 +24,11 @@ export enum NetworkConnectionType {
  Static = 1
 }

+export interface NetworkInterfaceType {
+  connName: string;
+  devName: string;
+}
+
 export interface NetworkSettings {
  ntServerAddress: string;
  connectionType: NetworkConnectionType;
@@ -31,12 +36,15 @@ export interface NetworkSettings {
  hostname: string;
  runNTServer: boolean;
  shouldManage: boolean;
+  canManage: boolean;
  networkManagerIface?: string;
-  physicalInterface?: string;
  setStaticCommand?: string;
  setDHCPcommand?: string;
+  networkInterfaceNames: NetworkInterfaceType[];
 }

+export type ConfigurableNetworkSettings = Omit<NetworkSettings, "canManage" | "networkInterfaceNames">;
+
 export interface LightingSettings {
  supported: boolean;
  brightness: number;