From b98bf6d1cac909287f08b453abfba6cde0f074ac Mon Sep 17 00:00:00 2001
From: yshepilov <buggygm@gmail.com>
Date: Thu, 21 May 2020 16:58:04 +0200
Subject: [PATCH] #145 added possibility to run multiple instances of the same
 script

---
 web-src/src/assets/css/index.css              |   5 -
 web-src/src/common/components/AppLayout.vue   |  69 ++--
 web-src/src/common/utils/common.js            |   8 +
 web-src/src/main-app/MainApp.vue              |   2 +-
 .../components/history/AppHistoryHeader.vue   |  21 +-
 .../scripts/ExecutionInstanceTabs.vue         | 225 +++++++++++++
 .../components/scripts/MainAppContent.vue     |   3 +-
 .../components/scripts/ScriptHeader.vue       |  34 +-
 .../scripts/script-parameters-view.vue        |   4 +-
 .../components/scripts/script-view.vue        |  13 +-
 web-src/src/main-app/index.js                 |   6 +
 web-src/src/main-app/store/index.js           |  10 +-
 .../main-app/store/scriptExecutionManager.js  | 104 ++++--
 .../tests/unit/common/utils/common_test.js    |  38 ++-
 .../unit/history/execution-details_test.js    |   3 +-
 .../scripts/ExecutionInstanceTabs_test.js     | 310 ++++++++++++++++++
 .../scripts/ScriptLoadingText_test.js         |   3 -
 .../store/scriptExecutionManager_test.js      | 248 ++++++++++++++
 web-src/tests/unit/test_utils.js              |   2 +
 19 files changed, 1019 insertions(+), 89 deletions(-)
 create mode 100644 web-src/src/main-app/components/scripts/ExecutionInstanceTabs.vue
 create mode 100644 web-src/tests/unit/main-app/components/scripts/ExecutionInstanceTabs_test.js
 create mode 100644 web-src/tests/unit/main-app/store/scriptExecutionManager_test.js

diff --git a/web-src/src/assets/css/index.css b/web-src/src/assets/css/index.css
index 0f254863..da2b1fc9 100644
--- a/web-src/src/assets/css/index.css
+++ b/web-src/src/assets/css/index.css
@@ -156,8 +156,3 @@ input[type=checkbox]:not(.browser-default) + span {
 #login-google_oauth-button[disabled] {
     color: #B0B0B0;
 }
-
-.main-content-header {
-    background: url('../titleBackground_small.jpg') no-repeat;
-    background-size: cover;
-}
\ No newline at end of file
diff --git a/web-src/src/common/components/AppLayout.vue b/web-src/src/common/components/AppLayout.vue
index 7ae6545e..2e36a1c7 100644
--- a/web-src/src/common/components/AppLayout.vue
+++ b/web-src/src/common/components/AppLayout.vue
@@ -133,6 +133,8 @@
 
         display: flex;
         flex-direction: column;
+
+        width: 100vw;
     }
 
     .app-menu-button {
@@ -141,7 +143,6 @@
         float: left;
         position: relative;
         z-index: 1;
-        margin-right: 8px;
         margin-top: 12px;
         text-align: center;
     }
@@ -155,36 +156,20 @@
         line-height: 1;
     }
 
-    @media (max-width: 992px) {
-        .app-sidebar {
-            position: absolute;
-            height: 100vh;
-            z-index: 999;
-            transition: transform 0.3s;
-        }
-
-        .app-sidebar.collapsed {
-            -webkit-transform: translateX(-105%);
-            transform: translateX(-105%);
-        }
-
-        .sidenav-overlay {
-            opacity: 1;
-            display: block;
-            background-color: rgba(0, 0, 0, 0.4);
-        }
-
-        .app-menu-button {
-            display: block;
-        }
-    }
-
     .content-header {
         flex: 0 0 auto;
+        overflow: hidden;
+        width: 100%;
+
         z-index: 1;
 
+        padding-left: 24px;
+
         border-bottom: 1px solid #C8C8C8;
         position: relative;
+
+        background: url('../../assets/titleBackground_small.jpg') no-repeat;
+        background-size: cover;
     }
 
     .content-header.drop-shadow {
@@ -199,9 +184,43 @@
         margin: 0;
         bottom: 0;
         position: absolute;
+        left: 0;
     }
 
     .content-panel {
         flex: 1 1 0;
     }
+
+    @media (max-width: 992px) {
+        .content-header {
+            padding-left: 0;
+        }
+
+        .app-sidebar {
+            position: absolute;
+            height: 100vh;
+            z-index: 999;
+            transition: transform 0.3s;
+        }
+
+        .app-sidebar.collapsed {
+            -webkit-transform: translateX(-105%);
+            transform: translateX(-105%);
+        }
+
+        .sidenav-overlay {
+            opacity: 1;
+            display: block;
+            background-color: rgba(0, 0, 0, 0.4);
+            position: absolute;
+            z-index: 500;
+            width: 100%;
+            height: 100%;
+        }
+
+        .app-menu-button {
+            display: block;
+            margin-right: 12px;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/web-src/src/common/utils/common.js b/web-src/src/common/utils/common.js
index 00dccf15..0f0a856e 100644
--- a/web-src/src/common/utils/common.js
+++ b/web-src/src/common/utils/common.js
@@ -658,4 +658,12 @@ export function randomInt(start, end) {
 
     const random = Math.random() * (end - start);
     return Math.floor(random) + start
+}
+
+export function trimTextNodes(el) {
+    for (let node of el.childNodes) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            node.data = node.data.trim();
+        }
+    }
 }
\ No newline at end of file
diff --git a/web-src/src/main-app/MainApp.vue b/web-src/src/main-app/MainApp.vue
index ec611e9a..2d480f81 100644
--- a/web-src/src/main-app/MainApp.vue
+++ b/web-src/src/main-app/MainApp.vue
@@ -61,7 +61,7 @@
     }
 </script>
 
-<style scoped>
+<style>
     h1, h2, h3, h4, h5, h6 {
         margin: 0;
     }
