AMBARI-9201 Versions: UI cleanup #2. (ababiichuk)

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

@@ -57,7 +57,7 @@ angular.module('ambariAdminConsole')
       var stackName = $scope.upgradeStack.selected.stack_name;
       Alert.success('Created version ' +
       '<a href="#/stackVersions/' + stackName + '/' + versionName + '/edit">'
-        + stackName + versionName +
+        + stackName + "-" + versionName +
       '</a>');
       $location.path('/stackVersions');
     })

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

@@ -161,7 +161,8 @@ angular.module('ambariAdminConsole')
   };
 
   $scope.delete = function () {
-    ConfirmationModal.show('Delete Version', 'Are you sure you want to delete version "'+ $scope.versionName +'"?').then(function() {
+    ConfirmationModal.show('Deregister Version', { "url": 'views/modals/BodyForDeregisterVersion.html',
+      "scope": {"repoVersionFullName": $scope.repoVersionFullName }}).then(function() {
       Stack.deleteRepo($scope.stackName, $scope.stackVersion, $scope.id).then( function () {
         $location.path('/stackVersions');
       }).catch(function (data) {

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

@@ -88,11 +88,7 @@ angular.module('ambariAdminConsole')
   };
 
   $scope.fillClusters = function (clusters) {
-    $scope.dropDownClusters = [{
-      Clusters: {
-        cluster_name: 'Configure on...'
-      }
-    }].concat(clusters);
+    $scope.dropDownClusters = [].concat(clusters);
     $scope.selectedCluster = $scope.dropDownClusters[0];
     angular.forEach(clusters, function (cluster) {
       var options = [{label: "All", value: ''}];

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

@@ -28,8 +28,10 @@ angular.module('ambariAdminConsole')
 				templateUrl: 'views/modals/ConfirmationModal.html',
 				controller: ['$scope', '$modalInstance', function($scope, $modalInstance) {
 					$scope.header = header;
+          $scope.isTempalte = !!body.url;
 					$scope.body = body;
-          $scope.confirmText = confirmText || "Ok";
+          $scope.innerScope = body.scope;
+          $scope.confirmText = confirmText || "OK";
           $scope.cancelText = cancelText || "Cancel";
 
 					$scope.ok = function() {

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

@@ -415,7 +415,7 @@ a.gotoinstance{
   margin-top: 1px;
   margin-bottom: -12px;
 }
-.navbar-views-dropdown .dropdown-menu{
+.navbar-views-dropdown .dropdown-menu, .verison-label-row .dropdown-menu {
   margin-top: -2px;
 }
 
@@ -1312,4 +1312,7 @@ accordion .panel-group .panel{
 
 .name-label-adjust {
   width: 20.7%;
+}
+.verison-label-row .label {
+  font-size: 100%;
 }

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

@@ -0,0 +1,18 @@
+<!--
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+-->
+Are you sure you want to deregister version <strong>{{innerScope.repoVersionFullName}}</strong> ?

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

@@ -19,7 +19,8 @@
     <h3 class="modal-title">{{header}}</h3>
 </div>
 <div class="modal-body">
-    {{body}}
+  <div class="default-body" ng-show="!isTempalte">{{body}}</div>
+  <div ng-show="isTempalte" ng-include="body.url"></div>
 </div>
 <div class="modal-footer">
     <button class="btn btn-default" ng-click="cancel()">{{cancelText}}</button>

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

@@ -34,7 +34,7 @@
     <tr>
       <th class="col-medium">
         <label>Version</label>
-        <input type="text" class="form-control" ng-change="resetPagination()" ng-model="filter.version">
+        <input type="text" class="form-control" ng-change="resetPagination()" ng-model="filter.version" placeholder="Any">
       </th>
       <th class="col-small">
         <label>Cluster</label>
@@ -56,19 +56,31 @@
         <a href="/#/main/admin/stack/versions" ng-show="repo.cluster">
           {{repo.cluster}}
         </a>
-        <select ng-show="!repo.cluster"
-                ng-change="goToCluster()"
-                ng-model="selectedCluster"
-                ng-options="cluster.Clusters.cluster_name for cluster in dropDownClusters">
-        </select>
+        <span ng-show="!repo.cluster">
+          None
+        </span>
       </td>
-      <td>
+      <td class="verison-label-row">
         <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>
+        <div ng-show="!repo.cluster">
+          <div class="btn-group display-inline-block" dropdown is-open="viewsdropdown.isopen" ng-mouseover="viewsdropdown.isopen=true" ng-mouseout="viewsdropdown.isopen=false" ng-init="viewsdropdown.isopen=false">
+            <a class="btn dropdown-toggle">
+              <span>Install on...</span>
+            </a>
+            <ul class="dropdown-menu" ng-show="viewsdropdown.isopen">
+              <li ng-repeat="cluster in dropDownClusters">
+                <a href="javascript:void(null)" ng-click="goToCluster()">
+                    <span>{{cluster.Clusters.cluster_name}}</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
       </td>
     </tr>
     </tbody>

ambari-web/app/messages.js

@@ -1308,9 +1308,10 @@ Em.I18n.translations = {
   'admin.stackVersions.filter.current': "Current ({0})",
 
   'admin.stackVersions.editRepositories.info': 'Provide Base URLs for the Operating Systems you are configuring. Uncheck all other Operating Systems.',
-  'admin.stackVersions.version.install.confirm': 'You are about to install version {0} on all hosts.',
+  'admin.stackVersions.version.install.confirm': 'You are about to install version <strong>{0}</strong> on all hosts.',
   'admin.stackVersions.version.linkTooltip': 'Click to Edit Repositories',
   'admin.stackVersions.version.hostsTooltip': 'Click to List Hosts',
+  'admin.stackVersions.version.emptyHostsTooltip': 'No Hosts to List',
   'admin.stackVersions.version.notInstalled': "Not Installed",
   'admin.stackVersions.manageVersions': "Manage Versions",
   'admin.stackVersions.manageVersions.popup.body': 'You are about to leave the <b>Cluster Management</b> interface' +
@@ -1977,7 +1978,6 @@ Em.I18n.translations = {
   'hosts.host.menu.stackVersions': 'Versions',
   'hosts.host.stackVersions.table.noVersions': 'No versions',
   'hosts.host.stackVersions.table.filteredInfo': '{0} of {1} versions showing',
-  'hosts.host.stackVersions.table.labels': '{0} ({1})',
   'hosts.host.stackVersions.status.init': 'Uninstalled',
   'hosts.host.stackVersions.status.installed': 'Installed',
   'hosts.host.stackVersions.status.install_failed': 'Install Failed',

ambari-web/app/styles/common.less

@@ -26,6 +26,95 @@
 /************************************************************************
 * Health status(service/host/host component health)icon colors ends
 ***********************************************************************/
+@space-s: 5px;
+@space-m: 10px;
+@space-l: 20px;
+@green: #69BE28;
+@blue: #0572ff;
+
+@-webkit-keyframes orangePulse {
+  from { background-color: #fdb82f; }
+  50% { background-color: #fd910e; }
+  to { background-color: #fdb82f; }
+}
+
+@-moz-keyframes orangePulse {
+  from { background-color: #fdb82f; }
+  50% { background-color: #fd910e; }
+  to { background-color: #fdb82f; }
+}
+
+@keyframes orangePulse
+{
+  0% { background-color: #fdb82f; }
+  50% { background-color: #fd910e; }
+  100% { background-color: #fdb82f; }
+}
+
+@-webkit-keyframes greenPulse {
+  from { background-color: #118fff; }
+  50% { background-color: #006DCC; }
+  to { background-color: #118fff; }
+}
+
+@-moz-keyframes greenPulse {
+  from { background-color: #118fff; }
+  50% { background-color: #006DCC; }
+  to { background-color: #118fff; }
+}
+
+@keyframes greenPulse
+{
+  0% { background-color: #118fff; }
+  50% { background-color: #006DCC; }
+  100% { background-color: #118fff; }
+}
+
+@-webkit-keyframes greenPulseInner {
+  from { color: #118fff; }
+  50% { color: #006DCC; }
+  to { color: #118fff; }
+}
+
+@-moz-keyframes greenPulseInner {
+  from { color: #118fff; }
+  50% { color: #006DCC; }
+  to { color: #118fff; }
+}
+
+@keyframes greenPulseInner
+{
+  0% { color: #118fff; }
+  50% { color: #006DCC; }
+  100% { color: #118fff; }
+}
+
+.gradient(@color: #FAFAFA, @start: #FFFFFF, @stop: #F2F2F2) {
+  background: @color;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop));
+  background: -ms-linear-gradient(top, @start, @stop);
+  background: -moz-linear-gradient(center top, @start 0%, @stop 100%);
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr= @start, endColorstr= @stop, GradientType=0); // for IE9-
+}
+
+
+@footer-height: 100px;
+
+@restart-indicator-color: #FDB82F;
+
+@top-nav-bg-color-from: #555555;
+@top-nav-bg-color-to: #333333;
+@top-nav-brand-color: #ffffff;
+@top-nav-ops-count-color: #ffffff;
+@top-nav-ops-count-bg-color: #c3c3c3;
+@top-nav-menu-active-text-color: #333333;
+@top-nav-menu-active-bg-color: #ffffff;
+@top-nav-menu-text-color: #c3c3c3;
+@top-nav-menu-text-hover-color: #ffffff;
+@top-nav-menu-dropdown-border-color: #c3c3c3;
+@top-nav-menu-dropdown-bg-color: #ffffff;
+@top-nav-menu-dropdown-text-color: #333333;
+@default-font-size: 14px;
 
 .editable-list-container.well{
   padding: 10px;

ambari-web/app/styles/config_history_flow.less

@@ -0,0 +1,344 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import 'common.less';
+
+#config_history_flow {
+  .version-slider {
+    .flow-element {
+      .version-box .box {
+        font-size: 13px;
+      }
+      .arrow-box {
+        margin-left: 5px;
+      }
+    }
+  }
+  .version-info-bar {
+    width: 960px;
+  }
+}
+
+#config_history_flow {
+  margin-top: -5px;
+  .version-slider {
+    width: 100%;
+    height: 58px;
+    margin: 5px 0;
+    .flow-element {
+      height: 58px;
+      width: 15.2%;
+      max-width: 146px;
+      .version-box {
+        position: relative;
+        height: 90%;
+      }
+      .version-box .box {
+        cursor: pointer;
+        width: 92%;
+        height: 100%;
+        background-color: #ffffff;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        border: 1px solid #d2d9dd;
+        font-size: 11px;
+        .top-label {
+          min-width: 20px;
+          padding: 0px 2px;
+        }
+        .author,
+        .content {
+          padding: 0px 2px;
+          text-align: center;
+          color: #555555;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .content {
+          max-width: 97% !important;
+        }
+        .author {
+          max-width: 75% !important;
+        }
+        .current-label {
+          text-align: center;
+          padding: 2px 5px;
+        }
+      }
+      .version-box .version-popover {
+        display: none;
+        position: absolute;
+        bottom: 50px;
+        left: -45px;
+        z-index: 1000;
+        float: left;
+        width: 300px;
+        padding: 8px;
+        list-style: none;
+        background-color: #ffffff;
+        border: 1px solid #c3c3c3;
+        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        -webkit-background-clip: padding-box;
+        -moz-background-clip: padding;
+        background-clip: padding-box;
+        font-size: 13px;
+        .content {
+          padding: 1px 5px 15px 5px;
+          text-align: left;
+          .notes{
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+          }
+          .date{
+            color: #808080;
+            font-size: 11px;
+            white-space: nowrap;
+          }
+        }
+        .version-operations-buttons {
+          text-align: center;
+          .btn {
+            font-size: 13px;
+          }
+        }
+      }
+      .version-box:hover{
+        .box {
+          background-color: #e6f1f6;
+        }
+      }
+      .version-box .box.displayed {
+        background-color: #e6f1f6;
+        .content {
+          color: #444444;
+          font-weight: bold;
+        }
+      }
+      .version-box .box.grayedOut {
+        background-color: #f4f4f4;
+        border: 1px solid #f4f4f4;
+        .author,
+        .content {
+          color: #a6a6a6;
+        }
+        .current-label .label,
+        .top-label .label {
+          opacity: .5;
+        }
+
+      }
+
+    }
+    .first {
+      width: 14%;
+      margin-left: 0px;
+      .arrow-box {
+        display: none;
+      }
+      .version-box .box {
+        width: 100%;
+      }
+    }
+
+    .icon-chevron-box {
+      margin-top: 10px;
+      width: 4%;
+      cursor: pointer;
+      .icon-chevron-right,
+      .icon-chevron-left{
+        color: #d2d9dd;
+      }
+      .icon-chevron-left:hover,
+      .icon-chevron-right:hover{
+        color: #808080;
+      }
+    }
+    .icon-chevron-box.disabled {
+      margin-top: 10px;
+      width: 4%;
+      cursor: not-allowed;
+      .icon-chevron-right,
+      .icon-chevron-left{
+        color: #d2d9dd;
+      }
+    }
+  }
+  .version-info-bar-wrapper {
+    position: fixed;
+    z-index: 2;
+  }
+  .version-info-bar {
+    background-image: -moz-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@top-nav-bg-color-from), to(@top-nav-bg-color-to));
+    background-image: -webkit-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
+    background-image: -o-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
+    background-image: linear-gradient(to bottom, @top-nav-bg-color-from, @top-nav-bg-color-to);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= @top-nav-bg-color-from, endColorstr=@top-nav-bg-color-to); //for IE9-
+    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    margin: 5px 0;
+    padding: 5px;
+    width: 747px;
+
+    .icon-remove-circle {
+      color: #ffffff;
+      margin-left: 10px;
+      margin-top: 0px;
+      display: inline-block;
+      cursor: pointer;
+    }
+    .label-wrapper {
+      line-height: 30px;
+      margin-left: 10px;
+      color: #d3d3d3;
+      .label {
+        font-size: 14px;
+        padding: 5px;
+      }
+    }
+    .dropdown-menu {
+      min-width: 400px;
+      margin-top: 4px;
+      font-size: 13px;
+      li {
+        line-height: 30px;
+        .icon-caret-right {
+          font-size: 18px;
+          margin-right: 20px;
+        }
+      }
+      li:hover {
+        background-color: #666666;
+        background-image: linear-gradient(to bottom, #666666, #555555);
+        color: #ffffff;
+      }
+      li.not-allowed {
+        // the version which is displayed
+        cursor: not-allowed;
+        color: #808080;
+        .icon-caret-right,
+        .dropdown-menu {
+          display: none;
+        }
+      }
+      li.not-allowed:hover {
+        background-color: #ffffff;
+        background-image: none;
+        color: #808080;
+      }
+
+      div.row-fluid, a {
+        padding-left: 10px;
+      }
+    }
+    .dropdown-submenu .dropdown-menu {
+      min-width: 200px;
+      max-width: 300px;
+      line-height: 20px;
+      font-size: 13px;
+      margin: 0px;
+      padding: 8px;
+      color: #333333;
+      cursor: default;
+      .content {
+        padding: 1px 5px 15px 5px;
+        .group {
+          text-align: right;
+          margin-top: -20px;
+        }
+        .date{
+          color: #808080;
+          font-size: 11px;
+          white-space: nowrap;
+        }
+        .notes{
+          word-wrap: break-word;
+          overflow-wrap: break-word;
+          white-space: pre-wrap;
+        }
+      }
+      .version-operations-buttons {
+        text-align: center;
+        .btn {
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+
+#config_history {
+  .table {
+    thead {
+      background: none repeat scroll 0 0 #F8F8F8;
+    }
+    // service name column
+    th:first-child,
+    td:first-child {
+      width: 15%;
+      select.filter-input-width{
+        width: 75%;
+      }
+    }
+    // config group, create time columns
+    th:first-child + th,
+    td:first-child + td,
+    th:first-child + th + th,
+    td:first-child + td + td {
+      width: 20%;
+      word-wrap: break-word;
+      select.filter-input-width{
+        width: 75%;
+      }
+    }
+    // author column
+    th:first-child + th + th + th,
+    td:first-child + td + td + td {
+      width: 10%;
+      input.filter-input-width {
+        width: 55%;
+      }
+    }
+    // notes column
+    th:first-child + th + th + th + th,
+    td:first-child + td + td + td + td {
+      word-wrap: break-word;
+      input.filter-input-width {
+        width: 75%;
+      }
+    }
+    td.notes .show-more-button {
+      font-size: @default-font-size - 1;
+    }
+  }
+  div.page-bar div.filtered-info {
+    margin-left: 17px;
+  }
+  a {
+    cursor: pointer;
+  }
+}

ambari-web/app/styles/modal_popups.less

@@ -0,0 +1,503 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import 'common.less';
+/*90% width modal window start*/
+.full-width-modal {
+  .modal {
+    .modal-body {
+      div.error{
+        color: #b94a48;
+        .help-inline{
+          color: #b94a48;
+        }
+      }
+
+      div.error input{
+        border-color: #b94a48;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      }
+      .add-cluster-1{
+        width: 100%;
+        height : 500px;
+        margin: 0 auto;
+
+        .each-row{
+          margin-top: 10px;
+        }
+
+        .add-cluster-1-1{
+          width: 100%;
+          height : 100%;
+          float: left;
+        }
+        .add-cluster-1-3{
+          width: 45%;
+          height : 100%;
+          float: left;
+        }
+        .add-cluster-1-2{
+          width: 10%;
+          height : 100%;
+          float: left;
+
+          .add-cluster-1-2-1{
+            width: 100%;
+            height : 40%;
+          }
+          .add-cluster-1-2-2{
+            width: 100%;
+            height : 10%;
+          }
+          .add-cluster-1-2-3{
+            width: 100%;
+            height : 50%;
+          }
+          .middle-line{
+            width : 2%;
+            margin : 0 auto;
+            height : 100%;
+            background-color: #000000;
+          }
+          .add-cluster-center-most-div{
+            height : 30%;
+            text-align: center;
+            position: relative;
+            top: 30%;
+          }
+        }
+      }
+
+
+
+    }
+  }
+
+  .clear {
+    clear: both;
+  }
+  > div > .dataTable {
+    border: 1px solid silver;
+    th {
+      border-top: none;
+    }
+  }
+  .content {
+    padding: 0;
+  }
+
+  //fix stripped in inner table
+  .table-striped tbody tr:nth-child(odd)
+  td .table-striped tbody
+  tr:nth-child(odd) td,
+  tr:nth-child(even) th {
+    background-color: none;
+  }
+
+}
+
+/*90% width modal window end*/
+
+/*700px width modal window start*/
+.modal-690px-width {
+  .modal {
+    width: 690px;
+    margin: 0 0 0 -345px;
+    max-height: 544px;
+    top: 5%;
+  }
+
+  .modal-body {
+    max-height: 403px;
+  }
+}
+/*700px width modal window end*/
+
+/*60% width modal window start*/
+.sixty-percent-width-modal.hideCloseLink{
+  .modal-header{
+    .close{
+      display:none
+    }
+  }
+}
+.sixty-percent-width-modal-edit-widget {
+  .modal {
+    width: 60%;
+    margin: 0 0 0 -30%;
+    max-height: 544px;
+    top: 5%;
+  }
+  .modal-header{
+    min-width: 650px;
+  }
+  .modal-footer{
+    min-width: 650px;
+  }
+
+  .modal-body {
+
+    max-height: 403px;
+    min-width: 650px;
+
+    #slider-range {
+      margin-top: 40px;
+      margin-bottom: 20px;
+      margin-left: 38px;
+      max-width: 630px;
+      max-height: 15px;
+    }
+    #min-height-limit .span9{
+      min-height: 15px;
+    }
+    #min-height-limit .progress{
+      margin-left: 40px;
+      .bar-success {
+        background-image: linear-gradient(to bottom, @health-status-green, @health-status-green);
+        background-repeat: repeat-x;
+        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5AB400', endColorstr='#5AB400', GradientType=0);
+      }
+      .bar-warning {
+        background-image: linear-gradient(to bottom,@health-status-orange, @health-status-orange);
+        background-repeat: repeat-x;
+        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#FF8E00', endColorstr='#FF8E00', GradientType=0);
+      }
+      .bar-danger {
+        background-image: linear-gradient(to bottom, @health-status-red, @health-status-red);
+        background-repeat: repeat-x;
+        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0000', endColorstr='#ff0000', GradientType=0);
+      }
+    }
+
+    .value-on-slider{
+      max-height: 100px;
+      margin-bottom: 40px;
+      margin-top: 10px;
+      text-align: center;
+    }
+    #slider-value1{
+      max-width: 65px;
+    }
+    #slider-value2{
+      max-width: 250px;
+    }
+    #slider-value3{
+      max-width: 250px;
+    }
+    #slider-value4{
+      max-width: 65px;
+    }
+    .slider-error{
+      color: #b94a48;
+      .help-inline{
+        color: #b94a48;
+      }
+    }
+    .slider-error input{
+      border-color: #b94a48;
+      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    }
+  }
+}
+.sixty-percent-width-modal {
+
+  .modal {
+    width: 60%;
+    margin: 0 0 0 -30%;
+    max-height: 563px;
+    min-width: 590px;
+    top: 5%;
+  }
+  .long-popup-list {
+    height: 280px;
+    overflow: auto;
+    width: 100%;
+  }
+  .modal-footer {
+    #footer-checkbox {
+      text-align: left;
+      padding-top: 3px;
+      margin-left: 22px;
+      float: left;
+      .checkbox {
+        margin: 0px;
+      }
+    }
+  }
+
+  .modal-body {
+
+    max-height: 403px;
+
+    .form-horizontal{
+
+
+      .add-cluster-1{
+        width: 100%;
+        height : auto;
+        min-height : 350px;
+        margin: 0 auto;
+
+        .each-row{
+          margin-top: 10px;
+        }
+
+        .add-cluster-1-1{
+          width: 100%;
+          height : 100%;
+          float: left;
+          div.error{
+            color: #b94a48;
+            .help-inline{
+              color: #b94a48;
+            }
+          }
+
+          div.error input{
+            border-color: #b94a48;
+            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          }
+        }
+        .add-cluster-1-3{
+          width: 45%;
+          height : 100%;
+          float: right;
+        }
+        .add-cluster-1-2{
+          width: 10%;
+          height : 100%;
+          float: left;
+
+          .add-cluster-1-2-1{
+            width: 100%;
+            height : 40%;
+          }
+          .add-cluster-1-2-2{
+            width: 100%;
+            height : 10%;
+          }
+          .add-cluster-1-2-3{
+            width: 100%;
+            height : 50%;
+          }
+          .middle-line{
+            width : 2%;
+            margin : 0 auto;
+            height : 100%;
+            background-color: #000000;
+          }
+          .add-cluster-center-most-div{
+            height : 30%;
+            text-align: center;
+            position: relative;
+            top: 30%;
+          }
+        }
+      }
+
+      .add-cluster-2{
+        margin : 0 auto;
+        height : auto;
+        min-height : 350px;
+        table{
+          width : 60%;
+          margin : 0 20%;
+
+          .spacer{
+            height: 20px;
+          }
+
+          tr.error{
+            color: #b94a48;
+            .help-inline{
+              color: #b94a48;
+            }
+
+            input{
+              border-color: #b94a48;
+              -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+              -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+            }
+          }
+
+          td {
+            width : 50%;
+            a.btn-success{
+              margin-left: 30%;
+            }
+          }
+
+        }
+
+      }
+
+
+      .add-data-set{
+        width: 80%;
+        margin: 0 auto;
+        table{
+          width: 100%;
+        }
+        tr.error{
+          color: #b94a48;
+          .help-inline{
+            color: #b94a48;
+          }
+        }
+
+        div.error{
+          color: #b94a48;
+          .help-inline{
+            color: #b94a48;
+          }
+        }
+
+        div.error input{
+          border-color: #b94a48;
+          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        }
+
+        td.percent25 {
+          width: 25%;
+        }
+        td.spacer{
+          height: 10px;
+        }
+        td{
+          .btn-group{
+            display : inline;
+            span.caret{
+              float : right;
+            }
+            ul.dropdown-menu{
+              margin-top:15px;
+            }
+          }
+          .ember-view{
+            display : inline;
+          }
+
+        }
+
+        input.hyper-mini{
+          width: 20px;
+        }
+
+        .targetClusterDD{
+          min-width : 170px;
+        }
+
+      }
+      .each-row{
+        margin-top: 10px;
+      }
+      .each-row.control-label{
+        float:left;
+        clear:both;
+      }
+      .override-controls{
+        .icon-ok-sign {
+          color: #5AB400;
+        }
+        #filter-dropdown-div {
+          .dropdown-menu {
+            right: 0;
+            left: auto;
+          }
+        }
+        #component-dropdown-div {
+          vertical-align: top;
+          padding-left: 5px;
+          .dropdown-menu {
+            right: 0;
+            left: auto;
+          }
+        }
+        .input-append{
+          input{
+            -webkit-border-radius: 4px 0 0 4px;
+            -moz-border-radius: 4px 0 0 4px;
+            border-radius: 4px 0 0 4px;
+          }
+          .btn-group{
+            display: inline-block;
+            margin-left: -1px;
+            .btn{
+              -webkit-border-radius: 0 4px 4px 0;
+              -moz-border-radius: 0 4px 4px 0;
+              border-radius: 0 4px 4px 0;
+            }
+          }
+        }
+        .hosts-table-container{
+          width:100%;
+          height: 225px;
+          max-height: 225px;
+          overflow: auto;
+          border: 1px solid #eee;
+        }
+        table{
+          th {
+            background-color: #d9edf7;
+          }
+          margin: 0 auto;
+        }
+        .message{
+          color: #777;
+        }
+      }
+      .control-label{
+        width:auto;
+      }
+      .overrideSelectBox {
+        width:100%;
+      }
+    }
+  }
+
+  .clear {
+    clear: both;
+  }
+  > div > .dataTable {
+    border: 1px solid silver;
+    th {
+      border-top: none;
+    }
+  }
+  .content {
+    padding: 0;
+  }
+
+  //fix stripped in inner table
+  .table-striped tbody tr:nth-child(odd)
+  td .table-striped tbody
+  tr:nth-child(odd) td,
+  tr:nth-child(even) th {
+    background-color: none;
+  }
+
+}
+/*60% width modal window end*/

ambari-web/app/styles/stack_versions.less

@@ -0,0 +1,276 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import 'common.less';
+
+#advancedRepoAccordion{
+  .accordion-heading {
+    background-color: #f0f0f0;
+    a:hover {
+      text-decoration: none;
+    }
+  }
+  .accordion-body {
+    .repositories-table {
+      overflow: auto;
+      margin-bottom: 10px;
+      div {
+        float: left;
+        min-height: 1px;
+      }
+      .thead {
+        width: 100%;
+        .th {
+          font-weight: bold;
+        }
+        .first-th {
+          width: 4%;
+        }
+        .os-th {
+          width: 13%;
+        }
+        .name-th {
+          width: 17%;
+        }
+        .url-th {
+          width: 66%;
+        }
+      }
+      .tbody {
+        width: 100%;
+        .trow {
+          width: 100%;
+          border-top: 1px solid #dddddd;
+          padding-top: 10px;
+          .os-td {
+            width: 17%;
+          }
+          .sub-trow {
+            width: 100%;
+            .name-td {
+              width: 16%;
+            }
+            .validation-td {
+              width: 4%;
+            }
+            .url-td {
+              width: 63%;
+              .ember-text-field {
+                width: 100%;
+              }
+            }
+            .clear-td {
+              width: 4%;
+              padding-top: 5px;
+              padding-left: 12px;
+              a {
+                cursor: pointer;
+                text-decoration: none;
+              }
+              .icon-remove-sign {
+                color: #808080;
+              }
+            }
+            .actions-td {
+              width: 10%;
+              padding-top: 5px;
+              a {
+                cursor: pointer;
+              }
+              .icon-undo {
+                color: rgb(243, 178, 11);
+                margin-right: 2px;
+              }
+            }
+          }
+        }
+      }
+      .textfield-error input {
+        border-color: #b94a48;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      }
+      .disabled-textfield input {
+        color: #808080;
+        disabled: disabled;
+        pointer-events: none;
+        cursor: default;
+        background: #E4E4E4;
+      }
+      .disabled-label {
+        color: #808080;
+      }
+    }
+    #skip-validation {
+      .checkbox {
+        margin-left: 3px;
+        margin-right: 8px;
+        margin-top: 0px;
+      }
+      .icon-question-sign {
+        color: @blue;
+      }
+    }
+  }
+}
+
+#stack-upgrade-page {
+  div.current-version-box {
+    background: none repeat scroll 0 0 #e6f1f6;
+    box-shadow: 0 8px 6px -6px black;
+  }
+  .version-box {
+    background: none repeat scroll 0 0 #fff;
+    border: 1px solid #d2d9dd;
+    height: 168px;
+    margin: 15px 15px 0 0;
+    padding: 5px 0px;
+    a.not-active:hover {
+      text-decoration: none;
+    }
+    .state {
+      margin: 15px 0;
+      line-height: 30px;
+      padding-top: 5px;
+      i {
+        color: #0088cc;
+        font-size: 16px;
+      }
+      .label {
+        padding: 5px 20px;
+        font-size: 14px;
+      }
+    }
+    .host-link a {
+      color: #0088cc;
+      font-size: 14px;
+      font-weight: normal;
+    }
+    .version {
+      color: #000;
+      text-align: center;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 20px;
+      padding: 5px 5px 0px 5px;
+      span {
+        margin-left: 20px;
+      }
+      .pull-right .not-active {
+        font-size: 15px;
+        color: #0088cc;
+        line-height: 20px;
+      }
+    }
+    .hosts-section {
+      margin-top: 20px;
+      width: 100%;
+      text-align: center;
+      background: #f8f8f8;
+      border-top: 1px solid #e4e4e4;
+      padding-bottom: 3px
+    }
+    .hosts-section .hosts-bar {
+      font-size: 14px;
+      font-weight: 500;
+    }
+    .hosts-section .host-link {
+      font-size: 12px;
+    }
+  }
+}
+
+#stack-upgrade-dialog {
+  .details-box {
+    padding: 5px;
+    margin-left: 15px;
+    margin-right: 95px;
+    .button-row {
+      text-align: right;
+      padding: 5px;
+    }
+    input[type="checkbox"] {
+      margin: 0;
+    }
+    .message {
+      line-height: 30px;
+    }
+  }
+  .task-details {
+    .manage-controls a {
+      cursor: pointer;
+      margin-right: 12px;
+    }
+    textarea {
+      width: 100%;
+      min-height: 100px;
+    }
+  }
+  .task-list {
+    overflow-x: hidden;
+    .progress {
+      margin-bottom: 0;
+    }
+    padding-left: 20px;
+    i {
+      margin-right: 5px;
+    }
+  }
+  .task-list-main-warp i {
+    font-size: 16px;
+  }
+}
+
+.repository-list {
+  .modal {
+    padding: 10px!important;
+  }
+  .os-block {
+    border-top: 1px solid #dddddd;
+    padding-top: 10px;
+  }
+  input[type="text"] {
+    width: 100%;
+  }
+}
+
+#stack-upgrade {
+  .content {
+    padding: 25px;
+    background-color: #fff;
+  }
+  .box {
+    padding: 5px;
+  }
+  table th {
+    vertical-align: middle;
+  }
+  .btn-area {
+    margin-top: 30px;
+  }
+  .service {
+    .info {
+      line-height: 30px;
+    }
+    .row {
+      margin-left: 0;
+    }
+  }
+}
+
+

ambari-web/app/templates/main/admin/stack_upgrade/edit_repositories.hbs

@@ -36,7 +36,7 @@
       {{#each repository in os.repositories}}
         <div class="row-fluid">
           <div class="span3">{{repository.repoName}}</div>
-          <div class="span9">{{view Ember.TextField valueBinding="repository.baseUrl"}}</div>
+          <div class="span9">{{view Ember.TextField valueBinding="repository.baseUrl" disabledBinding="os.isDisabled"}}</div>
         </div>
       {{/each}}
     </div>

ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_box.hbs

@@ -17,7 +17,7 @@
 }}
 
 <p class="version">
-  {{view.content.displayName}}
+  <span>{{view.content.displayName}}</span>
   <a class="pull-right not-active link-tooltip" {{action editRepositories target="view"}}>
     <i class="icon-edit"></i>
   </a>
@@ -41,19 +41,19 @@
   <div class="hosts-bar">{{t common.hosts}}</div>
   <div class="row-fluid host-link">
     <div class="span4 align-center">
-      <div><a href="#" class="not-active hosts-tooltip"
+      <div><a href="#" {{bindAttr class="view.content.noInitHosts:emply-hosts-tooltip:hosts-tooltip :not-active"}}
         {{action showHosts view.versionStateMap.not_installed view.content.repositoryVersion view.content.notInstalledHosts target="view"}}>
         {{view.content.notInstalledHosts.length}}</a></div>
       <div>{{t admin.stackVersions.version.notInstalled}}</div>
     </div>
     <div class="span4 align-center">
-      <div><a href="#" class="not-active hosts-tooltip"
+      <div><a href="#" {{bindAttr class="view.content.noInstalledHosts:emply-hosts-tooltip:hosts-tooltip :not-active"}}
         {{action showHosts view.versionStateMap.installed view.content.repositoryVersion view.content.installedHosts target="view"}}>
         {{view.content.installedHosts.length}}</a></div>
       <div>{{t common.installed}}</div>
     </div>
     <div class="span4 align-center">
-      <div><a href="#" class="not-active hosts-tooltip"
+      <div><a href="#" {{bindAttr class="view.content.noCurrentHosts:emply-hosts-tooltip:hosts-tooltip :not-active"}}
         {{action showHosts view.versionStateMap.current view.content.repositoryVersion view.content.currentHosts target="view"}}>
         {{view.content.currentHosts.length}}</a></div>
       <div>{{t common.current}}</div>

ambari-web/app/templates/main/host/stack_versions.hbs

@@ -37,12 +37,13 @@
         <td class="first stack-name">{{this.stack}}</td>
         <td class="repo-version">{{this.repoVersion}}</td>
         <td class="host-stack-version-status">
-          {{this.displayStatus}}
           {{#if this.isCurrent}}
             <span class="label label-success">{{t common.current}}</span>
+          {{else}}
+            {{this.displayStatus}}
           {{/if}}
         </td>
-        <td class="install-repo-version">
+        <td class="install-repo-version align-center">
           {{#isAccessible ADMIN}}
             <button class="btn" {{action installVersion this target="controller"}} {{bindAttr disabled="this.installDisabled"}}><i class="icon-off"></i>&nbsp;{{t common.install}}</button>
           {{/isAccessible}}

ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_box_view.js

@@ -23,6 +23,12 @@ var stringUtils = require('utils/string_utils');
 App.UpgradeVersionBoxView = Em.View.extend({
   templateName: require('templates/main/admin/stack_upgrade/upgrade_version_box'),
   classNames: ['span4', 'version-box'],
+  classNameBindings: ['versionClass'],
+
+  versionClass: function() {
+    return this.get('content.status') == 'CURRENT'
+      ? 'current-version-box' : '';
+  }.property('content.stackVersion.state'),
 
   /**
    * map containing version (id, label)
@@ -99,8 +105,14 @@ App.UpgradeVersionBoxView = Em.View.extend({
   didInsertElement: function(){
     App.tooltip($('.link-tooltip'), {title: Em.I18n.t('admin.stackVersions.version.linkTooltip')});
     App.tooltip($('.hosts-tooltip'), {title: Em.I18n.t('admin.stackVersions.version.hostsTooltip')});
+    App.tooltip($('.emply-hosts-tooltip'), {title: Em.I18n.t('admin.stackVersions.version.emptyHostsTooltip')});
   },
 
+  willDestroyElement: function() {
+    if ($('.tooltip').length > 0) {
+      $('.tooltip').remove();
+    }
+  },
   /**
    * run custom action of controller
    * @param {object} event
@@ -127,6 +139,7 @@ App.UpgradeVersionBoxView = Em.View.extend({
         return Em.Object.create({
           osType: os.get('osType'),
           isSelected: true,
+          isDisabled: Ember.computed.not('isSelected'),
           repositories: os.get('repositories').map(function (repository) {
             return Em.Object.create({
               repoName: repository.get('repoName'),
@@ -139,7 +152,7 @@ App.UpgradeVersionBoxView = Em.View.extend({
     });
 
     return App.ModalPopup.show({
-      classNames: ['modal-690px-width', 'repository-list'],
+      classNames: ['repository-list', 'sixty-percent-width-modal'],
       bodyClass: Ember.View.extend({
         content: repo,
         templateName: require('templates/main/admin/stack_upgrade/edit_repositories'),

ambari-web/app/views/main/admin/stack_upgrade/versions_view.js

@@ -114,15 +114,21 @@ App.MainAdminStackVersionsView = Em.View.extend({
         stackVersionType: version.get('stackVersionType'),
         stackVersionNumber: version.get('stackVersionNumber'),
         status: 'INIT',
-        notInstalledHosts: [],
+        notInstalledHosts: App.get('allHostNames'),
         installedHosts: [],
-        currentHosts: []
+        currentHosts: [],
+        noInstalledHosts: true,
+        noCurrentHosts: true,
+        noInitHosts: false
       });
       if (version.get('stackVersion')) {
         versionFormatted.set('status', version.get('stackVersion.state'));
         versionFormatted.set('notInstalledHosts', version.get('stackVersion.notInstalledHosts'));
         versionFormatted.set('installedHosts', version.get('stackVersion.installedHosts'));
         versionFormatted.set('currentHosts', version.get('stackVersion.currentHosts'));
+        versionFormatted.set('noInstalledHosts', version.get('stackVersion.noInstalledHosts'));
+        versionFormatted.set('noCurrentHosts', version.get('stackVersion.noCurrentHosts'));
+        versionFormatted.set('noInitHosts', version.get('stackVersion.noInitHosts'));
       }
       return versionFormatted;
     });

ambari-web/app/views/main/host.js

@@ -608,7 +608,7 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
      */
     versionlabels: function () {
       return this.get('content.stackVersions').filterProperty('isCurrent', false).map(function (version) {
-        return Em.I18n.t('hosts.host.stackVersions.table.labels').format(version.get('repoVersion'), version.get('displayStatus'));
+        return version.get('repoVersion');
       }).join("<br />");
     }.property('content.stackVersions.length'),