mno-enterprise-frontend 2.0.0

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/file-model.js.coffee

@@ -0,0 +1,33 @@
+module = angular.module('maestrano.components.file-model',[])
+
+# Allows angular binding on <input type="file">
+# Usage: <input type="file" file-model="someScopeObject.file">
+module.directive("fileModel", [
+  '$parse', '$compile',
+  ($parse, $compile) ->
+    return {
+      restrict: 'A',
+      link: (scope, element, attrs) ->
+        model = $parse(attrs.fileModel)
+        modelSetter = model.assign
+
+        element.bind('change', ->
+            scope.$apply( ->
+                modelSetter(scope, element[0].files[0])
+            )
+        )
+        
+        # The filelist on an <input type="file"> is read only
+        # which means we cannot clear the list of files attached to it
+        # --
+        # The watcher below detects when the file-model is set to null,
+        # undefined or '' and automatically replaces the input element
+        # by a new one (no filelist attached)
+        scope.$watch(model
+        , (value, oldValue)-> 
+          if !angular.equals(value,oldValue) && (!value? || value = '')
+            clone = $compile(element.clone())(scope)
+            element.replaceWith(clone)
+        )
+    }
+])

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/maestrano-components.js.coffee

@@ -0,0 +1,22 @@
+# This main module requires all the sub-modules that should compose it
+# This pattern allows us to split a fat module in several files
+maestranoComponents = angular.module('maestrano.components', [
+  'maestrano.components.mno-match',
+  'maestrano.components.mno-flash-msg',
+  'maestrano.components.mno-helptext',
+  'maestrano.components.mno-autostop-app',
+  'maestrano.components.mno-notification-widget',
+  'maestrano.components.mno-loading-lounge',
+  'maestrano.components.mno-scroll-to',
+  'maestrano.components.mno-currency-widget',
+  'maestrano.components.file-model',
+  'maestrano.components.mno-price-converter',
+  'maestrano.components.mno-current-currency',
+  'maestrano.components.mno-password-strength',
+  'maestrano.components.mno-editable',
+  'maestrano.components.mno-typeahead',
+  'maestrano.components.mno-message-modal',
+  'maestrano.components.mno-compile',
+  'maestrano.components.mno-password',
+  ]
+)

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/mno-autostop-app.js.coffee

