Add caption, empty message and additional info to namespace registry

Signed-off-by: Ann Shumilova <ashumilova@codenvy.com>

dashboard/src/app/workspaces/workspace-details/workspace-details.controller.ts

@@ -51,6 +51,7 @@ export class WorkspaceDetailsController {
   namespaceId: string = '';
   namespaceLabel: string;
   namespaceLabels: Array<string>;
+  namespaceInfo: String;
   onNamespaceChanged: Function;
   workspaceId: string = '';
   workspaceName: string = '';
@@ -188,12 +189,14 @@ export class WorkspaceDetailsController {
         this.namespaceId = namespace ?  namespace.id : (this.getNamespaces().length ? this.getNamespaces()[0].id : undefined);
         this.namespaceLabel = namespace ?  namespace.label : (this.getNamespaces().length ? this.getNamespaces()[0].label : undefined);
         this.namespaceLabels = this.getNamespaces().length ? this.lodash.pluck(this.getNamespaces(), 'label') : [];
+        this.fetchNamespaceInfo();
 
         this.onNamespaceChanged = (label: string) => {
           let namespace = this.getNamespaces().find((namespace: any) => {
             return namespace.label === label;
           });
           this.namespaceId = namespace ? namespace.id : this.namespaceId;
+          this.fetchNamespaceInfo();
         }
       });
     }
@@ -268,7 +271,7 @@ export class WorkspaceDetailsController {
    */
   getWorkspaceStatus(): string {
     if (this.isCreationFlow) {
-      return 'CREATING';
+      return 'New';
     }
 
     let unknownStatus = 'unknown';
@@ -312,6 +315,17 @@ export class WorkspaceDetailsController {
     }
   }
 
+  fetchNamespaceInfo() {
+    if (!this.cheNamespaceRegistry.getAdditionalInfo()) {
+      this.namespaceInfo = null;
+      return;
+    }
+
+    this.cheNamespaceRegistry.getAdditionalInfo()(this.namespaceId).then((info: string) => {
+      this.namespaceInfo = info;
+    });
+  }
+
   /**
    * Callback when Team button is clicked in Edit mode.
    * Redirects to billing details or team details.
@@ -657,7 +671,7 @@ export class WorkspaceDetailsController {
 
     return tabs.some((tabIndex: number) => {
       return this.checkFormsNotValid(tabIndex);
-    });
+    }) || this.isDisableWorkspaceCreation();
   }
 
   /**
@@ -687,5 +701,41 @@ export class WorkspaceDetailsController {
     }
   }
 
+  /**
+   * Returns namespaces empty message if set.
+   *
+   * @returns {string}
+   */
+  getNamespaceEmptyMessage(): string {
+    return this.cheNamespaceRegistry.getEmptyMessage();
+  }
+
+  /**
+   * Returns namespaces caption.
+   *
+   * @returns {string}
+   */
+  getNamespaceCaption(): string {
+    return this.cheNamespaceRegistry.getCaption();
+  }
+
+  /**
+   * Returns namespaces additional information.
+   *
+   * @returns {()=>Function}
+   */
+  getNamespaceAdditionalInfo(): Function {
+    return this.cheNamespaceRegistry.getAdditionalInfo;
+  }
+
+  /**
+   * Returns whether workspace creation should be disabled based on namespaces.
+   *
+   * @returns {boolean|string}
+   */
+  isDisableWorkspaceCreation(): boolean {
+    let namespaces = this.cheNamespaceRegistry.getNamespaces();
+    return (this.isCreationFlow && (!namespaces || namespaces.length === 0) && this.cheNamespaceRegistry.getEmptyMessage());
+  }
 }
 

dashboard/src/app/workspaces/workspace-details/workspace-details.html

@@ -62,13 +62,23 @@
             </div>
           </che-label-container>
           <!-- Namespace -->