diff --git a/web-src/src/main-app/components/history/AppHistoryHeader.vue b/web-src/src/main-app/components/history/AppHistoryHeader.vue
index 78b6138e..5ba65391 100644
--- a/web-src/src/main-app/components/history/AppHistoryHeader.vue
+++ b/web-src/src/main-app/components/history/AppHistoryHeader.vue
@@ -3,7 +3,7 @@
         <router-link :to="baseRoute" class="breadcrumb">
             <h3 class="header">History</h3>
         </router-link>
-        <router-link :to="$route.path" class="breadcrumb" v-if="selectedExecutionString">
+        <router-link :to="$route.path" class="breadcrumb execution-breadcrumb" v-if="selectedExecutionString">
             <h3 class="header">{{ selectedExecutionString }}</h3>
         </router-link>
     </div>
@@ -37,17 +37,30 @@
 
 <style scoped>
     .main-content-header {
-        padding: 0.9rem;
+        padding: 0;
+        height: 56px;
+        display: flex;
+        align-items: center;
     }
 
     .main-content-header h3 {
+        padding: 0;
         display: inline;
-        padding: 0 0.3rem;
     }
 
     .main-content-header h3,
     .main-content-header .breadcrumb:before {
         color: rgba(0, 0, 0, 0.87);
-        line-height: 25px;
+        line-height: 1.3em;
+        font-size: 1.3em;
+    }
+
+    .main-content-header .execution-breadcrumb {
+        color: rgba(0, 0, 0, 0.87);
+        flex: 1 1 0;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 </style>
\ No newline at end of file
diff --git a/web-src/src/main-app/components/scripts/ExecutionInstanceTabs.vue b/web-src/src/main-app/components/scripts/ExecutionInstanceTabs.vue
new file mode 100644
index 00000000..5acec72e
--- /dev/null
+++ b/web-src/src/main-app/components/scripts/ExecutionInstanceTabs.vue
@@ -0,0 +1,225 @@
+<template>
+    <div class="execution-instance-tabs" v-if="hasExecutors">
+        <ul class="execution-tabs" ref="tabs">
+            <li :ref="'executor' + executor.state.id" class="tab executor-tab" v-for="executor in scriptExecutors">
+                <a :class="{active: (executor === currentExecutor), finished: (executor.state.status === 'finished')}"
+                   @click="selectExecutor(executor)"
+                   class="btn-flat"
+                   v-trim-text>
+                    <i class="material-icons">{{executor.state.status === 'finished' ? 'check': 'lens'}}</i>
+                    {{executor.state.id}}
+                </a>
+            </li>
+            <li class="tab" ref="newExecutorTab" v-if="scriptExecutors && hasMoreSpace">
+                <a :class="{active: !currentExecutor}"
+                   @click="addNew"
+                   class="btn-flat add-execution-tab-button"
+                   title="Add another script instance">
+                    <i class=" material-icons">add</i>
+                </a>
+            </li>
+        </ul>
+        <div class="tab-indicator" ref="tabIndicator"></div>
+    </div>
+</template>
+
+<script>
+    import {forEachKeyValue, isEmptyArray, isNull} from '@/common/utils/common';
+    import {mapActions, mapState} from 'vuex';
+
+    export default {
+        name: 'ExecutionInstanceTabs',
+        data() {
+            return {
+                hasMoreSpace: {
+                    type: Boolean,
+                    default: false
+                }
+            }
+        },
+        computed: {
+            ...mapState('scripts', {
+                selectedScript: 'selectedScript'
+            }),
+            ...mapState('executions', ['currentExecutor', 'executors']),
+
+            scriptExecutors() {
+                const result = [];
+
+                forEachKeyValue(this.executors, (_, executor) => {
+                    if (executor.state.scriptName === this.selectedScript) {
+                        result.push(executor);
+                    }
+                });
+
+                return result;
+            },
+
+            hasExecutors() {
+                return !isEmptyArray(this.scriptExecutors)
+            }
+        },
+        mounted() {
+            this.updateTabIndicator();
+
+            window.addEventListener('resize', this.onResize);
+            this.calcAvailableSpace();
+        },
+        methods: {
+            ...mapActions('executions', ['selectExecutor']),
+            ...mapActions(['resetScript']),
+            addNew() {
+                this.selectExecutor(null);
+                this.resetScript();
+            },
+            onResize() {
+                this.updateTabIndicator();
+                this.calcAvailableSpace();
+            },
+            updateTabIndicator() {
+                if (!this.$refs.tabs) {
+                    return;
+                }
+
+                let tabElement = null;
+
+                if (isNull(this.currentExecutor)) {
+                    if (isNull(this.$refs.newExecutorTab)) {
+                        this.$refs.tabIndicator.style.width = 0;
+                        return;
+                    }
+
+                    tabElement = this.$refs.newExecutorTab;
+
+                } else {
+                    const ref = 'executor' + this.currentExecutor.state.id;
+                    tabElement = this.$refs[ref];
+                    if (Array.isArray(tabElement)) {
+                        tabElement = tabElement[0];
+                    }
+                }
+
+                if (!tabElement) {
+                    this.$refs.tabIndicator.style.width = 0;
+                } else {
+                    const tabButton = tabElement.getElementsByClassName('btn-flat')[0];
+                    this.$refs.tabIndicator.style.width = tabButton.offsetWidth + 'px';
+                    this.$refs.tabIndicator.style.left = tabButton.offsetLeft + 'px';
+                }
+            },
+
+            calcAvailableSpace() {
+                if (!this.$refs.tabs) {
+                    return;
+                }
+                const childrenWidth = Array.from(this.$refs.tabs.childNodes)
+                    .map(c => c.offsetWidth)
+                    .reduce((previousValue, currentValue) => currentValue + previousValue, 0);
+
+                this.hasMoreSpace = (this.$el.offsetWidth - childrenWidth) > 100;
+            }
+        },
+        watch: {
+            currentExecutor: {
+                immediate: true,
+                handler() {
+                    this.$nextTick(this.updateTabIndicator);
+                }
+            },
+            scriptExecutors() {
+                this.$nextTick(this.updateTabIndicator);
+                this.$nextTick(this.calcAvailableSpace);
+            }
+        },
+        beforeDestroy: function () {
+            window.removeEventListener('resize', this.onResize);
+        }
+    }
+
+
+</script>
+
+<style scoped>
+    .execution-instance-tabs {
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    .execution-instance-tabs .execution-tabs {
+        display: flex;
+        align-items: center;
+        margin-top: 0;
+        margin-bottom: 0;
+        height: 100%;
+    }
+
+    .execution-instance-tabs .tab {
+        padding: 0;
+        height: 100%;
+    }
+
+    .execution-instance-tabs .tab .btn-flat {
+        height: 100%;
+
+        display: flex;
+        align-items: center;
+    }
+
+    .execution-instance-tabs .executor-tab > a {
+        color: #00000070;
+
+        font-size: 22px;
+        font-weight: 300;
+        line-height: 21px;
+        text-transform: none;
+        vertical-align: bottom;
+
+        padding: 0 20px 0;
+        height: 100%;
+    }
+
+    .execution-instance-tabs .executor-tab > a > i {
+        font-size: 14px;
+        margin-right: 12px;
+    }
+
+    .execution-instance-tabs .executor-tab > a.finished > i {
+        font-size: 22px;
+        margin-right: 6px;
+        margin-left: -2px;
+    }
+
+    .execution-instance-tabs .tab > a.active {
+        color: rgba(0, 0, 0, 0.87);
+    }
+
+    .execution-instance-tabs .tab > a.active > i {
+        color: #26a69a;
+    }
+
+    .execution-instance-tabs .tab-indicator {
+        position: absolute;
+        bottom: -1px;
+        height: 4px;
+        width: 88px;
+        background-color: #26a69a;
+        transition: left 0.3s;
+    }
+
+    .add-execution-tab-button {
+        padding-left: 12px;
+        padding-right: 12px;
+    }
+
+    .add-execution-tab-button i {
+        font-size: 24px;
+        color: #00000070;
+    }
+
+    .execution-instance-tabs a.add-execution-tab-button.active i {
+        color: rgba(0, 0, 0, 0.87);
+    }
+
+
+</style>
\ No newline at end of file
diff --git a/web-src/src/main-app/components/scripts/MainAppContent.vue b/web-src/src/main-app/components/scripts/MainAppContent.vue
index a014b26d..c3fb9c64 100644
--- a/web-src/src/main-app/components/scripts/MainAppContent.vue
+++ b/web-src/src/main-app/components/scripts/MainAppContent.vue
@@ -58,7 +58,7 @@
         height: 100%;
 
         background: white;
-        padding-bottom: 12px;
+        padding: 16px 24px 12px;
 
         display: flex;
         flex-direction: column;
@@ -77,7 +77,6 @@
     }
 
     .error-panel {
-        margin-left: 17px;
         color: #F44336;
         margin-top: 17px;
     }
diff --git a/web-src/src/main-app/components/scripts/ScriptHeader.vue b/web-src/src/main-app/components/scripts/ScriptHeader.vue
index b1b1e62a..89fa14ac 100644
--- a/web-src/src/main-app/components/scripts/ScriptHeader.vue
+++ b/web-src/src/main-app/components/scripts/ScriptHeader.vue
@@ -1,20 +1,48 @@
 <template>
-    <h2 class="script-header header main-content-header" v-show="selectedScript">{{ selectedScript }}</h2>
+    <div class="script-header main-content-header">
+        <h2 class="header" v-show="selectedScript">{{ selectedScript }}</h2>
+        <ExecutionInstanceTabs/>
+    </div>
 </template>
 
 <script>
+    import ExecutionInstanceTabs from '@/main-app/components/scripts/ExecutionInstanceTabs';
     import {mapState} from 'vuex';
 
     export default {
         name: 'ScriptHeader',
 
+        components: {ExecutionInstanceTabs},
         computed: {
             ...mapState('scripts', {
                 selectedScript: 'selectedScript'
-            })
-        }
+            }),
+            ...mapState('executions', ['currentExecutor', 'executors'])
+        },
+        methods: {}
     }
