AMBARI-8397 Ambari View > Versions > View/Edit Version (with mock data). (atkach)

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

@@ -138,6 +138,7 @@
     <script src="scripts/controllers/clusters/ClustersManageAccessCtrl.js"></script>
     <script src="scripts/controllers/stackVersions/StackVersionsCreateCtrl.js"></script>
     <script src="scripts/controllers/stackVersions/StackVersionsListCtrl.js"></script>
+    <script src="scripts/controllers/stackVersions/StackVersionsEditCtrl.js"></script>
     <script src="scripts/directives/linkToDir.js"></script>
     <script src="scripts/directives/PasswordVerify.js"></script>
     <script src="scripts/directives/disabledTooltip.js"></script>

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

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+'use strict';
+
+angular.module('ambariAdminConsole')
+.controller('StackVersionsEditCtrl', ['$scope', 'StackVersions', '$routeParams', function($scope, StackVersions, $routeParams) {
+  function loadStackVersionInfo() {
+    return StackVersions.get($routeParams.id).then(function (stackVersion) {
+      loadStackRepositories(stackVersion);
+      $scope.stackVersion = stackVersion;
+    });
+  }
+
+  function loadStackRepositories(stackVersion) {
+    return StackVersions.getStackRepositories(stackVersion.stack).then(function (repositories) {
+      var repos = [];
+      repositories.forEach(function (repo) {
+        var installedRepo;
+        for (var i in stackVersion.repositories) {
+          if (stackVersion.repositories[i].os === repo.os) {
+            installedRepo = stackVersion.repositories[i];
+            break;
+          }
+        }
+        if (installedRepo) {
+          installedRepo.selected = true;
+          repos.push(installedRepo);
+        } else {
+          repo.selected = false;
+          repos.push(repo);
+        }
+      });
+      $scope.stackVersion.repositories = repos;
+    });
+  }
+
+  $scope.stackVersion;
+  $scope.skipValidation = false;
+  $scope.editVersionDisabled = true;
+  $scope.deleteEnabled = true;
+  $scope.toggleVersionEdit = function() {
+    $scope.editVersionDisabled = !$scope.editVersionDisabled;
+  };
+  $scope.save = function() {
+    $scope.editVersionDisabled = true;
+  };
+  $scope.cancel = function() {
+    $scope.editVersionDisabled = true;
+  };
+
+  loadStackVersionInfo();
+}]);

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/users/UsersShowCtrl.js

@@ -126,7 +126,7 @@ angular.module('ambariAdminConsole')
       })
       .catch(function() {
         $scope.user.active = !$scope.user.active;
-      });;
+      });
     }
   };    
   $scope.toggleUserAdmin = function() {
@@ -145,7 +145,7 @@ angular.module('ambariAdminConsole')
       })
       .catch(function() {
         $scope.user.admin = !$scope.user.admin;
-      });;
+      });
         
     }
   };    

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

@@ -90,6 +90,11 @@ angular.module('ambariAdminConsole')
       url: '/stackVersions/create',
       templateUrl: 'views/stackVersions/create.html',
       controller: 'StackVersionsCreateCtrl'
+    },
+    edit: {
+      url: '/stackVersions/:versionId/edit',
+      templateUrl: 'views/stackVersions/edit.html',
+      controller: 'StackVersionsEditCtrl'
     }
   },
   clusters: {

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

@@ -87,6 +87,122 @@ angular.module('ambariAdminConsole')
 
       deferred.resolve(parse(mockData));
       return deferred.promise;
+    },
+    get: function (version) {
+      var deferred = $q.defer();
+      var mockData = {
+        "RepositoryVersion": {
+          "id": "1",
+          "display_name": "HDP 2.2.0.1",
+          "stack": "HDP-2.2",
+          "version": "2.2.0.1-885",
+          "upgrade_pack": "pack1",
+          "repositories": [
+            {
+              "os": "redhat6",
+              "baseurls": [
+                {
+                  "id": "HDP-2.2.0.1-885",
+                  "type": "HDP",
+                  "baseurl": "http://host1/hdp"
+                },
+                {
+                  "id": "HDP-UTILS-1.0.0.20",
+                  "type": "HDP-UTILS",
+                  "baseurl": "http://host1/hdp-utils"
+                }
+              ]
+            }
+          ],
+          "deployment_info": [
+            {
+              "cluster": "myCluster",
+              "status": "CURRENT",
+              "totalHostCount": 100,
+              "hosts": ["host1", "host2"]
+            },
+            {
+              "cluster": "anotherCluster",
+              "status": "INSTALLED",
+              "totalHostCount": 100,
+              "hosts": ["host1", "host2"]
+            }
+          ]
+        }
+      };
+
+      deferred.resolve(mockData.RepositoryVersion);
+      return deferred.promise;
+    },
+    getStackRepositories: function () {
+      var deferred = $q.defer();
+      var mockData = {
+        "repositories": [
+          {
+            "os": "redhat5",
+            "baseurls": [
+              {
+                "id": "HDP-2.2.0.1-885",
+                "type": "HDP",
+                "baseurl": ""
+              },
+              {
+                "id": "HDP-UTILS-1.0.0.20",
+                "type": "HDP-UTILS",
+                "baseurl": ""
+              }
+            ]
+          },
+          {
+            "os": "redhat6",
+            "baseurls": [
+              {
+                "id": "HDP-2.2.0.1-885",
+                "type": "HDP",
+                "baseurl": ""
+              },
+              {
+                "id": "HDP-UTILS-1.0.0.20",
+                "type": "HDP-UTILS",
+                "baseurl": ""
+              }
+            ]
+          },
+          {
+            "os": "sles11",
+            "baseurls": [
+              {
+                "id": "HDP-2.2.0.1-885",
+                "type": "HDP",
+                "baseurl": ""
+              },
+              {
+                "id": "HDP-UTILS-1.0.0.20",
+                "type": "HDP-UTILS",
+                "baseurl": ""
+              }
+            ]
+          },
+          {
+            "os": "ubuntu12",
+            "baseurls": [
+              {
+                "id": "HDP-2.2.0.1-885",
+                "type": "HDP",
+                "baseurl": ""
+              },
+              {
+                "id": "HDP-UTILS-1.0.0.20",
+                "type": "HDP-UTILS",
+                "baseurl": ""
+              }
+            ]
+          }
+        ]
+      };
+
+      deferred.resolve(mockData.repositories);
+      return deferred.promise;
     }
   };
 }]);

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

