AMBARI-8937. Admin View: repo management UI tweaks. (Richard Zang via yusaku)

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

@@ -30,7 +30,7 @@ angular.module('ambariAdminConsole')
     .then(function (allStackVersions) {
       var versions = [];
       angular.forEach(allStackVersions, function (version) {
-        if (version.upgrade_packs.length > 0) {
+        if (version.upgrade_packs.length > 0 && version.active) {
           versions.push(version);
         }
       });
@@ -87,4 +87,8 @@ angular.module('ambariAdminConsole')
       Alert.error('getSupportedOSList error', data.message);
     });
   };
+
+  $scope.updateCurrentVersionInput = function () {
+    $scope.currentVersionInput = $scope.upgradeStack.selected.displayName + '.' + angular.element('[name="version"]')[0].value;
+  };
 }]);

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

@@ -51,7 +51,7 @@ angular.module('ambariAdminConsole')
   };
 
   $scope.goToCluster = function() {
-    window.location.replace('/#/main/admin/versions/updates');
+    window.location.replace('/#/main/admin/versions/' + this.repo.id);
   };
 
   $scope.clearFilters = function () {
@@ -60,14 +60,16 @@ angular.module('ambariAdminConsole')
     $scope.resetPagination();
   };
 
-  $scope.fetchRepoClusterStatus = function (repos) {
+  $scope.fetchRepoClusterStatus = function () {
     var clusterName = $scope.clusters[0].Clusters.cluster_name; // only support one cluster at the moment
-    angular.forEach(repos, function (repo) {
+    angular.forEach($scope.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 : '';
+        repo.installedHosts = response.installedHosts;
+        repo.stackVersionId = response.stackVersionId;
+        repo.cluster = (repo.status == 'current' || repo.status == 'installed')? clusterName : '';
       });
     });
   };
@@ -90,7 +92,7 @@ angular.module('ambariAdminConsole')
       $scope.repos = repos;
       $scope.tableInfo.total = stacks.length;
       $scope.tableInfo.showed = stacks.length;
-      $scope.fetchRepoClusterStatus($scope.repos);
+      $scope.fetchRepoClusterStatus();
     });
   };
 

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

@@ -138,15 +138,20 @@ angular.module('ambariAdminConsole')
         if (data.length > 0) {
           var hostStatus = data[0].ClusterStackVersions.host_states;
           var currentHosts = hostStatus['CURRENT'].length;
+          var installedHosts = hostStatus['INSTALLED'].length;
           var totalHosts = 0;
+          // collect hosts on all status
           angular.forEach(hostStatus, function(status) {
             totalHosts += status.length;
           });
-          response.status = currentHosts > 0? 'current' : '';
+          response.status = currentHosts > 0? 'current' :
+                            installedHosts > 0? 'installed' : '';
           response.currentHosts = currentHosts;
+          response.installedHosts = installedHosts;
           response.totalHosts = totalHosts;
+          response.stackVersionId = data[0].ClusterStackVersions.id;
         } else {
-          response.repoState = '';
+          response.status = '';
         }
         deferred.resolve(response);
       })

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

@@ -61,11 +61,13 @@ angular.module('ambariAdminConsole')
             var stack_name = version.Versions.stack_name;
             var stack_version = version.Versions.stack_version;
             var upgrade_packs = version.Versions.upgrade_packs;
+            var active = version.Versions.active;
             allStackVersions.push({
               stack_name: stack_name,
               stack_version: stack_version,
               displayName: stack_name + '-' + stack_version,
-              upgrade_packs: upgrade_packs
+              upgrade_packs: upgrade_packs,
+              active: active
             });
           });
         });
@@ -81,7 +83,7 @@ angular.module('ambariAdminConsole')
       var versionFilter = filter.version;
       var url = '/stacks?fields=versions/repository_versions/RepositoryVersions';
       if (versionFilter) {
-        url += '&versions/repository_versions/RepositoryVersions/repository_version.matches(.*' + versionFilter + '.*)';
+        url += '&versions/repository_versions/RepositoryVersions/display_name.matches(.*' + versionFilter + '.*)';
       }
       url += '&from='+ (pagination.currentPage - 1) * pagination.itemsPerPage;
       url += '&page_size=' + pagination.itemsPerPage;

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