-          <che-label-container che-label-name="Team"
-                               ng-if="workspaceDetailsController.getNamespaces().length > 0">
-            <che-filter-selector che-values="workspaceDetailsController.namespaceLabels"
-                                 ng-if="workspaceDetailsController.isCreationFlow"
-                                 ng-model="workspaceDetailsController.namespaceLabel"
-                                 che-on-change="workspaceDetailsController.onNamespaceChanged"></che-filter-selector>
-            <che-button-default ng-if="!workspaceDetailsController.isCreationFlow"
+          <che-label-container che-label-name="{{workspaceDetailsController.getNamespaceCaption()}}"
+                               ng-if="workspaceDetailsController.getNamespaces().length > 0 || workspaceDetailsController.getNamespaceEmptyMessage()">
+
+            <div ng-if="workspaceDetailsController.isCreationFlow && workspaceDetailsController.getNamespaces().length > 0"
+                 layout="row" layout-align="start center">
+              <che-filter-selector che-values="workspaceDetailsController.namespaceLabels"
+                                   ng-model="workspaceDetailsController.namespaceLabel"
+                                   che-on-change="workspaceDetailsController.onNamespaceChanged"></che-filter-selector>
+              <span class="namespace-additional-info" ng-if="workspaceDetailsController.namespaceInfo">
+                {{workspaceDetailsController.namespaceInfo}}
+              </span>
+            </div>
+            <div ng-if="workspaceDetailsController.getNamespaces().length === 0 && workspaceDetailsController.getNamespaceEmptyMessage()" class="empty-namespace-label">
+              <i class="fa-exclamation-triangle fa fa-2x"></i>
+              {{workspaceDetailsController.getNamespaceEmptyMessage()}}
+            </div>
+            <che-button-default ng-if="!workspaceDetailsController.isCreationFlow && workspaceDetailsController.getNamespaces().length > 0"
                                 che-button-title="{{workspaceDetailsController.getNamespaceLabel(workspaceDetailsController.namespaceId)}}"
                                 ng-disabled="!workspaceDetailsController.getNamespace(workspaceDetailsController.namespaceId) || !workspaceDetailsController.getNamespace(workspaceDetailsController.namespaceId).location"
                                 ng-click="workspaceDetailsController.namespaceOnClick(workspaceDetailsController.namespaceId)"

dashboard/src/app/workspaces/workspace-details/workspace-details.styl

@@ -28,6 +28,18 @@
     .namespace-button button
       text-transform none !important
 
+    .namespace-additional-info
+      color $label-secondary-color
+      margin-left 10px
+
+    .empty-namespace-label
+      color $warning-color
+      margin-bottom 10px
+
+      i
+        margin-right 10px
+        font-size 16pt
+
     span.workspace-status-text
       color lighten($che-ide-background-color, 40%) !important
       margin-bottom 4px

dashboard/src/components/api/namespace/che-namespace-registry.factory.ts

@@ -9,7 +9,6 @@
  *   Codenvy, S.A. - initial API and implementation
  */
 'use strict';
-
 export interface INamespace {
   id: string;
   label: string;
@@ -25,6 +24,9 @@ export class CheNamespaceRegistry {
   private $q: ng.IQService;
   private fetchPromise: ng.IPromise<any>;
   private namespaces : INamespace[];
+  private emptyMessage: string;
+  private caption: string;
+  private getAdditionalInfoFunction: Function;
 
   /**
    * Default constructor that is using resource
@@ -33,6 +35,8 @@ export class CheNamespaceRegistry {
   constructor($q: ng.IQService) {
     this.$q = $q;
     this.namespaces = [];
+
+    this.caption = 'Namespace';
   }
 
   /**
@@ -76,4 +80,58 @@ export class CheNamespaceRegistry {
   getNamespaces() : INamespace[] {
     return this.namespaces;
   }
+
+  /**
+   * Set empty message (message is displayed, when no namespaces).
+   *
+   * @param message empty message
+   */
+  setEmptyMessage(message: string): void {
+    this.emptyMessage = message;
+  }
+
+  /**
+   * Returns empty message to display, when no namespaces.
+   *
+   * @returns {string}
+   */
+  getEmptyMessage(): string {
+    return this.emptyMessage ? this.emptyMessage : null;
+  }
+
+  /**
+   * Set display caption of the namespaces.
+   *
+   * @param caption namespaces caption
+   */
+  setCaption(caption: string): void {
+    this.caption = caption;
+  }
+
+  /**
+   * Returns the caption of the namespaces.
+   *
+   * @returns {string} namepsaces caption
+   */
+  getCaption(): string {
+    return this.caption;
+  }
+
+  /**
+   * Sets the function for retrieving available RAM for the namespaces.
+   *
+   * @param getAdditionalInfo additional information function
+   */
+  setGetAdditionalInfo(getAdditionalInfo: Function): void {
+    this.getAdditionalInfoFunction = getAdditionalInfo;
+  }
+
+  /**
+   * Returns function, that returns promise.
+   *
+   * @returns {Function}
+   */
+  getAdditionalInfo(): Function {
+    return this.getAdditionalInfoFunction;
+  }
 }