Merge pull request #7502 from deutschebank/db-contrib/waltz-7470-loading-message-ui

Db contrib/waltz 7470 loading message UI

Author: jain-shreyans-db

waltz-ng/client/logical-flow/components/logical-flows-tabgroup-section/logical-flows-tabgroup-section.html

@@ -43,10 +43,24 @@
 
     <div ng-if="$ctrl.hasFlows">
         <waltz-logical-flows-tabgroup parent-entity-ref="$ctrl.parentEntityRef"
-                                      filters="$ctrl.filters">
+                                      filters="$ctrl.filters"
+                                      on-tab-selected="$ctrl.onTabSelected()">
         </waltz-logical-flows-tabgroup>
     </div>
-    <div ng-if="!$ctrl.hasFlows">
+    <div ng-if="!$ctrl.visibility.loading && $ctrl.hasFlows && !$ctrl.tabSelected">
+        <waltz-warning>
+            <message>
+                Please select a view: Choose Graph, Table, or flow Details to display data
+            </message>
+            <content></content>
+        </waltz-warning>
+    </div>
+    <div ng-if="$ctrl.loadingStats">
+        <waltz-loading-notification show="$ctrl.loadingStats"
+                                    name="Please wait while we retrieve this data">
+        </waltz-loading-notification>
+    </div>
+    <div ng-if="!$ctrl.loadingStats && !$ctrl.hasFlows">
         <waltz-no-data>
             <message>
                 <strong>No related flows found.</strong>

waltz-ng/client/logical-flow/components/logical-flows-tabgroup-section/logical-flows-tabgroup-section.js

@@ -35,7 +35,8 @@ const initialState = {
     visibility: {
         exportButton: false,
         sourcesOverlay: false
-    }
+    },
+    tabSelected: false
 };
 
 
@@ -66,6 +67,10 @@ function controller(serviceBroker) {
     vm.$onInit = () => {
     };
 
+    vm.onTabSelected = () => {
+        vm.tabSelected = true;
+    };
+
     vm.$onChanges = (changes) => {
 
         if (vm.parentEntityRef) {
@@ -98,4 +103,4 @@ const component = {
 };
 
 
-export default component;
+export default component;

waltz-ng/client/logical-flow/components/logical-flows-tabgroup/logical-flows-tabgroup.html

@@ -78,6 +78,11 @@
                     </div>
                 </div>
 
+                <div ng-if="!$ctrl.visibility.loadingFlows && $ctrl.loadingError">
+                    <div class="alert alert-warning">
+                        Unable to load the diagram, please refresh and try again
+                    </div>
+                </div>
             </uib-tab>
 
             <uib-tab index="3"

waltz-ng/client/logical-flow/components/logical-flows-tabgroup/logical-flows-tabgroup.js

@@ -29,7 +29,8 @@ import FlowDetailPanel from "../../../data-flow/components/svelte/flow-detail-ta
 
 const bindings = {
     filters: "<",
-    parentEntityRef: "<"
+    parentEntityRef: "<",
+    onTabSelected: "&?"
 };
 
 const initialState = {
@@ -40,7 +41,8 @@ const initialState = {
         loadingStats: false
     },
     FlowDetailPanel,
-    currentTabIndex: 0
+    currentTabIndex: 0,
+    loadingError: false
 };
 
 function controller($q,
@@ -69,6 +71,9 @@ function controller($q,
             .all([flowPromise, decoratorPromise])
             .then(() => {
                 vm.visibility.loadingFlows = false;
+            })
+            .catch(e => {
+                vm.loadingError = true;
             });
     };
 
@@ -85,6 +90,9 @@ function controller($q,
     };
 
     vm.tabSelected = (tabName, index) => {
+        if (_.isFunction(vm.onTabSelected)) {
+            vm.onTabSelected();
+        }
         if(index > 0) {
             loadDetail();
         }