AMBARI-8691. Admin View: Repo Management Tweaks. (Richard Zang via yusaku)

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

@@ -0,0 +1,37 @@
+{
+  "href" : "http://c6401.ambari.apache.org:8080/api/v1/clusters/c1/stack_versions?fields=*&ClusterStackVersions/repository_version=1",
+  "items" : [
+    {
+      "href" : "http://c6401.ambari.apache.org:8080/api/v1/clusters/c1/stack_versions/1",
+      "ClusterStackVersions" : {
+        "cluster_name" : "c1",
+        "id" : 1,
+        "repository_version" : 1,
+        "stack" : "HDP",
+        "state" : "CURRENT",
+        "version" : "2.2",
+        "host_states" : {
+          "CURRENT" : [
+            "c6401.ambari.apache.org"
+          ],
+          "INSTALLED" : [ ],
+          "INSTALLING" : [ ],
+          "INSTALL_FAILED" : [ ],
+          "UPGRADED" : [ ],
+          "UPGRADE_FAILED" : [ ],
+          "UPGRADING" : [ ]
+        }
+      },
+      "repository_versions" : [
+        {
+          "href" : "http://c6401.ambari.apache.org:8080/api/v1/clusters/c1/stack_versions/1/repository_versions/1",
+          "RepositoryVersions" : {
+            "id" : 1,
+            "stack_name" : "HDP",
+            "stack_version" : "2.2"
+          }
+        }
+      ]
+    }
+  ]
+}

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

@@ -23,29 +23,13 @@ angular.module('ambariAdminConsole')
 
   // TODO retrieve a list of stacks having "upgrade_pack" from backend
   $scope.filter = {
-    stack: {
-      options: [
-        {label: 'All', value: ''},
-        {label: 'HDP 2.2', value: '2.2'},
-        {label: 'HDP 2.3', value: '2.3'},
-        {label: 'HDP 2.4', value: '2.4'}
-      ],
-      current: null
-    },
     version: '',
     cluster: {
-      options: [
-        {label: 'All', value: ''},
-        {label: 'MyCluster', value: 'MyCluster'},
-        {label: 'Another Cluster', value: 'anotherCluster'}
-      ],
+      options: [],
       current: null
     }
   };
 
-  $scope.filter.stack.current = $scope.filter.stack.options[0];
-  $scope.filter.cluster.current = $scope.filter.cluster.options[0];
-
   $scope.pagination = {
     totalStacks: 10,
     maxVisiblePages: 20,
@@ -53,15 +37,6 @@ angular.module('ambariAdminConsole')
     currentPage: 1
   };
 
-  $scope.resetPagination = function () {
-    $scope.pagination.currentPage = 1;
-    $scope.getStackVersions();
-  };
-
-  $scope.goToCluster = function() {
-    window.location.replace('/#/main/admin/versions/updates');
-  };
-
   $scope.tableInfo = {
     total: 0,
     showed: 0,
@@ -69,43 +44,82 @@ angular.module('ambariAdminConsole')
   };
 
   $scope.stacks = [];
-  $scope.clusters = [{
-    Clusters: {
-      cluster_name: 'Install on...'
-    }
-  }];
-  $scope.selectedCluster = $scope.clusters[0];
+  $scope.dropDownClusters = [];
+  $scope.selectedCluster = $scope.dropDownClusters[0];
+
+  $scope.resetPagination = function () {
+    $scope.pagination.currentPage = 1;
+    $scope.fetchRepos();
+  };
+
+  $scope.goToCluster = function() {
+    window.location.replace('/#/main/admin/versions/updates');
+  };
 
   $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.fetchRepoClusterStatus = function (repos) {
+    var clusterName = $scope.clusters[0].Clusters.cluster_name; // only support one cluster at the moment
+    angular.forEach(repos, function (repo) {
+      Cluster.getRepoVersionStatus(clusterName, repo.id).then(function (response) {
+        repo.status = response.status;
+        repo.totalHosts = response.totalHosts;
+        repo.currentHosts = response.currentHosts;
+        repo.cluster = response.status == 'current'? clusterName : '';
+      });
     });
   };
