AMBARI-8554. Summary:Ambari View > Versions > Versions table + Registration E2E integration. (Richard Zang via yusaku)

ambari-admin/src/main/resources/ui/admin-web/app/assets/data/cluster/clusters.json

@@ -0,0 +1,10 @@
+{
+  "items" : [
+    {
+      "Clusters" : {
+        "cluster_name" : "c1",
+        "version" : "HDP-2.2"
+      }
+    }
+  ]
+}

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/stackVersions/StackVersionsCreateCtrl.js

@@ -18,35 +18,23 @@
 'use strict';
 
 angular.module('ambariAdminConsole')
-.controller('StackVersionsCreateCtrl', ['$scope', 'StackVersions', '$routeParams', function($scope, StackVersions, $routeParams) {
+.controller('StackVersionsCreateCtrl', ['$scope', 'StackVersions', '$routeParams', '$location', function($scope, StackVersions, $routeParams, $location) {
   $scope.clusterName = $routeParams.clusterName;
-  $scope.upgradePack = {
-    value: null,
-    options: [
-      'Pack 1',
-      'Pack 2',
-      'Pack 3',
-      'Pack 4'
-    ]
-  };
-  $scope.upgradePack.value = $scope.upgradePack.options[0];
-
   $scope.upgradeStack = {
     value: null,
     options: [
-      'HDP-2.2',
-      'HDP-2.3',
-      'HDP-2.4'
+      '2.2'
     ]
   };
   $scope.upgradeStack.value = $scope.upgradeStack.options[0];
 
+  // TODO retrieve operating systems and repo names from stack definition
   $scope.repositories = [
     {
       os: 'redhat5',
       packages: [
         {label:'HDP', value: null},
-        {label:'HDP-UTILS', value: null},
+        {label:'HDP-UTILS', value: null}
       ],
       selected: false
     },
@@ -54,7 +42,7 @@ angular.module('ambariAdminConsole')
       os: 'redhat6',
       packages: [
         {label:'HDP', value: null},
-        {label:'HDP-UTILS', value: null},
+        {label:'HDP-UTILS', value: null}
       ],
       selected: false
     },
@@ -62,7 +50,7 @@ angular.module('ambariAdminConsole')
       os: 'sles11',
       packages: [
         {label:'HDP', value: null},
-        {label:'HDP-UTILS', value: null},
+        {label:'HDP-UTILS', value: null}
       ],
       selected: false
     },
@@ -70,10 +58,16 @@ angular.module('ambariAdminConsole')
       os: 'ubuntu12',
       packages: [
         {label:'HDP', value: null},
-        {label:'HDP-UTILS', value: null},
+        {label:'HDP-UTILS', value: null}
       ],
       selected: false
     }
   ];
-  
+
+  $scope.create = function () {
+    StackVersions.add($scope.upgradeStack.value, $scope.versionName, $scope.repositories)
+    .success(function () {
+      $location.path('/stackVersions');
+    });
+  };
 }]);

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/stackVersions/StackVersionsListCtrl.js

@@ -18,15 +18,17 @@
 'use strict';
 
 angular.module('ambariAdminConsole')
