feature/usb troubleshooter

docker-compose.override.yml

@@ -34,7 +34,7 @@ services:
   #       source: ../brewblox-devcon-spark/brewblox_devcon_spark
   #       target: /app/brewblox_devcon_spark
   #   ports:
-  #     - "5678:5678"
+  #     - '5678:5678'
   #   environment:
   #     - ENABLE_DEBUGGER=1
   #   labels:
@@ -75,3 +75,12 @@ services:
   #     - type: bind
   #       source: ../brewblox-auth/entrypoint.sh
   #       target: /app/entrypoint.sh
+
+  # You need to change "enp8s0" to the name of your physical network interface
+  # reflector:
+  #   image: yuxzhu/mdns-reflector:latest
+  #   restart: on-failure:3
+  #   network_mode: host
+  #   labels:
+  #     - traefik.enable=false
+  #   command: mdns-reflector -fn4 enp8s0 br-${COMPOSE_PROJECT_NAME}

docker-compose.yml

@@ -1,4 +1,10 @@
 name: brewblox-ui
+
+networks:
+  default:
+    driver_opts:
+      com.docker.network.bridge.name: br-${COMPOSE_PROJECT_NAME}
+
 services:
   eventbus:
     image: ghcr.io/brewblox/mosquitto:develop
@@ -64,6 +70,13 @@ services:
         source: ${BREWBLOX_CACHE_DIR}/simulator__spock
         target: /app/simulator
 
+  usb-proxy:
+    image: ghcr.io/brewblox/brewblox-usb-proxy:develop
+    restart: unless-stopped
+    privileged: true
+    labels:
+      - traefik.http.services.usb-proxy.loadbalancer.server.port=5000
+
   tilt:
     image: ghcr.io/brewblox/brewblox-tilt:develop
     restart: unless-stopped

package.json

@@ -54,6 +54,7 @@
     "parse-duration": "^1.1.0",
     "pinia": "^2.1.7",
     "plotly.js": "^2.32.0",
+    "pluralize": "^8.0.0",
     "portal-vue": "^3.0.0",
     "process": "^0.11.10",
     "quasar": "^2.16.2",

src/plugins/spark/service/SparkActions.vue

@@ -6,7 +6,6 @@ import {
   discoverBlocks,
   startResetBlocks,
 } from '@/plugins/spark/utils/actions';
-import { cleanUnusedNames } from '@/plugins/spark/utils/formatting';
 import { useServiceStore } from '@/store/services';
 import { useSystemStore } from '@/store/system';
 import { userUISettings } from '@/user-settings';