@@ -474,7 +474,7 @@ a.gotoinstance{
   margin-left: 10px;
 }
 
-.create-view-form, .register-version-form{
+.create-view-form, .register-version-form, .edit-version-form {
   padding-bottom: 50px;
 }
 

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

@@ -17,7 +17,7 @@
 -->
 
 <ol class="breadcrumb">
-  <li><a href="#/clusters/{{clusterName}}/stackversions">Versions</a></li>
+  <li><a href="#/stackVersions">Versions</a></li>
   <li class="active">Register Version</li>
 </ol>
 <hr>

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

@@ -0,0 +1,118 @@
+<!--
+* 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.
+-->
+
+<div class="clearfix">
+  <ol class="breadcrumb pull-left">
+    <li><a href="#/stackVersions">Versions</a></li>
+    <li class="active">{{stackVersion.version}}</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
+      Version
+    </button>
+    <button ng-switch-when="true" class="btn btn-danger" ng-click="deleteInstance(stackVersion)">Deregister Version
+    </button>
+  </div>
+</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 class="pull-right" ng-switch="editVersionDisabled">
+        <a href ng-switch-when="true" ng-click="toggleVersionEdit()" ng-show="editVersionDisabled" class="settings-edit-toggle"> <span class="glyphicon glyphicon-pencil" ></span> Edit</a>
+        <span ng-switch-when="false"> <span class="glyphicon glyphicon-pencil" ></span> Edit</span>
+      </div>
+    </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">{{stackVersion.stack}}</div>
+      </div>
+      <div class="form-group">
+        <div class="col-sm-3"><label class="control-label">Upgrade Pack</label></div>
+        <div class="col-sm-9">{{stackVersion.upgrade_pack}}</div>
+      </div>
+      <div class="form-group">
+        <div class="col-sm-3"><label class="control-label">Version Name</label></div>
+        <div class="col-sm-3"><input type="text" class="form-control" placeholder="Version Name" ng-model="stackVersion.display_name" ng-disabled="editVersionDisabled"></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">
+      <h3 class="panel-title">Repositories</h3>
+    </div>
+    <div class="panel-body ">
+      <div class="alert alert-info" role="alert">
+        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>
+      <div class="clearfix border-bottom bottom-margin" ng-repeat="repository in stackVersion.repositories">
+        <div class="col-sm-3">
+          <div class="checkbox">
+            <label>
+              <input type="checkbox" ng-model="repository.selected"> {{repository.os}}
+            </label>
+          </div>
+        </div>
+        <div class="col-sm-9">
+          <div class="form-group" ng-repeat="baseUrl in repository.baseurls">
+            <div class="col-sm-4"><label class="control-label">{{baseUrl.type}}</label></div>
+            <div class="col-sm-8"><input type="text" class="form-control" ng-model="baseUrl.baseurl"></div>
+          </div>
+        </div>
+      </div>
+      <div class="clearfix">
+        <div class="col-sm-12">
+          <div class="checkbox">
+            <label>
+              <input type="checkbox" ng-model="skipValidation"> Skip Repository Base URL validation (Advanced) <span class="glyphicon glyphicon-question-sign" tooltip="Tooltip text"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-12">
+    <button class="btn btn-primary pull-right left-margin" ng-click="save()">Save</button>
+    <button class="btn btn-default pull-right" ng-click="cancel()">Cancel</button>
+  </div>
+</form>

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

@@ -56,9 +56,10 @@
     <tbody>
     <tr ng-repeat="stack in stacks">
       <td class="col-small">{{stack.name}}</td>
-      <td class="col-medium"><a href>{{stack.version}}</a></td>
+      <td class="col-medium"><a href="#/stackVersions/{{stack.version}}/edit">{{stack.version}}</a></td>
       <td class="col-small">
         <a href ng-show="stack.cluster">
+          <i class="glyphicon glyphicon-cloud"></i>
           {{stack.cluster}}
         </a>
         <span ng-show="!stack.cluster">None</span>