+
 </script>
 
 <style scoped>
+    .script-header {
+        display: flex;
+        align-items: center;
+        height: 56px;
+    }
+
+    .script-header h2.header {
+        padding: 0;
+        margin-right: 24px;
+        flex: 0 0 auto;
+
+        line-height: 1.7em;
+        font-size: 1.7em;
+    }
+
+    .execution-instance-tabs {
+        flex: 1 1 0;
+        min-width: 0;
+    }
+
 </style>
\ No newline at end of file
diff --git a/web-src/src/main-app/components/scripts/script-parameters-view.vue b/web-src/src/main-app/components/scripts/script-parameters-view.vue
index e6261452..701b1a09 100644
--- a/web-src/src/main-app/components/scripts/script-parameters-view.vue
+++ b/web-src/src/main-app/components/scripts/script-parameters-view.vue
@@ -67,13 +67,13 @@
 <style scoped>
     .script-parameters-panel >>> {
         margin-top: 15px;
-        margin-right: 24px;
+        margin-right: 0;
         display: flex;
         flex-wrap: wrap;
     }
 
     .script-parameters-panel >>> .parameter {
-        margin: 7px 0 20px 24px;
+        margin: 7px 24px 20px 0;
 
         flex-grow: 1;
         flex-shrink: 0;
diff --git a/web-src/src/main-app/components/scripts/script-view.vue b/web-src/src/main-app/components/scripts/script-view.vue
index 65d2b027..f8aa9b88 100644
--- a/web-src/src/main-app/components/scripts/script-view.vue
+++ b/web-src/src/main-app/components/scripts/script-view.vue
@@ -362,7 +362,7 @@
 
     .script-description,
     .script-loading-text {
-        margin: 15px 17px 0;
+        margin: 0;
     }
 
     .actions-panel {
@@ -372,7 +372,6 @@
     .button-execute {
         flex: 6 1 5em;
 
-        margin-left: 2%;
         margin-right: 0;
         margin-top: 6px;
     }
@@ -381,13 +380,12 @@
         flex: 1 0 5em;
 
         margin-left: 12px;
-        margin-right: 2%;
         margin-top: 6px;
     }
 
     .script-input-panel {
-        width: calc(100% - 24px);
-        margin: 18px 12px 0;
+        margin-top: 20px;
+        margin-bottom: 0;
     }
 
     .script-input-panel input[type=text] {
@@ -423,7 +421,7 @@
     }
 
     .files-download-panel {
-        margin: 12px 12px 0;
+        margin-top: 12px;
     }
 
     .files-download-panel a {
@@ -441,9 +439,6 @@
     }
 
     .script-view >>> .log-panel {
-        margin-right: 12px;
-        margin-left: 12px;
-        width: calc(100% - 24px);
         margin-top: 12px;
     }
 
diff --git a/web-src/src/main-app/index.js b/web-src/src/main-app/index.js
index 0145dd1e..3a1ffef0 100644
--- a/web-src/src/main-app/index.js
+++ b/web-src/src/main-app/index.js
@@ -1,4 +1,5 @@
 import '@/common/style_imports'
+import {trimTextNodes} from '@/common/utils/common';
 import Vue from 'vue'
 import MainApp from './MainApp.vue';
 import router from './router/router'
@@ -6,6 +7,11 @@ import store from './store'
 
 Vue.config.productionTip = false;
 
+Vue.directive('trim-text', {
+    inserted: trimTextNodes,
+    componentUpdated: trimTextNodes
+})
+
 new Vue({
     router,
     store,
diff --git a/web-src/src/main-app/store/index.js b/web-src/src/main-app/store/index.js
index 751c5027..f9a30e2c 100644
--- a/web-src/src/main-app/store/index.js
+++ b/web-src/src/main-app/store/index.js
@@ -35,6 +35,13 @@ const store = new Vuex.Store({
             dispatch('executions/init');
         },
 
+        resetScript({dispatch, state}) {
+            const selectedScript = state.scripts.selectedScript
+
+            dispatch('scriptSetup/reset');
+            dispatch('scriptConfig/reloadScript', {selectedScript});
+        },
+
         logout({dispatch}) {
             dispatch('executions/stopAll')
                 .then(() => dispatch('auth/logout'))
@@ -48,8 +55,7 @@ const store = new Vuex.Store({
 });
 
 store.watch((state) => state.scripts.selectedScript, (selectedScript) => {
-    store.dispatch('scriptSetup/reset');
-    store.dispatch('scriptConfig/reloadScript', {selectedScript});
+    store.dispatch('resetScript');
     store.dispatch('executions/selectScript', {selectedScript});
 });
 
diff --git a/web-src/src/main-app/store/scriptExecutionManager.js b/web-src/src/main-app/store/scriptExecutionManager.js
index 65cbb4c4..e25030cb 100644
--- a/web-src/src/main-app/store/scriptExecutionManager.js
+++ b/web-src/src/main-app/store/scriptExecutionManager.js
@@ -1,9 +1,11 @@
-import {deepCloneObject, forEachKeyValue, isEmptyArray, isEmptyString, isNull} from '@/common/utils/common';
+import {forEachKeyValue, isEmptyArray, isEmptyString, isNull} from '@/common/utils/common';
 import axios from 'axios';
 import clone from 'lodash/clone';
 import get from 'lodash/get';
 import scriptExecutor, {STATUS_EXECUTING, STATUS_FINISHED, STATUS_INITIALIZING} from './scriptExecutor';
 
+export const axiosInstance = axios.create();
+
 export default {
     namespaced: true,
 
@@ -21,6 +23,10 @@ export default {
         },
         REMOVE_EXECUTOR(state, executor) {
             delete state.executors[executor.state.id];
+
+            if (state.currentExecutor === executor) {
+                state.currentExecutor = null;
+            }
         }
     },
 
@@ -40,15 +46,19 @@ export default {
     },
 
     actions: {
-        init({state, commit}) {
+        init({state, commit, dispatch}) {
             const store = this;
 
-            axios.get('executions/active')
+            axiosInstance.get('executions/active')
                 .then(({data: activeExecutionIds}) => {
+                    activeExecutionIds.sort((a, b) => parseInt(a) - parseInt(b));
+
+                    const requests = [];
+
                     for (let i = 0; i < activeExecutionIds.length; i++) {
                         const executionId = activeExecutionIds[i];
 
-                        axios.get('executions/config/' + executionId)
+                        requests.push(axiosInstance.get('executions/config/' + executionId)
                             .then((({data: executionConfig}) => {
                                 const executor = scriptExecutor(executionId, executionConfig.scriptName, executionConfig.parameterValues);
 
@@ -56,22 +66,36 @@ export default {
                                 store.dispatch('executions/' + executionId + '/reconnect');
 
                                 commit('ADD_EXECUTOR', executor);
-                                if (isNull(state.currentExecutor) && store.state.scripts.selectedScript === executionConfig.scriptName) {
-                                    commit('SELECT_EXECUTOR', executor);
-                                    store.dispatch('scriptSetup/setParameterValues', {
-                                        values: deepCloneObject(executionConfig.parameterValues),
-                                        forceAllowedValues: true,
-                                        scriptName: executionConfig.scriptName
-                                    });
-                                }
-                            }));
+
+                                return executor;
+                            })));
                     }
-                });
+
+                    if (!isNull(state.currentExecutor) || isNull(store.state.scripts.selectedScript)) {
+                        return;
+                    }
+
+                    axios.all(requests)
+                        .then(axios.spread((...executors) => {
+                            if (!isNull(state.currentExecutor) || isNull(store.state.scripts.selectedScript)) {
+                                return;
+                            }
+
+                            const selectedScript = store.state.scripts.selectedScript;
+
+                            for (const executor of executors) {
+                                if (selectedScript === executor.state.scriptName) {
+                                    dispatch('selectExecutor', executor);
+                                    break;
+                                }
+                            }
+                        }))
+                        .catch(e => console.log(e));
+                })
+
         },
 
         selectScript({state, commit, dispatch}, {selectedScript}) {
-            const store = this;
-
             let selectedExecutor = null;
 
             if ((!isNull(state.currentExecutor))) {
@@ -82,9 +106,7 @@ export default {
                 });
 
                 for (const executor of executorsToRemove) {
-                    dispatch(executor.state.id + '/cleanup');
-                    store.unregisterModule(['executions', executor.state.id]);
-                    commit('REMOVE_EXECUTOR', executor)
+                    dispatch('_removeExecutor', executor);
                 }
             }
 
@@ -94,17 +116,10 @@ export default {
                 }
             });
 
-            commit('SELECT_EXECUTOR', selectedExecutor);
-            if (selectedExecutor) {
-                dispatch('scriptSetup/setParameterValues', {
-                    values: selectedExecutor.state.parameterValues,
-                    forceAllowedValues: true,
-                    scriptName: selectedScript
-                }, {root: true});
-            }
+            dispatch('selectExecutor', selectedExecutor);
         },
 
