AMBARI-7376. Admin View: need to show "deploying" when view is still extracting. (yusaku)

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) {

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;
+}

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">