@@ -0,0 +1,123 @@
+module = angular.module('maestrano.components.mno-autostop-app',['maestrano.assets'])
+
+#============================================
+# Component 'Select App'
+#============================================
+module.controller('MnoAutostopAppCtrl',[
+  '$scope', '$rootScope', '$window', 'MsgBus', 'Utilities','$modal', '$http'
+  ($scope, $rootScope, $window, MsgBus, Utilities, $modal, $http) ->
+    $scope.assetPath = $rootScope.assetPath
+    $scope.windowHeight = $window.innerHeight
+
+    #===================================
+    # Load Scope
+    #===================================
+    $scope.autostopModal = autostopModal = {}
+    $scope.currentAppBeingAsked = undefined
+
+
+    if angular.isArray($scope.mnoAutostopApp())
+      $scope.appQueue = appQueue = $scope.mnoAutostopApp
+    else if angular.isObject($scope.mnoAutostopApp())
+      $scope.appQueue = appQueue = (->[$scope.mnoAutostopApp()])
+    else
+      $scope.appQueue = appQueue = MsgBus.subscribe('autostopQueue')
+
+    #===================================
+    # Watch the queue and open modals
+    # successively until empty
+    #===================================
+    $scope.$watch(
+      () ->
+        if !autostopModal.isOpen
+          if $scope.currentAppBeingAsked != undefined
+            autostopModal.open($scope.currentAppBeingAsked)
+          else if appQueue().length > 0
+            $scope.currentAppBeingAsked = appQueue()[0]
+      ,(->))
+
+
+    #===================================
+    # AutostopModal
+    #===================================
+    # Open the autostopModal and reset the proceed action
+    autostopModal.open = (instance) ->
+      self = autostopModal
+      self.$instance = $modal.open(templateUrl: 'internal-autostop-modal.html', scope: $scope)
+      self.isOpen = true
+      self.instance = instance
+      self.defaultDuration = 1
+      self.model = {}
+      self.model.duration = self.defaultDuration
+      if instance.name
+        self.title = "Choose idle time for #{instance.name}"
+      else if instance.appName
+        self.title = "Choose idle time for #{instance.appName}"
+      else
+        self.title = "Choose idle time for this app"
+
+      self.proceed =  () ->
+        self.inProgress = true
+
+        if self.model.duration != self.defaultDuration
+          $http.put("/app_instances/#{instance.id}/autostop", {duration: self.model.duration}).then(
+            (success) ->
+              self.close()
+            (error) ->
+              self.errors = Utilities.processRailsError(error)
+              self.inProgress = false
+          )
+        else
+          self.close()
+
+    autostopModal.availableDurations = () ->
+      self = autostopModal
+      return [1,2,3,4,5,6,8,10]
+
+
+    autostopModal.select = (duration) ->
+      self = autostopModal
+      self.model.duration = duration
+
+
+    autostopModal.classFor = (duration) ->
+      self = autostopModal
+      if duration == self.model.duration
+        return "selected"
+
+    autostopModal.proceedEnabled = () ->
+      return true
+
+    autostopModal.text = () ->
+      self = autostopModal
+      return "Your app will automatically be offlined after <b class=\"text-info\">#{self.model.duration} hour(s)</b> of inactivity."
+
+    # Close the transferModal and reset its values
+    autostopModal.close = () ->
+      self = autostopModal
+      self.$instance.close()
+      self.errors = []
+      $scope.currentAppBeingAsked = undefined
+      self.inProgress = false
+      self.model = {}
+      self.instance = {}
+      self.cancel = self.defaultProceed
+      self.isOpen = false
+      appQueue().shift()
+
+
+    # This is the default proceed method
+    autostopModal.defaultProceed = () ->
+      autostopModal.close()
+])
+
+module.directive('mnoAutostopApp', ['TemplatePath', (TemplatePath) ->
+  return {
+      restrict: 'A',
+      scope: {
+        mnoAutostopApp: '&'
+      },
+      templateUrl: TemplatePath['mno_enterprise/maestrano-components/autostop_app.html'],
+      controller: 'MnoAutostopAppCtrl'
+    }
+])

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/mno-compile.js.coffee

@@ -0,0 +1,18 @@
+module = angular.module('maestrano.components.mno-compile',[])
+
+module.directive('compile', ['$compile', ($compile) ->
+  (scope, element, attrs) ->
+    scope.$watch ((scope) ->
+      # watch the 'compile' expression for changes
+      scope.$eval attrs.compile
+    ), (value) ->
+      # when the 'compile' expression changes
+      # assign it into the current DOM
+      element.html value
+    
+      # compile the new DOM and link it to the current
+      # scope.
+      # NOTE: we only compile .childNodes so that
+      # we don't get into infinite loop compiling ourselves
+      return $compile(element.contents()) scope
+])

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/mno-currency-widget.js.coffee

@@ -0,0 +1,43 @@
+module = angular.module('maestrano.components.mno-currency-widget',['maestrano.assets'])
+
+#============================================
+# Component 'Currency Widget'
+#============================================
+
+
+module.controller('MnoCurrencyWidgetCtrl',['$scope', 'CurrentCurrency', ($scope, CurrentCurrency) ->
+
+
+  $scope.currencies = ["USD","AUD","CAD","CNY","EUR","GBP","HKD","INR","JPY","NZD","SGD","PHP"]
+  $scope.currentCurrency = CurrentCurrency.val
+  
+  # Set the currency
+  $scope.setCurrency = (currency) ->
+    CurrentCurrency.val = currency
+  
+  # Outject 'selectedCurrency' function in scope.
+  # 'selected-currency' is accessible via directive attribute
+  # and can be called by other element on the page that are
+  # not angular ready (haml pages)
+  $scope.selectedCurrency = ->
+    return CurrentCurrency.val
+    
+  # Initialize current currency based on user location
+  curr = if window.currentVisitorCountryCode is "AU" then "AUD" else "USD"
+  $scope.setCurrency(curr)
+
+])
+
+module.directive('mnoCurrencyWidget', ['TemplatePath', '$timeout', (TemplatePath, $timeout) ->
+  return {
+      link: (scope,element,attrs) ->
+        $timeout ->
+          $('select.select-picker').selectpicker()
+        ,1000
+      restrict: 'A',
+      scope:
+        selectedCurrency: '=?'
+      templateUrl: TemplatePath['mno_enterprise/maestrano-components/currency_widget.html'],
+      controller: 'MnoCurrencyWidgetCtrl',
+  }
+])

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/mno-current-currency.js.coffee