-        startExecution({rootState, commit}) {
+        startExecution({rootState, commit, dispatch}) {
             const store = this;
 
             const parameterValues = clone(rootState.scriptSetup.parameterValues);
@@ -128,9 +143,9 @@ export default {
             store.registerModule(['executions', 'temp'], executor);
             store.dispatch('executions/temp/setInitialising');
 
-            commit('SELECT_EXECUTOR', executor);
+            dispatch('selectExecutor', executor);
 
-            axios.post('executions/start', formData)
+            axiosInstance.post('executions/start', formData)
                 .then(({data: executionId}) => {
                     store.unregisterModule(['executions', 'temp']);
                     store.registerModule(['executions', executionId], executor);
@@ -193,6 +208,35 @@ export default {
                     reject();
                 }
             });
+        },
+
+        selectExecutor({commit, state, dispatch}, executor) {
+            const currentExecutor = state.currentExecutor;
+            if ((!isNull(currentExecutor))) {
+                if ((currentExecutor.state.scriptName === this.state.scripts.selectedScript)
+                    && (currentExecutor.state.status === STATUS_FINISHED)) {
+                    dispatch('_removeExecutor', currentExecutor);
+                }
+            }
+
+            commit('SELECT_EXECUTOR', executor);
+            if (executor) {
+                dispatch('scriptSetup/setParameterValues', {
+                    values: executor.state.parameterValues,
+                    forceAllowedValues: true,
+                    scriptName: executor.state.scriptName
+                }, {root: true});
+            }
+        },
+
+        _removeExecutor({dispatch, state, commit}, executor) {
+            if (!(executor.state.id in state.executors)) {
+                return;
+            }
+
+            dispatch(executor.state.id + '/cleanup');
+            this.unregisterModule(['executions', executor.state.id]);
+            commit('REMOVE_EXECUTOR', executor)
         }
     }
 }
