Add in status and connect icons

hawtio · May 23, 2013 · 9217ca2 · 9217ca2
1 parent caaf424
commit 9217ca2
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 10 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts b/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts
@@ -362,6 +362,9 @@ $(function () {
     adjustHeight();
     $(window).resize(adjustHeight);
 
+    var tmp:any = window;
+    tmp.less.watch();
+
   });
 });
 

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/fabricView.html b/hawtio-web/src/main/webapp/app/fabric/html/fabricView.html
@@ -15,10 +15,20 @@
           <div ng-repeat="container in containers" ng-show="filterContainer(container)">
             <div class="box" ng-class="isSelectedContainer(container)" id="container#{{container.id}}" data-drop="true" jqyoui-droppable="{multiple: false, stack: true, onDrop: 'handleDrop', index: $index}">
 
-              <input type="checkbox" ng-model="container.selected">
+              <div class="box-left">
 
-              <div ng-click="setActiveContainer(container)">
-                {{container.id}}
+                <input type="checkbox" ng-model="container.selected">
+
+                <div ng-click="setActiveContainer(container)">
+                  {{container.id}}
+                </div>
+              </div>
+
+              <div class="box-right">
+                <a href="" ng-show="container.jolokiaUrl && container.alive" title="Open a new window and connect to this container" ng-click="connect(container)">
+                  <i class="icon1point5x icon-signin"></i>
+                </a>                
+                <i class="icon1point5x" title="{{getTitle(container)}}" ng-class='statusIcon(container)'></i>
               </div>
 
             </div>
@@ -70,18 +80,18 @@
           <a href="" ng-click="setActiveProfile(null)">Show All</a>
         </div>
         <div class="canvas">
-
           <div ng-repeat="profile in activeProfiles" ng-show="filterActiveProfile(profile)">
             <div class="box">
 
-              <a href="" ng-click="removeActiveProfiles(profile)" ng-show="(activeContainerId && activeContainerId != '') || selectedContainers.length > 0">
-                <i class="icon-remove"></i>
-              </a>
-
-              <div ng-click="setActiveProfile(profile.id)">
+              <div class="active-profile">
+                <i class="icon-remove clickable" style="display: inline;" ng-click="removeActiveProfiles(profile)" ng-show="(activeContainerId && activeContainerId != '') || selectedContainers.length > 0"></i>
+
 
-                {{profile.versionId}} / {{profile.id}} ({{profile.count}})
+                <div ng-click="setActiveProfile(profile)">
+                  {{profile.versionId}} / {{profile.id}} ({{profile.count}})
+                </div>
               </div>
+
             </div>    
           </div>
         </div>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/fabricView.ts b/hawtio-web/src/main/webapp/app/fabric/js/fabricView.ts
@@ -233,6 +233,57 @@ module Fabric {
       return answer;
     };
 
+
+    $scope.statusIcon = (row) => {
+      if (row) {
+        if (row.alive) {
+          switch(row.provisionResult) {
+            case 'success':
+              return "green icon-play-circle";
+            case 'downloading':
+              return "icon-download-alt";
+            case 'installing':
+              return "icon-hdd";
+            case 'analyzing':
+            case 'finalizing':
+              return "icon-refresh icon-spin";
+            case 'resolving':
+              return "icon-sitemap";
+            case 'error':
+              return "red icon-warning-sign";
+          }
+        } else {
+          return "orange icon-off";
+        }
+      }
+      return "icon-refresh icon-spin";
+    };
+
+
+
+    $scope.connect = (row) => {
+      if (row) {
+        // TODO lets find these from somewhere! :)
+        var userName = "admin";
+        var password = "admin";
+        Fabric.connect(row, userName, password, true);
+      }
+    };
+
+
+    $scope.getTitle = (container) => {
+      var answer = 'Alive';
+
+      if (!container.alive) {
+        answer = 'Not Running';
+      } else {
+        answer += ' - ' + humanizeValue(container.provisionResult);
+      }
+
+      return answer;
+    }
+
+
     $scope.containersForVersion = (id) => {
       var count = $scope.containers.findAll((container) => { return container.versionId === id }).length;
       if (count === 0) {