-  $scope.getAllClusters();
 
-  $scope.getStackVersions = function () {
-    return Stack.allRepos($scope.filter, $scope.pagination).then(function (stacks) {
+  $scope.fetchRepos = function () {
+    Stack.allRepos($scope.filter, $scope.pagination).then(function (stacks) {
       $scope.pagination.totalStacks = stacks.items.length;
-      $scope.stacks = [];
+      var repos = [];
       angular.forEach(stacks.items, function(stack) {
         var repoVersions = stack.repository_versions;
         if (repoVersions.length > 0) {
-          $scope.stacks = $scope.stacks.concat(repoVersions);
+          repos = repos.concat(repoVersions);
         }
       });
-      $scope.stacks = $scope.stacks.map(function (stack) {
+      repos = repos.map(function (stack) {
         return stack.RepositoryVersions;
       });
+      $scope.repos = repos;
       $scope.tableInfo.total = stacks.length;
       $scope.tableInfo.showed = stacks.length;
+      $scope.fetchRepoClusterStatus($scope.repos);
+    });
+  };
+
+  $scope.fillClusters = function (clusters) {
+    $scope.dropDownClusters = [{
+      Clusters: {
+        cluster_name: 'Install on...'
+      }
+    }].concat(clusters);
+    $scope.selectedCluster = $scope.dropDownClusters[0];
+    angular.forEach(clusters, function (cluster) {
+      var options = [{label: "All", value: ''}];
+      angular.forEach(clusters, function (cluster) {
+        options.push({
+          label: cluster.Clusters.cluster_name,
+          value: cluster.Clusters.cluster_name
+        });
+      });
+      $scope.filter.cluster.options = options;
+      $scope.filter.cluster.current = options[0];
+    });
+  };
+
+  $scope.fetchClusters = function () {
+    Cluster.getAllClusters().then(function (clusters) {
+      $scope.clusters = clusters;
+      $scope.fillClusters(clusters);
+      $scope.fetchRepos();
     });
   };
-  $scope.getStackVersions();
+  $scope.fetchClusters();
 }]);

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

@@ -126,6 +126,34 @@ angular.module('ambariAdminConsole')
           }
         }
       });
+    },
+    getRepoVersionStatus: function (clusterName, repoId ) {
+      var deferred = $q.defer();
+      var url = Settings.baseUrl + '/clusters/' + clusterName +
+        '/stack_versions?fields=*&ClusterStackVersions/repository_version=' + repoId;
+      $http.get(url, {mock: 'cluster/repoVersionStatus.json'})
+      .success(function (data) {
+        data = data.items;
+        var response = {};
+        if (data.length > 0) {
+          var hostStatus = data[0].ClusterStackVersions.host_states;
+          var currentHosts = hostStatus['CURRENT'].length;
+          var totalHosts = 0;
+          angular.forEach(hostStatus, function(status) {
+            totalHosts += status.length;
+          });
+          response.status = currentHosts > 0? 'current' : '';
+          response.currentHosts = currentHosts;
+          response.totalHosts = totalHosts;
+        } else {
+          response.repoState = '';
+        }
+        deferred.resolve(response);
+      })
+      .catch(function (data) {
+        deferred.reject(data);
+      });
+      return deferred.promise;
     }
   };
 }]);

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

@@ -75,19 +75,11 @@ angular.module('ambariAdminConsole')
     },
 
     allRepos: 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();

ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css