@@ -0,0 +1,22 @@
+module = angular.module('maestrano.components.mno-current-currency',['maestrano.assets'])
+
+#============================================
+# Component 'Current Currency'
+#============================================
+
+
+module.controller('MnoCurrentCurrencyCtrl',['$scope', 'CurrentCurrency', ($scope, CurrentCurrency) ->
+
+  $scope.currentCurrency = ->
+    return CurrentCurrency.val
+
+])
+
+module.directive('mnoCurrentCurrency', ['TemplatePath', (TemplatePath) ->
+  return {
+    restrict: 'A',
+    scope: {}
+    template: "<span>{{currentCurrency()}}</span>",
+    controller: 'MnoCurrentCurrencyCtrl',
+  }
+])

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/mno-editable.js.coffee

@@ -0,0 +1,68 @@
+module = angular.module('maestrano.components.mno-editable',['maestrano.assets'])
+
+#============================================
+# Component
+#============================================
+module.controller('MnoEditableCtrl',[
+  '$scope','$http','$element',
+  ($scope, $http, $element) ->
+
+    $scope.model = { orig:$scope.initialValue, value:$scope.initialValue }
+
+    # Perform an ajax request to update the content element
+    $scope.updateField = () ->
+      route = "/mnoe/jpi/v1/admin/content/#{$scope.contentableId}"
+      data = {
+        contentable_type: $scope.contentableType
+        field_name: $scope.fieldName
+        value: $scope.model.value
+      }
+      $http.put(route,data).then(
+        (success) ->
+          $scope.model.orig = $scope.model.value
+        ,(error) ->
+          $scope.model.value = $scope.model.orig
+      )
+      return true
+
+    $scope.uploadImage = () ->
+      opts = { transformRequest: angular.identity, headers: {'Content-Type': undefined} }
+      route = "/mnoe/jpi/v1/admin/content/#{$scope.contentableId}/upload_image"
+      data = new FormData()
+      data.append('image',$scope.model.image)
+      data.append('contentable_type',$scope.contentableType)
+      data.append('field_name',$scope.fieldName)
+      $http.put(route,data,opts).then(
+        (success) ->
+          $scope.model.orig = success.data
+      )
+
+])
+
+module.directive('mnoEditable', ['TemplatePath', (TemplatePath) ->
+  return {
+      restrict: 'A',
+      scope: {
+        contentableType:'@'
+        contentableId:'@'
+        fieldName:'@'
+        contentType:'@'
+        initialValue:'@'
+        customStyle:'@'
+      },
+      controller: 'MnoEditableCtrl'
+      templateUrl: TemplatePath['mno_enterprise/maestrano-components/editable.html'],
+      link: (scope, element, attrs) ->
+        scope.showForm = false
+        element.on("mouseenter", ->
+          scope.showForm = true
+          scope.$apply()
+        )
+
+        element.on("mouseleave", ->
+          scope.showForm = false
+          scope.$apply()
+        )
+
+    }
+])

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/mno-flash-msg.js.coffee

@@ -0,0 +1,40 @@
+module = angular.module('maestrano.components.mno-flash-msg',[])
+
+#============================================
+# Component 'Flash Msg'
+#============================================
+module.controller('MnoFlashMsgCtrl',[
+  '$scope', 'MsgBus',
+  ($scope, MsgBus) ->
+    
+    # Message bus connection
+    $scope.errors = MsgBus.subscribe('errors')
+    
+    # Only show the flash message if
+    # there are errors in the pipe
+    $scope.isFlashShown = () ->
+      $scope.errors().length > 0
+    
+    # Empty the errors array in the MsgBus
+    $scope.closeFlash = () ->
+      MsgBus.publish('errors',[])
+    
+])
+
+module.directive('mnoFlashMsg', ['TemplatePath', (TemplatePath) ->
+  return {
+      restrict: 'A'
+      scope: {}
+      controller: 'MnoFlashMsgCtrl'
+      template: '
+      <div class="alert alert-error alert-top fade" ng-class="isFlashShown() && \'in\'">
+        <button class="close" ng-click="closeFlash()">&times;</button>
+        <strong>Snap! This action couldn\'t be performed.</strong>
+        <ul>
+          <li ng-repeat="error in errors()">
+            {{error}}
+          </li>
+        </ul>
+      </div>'
+    }
+])

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/mno-helptext.js.coffee

