Update Online visualization

src/components/ftbot/ReloadControl.vue

@@ -40,6 +40,7 @@ export default class ReloadControl extends Vue {
     this.stopRefresh();
   }
 
+  // TODO-multi: This should be per bot!
   @Getter loggedIn;
 
   @State autoRefresh!: boolean;

src/components/layout/NavBar.vue

@@ -36,7 +36,7 @@
               {{ isBotOnline ? 'Online' : 'Offline' }}
             </b-nav-text>
           </li>
-          <li v-if="loggedIn" class="nav-item">
+          <li v-if="hasBots" class="nav-item">
             <b-nav-item-dropdown right>
               <b-dropdown-item>V: {{ getUiVersion }}</b-dropdown-item>
               <template #button-content>
@@ -63,12 +63,13 @@
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import LoginModal from '@/views/LoginModal.vue';
-import { State, Action, namespace, Getter } from 'vuex-class';
+import { Action, namespace, Getter } from 'vuex-class';
 import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
 import { LayoutActions, LayoutGetters } from '@/store/modules/layout';
 import { BotStoreGetters } from '@/store/modules/ftbot';
 import Favico from 'favico.js';
 import { OpenTradeVizOptions, SettingsGetters } from '@/store/modules/settings';
+import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
 
 const ftbot = namespace('ftbot');
 const layoutNs = namespace('layout');