@@ -1278,4 +1278,22 @@ accordion .panel-group .panel{
 
 .popover-content {
   word-wrap: break-word;
+}
+
+.cluster-section {
+  padding-left: 19px;
+}
+
+.repo-version-inline .repo-version-label {
+  text-align: left;
+
+}
+
+.repo-version-inline .bold-dot {
+  font-weight: bold;
+}
+
+.status-current
+{
+  background-color: green;
 }

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

@@ -19,7 +19,7 @@
   <div class="panel panel-default">
     <div class="panel-heading"><span class="glyphicon glyphicon-cloud"></span> Clusters</div>
     <div class="panel-body">
-      <div ng-show="cluster">
+      <div class="cluster-section" ng-show="cluster">
         <div id="cluster-name"  ng-switch on="editCluster.editingName">
           <h5 ng-switch-when="false">{{cluster.Clusters.cluster_name}}
             <i ng-show="cluster.Clusters.provisioning_state == 'INSTALLED'" ng-click="toggleEditName()" class="glyphicon glyphicon-edit pull-right edit-cluster-name" tooltip="Rename Cluster"></i>

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

@@ -27,18 +27,18 @@
       <h3 class="panel-title">Details</h3>
     </div>
     <div class="panel-body">
-      <div class="form-group">
-        <div class="col-sm-3"><label class="control-label">Stack</label></div>
-        <div class="col-sm-3">
+      <div class="form-inline repo-version-inline">
+        <label class="control-label col-sm-2 repo-version-label">Version</label>
+        <div class="form-group col-sm-3">
           <select class="form-control"
                   ng-model="upgradeStack.value"
                   ng-options="o.value as o.displayName for o in upgradeStack.options">
           </select>
+          <span class="bold-dot">.</span>
+        </div>
+        <div class="form-group col-sm-3">
+          <input class="form-control" type="text" ng-model="versionName" placeholder="Version Name">
         </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" ng-model="versionName" class="form-control" placeholder="Version Name"></div>
       </div>
     </div>
   </div>

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

@@ -32,14 +32,6 @@
   <table class="table table-striped table-hover">
     <thead>
     <tr>
-      <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-change="resetPagination()" ng-model="filter.version">
@@ -56,25 +48,24 @@
     </tr>
     </thead>
     <tbody>
-    <tr ng-repeat="stack in stacks">
-      <td class="col-small">{{stack.stack_name + '-' + stack.stack_version}}</td>
-      <td class="col-medium"><a href="#/stackVersions/{{stack.repository_version}}/edit">{{stack.repository_version}}</a></td>
+    <tr ng-repeat="repo in repos">
+      <td class="col-medium"><a href="#/stackVersions/{{repo.repository_version}}/edit">{{'HDP-' + repo.repository_version}}</a></td>
       <td class="col-small">
-        <a href ng-show="stack.cluster">
+        <a href ng-show="repo.cluster">
           <i class="glyphicon glyphicon-cloud"></i>
-          {{stack.cluster}}
+          {{repo.cluster}}
         </a>
-    <select ng-show="!stack.cluster"
-            ng-change="goToCluster()"
-            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>
+        <select ng-show="!repo.cluster"
+                ng-change="goToCluster()"
+                ng-model="selectedCluster"
+                ng-options="cluster.Clusters.cluster_name for cluster in dropDownClusters">
+        </select>
+      </td>
+      <td>
+        <div ng-show="repo.status == 'current'">
+          <span class="label {{'status-' + repo.status}}">Current:&nbsp;{{repo.currentHosts}}/{{repo.totalHosts}}</span>
+        </div>
+      </td>
     </tr>
     </tbody>
   </table>
@@ -89,7 +80,7 @@
                   max-size="pagination.maxVisiblePages"
                   items-per-page="pagination.itemsPerPage"
                   ng-model="pagination.currentPage"
-                  ng-change="getStackVersions()"
+                  ng-change="fetchRepos()"
       ></pagination>
     </div>
     <div class="pull-right">

ambari-admin/src/main/resources/ui/admin-web/test/unit/controllers/stackVersions/StackversoinsListCtrl_test.js

@@ -30,7 +30,7 @@ describe('#Cluster', function () {
     }));
 
     it('saves list of stacks', function() {
-      scope.getStackVersions().then(function() {
+      scope.fetchRepos().then(function() {
         expect(Array.isArray(scope.stacks)).toBe(true);
       });
     });