@@ -0,0 +1,38 @@
+module = angular.module('maestrano.components.mno-helptext',[])
+
+module.directive("mnoHelptext", ['$window', ($window) ->
+  return {
+    restrict: 'A'
+    link: (scope, elem, attrs, ctrl) ->
+      delay = attrs.helptextDelay
+      scope.$watch(
+        () ->
+          attrs.mnoHelptext
+        ,() ->
+          $(elem).tooltip({
+            title: attrs.mnoHelptext,
+            html: true,
+            delay: {
+              show: (delay || 1000)
+              hide: 100
+            },
+            animation: false,
+            placement: () ->
+              if attrs.helptextPlacement
+                return attrs.helptextPlacement
+              else
+                # Calculate remaining space on bottom, right, left
+                remainingBottom = $($window).height() + $($window).scrollTop() - $(elem).offset().top - $(elem).height()
+                remainingLeft = $(elem).offset().left - $($window).scrollLeft()
+                remainingRight = $($window).width() - remainingLeft - $(elem).width()
+
+                # Adjust positioning based on remaining space
+                # Note that according to the rules below bottom is clearly preferred
+                position = (if remainingBottom < 200 then 'top' else 'bottom')
+                position = 'right' if remainingLeft < 50
+                position = 'left' if remainingRight < 50
+                return position
+          })
+      )
+  }
+])

data/app/assets/javascripts/mno_enterprise/angular/directives/maestrano-components/mno-loading-lounge.js.coffee

