Extract history-load to separate component

src/components/ftbot/BacktestHistoryLoad.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <button
+      class="btn btn-secondary float-right"
+      title="Refresh"
+      aria-label="Refresh"
+      @click="getBacktestHistory"
+    >
+      &#x21bb;
+    </button>
+    <p>
+      Load Historic results from disk. You can click on multiple results to load all of them into
+      freqUI.
+    </p>
+    <b-list-group v-if="backtestHistoryList" class="ml-2">
+      <b-list-group-item
+        v-for="(res, idx) in backtestHistoryList"
+        :key="idx"
+        class="d-flex justify-content-between align-items-center py-1 mb-1"
+        button
+        @click="getBacktestHistoryResult(res.filename)"
+      >
+        <strong>{{ res.strategy }}</strong>
+        backtested on: {{ timestampms(res.backtest_start_time * 1000) }}
+        <small>{{ res.filename }}</small>
+      </b-list-group-item>
+    </b-list-group>
+  </div>
+</template>
+
+<script>
+import { defineComponent, onMounted } from '@vue/composition-api';
+import StoreModules from '@/store/storeSubModules';
+import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
+import { timestampms } from '@/shared/formatters';
+
+export default defineComponent({
+  setup() {
+    const { getBacktestHistory, getBacktestHistoryResult } = useNamespacedActions(
+      StoreModules.ftbot,
+      ['getBacktestHistory', 'getBacktestHistoryResult'],
+    );
+    const { backtestHistoryList } = useNamespacedGetters(StoreModules.ftbot, [
+      'backtestHistoryList',
+    ]);
+
+    onMounted(() => {
+      getBacktestHistory();
+    });
+
+    return {
+      getBacktestHistory,
+      getBacktestHistoryResult,
+      backtestHistoryList,
+      timestampms,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/Backtesting.vue

@@ -9,6 +9,15 @@
           class="col-12 col-lg-order-last col-lg-6 mx-md-5 d-flex flex-wrap justify-content-md-center justify-content-between mb-4"
           :disabled="canRunBacktest"
         >
+          <b-form-radio
+            v-model="btFormMode"
+            name="bt-form-radios"
+            button
+            class="mx-1 flex-samesize-items"
+            value="historicResults"
+            :disabled="!canRunBacktest"
+            >Load Results</b-form-radio
+          >
           <b-form-radio
             v-model="btFormMode"
             name="bt-form-radios"
@@ -75,17 +84,13 @@
         </transition>
       </div>
       <!-- End Left bar -->
-
+      <div
+        v-if="btFormMode == 'historicResults'"
+        class="flex-fill row d-flex flex-column bt-config"
+      >
+        <backtest-history-load />
+      </div>
       <div v-if="btFormMode == 'run'" class="flex-fill row d-flex flex-column bt-config">
-        <button class="btn btn-secondary" @click="getBacktestHistory">Get historic results</button>
-        <div v-if="backtestHistoryList">
-          <div v-for="(res, idx) in backtestHistoryList" :key="idx">
-            <button class="btn btn-secondary" @click="getBacktestHistoryResult(res.filename)">
-              {{ res.filename }} {{ res.strategy }}
-            </button>
-          </div>
-        </div>
-
         <div class="mb-2">
           <span>Strategy</span>
           <StrategySelect v-model="strategy"></StrategySelect>
@@ -308,6 +313,7 @@ import TradesLogChart from '@/components/charts/TradesLog.vue';
 import PairSummary from '@/components/ftbot/PairSummary.vue';
 import TimeframeSelect from '@/components/ftbot/TimeframeSelect.vue';
 import TradeList from '@/components/ftbot/TradeList.vue';
+import BacktestHistoryLoad from '@/components/ftbot/BacktestHistoryLoad.vue';
 
 import {
   BacktestPayload,
@@ -317,7 +323,6 @@ import {
   PairHistoryPayload,
   PlotConfig,
   StrategyBacktestResult,
-  BacktestHistoryEntry,
 } from '@/types';
 
 import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
@@ -330,6 +335,7 @@ const ftbot = namespace(StoreModules.ftbot);
   components: {
     BacktestResultView,
     BacktestResultSelect,
+    BacktestHistoryLoad,
     TimeRangeSelect,
     CandleChartContainer,
     CumProfitChart,
@@ -386,8 +392,6 @@ export default class Backtesting extends Vue {
 
   @ftbot.Getter [BotStoreGetters.canRunBacktest]!: boolean;
 
-  @ftbot.Getter [BotStoreGetters.backtestHistoryList]!: BacktestHistoryEntry[];
-
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   @ftbot.Action getPairHistory!: (payload: PairHistoryPayload) => void;
 
@@ -404,9 +408,6 @@ export default class Backtesting extends Vue {
 
   @ftbot.Action stopBacktest!: () => void;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @ftbot.Action getBacktestHistoryResult!: (filename: string) => void;
-
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   @ftbot.Action setBacktestResultKey!: (key: string) => void;