AMBARI-8386 Ambari View > Versions > Versions table (with mock data). (atkach)

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

@@ -136,6 +136,7 @@
     <script src="scripts/controllers/ambariViews/ViewsEditCtrl.js"></script>
     <script src="scripts/controllers/ambariViews/CreateViewInstanceCtrl.js"></script>
     <script src="scripts/controllers/clusters/ClustersManageAccessCtrl.js"></script>
+    <script src="scripts/controllers/stackVersions/StackVersionsListCtrl.js"></script>
     <script src="scripts/directives/linkToDir.js"></script>
     <script src="scripts/directives/PasswordVerify.js"></script>
     <script src="scripts/directives/disabledTooltip.js"></script>
@@ -151,6 +152,7 @@
     <script src="scripts/services/Auth.js"></script>
     <script src="scripts/services/GetDifference.js"></script>
     <script src="scripts/services/UnsavedDialog.js"></script>
+    <script src="scripts/services/StackVersions.js"></script>
     <!-- endbuild -->
 </body>
 </html>

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

@@ -0,0 +1,70 @@
+/**
+ * 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('StackVersionsListCtrl', ['$scope', 'StackVersions', '$routeParams', function ($scope, StackVersions, $routeParams) {
+  $scope.clusterName = $routeParams.clusterName;
+  $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'}
+      ],
+      current: null
+    },
+    version: '',
+    cluster: {
+      options: [
+        {label: 'All', value: ''},
+        {label: 'MyCluster', value: 'MyCluster'},
+        {label: 'Another Cluster', value: 'anotherCluster'}
+      ],
+      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,
+    itemsPerPage: 10,
+    currentPage: 1
+  };
+
+  $scope.tableInfo = {
+    total: 0,
+    showed: 0,
+    filtered: 0
+  };
+
+  $scope.stacks = [];
+
+  $scope.getStackVersions = function () {
+    return StackVersions.list($scope.filter).then(function (stacks) {
+      $scope.stacks = stacks;
+      $scope.tableInfo.total = stacks.length;
+      $scope.tableInfo.showed = stacks.length;
+    });
+  };
+  $scope.getStackVersions();
+}]);

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

@@ -80,7 +80,19 @@ angular.module('ambariAdminConsole')
       controller: 'CreateViewInstanceCtrl'
     }
   },
-  clusters:{
+  stackVersions: {
+    list: {
+      url: '/stackVersions',
+      templateUrl: 'views/stackVersions/list.html',
+      controller: 'StackVersionsListCtrl'
+    },
+    create: {
+      url: '/stackVersions/create',
+      templateUrl: 'views/stackVersions/create.html',
+      controller: 'StackVersionsCreateCtrl'
+    }
+  },
+  clusters: {
     manageAccess: {
       url: '/clusters/:id/manageAccess',
       templateUrl: 'views/clusters/manageAccess.html',

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

@@ -0,0 +1,92 @@
+/**
+ * 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')
+.factory('StackVersions', ['$http', '$q', 'Settings', function ($http, $q, Settings) {
+  var statusMap = {
+    'INSTALLED': {
+      label: 'Installed',
+      class: 'label-default'
+    },
+    'IN_USE': {
+      label: 'In Use',
+      class: 'label-info'
+    },
+    'CURRENT': {
+      label: 'Current',
+      class: 'label-success'
+    }
+  };
+  /**
+   * parse raw json to formatted objects
+   * @param data
+   * @return {Array}
+   */
+  function parse(data) {
+    data.forEach(function (item) {
+      var mapItem = statusMap[item.status];
+      if (mapItem) {
+        item.statusClass = mapItem.class;
+        item.statusLabel = mapItem.label;
+      }
+    });
+    return data;
+  }
+
+  return {
+    list: function (filter) {
+      var deferred = $q.defer();
+      var mockData = [
+        {
+          name: 'HDP 2.2',
+          version: 'HDP-2.2.8',
+          cluster: 'anotherCluster',
+          status: 'INSTALLED',
+          totalHosts: 100,
+          statusHosts: ['host1', 'host2']
+        },
+        {
+          name: 'HDP 2.2',
+          version: 'HDP-2.2.2',
+          cluster: '',
+          status: 'INIT'
+        },
+        {
+          name: 'HDP 2.2',
+          version: 'HDP-2.2.3',
+          cluster: 'MyCluster',
+          status: 'IN_USE',
+          totalHosts: 100,
+          statusHosts: ['host1', 'host2']
+        },
+        {
+          name: 'HDP 2.2',
+          version: 'HDP-2.2.4',
+          cluster: 'MyCluster',
+          status: 'CURRENT',
+          totalHosts: 100,
+          statusHosts: ['host1', 'host2']
+        }
+      ];
+
+      deferred.resolve(parse(mockData));
+      return deferred.promise;
+    }
+  };
+}]);

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