\ No newline at end of file
diff --git a/web-src/tests/unit/common/utils/common_test.js b/web-src/tests/unit/common/utils/common_test.js
index 48e9d0df..175f9bf4 100644
--- a/web-src/tests/unit/common/utils/common_test.js
+++ b/web-src/tests/unit/common/utils/common_test.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import {randomInt} from '@/common/utils/common';
+import {randomInt, trimTextNodes} from '@/common/utils/common';
 
 describe('Test common.js', function () {
 
@@ -87,4 +87,40 @@ describe('Test common.js', function () {
             expect(values).toEqual(new Set([-13, -14, -15, -16]));
         });
     });
+
+    describe('test trimTextNodes', function () {
+
+        it('Test trim single text node', function () {
+            const div = document.createElement('div');
+            div.innerHTML = '  \n hello  world !\t '
+            trimTextNodes(div);
+
+            expect(div.innerHTML).toBe('hello  world !')
+        });
+
+        it('Test trim multiple text nodes', function () {
+            const div = document.createElement('div');
+            div.innerHTML = '  \n hello  world !\t '
+            div.appendChild(document.createTextNode(' another record '))
+            div.appendChild(document.createTextNode('+ one more  '))
+            trimTextNodes(div);
+
+            expect(div.innerHTML).toBe('hello  world !another record+ one more')
+        });
+
+        it('Test trim multiple text nodes with spans', function () {
+            const div = document.createElement('div');
+            div.innerHTML = '  \n hello  world !\t '
+
+            const child = document.createElement('span');
+            child.innerHTML = ' another record ';
+            div.appendChild(child)
+
+            div.appendChild(document.createTextNode(' + one more  '))
+
+            trimTextNodes(div);
+
+            expect(div.innerHTML).toBe('hello  world !<span> another record </span>+ one more')
+        });
+    });
 });
\ No newline at end of file
diff --git a/web-src/tests/unit/history/execution-details_test.js b/web-src/tests/unit/history/execution-details_test.js
index cab03dc5..ff3290f7 100644
--- a/web-src/tests/unit/history/execution-details_test.js
+++ b/web-src/tests/unit/history/execution-details_test.js
@@ -5,7 +5,7 @@ import {createLocalVue, mount} from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import {assert, config as chaiConfig} from 'chai';
 import Vuex from 'vuex';
-import {vueTicks} from '../test_utils';
+import {flushPromises, vueTicks} from '../test_utils';
 
 
 chaiConfig.truncateThreshold = 0;
