Allow user to change network interface prioprity

core/frontend/src/App.vue

@@ -36,7 +36,7 @@
  color="white"
  @click="drawer = true"
  />
- <Draggable v-model="selected_widgets" class="d-flex align-center justify-center">
+ <draggable v-model="selected_widgets" class="d-flex align-center justify-center">
  <component
  :is="getWidget(widget_name)"
  v-for="(widget_name, i) in selected_widgets"
@@ -53,6 +53,7 @@
  <v-spacer />
  <beacon-tray-menu />
  <health-tray-menu />
+ <internet-tray-menu />
  <theme-tray-menu />
  <vehicle-reboot-required-tray-menu />
  <pirate-mode-tray-menu />
@@ -326,6 +327,7 @@ import updateTime from '@/utils/update_time'
 
 import Alerter from './components/app/Alerter.vue'
 import BackendStatusChecker from './components/app/BackendStatusChecker.vue'
+import InternetTrayMenu from './components/app/InternetTrayMenu.vue'
 import NewVersionNotificator from './components/app/NewVersionNotificator.vue'
 import PiradeModeTrayMenu from './components/app/PirateModeTrayMenu.vue'
 import PowerMenu from './components/app/PowerMenu.vue'
@@ -352,6 +354,7 @@ export default Vue.extend({
 
  components: {
  'beacon-tray-menu': BeaconTrayMenu,
+ 'internet-tray-menu': InternetTrayMenu,
  'notification-tray-button': NotificationTrayButton,
  'pirate-mode-tray-menu': PiradeModeTrayMenu,
  'theme-tray-menu': ThemeTrayMenu,

core/frontend/src/components/app/InternetTrayMenu.vue

@@ -0,0 +1,64 @@
+<template>
+ <v-menu
+ v-model="show_menu"
+ :close-on-content-click="false"
+ nudge-left="275"
+ nudge-bottom="25"
+ :disabled="!settings.is_pirate_mode"
+ >
+ <template
+ #activator="{ on, attrs }"
+ >
+ <v-card
+ class="px-1"
+ elevation="0"
+ color="transparent"
+ v-bind="attrs"
+ v-on="on"
+ >
+ <v-icon
+ color="white"
+ :title="tooltip"
+ >
+ {{ helper.has_internet ? 'mdi-web' : 'mdi-web-off' }}
+ </v-icon>
+ </v-card>
+ </template>
+ <v-dialog
+ v-model="show_menu"
+ width="fit-content"
+ max-width="80%"
+ >
+ <network-interface-priority-menu
+ v-if="show_menu"
+ @close="show_menu = false"
+ />
+ </v-dialog>
+ </v-menu>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import settings from '@/libs/settings'
+import helper from '@/store/helper'
+
+import NetworkInterfacePriorityMenu from './NetworkInterfacePriorityMenu.vue'
+
+export default Vue.extend({
+ name: 'InternetTrayMenu',
+ components: {
+ NetworkInterfacePriorityMenu,
+ },
+ data: () => ({
+ helper,
+ settings,
+ show_menu: false,
+ }),
+ computed: {
+ tooltip() {
+ return helper.has_internet ? 'Vehicle has internet access.' : 'Internet connection is not available.'
+ },
+ },
+})
+</script>

core/frontend/src/components/app/NetworkInterfacePriorityMenu.vue

@@ -0,0 +1,116 @@
+<template>
+ <v-card class="pa-2 mx-auto" max-width="350">
+ <v-list>
+ <v-card-title class="pt-2">
+ Change network interface priority
+ </v-card-title>
+ <v-card-subtitle class="text-md-center" max-width="30">
+ Move network interfaces over
+ to change network access priority
+ </v-card-subtitle>
+ <draggable v-model="interfaces">
+ <v-card
+ v-for="element, index in interfaces"
+ :key="index"
+ class="pl-3 ma-2 pa-1 d-flex align-center justify-center"
+ style="cursor: pointer"
+ >
+ {{ order(index + 1) }}
+ <v-spacer />
+ {{ element.name }}
+ <v-spacer />
+ <v-icon
+ v-text="'mdi-drag'"
+ />
+ </v-card>
+ </draggable>
+ <v-progress-linear
+ v-if="is_loading"
+ indeterminate
+ min-width="300"
+ class="mb-0"
+ />
+ </v-list>
+ <v-divider />
+ <v-card-actions class="justify-center pa-2">
+ <v-btn
+ color="success"
+ @click="setHighestInterface()"
+ >
+ Apply
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import Notifier from '@/libs/notifier'
+import ethernet from '@/store/ethernet'
+import { EthernetInterface } from '@/types/ethernet'
+import { ethernet_service } from '@/types/frontend_services'
+import back_axios from '@/utils/api'
+
+const notifier = new Notifier(ethernet_service)
+
+export default Vue.extend({
+ name: 'NetworkInterfacePriorityMenu',
+ data() {
+ return {
+ interfaces: [] as EthernetInterface[],
+ }
+ },
+ computed: {
+ is_loading(): boolean {
+ return this.interfaces.isEmpty()
+ },
+ },
+ async mounted() {
+ await this.fetchAvailableInterfaces()
+ },
+ methods: {
+ close() {
+ this.$emit('close')
+ },
+ order(index: number): string {
+ // Based over: https://stackoverflow.com/a/39466341
+ return `${index}${['st', 'nd', 'rd'][((index + 90) % 100 - 10) % 10 - 1] || 'th'}`
+ },
+ async setHighestInterface(): Promise<void> {
+ const interface_priority = this.interfaces.map((inter) => ({ name: inter.name }))
+ await back_axios({
+ method: 'post',
+ url: `${ethernet.API_URL}/set_interfaces_priority`,
+ timeout: 10000,
+ data: interface_priority,
+ })
+ .catch((error) => {
+ const message = `Could not increase the priority for interface '${interface_priority}', ${error}.`
+ notifier.pushError('INCREASE_NETWORK_INTERFACE_METRIC', message)
+ })
+ this.close()
+ },
+ async fetchAvailableInterfaces(): Promise<void> {
+ await back_axios({
+ method: 'get',
+ url: `${ethernet.API_URL}/interfaces`,
+ timeout: 5000,
+ })
+ .then((response) => {
+ const interfaces = response.data as EthernetInterface[]
+ interfaces.sort((a, b) => {
+ if (!a.info) return 1
+ if (!b.info) return -1
+ return b.info.priority - a.info.priority
+ })
+ this.interfaces = interfaces
+ })
+ .catch((error) => {
+ ethernet.setInterfaces([])
+ notifier.pushBackError('ETHERNET_AVAILABLE_INTERFACES_FETCH_FAIL', error)
+ })
+ },
+ },
+})
+</script>

core/frontend/src/store/helper.ts

@@ -0,0 +1,62 @@
+import {
+ Action,
+ getModule, Module, Mutation, VuexModule,
+} from 'vuex-module-decorators'
+
+import Notifier from '@/libs/notifier'
+import store from '@/store'
+import { helper_service } from '@/types/frontend_services'
+import back_axios from '@/utils/api'
+import { callPeriodically } from '@/utils/helper_functions'
+
+const notifier = new Notifier(helper_service)
+
+type CheckSiteStatus = {
+ site: string;
+ online: boolean;
+ error: string | null;
+};
+
+type SiteStatus = Record<string, CheckSiteStatus>
+
+@Module({
+ dynamic: true,
+ store,
+ name: 'helper',
+})
+
+class PingStore extends VuexModule {
+ API_URL = '/helper/latest'
+
+ has_internet = false
+
+ @Mutation
+ setHasInternet(has_internet: boolean): void {
+ this.has_internet = has_internet
+ }
+
+ @Action
+ async checkInternetAccess(): Promise<void> {
+ back_axios({
+ method: 'get',
+ url: `${this.API_URL}/check_internet_access`,
+ timeout: 10000,
+ })
+ .then((response) => {
+ const has_internet = !Object.values(response.data as SiteStatus)
+ .filter((item) => item.online)
+ .isEmpty()
+
+ this.setHasInternet(has_internet)
+ })
+ .catch((error) => {
+ notifier.pushBackError('INTERNET_CHECK_FAIL', error)
+ })
+ }
+}
+
+export { PingStore }
+
+const ping: PingStore = getModule(PingStore)
+callPeriodically(ping.checkInternetAccess, 20000)
+export default ping

core/frontend/src/types/ethernet.ts

@@ -12,6 +12,7 @@ export interface InterfaceAddress {
 export interface InterfaceInfo {
  connected: boolean,
  number_of_disconnections: number,
+ priority: number,
 }
 
 export interface EthernetInterface {

core/frontend/src/types/frontend_services.ts

@@ -132,3 +132,10 @@ export const bag_of_holders_service: Service = {
  company: 'Blue Robotics',
  version: '0.1.0',
 }
+
+export const helper_service: Service = {
+ name: 'Helper service',
+ description: 'Simple helper service for the frontend and simple features',
+ company: 'Blue Robotics',
+ version: '0.1.0',
+}