@@ -1247,5 +1247,23 @@ accordion .panel-group .panel{
   overflow: visible;
 }
 .break-word {
-    word-break: break-all;
+  word-break: break-all;
+}
+
+#stack-versions .table .col-small {
+  width: 15%
+}
+
+#stack-versions .table .col-medium {
+  width: 30%
+}
+
+#stack-versions .table-bar {
+  padding-top: 4px;
+  border: 1px solid #E4E4E4;
+  color: #7B7B7B;
+}
+
+#stack-versions .table-bar .filtered-info {
+  margin-top: 8px;
 }

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

@@ -62,7 +62,12 @@
         </ul>
         <span class="cluster-installation-progress-label" ng-show="cluster.Clusters.provisioning_state == 'INIT'"><a href="/#/">Cluster creation in progress...</a></span>
       </div>
-        
+
+      <ul class="nav nav-pills nav-stacked">
+        <li ng-class="{active: isActive('stackVersions.list')}">
+          <a href="#/stackVersions">Versions</a>
+        </li>
+      </ul>
       <div ng-hide="cluster">
         <ul class="nav nav-pills nav-stacked">
           <li><p class="noclusters">No clusters</p></li>

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

@@ -0,0 +1,94 @@
+<!--
+* 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 id="stack-versions">
+  <div class="clearfix">
+    <ol class="breadcrumb pull-left">
+      <li class="active">Versions</li>
+    </ol>
+    <div class="pull-right top-margin-4">
+      <a href class="btn btn-primary">
+        <span class="glyphicon glyphicon-plus"></span>
+        Register Version
+      </a>
+    </div>
+  </div>
+  <hr/>
+  <table class="table table-striped table-hover">
+    <thead>
+    <tr>
+      <th class="col-small">
+        <label>Stack</label>
+        <select class="form-control"
+                ng-model="filter.stack.current"
+                ng-options="item.label for item in filter.stack.options">
+        </select>
+      </th>
+      <th class="col-medium">
+        <label for="">Version</label>
+        <input type="text" class="form-control" ng-model="filter.version">
+      </th>
+      <th class="col-small">
+        <label>Cluster</label>
+        <select class="form-control"
+                ng-model="filter.cluster.current"
+                ng-options="item.label for item in filter.cluster.options"
+          ></select>
+      </th>
+      <th></th>
+    </tr>
+    </thead>
+    <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-small">
+        <a href ng-show="stack.cluster">
+          {{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.statusHosts.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>
+    </div>
+    <div class="pull-right left-margin">
+      <pagination class="paginator"
+                  total-items="pagination.totalStacks"
+                  max-size="pagination.maxVisiblePages"
+                  items-per-page="pagination.itemsPerPage"
+                  ng-model="pagination.currentPage"
+      ></pagination>
+    </div>
+    <div class="pull-right">
+      <select class="form-control"
+              ng-model="pagination.itemsPerPage"
+              ng-options="item for item in [10, 25, 50, 100]"
+        ></select>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+describe('#Cluster', function () {
+  describe('StackVersionsListCtrl', function() {
+    var scope, ctrl;
+
+    beforeEach(module('ambariAdminConsole', function($provide) {
+
+    }));
+
+    beforeEach(inject(function($rootScope, $controller) {
+      scope = $rootScope.$new();
+      ctrl = $controller('StackVersionsListCtrl', {$scope: scope});
+    }));
+
+    it('saves list of stacks', function() {
+      scope.getStackVersions().then(function() {
+        expect(Array.isArray(scope.stacks)).toBe(true);
+      });
+    });
+  });
+});