(feature) Backtest History (#680)

* Restore Recurring order on FE

* HistoryButton: moved to separated component

* Backtest: add history/new test toggler

* PanelButton: align text and icon

* fetch strategy backtests

* BT history: recieve data from data-server

* BT history: layout list

* BT history: restructure components and folders

* BT history: launch to details tab

* BT history: details layout"

* fix prop validation

* BT history: fix styles

* BT history: results

* Revert "Merge pull request #394 from dmytroshch/fix/backtest-clear"

This reverts commit 755f7dd, reversing
changes made to 7e41af4.

* fixed: new test button

* BT: add bt to history after execution

* BT: log error messages during execution

* BT: update initial messages

* BT: fix button style

* BT: reset tab state when strategy has changed

* BT: change fetching history logic

* removed duplicated action

* rename method

* BT: remove history on strategy delete

* BT history: move some component state properties to redux store

* StrategyLiveChart: unify data

* removed unused

* resolve useCallback dependecies

* Show backtest range in results

* fix prop validation

* getting recurring ao atomic orders

* fix failed order layout

* Resolve issue with recurring AO template selection

* OrderHistory: add id property for failed order

* improve formatTime fn

* update ufx-ui to 0.15.3

* DatePicker: fix clipping with parent's container

* DatePicker: remove unused

* DatePicker: limit min/max time, improve onChange handler

* Recurring: improve end date input

* DatePicker: improve position

* BacktestOptionsPanel: use DatePicker from ui components

* BacktestOptionsPanel: resolve issue with time period dropdown which is not eqaul to start/endDate

* Message for invalid api creds

* resolve conflicts

* resolve lint

* resolve lint

src/components/BacktestOptionsPanel/BacktestResultsOptionsPanel.js

@@ -18,6 +18,16 @@ import WSActions from '../../redux/actions/ws'
 import { BACKTEST_TAB_SECTIONS } from '../../redux/reducers/ui'
 import { getCurrentHistoryBacktest } from '../../redux/selectors/ws'
 
+const renderBacktestRange = (backtest, formatTime, t) => (
+  <p>
+    {t('strategyEditor.backtestHistoryResults')}
+    &nbsp;
+    <b>{renderDate(_get(backtest, 'start', 0), formatTime, false)}</b>
+    &nbsp; - &nbsp;
+    <b>{renderDate(_get(backtest, 'end', 0), formatTime, false)}</b>
+  </p>
+)
+
 const BacktestResultsOptionsPanel = ({ showFullscreenChart }) => {
   const formatTime = useSelector(getFormatTimeFn)
   const backtest = useSelector(getCurrentHistoryBacktest)
@@ -45,13 +55,7 @@ const BacktestResultsOptionsPanel = ({ showFullscreenChart }) => {
             isActive={false}
             icon={<Icon name='arrow-left' className='icon' />}
           />
-          <p>
-            {t('strategyEditor.backtestHistoryResults')}
-            &nbsp;
-            <b>
-              {renderDate(_get(backtest, 'timestamp', 0), formatTime, false)}
-            </b>
-          </p>
+          {renderBacktestRange(backtest, formatTime, t)}
           <Button
             className='hfui-strategy-options__option-btn'
             label={t('strategyEditor.newTest')}
@@ -62,6 +66,7 @@ const BacktestResultsOptionsPanel = ({ showFullscreenChart }) => {
       ) : (
         <div className='hfui-strategy-options__results-container'>
           <p>{t('strategyEditor.backtestSuccessful')}</p>
+          {renderBacktestRange(backtest, formatTime, t)}
           <Button
             className='hfui-strategy-options__option-btn'
             label={t('strategyEditor.newTest')}

src/components/BacktestProgressBar/BacktestProgressBar.js

@@ -64,7 +64,11 @@ const BacktestProgressBar = ({ percent, startedOn }) => {
 
 BacktestProgressBar.propTypes = {
   percent: PropTypes.number.isRequired,
-  startedOn: PropTypes.number.isRequired,
+  startedOn: PropTypes.number,
+}
+
+BacktestProgressBar.defaultProps = {
+  startedOn: new Date().getTime(),
 }
 
 export default BacktestProgressBar

src/components/StrategyEditor/tabs/BacktestTab.js

@@ -30,6 +30,7 @@ import UIActions from '../../../redux/actions/ui'
 import WSTypes from '../../../redux/constants/ws'
 import {
   getBacktestState,
+  getCurrentHistoryBacktest,
   getCurrentStrategyBacktestsList,
 } from '../../../redux/selectors/ws'
 import { BACKTEST_TAB_SECTIONS } from '../../../redux/reducers/ui'
@@ -65,6 +66,7 @@ const BacktestTab = (props) => {
   )
   const activeSection = useSelector(getBacktestActiveSection)
   const backtestState = useSelector(getBacktestState)
+  const currentHistoryBacktest = useSelector(getCurrentHistoryBacktest)
 
   const {
     finished = false,
@@ -105,7 +107,7 @@ const BacktestTab = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [finished])
 
-  // If a strategy has changed, reset tab state
+  // Fetch BT history list
   useEffect(() => {
     if (!isBacktestListFetched) {
       dispatch(
@@ -120,6 +122,18 @@ const BacktestTab = (props) => {
 
   const renderGridComponents = useCallback(
     (i) => {
+      const {
+        timeframe, symbol, candleSeed, start, end, executionId,
+      } = currentHistoryBacktest
+      const chartOptions = {
+        timeframe,
+        symbol,
+        candleSeed,
+        executionId,
+        start,
+        end,
+      }
+
       switch (i) {
         case COMPONENTS_KEYS.OPTIONS:
           return showBacktestResults ? (
@@ -141,7 +155,7 @@ const BacktestTab = (props) => {
             <StrategyLiveChart
               indicators={indicators}
               markets={markets}
-              strategy={strategy}
+              options={chartOptions}
               fullscreenChart={fullscreenChart}
               exitFullscreenChart={hideFullscreenChart}
               trades={trades}
@@ -189,6 +203,7 @@ const BacktestTab = (props) => {
       results,
       positions,
       layoutConfig,
+      currentHistoryBacktest,
     ],
   )
 

src/components/StrategyEditor/tabs/StrategyTab/StrategyLiveTab.js

@@ -72,6 +72,13 @@ const StrategyLiveTab = (props) => {
 
   const renderGridComponents = useCallback(
     (i) => {
+      const chartOptions = {
+        candleSeed: strategy.strategyOptions.candleSeed,
+        symbol: strategy.strategyOptions.symbol.wsID,
+        executionId: strategy.executionId || strategy.id,
+        start: strategy.startedOn,
+        end: strategy.stoppedOn,
+      }
       switch (i) {
         case COMPONENTS_KEYS.OPTIONS:
           return (
@@ -91,11 +98,10 @@ const StrategyLiveTab = (props) => {
               indicators={indicators}
               lastOpenPosition={lastOpenPosition}
               markets={markets}
-              strategy={strategy}
+              options={chartOptions}
               fullscreenChart={fullscreenChart}
               exitFullscreenChart={unsetFullScreenChart}
               trades={trades}
-              isExecuting={executing}
             />
           )
 

src/components/StrategyLiveChart/StrategyLiveChart.js

@@ -16,7 +16,6 @@ import { getPositionTooltip } from '../../util/chart'
 import {
   INDICATORS_ARRAY_SHAPE,
   MARKET_SHAPE,
-  STRATEGY_SHAPE,
   STRATEGY_TRADE_SHAPE,
 } from '../../constants/prop-types-shapes'
 import PanelIconButton from '../../ui/Panel/Panel.IconButton'
@@ -28,36 +27,30 @@ const StrategyLiveChart = ({
   markets,
   fullscreenChart,
   exitFullscreenChart,
-  strategy,
+  options,
   lastOpenPosition,
   trades,
   isBacktest,
-  isExecuting,
 }) => {
   const {
-    strategyOptions: {
-      timeframe, symbol, startDate, endDate,
-    },
-    id,
-    executionId = id,
-    startedOn,
-    stoppedOn,
-  } = strategy
-  const start = isBacktest ? new Date(startDate).getTime() : startedOn
-  const end = isBacktest
-    ? new Date(endDate).getTime()
-    : isExecuting
-      ? null
-      : stoppedOn
+    timeframe,
+    symbol,
+    candleSeed,
+    executionId,
+    start,
+    end,
+  } = options
+
   const chartRange = useMemo(() => {
     if (start || end) {
       return {
         start,
         end,
+        candleSeed,
       }
     }
     return {}
-  }, [end, start])
+  }, [end, start, candleSeed])
   const { t } = useTranslation()
   const settingsTheme = useSelector(getThemeSetting)
   const chartIndicators = useMemo(
@@ -70,7 +63,7 @@ const StrategyLiveChart = ({
 
   const {
     wsID, uiID, base, quote,
-  } = getStrategyMarket(markets, symbol?.wsID)
+  } = getStrategyMarket(markets, symbol)
   const chartMarket = useMemo(
     () => ({
       wsID,
@@ -152,21 +145,26 @@ const StrategyLiveChart = ({
 
 StrategyLiveChart.propTypes = {
   markets: PropTypes.arrayOf(PropTypes.shape(MARKET_SHAPE)).isRequired,
-  strategy: PropTypes.shape(STRATEGY_SHAPE).isRequired,
+  options: PropTypes.shape({
+    timeframe: PropTypes.string,
+    symbol: PropTypes.string,
+    end: PropTypes.number,
+    start: PropTypes.number,
+    candleSeed: PropTypes.number,
+    executionId: PropTypes.string,
+  }).isRequired,
   indicators: INDICATORS_ARRAY_SHAPE,
   trades: PropTypes.arrayOf(PropTypes.shape(STRATEGY_TRADE_SHAPE)).isRequired,
   fullscreenChart: PropTypes.bool.isRequired,
   exitFullscreenChart: PropTypes.func.isRequired,
   lastOpenPosition: PropTypes.object, // eslint-disable-line
   isBacktest: PropTypes.bool,
-  isExecuting: PropTypes.bool,
 }
 
 StrategyLiveChart.defaultProps = {
   indicators: [],
   isBacktest: false,
   lastOpenPosition: null,
-  isExecuting: false,
 }
 
 export default memo(StrategyLiveChart)

src/redux/reducers/ws/backtestHistory.js

@@ -96,6 +96,7 @@ const reducer = (state = getInitialState(), action = {}) => {
           ...state.mappedKeysByStrategyIds,
           [strategyId]: [...strategyMappedKeys, executionId],
         },
+        backtestId: executionId,
       }
     }