@@ -80,10 +81,6 @@ const uiSettingsNs = namespace('uiSettings');
 export default class NavBar extends Vue {
   pingInterval: number | null = null;
 
-  @State loggedIn!: boolean;
-
-  @State isBotOnline!: boolean;
-
   @Action setLoggedIn;
 
   @Action loadUIVersion;
@@ -96,6 +93,10 @@ export default class NavBar extends Vue {
 
   @ftbot.Action logout;
 
+  @ftbot.Getter [BotStoreGetters.isBotOnline]!: boolean;
+
+  @ftbot.Getter [MultiBotStoreGetters.hasBots]: boolean;
+
   @ftbot.Getter [BotStoreGetters.botName]: string;
 
   @ftbot.Getter [BotStoreGetters.openTradeCount]: number;
@@ -119,7 +120,7 @@ export default class NavBar extends Vue {
     this.loadUIVersion();
     this.pingInterval = window.setInterval(this.ping, 60000);
 
-    if (this.loggedIn) {
+    if (this.hasBots) {
       // Query botstate - this will enable / disable certain modes
       this.getState();
     }
@@ -133,6 +134,7 @@ export default class NavBar extends Vue {
 
   clickLogout(): void {
     this.logout();
+    // TODO: This should be per bot
     this.setLoggedIn(false);
   }
 

src/store/index.ts

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import userService from '@/shared/userService';
 import { getCurrentTheme, getTheme, storeCurrentTheme } from '@/shared/themes';
 import axios, { AxiosInstance } from 'axios';
 import createBotStore from './modules/botStoreWrapper';
@@ -22,11 +21,8 @@ const store = new Vuex.Store({
     uiSettings: settingsModule,
   },
   state: {
-    ping: '',
-    loggedIn: userService.loggedIn(),
     refreshing: false,
     autoRefresh: JSON.parse(localStorage.getItem(AUTO_REFRESH) || '{}'),
-    isBotOnline: false,
     currentTheme: initCurrentTheme,
     uiVersion: 'dev',
   },
@@ -44,25 +40,18 @@ const store = new Vuex.Store({
     getUiVersion(state) {
       return state.uiVersion;
     },
+    loggedIn(state, getters) {
+      return getters['ftbot/hasBots'];
+    },
   },
   mutations: {
-    setPing(state, ping) {
-      // console.log(ping);
-      const now = Date.now();
-      state.ping = `${ping.status} ${now.toString()}`;
-    },
-    setLoggedIn(state, loggedin: boolean) {
-      state.loggedIn = loggedin;
-    },
     setAutoRefresh(state, newRefreshValue: boolean) {
       state.autoRefresh = newRefreshValue;
     },
     setRefreshing(state, refreshing: boolean) {
       state.refreshing = refreshing;
     },
-    setIsBotOnline(state, isBotOnline: boolean) {
-      state.isBotOnline = isBotOnline;
-    },
+
     mutateCurrentTheme(state, newTheme: string) {
       storeCurrentTheme(newTheme);
       state.currentTheme = newTheme;

src/store/modules/botStoreWrapper.ts

@@ -5,6 +5,12 @@ interface FTMultiBotState {
   availableBots: string[];
 }
 
+export enum MultiBotStoreGetters {
+  hasBots = 'hasBots',
+  selectedBot = 'selectedBot',
+  allAvailableBots = 'allAvailableBots',
+}
+
 export default function createBotStore(store) {
   const state: FTMultiBotState = {
     selectedBot: 'ftbot.0',
@@ -13,13 +19,13 @@ export default function createBotStore(store) {
 
   // All getters working on all bots should be prefixed with all.
   const getters = {
-    hasBots(state: FTMultiBotState): boolean {
+    [MultiBotStoreGetters.hasBots](state: FTMultiBotState): boolean {
       return state.availableBots.length > 0;
     },
-    selectedBot(state: FTMultiBotState): string {
+    [MultiBotStoreGetters.selectedBot](state: FTMultiBotState): string {
       return state.selectedBot;
     },
-    allAvailableBots(state: FTMultiBotState): string[] {
+    [MultiBotStoreGetters.allAvailableBots](state: FTMultiBotState): string[] {
       return state.availableBots;
     },
   };

src/store/modules/ftbot/index.ts

@@ -43,6 +43,7 @@ import { showAlert } from '../alerts';
 
 export enum BotStoreGetters {
   botName = 'botName',
+  isBotOnline = 'isBotOnline',
   openTrades = 'openTrades',
   openTradeCount = 'openTradeCount',
   tradeDetail = 'tradeDetail',
@@ -137,6 +138,9 @@ export function createBotSubStore(botId: string) {
       [BotStoreGetters.botName](state: FtbotStateType) {
         return state.botState?.bot_name || 'freqtrade';
       },
+      [BotStoreGetters.isBotOnline](state: FtbotStateType): boolean {
+        return state.isBotOnline;
+      },
       [BotStoreGetters.plotConfig](state: FtbotStateType) {
         return state.customPlotConfig[state.plotConfigName] || { ...EMPTY_PLOTCONFIG };
       },
@@ -276,6 +280,13 @@ export function createBotSubStore(botId: string) {
       },
     },
     mutations: {
+      setPing(state: FtbotStateType, ping) {
+        const now = Date.now();
+        state.ping = `${ping.status} ${now.toString()}`;
+      },
+      setIsBotOnline(state: FtbotStateType, isBotOnline: boolean) {
+        state.isBotOnline = isBotOnline;
+      },
       updateRefreshRequired(state: FtbotStateType, refreshRequired: boolean) {
         state.refreshRequired = refreshRequired;
       },
@@ -380,16 +391,14 @@ export function createBotSubStore(botId: string) {
       },
     },
     actions: {
-      [BotStoreActions.ping]({ commit, rootState }) {
-        if (rootState.loggedIn) {
+      [BotStoreActions.ping]({ commit }) {
         api
           .get('/ping')
           .then((result) => {
-              commit('setPing', result.data, { root: true });
-              commit('setIsBotOnline', result.data, { root: true });
+            commit('setPing', result.data);
+            commit('setIsBotOnline', true);
           })
           .catch(console.error);
-        }
       },
       [BotStoreActions.logout]() {
         userService.logout();

src/store/modules/ftbot/state.ts

@@ -17,6 +17,8 @@ import {
 } from '@/types';
 
 export interface FtbotStateType {
+  ping: string;
+  isBotOnline: boolean;
   version: string;
   lastLogs: LogLine[];
   refreshRequired: boolean;
@@ -56,6 +58,8 @@ export interface FtbotStateType {
 
 const state = (): FtbotStateType => {
   return {
+    ping: '',
+    isBotOnline: false,
     version: '',
     lastLogs: [],
     refreshRequired: true,