Fix loader animation on factory loading page (#13415)

* add loader directive to demo-components Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> * refactor loader Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> * code clean-up Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> * fix loader animation Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com>
eclipse-che · May 27, 2019 · 6709fdc · 6709fdc
1 parent a11413d
commit 6709fdc
Show file tree

Hide file tree

Showing 7 changed files with 291 additions and 162 deletions.
diff --git a/dashboard/src/app/demo-components/demo-components.controller.ts b/dashboard/src/app/demo-components/demo-components.controller.ts
@@ -19,7 +19,7 @@ import {
 import {ICheEditModeOverlayConfig} from '../../components/widget/edit-mode-overlay/che-edit-mode-overlay.directive';
 import {CheNotification} from '../../components/notification/che-notification.factory';
 
-enum Tab {Font, Panel, Selecter, Icons, Dropdown_button,  Buttons, Input, List, Label_container, Stack_selector, Popover, Edit_mode_overlay}
+enum Tab {Font, Panel, Selecter, Icons, Dropdown_button, Buttons, Input, List, Label_container, Stack_selector, Popover, Edit_mode_overlay, Loader}
 
 /**
  * This class is handling the controller for the demo of components
@@ -57,6 +57,8 @@ export class DemoComponentsController {
 
   overlayConfig: ICheEditModeOverlayConfig;
 
+  loader: any;
+
   /**
    * Default constructor that is using resource
    */
@@ -152,6 +154,8 @@ export class DemoComponentsController {
         disabled: false
       }
     };
+
+    this.createLoader();
   }
 
   /**
@@ -182,4 +186,26 @@ export class DemoComponentsController {
     this.numberIsChanged++;
   }
 
+  createLoader(): void {
+    this.loader = {};
+    const allSteps = [
+      {text: 'Loading factory', inProgressText: '', logs: '', hasError: false},
+      {text: 'Looking for devfile', inProgressText: '', logs: '', hasError: false},
+      {text: 'Initializing workspace', inProgressText: 'Provision workspace and associating it with the existing user', logs: '', hasError: false},
+      {text: 'Starting workspace runtime', inProgressText: 'Retrieving the stack\'s image and launching it', logs: '', hasError: false},
+      {text: 'Starting workspace agent', inProgressText: 'Agents provide RESTful services like intellisense and SSH', logs: '', hasError: false},
+      {text: 'Open IDE', inProgressText: '', logs: '', hasError: false}
+    ]
+    this.loader.getLoadingSteps = () => allSteps;
+    let currentProgressStep = 0;
+    this.loader.getCurrentProgressStep = () => currentProgressStep;
+    this.loader.nextStep = () => {
+      currentProgressStep++;
+      currentProgressStep = currentProgressStep % (allSteps.length);
+    }
+    this.loader.pause = () => {
+      this.loader.paused = !this.loader.paused;
+    };
+  }
+
 }
diff --git a/dashboard/src/app/demo-components/demo-components.html b/dashboard/src/app/demo-components/demo-components.html
@@ -475,6 +475,30 @@ <h6>This is h6
 
     </md-tab>
 
+    <md-tab label="Crane" md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Loader)">
+
+      <div>
+        Current step: {{demoComponentsController.loader.getCurrentProgressStep()}}
+      </div>
+      <div>
+        <input type="button" value="Next Step" ng-click="demoComponentsController.loader.nextStep()">
+      </div>
+      <div>
+        <label for="loader-pause">Pause</label><input id="loader-pause" type="checkbox"
+          ng-click="demoComponentsController.loader.pause()" value="{{demoComponentsController.loader.paused}}">
+      </div>
+
+      <md-content flex>
+        <div class="{{demoComponentsController.loader.paused ? 'animation-pause' : ''}}">
+          <che-loader-crane che-all-steps="demoComponentsController.loader.getLoadingSteps()"
+            che-exclude-steps="[demoComponentsController.loader.getLoadingSteps().length-1]"
+            che-step="{{demoComponentsController.loader.getCurrentProgressStep()}}" che-switch-on-iteration="true">
+          </che-loader-crane>
+        </div>
+      </md-content>
+
+    </md-tab>
+
   </md-tabs>
 
 </md-content>
diff --git a/dashboard/src/app/demo-components/demo-components.styl b/dashboard/src/app/demo-components/demo-components.styl
@@ -19,3 +19,7 @@
 
         label
           min-width 100px
+
+    .animation-pause
+      .che-loader-animation
+        animation-play-state: paused
diff --git a/dashboard/src/app/factories/load-factory/load-factory.controller.ts b/dashboard/src/app/factories/load-factory/load-factory.controller.ts
@@ -11,7 +11,7 @@
  */
 'use strict';
 import {CheAPI} from '../../../components/api/che-api.factory';
-import {LoadFactoryService} from './load-factory.service';
+import {LoadFactoryService, FactoryLoadingStep} from './load-factory.service';
 import {CheNotification} from '../../../components/notification/che-notification.factory';
 import {RouteHistory} from '../../../components/routing/route-history.service';
 import {CheJsonRpcApi} from '../../../components/api/json-rpc/che-json-rpc-api.factory';
@@ -127,7 +127,7 @@ export class LoadFactoryController {
         } else {
           this.loadFactoryService.goToNextStep();
           this.$timeout(() => {
-             this.processFactorySource();
+            this.processFactorySource();
           }, 1500);
         }
       }, (error: any) => {
@@ -623,7 +623,7 @@ export class LoadFactoryController {
    *
    * @returns {any}
    */
-  getLoadingSteps(): any {
+  getLoadingSteps(): FactoryLoadingStep[] {
     return this.loadFactoryService.getFactoryLoadingSteps();
   }
 

diff --git a/dashboard/src/app/factories/load-factory/load-factory.service.ts b/dashboard/src/app/factories/load-factory/load-factory.service.ts
@@ -11,14 +11,21 @@
  */
 'use strict';
 
+export interface FactoryLoadingStep {
+  text: string;
+  logs: string;
+  hasError: boolean;
+  inProgressText?: string;
+}
+
 /**
  * This class is handling the service for the factory loading.
  * @author Ann Shumilova
  */
 export class LoadFactoryService {
   private loadFactoryInProgress: boolean;
   private currentProgressStep: number;
-  private loadingSteps: Array<any>;
+  private loadingSteps: Array<FactoryLoadingStep>;
 
   /**
    * Default constructor that is using resource
@@ -27,7 +34,6 @@ export class LoadFactoryService {
     this.loadFactoryInProgress = false;
     this.currentProgressStep = 0;
 
-
     this.loadingSteps = [
       {text: 'Loading factory', inProgressText: '', logs: '', hasError: false},
       {text: 'Looking for devfile', inProgressText: '', logs: '', hasError: false},
@@ -56,9 +62,9 @@ export class LoadFactoryService {
   /**
    * Returns the information of the factory's loading steps.
    *
-   * @returns {Array<any>} loading steps of the factory
+   * @returns {Array<FactoryLoadingStep>} loading steps of the factory
    */
-  getFactoryLoadingSteps(): Array<any> {
+  getFactoryLoadingSteps(): Array<FactoryLoadingStep> {
     return this.loadingSteps;
   }
 
@@ -91,7 +97,7 @@ export class LoadFactoryService {
    * Reset the loading progress.
    */
   resetLoadProgress(): void {
-    this.loadingSteps.forEach((step: any) => {
+    this.loadingSteps.forEach((step: FactoryLoadingStep) => {
       step.logs = '';
     step.hasError = false;
   });