bugy#281 added script loading indicator

antonellocaroli · Aug 1, 2020 · 3f7e99b · 3f7e99b
1 parent a858fa3
commit 3f7e99b
Show file tree

Hide file tree

Showing 18 changed files with 659 additions and 45 deletions.
diff --git a/web-src/src/common/components/AppLayout.vue b/web-src/src/common/components/AppLayout.vue
@@ -4,11 +4,15 @@
             <slot name="sidebar"/>
         </div>
         <div class="app-content">
-            <div :class="{emptyHeader: !hasHeader}" class="content-header" ref="contentHeader">
+            <div :class="{borderless: !hasHeader || loading, 'drop-shadow': loading}"
+                 class="content-header" ref="contentHeader">
                 <a @click="setSidebarVisibility(true)" class="btn-flat app-menu-button">
                     <i class="material-icons">menu</i>
                 </a>
                 <slot name="header"/>
+                <div class="progress" v-if="loading">
+                    <div class="indeterminate"></div>
+                </div>
             </div>
             <div class="content-panel" ref="contentPanel">
                 <slot name="content"/>
@@ -19,10 +23,14 @@
 </template>
 
 <script>
+
     import {hasClass, isNull} from '@/common/utils/common';
 
     export default {
         name: 'AppLayout',
+        props: {
+            loading: Boolean
+        },
         data() {
             return {
                 narrowView: false,
@@ -64,7 +72,11 @@
         let childrenHeight = 0;
         for (const child of Array.from(contentHeader.childNodes)) {
             if (hasClass(child, 'app-menu-button')) {
-                continue
+                continue;
+            }
+
+            if ((child.nodeType === 1) && (window.getComputedStyle(child).position === 'absolute')) {
+                continue;
             }
 
             if (!isNull(child.offsetHeight)) {
@@ -169,14 +181,26 @@
 
     .content-header {
         flex: 0 0 auto;
+        z-index: 1;
 
         border-bottom: 1px solid #C8C8C8;
+        position: relative;
+    }
+
+    .content-header.drop-shadow {
+        box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
     }
 
-    .content-header.emptyHeader {
+    .content-header.borderless {
         border-bottom: none;
     }
 
+    .content-header .progress {
+        margin: 0;
+        bottom: 0;
+        position: absolute;
+    }
+
     .content-panel {
         flex: 1 1 0;
     }

diff --git a/web-src/src/common/components/history/executions-log-page.vue b/web-src/src/common/components/history/executions-log-page.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="executions-log page section">
-        <router-view/>
+        <router-view :disableProgressIndicator="disableProgressIndicator"/>
     </div>
 </template>
 
@@ -9,7 +9,13 @@
     import ExecutionsLog from './executions-log';
 
     export default {
-        name: 'executions-log-page'
+        name: 'executions-log-page',
+        props: {
+            disableProgressIndicator: {
+                type: Boolean,
+                default: false
+            }
+        }
     }
 
     export const routerChildren = [

diff --git a/web-src/src/common/components/history/executions-log-table.vue b/web-src/src/common/components/history/executions-log-table.vue
@@ -1,32 +1,40 @@
 <template>
-    <table class="highlight striped executions-log-table">
-        <thead>
-        <tr>
-            <th class="start_time-column">Start Time</th>
-            <th class="user-column">User</th>
-            <th class="script-column">Script</th>
-            <th class="status-column">Status</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr v-for="row in rows" :key="row.id" @click="rowClick(row)">
-            <td>{{ row.startTimeString }}</td>
-            <td>{{ row.user }}</td>
-            <td>{{ row.script }}</td>
-            <td>{{ row.fullStatus }}</td>
-        </tr>
-        </tbody>
-    </table>
+    <div class="executions-log-table">
+        <table class="highlight striped">
+            <thead>
+            <tr>
+                <th class="start_time-column">Start Time</th>
+                <th class="user-column">User</th>
+                <th class="script-column">Script</th>
+                <th class="status-column">Status</th>
+            </tr>
+            </thead>
+            <tbody v-if="!loading">
+            <tr :key="row.id" @click="rowClick(row)" v-for="row in rows">
+                <td>{{ row.startTimeString }}</td>
+                <td>{{ row.user }}</td>
+                <td>{{ row.script }}</td>
+                <td>{{ row.fullStatus }}</td>
+            </tr>
+            </tbody>
+        </table>
+        <p class="loading-text" v-if="loading">History will appear here</p>
+    </div>
 </template>
 
 <script>
+    import {mapState} from 'vuex';
+
     export default {
         name: 'executions-log-table',
         props: {
             rows: Array,
             rowClick: {
                 type: Function
             }
+        },
+        computed: {
+            ...mapState('history', ['loading'])
         }
     }
 </script>
@@ -51,4 +59,11 @@
     .executions-log-table .status-column {
         width: 15%;
     }
+
+    .loading-text {
+        color: #616161;
+        font-size: 1.2em;
+        text-align: center;
+        margin-top: 1em;
+    }
 </style>
diff --git a/web-src/src/common/components/history/executions-log.vue b/web-src/src/common/components/history/executions-log.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <PageProgress v-if="loading"/>
+        <PageProgress v-if="loading && !disableProgressIndicator"/>
         <executions-log-table :rowClick="goToLog" :rows="executionRows" v-else/>
     </div>
 </template>
@@ -13,6 +13,12 @@
     export default {
         name: 'executions-log',
 
+        props: {
+            disableProgressIndicator: {
+                type: Boolean,
+                default: false
+            }
+        },
         components: {
             'executions-log-table': ExecutionsLogTable,
             PageProgress

diff --git a/web-src/src/common/utils/common.js b/web-src/src/common/utils/common.js
@@ -646,4 +646,16 @@ export function toQueryArgs(obj) {
         }
     });
     return searchParams.toString()
+}
+
+export function randomInt(start, end) {
+    if (start > end) {
+        start++;
+        end++;
+    } else if (end === start) {
+        return start;
+    }
+
+    const random = Math.random() * (end - start);
+    return Math.floor(random) + start
 }
diff --git a/web-src/src/main-app/MainApp.vue b/web-src/src/main-app/MainApp.vue
@@ -1,6 +1,6 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
     <div id="main-app">
-        <AppLayout ref="appLayout">
+        <AppLayout :loading="pageLoading" ref="appLayout">
             <template v-slot:sidebar>
                 <MainAppSidebar/>
             </template>
@@ -20,7 +20,7 @@
     import '@/assets/css/index.css';
     import AppLayout from '@/common/components/AppLayout';
     import {isEmptyString} from '@/common/utils/common';
-    import {mapActions} from 'vuex';
+    import {mapActions, mapState} from 'vuex';
     import AppWelcomePanel from './components/AppWelcomePanel';
     import DocumentTitleManager from './components/DocumentTitleManager';
     import FaviconManager from './components/FaviconManager';
@@ -42,6 +42,9 @@
                 init: 'init'
             })
         },
+        computed: {
+            ...mapState('page', ['pageLoading'])
+        },
 
         created() {
             this.init();

diff --git a/web-src/src/main-app/components/AppWelcomePanel.vue b/web-src/src/main-app/components/AppWelcomePanel.vue
@@ -13,6 +13,7 @@
 <script>
     import ConsoleImage from '@/assets/console.png'
     import CookieImage from '@/assets/cookie.png'
+    import {mapActions} from 'vuex';
 
     const defaultImageSrc = ConsoleImage;
     const cookieImageSrc = CookieImage;
@@ -25,6 +26,10 @@
             }
         },
 
+        methods: {
+            ...mapActions('page', ['setLoading'])
+        },
+
         mounted: function () {
             const welcomeCookiePanel = this.$refs.welcomeCookieText;
             welcomeCookiePanel.addEventListener('mouseover', () => {
@@ -34,6 +39,8 @@
             welcomeCookiePanel.addEventListener('mouseout', () => {
                 this.imageSrc = defaultImageSrc;
             });
+
+            this.setLoading(false);
         }
 
     }

diff --git a/web-src/src/main-app/components/history/AppHistoryPanel.vue b/web-src/src/main-app/components/history/AppHistoryPanel.vue
@@ -1,16 +1,45 @@
 <template>
     <div class="app-history-panel">
-        <ExecutionsLogPage class="main-app-executions-log"/>
+        <ExecutionsLogPage :disableProgressIndicator="true" class="main-app-executions-log"/>
     </div>
 </template>
 
 <script>
     import ExecutionsLogPage from '@/common/components/history/executions-log-page';
+    import {mapActions, mapState} from 'vuex';
 
     export default {
         name: 'AppHistoryPanel',
-        components: {ExecutionsLogPage}
+        components: {ExecutionsLogPage},
+        methods: {
+            ...mapActions('page', ['setLoading']),
+            updateLoadingIndicator() {
+                if (this.$route.params.executionId) {
+                    this.setLoading(this.detailsLoading);
+                } else {
+                    this.setLoading(this.loading);
+                }
+            }
+        },
+        computed: {
+            ...mapState('history', ['loading', 'detailsLoading'])
+        },
+        watch: {
+            loading: {
+                immediate: true,
+                handler() {
+                    this.updateLoadingIndicator()
+                }
+            },
+            detailsLoading: {
+                immediate: true,
+                handler() {
+                    this.updateLoadingIndicator()
+                }
+            }
+        }
     }
+
 </script>
 
 <style scoped>

diff --git a/web-src/src/main-app/components/scripts/MainAppContent.vue b/web-src/src/main-app/components/scripts/MainAppContent.vue
@@ -20,7 +20,7 @@
 
 <script>
     import {isEmptyString} from '@/common/utils/common';
-    import {mapState} from 'vuex';
+    import {mapActions, mapState} from 'vuex';
     import {NOT_FOUND_ERROR_PREFIX} from '../../store/scriptConfig';
     import ScriptView from './script-view';
 
@@ -32,12 +32,22 @@
             showError() {
                 return !!(this.scriptLoadError || !this.authenticated);
             },
-            ...mapState('auth', ['authenticated']),
-            ...mapState('scriptConfig', {scriptLoadError: 'loadError'}),
-            ...mapState('scripts', ['selectedScript']),
-
             notFound() {
                 return !isEmptyString(this.scriptLoadError) && this.scriptLoadError.startsWith(NOT_FOUND_ERROR_PREFIX);
+            },
+            ...mapState('auth', ['authenticated']),
+            ...mapState('scriptConfig', {scriptLoadError: 'loadError', loading: 'loading'}),
+            ...mapState('scripts', ['selectedScript'])
+        },
+        methods: {
+            ...mapActions('page', ['setLoading'])
+        },
+        watch: {
+            loading: {
+                immediate: true,
+                handler(newValue) {
+                    this.setLoading(newValue);
+                }
             }
         }
     }