@@ -68,7 +67,7 @@ function startDialog(component: GlobalDialogName): void {
       />
       <ActionItem
         icon="mdi-magnify-plus-outline"
-        label="Discover new OneWire blocks"
+        label="Discover blocks"
         @click="discoverBlocks(serviceId)"
       />
       <ActionItem
@@ -96,11 +95,6 @@ function startDialog(component: GlobalDialogName): void {
         label="Controller backups"
         @click="startDialog('SparkBackupDialog')"
       />
-      <ActionItem
-        icon="mdi-tag-remove"
-        label="Remove unused block names"
-        @click="cleanUnusedNames(serviceId)"
-      />
       <ActionItem
         icon="delete"
         label="Remove all blocks"

src/plugins/spark/service/SparkTroubleshooter.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { SparkStatusDescription } from 'brewblox-proto/ts';
-import { computed, provide, reactive } from 'vue';
+import pluralize from 'pluralize';
+import { computed, inject, provide, reactive, ref, watch } from 'vue';
 import { useSparkStore } from '@/plugins/spark/store';
+import {
+  fetchKnownMdnsDevices,
+  fetchKnownUsbDevices,
+} from '@/plugins/spark/store/spark-api';
+import { SparkUsbDevices } from '@/plugins/spark/types';
 import { WidgetContext } from '@/store/features';
-import { ContextKey } from '@/symbols';
+import { ContextKey, NowKey } from '@/symbols';
 import { createDialog } from '@/utils/dialog';
 import { shortDateString } from '@/utils/quantity';
 
@@ -36,6 +42,10 @@ provide(
 );
 
 const sparkStore = useSparkStore();
+const now = inject(NowKey)!;
+
+const mDNSDevices = ref<string[] | null>(null);
+const usbDevices = ref<SparkUsbDevices | null>(null);
 
 const status = computed<SparkStatusDescription | null>(() =>
   sparkStore.statusByService(props.serviceId),
@@ -52,6 +62,34 @@ const connectionStep = computed<ConnectionStep>(() => {
   return status.value.connection_status;
 });
 
+const desiredDeviceId = computed<string | null>(
+  () => status.value?.service.device.device_id ?? null,
+);
+
+const discoveryKindDesc = computed<string>(() => {
+  const kind = status.value?.['discovery_kind'];
+  switch (kind) {
+    case undefined:
+      return 'Unknown';
+    case 'ADDRESS':
+      return 'Fixed IP address';
+    case 'SIM':
+      return 'Simulator';
+    case 'MDNS':
+      return 'mDNS';
+    case 'ALL':
+      return 'USB, mDNS, and MQTT';
+    default:
+      return kind;
+  }
+});
+
+// The Spark 4 does not support USB, and has a device ID of 12 (hex MAC address)
+// If there is no desired device ID, we assume USB may be supported.
+const usbSupported = computed<boolean>(
+  () => desiredDeviceId.value?.length != 12,
+);
+
 function isStepDone(step: ConnectionStep): boolean {
   return stepOrder.indexOf(step) < stepOrder.indexOf(connectionStep.value);
 }
@@ -77,6 +115,21 @@ function startFirmwareUpdate(): void {
 function serviceReboot(): void {
   sparkStore.serviceReboot(props.serviceId);
 }
+
+watch(
+  () => now.value,
+  async () => {
+    if (
+      connectionStep.value != 'UNREACHABLE' &&
+      usbSupported.value &&
+      status.value?.enabled !== false
+    ) {
+      usbDevices.value = await fetchKnownUsbDevices(props.serviceId);
+      mDNSDevices.value = await fetchKnownMdnsDevices(props.serviceId);
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
@@ -140,17 +193,58 @@ function serviceReboot(): void {
           <template v-if="status">
             <template v-if="status.enabled">
               Your Spark service is online, but not connected to your
-              controller.
+              controller. The service discovers controllers using
+              <b>{{ discoveryKindDesc }} </b>, and the desired device ID is
+              <b>{{ desiredDeviceId || 'any' }}</b>
+              .
+
               <ul>
                 <li>Is your controller turned on?</li>
-                <li>Does your controller have the correct firmware?</li>
-                <li>WiFi: Does your controller display its IP address?</li>
                 <li>Are there any error messages in your service logs?</li>
-                <li>
-                  USB: Your service must have been (re)started after plugging in
-                  the USB cable.
-                </li>
-                <li>USB: Can your service access USB devices? (Mac hosts)</li>
+                <li>Does your controller display its IP address?</li>
+                <template v-if="mDNSDevices == null">
+                  <li>Checking mDNS devices...</li>
+                </template>
+                <template v-else>
+                  <li>
+                    Detected
+                    {{ pluralize('controller', mDNSDevices.length, true) }}
+                    using mDNS
+                    <ul>
+                      <li
+                        v-for="dev in mDNSDevices"
+                        :key="dev"
+                      >
+                        {{ dev }}
+                      </li>
+                    </ul>
+                  </li>
+                </template>
+                <template v-if="usbSupported">
+                  <template v-if="usbDevices == null">
+                    <li>Checking USB devices...</li>
+                  </template>
+                  <template v-else-if="usbDevices.enabled">
+                    <li>
+                      Detected
+                      {{
+                        pluralize('controller', usbDevices.devices.length, true)
+                      }}
+                      using USB
+                      <ul>
+                        <li
+                          v-for="dev in usbDevices.devices"
+                          :key="dev"
+                        >
+                          {{ dev }}
+                        </li>
+                      </ul>
+                    </li>
+                  </template>
+                  <template v-else>
+                    <li>USB: The USB proxy is not enabled in brewblox.yml.</li>
+                  </template>
+                </template>
               </ul>
             </template>
             <template v-else>

src/plugins/spark/store/spark-api.ts

@@ -1,6 +1,11 @@
 import { AxiosResponse } from 'axios';
 import { Block, SparkStatusDescription } from 'brewblox-proto/ts';
-import { BlockIds, BlockPatchArgs, SparkBackup } from '@/plugins/spark/types';
+import {
+  BlockIds,
+  BlockPatchArgs,
+  SparkBackup,
+  SparkUsbDevices,
+} from '@/plugins/spark/types';
 import { http, intercept } from '@/utils/http';
 import { notify } from '@/utils/notify';
 
@@ -139,12 +144,6 @@ export const clearBlocks = (serviceId: string): Promise<any> =>
     .post(`/${encodeURIComponent(serviceId)}/blocks/all/delete`)
     .catch(intercept(`Failed to clear blocks on ${serviceId}`));
 
-export const cleanUnusedNames = (serviceId: string): Promise<string[]> =>
-  http
-    .post<BlockIds[]>(`/${encodeURIComponent(serviceId)}/blocks/cleanup`)
-    .then((resp) => resp.data.map((v) => v.id!))
-    .catch(intercept(`Failed to clean unused block names on ${serviceId}`));
-
 export const fetchDiscoveredBlocks = (serviceId: string): Promise<Block[]> =>
   http
     .post<Block[]>(`/${encodeURIComponent(serviceId)}/blocks/discover`)
@@ -280,3 +279,17 @@ export const controllerReboot = (serviceId: string): Promise<any> =>
     .post(`/${encodeURIComponent(serviceId)}/system/reboot/controller`, {})
     .then((resp) => resp.data)
     .catch(intercept(`Failed to reboot ${serviceId}`));
+
+export const fetchKnownUsbDevices = (
+  serviceId: string,
+): Promise<SparkUsbDevices> =>
+  http
+    .post(`/${encodeURIComponent(serviceId)}/system/usb`, {})
+    .then((resp) => resp.data)
+    .catch(intercept(`Failed to query USB devices for ${serviceId}`));
+
+export const fetchKnownMdnsDevices = (serviceId: string): Promise<string[]> =>
+  http
+    .post(`/${encodeURIComponent(serviceId)}/system/mdns`, {})
+    .then((resp) => resp.data)
+    .catch(intercept(`Failed to query mDNS devices for ${serviceId}`));

src/plugins/spark/store/spark-store.ts

@@ -244,10 +244,6 @@ export const useSparkStore = defineStore('sparkStore', () => {
     discoveredBlockIds.value[serviceId] = [];
   }
 
-  async function cleanUnusedNames(serviceId: string): Promise<string[]> {
-    return await sparkApi.cleanUnusedNames(serviceId);
-  }
-
   async function fetchBlock(block: Maybe<Block>): Promise<void> {
     if (block) {
       const fetched = await sparkApi.fetchBlock(block);
@@ -525,7 +521,6 @@ export const useSparkStore = defineStore('sparkStore', () => {
     invalidateBlocks,
     saveEnabled,
     clearDiscoveredBlocks,
-    cleanUnusedNames,
     fetchBlock,
     fetchStoredBlock,
     fetchBlocks,

src/plugins/spark/types.ts

@@ -56,6 +56,11 @@ export interface SparkBackup {
   store: SparkStoreEntry[];
 }
 
+export interface SparkUsbDevices {
+  enabled: boolean;
+  devices: string[];
+}
+
 export interface BlockLimitation {
   target: string;
   constraint: AnyConstraintKey;

src/plugins/spark/utils/formatting.ts

@@ -12,32 +12,13 @@ import {
   OneWireGpioModuleBlock,
 } from 'brewblox-proto/ts';
 import { Enum } from 'typescript-string-enums';
-import { useSparkStore } from '@/plugins/spark/store';
 import { BlockAddress } from '@/plugins/spark/types';
-import { notify } from '@/utils/notify';
 import { matchesType } from '@/utils/objects';
 import { durationString, prettyLink } from '@/utils/quantity';
 
 export const prettyBlock = (v: BlockAddress | null | undefined): string =>
   v?.id || '<not set>';
 
-export async function cleanUnusedNames(
-  serviceId: string | null,
-): Promise<void> {
-  const sparkStore = useSparkStore();
-  if (!sparkStore.has(serviceId)) {
-    return;
-  }
-  const names = await sparkStore.cleanUnusedNames(serviceId);
-
-  const message =
-    names.length > 0
-      ? `Cleaned block names: <i>${names.join(', ')}</i>.`
-      : 'No unused names found.';
-
-  notify.info({ message, icon: 'mdi-tag-remove' });
-}
-
 export const enumHint = (e: Enum<any>): string =>
   'One of: ' +
   Enum.values(e)

yarn.lock

@@ -3124,6 +3124,7 @@ __metadata:
     parse-duration: "npm:^1.1.0"
     pinia: "npm:^2.1.7"
     plotly.js: "npm:^2.32.0"
+    pluralize: "npm:^8.0.0"
     portal-vue: "npm:^3.0.0"
     prettier: "npm:^3.2.5"
     process: "npm:^0.11.10"
@@ -7987,6 +7988,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pluralize@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "pluralize@npm:8.0.0"
+  checksum: 10c0/2044cfc34b2e8c88b73379ea4a36fc577db04f651c2909041b054c981cd863dd5373ebd030123ab058d194ae615d3a97cfdac653991e499d10caf592e8b3dc33
+  languageName: node
+  linkType: hard
+
 "point-in-polygon@npm:^1.1.0":
   version: 1.1.0
   resolution: "point-in-polygon@npm:1.1.0"