@@ -0,0 +1,184 @@
+module = angular.module('maestrano.components.mno-loading-lounge',['maestrano.assets'])
+
+#============================================
+# Component 'LoadingLounge'
+# --
+# Standalone component used on the app loading
+# page
+#============================================
+module.controller('MnoLoadingLoungeCtrl',[
+  '$scope', '$http', 'AssetPath', 'Utilities', '$window', '$timeout'
+  ($scope, $http, AssetPath, Utilities, $window, $timeout) ->
+
+    #==========================
+    # Init
+    #==========================
+    $scope.assetPath = AssetPath
+    $scope.appInstance = appInstance = $scope.mnoLoadingLounge()
+    appInstanceId = $scope.mnoLoadingLounge().id
+
+    $scope.redirectionCounter = 5 #seconds
+    $scope.scheduler = null
+    $scope.redirectScheduler = null
+
+
+    #==========================
+    # Helpers
+    #==========================
+    currentStatus = $scope.currentStatus = () ->
+      if appInstance.id
+        if appInstance.errors && appInstance.errors.length > 0
+          'errors'
+        else if appInstance.status in ['terminating','terminated']
+          'terminated'
+        else if appInstance.status == 'running' && appInstance.is_online
+          'online'
+        else if appInstance.status in ['provisioning','staged']
+          'creating'
+        else if appInstance.status == 'updating' || (appInstance.status == 'running' && !appInstance.is_online)
+          'updating'
+        else
+          # starting/stopping
+          # Note: If 'stopping' and no errors it means that a start has been
+          # successfully requested
+          'loading'
+      else
+        'not_found'
+
+    $scope.errorMessages = () ->
+      Utilities.processRailsError(appInstance.errors)
+
+    $scope.isProgressBarShown = () ->
+      currentStatus() == 'creating' || currentStatus() == 'loading'
+
+    # Return the action progression in percent
+    # unit
+    # Eg. $scope.progressBarPercent() -> 95%
+    $scope.progressBarPercent = () ->
+      # Get out of there if the bar is not shown
+      if !$scope.isProgressBarShown()
+        return 0
+
+      # Get the relevant status from an actionProgress
+      # point of view
+      realStatus = appInstance.status
+      realStatus = 'provisioning' if realStatus == 'staged'
+      realStatus = 'starting' if realStatus == 'restarting'
+
+      # Get the maxDuration (seconds) for the current action
+      # In case the app is stopping we consider that a start
+      # has been requested. Therefore we add the starting
+      # time on top of it
+      maxDuration = appInstance.durations[realStatus]
+      maxDuration += appInstance.durations['starting'] if realStatus == 'stopping'
+
+      # Get the referenceField based on
+      # the action being performed
+      referenceField = {
+        'provisioning': 'created_at',
+        'starting': 'started_at',
+        'stopping': 'stopped_at',
+        }[realStatus]
+
+      # Get the action elapsed time in seconds
+      startTime = new Date(appInstance[referenceField])
+      endTime = new Date(appInstance.server_time)
+      elapsedTime = (endTime.getTime() - startTime.getTime()) / 1000
+
+      # Calculate the percentage
+      # Max value is 95% / Min value is 5%
+      # Cesar: test should prevent division by 0 and display of "Nan%"
+      if (maxDuration > 0)
+        percent = Math.round((elapsedTime / maxDuration)*100)
+        percent = Math.min(percent, 95)
+        percent = Math.max(percent, 5)
+      else
+        percent = 95
+
+      percent = "#{percent}%"
+      return percent
+
+    reloadAppInstance = (_appInstance)->
+      q = $http.get($window.location.pathname)
+      q.then(
+        (success) ->
+          angular.copy(success.data,_appInstance)
+      )
+      return q
+
+    $scope.startAutoRefresh = () ->
+      intervalMilliSec = 5 * 1000 # 15s
+      # Make sure we cancel any previous
+      # scheduler first
+      if $scope.scheduler?
+        $timeout.cancel($scope.scheduler)
+
+      # Configure the scheduler
+      $scope.scheduler = $timeout(->
+        reloadAppInstance(appInstance)
+        $scope.startAutoRefresh()
+      ,intervalMilliSec)
+
+    $scope.stopAutoRefresh = () ->
+      if $scope.scheduler?
+        $timeout.cancel($scope.scheduler)
+
+    $scope.redirectUrl = ->
+      "/mnoe/launch/#{appInstance.uid}"
+
+    $scope.performRedirection = () ->
+      # Then reload the page
+      window.location = $scope.redirectUrl()
+
+    $scope.startRedirectCountdown = () ->
+      intervalMilliSec = 1 * 1000
+      # Make sure we cancel any previous
+      # scheduler first
+      if $scope.redirectScheduler?
+        $timeout.cancel($scope.redirectScheduler)
+
+      # Configure the scheduler
+      $scope.redirectScheduler = $timeout(->
+        $scope.redirectionCounter -= 1
+        $scope.startRedirectCountdown() if $scope.redirectionCounter > 0
+        $scope.performRedirection() if $scope.redirectionCounter == 0
+      ,intervalMilliSec)
+
+
+    $scope.stopRedirectCountdown = () ->
+      if $scope.redirectScheduler?
+        $timeout.cancel($scope.redirectScheduler)
+        $scope.redirectionCounter = 5
+
+    #==========================
+    # Watchers
+    #==========================
+    # Watch status
+    $scope.$watch(
+      (-> currentStatus())
+      ,(status)->
+        # Enable appInstance refresh?
+        if status == 'loading' || status == 'creating' || status == 'updating'
+          $scope.startAutoRefresh() unless $scope.scheduler
+        else
+          $scope.stopAutoRefresh() if $scope.scheduler
+
+        # Enable redirection counter?
+        if status == 'online'
+          $scope.startRedirectCountdown() unless $scope.redirectScheduler
+        else
+          $scope.stopRedirectCountdown() if $scope.redirectScheduler
+    )
+
+])
+
+module.directive('mnoLoadingLounge', ['TemplatePath', (TemplatePath) ->
+  return {
+      restrict: 'AE',
+      scope: {
+        mnoLoadingLounge: '&'
+      },
+      templateUrl: TemplatePath['mno_enterprise/maestrano-components/loading_lounge.html'],
+      controller: 'MnoLoadingLoungeCtrl'
+    }
+])