@@ -14,7 +14,6 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 const axiosMock = new MockAdapter(axiosInstance);
-const flushPromises = () => new Promise(resolve => setTimeout(resolve));
 
 
 function mockGetExecution(id, startTime, user, script, status, exitCode, command, log) {
diff --git a/web-src/tests/unit/main-app/components/scripts/ExecutionInstanceTabs_test.js b/web-src/tests/unit/main-app/components/scripts/ExecutionInstanceTabs_test.js
new file mode 100644
index 00000000..0775238f
--- /dev/null
+++ b/web-src/tests/unit/main-app/components/scripts/ExecutionInstanceTabs_test.js
@@ -0,0 +1,310 @@
+'use strict';
+import ExecutionInstanceTabs from '@/main-app/components/scripts/ExecutionInstanceTabs';
+import {createLocalVue, mount} from '@vue/test-utils';
+import clone from 'lodash/clone';
+import Vuex from 'vuex';
+import {vueTicks} from '../../../test_utils';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+
+describe('Test ExecutionInstanceTabs', function () {
+    let executionTabs;
+    let store;
+
+    beforeEach(async function () {
+        store = new Vuex.Store({
+            modules: {
+                scripts: {
+                    namespaced: true,
+                    state: {
+                        selectedScript: 'abc'
+                    }
+                },
+                executions: {
+                    namespaced: true,
+                    state: {
+                        currentExecutor: null,
+                        executors: {}
+                    },
+                    actions: {
+                        selectExecutor({state}, executor) {
+                            state.currentExecutor = executor;
+                        }
+                    }
+                }
+            }
+        });
+
+        executionTabs = mount(ExecutionInstanceTabs, {
+            attachToDocument: true,
+            store,
+            localVue
+        });
+
+        executionTabs.vm.$parent.$forceUpdate();
+        await executionTabs.vm.$nextTick();
+    });
+
+    afterEach(function () {
+        executionTabs.destroy();
+    });
+
+    async function addExecutor(id, scriptName, status = 'running') {
+        const executors = clone(store.state.executions.executors);
+        executors[id] = {state: {id, scriptName, status}}
+
+        store.state.executions.executors = executors;
+
+        await vueTicks();
+    }
+
+    async function removeExecutor(id) {
+        const executors = clone(store.state.executions.executors);
+        delete executors[id];
+
+        store.state.executions.executors = executors;
+
+        await vueTicks();
+    }
+
+    async function selectExecutor(id) {
+        const executor = store.state.executions.executors[id];
+        expect(executor).not.toBeNil();
+
+        store.state.executions.currentExecutor = executor;
+
+        await vueTicks();
+    }
+
+    async function selectScript(scriptName) {
+        store.state.scripts.selectedScript = scriptName;
+
+        await vueTicks();
+    }
+
+    function assertTab(tab, id, status, selected) {
+        let expectedText = status === 'finished' ? 'check' : 'lens';
+        expectedText += ' ' + id;
+
+        expect(tab.text()).toBe(expectedText);
+
+        const tabButton = tab.get('a');
+        if (selected) {
+            expect(tabButton.classes()).toContain('active');
+        } else {
+            expect(tabButton.classes()).not.toContain('active');
+        }
+    }
+
+    describe('Test script tabs', function () {
+
+        it('test single inactive tab', async function () {
+            await addExecutor(123, 'abc')
+
+            const tabs = executionTabs.findAll('li.executor-tab');
+            expect(tabs).toHaveLength(1);
+            assertTab(tabs.at(0), 123, 'running', false);
+        });
+
+        it('test single active tab', async function () {
+            await addExecutor(123, 'abc')
+            await selectExecutor(123);
+
+            const tabs = executionTabs.findAll('li.executor-tab');
+            expect(tabs).toHaveLength(1);
+            assertTab(tabs.at(0), 123, 'running', true);
+        });
+
+        it('test multiple tabs', async function () {
+            await addExecutor(101, 'abc');
+            await addExecutor(103, 'def');
+            await addExecutor(105, 'abc', status = 'finished');
+            await addExecutor(106, 'ghi');
+            await addExecutor(107, 'abc');
+            await addExecutor(108, 'xyz');
+            await selectExecutor(105);
+
+            const tabs = executionTabs.findAll('li.executor-tab');
+            expect(tabs).toHaveLength(3);
+
+            assertTab(tabs.at(0), 101, 'running', false);
+            assertTab(tabs.at(1), 105, 'finished', true);
+            assertTab(tabs.at(2), 107, 'running', false);
+        });
+
+        it('test multiple tabs after changing script', async function () {
+            await addExecutor(101, 'abc');
+            await addExecutor(103, 'def', status = 'finished');
+            await addExecutor(105, 'abc', status = 'finished');
+            await addExecutor(106, 'ghi');
+            await addExecutor(107, 'abc');
+            await addExecutor(108, 'def');
+            await selectExecutor(103);
+            await selectScript('def');
+
+            const tabs = executionTabs.findAll('li.executor-tab');
+            expect(tabs).toHaveLength(2);
+
+            assertTab(tabs.at(0), 103, 'finished', true);
+            assertTab(tabs.at(1), 108, 'running', false);
+        });
+
+        it('test no tabs', async function () {
+            expect(executionTabs.isEmpty()).toBeTrue();
+        });
+    })
+
+    describe('Test add tab button', function () {
+
+        it('test add button when single executor', async function () {
+            await addExecutor(123, 'abc')
+            await selectExecutor(123);
+
+            const tabs = executionTabs.findAll('li');
+            expect(tabs).toHaveLength(2);
+            expect(tabs.at(1).text()).toBe('add');
+            expect(tabs.at(1).get('a').classes()).not.toContain('active');
+        });
+
+        it('test add button when multiple executors', async function () {
+            await addExecutor(101, 'abc')
+            await addExecutor(102, 'abc')
+            await addExecutor(103, 'abc')
+            await selectExecutor(102);
+
+            const tabs = executionTabs.findAll('li');
+            expect(tabs).toHaveLength(4);
+            expect(tabs.at(3).text()).toBe('add');
+        });
+
+        it('test add button when multiple executors for different script', async function () {
+            await addExecutor(101, 'def')
+            await addExecutor(102, 'xyz')
+            await addExecutor(103, 'hello')
+
+            const tabs = executionTabs.findAll('li');
+            expect(tabs).toHaveLength(0);
+        });
+
+        it('test add button when active', async function () {
+            await addExecutor(101, 'abc')
+
+            store.state.executions.currentExecutor = null;
+
+            await vueTicks();
+
+            const addButton = executionTabs.get('.add-execution-tab-button');
+            expect(addButton.classes()).toContain('active');
+        });
+    });
+
+    describe('Test click tabs', function () {
+
+        it('test click executor tab when nothing selected', async function () {
+            await addExecutor(123, 'abc')
+
+            const firstTabButton = executionTabs.findAll('li a').at(0);
+            firstTabButton.trigger('click');
+
+            expect(store.state.executions.currentExecutor.state.id).toBe(123);
+        });
+
+
+        it('test click executor tab when another selected', async function () {
+            await addExecutor(101, 'abc')
+            await addExecutor(102, 'abc')
+            await selectExecutor(101)
+
+            const secondTabButton = executionTabs.findAll('li a').at(1);
+            secondTabButton.trigger('click');
+
+            expect(store.state.executions.currentExecutor.state.id).toBe(102);
+        });
+
+        it('test click add tab when another selected', async function () {
+            await addExecutor(101, 'abc')
+            await addExecutor(102, 'abc')
+            await selectExecutor(101)
+
+            const addButton = executionTabs.get('.add-execution-tab-button');
+            addButton.trigger('click');
+
+            expect(store.state.executions.currentExecutor).toBeNil();
+        });
+    });
+
+    describe('Test indicator position', function () {
+
+        function assertIndicatorAtTab(indicator, firstTab) {
+            expect(indicator.offsetLeft).toBe(firstTab.offsetLeft);
+            expect(indicator.offsetWidth).toBe(firstTab.offsetWidth);
+        }
+
+        it('test indicator when first executor', async function () {
+            await addExecutor(101, 'abc');
+            await addExecutor(102, 'abc');
+            await addExecutor(103, 'abc');
+            await selectExecutor(101);
+
+            const indicator = executionTabs.get('.tab-indicator');
+            const firstTab = executionTabs.findAll('.tab').at(0);
+
+            assertIndicatorAtTab(indicator, firstTab);
+        });
+
+        it('test indicator when last executor', async function () {
+            await addExecutor(101, 'abc');
+            await addExecutor(102, 'abc');
+            await addExecutor(103, 'abc');
+            await selectExecutor(103);
+
+            const indicator = executionTabs.get('.tab-indicator');
+            const lastTab = executionTabs.findAll('.tab').at(2);
+
+            assertIndicatorAtTab(indicator, lastTab);
+        });
+
+        it('test indicator when nothing selected', async function () {
+            await addExecutor(101, 'abc');
+            await addExecutor(102, 'abc');
+            await addExecutor(103, 'abc');
+
+            const indicator = executionTabs.get('.tab-indicator');
+            const addTab = executionTabs.findAll('.tab').at(3);
+
+            assertIndicatorAtTab(indicator, addTab);
+        });
+
+        it('test indicator position after remove selected', async function () {
+            await addExecutor(101, 'abc');
+            await addExecutor(102, 'abc');
+            await addExecutor(103, 'abc');
+            await selectExecutor(103);
+
+            store.state.executions.currentExecutor = null;
+
+            await vueTicks();
+
+            const indicator = executionTabs.get('.tab-indicator');
+            const addTab = executionTabs.findAll('.tab').at(3);
+
+            assertIndicatorAtTab(indicator, addTab);
+        });
+
+        it('test indicator position after changing executors', async function () {
+            await addExecutor(101, 'abc');
+            await addExecutor(102, 'abc');
+            await addExecutor(103, 'abc');
+            await selectExecutor(103);
+            await removeExecutor(102);
+
+            const indicator = executionTabs.get('.tab-indicator');
+            const lastTab = executionTabs.findAll('.tab').at(1);
+
+            assertIndicatorAtTab(indicator, lastTab);
+        });
+    });
+
+});
diff --git a/web-src/tests/unit/main-app/components/scripts/ScriptLoadingText_test.js b/web-src/tests/unit/main-app/components/scripts/ScriptLoadingText_test.js
index 7106de7a..f48e0ded 100644
--- a/web-src/tests/unit/main-app/components/scripts/ScriptLoadingText_test.js
+++ b/web-src/tests/unit/main-app/components/scripts/ScriptLoadingText_test.js
@@ -1,11 +1,8 @@
 'use strict';
 import ScriptLoadingText, {__RewireAPI__ as CommonRewire} from '@/main-app/components/scripts/ScriptLoadingText';
 import {mount} from '@vue/test-utils';
-import {config as chaiConfig} from 'chai';
 import {timeout, vueTicks} from '../../../test_utils';
 
-chaiConfig.truncateThreshold = 0;
-
 const DEFAULT_DELAY = 10;
 
 function rewireRandomInt(newRandom) {
diff --git a/web-src/tests/unit/main-app/store/scriptExecutionManager_test.js b/web-src/tests/unit/main-app/store/scriptExecutionManager_test.js
new file mode 100644
index 00000000..27154ae3
--- /dev/null
+++ b/web-src/tests/unit/main-app/store/scriptExecutionManager_test.js
@@ -0,0 +1,248 @@
+import {isNull} from '@/common/utils/common';
+import scriptExecutionManagerModule, {
+    __RewireAPI__ as ExecutionManagerRewire,
+    axiosInstance
+} from '@/main-app/store/scriptExecutionManager';
+import {STATUS_INITIALIZING} from '@/main-app/store/scriptExecutor';
+import {createLocalVue} from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import cloneDeep from 'lodash/cloneDeep';
+import {WebSocket} from 'mock-socket';
+import Vuex from 'vuex';
+import {flushPromises} from '../../test_utils';
+
+const axiosMock = new MockAdapter(axiosInstance);
+window.WebSocket = WebSocket;
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+ExecutionManagerRewire.__Rewire__('scriptExecutor', createMockExecutor);
+
+function createStore() {
+    return new Vuex.Store({
+        modules: {
+            executions: cloneDeep(scriptExecutionManagerModule),
+            scripts: {
+                selectedScript: null
+            },
+            scriptSetup: {
+                namespaced: true,
+                state: {
+                    parameterValues: {}
+                },
+                actions: {
+                    setParameterValues({state}, valuesHolder) {
+                        state.parameterValues = valuesHolder.values;
+                    }
+                }
+            },
+            scriptConfig: {
+                state: {
+                    scriptConfig: {
+                        name: 'abc'
+                    }
+                }
+            }
+        }
+    });
+}
+
+function mockActiveExecutions(executions) {
+    const ids = executions.map(e => e.id);
+
+    axiosMock.onGet('executions/active').reply(200, ids);
+    for (const execution of executions) {
+        axiosMock.onGet('executions/config/' + execution.id).reply(200, execution);
+    }
+}
+
+function mockStartResponse(id) {
+    axiosMock.onPost('executions/start').reply(200, id);
+}
+
+describe('Test scriptExecutionManager', function () {
+    let store;
+
+    beforeEach(async function () {
+        store = createStore();
+    });
+
+    function assertExecution(id, expectedName, parameterValues) {
+        const executor = store.state.executions.executors[id];
+        expect(executor).not.toBeNil();
+        expect(executor.state.scriptName).toBe(expectedName);
+        expect(executor.state.parameterValues).toEqual(parameterValues);
+    }
+
+    function assertSelectedExecutor(expectedId) {
+        const currentExecutor = store.state.executions.currentExecutor;
+
+        if (isNull(expectedId)) {
+            expect(currentExecutor).toBeNil();
+        } else {
+            expect(currentExecutor).not.toBeNil();
+            expect(currentExecutor.state.id).toBe(expectedId);
+
+            expect(store.state.scriptSetup.parameterValues).toEqual(currentExecutor.state.parameterValues);
+        }
+    }
+
+    describe('Test init', function () {
+        it('Test load executors', async function () {
+            const executions = [
+                {id: 123, scriptName: 'abc', parameterValues: {'p1': 1}},
+                {id: 456, scriptName: 'def', parameterValues: {'p1': 1}},
+                {id: 789, scriptName: 'abc', parameterValues: null}
+            ];
+            mockActiveExecutions(executions);
+
+            await store.dispatch('executions/init');
+
+            await flushPromises();
+
+            for (const execution of executions) {
+                assertExecution(execution.id, execution.scriptName, execution.parameterValues);
+            }
+            assertSelectedExecutor(null);
+        });
+
+        it('Test load executors check selectedExecutor from multiple', async function () {
+            store.state.scripts.selectedScript = 'abc';
+
+            const executions = [{id: 123, scriptName: 'def', parameterValues: {'p1': 1}},
+                {id: 555, scriptName: 'abc', parameterValues: {'p1': 1}},
+                {id: 444, scriptName: 'abc', parameterValues: null},
+                {id: 666, scriptName: 'abc', parameterValues: null}
+            ];
+            mockActiveExecutions(executions);
+
+            await store.dispatch('executions/init');
+
+            await flushPromises();
+
+            assertSelectedExecutor(444);
+        });
+
+        it('Test load executor check selectedExecutor when another selected', async function () {
+            store.state.scripts.selectedScript = 'abc';
+
+            mockStartResponse(12);
+            await store.dispatch('executions/startExecution');
+            await flushPromises();
+
+            expect(store.state.executions.currentExecutor).not.toBeNil();
+            expect(store.state.executions.currentExecutor.state.id).toBe(12);
+
+            const executions = [{id: 555, scriptName: 'abc', parameterValues: {'p1': 1}}];
+            mockActiveExecutions(executions);
+
+            await store.dispatch('executions/init');
+            await flushPromises();
+
+            assertSelectedExecutor(12);
+        });
+    });
+
+    describe('Test selectExecutor', function () {
+
+        async function setup(executions) {
+            mockActiveExecutions(executions);
+            await store.dispatch('executions/init');
+            await flushPromises();
+        }
+
+        async function selectExecutor(id) {
+            const executor = store.state.executions.executors[id];
+            await store.dispatch('executions/selectExecutor', executor);
+        }
+
+        it('Test selectExecutor', async function () {
+            await setup([{id: 123, scriptName: 'abc', parameterValues: {'p1': 1}}])
+            await selectExecutor(123);
+
+            assertSelectedExecutor(123);
+        });
+
+        it('Test selectExecutor when another selected', async function () {
+            store.state.scripts.selectedScript = 'abc';
+
+            await setup([
+                {id: 123, scriptName: 'abc', parameterValues: {'p1': 1}},
+                {id: 456, scriptName: 'def', parameterValues: {'p2': 'hello'}}])
+            await selectExecutor(456);
+
+            assertSelectedExecutor(456);
+        });
+
+        it('Test selectExecutor null', async function () {
+            store.state.scripts.selectedScript = 'abc';
+
+            await setup([
+                {id: 123, scriptName: 'abc'},
+                {id: 456, scriptName: 'def'}])
+            await selectExecutor(null);
+
+            assertSelectedExecutor(null);
+        });
+
+        it('Test selectExecutor check remove current if finished', async function () {
+            store.state.scripts.selectedScript = 'abc';
+
+            await setup([
+                {id: 123, scriptName: 'abc'},
+                {id: 456, scriptName: 'def'}])
+
+            store.dispatch('executions/123/setFinished')
+
+            await selectExecutor(456);
+
+            expect(store.state.executions.executors[123]).toBeNil();
+            expect(store.state.executions[123]).toBeNil();
+        });
+
+        it('Test selectExecutor check remove current if finished when another script selected', async function () {
+            store.state.scripts.selectedScript = 'abc';
+
+            await setup([
+                {id: 123, scriptName: 'abc'},
+                {id: 456, scriptName: 'def'}])
+
+            store.state.scripts.selectedScript = 'def';
+            store.dispatch('executions/123/setFinished')
+
+            await selectExecutor(456);
+
+            expect(store.state.executions.executors[123]).not.toBeNil();
+            expect(store.state.executions[123]).not.toBeNil();
+        });
+    });
+
+});
+
+
+function createMockExecutor(id, scriptName, parameterValues) {
+    return {
+        namespaced: true,
+        state: {
+            id: id,
+            parameterValues: parameterValues,
+            status: STATUS_INITIALIZING,
+            scriptName: scriptName
+        },
+        actions: {
+            start({state, commit}, executionId) {
+                commit('SET_STARTED', executionId)
+            },
+            setFinished({state}) {
+                state.status = 'finished';
+            }
+        },
+        mutations: {
+            SET_STARTED(state, executionId) {
+                state.id = executionId
+                state.status = 'executing';
+            }
+        }
+    };
+}
diff --git a/web-src/tests/unit/test_utils.js b/web-src/tests/unit/test_utils.js
index eef5305f..20624926 100644
--- a/web-src/tests/unit/test_utils.js
+++ b/web-src/tests/unit/test_utils.js
@@ -97,3 +97,5 @@ export function createVue(component, properties, store = null) {
 export function destroy(component) {
     component.destroy();
 }
+
+export const flushPromises = () => new Promise(resolve => setTimeout(resolve));
\ No newline at end of file