-  .controller('StackVersionsListCtrl', ['$scope', 'StackVersions', '$routeParams', function ($scope, StackVersions, $routeParams) {
+  .controller('StackVersionsListCtrl', ['$scope', 'Cluster', 'StackVersions', '$routeParams', function ($scope, Cluster, StackVersions, $routeParams) {
   $scope.clusterName = $routeParams.clusterName;
+
+  // TODO retrieve a list of stacks having "upgrade_pack" from backend
   $scope.filter = {
     stack: {
       options: [
         {label: 'All', value: ''},
-        {label: 'HDP 2.2', value: 'hdp2.2'},
-        {label: 'HDP 2.3', value: 'hdp2.3'},
-        {label: 'HDP 2.4', value: 'hdp2.4'}
+        {label: 'HDP 2.2', value: '2.2'},
+        {label: 'HDP 2.3', value: '2.3'},
+        {label: 'HDP 2.4', value: '2.4'}
       ],
       current: null
     },
@@ -51,6 +53,11 @@ angular.module('ambariAdminConsole')
     currentPage: 1
   };
 
+  $scope.resetPagination = function () {
+    $scope.pagination.currentPage = 1;
+    $scope.getStackVersions();
+  };
+
   $scope.tableInfo = {
     total: 0,
     showed: 0,
@@ -58,10 +65,38 @@ angular.module('ambariAdminConsole')
   };
 
   $scope.stacks = [];
+  $scope.clusters = [{
+    Clusters: {
+      cluster_name: 'Install on...'
+    }
+  }];
+  $scope.selectedCluster = $scope.clusters[0];
+
+  $scope.clearFilters = function () {
+    $scope.filter.version = '';
+    $scope.filter.stack.current = $scope.filter.stack.options[0];
+    $scope.filter.cluster.current = $scope.filter.cluster.options[0];
+    $scope.resetPagination();
+  };
+
+  $scope.getAllClusters = function () {
+    return Cluster.getAllClusters().then(function (clusters) {
+      $scope.clusters = $scope.clusters.concat(clusters);
+    });
+  };
+  $scope.getAllClusters();
 
   $scope.getStackVersions = function () {
-    return StackVersions.list($scope.filter).then(function (stacks) {
-      $scope.stacks = stacks.data.items.map(function (stack) {
+    return StackVersions.list($scope.filter, $scope.pagination).then(function (stacks) {
+      $scope.pagination.totalStacks = stacks.items.length;
+      $scope.stacks = [];
+      angular.forEach(stacks.items, function(stack) {
+        var repoVersions = stack.repository_versions;
+        if (repoVersions.length > 0) {
+          $scope.stacks = $scope.stacks.concat(repoVersions);
+        }
+      });
+      $scope.stacks = $scope.stacks.map(function (stack) {
         return stack.RepositoryVersions;
       });
       $scope.tableInfo.total = stacks.length;

ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/Cluster.js

@@ -20,6 +20,18 @@
 angular.module('ambariAdminConsole')
 .factory('Cluster', ['$http', '$q', 'Settings', function($http, $q, Settings) {
   return {
+    getAllClusters: function() {
+      var deferred = $q.defer();
+      $http.get(Settings.baseUrl + '/clusters', {mock: 'cluster/clusters.json'})
+      .then(function(data, status, headers) {
+        deferred.resolve(data.data.items);
+      })
+      .catch(function(data) {
+        deferred.reject(data);
+      });
+
+      return deferred.promise;
+    },
     getStatus: function() {
       var deferred = $q.defer();
 

ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/StackVersions.js

@@ -50,13 +50,68 @@ angular.module('ambariAdminConsole')
   }
 
   return {
-    list: function (filter) {
-      return $http.get(Settings.baseUrl + '/stacks?fields=versions/RepositoryVersions', {mock: 'version/versions.json'});
+    list: function (filter, pagination) {
+      var stackFilter = filter.stack.current.value;
+      var versionFilter = filter.version;
+      var clusterFilter = filter.cluster.current.value;
+      var url = '/stacks/HDP/versions?fields=repository_versions/RepositoryVersions'; // TODO should not hard code HDP
+      if (stackFilter) {
+        url += '&repository_versions/RepositoryVersions/stack_version.matches(.*' + stackFilter + '.*)';
+      }
+      if (versionFilter) {
+        url += '&repository_versions/RepositoryVersions/repository_version.matches(.*' + versionFilter + '.*)';
+      }
+      if (clusterFilter) {
+        url += '';
+      }
+      url += '&from='+ (pagination.currentPage - 1) * pagination.itemsPerPage;
+      url += '&page_size=' + pagination.itemsPerPage;
+      var deferred = $q.defer();
+      $http.get(Settings.baseUrl + url, {mock: 'version/versions.json'})
+      .success(function (data) {
+        deferred.resolve(data)
+      })
+      .error(function (data) {
+        deferred.reject(data);
+      });
+      return deferred.promise;
     },
+
+    add: function (stack, version, osList) {
+      var url = '/stacks/HDP/versions/2.2/repository_versions/';
+      var payload = {};
+      payload.repository_version = stack + '.' + version;
+      payload.display_name = 'HDP-' + payload.repository_version;
+      payload.upgrade_pack = "upgrade-2.2"; // TODO get this value from backend
+      payload.operating_systems = [];
+      angular.forEach(osList, function (osItem) {
+        if (osItem.selected)
+        {
+          payload.operating_systems.push({
+            "OperatingSystems" : {
+              "os_type" : osItem.os
+            },
+            "repositories" : osItem.packages.map(function (pack) {
+              return {
+                "Repositories" : {
+                  "repo_id": (pack.label + '-' + payload.repository_version),
+                  "repo_name": pack.label,
+                  "base_url": pack.value? pack.value : ''
+                }
+              };
+            })
+          });
+        }
+      });
+      var payloadWrap = { RepositoryVersions : payload };
+      return $http.post(Settings.baseUrl + url, payloadWrap);
+    },
+
     get: function (version) {
       var url = Settings.baseUrl + '/stacks?versions/RepositoryVersions/repository_version=' + version +'&fields=versions/RepositoryVersions';
       return $http.get(url, {mock: 'version/version.json'});
     },
+
     getStackRepositories: function (version) {
       var url = Settings.baseUrl + '/stacks/HDP/versions/' + version + '/operating_systems?fields=*';
       return $http.get(url, {mock: 'stack/stack.json'});

ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/create.html

@@ -36,18 +36,9 @@
             ></select>
         </div>
       </div>
-      <div class="form-group">
-        <div class="col-sm-3"><label class="control-label">Upgrade Pack</label></div>
-        <div class="col-sm-3">
-          <select class="form-control"
-            ng-model="upgradePack.value"
-            ng-options="o as o for o in upgradePack.options"
-          ></select>
-        </div>
-      </div>
       <div class="form-group">
         <div class="col-sm-3"><label for="" class="control-label">Version Name</label></div>
-        <div class="col-sm-3"><input type="text" class="form-control" placeholder="Version Name"></div>
+        <div class="col-sm-3"><input type="text" ng-model="versionName" class="form-control" placeholder="Version Name"></div>
       </div>
     </div>
   </div>
@@ -91,7 +82,7 @@
     </div>
   </div>
   <div class="col-sm-12">
-    <button class="btn btn-primary pull-right left-margin">Save</button>
+    <button class="btn btn-primary pull-right left-margin" ng-click="create()">Save</button>
     <button class="btn btn-default pull-right">Cancel</button>
   </div>
 </form>

ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html

@@ -35,17 +35,19 @@
       <th class="col-small">
         <label>Stack</label>
         <select class="form-control"
+                ng-change="resetPagination()"
                 ng-model="filter.stack.current"
                 ng-options="item.label for item in filter.stack.options">
         </select>
       </th>
       <th class="col-medium">
         <label>Version</label>
-        <input type="text" class="form-control" ng-model="filter.version">
+        <input type="text" class="form-control" ng-change="resetPagination()" ng-model="filter.version">
       </th>
       <th class="col-small">
         <label>Cluster</label>
         <select class="form-control"
+                ng-change="resetPagination()"
                 ng-model="filter.cluster.current"
                 ng-options="item.label for item in filter.cluster.options"
           ></select>
@@ -62,20 +64,23 @@
           <i class="glyphicon glyphicon-cloud"></i>
           {{stack.cluster}}
         </a>
-        <span ng-show="!stack.cluster">None</span>
-      </td>
-      <td>
-        <div ng-show="stack.status !== 'INIT'">
-          <span class="label" ng-class="stack.statusClass">{{stack.statusLabel}}:&nbsp;{{stack.current_hosts.length}}/{{stack.totalHosts}}</span>
-        </div>
-      </td>
+    <select ng-show="!stack.cluster"
+            ng-model="selectedCluster"
+            ng-options="cluster.Clusters.cluster_name for cluster in clusters">
+    </select>
+    </td>
+    <td>
+      <div ng-show="stack.status !== 'INIT'">
+        <span class="label" ng-class="stack.statusClass">{{stack.statusLabel}}:&nbsp;{{stack.current_hosts.length}}/{{stack.totalHosts}}</span>
+      </div>
+    </td>
     </tr>
     </tbody>
   </table>
   <div class="col-sm-12 table-bar">
     <div class="pull-left filtered-info">
       <span>{{tableInfo.showed}} of {{tableInfo.total}} versions showing - </span>
-      <a href>clear filters</a>
+      <a href ng-click="clearFilters()">clear filters</a>
     </div>
     <div class="pull-right left-margin">
       <pagination class="paginator"
@@ -83,12 +88,14 @@
                   max-size="pagination.maxVisiblePages"
                   items-per-page="pagination.itemsPerPage"
                   ng-model="pagination.currentPage"
+                  ng-change="getStackVersions()"
       ></pagination>
     </div>
     <div class="pull-right">
       <select class="form-control"
               ng-model="pagination.itemsPerPage"
               ng-options="item for item in [10, 25, 50, 100]"
+              ng-change="resetPagination()"
         ></select>
     </div>
   </div>