@@ -1291,18 +1291,25 @@ accordion .panel-group .panel{
 
 .repo-version-inline .bold-dot {
   font-weight: bold;
-  padding-right: 4px;
+  padding-right: 15px;
 }
 
-.status-current
-{
+.status-current {
   background-color: green;
 }
 
+.status-installed {
+  background-color: orangered;
+}
+
 .repo-version-select {
   direction: rtl;
 }
 
 .repo-version-left {
   text-align: right;
+}
+
+.name-label-adjust {
+  width: 20.7%;
 }

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

@@ -29,19 +29,20 @@
     <div class="panel-body">
       <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-4 repo-version-left">
+        <div class="col-sm-10">
           <select class="form-control repo-version-select"
                   ng-model="upgradeStack.selected"
                   ng-options="o as o.displayName for o in upgradeStack.options"
                   ng-change="afterStackVersionChange()">
           </select>
           <span class="bold-dot">.</span>
-        </div>
-        <div class="form-group col-sm-6" ng-class="{'has-error' : repoRegForm.version.$error.pattern}">
-          <input class="form-control" name="version" type="text" ng-model="repoSubversion" ng-pattern="subversionPattern"
-                 placeholder="Version Name" required/>
-          <span class="text-primary" ng-show="!repoRegForm.version.$error.pattern">&nbsp;{{upgradeStack.selected.displayName + '.' + repoSubversion}}</span>
-          <span class="text-danger" ng-show="repoRegForm.version.$error.pattern">Invalid subversion. eg: 1.0-123</span>
+          <div class="form-group" ng-class="{'has-error' : repoRegForm.version.$error.pattern}">
+            <input class="form-control" name="version" type="text" ng-model="repoSubversion" ng-pattern="subversionPattern"
+                   placeholder="Version Name" ng-change="updateCurrentVersionInput()" required/>
+            <span class="text-danger" ng-show="repoRegForm.version.$error.pattern">
+              &nbsp{{currentVersionInput}} Invalid.
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -55,22 +56,22 @@
         Provide Base URLs for the Operating Systems you are configuring. Uncheck all other Operating Systems.
       </div>
       <div class="border-bottom bottom-margin clearfix">
-        <div class="col-sm-3"><h5><label>OS</label></h5></div>
-        <div class="col-sm-3"><h5><label>Name</label></h5></div>
-        <div class="col-sm-6"><h5><label>Base URL</label></h5></div>
+        <div class="col-sm-2"><h5><label>OS</label></h5></div>
+        <div class="name-label-adjust col-sm-2"><h5><label>Name</label></h5></div>
+        <div class="col-sm-7"><h5><label>Base URL</label></h5></div>
       </div>
       <div class="clearfix border-bottom bottom-margin" ng-repeat="repository in repositories">
-        <div class="col-sm-3">
+        <div class="col-sm-2">
           <div class="checkbox">
             <label>
               <input type="checkbox" ng-model="repository.selected" ng-change="toggleOSSelect()"> {{repository.os}}
             </label>
           </div>
         </div>
-        <div class="col-sm-9">
+        <div class="col-sm-10">
           <div class="form-group" ng-repeat="package in repository.packages">
-            <div class="col-sm-4"><label class="control-label">{{package.label}}</label></div>
-            <div class="col-sm-8"><input type="text" class="form-control" ng-model="package.value"></div>
+            <div class="col-sm-3"><label class="control-label">{{package.label}}</label></div>
+            <div class="col-sm-9"><input type="text" class="form-control" ng-model="package.value"></div>
           </div>
         </div>
       </div>

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

@@ -19,7 +19,7 @@
 <div class="clearfix">
   <ol class="breadcrumb pull-left">
     <li><a href="#/stackVersions">Versions</a></li>
-    <li class="active">{{versionName}}</li>
+    <li class="active">{{repoVersionFullName}}</li>
   </ol>
   <div class="pull-right top-margin-4" ng-switch="deleteEnabled">
     <button ng-switch-when="false" class="btn disabled btn-default" tooltip="Cannot Delete Static Instances">Deregister
@@ -31,40 +31,6 @@
 </div>
 <hr>
 <form class="form-horizontal edit-version-form" role="form" name="form-editVersionForm" novalidate>
-  <div class="panel panel-default">
-  <div class="panel-heading clearfix">
-    <h3 class="panel-title pull-left">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-9 form-control-static">{{stack}}</div>
-    </div>
-    <div class="form-group">
-      <div class="col-sm-3"><label class="control-label">Version Name</label></div>
-      <div class="col-sm-3 form-control-static">{{versionName}}</div>
-    </div>
-  </div>
-  </div>
-
-  <!--
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h3 class="panel-title">Clusters</h3>
-    </div>
-    <div class="panel-body">
-      <div ng-repeat="cluster in stackVersion.deployment_info">
-        <div class="col-sm-4">
-          <a href>
-            <i class="glyphicon glyphicon-cloud"></i>
-            {{cluster.cluster}}
-          </a>&nbsp;
-          <button type="button" class="btn btn-default">{{cluster.status}}</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  -->
   <div class="panel panel-default">
     <div class="panel-heading clearfix">
       <h3 class="panel-title pull-left">Repositories</h3>
@@ -78,22 +44,22 @@
         Provide Base URLs for the Operating Systems you are configuring. Uncheck all other Operating Systems.
       </div>
       <div class="border-bottom bottom-margin clearfix">
-        <div class="col-sm-3"><h5><label>OS</label></h5></div>
-        <div class="col-sm-3"><h5><label>Name</label></h5></div>
-        <div class="col-sm-6"><h5><label>Base URL</label></h5></div>
+        <div class="col-sm-2"><h5><label>OS</label></h5></div>
+        <div class="name-label-adjust col-sm-2"><h5><label>Name</label></h5></div>
+        <div class="col-sm-7"><h5><label>Base URL</label></h5></div>
       </div>
       <div class="clearfix border-bottom bottom-margin" ng-repeat="os in osList">
-        <div class="col-sm-3">
+        <div class="col-sm-2">
           <div class="checkbox">
             <label>
               <input type="checkbox" ng-model="os.selected"> {{os.OperatingSystems.os_type}}
             </label>
           </div>
         </div>
-        <div class="col-sm-9">
+        <div class="col-sm-10">
           <div class="form-group" ng-repeat="repository in os.repositories">
-            <div class="col-sm-4"><label class="control-label">{{repository.Repositories.repo_name}}</label></div>
-            <div class="col-sm-8"><input type="text" class="form-control" ng-model="repository.Repositories.base_url"></div>
+            <div class="col-sm-3"><label class="control-label">{{repository.Repositories.repo_name}}</label></div>
+            <div class="col-sm-9"><input type="text" class="form-control" ng-model="repository.Repositories.base_url"></div>
           </div>
         </div>
       </div>

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

@@ -50,11 +50,10 @@
     <tbody>
     <tr ng-repeat="repo in repos">
       <td class="col-medium">
-        <a href="#/stackVersions/{{repo.stack_name}}/{{repo.repository_version}}/edit">{{repo.stack_name + '-' + repo.repository_version}}</a>
+        <a href="#/stackVersions/{{repo.stack_name}}/{{repo.repository_version}}/edit">{{repo.display_name}}</a>
       </td>
       <td class="col-small">
-        <a href ng-show="repo.cluster">
-          <i class="glyphicon glyphicon-cloud"></i>
+        <a href="/#/main/admin/versions/{{repo.stackVersionId}}" ng-show="repo.cluster">
           {{repo.cluster}}
         </a>
         <select ng-show="!repo.cluster"
@@ -67,6 +66,9 @@
         <div ng-show="repo.status == 'current'">
           <span class="label {{'status-' + repo.status}}">Current:&nbsp;{{repo.currentHosts}}/{{repo.totalHosts}}</span>
         </div>
+        <div ng-show="repo.status == 'installed'">
+          <span class="label {{'status-' + repo.status}}">Installed:&nbsp;{{repo.installedHosts}}/{{repo.totalHosts}}</span>
+        </div>
       </td>
     </tr>
     </tbody>