AMBARI-7376. Admin View: need to show "deploying" when view is still extracting. (yusaku)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/0cec52d5 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/0cec52d5 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/0cec52d5 Branch: refs/heads/branch-alerts-dev Commit: 0cec52d5f0bd9ce83af62f7050d7ec1d8a7bd74e Parents: 856ac44 Author: Yusaku Sako <yus...@hortonworks.com> Authored: Wed Sep 17 16:40:52 2014 -0700 Committer: Yusaku Sako <yus...@hortonworks.com> Committed: Wed Sep 17 16:40:52 2014 -0700 ---------------------------------------------------------------------- .../ui/admin-web/app/scripts/services/View.js | 16 ++-- .../resources/ui/admin-web/app/styles/main.css | 87 ++++++++++++++++++++ .../app/views/ambariViews/listTable.html | 19 ++++- 3 files changed, 111 insertions(+), 11 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/0cec52d5/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js index 8f3b376..960ac87 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js +++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js @@ -55,9 +55,13 @@ angular.module('ambariAdminConsole') self.view_name = item.ViewInfo.view_name; self.versions = ''; self.instances = []; + self.canCreateInstance = false; var versions = {}; angular.forEach(item.versions, function(version) { - versions[version.ViewVersionInfo.version] = version.instances.length; + versions[version.ViewVersionInfo.version] = {count: version.instances.length, status: version.ViewVersionInfo.status}; + if(version.ViewVersionInfo.status === 'DEPLOYED'){ // if atelast one version is deployed + self.canCreateInstance = true; + } angular.forEach(version.instances, function(instance) { instance.label = instance.ViewInstanceInfo.label || version.ViewVersionInfo.label || instance.ViewInstanceInfo.view_name; @@ -65,14 +69,8 @@ angular.module('ambariAdminConsole') self.instances = self.instances.concat(version.instances); }); + self.versions = versions; - for(var ver in versions){ - if(versions.hasOwnProperty(ver)){ - self.versions += (self.versions ? ', ' : '') + ver +' ('+versions[ver]+')'; - } - } - - // self.isOpened = !self.instances.length; self.versionsList = item.versions; } @@ -145,7 +143,7 @@ angular.module('ambariAdminConsole') $http({ method: 'GET', - url: Settings.baseUrl + '/views/'+viewName + url: Settings.baseUrl + '/views/'+viewName + '?versions/ViewVersionInfo/status=DEPLOYED' }).success(function(data) { var versions = []; angular.forEach(data.versions, function(version) { http://git-wip-us.apache.org/repos/asf/ambari/blob/0cec52d5/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css index 9b41f63..d6237db 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css +++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css @@ -1011,3 +1011,90 @@ button.btn.btn-xs{ -o-transition: none!important; transition: none!important; } + + +.viewstatus{ + display: inline-block; +} +.viewstatus.pending{ + width: 12px; + height: 12px; + border: 2px solid black; + border-radius: 50%; + vertical-align: middle; + position: relative; + border-radius: 50%; +} + +.viewstatus.pending:before, .viewstatus.pending:after{ + content: ''; + position: absolute; + left: 4px; + top: 3px; + width: 5px; + height: 2px; + background: black; +} +.viewstatus.pending:after{ + top: -3px; + left: 3px; + width: 2px; + height: 2px; + border-radius: 100%; +} +.viewstatus.pending:before{ + -webkit-transform-origin: 0% 50%; + -moz-transform-origin: 0% 50%; + -ms-transform-origin: 0% 50%; + -o-transform-origin: 0% 50%; + transform-origin: 0% 50%; + + animation: rotate 2.0s infinite linear; + -webkit-animation: rotate 2.0s infinite linear; +} + +@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} +@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} + + +.viewstatus.deploying{ + width: 17px; + height: 12px; + text-align: center; + vertical-align: middle; +} +.viewstatus.deploying > div{ + background: black; + height: 100%; + width: 3px; + display: inline-block; + -webkit-animation: stretchdelay 1.2s infinite ease-in-out; + animation: stretchdelay 1.2s infinite ease-in-out; +} +.viewstatus.deploying .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} +.viewstatus.deploying .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +@-webkit-keyframes stretchdelay { + 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } + 20% { -webkit-transform: scaleY(1.0) } +} + +@keyframes stretchdelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } +} + +accordion .panel-group .panel{ + overflow: visible; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/0cec52d5/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listTable.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listTable.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listTable.html index e27c5e5..d2ab32a 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listTable.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listTable.html @@ -45,7 +45,22 @@ <i class="glyphicon glyphicon-chevron-right" ng-class="{'opened': view.isOpened}"></i> {{view.view_name}} </div> - <div class="col-sm-3">{{view.versions}}</div> + <div class="col-sm-3"> + <span ng-repeat="(version, vData) in view.versions"> + {{version}} + <span ng-switch="vData.status"> + <span ng-switch-when="PENDING" class="viewstatus pending" ng-switch-when="true" tooltip="Pending..."></span> + <div class="viewstatus deploying" ng-switch-when="DEPLOYING" tooltip="Deploying..."> + <div class="rect1"></div> + <div class="rect2"></div> + <div class="rect3"></div> + </div> + <span ng-switch-when="DEPLOYED">({{vData.count}})</span> + <span ng-switch-when="ERROR" tooltip="Error deploying. Check Ambari Server log."><i class="fa fa-exclamation-triangle"></i></span> + </span> + {{$last ? '' : ', '}} + </span> + </div> <div class="col-sm-6">{{view.description}}</div> </div> </accordion-heading> @@ -65,7 +80,7 @@ <tr> <td class="col-sm-3"></td> <td class="col-sm-3"> - <a class="btn btn-default createisntance-btn" href="#/views/{{view.view_name}}/versions/{{view.versionsList[view.versionsList.length-1].ViewVersionInfo.version}}/new"><span class="glyphicon glyphicon-plus" ></span> Create Instance</a> + <a class="btn btn-default createisntance-btn {{view.canCreateInstance ? '' : 'disabled'}}" href="#/views/{{view.view_name}}/versions/{{view.versionsList[view.versionsList.length-1].ViewVersionInfo.version}}/new"><span class="glyphicon glyphicon-plus" ></span> Create Instance</a> </td> <td class="col-sm-3"></td> <td class="col-sm-3">
